From 57054f86544ca7ce8e913aed8c0856d54ee07be7 Mon Sep 17 00:00:00 2001
From: Alec Dilanchian <alec.dilanchian@gmail.com>
Date: Sun, 20 Nov 2022 21:29:16 -0500
Subject: [PATCH] Adding css and adding prompt chainging

---
 assets/buildspace-logo.png | Bin 1898 -> 1561 bytes
 package.json               |   1 -
 pages/_app.js              |   9 +-
 pages/api/generate.js      |  28 ++++-
 pages/index.js             | 202 ++++++++++---------------------------
 pages/styles.css           | 161 +++++++++++++++++++++++++++++
 6 files changed, 242 insertions(+), 159 deletions(-)
 create mode 100644 pages/styles.css

diff --git a/assets/buildspace-logo.png b/assets/buildspace-logo.png
index 030570a867567ea4491dc40216fbedecab974a69..2000b807da0d56552be18a72b0439b4fbf011946 100644
GIT binary patch
delta 1529
zcmV<V1qS-+4w(!giBL{Q4GJ0x0000DNk~Le0001w0001Z2nGNE0L%2DGLa!Pe+8~d
zL_t(|0qvblcH}e^g+G1<46}r{ge<{BhU_3>1!M=V9ncIJxmf{+6&PmB=p87mpqVlX
z7OrZFoJvx$E$Kb^edpX$89B0iOS+cjSKyq}P3k9&lRi#*JnD~0KTirc&J%8#4fA+~
zB5oq*$ah?4nx`5j-Qet&G(|nGe^8pv+(0{It#QsrAZJHxWgIuq&RCjpUeotDO>;*c
z<DAsvG)ZpbxPcnw8_F2R4b&KE0q}gaxRma2Oe54WjvL50!u%-Vv7(Z3Z*fc^)HjYB
z$RL6q<D3+a?Q#?&=rfKR$O!2{rAFhpft1su+c<6@#nikdf2({ehav<!f5veGDa6vq
zbJBoezMvicp7b@gNb5f`=@$&rl6iig^cnLT5SBPCApV9iS~5@KS8N)nJARroP>Tq9
z7YkofkE4bI_JZ_1jv8drdu$o#4o4LMTT|H`jyew5FpqELP>Nt<6mkP8CZOL$seOW@
z5<&kRnHxwk>EdWMk4gi5e~x1XVXh&h=1IJp#}<Mj1G#zZajIfg9XF3nl7R*)^CddC
z<-hfehe;nM{e|-q;rRJ2J0#89J<s1Jr|P3Z86x`cww_bZ&gi&)ZDk<8i6Zc5SUo#o
zX}OcsK|&rPY<3~tK$#HMt>#AZ)Ig4~$px&fruPC3Y|}}Rc?8>vf4EV*H0X{75w`EB
zfo-O;n4xVo)zKI^OS=uMGf~Xgwi;?~E60Jn9Tr(W=f})#Ytle1tuPC7E#!#*ut*}U
zqh(zyD`}omE5^b+jg9yo7@?7V=%_P%CnL!#ZHtxKR!Wfu3{-Q+UeEJe8DhnDl{Ap)
zsvHOEcVM{Cu2{KUf2Cx;tc!-yZ;}76g+v8yDy0#_2zoBopsYP5&)Y0%=zNc@4sT87
zf8t5dU%|9x^{k+FeV(-T^W&sHnO8%-MqgRF<L9EfKw64BrERA_Fc)S@Ci)7e6y5Q&
ziNaEX=b;*EYA=v5-&R`b{1$XaV+8hhD_v6^4RXLuR6@;`e{~T&50x^I&?v&ZSH;o=
zv8G7lTUr7>m8mw6px=Q3H<20xb<DTP=lgHc-vfG$BzPXmrK`7c^j92gz)j=^dP4t(
zgMCEzE3N^b%C^?X3!S~>fDzqqD+Js`Tk60C;>v@jVNKA9OnQgj3t~-j-nn7J0}pr}
zYF+QnJ9XUnf8g5lP=`-tYp?IW;rS-xKZ$rAYE@n8z}o`<NP8ZN=(;c#be~=~F0u79
z88o6Z4?W;4;U<}<WYy8YJPP$V<|%ESL>lQ1cr^>_d^r74^Br;xc_^YMOIXqEsl>`p
z)I)O~axU}0*~rtO!_CP=J>`k$`(|rac-n!QmhU5FfAdg8=S9+}$b~!f8}xPJNSUcj
z+j(o&vn7m0X-5v^HIc@1)~ExoAWAzkwW%i$8qZgg(%pFA4csg3)X4UENaJ~G(a6G4
zU(maSVev^_AVQHgTT)to>(~H6?|V`M>rE8N+eS-DQ&g6s2Z1*8kj8VWp#udTln2_%
zLmJPef22kVukH)&<e^xhjT*FBu33tp*F*!?nJ89nXK7{2HA@ND%|ja7oy#-_6xV(X
z*vms2+q<<!jO<zv^iE}$enu!NZR=L1=`e_3BM(KTZCoRDxn?N=y;GUi$1rP5bD+VR
z)&XBr$*GaXcVi0v-gpkvbnFPh-y2`6W^&C^f6~shh^>pJ!88Z_w>mx%a1&jl5r50%
zB7*0kmrT>)yo%s?=%hDq0d;2foQFKuY(!vRCc5+p#aV&SejXa}T$2@{y*%W(rZ6q!
zA<s3H3D`7|=Ncsl^EcRnX+}KPs6^14hdkF9p+nD9=DEfwfx0I0Tw@%ed>$I{T+<Xn
zPyRd<@m$k19otW3o@;hSU>g$+c&^zc!ty*c;<?7*ZS{xJXccgrCkXSC`!uSYSH(|;
fNz+q@^ND`|yHBt^Y4WUz00000NkvXXu0mjfl11Au

delta 1869
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
Hu0mjfI^&v9

diff --git a/package.json b/package.json
index a4d9a30..6cac4f8 100644
--- a/package.json
+++ b/package.json
@@ -9,7 +9,6 @@
     "lint": "next lint"
   },
   "dependencies": {
-    "@chakra-ui/react": "^2.4.1",
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "eslint": "8.27.0",
diff --git a/pages/_app.js b/pages/_app.js
index b19eb75..e139a05 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -1,11 +1,6 @@
-import { ChakraProvider } from '@chakra-ui/react';
-
+import './styles.css';
 const App = ({ Component, pageProps }) => {
-  return (
-    <ChakraProvider>
-      <Component {...pageProps} />
-    </ChakraProvider>
-  );
+  return <Component {...pageProps} />;
 };
 
 export default App;
diff --git a/pages/api/generate.js b/pages/api/generate.js
index f3f4fcc..a0c3515 100644
--- a/pages/api/generate.js
+++ b/pages/api/generate.js
@@ -6,15 +6,35 @@ const configuration = new Configuration({
 
 const openai = new OpenAIApi(configuration);
 
+const basePromptPrefix =
+  'Help me write lyrics in the style of Drake, Canadian Rapper\n';
+const finalPromptPrefix = 'Take the lyrics below and generate 5 song titles:\n';
+
 const generateAction = async (req, res) => {
-  const completion = await openai.createCompletion({
+  // Run first prompt
+  const baseCompletion = await openai.createCompletion({
     model: 'text-davinci-002',
-    prompt: req.body.input,
+    prompt: `${basePromptPrefix}${req.body.input}`,
     temperature: 0.7,
+    max_tokens: 2048,
   });
 
-  const choice = completion.data.choices.pop();
-  res.status(200).json({ choice });
+  const baseChoice = baseCompletion.data.choices.pop();
+
+  // Run second prompt with prefix
+  const finalPrompt = `${finalPromptPrefix}${req.body.input}${baseChoice.text}`;
+  console.log(finalPrompt);
+
+  const prefixCompletion = await openai.createCompletion({
+    model: 'text-davinci-002',
+    prompt: finalPrompt,
+    temperature: 0.7,
+    max_tokens: 2048,
+  });
+
+  const finalChoice = prefixCompletion.data.choices.pop();
+
+  res.status(200).json({ baseChoice, finalChoice });
 };
 
 export default generateAction;
diff --git a/pages/index.js b/pages/index.js
index 8365435..aac220c 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,21 +1,10 @@
 import { useCallback, useEffect, useState } from 'react';
 import Image from 'next/image';
-import {
-  Box,
-  Text,
-  Flex,
-  VStack,
-  Textarea,
-  Link,
-  Kbd,
-  Spinner,
-  HStack,
-} from '@chakra-ui/react';
 import buildspaceLogo from '../assets/buildspace-logo.png';
 
 const Home = () => {
   const [input, setInput] = useState('');
-  const [finishReason, setFinishReason] = useState('');
+  const [output, setOutput] = useState('');
   const [isGenerating, setIsGenerating] = useState(false);
 
   const onChange = (event) => {
@@ -33,150 +22,69 @@ const Home = () => {
     });
 
     const data = await response.json();
-    const { choice } = data;
+    const { baseChoice, finalChoice } = data;
+
+    setOutput(
+      `Song Titles:${finalChoice.text}\n\nLyrics:\n${input}${baseChoice.text}`
+    );
 
     setIsGenerating(false);
-
-    setFinishReason(choice.finish_reason);
-
-    if (choice.finish_reason === 'stop') {
-      console.log('end of the completion!');
-    }
-
-    setInput((prevState) => {
-      return prevState + choice.text;
-    });
   }, [input]);
 
-  useEffect(() => {
-    const scratchPadText = localStorage.getItem('scratchpad');
-    setInput(scratchPadText);
-  }, []);
-
-  useEffect(() => {
-    const keydownHandler = async (event) => {
-      if ((event.metaKey || event.ctrlKey) && event.code === 'Enter') {
-        event.preventDefault();
-        await generateAction();
-      }
-      localStorage.setItem('scratchpad', input);
-    };
-
-    window.addEventListener('keydown', keydownHandler);
-
-    return () => {
-      window.removeEventListener('keydown', keydownHandler);
-    };
-  }, [input, generateAction]);
-
   return (
-    <Flex position="relative" minHeight="100vh">
-      <Flex
-        position="absolute"
-        h="100%"
-        w="100%"
-        bgColor="black"
-        flexDirection="column"
-        letterSpacing="-0.08em"
-      >
-        <VStack
-          w="100%"
-          height="100%"
-          spacing={5}
-          color="white"
-          justifyContent="center"
-          alignItems="center"
-        >
-          <VStack padding={3}>
-            <Text color="white" fontWeight="bold" fontSize="5xl" pl={3} pt={1}>
-              Scratchpad
-            </Text>
-            <Text color="white" fontSize="2xl" textAlign="center">
-              Write your own song, movie script, or anime in 2 minutes.
-            </Text>
-          </VStack>
-          <Box
-            h={{ base: '250px', md: '350px', lg: '400px' }}
-            w={{ base: '80%', md: '60%', lg: '50%' }}
-            position="relative"
-          >
-            {isGenerating && (
-              <Flex
-                position="absolute"
-                zIndex="1"
-                w="100%"
-                h="100%"
-                justifyContent="center"
-                alignItems="center"
-              >
-                <Spinner size="lg" />
-              </Flex>
-            )}
-            {!isGenerating && finishReason === 'stop' && (
-              <Flex
-                position="absolute"
-                zIndex="1"
-                bottom={0}
-                right={0}
-                bgColor="white"
-                padding={2}
-                mb={3}
-                mr={2}
-                borderRadius={5}
-              >
-                <Text color="black" fontWeight="bold" letterSpacing="-0.01em">
-                  Keep writing to generate more!
-                </Text>
-              </Flex>
-            )}
-            <Textarea
-              w="100%"
-              h="100%"
-              fontSize="18px"
-              variant="outline"
-              placeholder="type here to get started"
+    <div className="root">
+      <div className="container">
+        <div className="content">
+          <div className="header">
+            <p className="header-title">Scratchpad</p>
+            <p className="header-subtitle">
+              Write your first song in the style of your favorite artist.
+            </p>
+          </div>
+          <div className="text-container">
+            <textarea
+              className="text-area"
+              placeholder="write some lyrics here to get started"
               value={input}
               onChange={onChange}
-              isDisabled={isGenerating}
-              bgColor="gray.900"
             />
-            <Flex>
-              <Text
-                pt={2}
-                fontSize="lg"
-                fontWeight="bold"
-                letterSpacing="-0.01em"
-              >
-                Press <Kbd color="gray.700">ctrl</Kbd> or{' '}
-                <Kbd color="gray.700">cmd</Kbd> +{' '}
-                <Kbd color="gray.700">enter</Kbd> to have your AI writer to help
-                you generate the rest!
-              </Text>
-            </Flex>
-          </Box>
-
-          <HStack
-            w="100%"
-            position="absolute"
-            bottom={0}
-            justifyContent="center"
-            pb={5}
+            <textarea
+              className="text-area"
+              placeholder="your lyrics and song titles will go here"
+              value={output}
+              disabled
+            />
+          </div>
+          <button
+            className="generate-button"
+            onClick={generateAction}
+            disabled={isGenerating}
           >
-            <Image src={buildspaceLogo} width={25} alt="buildspace logo" />
-            <Text fontSize="lg">
-              build on{' '}
-              <Link
-                color="blue.300"
-                href="https://buildspace.so/builds/ai-writer"
-                isExternal
-              >
-                buildspace
-              </Link>
-            </Text>
-          </HStack>
-        </VStack>
-      </Flex>
-    </Flex>
+            {isGenerating ? (
+              <div class="lds-ring">
+                <div></div>
+                <div></div>
+                <div></div>
+                <div></div>
+              </div>
+            ) : (
+              <p>Generate</p>
+            )}
+          </button>
+        </div>
+        <div className="footer">
+          <Image src={buildspaceLogo} width={25} alt="buildspace logo" />
+          <p>build on</p>
+          <a
+            href="https://buildspace.so/builds/ai-writer"
+            target="_blank"
+            rel="noreferrer"
+          >
+            buildspace
+          </a>
+        </div>
+      </div>
+    </div>
   );
 };
 
diff --git a/pages/styles.css b/pages/styles.css
new file mode 100644
index 0000000..265011f
--- /dev/null
+++ b/pages/styles.css
@@ -0,0 +1,161 @@
+body {
+    margin: 0;
+    font-family: SF Pro Display, Inter, serif;
+}
+
+.root {
+    display: flex;
+    min-height: 100vh;
+    background-color: #fff;
+    font-family: SF Pro Display,
+        serif;
+}
+
+.container {
+    display: flex;
+    width: 100%;
+    flex-direction: column;
+    justify-content: center;
+    align-items: center;
+}
+
+.content {
+    display: flex;
+    flex-direction: column;
+    width: 50%;
+    height: 100%;
+    color: #000;
+    justify-content: center;
+    align-items: center;
+}
+
+.header {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+.header-title {
+    font-weight: bold;
+    font-size: 2.5rem;
+    margin: 0;
+    padding-top: 1em;
+    letter-spacing: -0.04em;
+}
+
+.header-subtitle {
+    text-align: center;
+    font-size: 1rem;
+}
+
+.text-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 100%
+}
+
+.text-area {
+    font-family: SF Pro Display,
+            serif;
+    color: #000;
+    width: 100%;
+    height: 400px;
+    font-size: 14px;
+    border-radius: 5px;
+    margin-left: 10px;
+    margin-right: 10px;
+    padding: 5px;
+    background-color: #EDF2F7;
+    border-color: rgba(118, 118, 118, 0.3);
+    border-width: 2px;
+}
+
+.text-area-output {
+    position: relative;
+}
+
+.generate-button {
+    width: 40%;
+    font-family: Inter,
+            sans-serif;
+    border-radius: 5px;
+    padding-top: 10px;
+    padding-bottom: 10px;
+    padding-left: 10px;
+    padding-right: 10px;
+    margin-top: 20px;
+    border-style: none;
+    cursor: pointer;
+    font-weight: bold;
+    font-size: 14px;
+}
+
+.generate-button p {
+    margin: 0;
+}
+
+.generate-button:disabled {
+    background-color: #d2d2d2;
+}
+
+.footer {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 10px;
+}
+
+.footer p {
+    padding-left: 5px;
+}
+
+.footer a {
+    text-decoration: none;
+    font-weight: 500;
+    color:#63b3ed;
+    padding-left: 5px;
+}
+
+ /* Loading ring animation */
+.lds-ring {
+    display: inline-block;
+    position: relative;
+    width: 20px;
+    height: 20px;
+}
+
+.lds-ring div {
+    box-sizing: border-box;
+    display: block;
+    position: absolute;
+    width: 18px;
+    height: 18px;
+    margin: 4px;
+    border: 2px solid #000;
+    border-radius: 50%;
+    animation: lds-ring 1.2s cubic-bezier(0.5, 0, 0.5, 1) infinite;
+    border-color: #000 transparent transparent transparent;
+}
+
+.lds-ring div:nth-child(1) {
+    animation-delay: -0.45s;
+}
+
+.lds-ring div:nth-child(2) {
+    animation-delay: -0.3s;
+}
+
+.lds-ring div:nth-child(3) {
+    animation-delay: -0.15s;
+}
+
+@keyframes lds-ring {
+    0% {
+        transform: rotate(0deg);
+    }
+
+    100% {
+        transform: rotate(360deg);
+    }
+}
\ No newline at end of file