You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
115 lines
2.9 KiB
115 lines
2.9 KiB
6 months ago
|
import { useRef, useState } from 'react';
|
||
|
|
import './App.css'
|
||
|
|
|
||
|
|
|
||
|
|
const BASE_URL='http://localhost:3333';
|
||
|
|
|
||
|
|
function App() {
|
||
|
|
|
||
|
|
const [history, setHistory] = useState([]);
|
||
|
|
const [processing, setProcessing] = useState(false);
|
||
|
|
const [prompt, setPrompt] = useState([]);
|
||
|
|
|
||
|
|
|
||
|
|
function onSubmit(event) {
|
||
|
|
event.preventDefault();
|
||
|
|
const input = event.target.elements.input.value;
|
||
|
|
console.log("Submitted:", input);
|
||
|
|
|
||
|
|
setProcessing(true);
|
||
|
|
|
||
|
|
|
||
|
|
fetch(`${BASE_URL}/generate`, {
|
||
|
|
method: 'POST',
|
||
|
|
headers: {
|
||
|
|
'Content-Type': 'application/json',
|
||
|
|
},
|
||
|
|
body: JSON.stringify({
|
||
|
|
input:[
|
||
|
|
...history,
|
||
|
|
{
|
||
|
|
role:'user',
|
||
|
|
content:[{
|
||
|
|
type:'input_text',
|
||
|
|
text: input
|
||
|
|
}]
|
||
|
|
}
|
||
|
|
]
|
||
|
|
}),
|
||
|
|
}).then(response => {
|
||
|
|
if (!response.ok) {
|
||
|
|
throw new Error('Network response was not ok');
|
||
|
|
}
|
||
|
|
response.json().then(data => {;
|
||
|
|
console.log(data);
|
||
|
|
|
||
|
|
// add to history
|
||
|
|
setHistory(prev => [...prev, {
|
||
|
|
role: 'user',
|
||
|
|
content: [{
|
||
|
|
type:'input_text',
|
||
|
|
text: input
|
||
|
|
}]
|
||
|
|
}, {
|
||
|
|
role: 'assistant',
|
||
|
|
content: [{
|
||
|
|
type:'output_text',
|
||
|
|
text: data.output_text
|
||
|
|
}]
|
||
|
|
}]);
|
||
|
|
|
||
|
|
setPrompt([
|
||
|
|
...prompt,
|
||
|
|
data.prompt,
|
||
|
|
]);
|
||
|
|
|
||
|
|
// clear input
|
||
|
|
event.target.elements.input.value = '';
|
||
|
|
setProcessing(false);
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
});
|
||
|
|
|
||
|
|
|
||
|
|
}
|
||
|
|
|
||
|
|
return (
|
||
|
|
<main className='min-h-screen flex flex-col gap-8 justify-end p-8'>
|
||
|
|
<div className='flex flex-col gap-2 border-4'>
|
||
|
|
{prompt?.length==0 ? (
|
||
|
|
<div className='p-2 border-b border-gray-200'>Promp will appear here...</div>
|
||
|
|
):(
|
||
|
|
prompt?.map((item, index) => (
|
||
|
|
<div key={index} className='p-2 border-b border-gray-500'>
|
||
|
|
<p className='text-lg'>{item}</p>
|
||
|
|
</div>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className='flex flex-col gap-2'>
|
||
|
|
{/* History will be rendered here */}
|
||
|
|
{history?.length==0? (
|
||
|
|
<div className='bg-white p-2 rounded border'>History will appear here...</div>
|
||
|
|
):(
|
||
|
|
history.map((item, index) => (
|
||
|
|
<div key={index} className={`p-2 rounded border-4 ${item.role === 'user' ? 'bg-gray-100' : 'bg-yellow-100'}`}>
|
||
|
|
{item.content.map((content, idx) => (
|
||
|
|
<p key={idx} className='text-lg'>{content.text}</p>
|
||
|
|
))}
|
||
|
|
</div>
|
||
|
|
))
|
||
|
|
)}
|
||
|
|
</div>
|
||
|
|
<div className=''>
|
||
|
|
<form className='flex flex-col justify-center *:border-4 gap-4' onSubmit={onSubmit}>
|
||
|
|
<input id="input" name="input" required className='self-stretch p-2'/>
|
||
|
|
<button type="submit" className='rounded-full uppercase' disabled={processing}>Send</button>
|
||
|
|
</form>
|
||
|
|
</div>
|
||
|
|
</main>
|
||
|
|
)
|
||
|
|
}
|
||
|
|
|
||
|
|
export default App
|