DEV Community

Cover image for AI Image Generator Web UI gen_image_ui Deployment Demo
Trevor Lee
Trevor Lee

Posted on

AI Image Generator Web UI gen_image_ui Deployment Demo

#webui #generateimage #llmchat

AI Image Generator Web UI gen_image_ui Deployment Demo

The app gen_image_ui is a web UI for image generation with LLM / Stable Diffusion / Midjourney via pay-as-you-go APIs provided by WaveSpeed AI / platform.stability.ai / TTAPI.
This GitHub project is a deployment demo of gen_image_ui with Docker Compose, as well as some usage examples of gen_image_ui for AI image generation.

The demo will mostly demonstrate using the APIs provided by Wave Speed AI for image generation.
Hence, if you would like to follow along, I will assume that you also have an account with Wave Speed AI.

Even if you follow along exactly, very likely, the image generation results of your own running of gen_image_ui will not be the same as shown here.
I believe this is the fun part of using AI for generating images -- the results might often be surprising and inspiring.

Indeed, this is the idea behind gen_image_ui -- to provide a web UI for you to have fun with AI image generation and to have fun with the surprising and inspiring results of AI generated images.

The features of gen_image_ui includes:

  • Mechanism for turning simple image idea / text wordings into a detailed image generation prompt by simply clicking a button to enhance the original prompt (by LLM with "tools").
  • Options for coming up with initial prompt -- like quote of the day and even LLM answering of questions -- which you can use to further enhance it to be a detailed image generation prompt.
  • Start off trying out image generation prompt with cheaper AI models, then if see fit, try out with other more expensive (and capable) AI models, like nano-banana-2 / nano-banana-pro.
  • Persistance of image generation history
    • with short title given to the image generation prompt (by LLM)
    • can be categorized / marked as "favorite" for keeping the history without being cleaned up
  • LLM answering of questions integrated with LLM chat UI, with chat history support
  • et cetera

Deployment with Docker Compose

The gen_image_ui web app is developed using Next.js with Python backend. Even though two components are involved -- a Next.js frontend and a Python backend with SQLite as storage -- the deployment of gen_image_ui is simplified with a single Docker image.

In the folder specific for gen_image_ui deployment, say gen_image_ui_deployment

  • Create the subfolder storage. This subfolder will be used by the gen_image_ui deployment as storage for

    • configurations
    • databases
    • generated images

  • Create the configuration subfolder storage/config

  • In the configuration subfolder storage/config, create configuration file .env (i.e. gen_image_ui_deployment/storage/config/.env)

    .env (like the .env.example in the repository)

    WAVESPEED_API_KEY="<your wavespeed api key>"

Notice:

  • You will specify configurations in .env, including your secret keys.
  • Above only has the Wave Speed AI API key, which you can get one from Wave Speed AI. Basicallly, you need to sign up for an account then pre-pay for some credits for their services -- in the case of gen_image_ui -- for image generation as well as some LLM prompting for various purposes (like generate image prompt enhancement or giving short title to image prompts).

  • More API usages as well as other configurations will be mentioned later.

    • In gen_image_ui_deployment folder, create the file docker-compose.yml, like docker-compose.yml (like the docker-compose.yml in the repository) 
    services:
  gen_image_ui:
      image: trevorwslee/gen-image-ui:0.2.9  # set the desired tag; e.g. 0.2.9, latest, dev
      container_name: gen_image_ui
      ports:
        - "8080:3000"
      volumes:
        - ./storage:/app/backend/storage
      environment:
        - TZ=Asia/Hong_Kong
      restart: unless-stopped

This is the Docker compose file for deployment of gen_image_ui. Notice

  • The Docker container name will be gen_image_ui.
  • The port mapping is 8080:3000, which means you can access the gen_image_ui at http://localhost:8080 in your browser. Rather than 8080, you may have your preferred port for gen_image_ui.
  • The volume mapping is ./storage:/app/backend/storage, which means that the gen_image_ui Docker container will use the subfolder storage for configurations and data storage, as hinted previously.
  • The environment variable TZ is set to Asia/Hong_Kong for setting the timezone. You can set it to one that matches your location. You may want to refer to List of tz database time zones for the value of TZ.

To start the gen_image_ui web server (i.e. to bring up the gen_image_ui Docker container), in the folder gen_image_ui_deployment, run in a terminal

docker compose up -d
Enter fullscreen mode Exit fullscreen mode

If you want to, you can watch the logs of the gen_image_ui Docker container by running

docker compose logs -f

Now that the gen_image_ui Docker container is up, you can access the gen_image_ui at http://localhost:8080 with your browser. You should see the gen_image_ui home page like:

First Image Generation

Apparently, you can input the generate image prompt to the Prompt text box.

However, let's pretend that you don't yet have a good idea on what image to generate

