Logo

AI Image Generator

A simple web app for generating AI Images

Ezekiel Lopez

Ezekiel Lopez

6/20/2024 · 5 min read

AI Generated Cat

DEMO:

Want to check it out?

The Problem:

I want to generate AI images.

The Solution:

Create a web app to generate AI images.

Overview:

The best way to generate images is using an open source technology called Stable Diffusion. There’s a huge community for support, and an easy GUI / API deploy using Automatic1111. If you have a GPU, you can probably generate images on your own pc pretty easily, but I want to create a backend for my webservice that can handle image generation so I don’t have to worry about configuring my personal PC too much.

Luckily RunPod can rent me GPU usage by the second with their serverless infestructure.

To manage storing images so they can be viewed later, user creation, and even protecting my API key for runpod, I’m going to try pocketbase for my BaaS.

To interact with everything, I’m going to use React with router-dom and some Tailwind / DaisyUI for quick app development.

I have a VPS running Ubuntu I have configured as a webserver with Nginx Fail2Ban, and some other helpful goodies that will act to serve the frontend.

The Stack (one more time):

  • StableDiffusion (SD abbreviated)
  • Automatic1111 (A1111 abbreviated)
  • RunPod
  • PocketBase
  • goja (ECMAScript 5.1(+) implementation in Go.)
  • React
  • Tailwind & DaisyUI
  • Ubuntu, Nginx

Details:

I’m mostly going to rattle off some high level overview details for the project.

  1. Create a RunPod account
  2. Find a docker image that supports SD
  3. Deploy a Serverless endpoint through runpod of SD A1111
  4. Create API key for endpoint
  5. test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  6. Configure PocketBase collections
    • Users
    • Generations
  7. Extend PocketBase API
    • Listen at /generate
    • Check for Auth
    • Check for Credits

      I didn't want people to have to make an account to use the service, so instead I just let people enter a username. Then, generations are tagged with that username so they can view their previous generations if desired, or even send a link to their generation and have others see it with the creator username and prompt included.

      However this causes an issue. If you don't need to add payment or some kind of phone verification, what's stopping a random bot or single nefarious user from spam generating a ton of images and depleting my funds? Well I implemented site wide credits to help solve this problem. If they get low, I'll add more. The serverless isn't too expensive, a single second of compute time is about $0.00004. Credits let me periodically check in and increase so I don't get spammed and spend a ton of money.

    • Add requested image to generation collection
  8. test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test test
  9. React UI
    • Login Page with collapsable instructions
    • Generation page with positive prompt / negative prompt
    • Generation History under Options
    • Previous Generation View

Improvements:

There’s a thousands web services for generating AI images, and mine doesn’t really have any big distinctions besides being FREE. I think if I wanted to improve it, I’d have to create something that makes me distinct. I’d probably want to give people the ability to refrence a CivitAI model or Lora and attach it to the serverless instance of SD running. This would give wayyy more customization, flexability, and quality in the images generated.

Of course, adding a way for users to add credits to their generation, maybe password protect their generations as well would be a good improvement.

The UI could use some improvements, maybe instructions or demo page would be helpfull. A tutorial on A1111 prompting would he helpful. Some more access to settings like the seed used for noise at the start of generating images.

Thoughts?

I feel like this is a fun way to say, “Look, I can build something”. This project was not a technical difficulty, though I did learn some about DaisyUI and PocketBase in the process of creating the project. But it’s complete, pretty, usefull, and sometimes I enjoy playing around with it if I need a quick AI image generated :). I don’t have much interest in starting a business in AI Image space, but it’s a hot topic that is easy to share excitement with others.

I hope you enjoyed!

Thanks for reading! 💖