Hugging Face's logo

Spaces:
RosticFACE
/
UI-Generator-from-Image
Running

App Files Community
UI-Generator-from-Image / README.md
RosticFACE's picture
RosticFACE
Upload 28 files
4840fb6 verified
preview code
|
raw
history blame contribute delete
2.95 kB
metadata
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