92 lines
2.5 KiB
JavaScript
92 lines
2.5 KiB
JavaScript
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 () => {
|
|
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]);
|
|
|
|
return (
|
|
<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}
|
|
/>
|
|
<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}
|
|
>
|
|
{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>
|
|
);
|
|
};
|
|
|
|
export default Home;
|