142 lines
3.7 KiB
JavaScript
142 lines
3.7 KiB
JavaScript
import { useCallback, useEffect, useState } from 'react';
|
|
import {
|
|
Box,
|
|
Button,
|
|
Text,
|
|
Flex,
|
|
VStack,
|
|
Textarea,
|
|
Link,
|
|
Kbd,
|
|
Spinner,
|
|
} from '@chakra-ui/react';
|
|
|
|
const Home = () => {
|
|
const [input, setInput] = useState('');
|
|
const [finishReason, setFinishReason] = 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 { choice } = data;
|
|
|
|
setIsGenerating(false);
|
|
|
|
setFinishReason(choice.finish_reason);
|
|
|
|
if (choice.finish_reason === 'stop') {
|
|
console.log('end of the completion!');
|
|
}
|
|
|
|
setInput((prevState) => {
|
|
return prevState + choice.text;
|
|
});
|
|
}, [input]);
|
|
|
|
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 (
|
|
<Flex minHeight="100vh" bg="black">
|
|
<Flex w="100%" alignItems="center" justifyContent="center">
|
|
<VStack w="100%" color="white" spacing={10}>
|
|
<VStack maxW={{ base: '80%', md: '60%', lg: '40%' }}>
|
|
<Text fontWeight="bold" fontSize="4xl">
|
|
ScratchPad
|
|
</Text>
|
|
<Text fontSize="xl">
|
|
Write your first story, movie script, or song in 2 minutes. Type a
|
|
few sentences and just press <Kbd color="gray.700">ctrl</Kbd> or{' '}
|
|
<Kbd color="gray.700">cmd</Kbd> +{' '}
|
|
<Kbd color="gray.700">enter</Kbd> to have your AI writer generate
|
|
the rest!
|
|
</Text>
|
|
</VStack>
|
|
<Box
|
|
h={{ base: '250px', md: '500px', lg: '750px' }}
|
|
w={{ base: '80%', md: '60%', lg: '40%' }}
|
|
position="relative"
|
|
>
|
|
{isGenerating && (
|
|
<Flex
|
|
position="absolute"
|
|
zIndex="1"
|
|
w="100%"
|
|
h="100%"
|
|
justifyContent="center"
|
|
alignItems="center"
|
|
>
|
|
<Spinner size="lg" />
|
|
</Flex>
|
|
)}
|
|
{!isGenerating && finishReason === 'stop' && (
|
|
<Flex
|
|
position="absolute"
|
|
zIndex="1"
|
|
bottom={0}
|
|
right={0}
|
|
bgColor="blue.400"
|
|
padding={2}
|
|
mb={3}
|
|
mr={2}
|
|
borderRadius={5}
|
|
>
|
|
<Text fontWeight="bold">Keep writing to generate more!</Text>
|
|
</Flex>
|
|
)}
|
|
<Textarea
|
|
h="100%"
|
|
w="100%"
|
|
fontSize="18px"
|
|
bgColor="#2A2C34"
|
|
variant="outline"
|
|
placeholder="type here to get started"
|
|
value={input}
|
|
onChange={onChange}
|
|
isDisabled={isGenerating}
|
|
/>
|
|
</Box>
|
|
<Text fontSize="xl">
|
|
built with{' '}
|
|
<Link
|
|
fontWeight="bold"
|
|
color="blue.300"
|
|
href="https://buildspace.so/builds/ai-writer"
|
|
isExternal
|
|
>
|
|
buildspace
|
|
</Link>
|
|
</Text>
|
|
</VStack>
|
|
</Flex>
|
|
</Flex>
|
|
);
|
|
};
|
|
|
|
export default Home;
|