Image Command GUI (`--gui`)

Overview

The images command includes a powerful Graphical User Interface (GUI) for interactive image generation and editing. By adding the --gui flag to your command, you launch a desktop application that provides a rich, user-friendly environment for working with images.

This mode is designed for an iterative workflow, allowing you to refine prompts, swap source images, and see results in real-time, which we refer to as "Chat Mode".

To launch the GUI, simply add the --gui flag:

kbot image --dst "my_artwork.png" --gui

Features

Interactive Prompting: A large text area to write and refine your image descriptions.
Source Image Management: Easily add, view, and remove source images for editing tasks.
Image Gallery: A comprehensive gallery that displays both your source images and all generated images from the current session. You can select any image to view it larger or use it as a source for the next generation.
Interactive Chat Mode: Continuously generate images without restarting the command. Each generated image is added to the gallery, allowing you to build upon your ideas.
Output Configuration: Specify the destination file path for the final image.
Debug Panel: An advanced panel to inspect the Inter-Process Communication (IPC) messages between the GUI and the command-line tool.

Workflow: Interactive Chat Mode

The GUI operates in a persistent "Chat Mode", which facilitates an iterative creation process. Here’s a typical workflow:

Launch: Start the GUI with initial parameters. For example, to start with a specific prompt and some source images:
```
kbot image --prompt "a cat wearing a wizard hat" --include "cat.jpg" --dst "wizard_cat.png" --gui
```
Generate: The GUI will open, pre-filled with your prompt and images. Click the ✨ Generate Image button.
Review: The newly generated image appears in the image gallery. You can click on its thumbnail to view it in the main display.
Iterate: Now, you can:
- Modify the prompt (e.g., "a cat wearing a blue wizard hat with stars").
- Select the newly generated image from the gallery to use it as a source for the next edit.
- Add or remove other source images.
Re-generate: Click ✨ Generate Image again. A new image will be generated and added to the gallery.
Repeat: Continue this cycle of refining and generating until you are satisfied with the result.

This loop of generating, reviewing, and refining is the core of the Chat Mode experience.

sequenceDiagram
    participant User
    participant GUI as React Frontend
    participant CLI as images.ts
    
    User->>GUI: Modifies prompt / selects images
    User->>GUI: Clicks "Generate Image"
    GUI->>CLI: Sends 'generate_request' (prompt, files, dst)
    CLI->>CLI: Calls Image Generation API
    CLI-->>GUI: Sends generated image back ('image-received' event)
    GUI->>GUI: Adds new image to gallery
    GUI->>User: Displays new image
    User->>GUI: Continues iteration...

Parameters & Configuration

The GUI can be pre-configured using arguments from the command line.

--prompt <string>: Sets the initial text in the prompt box.
--include <file...>: Populates the image gallery with one or more source images.
--dst <file>: Sets the initial value for the output file path.
--api_key <key>: Provides the necessary API key for image generation. If not provided, it will be loaded from your config file.

When the GUI starts, it sends a request to the images.ts process, which then provides this initial configuration data.

Finalizing and Saving

Once you have a generated image you're happy with, you have two options:

Simple Mode (Generation only): If you are only generating images and don't need to return a specific file to the calling process, you can save images directly from the gallery and close the GUI when you're done. Note: Direct saving from the GUI is not fully implemented yet.
Submitting a Final Result: To complete the images command and save the final output, click the 💾 Save Last Generated Image and Close button. This action:
- Identifies the most recently generated image.
- Sends a final payload containing the prompt, source files, and destination path back to the images.ts process.
- Closes the GUI application.

The images.ts command then saves the final image to the specified --dst path and exits cleanly.

Communication Protocol (IPC)

The GUI and the images.ts CLI process communicate using an Inter-Process Communication (IPC) system that sends JSON messages over the standard input/output streams (stdin/stdout).

CLI → GUI: The CLI sends initial configuration, source images, and newly generated images to the GUI.
GUI → CLI: The GUI sends requests to generate images and, finally, sends the chosen prompt and settings when the user clicks "Save and Close".

For a detailed breakdown of the IPC message formats and communication flow, please see the IPC Communication Documentation.

5.2 KiB Raw Permalink Blame History Unescape Escape

Image Command GUI (--gui)