| --- |
| 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` |
