Creating starter branch

pages/api/generate.js

@@ -1,39 +0,0 @@
-import { Configuration, OpenAIApi } from 'openai';
-
-const configuration = new Configuration({
-  apiKey: process.env.OPENAI_API_KEY,
-});
-
-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) => {
-  // Run first prompt
-  const baseCompletion = await openai.createCompletion({
-    model: 'text-davinci-002',
-    prompt: `${basePromptPrefix}${req.body.input}`,
-    temperature: 0.7,
-    max_tokens: 2048,
-  });
-
-  const baseChoice = baseCompletion.data.choices.pop();
-
-  // Run second prompt with prefix
-  const finalPrompt = `${finalPromptPrefix}${req.body.input}${baseChoice.text}`;
-
-  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;

pages/index.js

@@ -1,53 +1,7 @@
-import { useCallback, useEffect, useState } from 'react';
 import Image from 'next/image';
 import buildspaceLogo from '../assets/buildspace-logo.png';
 
 const Home = () => {
-  const [input, setInput] = useState('');
-  const [output, setOutput] = useState('');
-  const [isGenerating, setIsGenerating] = useState(false);
-
-  const onChange = (event) => {
-    setInput(event.target.value);
-  };
-
-  const generateAction = useCallback(async () => {
-    if (isGenerating) return;
-
-    setIsGenerating(true);
-    const response = await fetch('/api/generate', {
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json',
-      },
-      body: JSON.stringify({ input }),
-    });
-
-    const data = await response.json();
-    const { baseChoice, finalChoice } = data;
-
-    setOutput(
-      `Song Titles:${finalChoice.text}\n\nLyrics:\n${input}${baseChoice.text}`
-    );
-
-    setIsGenerating(false);
-  }, [input, isGenerating]);
-
-  useEffect(() => {
-    const keydownHandler = async (event) => {
-      if ((event.metaKey || event.ctrlKey) && event.code === 'Enter') {
-        event.preventDefault();
-        await generateAction();
-      }
-    };
-
-    window.addEventListener('keydown', keydownHandler);
-
-    return () => {
-      window.removeEventListener('keydown', keydownHandler);
-    };
-  }, [generateAction]);
-
   return (
     <div className="root">
       <div className="container">
@@ -60,39 +14,6 @@ const Home = () => {
             <h2>Write your first song in the style of your favorite artist.</h2>
           </div>
         </div>
-        <div className="prompt-container">
-          <textarea className="prompt-box" value={input} onChange={onChange} />
-          <div className="prompt-buttons">
-            <div className="key-stroke">
-              <p>cmd/ctrl + enter</p>
-            </div>
-            <div className="or">
-              <p>OR</p>
-            </div>
-            <a
-              className={
-                isGenerating ? 'generate-button loading' : 'generate-button'
-              }
-              onClick={generateAction}
-            >
-              <div className="generate">
-                {isGenerating ? <span class="loader"></span> : <p>Generate</p>}
-              </div>
-            </a>
-          </div>
-        </div>
-        {output && (
-          <div className="output">
-            <div className="output-header-container">
-              <div className="output-header">
-                <h3>Output</h3>
-              </div>
-            </div>
-            <div className="output-content">
-              <p>{output}</p>
-            </div>
-          </div>
-        )}
       </div>
       <div className="badge-container grow">
         <a