PromptPuffPass: React + TypeScript + Vite + Stable Diffusion

This project demonstrates how to integrate Stable Diffusion image generation into a React app using TypeScript, Vite, and React Query.

To generate images from text prompts, this app connects to a local Stable Diffusion server (e.g., AUTOMATIC1111 Web UI) via its REST API.

1. *Clone the Stable Diffusion Web UI

   git clone https://github.com/AUTOMATIC1111/stable-diffusion-webui.git
   cd stable-diffusion-webui

2. Install Requirements

   • Follow the instructions in the repo to install Python and dependencies.
   • Make sure you have a compatible GPU and drivers.
   • brew install pyenv
   • pyenv install 3.10.6
   • pyenv local 3.10.6
   • nano webui-user.sh
   • export COMMANDLINE_ARGS="--api --cors-allow-origins=http$

3. Start the Web UI with API Enabled

   # Runs BE - ./webui.sh

   • By default, the API will be available at http://localhost:7860.

4. Test the API

   # Runs FE - yarn dev

   • Frontend available @ http://localhost:5173

• The React app sends a POST request to the Stable Diffusion API endpoint (/sdapi/v1/txt2img) with the user's prompt.
• The API returns a base64-encoded image, which is displayed in the UI.

• src/hooks/useWeedImage.ts: Contains the React Query mutation hook for image generation.
• src/components/WeedImageGenerator.tsx: UI component for entering prompts and displaying generated images.

1. Start Stable Diffusion locally as described above.

2. Run the React app:

   yarn install
   yarn dev

3. Enter a prompt and click "Generate" to create an image.

• Make sure Stable Diffusion is running and accessible at http://localhost:7860.
• If you change the API port or host, update the fetch URL in useWeedImage.ts.
• BE not running?
  • run python --version
  • ensure you're on python 3.10.6
  • if not, brew install pyenv
  • pyenv install 3.10.6
  • pyenv local 3.10.6
  • echo 'eval "$(pyenv init -)"' >> ~/.zshrc

• Stable Diffusion Web UI by AUTOMATIC1111
• React
• Vite
• React Query