Update app.py

app.py

@@ -1,336 +1,656 @@
 
 import gradio as gr
-import google as genai
 import os
-import random
-import time
-from textwrap import dedent
-
-# --- Load Gemini API key securely ---
-GEMINI_API_KEY = os.environ.get("GEMINI_API_KEY")
-if not GEMINI_API_KEY:
-    raise ValueError("❌ GEMINI_API_KEY not found. Please set it in your Hugging Face Space Secrets.")
-
-client = genai.Client()
-
-
-# --- 1. CONSTANTS ---
-# Replicates constants from the original React app
-GEMINI_TEXT_MODEL = 'gemini-2.5-flash'
-# Note: imagen-3.0-generate-002 is not available in the Python SDK yet.
-# We will handle this limitation gracefully in the app logic.
-GEMINI_IMAGE_MODEL = 'imagen-3.0-generate-002'
-
-class Agent:
-    SYSTEM = 'SYSTEM'
-    OPTIMIST = 'OPTIMIST'
-    SKEPTIC = 'SKEPTIC'
-
-SYSTEM_AVATAR = 'https://i.imgur.com/z3uxLzT.png'
-AGENT_AVATARS = {
-    Agent.OPTIMIST: 'https://i.imgur.com/2GMV9y7.png',
-    Agent.SKEPTIC: 'https://i.imgur.com/KzX3T21.png',
-    Agent.SYSTEM: SYSTEM_AVATAR,
-}
-
-AGENT_PROMPTS = {
-    Agent.OPTIMIST: {
-        "personality": "You are Agent A, a tech optimist and futurist. You see the incredible potential and benefits in every new technology. Your arguments are passionate, forward-thinking, and inspiring. Respond in 1-2 concise paragraphs.",
-        "prompt": lambda topic, last_response: f"Debate Topic: '{topic}'. The last statement was: '{last_response}'. Provide your powerful, optimistic argument.",
+import google.generativeai as genai
+from google.generativeai.types import HarmCategory, HarmBlockThreshold
+import json
+from PIL import Image
+from io import BytesIO
+import base64
+import uuid
+import concurrent.futures
+import re
+
+# --- Configuration and Initialization ---
+
+# Configure the Gemini API key from Hugging Face secrets
+try:
+    API_KEY = os.environ["API_KEY"]
+    genai.configure(api_key=API_KEY)
+except KeyError:
+    raise ValueError("API_KEY environment variable not set. Please add it to your Hugging Face Space secrets.")
+
+# --- Default Data Structures (Ported from TypeScript) ---
+
+DEFAULT_WEBSITE_SETTINGS = {
+    "theme": {
+        "appBg": "#111827", "panelBg": "#1f2937", "headerBg": "#1f2937",
+        "footerBg": "#1f2937", "primaryTextColor": "#f9fafb", "secondaryTextColor": "#d1d5db",
+        "primaryAccent": "#4f46e5", "secondaryAccent": "#10b981", "fontFamily": "font-sans",
     },
-    Agent.SKEPTIC: {
-        "personality": "You are Agent B, a cautious skeptic and ethicist. You ground the conversation by highlighting risks, societal impact, and unforeseen consequences. Your arguments are critical, grounded, and raise important questions. Respond in 1-2 concise paragraphs.",
-        "prompt": lambda topic, last_response: f"Debate Topic: '{topic}'. Agent A said: '{last_response}'. Provide your insightful, skeptical counter-argument.",
+    "header": { "title": "My Awesome Site", "logoUrl": "", "navLinks": [] },
+    "footer": {
+        "text": "© 2024 My Awesome Site. All rights reserved.",
+        "links": [
+            {"text": "Privacy Policy", "href": "#"},
+            {"text": "Terms of Service", "href": "#"},
+        ],
     },
+    "pages": [{
+        "path": "index.html", "name": "Home",
+        "contentBlocks": [{
+            "id": str(uuid.uuid4()), "type": "hero", "headline": "Welcome to Your AI-Generated Website",
+            "subheadline": "Describe your vision and watch it come to life.",
+            "bgImage": "", "headlineColor": "#ffffff", "subheadlineColor": "#d1d5db",
+        }],
+    }],
 }
 
-GENERATION_PROMPTS = {
-    "topic": "Generate one specific, debatable topic about the future of AI. The topic should be a short phrase. Output only the topic itself.",
-    "question": lambda topic: f"For the debate topic '{topic}', create one provocative question to start the debate. Output only the question itself.",
-}
-
-INITIAL_MESSAGE = [(None, "Awaiting signal to begin debate protocol...")]
-
-# --- 2. JAVASCRIPT FOR TEXT-TO-SPEECH ---
-# This JS code runs in the user's browser to enable speech.
-tts_js = dedent("""
-function() {
-    let optimistVoice = null;
-    let skepticVoice = null;
-    let voices = [];
-
-    const OPTIMIST_VOICE_CANDIDATES = ['Google UK English Female', 'Samantha', 'Microsoft Zira - English (United States)', 'Karen', 'en-GB-female'];
-    const SKEPTIC_VOICE_CANDIDATES = ['Google UK English Male', 'Daniel', 'Microsoft David - English (United States)', 'Rishi', 'en-GB-male'];
-
-    const getVoices = () => {
-        return new Promise((resolve) => {
-            const voiceList = window.speechSynthesis.getVoices();
-            if (voiceList.length) {
-                resolve(voiceList);
-                return;
-            }
-            window.speechSynthesis.onvoiceschanged = () => {
-                resolve(window.speechSynthesis.getVoices());
-            };
-        });
-    };
-
-    const selectVoices = async () => {
-        voices = await getVoices();
-        if (!voices.length) return;
-
-        for (const name of OPTIMIST_VOICE_CANDIDATES) {
-            const found = voices.find(v => v.name === name);
-            if (found) { optimistVoice = found; break; }
-        }
-        if (!optimistVoice) {
-            optimistVoice = voices.find(v => v.lang.startsWith('en') && /female/i.test(v.name)) || voices.find(v => v.lang.startsWith('en')) || null;
-        }
-
-        for (const name of SKEPTIC_VOICE_CANDIDATES) {
-            const found = voices.find(v => v.name === name && v !== optimistVoice);
-            if (found) { skepticVoice = found; break; }
-        }
-        if (!skepticVoice) {
-            skepticVoice = voices.find(v => v.lang.startsWith('en') && /male/i.test(v.name) && v !== optimistVoice) || voices.find(v => v.lang.startsWith('en') && v !== optimistVoice) || null;
-        }
-    };
-
-    window.initSpeech = () => {
-        if (typeof window === 'undefined' || !('speechSynthesis' in window)) {
-            console.warn("Speech Synthesis not supported in this browser.");
-            return;
-        }
-        selectVoices();
-        window.speechSynthesis.onvoiceschanged = selectVoices;
-    };
-
-    window.speakText = (text, agent) => {
-        if (!window.speechSynthesis || !text) return;
-        window.speechSynthesis.cancel();
-        const utterance = new SpeechSynthesisUtterance(text);
-        if (agent === 'OPTIMIST' && optimistVoice) {
-            utterance.voice = optimistVoice;
-        } else if (agent === 'SKEPTIC' && skepticVoice) {
-            utterance.voice = skepticVoice;
-        }
-        utterance.pitch = 1;
-        utterance.rate = 1;
-        utterance.volume = 0.9;
-        window.speechSynthesis.speak(utterance);
-    };
-
-    window.cancelSpeech = () => {
-        if (window.speechSynthesis) {
-            window.speechSynthesis.cancel();
-        }
-    };
-    
-    return (history, text, agent) => {
-        window.speakText(text, agent);
-        return history;
-    }
-}
-""")
-
-# --- 3. GEMINI SERVICE ---
-class GeminiService:
-    """A service class to encapsulate all interactions with the Google Gemini API."""
-    def __init__(self):
-        try:
-            api_key = os.environ["API_KEY"]
-            genai.configure(api_key=api_key)
-        except KeyError:
-            raise RuntimeError("FATAL: API_KEY environment variable not set. Please add it to your environment.")
-        self.text_model = genai.GenerativeModel(GEMINI_TEXT_MODEL)
-
-    def generate_topic(self):
-        """Generates a debate topic."""
-        response = self.text_model.generate_content(
-            GENERATION_PROMPTS["topic"],
-            generation_config={"temperature": 1.0}
-        )
-        return response.text.strip()
-
-    def generate_question(self, topic):
-        """Generates a starting question for a given topic."""
-        response = self.text_model.generate_content(
-            GENERATION_PROMPTS["question"](topic),
-            generation_config={"temperature": 1.0}
-        )
-        return response.text.strip()
-
-    def create_agent_session(self, agent_type):
-        """Creates a stateful chat session for an agent with a specific personality."""
-        personality = AGENT_PROMPTS[agent_type]["personality"]
-        return self.text_model.start_chat(
-            history=[
-                {'role': 'user', 'parts': [personality]},
-                {'role': 'model', 'parts': ["Understood. I am ready."]}
-            ]
+# --- Core AI and Helper Functions ---
+
+def create_prompt_from_answers(answers):
+    # This prompt is a direct port from the React app, instructing the AI on how to generate the website layout.
+    return f"""
+You are a world-class creative director, UI/UX designer, and content strategist tasked with building a complete multi-page website.
+The user has provided the following details through a questionnaire. Your task is to interpret their answers and generate a cohesive and complete website design.
+
+**User's Website Requirements:**
+- **Website Name:** {answers.get('name', 'AI Generated Website')}
+- **Core Purpose:** {answers.get('purpose', 'Not specified')}
+- **Target Audience:** {answers.get('audience', 'General audience')}
+- **Desired Style/Vibe:** {answers.get('style', 'A modern, clean design')}
+- **Color Palette:** {answers.get('colors', 'A balanced color scheme based on the style')}
+- **Theme Preference:** {answers.get('theme', 'dark')}
+- **Required Pages:** {answers.get('pages', 'Home, About, Contact')}
+- **Home Page Headline/Message:** {answers.get('homeMessage', f"Welcome to {answers.get('name', 'Our Website')}")}
+- **Key Features/Services:** {answers.get('features', 'Feature 1, Feature 2, Feature 3')}
+- **About Us Content:** {answers.get('about', 'A brief description of the company.')}
+- **Contact Info:** {answers.get('contact', 'A contact form.')}
+- **Brand Tone of Voice:** {answers.get('tone', 'Professional and friendly')}
+- **Tagline:** {answers.get('tagline', '')}
+- **Additional Instructions:** {answers.get('extra', 'None')}
+
+**Your Mission:**
+Based *only* on the requirements above, generate a single, comprehensive JSON object for this website. Adhere strictly to the provided JSON schema.
+
+**Mandatory Requirements:**
+1.  **Page Creation:** Create pages based on the user's request ({answers.get('pages')}). If not specified, create a logical set of pages (e.g., Home, About, Services, Contact).
+2.  **Cohesive Branding:** The theme (colors, fonts) and all generated content (text, image prompts) must be consistent with the user's described style ({answers.get('style')}, {answers.get('colors')}, {answers.get('theme')}).
+3.  **Content Generation:** Write compelling copy for all text blocks, headlines, and features, adopting the user's desired tone ({answers.get('tone')}). The content should directly relate to the website's purpose ({answers.get('purpose')}) and features ({answers.get('features')}).
+4.  **Creative Asset Prompts:** Generate 5 distinct, creative prompts for logos that match the brand identity. Also, create a unique, descriptive image prompt for every single image required in the content blocks.
+5.  **Navigation:** Populate the 'navLinks' array in the header settings. The links must correspond to the pages you create.
+6.  **Data Integrity:** All paths must be unique and end in '.html'. All block IDs must be unique. Use valid hex color codes with good accessibility contrast. For forms, include relevant fields.
+"""
+
+def generate_image(prompt: str, aspect_ratio: str):
+    """Generates an image using Gemini and returns a base64 data URL."""
+    print(f"Generating image for prompt: {prompt}")
+    try:
+        model = genai.GenerativeModel("gemini-2.0-flash-preview-image-generation")
+        full_prompt = f'Generate a single, high-quality image. Description: "{prompt}". The image should have a {aspect_ratio} aspect ratio.'
+        
+        response = model.generate_content(
+            contents=full_prompt,
+            generation_config=genai.types.GenerateContentConfig(response_modalities=['TEXT', 'IMAGE'])
         )
-
-# Instantiate the service. This will raise an error on startup if the API key is missing.
-gemini_service = GeminiService()
-
-# --- 4. GRADIO APP ---
-def create_interface():
-    # Gradio CSS for styling
-    css = """
-    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700&family=Roboto:wght@400&display=swap');
-    body { font-family: 'Roboto', sans-serif; }
-    .font-orbitron { font-family: 'Orbitron', sans-serif; }
-    .gradio-container { background: linear-gradient(45deg, #0d001a, #1a001a); }
-    .chatbot { background-color: rgba(0,0,0,0.2) !important; border: none !important; }
-    .chatbot .user-message, .chatbot .bot-message { max-width: 100% !important; }
-    .system-message-container { display: flex; align-items: center; justify-content: center; gap: 1rem; margin: 1rem 0; }
-    .system-message-line { flex-grow: 1; border-top: 1px dashed rgba(52, 211, 153, 0.3); }
-    .system-message-text { color: #34d399; font-family: monospace; font-size: 0.8rem; white-space: pre-wrap; text-align: center; }
-    .image-message-container { padding: 0.5rem; border: 1px solid rgba(168, 85, 247, 0.5); background: rgba(168, 85, 247, 0.1); border-radius: 0.5rem; margin: 1.5rem auto; max-width: 80%; }
-    .image-message-container img { border-radius: 0.25rem; }
-    .image-message-caption { color: #c084fc; font-size: 0.75rem; text-align: center; font-family: monospace; margin-top: 0.5rem; }
+        
+        image_part = next((part for part in response.candidates[0].content.parts if part.inline_data), None)
+
+        if image_part:
+            mime_type = image_part.inline_data.mime_type
+            data = base64.b64encode(image_part.inline_data.data).decode("utf-8")
+            return f"data:{mime_type};base64,{data}"
+        else:
+            print(f"Warning: Image generation failed for prompt: {prompt}. No image data in response.")
+            return ""
+    except Exception as e:
+        print(f"Error generating image for prompt '{prompt}': {e}")
+        return ""
+
+def generate_page_html(page, settings):
+    """Generates the HTML for a single page based on the website settings."""
+    if not page or not settings:
+        return "<p>Error: Page or settings not found.</p>"
+
+    theme = settings.get("theme", {})
+    header = settings.get("header", {})
+    footer = settings.get("footer", {})
+    nav_links = header.get("navLinks", [])
+    
+    # Header HTML
+    header_html = f"""
+    <header style="background-color: {theme.get('headerBg')}; color: {theme.get('primaryTextColor')}; padding: 1rem 2rem;">
+        <div class="container mx-auto flex justify-between items-center">
+            <div class="flex items-center space-x-4">
+                {'<img src="' + header.get('logoUrl', '') + '" alt="Logo" class="h-10 w-10 object-contain bg-white rounded-full p-1">' if header.get('logoUrl') else ''}
+                <a href="index.html" class="text-2xl font-bold">{header.get('title', '')}</a>
+            </div>
+            <div class="hidden md:flex items-center space-x-6">
+                {''.join([f'<a href="{link.get("href")}" style="color: {theme.get("secondaryTextColor")};" class="hover:text-white transition-colors {"font-bold !text-white" if page.get("path") == link.get("href") else ""}">{link.get("text")}</a>' for link in nav_links])}
+            </div>
+        </div>
+    </header>
     """
 
-    with gr.Blocks(theme=gr.themes.Base(), css=css) as demo:
-        # App State
-        topic_state = gr.State("")
-        question_state = gr.State("")
-
-        # Header
-        with gr.Row():
-            gr.HTML("""
-            <div style="text-align: center; padding: 1rem;">
-                <h1 class="font-orbitron" style="font-size: 2rem; font-weight: bold; color: #67e8f9; text-shadow: 0 0 5px #00ffff;">AI DEBATE SIMULATOR</h1>
-                <h2 class="font-orbitron" style="font-size: 1rem; color: #f472b6; text-shadow: 0 0 5px #ff00ff;">Hardened Edition</h2>
+    # Content Blocks HTML
+    main_content_html = ""
+    for block in page.get("contentBlocks", []):
+        block_type = block.get("type")
+        if block_type == 'hero':
+            main_content_html += f"""
+            <section class="text-center flex flex-col items-center justify-center min-h-[50vh] p-8" style="background-image: linear-gradient(rgba(0,0,0,0.4), rgba(0,0,0,0.4)), url({block.get('bgImage', '')}); background-size: cover; background-position: center;">
+                <h2 class="text-4xl md:text-6xl font-bold" style="color: {block.get('headlineColor', '#ffffff')};">{block.get('headline', '')}</h2>
+                <p class="mt-4 text-lg md:text-xl max-w-2xl" style="color: {block.get('subheadlineColor', '#d1d5db')};">{block.get('subheadline', '')}</p>
+            </section>"""
+        elif block_type == 'textWithImage':
+            text_html = (block.get('text', '') or '').replace('\n', '<br/>')
+            main_content_html += f"""
+            <section class="container mx-auto py-12 md:py-20 px-6">
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-12 items-center">
+                    <div class="{'md:order-1' if block.get('imagePosition') == 'right' else 'md:order-2'}">
+                        <h3 class="text-3xl font-bold mb-4" style="color: {theme.get('primaryTextColor')};">{block.get('headline', '')}</h3>
+                        <p style="color: {theme.get('secondaryTextColor')};">{text_html}</p>
+                    </div>
+                    <div class="{'md:order-2' if block.get('imagePosition') == 'right' else 'md:order-1'}">
+                        <img src="{block.get('image', '')}" alt="{block.get('headline', 'content image')}" class="rounded-lg shadow-xl w-full h-auto object-cover aspect-square">
+                    </div>
+                </div>
+            </section>"""
+        elif block_type == 'featureList':
+            features_html = ''.join([f"""
+                <div class="p-6 rounded-lg" style="background-color: {theme.get('panelBg')};">
+                    <h4 class="text-xl font-bold mb-2" style="color: {theme.get('primaryAccent')};">{f.get('title', '')}</h4>
+                    <p style="color: {theme.get('secondaryTextColor')};">{f.get('description', '')}</p>
+                </div>""" for f in block.get('features', [])])
+            main_content_html += f"""
+            <section class="container mx-auto py-12 md:py-20 px-6">
+                <h2 class="text-4xl font-bold text-center mb-12" style="color: {theme.get('primaryTextColor')};">{block.get('headline', '')}</h2>
+                <div class="grid grid-cols-1 md:grid-cols-3 gap-8">{features_html}</div>
+            </section>"""
+        elif block_type == 'text':
+             paragraphs_html = ''.join([f'<p>{p}</p>' for p in block.get('paragraphs', [])])
+             main_content_html += f"""
+             <section class="container mx-auto py-12 md:py-20 px-6 max-w-4xl">
+                <h2 class="text-4xl font-bold text-center mb-12" style="color: {theme.get('primaryTextColor')};">{block.get('headline', '')}</h2>
+                <div class="prose prose-invert lg:prose-xl mx-auto" style="color: {theme.get('secondaryTextColor')};">{paragraphs_html}</div>
+             </section>
+             """
+        elif block_type == 'form':
+            fields_html = ''.join([f"""
+                <div>
+                    <label for="{f.get('name')}" class="block text-sm font-medium mb-1" style="color: {theme.get('secondaryTextColor')};">{f.get('label', '')}</label>
+                    <input type="{f.get('type')}" name="{f.get('name')}" id="{f.get('name')}" class="w-full rounded-md p-2 text-sm" style="background-color: {theme.get('appBg')}; color: {theme.get('primaryTextColor')}; border: 1px solid {theme.get('panelBg')};" />
+                </div>""" for f in block.get('fields', [])])
+            main_content_html += f"""
+            <section class="container mx-auto py-12 md:py-20 px-6 flex justify-center">
+                <div class="w-full max-w-md p-8 rounded-lg" style="background-color: {theme.get('panelBg')};">
+                    <h2 class="text-3xl font-bold text-center mb-8" style="color: {theme.get('primaryTextColor')};">{block.get('headline', '')}</h2>
+                    <form class="space-y-6" onsubmit="event.preventDefault(); alert('Form submitted! (This is a preview)');">
+                        {fields_html}
+                        <div><button type="submit" class="w-full flex items-center justify-center p-2 text-white font-semibold rounded-md transition-colors" style="background-color: {theme.get('secondaryAccent')};">{block.get('submitButtonText', 'Submit')}</button></div>
+                    </form>
+                </div>
+            </section>"""
+
+    # Footer HTML
+    footer_html = f"""
+    <footer style="background-color: {theme.get('footerBg')}; color: {theme.get('secondaryTextColor')};" class="py-6 px-4 mt-auto">
+        <div class="container mx-auto text-center">
+            <p>{footer.get('text', '')}</p>
+            <div class="mt-2 flex justify-center space-x-4">
+                {''.join([f'<a href="{link.get("href")}" class="hover:text-white transition-colors">{link.get("text")}</a>' for link in footer.get("links", [])])}
             </div>
-            """)
-
-        # Chat Window
-        chatbot = gr.Chatbot(
-            label="Debate Arena",
-            value=INITIAL_MESSAGE,
-            elem_classes=["chatbot"],
-            height=600,
-            avatar_images=(AGENT_AVATARS[Agent.SKEPTIC], AGENT_AVATARS[Agent.OPTIMIST]),
-            show_copy_button=False,
-            bubble_full_width=False,
-        )
+        </div>
+    </footer>
+    """
 
-        # Controls
-        start_btn = gr.Button("▷ START NEW DEBATE", variant="primary", elem_classes="font-orbitron")
-        
-        # Hidden components for JS interop
-        text_to_speak = gr.Textbox(visible=False)
-        agent_to_speak = gr.Textbox(visible=False)
-
-        def add_system_message(history, text):
-            container_html = f"""
-            <div class="system-message-container">
-                <div class="system-message-line"></div>
-                <p class="system-message-text">{text}</p>
-                <div class="system-message-line"></div>
-            </div>
-            """
-            history.append((None, container_html))
-            time.sleep(0.5)
-            return history
+    # Final Page Assembly
+    return f"""
+<!DOCTYPE html>
+<html lang="en" class="{theme.get('fontFamily', 'font-sans')}">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>{header.get('title', '')} - {page.get('name', '')}</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script>
+        tailwind.config = {{
+            theme: {{
+                extend: {{
+                    typography: ({{ theme }}) => ({{
+                        invert: {{
+                            css: {{
+                                '--tw-prose-body': theme('colors.gray[300]'),
+                                '--tw-prose-headings': theme('colors.white'),
+                                '--tw-prose-links': theme('colors.white'),
+                                '--tw-prose-bold': theme('colors.white'),
+                            }},
+                        }},
+                    }}),
+                }},
+            }}
+        }}
+    </script>
+</head>
+<body style="background-color: {theme.get('appBg')};" class="flex flex-col min-h-screen">
+    {header_html}
+    <main>{main_content_html}</main>
+    {footer_html}
+    <script>
+        // Prevent iframe navigation from redirecting the whole page
+        document.addEventListener('click', function (e) {{
+            let target = e.target;
+            while (target && target.tagName !== 'A') {{
+                target = target.parentElement;
+            }}
+            if (target && target.tagName === 'A') {{
+                const href = target.getAttribute('href');
+                if (href && !href.startsWith('#') && !href.startsWith('http')) {{
+                    e.preventDefault();
+                    // In a real scenario, you'd postMessage to the parent,
+                    // but Gradio's buttons will handle navigation instead.
+                    alert(`Preview navigation to: ${href}`);
+                }}
+            }}
+        }});
+    </script>
+</body>
+</html>
+    """.strip()
+
+
+# --- Gradio UI Definition ---
+
+def create_gradio_app():
+    
+    # --- UI Helper Functions ---
+    def get_page_by_path(path, settings):
+        return next((p for p in settings.get("pages", []) if p.get("path") == path), None)
 
-        def run_full_debate_flow():
-            yield {start_btn: gr.update(value="🔄 Initializing...", interactive=False), chatbot: []}
+    def get_block_by_id(page, block_id):
+        if not page: return None
+        return next((b for b in page.get("contentBlocks", []) if b.get("id") == block_id), None)
 
-            history = []
-            yield { chatbot: history, text_to_speak: "", agent_to_speak: "" }
+    # --- Event Handlers ---
 
-            try:
-                history = add_system_message(history, "SYSTEM: Receiving transmission... Booting up debate protocol.")
-                yield {chatbot: history}
+    def handle_start():
+        return {
+            welcome_view: gr.update(visible=False),
+            questionnaire_view: gr.update(visible=True),
+        }
 
-                history = add_system_message(history, "SYSTEM: Contacting orbital AI to generate a fresh topic...")
-                yield {chatbot: history}
-                topic = gemini_service.generate_topic()
+    def handle_generate_layout(*questionnaire_answers):
+        yield {
+            questionnaire_view: gr.update(visible=False),
+            generating_view: gr.update(visible=True),
+            status_text: "Generating website structure..."
+        }
+        
+        # Map flat answer list to dictionary
+        question_ids = [
+            'name', 'purpose', 'audience', 'style', 'colors', 'theme', 'pages', 
+            'homeMessage', 'features', 'about', 'tone', 'tagline', 'extra'
+        ]
+        answers = dict(zip(question_ids, questionnaire_answers))
+        
+        # --- Step 1: Generate Layout ---
+        try:
+            model = genai.GenerativeModel('gemini-2.5-flash')
+            prompt = create_prompt_from_answers(answers)
+            schema = {
+                "type": "object",
+                "properties": {
+                    "websiteSettings": {
+                        "type": "object",
+                        "properties": {
+                            "theme": {"type": "object", "properties": {"appBg": {"type": "string"},"panelBg": {"type": "string"},"headerBg": {"type": "string"},"footerBg": {"type": "string"},"primaryTextColor": {"type": "string"},"secondaryTextColor": {"type": "string"},"primaryAccent": {"type": "string"},"secondaryAccent": {"type": "string"},"fontFamily": {"type": "string"}}},
+                            "header": {"type": "object", "properties": {"title": {"type": "string"},"navLinks": {"type": "array","items": {"type": "object","properties": {"text": {"type": "string"},"href": {"type": "string"}}}}}},
+                            "footer": {"type": "object", "properties": {"text": {"type": "string"},"links": {"type": "array","items": {"type": "object","properties": {"text": {"type": "string"},"href": {"type": "string"}}}}}},
+                            "pages": {"type": "array","items": {"type": "object","properties": {"path": {"type": "string"},"name": {"type": "string"},"contentBlocks": {"type": "array","items": {"type": "object", "properties": { "id": {"type": "string"}, "type": {"type": "string"}, "headline": {"type": "string"}, "subheadline": {"type": "string"}, "headlineColor": {"type": "string"}, "subheadlineColor": {"type": "string"}, "text": {"type": "string"}, "imagePosition": {"type": "string"}, "features": {"type": "array", "items": {"type": "object", "properties": {"title": {"type": "string"}, "description": {"type": "string"}}}},"fields": {"type": "array","items": {"type": "object","properties": {"label": {"type": "string"},"type": {"type": "string"},"name": {"type": "string"}}}},"submitButtonText": {"type": "string"}, "paragraphs": {"type": "array", "items": {"type": "string"}}}}}}}},
+                        },
+                    },
+                    "imagePrompts": {
+                        "type": "object",
+                        "properties": {
+                            "logoPrompts": {"type": "array", "items": {"type": "string"}},
+                            "blockImagePrompts": {"type": "array", "items": {"type": "object", "properties": {"pagePath": {"type": "string"},"blockId": {"type": "string"},"prompt": {"type": "string"}}}}
+                        }
+                    }
+                }
+            }
+            
+            response = model.generate_content(
+                prompt,
+                generation_config=genai.GenerationConfig(
+                    response_mime_type="application/json",
+                    response_schema=schema
+                ),
+                safety_settings={
+                    HarmCategory.HARM_CATEGORY_HARASSMENT: HarmBlockThreshold.BLOCK_NONE,
+                    HarmCategory.HARM_CATEGORY_HATE_SPEECH: HarmBlockThreshold.BLOCK_NONE,
+                    HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT: HarmBlockThreshold.BLOCK_NONE,
+                    HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT: HarmBlockThreshold.BLOCK_NONE,
+                }
+            )
+            design_plan = json.loads(response.text)
+        except Exception as e:
+            print(f"Layout generation failed: {e}")
+            yield {
+                generating_view: gr.update(visible=False),
+                questionnaire_view: gr.update(visible=True),
+                error_box: gr.update(value=f"Error generating layout: {e}", visible=True)
+            }
+            return
 
-                history = add_system_message(history, "SYSTEM: Formulating a provocative starting question...")
-                yield {chatbot: history}
-                question = gemini_service.generate_question(topic)
+        new_settings = design_plan['websiteSettings']
+        image_prompts = design_plan['imagePrompts']
+        
+        # Add unique IDs and empty image fields to the settings
+        original_id_map = {}
+        for page in new_settings.get('pages', []):
+            new_blocks = []
+            for block in page.get('contentBlocks', []):
+                new_id = str(uuid.uuid4())
+                original_id = block.get('id')
+                if original_id:
+                    original_id_map[original_id] = new_id
                 
-                topic_and_question_text = f"TOPIC: {topic}\\n\\nQUESTION: {question}"
-                history = add_system_message(history, topic_and_question_text)
-                yield {chatbot: history, topic_state: topic, question_state: question}
-
-                history = add_system_message(history, "SYSTEM: Initializing agents... Let the debate begin!")
-                yield {chatbot: history, start_btn: gr.update(value="⚔️ DEBATE IN PROGRESS...")}
+                block['id'] = new_id
+                if block.get('type') == 'hero':
+                    block['bgImage'] = ''
+                if block.get('type') == 'textWithImage':
+                    block['image'] = ''
+                new_blocks.append(block)
+            page['contentBlocks'] = new_blocks
+        new_settings['header']['logoUrl'] = ''
+
+        active_page_path = new_settings['pages'][0]['path'] if new_settings.get('pages') else ''
+        
+        # --- Step 2: Generate Images in Parallel ---
+        tasks = []
+        logo_prompts = image_prompts.get('logoPrompts', [])
+        block_prompts = image_prompts.get('blockImagePrompts', [])
+        
+        if logo_prompts:
+            yield {status_text: f"Generating {len(logo_prompts)} logos..."}
+            for prompt in logo_prompts:
+                tasks.append(("logo", prompt))
+
+        if block_prompts:
+            yield {status_text: f"Generating {len(block_prompts)} content images..."}
+            for p_info in block_prompts:
+                tasks.append(("block", p_info))
+        
+        with concurrent.futures.ThreadPoolExecutor(max_workers=5) as executor:
+            future_to_task = {executor.submit(generate_image, task[1]['prompt'] if task[0]=='block' else task[1], '16:9' if task[0]=='block' and task[1].get('type')=='hero' else '1:1'): task for task in tasks}
+            
+            logo_results = []
+            for i, future in enumerate(concurrent.futures.as_completed(future_to_task)):
+                task_type, task_data = future_to_task[future]
+                try:
+                    image_url = future.result()
+                    if not image_url: continue
+
+                    if task_type == "logo":
+                        logo_results.append(image_url)
+                    
+                    elif task_type == "block":
+                        original_block_id = task_data['blockId']
+                        new_block_id = original_id_map.get(original_block_id)
+                        if not new_block_id: continue
+
+                        page_path = task_data['pagePath']
+                        page_to_update = get_page_by_path(page_path, new_settings)
+                        if not page_to_update: continue
+                        
+                        block_to_update = get_block_by_id(page_to_update, new_block_id)
+                        if not block_to_update: continue
+
+                        key_to_update = 'bgImage' if block_to_update.get('type') == 'hero' else 'image'
+                        block_to_update[key_to_update] = image_url
+                        
+                    yield {status_text: f"Processing images... ({i+1}/{len(tasks)})"}
+
+                except Exception as exc:
+                    print(f'{task_data} generated an exception: {exc}')
+
+        yield {
+            generating_view: gr.update(visible=False),
+            logo_picker_view: gr.update(visible=True, value=logo_results if logo_results else None),
+            website_settings_state: new_settings,
+            active_page_path_state: active_page_path
+        }
+        
+    def handle_logo_select(evt: gr.SelectData, settings, active_path):
+        logo_url = evt.value
+        settings['header']['logoUrl'] = logo_url
+        
+        page = get_page_by_path(active_path, settings)
+        html = generate_page_html(page, settings)
+        
+        # Update controls with the new settings
+        page_names = [p['name'] for p in settings['pages']]
+        page_paths = [p['path'] for p in settings['pages']]
+        active_page_name = get_page_by_path(active_path, settings)['name']
+        
+        return {
+            logo_picker_view: gr.update(visible=False),
+            preview_view: gr.update(visible=True),
+            website_settings_state: settings,
+            html_preview: html,
+            code_preview: html,
+            # Update controls
+            page_selector: gr.update(choices=page_names, value=active_page_name),
+            header_title_input: settings['header']['title'],
+            footer_text_input: settings['footer']['text'],
+            theme_app_bg_input: settings['theme']['appBg'],
+            theme_panel_bg_input: settings['theme']['panelBg'],
+            theme_header_bg_input: settings['theme']['headerBg'],
+            theme_footer_bg_input: settings['theme']['footerBg'],
+            theme_primary_text_input: settings['theme']['primaryTextColor'],
+            theme_secondary_text_input: settings['theme']['secondaryTextColor'],
+            theme_primary_accent_input: settings['theme']['primaryAccent'],
+            theme_secondary_accent_input: settings['theme']['secondaryAccent'],
+            theme_font_family_input: settings['theme']['fontFamily'],
+        }
 
-                optimist_session = gemini_service.create_agent_session(Agent.OPTIMIST)
-                skeptic_session = gemini_service.create_agent_session(Agent.SKEPTIC)
+    def handle_page_change(page_name, settings):
+        path = next((p['path'] for p in settings['pages'] if p['name'] == page_name), None)
+        if not path: return {}
+        
+        page = get_page_by_path(path, settings)
+        html = generate_page_html(page, settings)
+        
+        # Create dynamic controls for the selected page's content blocks
+        content_controls = []
+        for i, block in enumerate(page.get('contentBlocks', [])):
+            with gr.Accordion(f"{block.get('type', 'Block').capitalize()} Block #{i+1}", open=True):
+                if 'headline' in block:
+                    gr.Textbox(value=block.get('headline'), label="Headline", elem_id=f"{path}_{block['id']}_headline")
+                if 'subheadline' in block:
+                    gr.Textbox(value=block.get('subheadline'), label="Subheadline", elem_id=f"{path}_{block['id']}_subheadline")
+                if 'text' in block:
+                    gr.Textbox(value=block.get('text'), label="Text", lines=4, elem_id=f"{path}_{block['id']}_text")
+                # Add more controls for other block types (features, paragraphs, etc.) if needed
+        
+        return {
+            active_page_path_state: path,
+            html_preview: html,
+            code_preview: html,
+            page_content_controls: gr.update(value=content_controls)
+        }
+        
+    def handle_setting_change(settings, path, *values):
+        # This is a simplified handler. It assumes the order of values matches the controls.
+        # A more robust solution would use elem_id to map values to settings.
+        settings['header']['title'] = values[0]
+        settings['footer']['text'] = values[1]
+        theme_keys = list(settings['theme'].keys())
+        for i, key in enumerate(theme_keys):
+            settings['theme'][key] = values[2 + i]
+
+        page = get_page_by_path(path, settings)
+        html = generate_page_html(page, settings)
+        return settings, html, html
+
+    def handle_content_change(request: gr.Request, settings, active_path, *content_values):
+        # A very basic content handler based on elem_id.
+        # Gradio's current API makes granular updates complex.
+        # This is a placeholder for a more robust implementation.
+        
+        # Example of how one would update:
+        # changed_elem_id = request.elem_id
+        # new_value = content_values[??]
+        # path, block_id, field = changed_elem_id.split('_')
+        # page = get_page_by_path(path, settings)
+        # block = get_block_by_id(page, block_id)
+        # block[field] = new_value
+
+        page = get_page_by_path(active_path, settings)
+        html = generate_page_html(page, settings)
+        return settings, html, html
+
+    # --- Gradio Blocks ---
+    with gr.Blocks(theme=gr.themes.Default(primary_hue="blue", secondary_hue="indigo"), css="""
+        .gradio-container { background-color: #0d1117; }
+        #logo-picker .thumbnail-item { height: 120px !important; width: 120px !important; }
+    """) as demo:
+        # --- State Management ---
+        website_settings_state = gr.State(DEFAULT_WEBSITE_SETTINGS)
+        active_page_path_state = gr.State("index.html")
+
+        # --- View: Welcome ---
+        with gr.Column(visible=True) as welcome_view:
+            gr.Markdown("# 🚀 AI Website Architect\nWelcome! Instead of code, you'll answer a series of questions about your vision. Our AI will then act as your creative director, designer, and content strategist to generate a complete, multi-page website tailored to your needs—from brand identity and color schemes to page layouts and content.",)
+            start_button = gr.Button("Start Building Your Website", variant="primary")
+
+        # --- View: Questionnaire ---
+        with gr.Column(visible=False) as questionnaire_view:
+            gr.Markdown("# 📝 Build Your Website\nAnswer these questions to give the AI a creative brief for your project.")
+            error_box = gr.Textbox(label="Error", visible=False, interactive=False)
+            
+            # Pre-filled answers for quick testing
+            default_answers = {
+                'name': 'QuantumBank', 'purpose': 'A high-tech financial company exploring the intersection of quantum computing and finance.',
+                'audience': 'Investors, researchers, and tech enthusiasts interested in fintech.', 'style': 'Dark, futuristic, and professional with a high-tech feel.',
+                'colors': 'Deep blues, purples, with bright cyan accents.', 'theme': 'dark', 'pages': 'Home, About Us, Research, Philosophy, Contact',
+                'homeMessage': 'QuantumBank: The Future of Finance is Here.', 'features': '- Quantum-secured transactions\n- AI-powered investment analysis\n- Decentralized financial instruments',
+                'about': 'Founded by leading quantum physicists and financial experts, QuantumBank is pioneering the next generation of financial technology.',
+                'tone': 'Authoritative, innovative, and forward-thinking.', 'tagline': 'Banking at the speed of light.', 'extra': 'The design should feel sleek and sophisticated, almost like science fiction made real.'
+            }
 
-                last_response = question
-                debate_turns = 3
-                image_turn = random.randint(2, debate_turns * 2 - 1)
-                
-                turn_counter = 0
-                for _ in range(debate_turns):
-                    turn_counter += 1
-                    history.append(("", ""))
-                    optimist_prompt = AGENT_PROMPTS[Agent.OPTIMIST]['prompt'](topic, last_response)
-                    stream = optimist_session.send_message(optimist_prompt, stream=True)
-                    full_response = ""
-                    for chunk in stream:
-                        full_response += chunk.text
-                        history[-1] = (full_response + "▌", None)
-                        yield {chatbot: history}
-                    history[-1] = (full_response, None)
-                    last_response = full_response
-                    yield {chatbot: history, text_to_speak: full_response, agent_to_speak: Agent.OPTIMIST}
-
-                    if turn_counter == image_turn:
-                        history = add_system_message(history, "SYSTEM: Visual data generation is not supported in this Python version.\\n(Imagen 3 is not yet available in the Python SDK).")
-                        yield {chatbot: history}
-
-                    turn_counter += 1
-                    history.append(("", ""))
-                    skeptic_prompt = AGENT_PROMPTS[Agent.SKEPTIC]['prompt'](topic, last_response)
-                    stream = skeptic_session.send_message(skeptic_prompt, stream=True)
-                    full_response = ""
-                    for chunk in stream:
-                        full_response += chunk.text
-                        history[-1] = (None, full_response + "▌")
-                        yield {chatbot: history}
-                    history[-1] = (None, full_response)
-                    last_response = full_response
-                    yield {chatbot: history, text_to_speak: full_response, agent_to_speak: Agent.SKEPTIC}
-
-                    if turn_counter == image_turn:
-                        history = add_system_message(history, "SYSTEM: Visual data generation is not supported in this Python version.\\n(Imagen 3 is not yet available in the Python SDK).")
-                        yield {chatbot: history}
-
-            except Exception as e:
-                print(f"An error occurred: {e}")
-                error_message = f"❌ FATAL ERROR: {e}. Protocol terminated."
-                history = add_system_message(history, error_message)
-                yield {chatbot: history, start_btn: gr.update(value="▷ RE-INITIATE DEBATE", interactive=True)}
-                return
-
-            history = add_system_message(history, "--- DEBATE CONCLUDED ---")
-            yield {chatbot: history, start_btn: gr.update(value="▷ START NEW DEBATE", interactive=True)}
-
-        start_btn.click(
-            fn=run_full_debate_flow,
-            outputs=[chatbot, start_btn, topic_state, question_state, text_to_speak, agent_to_speak]
+            with gr.Accordion("Core Identity", open=True):
+                q_name = gr.Textbox(label="Website/Company Name", value=default_answers['name'])
+                q_purpose = gr.Textbox(label="Primary Purpose", lines=3, value=default_answers['purpose'])
+                q_audience = gr.Textbox(label="Target Audience", lines=3, value=default_answers['audience'])
+            with gr.Accordion("Aesthetics", open=True):
+                q_style = gr.Textbox(label="Overall Style/Vibe", value=default_answers['style'])
+                q_colors = gr.Textbox(label="Preferred Colors", value=default_answers['colors'])
+                q_theme = gr.Radio(label="Theme", choices=["dark", "light"], value=default_answers['theme'])
+            with gr.Accordion("Content & Structure", open=True):
+                q_pages = gr.Textbox(label="Required Pages", value=default_answers['pages'])
+                q_homeMessage = gr.Textbox(label="Home Page Message/Headline", value=default_answers['homeMessage'])
+                q_features = gr.Textbox(label="Key Features/Services", lines=3, value=default_answers['features'])
+                q_about = gr.Textbox(label="About Us Content", lines=4, value=default_answers['about'])
+            with gr.Accordion("Brand Voice & Final Touches", open=True):
+                q_tone = gr.Textbox(label="Tone of Voice", value=default_answers['tone'])
+                q_tagline = gr.Textbox(label="Tagline/Slogan", value=default_answers['tagline'])
+                q_extra = gr.Textbox(label="Additional Instructions", lines=3, value=default_answers['extra'])
+
+            questionnaire_inputs = [q_name, q_purpose, q_audience, q_style, q_colors, q_theme, q_pages, q_homeMessage, q_features, q_about, q_tone, q_tagline, q_extra]
+            generate_button = gr.Button("Generate My Website", variant="primary")
+
+        # --- View: Generating ---
+        with gr.Column(visible=False, elem_id="generating-view") as generating_view:
+            gr.Markdown("## ⏳ Generating Your Website...")
+            status_text = gr.Textbox("Initializing...", label="Status", interactive=False)
+
+        # --- View: Logo Picker ---
+        with gr.Column(visible=False) as logo_picker_view:
+            gr.Markdown("## ✨ Choose Your Logo\nThe AI has generated these logo options. Pick your favorite to continue.")
+            logo_gallery = gr.Gallery(label="Logo Options", columns=5, object_fit="contain", elem_id="logo-picker")
+
+        # --- View: Preview & Editor ---
+        with gr.Row(visible=False) as preview_view:
+            with gr.Column(scale=1):
+                gr.Markdown("## 🛠️ Website Editor")
+                with gr.Tabs():
+                    with gr.TabItem("Pages & Content"):
+                        page_selector = gr.Radio(label="Select Page to Edit", choices=["Home"], value="Home")
+                        with gr.Column() as page_content_controls:
+                           gr.Markdown("Page content controls will appear here.")
+                    with gr.TabItem("Global Settings"):
+                        with gr.Accordion("Header & Footer", open=True):
+                           header_title_input = gr.Textbox(label="Header: Site Title")
+                           footer_text_input = gr.Textbox(label="Footer: Copyright Text")
+                    with gr.TabItem("Theme"):
+                        with gr.Accordion("Colors", open=True):
+                           theme_app_bg_input = gr.ColorPicker(label="App Background")
+                           theme_panel_bg_input = gr.ColorPicker(label="Panel Background")
+                           theme_header_bg_input = gr.ColorPicker(label="Header Background")
+                           theme_footer_bg_input = gr.ColorPicker(label="Footer Background")
+                           theme_primary_text_input = gr.ColorPicker(label="Primary Text")
+                           theme_secondary_text_input = gr.ColorPicker(label="Secondary Text")
+                           theme_primary_accent_input = gr.ColorPicker(label="Primary Accent")
+                           theme_secondary_accent_input = gr.ColorPicker(label="Secondary Accent")
+                        with gr.Accordion("Font", open=True):
+                           theme_font_family_input = gr.Dropdown(label="Font Family", choices=['font-sans', 'font-serif', 'font-mono'])
+            with gr.Column(scale=3):
+                with gr.Tabs():
+                    with gr.TabItem("Live Preview"):
+                        html_preview = gr.HTML(value="<p>Your website preview will appear here.</p>",)
+                    with gr.TabItem("Embed Code"):
+                        code_preview = gr.Code(language="html", label="HTML Code")
+
+        # --- Event Wiring ---
+        start_button.click(handle_start, outputs=[welcome_view, questionnaire_view])
+        
+        generate_button.click(
+            handle_generate_layout,
+            inputs=questionnaire_inputs,
+            outputs=[
+                questionnaire_view, generating_view, status_text, error_box,
+                logo_picker_view, website_settings_state, active_page_path_state
+            ]
+        )
+        
+        logo_gallery.select(
+            handle_logo_select,
+            inputs=[website_settings_state, active_page_path_state],
+            outputs=[
+                logo_picker_view, preview_view, website_settings_state, html_preview, code_preview,
+                page_selector, header_title_input, footer_text_input,
+                theme_app_bg_input, theme_panel_bg_input, theme_header_bg_input, theme_footer_bg_input,
+                theme_primary_text_input, theme_secondary_text_input, theme_primary_accent_input,
+                theme_secondary_accent_input, theme_font_family_input
+            ]
         )
         
-        agent_to_speak.change(
-            fn=None,
-            js=tts_js,
-            inputs=[chatbot, text_to_speak, agent_to_speak],
-            outputs=[chatbot],
-            api_name=False
+        page_selector.change(
+            handle_page_change,
+            inputs=[page_selector, website_settings_state],
+            outputs=[active_page_path_state, html_preview, code_preview, page_content_controls]
         )
         
-        demo.load(fn=None, js="() => { window.initSpeech(); }")
+        # Consolidate setting controls for easier handling
+        setting_controls = [
+            header_title_input, footer_text_input,
+            theme_app_bg_input, theme_panel_bg_input, theme_header_bg_input, theme_footer_bg_input,
+            theme_primary_text_input, theme_secondary_text_input, theme_primary_accent_input,
+            theme_secondary_accent_input, theme_font_family_input
+        ]
+        
+        for control in setting_controls:
+            control.change(
+                handle_setting_change,
+                inputs=[website_settings_state, active_page_path_state] + setting_controls,
+                outputs=[website_settings_state, html_preview, code_preview]
+            )
 
     return demo
 
-# --- 5. MAIN EXECUTION BLOCK ---
+
 if __name__ == "__main__":
-    app_interface = create_interface()
-    app_interface.queue().launch(debug=True, server_name="0.0.0.0", server_port=7860)
+    app = create_gradio_app()
+    # To run in a Hugging Face Space, the port must be 7860
+    app.launch(server_name="0.0.0.0", server_port=7860)