Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

add change #60

Open
wants to merge 1 commit into
base: main
Choose a base branch
from
Open

add change #60

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
6 changes: 3 additions & 3 deletions package.json
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -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"
}
}
57 changes: 57 additions & 0 deletions pages/api/generate.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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;


76 changes: 62 additions & 14 deletions pages/index.js
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -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 (
<div className="root">
<Head>
Expand All @@ -11,24 +41,42 @@ const Home = () => {
<div className="container">
<div className="header">
<div className="header-title">
<h1>sup, insert your headline here</h1>
<h1>Let AI Empower Your Brand's Voice</h1>
</div>
<div className="header-subtitle">
<h2>insert your subtitle here</h2>
<h2> Type in your spiritual design concept, and let AI speak for your brand</h2>
</div>
</div>
</div>
<div className="badge-container grow">
<a
href="https://buildspace.so/builds/ai-writer"
target="_blank"
rel="noreferrer"
>
<div className="badge">
<Image src={buildspaceLogo} alt="buildspace logo" />
<p>build with buildspace</p>
</div>
</a>
<div className="prompt-container">
<textarea
className="prompt-box"
placeholder="start typing here"
value={userInput}
onChange={onUserChangedText}
/>
</div>
<div className="prompt-buttons">
<a
className={isGenerating ? 'generate-button loading' : 'generate-button'}
onClick={callGenerateEndpoint}
>
<div className="generate">
{isGenerating ? <span className="loader"></span> : <p>Generate</p>}
</div>
</a>
</div>
{apiOutput && (
<div className="output">
<div className="output-header-container">
<div className="output-header">
<h3>Output</h3>
</div>
</div>
<div className="output-content">
<p>{apiOutput}</p>
</div>
</div>
)}
</div>
</div>
);
Expand Down
1 change: 1 addition & 0 deletions pages/styles.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -55,6 +55,7 @@ body {
letter-spacing: -4px;
line-height: 1.2em;
text-align: center;
letter-spacing: 3px;
margin: 0;
}

Expand Down
Loading