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