🔥 HTML Forge

✨ Local framework that generates HTML pages from natural language prompts ✨
Powered by Ollama • Screenshot → HTML • localStorage persistence

🚀 Quick Start • 📋 Features • ⌨️ Shortcuts • 📦 Models

---

⚡ What's New?

• 📸 Screenshot → HTML: Upload/paste/drop a mockup image; a vision model recreates it as HTML
• 💾 localStorage Persistence: Your settings and generation history survive page refresh (up to 30 items)
• 🎨 6 Visual Styles: Modern, Minimal, Retro/80s, Glass, Brutalist, Dark luxury
• ⚙️ Auto Proxy Detection: Works seamlessly with Docker (Nginx) or direct Ollama
• 🔄 Multi-turn Refinement: Iterate on pages with follow-up instructions

---

🚀 Quick start with Docker Compose

✅ Requirements Docker & Docker Compose ~5-12 GB disk space 4+ GB RAM (8 GB recommended)

🎯 GPU Support NVIDIA: Uncomment deploy block in docker-compose.yml Apple Silicon: Native Docker support CPU Only: Slower but works

# 1️⃣  Enter the project folder
cd ollama-html-forge

# 2️⃣  (Optional) pick your models in .env
#    Defaults: qwen2.5:7b (text) + llama3.2-vision:11b (vision)

# 3️⃣  Start everything
docker compose up -d

# ⏳ First boot downloads both models automatically (~4–8 GB).
# Watch progress with:
docker compose logs -f model-puller

🌐 Open http://localhost:8080 in your browser.

---

🛠️ Manual start (no Docker)

Step 1️⃣ Install Ollama

# macOS / Linux
curl -fsSL https://ollama.com/install.sh | sh

# Windows
# Download from https://ollama.com/download/windows

Step 2️⃣ Pull models

# Text model (required)
ollama pull qwen2.5:7b

# Vision model (for Screenshot → HTML)
ollama pull llama3.2-vision:11b   # ⭐ Recommended
# ollama pull llava:13b
# ollama pull gemma3:12b

Step 3️⃣ Open the UI

# Option A: Direct open
open index.html

# Option B: Serve locally
python3 -m http.server 8000
# then visit http://localhost:8000

---

✨ Features

🎯 Feature	📝 Description
🖋️ Generate	Create an HTML page from a text prompt
📸 Screenshot → HTML	Upload/paste/drop a mockup image; a vision model recreates it as HTML
🔄 Refine	Iterate on the current page with follow-up instructions (multi-turn)
🎨 6 Visual Styles	Modern · Minimal · Retro/80s · Glass · Brutalist · Dark luxury
📋 8 Quick Templates	Landing · Portfolio · Dashboard · Blog · Form · Product · Pricing · 404
👁️ Live Preview	Rendered page in an iframe
💻 Code View	Editable HTML source with syntax highlighting
📤 Export Options	Copy / .html / .zip (separates CSS + JS)
💾 Persistent History	Up to 30 generations saved in localStorage
⚙️ Persistent Settings	URL, temperature, tokens, system prompt — all saved automatically
⚡ Streaming	Tokens arrive in real-time
🔌 Auto Proxy Detection	Detects Nginx proxy (Docker) or direct Ollama automatically
📋 Clipboard Paste	Paste a screenshot with Ctrl+V anywhere on the page

---

⌨️ Keyboard Shortcuts

Key Combo	🎯 Action
Ctrl + Enter	Smart dispatch: From Image → Refine → Generate
Ctrl + V	Paste an image from clipboard directly

---

📁 Project Structure

ollama-html-forge/
├── 🐳 docker-compose.yml      Orchestrates Ollama + Nginx
├── ⚙️ .env                     Model names, UI port, API config
├── 📦 nginx/
│   └── default.conf           Frontend + /ollama/ reverse proxy
├── 🌐 index.html              Entire application (single file, ~500KB)
└── 📖 README.md               This file

---

🐳 Docker Commands Reference

# Start services
docker compose up -d

# Stop services
docker compose down

# View live logs
docker compose logs -f

# Stop + delete model volumes (clean slate)
docker compose down -v

# Update images and restart
docker compose pull && docker compose up -d

# Check service status
docker compose ps

---

🤖 Recommended Models

🏷️ Model	📊 Type	💾 RAM	📌 Notes
qwen2.5:7b	Text	~5 GB	⭐ Default – great for HTML/CSS generation
llama3.2:3b	Text	~2 GB	🚀 Lightweight, perfect for low-RAM machines
codellama:13b	Text	~8 GB	💻 Code-specialized, better for complex logic
llama3.2-vision:11b	Vision	~8 GB	⭐ Best for screenshot→HTML conversion
llava:13b	Vision	~8 GB	🎨 Alternative vision model, good quality
gemma3:12b	Vision	~8 GB	🔍 Google's vision model, solid performance
minicpm-v:8b	Vision	~6 GB	⚡ Lightweight vision option

💡 Tip: Mix and match! Use a small text model for speed and a larger vision model for screenshots.

---

🎯 Use Cases

• 🚀 Landing Pages – Create promotional sites in seconds
• 📊 Dashboards – Generate data visualization UIs
• 🎨 Design Mockups – Turn sketches into interactive HTML
• 📝 Blog Templates – Automatic blog page generation
• 🛒 E-commerce – Quick product pages and catalogs
• 🔐 Admin Panels – Custom admin interfaces
• 📱 Responsive Pages – All outputs are mobile-friendly

---

💡 Pro Tips

✅ Performance: Use GPU acceleration for 3-5x faster generation
✅ Quality: Higher token limits = better results (but slower)
✅ Efficiency: Run text + vision models on the same machine
✅ Persistence: Your work survives page refreshes automatically
✅ Offline: Works completely offline once models are downloaded

---

🤝 Contributing

Found a bug? Have a feature idea?

# Clone and test locally
git clone https://github.com/PIXELQUADRO07/HTML-Forge.git
cd HTML-Forge

# Make your changes and test
# Submit a pull request!

---

📄 License

This project is licensed under the MIT License – use it freely in personal and commercial projects.

---

Made with ❤️ + 🔥 by PIXELQUADRO07

Powered by Ollama • Docker • Nginx

⭐ Star this repo if you find it useful!