{"id":30651286,"url":"https://github.com/shivammishra1603/gen-ui","last_synced_at":"2026-05-07T13:10:25.467Z","repository":{"id":312322646,"uuid":"1040432076","full_name":"ShivamMishra1603/gen-ui","owner":"ShivamMishra1603","description":"AI-powered tool that transforms hand-drawn wireframes into responsive HTML and CSS UI code using Google Gemini.","archived":false,"fork":false,"pushed_at":"2025-09-08T01:11:28.000Z","size":1673,"stargazers_count":0,"open_issues_count":0,"forks_count":0,"subscribers_count":0,"default_branch":"main","last_synced_at":"2025-09-08T03:19:54.686Z","etag":null,"topics":["flask","generative-ai","google-gemini","react","sketch-to-code","ui-ux"],"latest_commit_sha":null,"homepage":"https://gen-ui-s294.onrender.com","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/ShivamMishra1603.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null,"zenodo":null,"notice":null,"maintainers":null,"copyright":null,"agents":null,"dco":null,"cla":null}},"created_at":"2025-08-19T01:14:22.000Z","updated_at":"2025-09-08T01:11:32.000Z","dependencies_parsed_at":"2025-08-29T21:44:31.399Z","dependency_job_id":"da3f8492-7e14-458f-9dd0-86afca7fe853","html_url":"https://github.com/ShivamMishra1603/gen-ui","commit_stats":null,"previous_names":["shivammishra1603/gen-ui"],"tags_count":0,"template":false,"template_full_name":null,"purl":"pkg:github/ShivamMishra1603/gen-ui","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShivamMishra1603%2Fgen-ui","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShivamMishra1603%2Fgen-ui/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShivamMishra1603%2Fgen-ui/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShivamMishra1603%2Fgen-ui/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/ShivamMishra1603","download_url":"https://codeload.github.com/ShivamMishra1603/gen-ui/tar.gz/refs/heads/main","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/ShivamMishra1603%2Fgen-ui/sbom","scorecard":null,"host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":286080680,"owners_count":32739002,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2026-05-07T02:14:30.463Z","status":"ssl_error","status_checked_at":"2026-05-07T02:14:29.405Z","response_time":62,"last_error":"SSL_connect returned=1 errno=0 peeraddr=140.82.121.6:443 state=error: unexpected eof while reading","robots_txt_status":"success","robots_txt_updated_at":"2025-07-24T06:49:26.215Z","robots_txt_url":"https://github.com/robots.txt","online":false,"can_crawl_api":true,"host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["flask","generative-ai","google-gemini","react","sketch-to-code","ui-ux"],"created_at":"2025-08-31T06:33:11.001Z","updated_at":"2026-05-07T13:10:25.461Z","avatar_url":"https://github.com/ShivamMishra1603.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"# GenUI - AI Wireframe to Code Generator\r\n\r\nGenUI is an intelligent wireframe-to-code generator that transforms your hand-drawn designs into clean, functional HTML/CSS code using Google's Gemini AI. This production-ready full-stack application features a modern React frontend, robust Flask backend, comprehensive monitoring, and flexible deployment options including Docker containerization and cloud hosting.\r\n\r\n## Live Demo\r\n\r\n**Try GenUI Now**: [https://gen-ui-s294.onrender.com](https://gen-ui-s294.onrender.com)\r\n\r\n\r\n![GenUI Demo](public/videos/demo.gif)\r\n\r\nSee GenUI in action! Upload your wireframe and watch it transform into clean, functional code.\r\n\r\n## Features\r\n\r\n### Core Functionality\r\n- **Drag \u0026 Drop Upload**: Easy image upload interface with support for PNG, JPG, JPEG, GIF, BMP\r\n- **AI-Powered Generation**: Uses Google Gemini 2.0 Flash for intelligent wireframe analysis\r\n- **Live Preview**: Toggle between code view and real-time iframe preview\r\n- **Download Code**: Export generated HTML/CSS files instantly\r\n\r\n### Advanced Features\r\n- **Flexible API Configuration**: Use your own API key or configure fallback environment variables\r\n- **Comprehensive Logging**: Structured logging with rotation, error tracking, and request monitoring\r\n- **Analytics \u0026 Monitoring**: Built-in performance tracking and user interaction analytics\r\n- **Health Monitoring**: `/health` and `/metrics` endpoints for production monitoring\r\n- **Error Handling**: React error boundaries and robust backend error management\r\n- **Production Ready**: Docker support, environment configuration, and deployment guides\r\n\r\n\r\n\r\n## Architecture\r\n\r\n**Frontend:**\r\n- React 18.2+ - Modern UI framework with hooks\r\n- Axios - HTTP client for API communication\r\n- CSS3 - Responsive design and animations\r\n- Analytics - Custom event tracking system\r\n\r\n**Backend:**\r\n- Flask 2.3+ - Python web framework\r\n- Google Generative AI 0.3+ - Gemini 2.0 Flash model integration\r\n- PIL/Pillow - Image processing\r\n- Structured Logging - Request/response tracking with rotation\r\n\r\n**Infrastructure:**\r\n- Docker \u0026 Docker Compose - Containerized deployment\r\n- Nginx - Production web server with gzip compression\r\n- Environment Configuration - Multi-environment support\r\n\r\n## Setup Options\r\n\r\n### Option 1: Local Development\r\n\r\n#### Prerequisites\r\n- **Node.js** (v16 or higher)\r\n- **Python** (v3.8 or higher)  \r\n- **Google Gemini API Key** ([Get one here](https://makersuite.google.com/app/apikey))\r\n\r\n#### Quick Start\r\n```bash\r\n# 1. Clone and navigate\r\ncd gen-ui\r\n\r\n# 2. Install frontend dependencies\r\ncd frontend \u0026\u0026 npm install\r\n\r\n# 3. Install backend dependencies  \r\ncd ../backend \u0026\u0026 pip install -r requirements.txt\r\n\r\n# 4. Configure environment\r\ncp env_example.txt .env\r\n# Edit .env and add: GOOGLE_API_KEY=your_actual_api_key_here\r\n\r\n# 5. Start backend (Terminal 1)\r\npython app.py\r\n# Backend runs on http://localhost:5001\r\n\r\n# 6. Start frontend (Terminal 2) \r\ncd ../frontend \u0026\u0026 npm start\r\n# Frontend runs on http://localhost:3000\r\n```\r\n\r\n### Option 2: Docker Deployment (Recommended)\r\n\r\n#### Quick Docker Setup\r\n```bash\r\n# 1. Setup environment\r\ncp docker.env.example .env\r\n# Edit .env and add your GOOGLE_API_KEY\r\n\r\n# 2. Build and run\r\ndocker-compose up --build\r\n\r\n# 3. Access application\r\n# Main App: http://localhost\r\n# API Health: http://localhost/health  \r\n# Direct Backend: http://localhost:5001\r\n```\r\n\r\n#### Docker Commands\r\n```bash\r\n# Run in background\r\ndocker-compose up -d\r\n\r\n# View logs\r\ndocker-compose logs -f\r\n\r\n# Stop services\r\ndocker-compose down\r\n\r\n# Rebuild specific service\r\ndocker-compose build backend\r\ndocker-compose build frontend\r\n```\r\n\r\n#### Docker Architecture\r\n```\r\n[User Browser] → [Nginx:80] → [React App (Static Files)]\r\n                      ↓\r\n                [Flask API:5001] → [Gemini API]\r\n```\r\n\r\n**Services:**\r\n- **frontend**: React app served by Nginx on port 80\r\n- **backend**: Flask API on port 5001  \r\n- **Logs**: Persisted in `./backend/logs/`\r\n\r\n### Option 3: Cloud Deployment (Render)\r\n\r\n#### Backend Deployment\r\n1. **Create Web Service** in Render\r\n2. **Configure**:\r\n   - Name: `genui-backend`\r\n   - Root Directory: `backend`\r\n   - Runtime: `Python 3`\r\n   - Build Command: `pip install -r requirements.txt`\r\n   - Start Command: `python app.py`\r\n3. **Environment Variables**:\r\n   ```\r\n   GOOGLE_API_KEY=your_actual_api_key\r\n   FLASK_ENV=production\r\n   UI_GENERATION_PROMPT=You are an expert front-end web developer...\r\n   ```\r\n\r\n#### Frontend Deployment  \r\n1. **Create Static Site** in Render\r\n2. **Configure**:\r\n   - Name: `genui-frontend`\r\n   - Root Directory: `frontend`\r\n   - Build Command: `npm install \u0026\u0026 npm run build`\r\n   - Publish Directory: `build`\r\n3. **Environment Variables**:\r\n   ```\r\n   REACT_APP_API_URL=https://your-backend-url.onrender.com\r\n   ```\r\n\r\n**Important Notes:**\r\n- Free tier services sleep after 15 minutes of inactivity\r\n- Cold starts take ~30 seconds to wake up\r\n- Keep API keys secure in environment variables\r\n\r\n## How to Use\r\n\r\n\r\n1. **Configure API Key**: Enter your Google AI API key in the input field. \r\n2. **Upload Image**: Drag \u0026 drop or click to upload your wireframe image\r\n3. **Generate**: Click \"Generate UI Code\" button\r\n4. **Preview**: Toggle between code view and live preview\r\n5. **Download**: Save the generated HTML file\r\n\r\n## Monitoring \u0026 Analytics\r\n\r\n### Health Endpoints\r\n- **Health Check**: `http://localhost:5001/health`\r\n- **Metrics**: `http://localhost:5001/metrics`\r\n\r\n### Built-in Analytics\r\n- Session tracking and user interactions\r\n- Performance monitoring and API call metrics\r\n- Error tracking and response times\r\n- File upload analytics\r\n\r\n### Logging\r\n- Structured logging with JSON format\r\n- Request/response tracking with duration\r\n- Error logs with stack traces\r\n- Log rotation (10MB max, 5 backups)\r\n- Separate error log files\r\n\r\n## Troubleshooting\r\n\r\n### API Issues\r\n**\"API key not found\" error:**\r\n- Ensure `.env` file exists in backend folder\r\n- Check that `GOOGLE_API_KEY` is set correctly\r\n- Verify API key is valid at Google AI Studio\r\n\r\n**\"Invalid API key\" errors:**\r\n- Double-check your API key from Google AI Studio\r\n- Ensure no extra spaces in environment variables\r\n\r\n### Connection Issues\r\n**CORS errors:**\r\n- Ensure Flask-CORS is installed: `pip install flask-cors`\r\n- Check that backend is running on correct port\r\n\r\n**Frontend can't reach backend:**\r\n- Verify backend is running on port 5001\r\n- Check `REACT_APP_API_URL` environment variable\r\n- Ensure both services are running\r\n\r\n### File Upload Issues\r\n**Upload failures:**\r\n- Supported formats: PNG, JPG, JPEG, GIF, BMP\r\n- Maximum file size: 16MB\r\n- Check image file isn't corrupted\r\n\r\n### Docker Issues\r\n**Build failures:**\r\n- Check Docker logs: `docker-compose logs`\r\n- Ensure `.env` file has required variables\r\n- Verify Docker and Docker Compose are installed\r\n\r\n\r\n## Example Wireframes\r\n\r\nFor best results, your wireframes should include:\r\n- **Clear Layout Structure**: Headers, navigation, content areas, footers\r\n- **Labeled Sections**: Text labels for different UI components\r\n- **Basic UI Elements**: Buttons, forms, images, navigation menus\r\n- **Readable Text**: Even handwritten text should be legible\r\n- **Component Relationships**: Clear indication of how elements connect\r\n\r\n## Result\r\n\r\n![Generated UI Output](public/images/output.png)\r\n\r\nThe AI generates clean, semantic HTML with:\r\n- Responsive CSS styling\r\n- Modern layout techniques (Flexbox/Grid)\r\n- Accessible markup structure\r\n- Cross-browser compatibility\r\n- Mobile-friendly design\r\n\r\n---\r\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshivammishra1603%2Fgen-ui","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fshivammishra1603%2Fgen-ui","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fshivammishra1603%2Fgen-ui/lists"}