stable diffusion study

With this project I am hoping to build a foundation of knowledge to later create my book recommendation app. Moving forward, I will also be using this to generate the images used on this site.

Using the replicate API and using the Stable Diffusion XL model for simple image generation in a Next.js app hosted by Vercel. The site can be accessed here

More info on the implementation at the bottom.

Here are a few samples of the images that SDXL generated, all of these were generated on an Nvidia A40L with about 10s runtime for each.

I prompted it to create a sample image but instead it spit out a beautifully vibrant and abstract line art.

"top down drone shot of a future city in bladerunner style"

The code itself is simple and can be found here. But this all wasn’t just for me to learn JS but rather the replicate API and hosting on Vercel.

First we initialise a Next.js app using:

npx create-next-app@latest

Then we can layout the page by editing the pages.js.

For the replicate call itself:

import Replicate from "replicate";
const replicate = new Replicate({
  auth: process.env.REPLICATE_API_TOKEN,
});

//the rest of the JS

const output = await replicate.run(
  "stability-ai/sdxl:39ed52f2a78e934b3ba6e2a89f5b1c712de7dfea535525255b1aa35c5565e08b",
  {
    input: {
      prompt: "top down drone view of a future city in Bladerunner style"
    }
  }
);

//then the error handling for the response

Then we can push to Github and deploy on vercel. For that we have to do the following:

We first install Vercel using npx:

npx vercel

Then we can set our environment variables/secrets using the below (allegedly, but I had troubles for the app to see my replicate token as it kept printing no token found. Instead I manually set it in the Vercel website under environment variables)

vercel env add REPLICATE_API_TOKEN

And finally, we can deploy using: (I used all the default deployment settings except to not use tailwind CSS)

npx vercel deploy --prod

Optionally you can also set a custom domain in the vercel dashboard.