react app/client/src/App.js

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;