diff --git a/package.json b/package.json index 6cac4f881..81c547d09 100644 --- a/package.json +++ b/package.json @@ -14,9 +14,9 @@ "eslint": "8.27.0", "eslint-config-next": "13.0.3", "framer-motion": "^6.5.1", - "next": "13.0.3", + "next": "^13.4.2", "openai": "^3.1.0", - "react": "18.2.0", - "react-dom": "18.2.0" + "react": "^18.2.0", + "react-dom": "^18.2.0" } } diff --git a/pages/api/generate.js b/pages/api/generate.js new file mode 100644 index 000000000..43be3eaf1 --- /dev/null +++ b/pages/api/generate.js @@ -0,0 +1,57 @@ +import { Configuration, OpenAIApi } from "openai"; + +const configuration = new Configuration({ + organization: "org-rPcAa7qnJV1z2NJv1JcytkqS", + apiKey: process.env.OPENAI_API_KEY, +}); +const openai = new OpenAIApi(configuration); + + +const basePromptPrefix = +` +write a detailed fashion collection statement about the design concept below +design concept: +` +const generateAction = async (req, res) => { + console.log(`API: ${basePromptPrefix}${req.body.userInput}`) + const baseCompletion = await openai.createCompletion({ + model: 'text-davinci-003', + prompt: `${basePromptPrefix}${req.body.userInput}`, + temperature: 0.8, + max_tokens: 1000, + }); + + const basePromptOutput = baseCompletion.data.choices.pop(); + + // I build Prompt #2. + const secondPrompt = + ` + Take the contents and design concept of the statement below and generate a longer new statement in 4 paragraph written in the style of Nobel Literature Price winner. Make it feel like a story, allow people feel more exciting and deeply touched. + + design concept: ${req.body.userInput} + + statement: ${basePromptOutput.text} + + new statement: + ` + + // I call the OpenAI API a second time with Prompt #2 + const secondPromptCompletion = await openai.createCompletion({ + model: 'text-davinci-003', + prompt: `${secondPrompt}`, + // I set a higher temperature for this one. Up to you! + temperature: 0.85, + // I also increase max_tokens. + max_tokens: 1500, + }); + + // Get the output + const secondPromptOutput = secondPromptCompletion.data.choices.pop(); + + // Send over the Prompt #2's output to our UI instead of Prompt #1's. + res.status(200).json({ output: secondPromptOutput }); +}; + +export default generateAction; + + diff --git a/pages/index.js b/pages/index.js index 0e360908b..59963eff9 100644 --- a/pages/index.js +++ b/pages/index.js @@ -1,8 +1,38 @@ import Head from 'next/head'; import Image from 'next/image'; import buildspaceLogo from '../assets/buildspace-logo.png'; +import { useState } from 'react'; const Home = () => { + const [userInput, setUserInput] = useState(''); + const onUserChangedText = (event) => { + console.log(event.target.value); + setUserInput(event.target.value); + }; + + const [apiOutput, setApiOutput] = useState('') + const [isGenerating, setIsGenerating] = useState(false) + + const callGenerateEndpoint = async () => { + setIsGenerating(true); + + console.log("Calling OpenAI...") + const response = await fetch('/api/generate', { + method: 'POST', + headers: { + 'Content-Type': 'application/json', + }, + body: JSON.stringify({ userInput }), + }); + + const data = await response.json(); + const { output } = data; + console.log("OpenAI replied...", output.text) + + setApiOutput(`${output.text}`); + setIsGenerating(false); + } + return (
@@ -11,24 +41,42 @@ const Home = () => {
-

sup, insert your headline here

+

Let AI Empower Your Brand's Voice

-

insert your subtitle here

+

Type in your spiritual design concept, and let AI speak for your brand

-
-
- -
- buildspace logo -

build with buildspace

-
- +
+