You can click the Sample Prompts button to see some sample prompts.

After selecting the sample prompt, say the first one

you click the Generate Image button to start the image generation.

Notice that you are defaulted to use the AI model wavespeed:z-image/turbo -- 200/$, which is the LLM model z-image/turbo provided by Wave Speed AI, and [as recorded] the cost of image generation using the model is 200 images per 1 USD.

Let's try the second sample

Image Generation History

If you want to go back to previous image generation, you can click the Gen Image History button to see the history of image generations.

Generate Image Prompt Enhancement

If you find that the image prompt feels too simple and boring, you can click the Enhance Prompt button to enhance the image generation prompt by the configured LLM model, so that the image generation prompt will become more detailed and interesting.


Notice that I have specified some prompt enhancement hints:

  • The enhanced prompt should produce a Cartoon style image
  • The enhanced prompt should overlay some text on the image automatically

After the prompt enhancement, if you find that the image prompt is not up to your taste, you can undo it and try again ... or you can edit the enhanced prompt directly yourself.

When you are ready to try the prompt out, simply click the Generate Image button ... wait and see the result

At this point, if you find that the image is still missing something, like missing a good background, maybe you can try to "tell" the prompt enhancement LLM to add what is missing for you, like

like add to the end of the prompt

...
*** modification ***
- give the image a fun background that matches image
Enter fullscreen mode Exit fullscreen mode

and then click the Enhance Prompt button again to further enhance the image prompt

this time ... maybe skip all the hints ... see if the prompt enhancement LLM can help you to enhance the generate image prompt as you hope for

The modified enhanced prompt is not exactly just adding a background to the original image ... but still ... fun to see the results of iterative prompt enhancements

Use Another LLM Model for Image Generation

What about using a different LLM model for image generation, like a more expensive nano-banana model provided by Wave Speed AI?

You can select your choice of available AI models for image generation by clicking the AI list box to select the desired AI model for image generation.

Wow!

Indeed, gen_image_ui supports some selected LLM models provided by Wave Speed AI

  • from z-image/turbo
  • to nano-banana / nano-banana-2 / nano-banana-pro
  • including LLM models that generate image in SVG format, like recraft-20b-svg / recraft-v3-svg

Even though it is not obvious that the resulting image is very good, but considering that the image

is in SVG format, it is impressive afterall.

Ideas for Image Generation

If you are trying to get some ideas on what image to generate, you can click the Initialize Prompt button to get some initial image generation prompt ideas, say, by getting "quote of the day"

Before you click the Generate Image button, you may want to first enhance the prompt by clicking the Enhance Prompt button to see what differences it will make

Let's see the result image generation of the enhanced prompt

Not very good. Maybe the model will work better without overlaying text.

Let's try grok-imagine-image

Wow!

Just wonder what nano-banana-pro will give us!

Let's try something more abstract, like Chinese poems. Click the Initialize Prompt button and select "Chinese poem"

Don't worry if you do not understand the Chinese poem, since even as Chinese myself, I do not understand many of the Chinese poems.

Nevertheless, let's enhance the prompt by clicking the Enhance Prompt button to see how LLM understands the Chinese poem

Using the model qwen-image will produce result like

Initialize Prompt By Asking LLM Question

The Initialize Prompt button is also hooked up with LLM, and the LLM is configured with various tools, like "get weather info", of course in many cases, you will need to apply for API keys for the services

Assuming you have configured the API key for "get weather info" from OpenWeather -- sign up for an APP_ID of their version 2.5 APIs --
and put the API key to the configuration file .env like

OPEN_WEATHER_MAP_APP_ID="<your open weather map app id>"
DEFAULT_LOCATION_FOR_WEATHER_INFO="Hong Kong"
Enter fullscreen mode Exit fullscreen mode

you then can simply put your question for LLM in the prompt text box

then click the Initialize Prompt button to ask the question to LLM, and get the answer from LLM.

The answer come back is in text form. This also means that you can get the answer elsewhere, and then put the answer text in the prompt text box yourself directly.

Then, you can try to enhance what is in the prompt text area by clicking the Enhance Prompt button

It is fun to see what the result of the enhanced prompt is

Another very useful -- almost essential -- LLM tool is "web search" provided by Tavily

Assuming you have put the API key for "web search" from Tavily in the configuration file .env like

TAVILY_API_KEY="your tavily api key"
Enter fullscreen mode Exit fullscreen mode

Then, you can ask LLM a question that possibly requires web search, like --

What is the highest mountain in the world?

-- in the prompt text box

Again, click the Enhance Prompt button to see what how LLM will turn that "answer text" into any image generation prompt

Not bad at all. Notice that the LLM model used for generation of the image is wavespeed:flux-2-turbo -- 100/$ (100/$ means 100 images per 1 USD), which is a more expensive model than z-image/turbo (200/$)

