SDXL
Generate images using Stable Diffusion XL
The SDXL Image Studio uses Stable Diffusion XL to generate images based on
user prompts. Input details are defined in the toolConfig.ts
file, and the
image is automatically stored on Cloudflare R2 and displayed after
generation.
SDXL Image Studio
Pre-requisites
To run the app, you must have Supabase, Replicate and Cloudflare R2 set up. If you haven’t done this yet, please start there.
Supabase
Set up user authentication & PostgreSQL database using Supabase
Replicate
Set up Replicate & understand how it’s used throughout the app
Storage
Set up audio, pdf and image storage using Cloudflare R2
If you don’t want to store images on Cloudflare R2, you can simply delete the
upload section under app/api/(apps)/sdxl/route.ts
.
That’s all you need to get the app running.
Review lib/types/toolconfig.ts
to understand the various configuration
fields in the demo app.
Building variations
For this app, we are not modifying the prompt and are directly passing it to SDXL. If you want to see an example where we modify the user input before sending it to the AI model, check out the DALL·E demo application:
DALL-E
Generate logos using DALL-E
Automatic input capturing
Update toolConfig.ts
to include:
- The input variables to pass to Replicate
- The button text for the form
- The type of model used
Ensure the type
field in toolConfig.ts
is specified correctly.
InputCapture.tsx
uses this to determine what to include (fields, file
uploads) and which API endpoint to call.
The page.tsx
page in /app
folder of our demo app will get the data from toolConfig.ts
and pass it to the InputCapture
component to automatically build a form based on this.
Displaying output
After the image has been generated, the image will be automatically displayed on screen instead of the initial InfoCard
component.