Update main_web.py

main_web.py

@@ -1,4 +1,4 @@
-# FILE: main_web.py (Hugging Face Demo)
+# FILE: main_web.py (Hugging Face Demo - FINAL, Mobile-First Pro Version)
 
 import gradio as gr
 import asyncio
@@ -13,11 +13,10 @@ logging.basicConfig(level=logging.INFO, format="%(asctime)s - %(name)s - %(level
 logger = logging.getLogger("ZOTHEOS_Interface_HF")
 
 def get_asset_path(filename: str) -> str:
-    # In Hugging Face Spaces, assets are in the root or /assets
     return filename if os.path.exists(filename) else os.path.join('assets', filename)
 
 logo_path_verified = get_asset_path("zotheos_logo.png")
-GUMROAD_LINK = "https://zotheos.gumroad.com/l/jibfv"
+GUMROAD_LINK = "https://zotheos.gumroad.com/l/jibfv" # Your actual Gumroad link
 
 # --- Core Logic Imports ---
 try:
@@ -26,61 +25,106 @@ except ImportError:
     MainFusionPublic = None
 ai_system = MainFusionPublic() if MainFusionPublic else None
 
-# --- ✅ DEFINITIVE "OBSIDIAN" CSS THEME ---
+# --- ✅ DEFINITIVE "OBSIDIAN" MOBILE-FIRST CSS ---
 zotheos_web_css = """
 @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&family=Inter:wght@400;600;700&display=swap');
-body { background: linear-gradient(135deg, #000000, #1c1c1c) !important; font-family: 'Inter', sans-serif !important; }
-.gradio-container { background: transparent !important; max-width: 900px !important; }
-#header_logo img { max-height: 70px !important; filter: brightness(0) invert(1) !important; }
-#header_subtitle { font-family: 'Bebas Neue', cursive !important; font-size: 1.8rem !important; text-transform: uppercase !important; letter-spacing: 2px !important; }
-#header_tagline { color: #a0a0a0 !important; margin-top: -10px !important; margin-bottom: 1.5rem !important; }
-.gradio-textbox textarea { font-size: 1.1rem !important; }
-.result-box { background-color: rgba(18, 18, 18, 0.8) !important; border: 1px solid #333 !important; border-radius: 12px !important; padding: 1.5rem 2rem !important; }
-.result-box h2 { font-family: 'Bebas Neue', cursive !important; font-size: 1.5rem !important; border-bottom: 1px solid #333; padding-bottom: 0.75rem; margin-bottom: 1rem; }
-.cta-button { background: #FFFFFF !important; color: #000000 !important; font-weight: bold !important; }
-.cta-button:hover { background: #e0e0e0 !important; }
+
+body {
+    background: linear-gradient(135deg, #000000, #1c1c1c) !important;
+    background-attachment: fixed !important;
+    color: #f0f0f0 !important;
+    font-family: 'Inter', sans-serif !important;
+}
+.gradio-container {
+    background: transparent !important;
+    max-width: 800px !important; /* Centered, comfortable width */
+    margin: 0 auto !important; /* Horizontally center the entire app */
+    padding: 1.5rem !important;
+}
+#main-column {
+    display: flex;
+    flex-direction: column;
+    align-items: center; /* Center all content horizontally */
+    width: 100%;
+}
+#header_logo img {
+    max-height: 70px !important;
+    filter: brightness(0) invert(1) !important;
+    margin-bottom: 0.5rem !important;
+}
+#header_subtitle {
+    font-family: 'Bebas Neue', cursive !important;
+    font-size: 1.8rem !important; text-transform: uppercase !important;
+    letter-spacing: 2px !important; text-align: center;
+}
+#header_tagline {
+    color: #a0a0a0 !important; text-align: center;
+    margin-top: -10px !important; margin-bottom: 2rem !important;
+}
+.gradio-accordion {
+    background-color: #1a1a1a !important; border: 1px solid #333 !important;
+}
+.cta-button {
+    background: #FFFFFF !important; color: #000000 !important;
+    font-weight: bold !important;
+}
+.gradio-textbox textarea {
+    font-size: 1.1rem !important;
+}
+#results_column { margin-top: 1.5rem; width: 100%; }
+.result-box {
+    background-color: rgba(18, 18, 18, 0.9) !important;
+    border: 1px solid #333333 !important; padding: 1.5rem !important;
+}
+.result-box h2 {
+    font-family: 'Bebas Neue', cursive !important; font-size: 1.5rem !important;
+    border-bottom: 1px solid #333; padding-bottom: 0.75rem; margin-bottom: 1rem;
+}
 footer { display: none !important; }
 """
 
 # --- Build Gradio Interface ---
 def build_interface():
     zotheos_theme = gr.themes.Base(primary_hue=gr.themes.colors.neutral, secondary_hue=gr.themes.colors.neutral).set(
-        button_primary_background_fill="white", button_primary_text_color="black"
+        button_primary_background_fill="white", button_primary_text_color="black", block_radius="12px"
     )
 
     with gr.Blocks(theme=zotheos_theme, css=zotheos_web_css, title=APP_TITLE) as demo:
-        with gr.Column(elem_classes="gradio-container"):
-            # --- ✅ UPGRADED HEADER WITH CALL TO ACTION ---
+        with gr.Column(elem_id="main-column"):
+            # --- Header & CTA ---
             gr.Image(value=logo_path_verified, elem_id="header_logo", show_label=False, container=False, interactive=False)
             gr.Markdown("Ethical Fusion AI for Synthesized Intelligence", elem_id="header_subtitle")
             gr.Markdown("Fusing perspectives for deeper truth.", elem_id="header_tagline")
-            
+
             with gr.Accordion("🔥 Get the Full Offline Desktop Version", open=True):
                 gr.Markdown("This web demo uses smaller, slower models. For the full-power, GPU-accelerated, 100% private experience, download the ZOTHEOS Public Beta for your Windows PC.")
-                download_button = gr.Button("Download Full Version on Gumroad", link=GUMROAD_LINK, elem_classes="cta-button")
+                gr.Button("Download Full Version on Gumroad", link=GUMROAD_LINK, elem_classes="cta-button")
             
-            gr.Markdown("---") # Separator
-
-            # --- Main Interaction Area ---
-            query_input = gr.Textbox(label="Your Inquiry:", placeholder="e.g., Analyze the ethical implications of AI in art...", lines=6)
+            gr.Markdown("---")
+            
+            # --- Main Interaction ---
+            query_input = gr.Textbox(label="Your Inquiry:", placeholder="e.g., What is universal peace?", lines=5)
             submit_button = gr.Button("Process Inquiry (Web Demo)", variant="primary")
             
-            with gr.Column(visible=False) as results_box:
-                gr.Markdown("## ✨ ZOTHEOS Final Synthesized Insight ✨")
-                synthesized_summary_output = gr.Markdown()
-                gr.Markdown("### 💬 Detailed Individual Perspectives")
-                fusion_output = gr.Markdown()
+            with gr.Column(elem_id="results_column", visible=False) as results_box:
+                with gr.Column(elem_classes="result-box"):
+                    synthesized_summary_output = gr.Markdown()
+                with gr.Column(elem_classes="result-box", elem_id="fusion_output"):
+                    fusion_output = gr.Markdown()
 
-        # --- Backend Logic ---
+        # --- ✅ UNBREAKABLE EVENT HANDLER ---
         async def process_query_wrapper(query):
             if not ai_system:
-                return gr.update(visible=True), "[SYSTEM OFFLINE] The AI engine failed to load.", ""
+                return gr.update(visible=True), "## SYSTEM OFFLINE\n\n[The AI engine failed to load.]", ""
             
+            # Show a loading message
+            yield gr.update(visible=True), "Synthesizing... Please wait.", ""
+
             response = await ai_system.process_query_with_fusion(query)
-            summary = response.split("###")[0].replace("## ✨ ZOTHEOS Final Synthesized Insight ✨", "").strip()
+            summary = response.split("###")[0].strip()
             perspectives = "###" + response.split("###", 1)[1] if "###" in response else ""
             
-            return gr.update(visible=True), summary, perspectives
+            yield gr.update(visible=True), summary, perspectives
 
         submit_button.click(
             fn=process_query_wrapper,
@@ -91,7 +135,7 @@ def build_interface():
 
 # --- Main Execution Block ---
 if __name__ == "__main__":
-    logger.info("--- Initializing ZOTHEOS Hugging Face Demo ---")
+    logger.info("--- Initializing ZOTHEOS Hugging Face Demo (v2.1) ---")
     zotheos_interface = build_interface()
-    logger.info("✅ HF Demo UI built.")
+    logger.info("✅ HF Demo UI built successfully.")
     zotheos_interface.queue().launch()