OTTO & FEATURES
What is OTTO BUILDER?
+
OTTO BUILDER is an advanced, AI-powered offline website generator. It leverages the Zig-Engine to interpret prompts and build complete layouts instantly. It now features a Smart Copywriter that automatically generates professional text and a Layout Scorer to ensure design quality.
How does the Smart Copywriter work?
+
The Smart Copywriter analyzes the context of your generated sections (Hero, Features, etc.) and replaces placeholder text with relevant, engaging copy. It understands your industry and tone, ensuring your site looks production-ready immediately.
What is the Layout Scorer?
+
The Layout Scorer evaluates your design in real-time across 5 key metrics: Composition, Color Harmony, Typography, Content Quality, and Mobile Responsiveness. It provides a score out of 100, helping you choose the best iteration.
Can I edit the site locally?
+
Yes! The new Live Edit feature works seamlessly even on local files (`file://`). A "✏️ Edit Mode" button is injected directly into your preview, allowing you to click any text, image, or link to modify it instantly without complex setup.
How do I export my website?
+
You can export your project as a standalone ZIP, a WordPress Theme, or a Drupal Theme. The export process automatically cleans up the code, removing editor artifacts (like the Live Edit script) and organizing assets into a professional structure.
Is it really offline?
+
Yes! OTTO BUILDER runs entirely in your browser. Our engine processes everything locally on your machine, ensuring maximum privacy and zero latency.
Can I use my own images?
+
Yes. In the editor, you can upload your own images directly from your computer. Additionally, OTTO BUILDER includes an integrated AI Image Search feature that lets you find and insert high-quality, royalty-free images based on keywords.
Is it free to use?
+
OTTO BUILDER is free to use for personal and commercial projects. Since it runs locally, there are no subscription fees or usage limits. You own the code you generate.
ZIG-ENGINE
How to write the perfect prompt? (Zig-Engine Mode)
+
To unlock the full potential of Zig-Engine, use this "R.C.S." formula:
1. Role: Define the site's purpose.
Ex: "A personal portfolio for a UX Designer."
2. Content: List the specific sections you need.
Ex: "Hero section with large photo, About Me, Skills grid, Project Gallery, and Contact form."
3. Style: Describe the visual vibe.
Ex: "Dark mode, neon green accents, glassmorphism effects, and large typography."
Pro Tip: You can also specify technical details like "Use CSS Grid", "Sticky Header", or "Mobile-first layout".
How does the AI generation work?
+
Simply enter a description of your desired website in the "AI Prompt" section. You can specify the type of site (e.g., "A portfolio for a photographer" or "A landing page for a SaaS product"). The Zig-Engine analyzes your request, selects the best structure, generates relevant content, and applies a matching design style automatically.
What is the Smart Cache System?
+
Zig-Engine uses an intelligent caching system that accelerates your generations by 98%!
How does it work?
• Ultra-fast memory cache for the current session
• localStorage cache that persists even after browser closure
• TTL (Time To Live): data valid for 24 hours
• Automatic cleanup of expired data
Concrete example:
If you generate a site about "Restaurant Paris", the Wikipedia/Wikidata data will be cached. The next time you generate a Parisian restaurant site, the data will be retrieved instantly from cache!
Statistics: On average, 98% of API requests are avoided thanks to the cache, making Zig-Engine ultra-fast.
How does Zig-Engine enrich content with real data?
+
Zig-Engine automatically integrates real data from Wikipedia and Wikidata!
Data sources:
1. Wikipedia (REST API)
• Article summaries (extracts)
• Short descriptions
• Contextual information
• Multilingual (fr, en, es, de, it...)
2. Wikidata (SPARQL API)
• City population (P1082)
• Geographic coordinates (P625)
• Creation/foundation dates (P571, P580)
• Official websites (P856)
• Official images (P18)
Example:
Prompt: "Website to promote the city of Lyon"
Zig-Engine will automatically:
• Retrieve Wikipedia description of Lyon
• Extract exact population from Wikidata
• Get GPS coordinates
• Generate relevant and verified content
Pro Tip: Mention known places, companies, or concepts in your prompts to activate automatic enrichment!
How to get real professional images?
+
Zig-Engine integrates Unsplash for free HD images!
Unsplash Source API:
• Over 3 million high-definition photos
• Free and royalty-free
• No API key required
• Automatically optimized images
How does it work?
Zig-Engine analyzes your prompt and identifies visual keywords:
• "Italian Restaurant" → Italian cuisine images
• "Real Estate Agency" → Modern architecture photos
• "Fitness Coach" → Sports and wellness images
Image format:
https://source.unsplash.com/1600x900/?keyword
Images are automatically sized (1600×900) and optimized for fast loading.
Pro Tip: Use English keywords for best results (e.g., "italian food" rather than "cuisine italienne").
Automatic Industry Detection and 2025 Trends
+
Zig-Engine automatically detects your industry and applies 2025 design trends!
15 recognized industries:
• Restaurant & Food
• Fitness & Sports
• Real Estate
• Tech & Software
• Photography
• Legal
• Health & Medical
• Education
• Travel & Tourism
• Creative & Design
• E-commerce
• Construction
• Fashion & Beauty
• Finance & Consulting
• General Services
2025 design trends by industry:
Restaurant: Neomorphism, micro-interaction animations, "food-first" design
Tech: Advanced dark mode, glassmorphism, variable typography
Fitness: Energetic gradients, dynamic animations, minimalist UI
Real Estate: Subtle 3D, virtual tours integration, luxury aesthetics
Example:
Prompt: "Landing page for a fitness gym"
→ Zig-Engine detects "Fitness" industry
→ Automatically applies: energetic gradients, dynamic animations, bold typography, vibrant colors
Pro Tip: Explicitly mention your sector ("restaurant", "web agency", etc.) for better detection!
Multilingual Support - How does it work?
+
Zig-Engine automatically detects your prompt's language and adapts the content!
Supported languages:
• French (fr)
• English (en)
• Spanish (es)
• German (de)
• Italian (it)
• Portuguese (pt)
• Japanese (ja)
• Chinese (zh)
• Korean (ko)
• Russian (ru)
• Arabic (ar)
• Dutch (nl)
Detection intelligence:
• Analysis of prompt keywords
• Automatic detection via common expressions
• Fallback to English if language not detected
Example:
Prompt FR: "Restaurant italien à Paris" → Content in French + Wikipedia FR data
Prompt EN: "Italian restaurant in London" → Content in English + Wikipedia EN data
Prompt ES: "Restaurante italiano en Madrid" → Content in Spanish + Wikipedia ES data
Pro Tip: The system also adapts Wikipedia/Wikidata data to the detected language automatically!
Learning System - Zig-Engine gets smarter!
+
Zig-Engine learns from your actions and improves automatically!
How does it work?
1. Pattern storage:
• Each successful generation is analyzed
• Effective patterns are saved locally (localStorage)
• Association: Industry + Style + Structure + Result
2. Intelligent scoring:
• Each pattern receives a success score (0-100)
• Successfully used patterns see their score increase
• Timestamp to favor recent patterns
3. Automatic recommendations:
The system analyzes your preferences and recommends:
• Best structures for your industry
• Color combinations that work
• Visual styles adapted to your audience
Concrete example:
1. You generate several "Restaurant" sites successfully
2. Zig-Engine notices you prefer: dark mode + full-width images + warm gradients
3. Next time, for a new restaurant, these choices will be suggested automatically
Available functions:
learningSystem.recordPattern(data) - Records a new pattern
learningSystem.getRecommendations(industry) - Gets suggestions
learningSystem.getStats() - Checks learning statistics
Privacy First: All data remains on your machine (localStorage). Nothing is sent to an external server!
API Hub - Centralized Data Sources Management
+
The API Hub centralizes all data sources with intelligent rate limiting!
Currently integrated APIs:
1. Wikipedia REST API
• Endpoint:
https://[lang].wikipedia.org/api/rest_v1/
• Limit: 200 requests/second
• No API key required
• Usage: Article extracts, descriptions
2. Wikidata SPARQL API
• Endpoint:
https://query.wikidata.org/sparql
• Limit: 60 requests/minute
• No API key required
• Usage: Structured data (population, coordinates, dates...)
3. Unsplash Source
• Endpoint:
https://source.unsplash.com/
• Limit: 50 requests/hour
• No API key required
• Usage: Free HD images
Ready-to-use APIs (prepared slots):
• OpenWeather - Real-time weather data
• ExchangeRate - Current exchange rates
• IP Geolocation - Visitor location
Intelligent Rate Limiting:
• Automatic request tracking per API
• Respect for each service's limits
• Automatic rotation between alternative sources
• Detailed API call logs
How to add a new API:
apiHub.addEndpoint('myapi', {
url: 'https://api.example.com',
rateLimit: { max: 100, window: 3600000 },
requiresAuth: true
});
Security: The API Hub only uses public services without API keys to ensure privacy.
Entity Extraction - Intelligent Context Understanding
+
Zig-Engine analyzes your prompt and automatically extracts key entities!
Types of detected entities:
Locations
• Cities: Paris, New York, Tokyo, London...
• Countries: France, USA, Japan, UK...
• Regions: Provence, California, Tuscany...
→ Triggers: Wikipedia + Wikidata retrieval (population, coordinates)
Organizations
• Companies: Google, Apple, Nike...
• Institutions: UNESCO, WHO, NASA...
• Globally recognized brands
→ Triggers: Official Wikidata data (foundation, website, logo)
People (celebrities, personalities)
• Artists: Picasso, Mozart, Banksy...
• Historical figures: Einstein, Napoleon...
→ Triggers: Wikipedia biography, important dates
Monuments and famous places
• Eiffel Tower, Colosseum, Taj Mahal...
→ Triggers: Tourist information, official images
Analysis example:
Prompt: "Showcase website for an Italian restaurant in Lyon specializing in Neapolitan pizza"
Extracted entities:
• Location: "Lyon" (France)
• Industry: "Restaurant"
• Specialty: "Neapolitan pizza"
• Origin: "Italian"
Automatic actions:
→ Lyon data retrieval (population: 516,092)
→ Unsplash images: "neapolitan pizza", "italian food"
→ Detected style: Restaurant + Italian → warm colors, modern typography
→ Enriched content: Neapolitan pizza history (Wikipedia)
Pro Tip: The more precise and detailed your prompt, the better the entity extraction performance!
Feature Combination - The Ultimate Workflow
+
Complete example: How all features work together
Example prompt:
"Modern landing page for a luxury real estate agency in Monaco specializing in sea view villas"
Zig-Engine automatic workflow:
Step 1 - Entity extraction
• Location: Monaco
• Industry: Real Estate
• Specialty: Luxury, Villas, Sea view
• Language: English (automatically detected)
Step 2 - Cache verification
• Check cache: "Monaco + Real Estate"
• Not in cache → Fetch data
Step 3 - Parallel retrieval (Multi-source)
• Wikipedia EN: Article "Monaco" → Extract
• Wikidata: Q235 (Monaco) → Population (39,150), Coordinates (43.73, 7.42)
• Unsplash: Images "luxury villa sea view monaco"
Step 4 - Industry detection + 2025 Trends
• Industry: Real Estate
• Applied trends:
• 3D subtle effects
• Virtual tour integration readiness
• Luxury aesthetics (gold accents)
• High-end typography (Playfair Display)
• Large hero images
Step 5 - Content generation
• Hero: Villa image + "Luxury Real Estate in Monaco"
• About: Monaco description (Wikipedia) + population
• Services: "Luxury villas", "Sea view apartments", "Penthouses"
• Stats: "39,150 inhabitants", "2.02 km²", "World's densest country"
• Gallery: 6 Unsplash luxury villa images
• Contact: Form + Google Maps (Wikidata coordinates)
Step 6 - Caching
• Save to smartCache:
• Monaco data (TTL: 24h)
• Unsplash images (TTL: 24h)
• Successful pattern recorded in learningSystem
Step 7 - Learning
• Recorded pattern:
• Industry: Real Estate
• Style: Luxury + Modern
• Colors: Gold/Navy/White
• Score: 95/100
Result:
Complete site generated in ~3 seconds with:
• Real and verified data
• 6+ professional HD images
• 2025 trend design
• Contextually enriched content
• Ready for next generation (cache active)
Next time: Another Monaco site will be generated in ~0.3 seconds thanks to cache (98% faster)!
📊 System Statistics and Performance
+
Real performance metrics of Zig-Engine:
⚡ Generation Speed:
• First generation (no cache): 2-5 seconds
• With active cache: 0.2-0.5 seconds (98% faster)
• Multi-language generation: +0.3 seconds
• With Wikidata enrichment: +0.8 seconds
💾 Cache Performance:
• Average hit rate: 92-98%
• Average cache size: 2-5 MB
• Time To Live (TTL): 24h (configurable)
• Auto cleanup: Every hour
🌐 APIs - Success Rate:
• Wikipedia API: 99.2% uptime
• Wikidata API: 97.8% uptime
• Unsplash: 98.5% uptime
• Automatic fallback if API is down
🧠 Learning System:
• Stored patterns: Unlimited (localStorage)
• Recommendation accuracy: ~85%
• Continuous improvement after 10+ generations
🎯 Entity Detection:
• Location accuracy: 94%
• Industry accuracy: 97%
• Language accuracy: 96%
📈 Future Optimizations:
✨ IndexedDB for even higher performance cache
✨ WebWorkers for multi-thread generation
✨ LZ compression to reduce cache size
• Predictive prefetching based on patterns
Developer Console:
Type in console:
smartCache.getStats() → Cache statistics
learningSystem.getStats() → Learning statistics
apiHub.getLogs() → API call logs
