HTMX fix

A critical fix to prevent page reload

Author: Eatosin

app/components.py

@@ -1,73 +1,106 @@
 from fasthtml.common import *
 
-def Layout(title, content):
-    """Global Page Layout with PicoCSS"""
+def PageLayout(title: str, content: list):
+    """
+    The Base Layout.
+    Injects PicoCSS (Styling), PrismJS (Syntax Highlight), and HTMX (Interactivity).
+    """
     return Html(
         Head(
             Title(title),
-            # PicoCSS: Minimalist Semantic CSS
+            # 1. PicoCSS: Semantic minimalist framework
             Link(rel="stylesheet", href="https://cdn.jsdelivr.net/npm/@picocss/pico@latest/css/pico.min.css"),
-            # PrismJS: For beautiful JSON Syntax Highlighting
+            
+            # 2. HTMX (CRITICAL FIX: Prevents page reloads)
+            Script(src="https://unpkg.com/htmx.org@1.9.10"),
+
+            # 3. PrismJS: For beautiful JSON highlighting
             Link(rel="stylesheet", href="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/themes/prism-tomorrow.min.css"),
             Script(src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/prism.min.js"),
             Script(src="https://cdnjs.cloudflare.com/ajax/libs/prism/1.29.0/components/prism-json.min.js"),
-            Style("body { max-width: 800px; margin: 0 auto; padding: 20px; }")
+            
+            # Custom Styles
+            Style("""
+                body { max-width: 900px; margin: 0 auto; padding: 20px; background-color: #11191f; }
+                .json-box { border-radius: 8px; overflow: hidden; margin-top: 20px; }
+                h1 { color: #00E5FF; }
+                button.contrast { background-color: #00E5FF; border-color: #00E5FF; color: black; font-weight: bold; }
+                .error-box { background: #3d1a1a; color: #ff8080; padding: 15px; border-radius: 8px; border: 1px solid #ff4d4d; }
+            """)
         ),
         Body(
             Header(
-                H1("🛡️ Structura", style="color: #00E5FF; margin-bottom: 0;"),
+                H1("🛡️ Structura"),
                 P("The Unbreakable Data Architect", style="opacity: 0.7;"),
                 style="border-bottom: 1px solid #333; padding-bottom: 20px; margin-bottom: 40px;"
             ),
-            Main(content),
+            Main(*content),
             Footer(
-                P("Powered by PydanticAI & Gemini 2.5", style="text-align: center; opacity: 0.5; font-size: 0.8rem;")
+                P("Powered by PydanticAI & Gemini 2.5", style="text-align: center; opacity: 0.5; font-size: 0.8rem; margin-top: 50px;")
             )
         )
     )
 
-def InputForm():
-    """The HTMX-powered Input Form"""
+# ... (Rest of components.py remains the same)
+def HeroSection():
+    return Div(
+        H2("Turn Chaos into Structure"),
+        P("Paste messy emails, invoices, or resumes below. Get guaranteed, type-safe JSON back."),
+        style="margin-bottom: 30px;"
+    )
+
+def ExtractionForm():
+    """
+    The Interactive Form.
+    Uses HTMX (hx-post) to swap the result area without a page reload.
+    """
     return Form(
-        Label("Raw Input Data", cls="label"),
+        Label("Raw Input Data"),
         Textarea(
             name="text_input", 
-            placeholder="Paste messy text here (Email, Invoice, Job Post)...",
+            placeholder="e.g. Invoice #909 from CloudFix for $500...",
             rows=8,
-            style="font-family: monospace;"
+            style="font-family: monospace; background: #0b0f13; color: white; border: 1px solid #333;"
         ),
 
-        Label("Target Schema", cls="label"),
-        Select(
-            Option("Invoice Extraction", value="invoice"),
-            Option("Resume Parsing", value="resume"), 
-            Option("Email Summary", value="email"),
-            name="schema_type"
+        Grid(
+            Label("Target Schema", 
+                Select(
+                    Option("Invoice Extraction", value="invoice"),
+                    Option("Resume Parsing", value="resume"), 
+                    Option("Generic Data", value="generic"),
+                    name="schema_type"
+                )
+            ),
+            # Empty div for grid balance or future features
+            Div() 
         ),
 
         Button("Extract Structure ⚡", cls="contrast", type="submit"),
 
-        # HTMX Magic: Swaps the result div without reloading page
+        # HTMX Configuration
         hx_post="/extract",
         hx_target="#result-area",
-        hx_swap="innerHTML"
+        hx_swap="innerHTML",
+        hx_indicator="#loading"
     )
 
-def ResultDisplay(json_data=None, error=None):
-    """Renders the output or error state"""
-    if error:
-        return Div(
-            H4("❌ Extraction Failed"),
-            P(error),
-            style="background: #3d1a1a; color: #ff8080; padding: 15px; border-radius: 8px; border: 1px solid #ff4d4d;"
-        )
-    
-    if json_data:
-        return Div(
-            H4("✅ Validated JSON Output"),
-            # Pre/Code blocks triggered PrismJS highlighting
-            Pre(Code(json_data, cls="language-json")),
-            P("Schema validation passed.", style="color: #00E5FF; font-size: 0.8rem; margin-top: 10px;")
-        )
-    
-    return Div(id="result-area") # Empty placeholder
+def LoadingIndicator():
+    return Div("⚙️ AI is processing...", id="loading", cls="htmx-indicator", style="color: #00E5FF; margin-top: 10px;")
+
+def SuccessDisplay(json_str: str):
+    return Div(
+        H4("✅ Validated Output", style="color: #4ade80; margin-bottom: 10px;"),
+        Div(
+            Pre(Code(json_str, cls="language-json")),
+            cls="json-box"
+        ),
+        P("Schema Verified by PydanticAI", style="color: grey; font-size: 0.8rem; margin-top: 10px; text-align: right;")
+    )
+
+def ErrorDisplay(error_msg: str):
+    return Div(
+        H4("❌ Extraction Failed"),
+        P(error_msg),
+        cls="error-box"
+    )