---
title: UI Generator From Image
emoji: 🐠
colorFrom: indigo
colorTo: red
sdk: static
pinned: false
app_build_command: npm run build
app_file: build/index.html
license: mit
---

# AI-Powered UI to Code Generator

This application allows you to generate functional desktop application code directly from user interface images. It uses a powerful AI process where you can choose your provider (Google Gemini, OpenAI, or Anthropic) and your target language (**Python/PyQt6** or **C++/Qt**). The selected provider will analyze your UI images and then write the complete source code based on that analysis.

## How to Use

1.  **Select Technology:** Choose between generating a **Python PyQt App** or a **C++ Qt App**.
2.  **Select Provider & Configure API:** Choose your preferred AI provider (Google Gemini, OpenAI, or Anthropic) and enter the corresponding API key. Your key is stored securely in your browser's local storage.
3.  **Upload Images:** Drag and drop or select one or more images (PNG, JPG, WEBP) of the UI you want to create.
4.  **Add Instructions (Optional):** Provide text prompts to guide the AI, such as "make the button green" or "the title should be 'My App'".
5.  **Generate Code:** Click the "Generate Code" button. The code will be generated by the AI.
6.  **Review, Download & Run:**
    -   **For Python:** The generated Python code will appear on the right with syntax highlighting. You can copy it or download it as a single `.py` file. Run it locally with `pip install PyQt6 PyQtWebEngine`.
    -   **For C++:** A multi-file viewer will appear. You can inspect the generated `.h` and `.cpp` files. Before downloading, choose a build system (**CMake**, **Makefile**, or **Meson**). Then, download the complete project as a **ZIP file**, ready to be compiled and run.

## Features

-   **Dual Language Support:** Generate code for both **Python (PyQt6)** and **C++ (Qt)**.
-   **Multi-Provider Support:** Choose between Google Gemini, OpenAI (GPT-4o), and Anthropic (Claude 3).
-   **Streaming Output (Python):** Python code is generated and displayed in real-time.
-   **Multi-File Project Generation (C++):** Creates a complete, structured C++ project (`.h` and `.cpp` files).
-   **Integrated Build Systems (C++):** Download a ready-to-compile ZIP archive with your choice of `Makefile`, `CMakeLists.txt`, or `meson.build`.
-   **Syntax Highlighting:** Generated code is properly highlighted for readability.
-   **Multi-Image Analysis:** Combine multiple screenshots to build a more complex UI.
-   **Secure API Key Storage:** Keys are saved locally in your browser's storage.

## Technology

This is a static web application built with:

-   React & TypeScript
-   Tailwind CSS (via CDN)
-   **AI Providers**: Google Gemini, OpenAI, and Anthropic APIs
-   **Code Generation Targets**: Python/PyQt6, C++/Qt
-   **ZIP Archiving**: JSZip
-   **Syntax Highlighting**: highlight.js
-   Dependencies served via `esm.sh`