adamelliotfields / gen

Stable Diffusion web app | gen.aef.me 🎨

gen

My image generation web UI, hosted on GitHub Pages: gen.aef.me

Features

• Stable Diffusion XL text-to-image via 🤗 Inference API
• Supports different image sizes, guidance scale, steps, and negative prompt
• Examples!

TODO

• Embed mode like JupyterLite REPL
• Multiple backends (stability.ai, fal.ai, etc)
• More models
• Image-to-image tasks
• API key input

Usage

# install bun
export PATH="${HOME}/.bun/bin:${PATH}"
curl -fsSL https://bun.sh/install | bash

# install deps
bun install

# start the dev server
bun start

Secrets

• VITE_FAL_URL - Alternate URL (proxy) for the Fal.ai API (default: https://fal.run)
• VITE_FAL_KEY - Fal.ai API key (default: undefined)
• VITE_HF_URL - Alternate URL (proxy) for the Hugging Face API (default: https://api-inference.huggingface.co)
• VITE_HF_KEY - Hugging Face API key (default: undefined)
• VITE_STABILITY_URL - Alternate URL (proxy) for the Stability.ai API (default: https://api.stability.ai)
• VITE_STABILITY_KEY - Stability.ai API key (default: undefined)

See .env for app settings. You can put the above in .env.local during development.

gen's Issues

Initial improvements after first deploy

• Mobile font size.
• Example buttons should fire the request (disable when loading).
• Small Clear link button below prompt to clear prompt.
• Small Reset button in settings to reset all.
• Open in new tab link on image hover.
• Make size “brighter”.
• Add system theme button.

Useful features

• seed
  • -1 is random
  • only the SDXL endpoint takes a seed (this is the only "official" Pro txt2img endpoint, so HF added it to be nice 🤗)
• flux dev and schnell endpoints
• use correct aspect ratios (7:4, 9:7, 1:1, etc)
• add styles
• add random prompts

Display stats

Show compute time (x-compute-time header), compute type (x-compute-type header, like "cpu", "a10", etc), and total time (capture start ms and compare to end ms).

Render below image as tags.

Link to other apps

Add links to repo, personal website, profiles, and other image generation apps.

Fix theme button colors

Add Dall-E

Dall-E will take a new input row:

• When model is dall-e-3, quality can be standard (default) or hd.
• When model is dall-e-3, style can be vivid (default) or natural.
• When model is dall-e-3, sizes can be 1024x1024, 1792x1024, or 1024x1792.
• When model is dall-e-2, sizes can be 256x256, 512x512, or 1024x1024.

Reset doesn’t clear error

Support multiple backends

Create a fetcher for each backend API. See huggingface.ts.

Since every other backend costs money, the settings for each backend will have a token input. Each backend will have dedicated settings, and all settings should be persisted in localstorage.

Not using client SDKs like @huggingface/inference.

Subdomain

Move to gen.aef.me.

Fix shadow variable in Header.tsx

themes is defined first outside the component then again inside.

See if there's a Biome rule for this.

Improve settings menu

On desktop, the settings menu should be on the left; on mobile, it should slide up and over. See sheet and drawer.

Image feed

Instead of rendering 1 image at a time, append them to a list.

The images in the feed should have a caption (their prompt). In the future, more stats about the image can be displayed.

This will require local storage, and an additional “delete” button.

Settings tab

Currently, settings is implemented like an accordion. It expands down, increasing the page height and causing scrollbars.

Settings should be a tab that replaces the prompt and has inner scrollbars for overflow, so the app's height can always match the device's viewport height.