|
import React, { useCallback, useEffect, useState } from "react"; |
|
import { TextField, Grid, Paper } from "@mui/material"; |
|
|
|
function App() { |
|
const [inputPrompt, setInputPrompt] = useState(""); |
|
const [images, setImages] = useState(Array(9).fill("images/white.jpg")); |
|
|
|
const fetchImages = useCallback(async () => { |
|
try { |
|
const response = await fetch("/api/predict", { |
|
method: "POST", |
|
headers: { 'Content-Type': 'application/json' }, |
|
body: JSON.stringify({ prompt: inputPrompt }) |
|
}); |
|
const data = await response.json(); |
|
const imageUrls = data.base64_images.map((base64: string) => `data:image/jpeg;base64,${base64}`); |
|
setImages(imageUrls); |
|
} catch (error) { |
|
console.error("Error fetching images:", error); |
|
} |
|
}, [inputPrompt]); |
|
|
|
const handlePromptChange = (event: React.ChangeEvent<HTMLInputElement>) => { |
|
setInputPrompt(event.target.value); |
|
fetchImages(); |
|
}; |
|
|
|
return ( |
|
<div |
|
className="App" |
|
style={{ |
|
backgroundColor: "#282c34", |
|
height: "100vh", |
|
display: "flex", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
margin: "0", |
|
color: "#ffffff", |
|
padding: "20px", |
|
}} |
|
> |
|
<div |
|
style={{ |
|
backgroundColor: "#282c34", |
|
alignItems: "center", |
|
justifyContent: "center", |
|
display: "flex", |
|
flexDirection: "column", |
|
}} |
|
> |
|
<Grid container spacing={2}> |
|
{images.map((image, index) => ( |
|
<Grid item xs={4} key={index}> |
|
<Paper style={{ padding: "10px", textAlign: "center" }}> |
|
<img src={image} alt={`Generated ${index}`} style={{ maxWidth: "100%", maxHeight: "200px", borderRadius: "10px" }} /> |
|
</Paper> |
|
</Grid> |
|
))} |
|
</Grid> |
|
<TextField |
|
variant="outlined" |
|
value={inputPrompt} |
|
onChange={handlePromptChange} |
|
style={{ marginBottom: "20px", marginTop: "20px", width: "640px", color: "#ffffff", borderColor: "#ffffff", borderRadius: "10px", backgroundColor: "#ffffff" }} |
|
placeholder="Enter a prompt" |
|
/> |
|
</div> |
|
</div> |
|
); |
|
} |
|
|
|
export default App; |
|
|