Tavily is not only used for LLM answering of questions, the "web search" service might also be used during LLM enhancing image generation prompts, in the discretion of the LLM model.

Using Midjourney / Stable Diffusion for Image Generation

It is possible to use Midjourney / Stable Diffusion for image generation with gen_image_ui as well.

  • For Midjourney, the supported service provider is TTAPI
  • For Stable Diffusion, the supported service provider is platform.stability.ai

If you want to use Midjourney / Stable Diffusion for image generation, you will need to get API keys for the services, and put the API keys in the configuration file .env like

STABILITY_API_KEY="..."
TT_API_KEY="..."
Enter fullscreen mode Exit fullscreen mode

Category Selection

Each generated image can have a custom category assigned to it.

One side-effect of assigning a category to a generated image is, like marking it as "favorite", it will not be cleaned up.

If you don't yet have custom category to assign to a generated image, you can create one like:

select (add 🏷️)

in the dialog popped up, enter the new category

see that the generated image is assigned to the new category

If you now select another generated image from the Gen Image History, you can assign it the created category, like:

Now that generated images are assigned to respective categories, you can filter them out in Gen Image History, like:

The Add Category dialog also allows you to rename / delete a category -- a pre-selected category -- like:

select (add / edit 🏷️)
  • If you rename a category, all generated images assigned to the category will be renamed to the new category name. (If the new category name is the same as an existing category, then the generated images will be assigned to the existing category.)
  • If you delete a category, all generated images assigned to the category will be unassigned from the deleted category.

Gen Image History Layout

The Gen Image History provides different layout options for picking history record from the generated images. You can select the layout like by clicking the button like

There are four Gen Image History layout options

Feature Enabler -- LLM Chat Completions

The app gen_image_ui uses LLM "chat completions" for various purposes, like image generation prompt enhancements, as well as giving short titles to image generation prompts, etc.

If you prefer to, you can use the LLM provided by OpenRouter. Simply put the OpenRouter API key in the configuration file .env like

OPENROUTER_API_KEY="<your openrouter api key>"
Enter fullscreen mode Exit fullscreen mode

When OpenRouter API key is configured, the default LLM provider for "chat completions" will be OpenRouter.

You can specify the LLM model to use for "chat completions" in .env like

OPENAI_MODEL="qwen/qwen3-30b-a3b-instruct-2507"
Enter fullscreen mode Exit fullscreen mode

This configuration applies to using Wave Speed AI's LLM models / OpenRouter LLM models for "chat completions".

Yes, you can choose to use OpenAI's "chat completions" directly. Simply configure the OpenAI API key in .env like

OPENAI_API_KEY="<your openai api key>"
OPENAI_MODEL="gpt-4o"
Enter fullscreen mode Exit fullscreen mode

(Since I live in Hong Kong, I don't have the luxury to use OpenAI's API, so I have not tried it out. But I believe it should work just fine.)

You may also want to try out local deployment of LLM models like gemma-4-e4b-it. The following highlights such setup with LM Studio

1) Setup LM Studio, starting the Local Server

Notice:

  • The port is 8877; you can set your preferred port
  • "Serve on Local Network" is enabled; you will need this since to gen_image_ui, localhost is the container environment that runs it, while the LM Studio Local Server is running somewhere in your local network
  • See that the LM Studio Local Server is "reachable at" http://192.168.0.127:8877; yours IP address certainly will be different

2) Add to the gen_image_ui configuration file .env

   OPENAI_API_KEY="lmstudio"
   OPENAI_BASE_URL="http://192.168.0.127:8877/v1"
   OPENAI_MODEL="gemma-4-e4b-it"
Enter fullscreen mode Exit fullscreen mode

Notice:

  • even accessing your LM Studio Local Server does not require key, you still have to set OPENAI_API_KEY to something
  • OPENAI_BASE_URL specifies IP and port that match that of your LM Studio Local Server

UI for LLM Chat

Since version 0.2.1, a new UI tab for simple LLM chat has been added to gen_image_ui. You can select the "LLM Q&A" tab to access the UI for LLM chat.

For the LLM chat responses to be more "updated" and "accurate", it is strongly suggested that the above-mentioned "web search" with Tavily be configured.

The features of LLM chat in gen_image_ui includes:

  • Persistance of chat session history
    • with short title given to the chat session (by LLM)
    • can be can be categorized / marked as "favorite" for keeping the history without being cleaned up
  • Undo / redo of chat messages (even if carried on from chat history)
  • et cetera

Here is a sample chat I started with the question: which is the most famous painting in the world?

If click the () button below the LLM response message, the simplier version of the LLM response message will be transferred as the "gen image" prompt, so that it is ready to be used for image generation, or for further prompt enhancement, etc.

