Update app.py

app.py

@@ -1,57 +1,661 @@
+
 import gradio as gr
+import os
+# Updated import to use the new 'google.genai' SDK
 from google import genai
 from google.genai import types
+import json
 from PIL import Image
 from io import BytesIO
-import os
+import base64
+import uuid
+import concurrent.futures
+import re
 
-# Make sure your GEMINI_API_KEY is set in Hugging Face secrets/environment
+# --- Configuration and Initialization ---
+
+# Get the API key from environment variables
 GEMINI_API_KEY = os.environ.get("GEMINI_API_KEY")
 if not GEMINI_API_KEY:
-    raise ValueError("GEMINI_API_KEY not found in environment variables.")
+    raise ValueError("GEMINI_API_KEY not found in environment variables. Please set it in your Hugging Face Space secrets.")
 
 # Initialize Gemini client
 client = genai.Client(api_key=GEMINI_API_KEY)
 
-# Gradio function
-def generate_image_and_caption(prompt):
+
+# --- 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",
+    },
+    "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",
+        }],
+    }],
+}
+
+# --- 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:
+        # Refactored to use the new client.models.generate_content method
+        full_prompt = f'Generate a single, high-quality image. Description: "{prompt}". The image should have a {aspect_ratio} aspect ratio.'
+        
         response = client.models.generate_content(
             model="gemini-2.0-flash-preview-image-generation",
-            contents=prompt,
-            config=types.GenerateContentConfig(
-                response_modalities=['TEXT', 'IMAGE']
-            )
+            contents=full_prompt,
+            config=types.GenerateContentConfig(response_modalities=['TEXT', 'IMAGE'])
         )
+        
+        image_part = next((part for part in response.candidates[0].content.parts if part.inline_data), None)
 
-        caption = "No text response."
-        img = 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 ""
 
-        for part in response.candidates[0].content.parts:
-            if part.text:
-                caption = part.text
-            elif part.inline_data:
-                img = Image.open(BytesIO(part.inline_data.data))
+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>"
 
-        return caption, img
+    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>
+    """
 
-    except Exception as e:
-        return f"Error: {str(e)}", None
+    # 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>
+        </div>
+    </footer>
+    """
+
+    # 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 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)
+
+    # --- Event Handlers ---
+
+    def handle_start():
+        return {
+            welcome_view: gr.update(visible=False),
+            questionnaire_view: gr.update(visible=True),
+        }
+
+    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:
+            # Refactored to use the new client.models.generate_content method
+            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 = client.models.generate_content(
+                model='gemini-2.5-flash',
+                contents=prompt,
+                config=types.GenerateContentConfig(
+                    response_mime_type="application/json",
+                    response_schema=schema,
+                    safety_settings={
+                        types.HarmCategory.HARM_CATEGORY_HARASSMENT: types.HarmBlockThreshold.BLOCK_NONE,
+                        types.HarmCategory.HARM_CATEGORY_HATE_SPEECH: types.HarmBlockThreshold.BLOCK_NONE,
+                        types.HarmCategory.HARM_CATEGORY_SEXUALLY_EXPLICIT: types.HarmBlockThreshold.BLOCK_NONE,
+                        types.HarmCategory.HARM_CATEGORY_DANGEROUS_CONTENT: types.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
+
+        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
+                
+                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'],
+        }
+
+    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
 
-# Gradio UI
-with gr.Blocks(title="Gemini 2.0 Flash Preview Image Generator") as demo:
-    gr.Markdown("## 🧠✨ Gemini 2.0 Flash Preview Image Generator")
-    gr.Markdown("Enter a prompt and get a 3D rendered image + text generated by Google Gemini.")
+        page = get_page_by_path(active_path, settings)
+        html = generate_page_html(page, settings)
+        return settings, html, html
 
-    with gr.Row():
-        prompt = gr.Textbox(label="Your Prompt", placeholder="Describe the scene...")
-        submit = gr.Button("Generate")
+    # --- 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.'
+            }
+
+            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
+            ]
+        )
+        
+        page_selector.change(
+            handle_page_change,
+            inputs=[page_selector, website_settings_state],
+            outputs=[active_page_path_state, html_preview, code_preview, page_content_controls]
+        )
+        
+        # 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]
+            )
 
-    output_text = gr.Textbox(label="Generated Description")
-    output_image = gr.Image(label="Generated Image")
+    return demo
 
-    submit.click(fn=generate_image_and_caption, inputs=prompt, outputs=[output_text, output_image])
 
-# Run the app
 if __name__ == "__main__":
-    demo.launch()
+    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)