File size: 3,106 Bytes
803f9b1 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 |
import React, { useState, useEffect } from "react";
import axios from "axios";
import {
ChakraProvider,
Container,
Heading,
Text,
Input,
Button,
Wrap,
Link,
} from "@chakra-ui/react"; // Import Chakra UI components
import "./Gallery.css"; // Import your Gallery CSS here
const Gallery = ({ images }) => {
return (
<div className="gallery">
{images.map((image, index) => (
<img
key={index}
src={`http://127.0.0.1:8000/api/get_image/${image}`} // Replace with your API endpoint
alt={`Image ${index}`}
className="gallery-image"
/>
))}
</div>
);
};
const App = () => {
const [image, updateImage] = useState();
const [prompt, updatePrompt] = useState("");
const [loading, updateLoading] = useState(false);
const [showGallery, setShowGallery] = useState(false);
const [galleryImages, setGalleryImages] = useState([]);
const generate = async (prompt) => {
updateLoading(true);
const result = await axios.get(`http://127.0.0.1:8000/?prompt=${prompt}`);
updateImage(result.data);
updateLoading(false);
};
useEffect(() => {
// Fetch image filenames from the backend API when the component mounts
axios.get("http://127.0.0.1:8000/api/get_images").then((response) => {
setGalleryImages(response.data);
});
}, []);
return (
<ChakraProvider>
<Container>
<Heading>70年小人书： Vintage Chinese Comics Generator</Heading>
<Text marginBottom={"10px"}>
Click on the generate button to generate an image from a Stable Diffusion 1.5 model trained on vintage Chinese comics. This is an all-ages friendly, SFW model. If NSFW content is detected, the generated image will return as a black square. If that happens, just try again.{" "}
<Link href={"https://github.com/CompVis/stable-diffusion"}>
Original SD 1.5 Github Repo
</Link>
<Link href={"https://huggingface.co/rowenac/vintagechinesecomics"}>
Huggingface Repo for this model
</Link>
<Link href={"https://github.com/nicknochnack"}>
frontend and backend code based on Nicholas Renotte's repo
</Link>
</Text>
<Wrap marginBottom={"10px"}>
<Input
value={prompt}
onChange={(e) => updatePrompt(e.target.value)}
width={"350px"}
></Input>
<Button onClick={() => generate(prompt)} colorScheme={"yellow"}>
Generate
</Button>
</Wrap>
{loading ? (
<div>Loading...</div>
) : image ? (
<div>
<img
src={`data:image/png;base64,${image}`}
alt="Generated"
style={{ boxShadow: "lg" }}
/>
<center><Button onClick={() => setShowGallery(!showGallery)} colorScheme={"yellow"}>
Toggle Gallery
</Button></center>
{showGallery && <Gallery images={galleryImages} />}
</div>
) : null}
</Container>
</ChakraProvider>
);
};
export default App;
|