You are able to mark a LLM chat session history as "favorite", which you can bring back with the Chat History button . If you want to, you can continue with any one of the LLM chat sessions you selected from the history.

LLM Model Selection

You can make some special configurations such that alternative LLM models (other than the default ones) can be selected and tried out, for

  • image generation prompt enhancement
  • LLM chat

For example, add to .env

GEN_IMAGE_ENHANCE_PROMPT_ALTERNATIVE_LLM_SPECS="
    qwen3-235b::qwen/qwen3-235b-a22b-2507@wavespeed,
"
LLM_CHAT_ALTERNATIVE_LLM_SPECS="
    deepseek-v4-pro::deepseek/deepseek-v4-pro^0.2@wavespeed,
    qwen3-235b::qwen/qwen3-235b-a22b-2507^0.3@wavespeed,
    local-gemma::gemma-4-e4b-it@http://192.168.0.17:8877/v1[lmstudio],
"
Enter fullscreen mode Exit fullscreen mode
  • GEN_IMAGE_ENHANCE_PROMPT_ALTERNATIVE_LLM_SPECS and LLM_CHAT_ALTERNATIVE_LLM_SPECS specify, on top of the defaults, the alternative LLM models for image generation prompt enhancement and LLM chat respectively.
  • The format of each LLM model specification is <name>::<model>^<temperature>@<base_url>[<api_key>], where
    • <name> is the name of the LLM model, which will be shown in the UI for selection
    • <model> is the model identifier, which is used to specify the LLM model to use for the API calls
    • <temperature> is the temperature of the API calls, which is used to control the randomness of the model's output; if omitted, no temperature will be passed to the API calls
    • <base_url> is the base URL of the LLM model provider, which is used to as the endpoint for the API calls; some special values of <base_url> are
      • openrouter for OpenRouter
      • wavespeed for Wave Speed AI
      • openai for OpenAI
    • <api_key> is the API key for the LLM model provider, which is used to authenticate the API calls; note that when the <base_url> is wavespeed / openrouter, the API key can be deduced from other configuration like WAVESPEED_API_KEY / OPENROUTER_API_KEY in .env; in such case, <api_key> can be omitted

Setting up Users

The app gen_image_ui supports multiple users, with each user having his / her own private storage allotment for his / her generated image outputs and preferences.

In the simplest case, you can simply setup "login users" (with no actual login authentication needed) in the configuration file .env like

LOGIN_ALLOWED_EMAILS="peterpan@gmail.com,wendydarling@gmail.com,tinkerbell@gmail.com"
Enter fullscreen mode Exit fullscreen mode

Since no actual login authentication is needed, anyone can "login" the gen_image_ui web UI deployment; nevertheless, one gets to choose who he / she is -- and is expected to be honest about it -- so that the generated image outputs will be stored in the correct user's private storage allotment.

A more secure way is to setup for each login user a specific link to the app deployment (which can be hard to guess without it having given to the right person) like:

LOGIN_ALLOWED_EMAILS="
  b38447f2-3d35-45ca-972a-e1578a57c545::peterpan@gmail.com,
  9d1640e1-365a-48ce-8172-fb938ee1f04f::wendydarling@gmail.com,
  3c708767-413e-45c6-aa72-eb4be54eb8f0::tinkerbell@gmail.com
"
Enter fullscreen mode Exit fullscreen mode

With such a more secure setup, the normal link to the gen_image_ui deployment will not work

However, based on the above configuration, the link for peterpan@gmail will be -- http://192.168.0.127:8080/users/b38447f2-3d35-45ca-972a-e1578a57c545

Notice that the pattern of the link is <host>:<port>/users/<user-id>, where <user-id> is the identifier (better be UUID) specified in the configuration file .env for the user, in this case, b38447f2-3d35-45ca-972a-e1578a57c545 for peterpan@gmail.com -- b38447f2-3d35-45ca-972a-e1578a57c545::peterpan@gmail.com

The ultimate secure way to login gen_image_ui is to setup Google OAuth2 single sign-on (SSO) for the app. I will not be showing the details here, since it is a bit more involving to do such Google OAuth2 single sign-on (SSO) setup.

"Owner" User

It can be specified that a specific user is the "owner" of the gen_image_ui app deployment, like

OWNER_EMAIL="peterpan@gmail.com"
Enter fullscreen mode Exit fullscreen mode

Currently, in most cases, the "owner" is not special.

Nevertheless, any outputs of the "default user" (the "user" when no LOGIN_ALLOWED_EMAILS is setup) will be transferred to the "owner" user, when the app starts up.

Enjoy!

Have fun with gen_image_ui!

Peace be with you!
May God bless you!
Jesus loves you!
Amazing Grace!

p.s. Should you be interested in trying out a demo deployment first, you can visit my personal demo site -- http://demo-gen-image-ui.trevorwslee.duckdns.org:13777/

Top comments (0)