\n AI Lyrics Generator\n

[
  {
    "path": ".gitignore",
    "content": "# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.\n\n# dependencies\n/node_modules\n/.pnp\n.pnp.js\n\n# testing\n/coverage\n\n# next.js\n/.next/\n/out/\n\n# production\n/build\n\n# misc\n.DS_Store\n*.pem\n\n# debug\nnpm-debug.log*\nyarn-debug.log*\nyarn-error.log*\n\n# local env files\n.env.local\n.env.development.local\n.env.test.local\n.env.production.local\n\n# vercel\n.vercel\n"
  },
  {
    "path": "README.md",
    "content": "## A Demo GPT-3 Powered Web App, created using NextJS & ReactJS\n\n## QuickStart\n1. Clone this repo\n2. update the OpenAI key in .env.local file:\n    Sample .env.local file\n    \n    OPENAI_API_KEY=your-api-key\n    \n4. Install node modules\n5. start the dev server with \"yarn dev\" or \"npm run dev\" command\n\nFor a Detailed How to Guide, on how to create this yourself, checkout this [blog post](https://harishgarg.com/writing/how-to-build-a-serverless-gpt-3-powered-using-nextjs-react/).\n\n* [Follow me on Twitter](https://twitter.com/harishkgarg).\n\n* [Buy Me Coffee](https://www.buymeacoffee.com/harishgarg)\n"
  },
  {
    "path": "package.json",
    "content": "{\n  \"name\": \"gpt-3-app\",\n  \"version\": \"0.1.0\",\n  \"private\": true,\n  \"scripts\": {\n    \"dev\": \"next dev\",\n    \"build\": \"next build\",\n    \"start\": \"next start\"\n  },\n  \"dependencies\": {\n    \"next\": \"10.0.9\",\n    \"openai-api\": \"^1.0.17\",\n    \"react\": \"17.0.1\",\n    \"react-dom\": \"17.0.1\"\n  }\n}\n"
  },
  {
    "path": "pages/_app.js",
    "content": "import '../styles/globals.css'\n\nfunction MyApp({ Component, pageProps }) {\n  return <Component {...pageProps} />\n}\n\nexport default MyApp\n"
  },
  {
    "path": "pages/api/openai.js",
    "content": "const OpenAI = require('openai-api');\nconst openai = new OpenAI(process.env.OPENAI_API_KEY);\n\nexport default async (req, res) => {\n  let prompt = `Artist: ${req.body.name}\\n\\nLyrics:\\n`;\n  const gptResponse = await openai.complete({\n    engine: 'davinci',\n    prompt: prompt,\n    maxTokens: 50,\n    temperature: 0.7,\n    topP: 1,\n    presencePenalty: 0,\n    frequencyPenalty: 0.5,\n    bestOf: 1,\n    n: 1\n});\n  \n  res.status(200).json({text: `${gptResponse.data.choices[0].text}`})\n}\n"
  },
  {
    "path": "pages/index.js",
    "content": "import Head from \"next/head\";\nimport styles from \"../styles/Home.module.css\";\nimport { useState, useEffect } from 'react';\n\nexport default function Home() {\n  const [data, setData] = useState( { text:'' });\n  const [query, setQuery] = useState();\n  const [search, setSearch] = useState();\n  const [isLoading, setIsLoading] = useState(false);\n \n  useEffect(() => {\n    const fetchData = async () => {\n      if (search) {\n      setIsLoading(true);\n      const res = await fetch(`/api/openai`, {\n        body: JSON.stringify({\n          name: search\n        }),\n        headers: {\n          'Content-Type': 'application/json'\n        },\n        method: 'POST'\n      })\n      const data = await res.json();\n      setData(data);\n      setIsLoading(false);\n    }};\n \n    fetchData();\n  }, [search]);\n  return (\n    <div className={styles.container}>\n      <Head>\n        <title>GPT-3 App</title>\n        <link rel=\"icon\" href=\"/favicon.ico\" />\n      </Head>\n\n      <main className={styles.main}>\n        <h1 className={styles.title}>\n          <a>AI Lyrics Generator</a>\n        </h1>\n\n        <p className={styles.description}>Built with NextJS & GPT-3 API</p>\n\n        <div className={styles.grid}>\n          <div className={styles.card}>\n            <h3>Enter Artist:</h3>\n            <input\n          type=\"text\"\n          value={query}\n          onChange={event => setQuery(event.target.value)}\n        />\n        <button\n          type=\"button\"\n          onClick={() =>\n            setSearch(query)\n          }\n        >\n          Generate\n        </button>\n        \n          <h4>Lyrics</h4>  \n          {isLoading ? (\n            <div>Loading ...</div>\n         ) : (\n           <span>\n           {data.text}\n           </span>\n           )}\n        \n          </div>\n        </div>\n      </main>\n    </div>\n  );\n}"
  },
  {
    "path": "styles/Home.module.css",
    "content": ".container {\n  min-height: 100vh;\n  padding: 0 0.5rem;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.main {\n  padding: 5rem 0;\n  flex: 1;\n  display: flex;\n  flex-direction: column;\n  justify-content: center;\n  align-items: center;\n}\n\n.footer {\n  width: 100%;\n  height: 100px;\n  border-top: 1px solid #eaeaea;\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.footer img {\n  margin-left: 0.5rem;\n}\n\n.footer a {\n  display: flex;\n  justify-content: center;\n  align-items: center;\n}\n\n.title a {\n  color: #0070f3;\n  text-decoration: none;\n}\n\n.title a:hover,\n.title a:focus,\n.title a:active {\n  text-decoration: underline;\n}\n\n.title {\n  margin: 0;\n  line-height: 1.15;\n  font-size: 4rem;\n}\n\n.title,\n.description {\n  text-align: center;\n}\n\n.description {\n  line-height: 1.5;\n  font-size: 1.5rem;\n}\n\n.code {\n  background: #fafafa;\n  border-radius: 5px;\n  padding: 0.75rem;\n  font-size: 1.1rem;\n  font-family: Menlo, Monaco, Lucida Console, Liberation Mono, DejaVu Sans Mono,\n    Bitstream Vera Sans Mono, Courier New, monospace;\n}\n\n.grid {\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  flex-wrap: wrap;\n  max-width: 800px;\n  margin-top: 3rem;\n}\n\n.card {\n  margin: 1rem;\n  flex-basis: 45%;\n  padding: 1.5rem;\n  text-align: left;\n  color: inherit;\n  text-decoration: none;\n  border: 1px solid #eaeaea;\n  border-radius: 10px;\n  transition: color 0.15s ease, border-color 0.15s ease;\n}\n\n.card:hover,\n.card:focus,\n.card:active {\n  color: #0070f3;\n  border-color: #0070f3;\n}\n\n.card h3 {\n  margin: 0 0 1rem 0;\n  font-size: 1.5rem;\n}\n\n.card p {\n  margin: 0;\n  font-size: 1.25rem;\n  line-height: 1.5;\n}\n\n.logo {\n  height: 1em;\n}\n\n@media (max-width: 600px) {\n  .grid {\n    width: 100%;\n    flex-direction: column;\n  }\n}\n"
  },
  {
    "path": "styles/globals.css",
    "content": "html,\nbody {\n  padding: 0;\n  margin: 0;\n  font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Roboto, Oxygen,\n    Ubuntu, Cantarell, Fira Sans, Droid Sans, Helvetica Neue, sans-serif;\n}\n\na {\n  color: inherit;\n  text-decoration: none;\n}\n\n* {\n  box-sizing: border-box;\n}\n"
  }
]