| import React, { useState, useEffect } from "react"; |
| import axios from "axios"; |
|
|
| import { |
| ChakraProvider, |
| Container, |
| Heading, |
| Text, |
| Input, |
| Button, |
| Wrap, |
| Link, |
| } from "@chakra-ui/react"; |
|
|
| import "./Gallery.css"; |
|
|
| 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(() => { |
| |
| 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; |
|
|
