Skip to content

README.md

Latest commit

 

History

History
203 lines (151 loc) · 4.71 KB

README.md

File metadata and controls

203 lines (151 loc) · 4.71 KB

🚀 AI Pic2Code – Image → Code Generator

(Frontend-Only | React + TypeScript | Multi-Model AI Support)

AI Pic2Code is a free, open-source, 100% frontend-only AI tool that converts UI screenshots into clean, production-ready code.

No backend. No server. No storage.
All AI requests are made directly from the browser using:

  • Google Gemini 3 Pro (recommended)
  • OpenRouter multi-provider (Claude / GPT-4o / DeepSeek / Grok / Qwen / Free Gemini)

🔗 Live Demo: https://seeb4coding.in/ai/pic-2-code/
🔗 GitHub Repository: https://github.com/seeb4coding/pic-2-code

✨ Features

🖼️ Screenshot → Code

Generate production-ready UI code for:

  • HTML + Tailwind CSS
  • React (JSX + Tailwind)
  • Flutter UI (Dart)
  • React Native Components

⚙️ Multi-Provider AI Support

Select your preferred model in Settings.

🔹 Google Gemini

  • Gemini 3.0 Pro
  • Gemini 3.0 Pro Preview
  • Gemini 2.5 Pro
  • Gemini 2.5 Flash
  • Gemini 2.5 Flash Thinking
  • Gemini 2.0 Flash Lite

🔹 OpenRouter

  • Gemini 2.0 Flash (Free)
  • Gemini 2.0 Pro (Free)
  • Claude 3.5 Sonnet
  • Claude 3 Opus
  • DeepSeek R1
  • GPT-4o
  • Grok 4.1 Fast (Free)
  • Qwen 2.5 VL 72B (Free)

🎨 Built-in UI Tools

  • Drag & drop image upload
  • Image preview modal
  • Multi-tab code viewer
  • Settings modal
  • Color palette extraction
  • Voice input
  • Toast notifications
  • Skeleton loader
  • Dark / Light mode

🧱 Project Structure

AI-PIC2CODE
│
├── components/
│   ├── Button.tsx
│   ├── CodeViewer.tsx
│   ├── ColorPalette.tsx
│   ├── ExplainModal.tsx
│   ├── Header.tsx
│   ├── ImageModal.tsx
│   ├── SettingsModal.tsx
│   ├── SkeletonLoader.tsx
│   ├── UploadZone.tsx
│   └── VoiceInput.tsx
│
├── services/
│   ├── gemini.service.ts
│   └── openrouter.service.ts
│
├── utils/
│   ├── helpers.ts
│   ├── image.ts
│   └── format.ts
│
├── App.tsx
├── constants.ts
├── types.ts
├── index.tsx
├── index.html
├── metadata.json
├── package.json
├── tsconfig.json
├── .env.local
└── README.md

📥 Installation

1️⃣ Clone the Project

git clone https://github.com/seeb4coding/pic-2-code
cd ai-pic2code

2️⃣ Install Dependencies

npm install

3️⃣ Add API Keys

Create a .env.local file:

GEMINI_API_KEY=YOUR_GEMINI_API_KEY
OPENROUTER_API_KEY=YOUR_OPENROUTER_API_KEY

🌐 Model List

export const AVAILABLE_MODELS = [
  { id: 'gemini-3-pro', name: 'Gemini 3.0 Pro', provider: 'gemini' },
  { id: 'gemini-3-pro-preview', name: 'Gemini 3.0 Pro Preview', provider: 'gemini' },
  { id: 'gemini-2.5-pro', name: 'Gemini 2.5 Pro', provider: 'gemini' },
  { id: 'gemini-2.5-flash', name: 'Gemini 2.5 Flash', provider: 'gemini' },
  { id: 'gemini-2.5-flash-thinking-exp-01-21', name: 'Gemini 2.5 Flash Thinking', provider: 'gemini' },
  { id: 'gemini-2.0-flash-lite-preview-02-05', name: 'Gemini 2.0 Flash Lite', provider: 'gemini' },

  { id: 'google/gemini-2.0-flash-exp:free', name: 'Gemini 2.0 Flash (Free)', provider: 'openrouter' },
  { id: 'google/gemini-2.0-pro-exp-02-05:free', name: 'Gemini 2.0 Pro (Free)', provider: 'openrouter' },
  { id: 'anthropic/claude-3.5-sonnet', name: 'Claude 3.5 Sonnet', provider: 'openrouter' },
  { id: 'anthropic/claude-3-opus', name: 'Claude 3 Opus', provider: 'openrouter' },
  { id: 'deepseek/deepseek-r1', name: 'DeepSeek R1', provider: 'openrouter' },
  { id: 'openai/gpt-4o', name: 'GPT-4o', provider: 'openrouter' },
  { id: 'x-ai/grok-4.1-fast:free', name: 'Grok 4.1 Fast (Free)', provider: 'openrouter' },
  { id: 'qwen/qwen-2.5-vl-72b-instruct:free', name: 'Qwen 2.5 VL 72B (Free)', provider: 'openrouter' },
];

🧪 Run Locally

npm run dev

Visit: http://localhost:5173

📦 Build

npm run build
npm run preview

🛣️ Roadmap

  • Vue.js output
  • Angular output
  • ZIP export
  • Local history
  • Custom Tailwind theme generator
  • AI auto-cleanup

✅ Google AI Studio

This project was developed using Google AI Studio, which provides direct access to Gemini models through a browser-based API. All Gemini-powered features (HTML/Tailwind conversion, React generation, Flutter widgets, and React Native layout generation) are executed using Gemini models from AI Studio, without requiring any backend server.

👨‍💻 Author

seeb4coding.in
📧 support@seeb4coding.in
🌐 https://seeb4coding.in

⭐ Support

Give a ⭐ on GitHub if you like this project!