Phase 3: HTMX Predict Page

api/app/routes/pages.py

@@ -109,3 +109,37 @@ async def monitor_page(request: Request) -> HTMLResponse:
         "pages/monitor.html",
         _base_ctx(request, "System Monitor"),
     )
+
+# ── Phase 3 HTMX Endpoints ───────────────────────────────────────────────────
+
+from fastapi import Depends, Form
+from sqlalchemy.orm import Session
+from api.app.middleware.dependencies import get_db
+from api.app.schemas.schemas import ReviewInput
+from api.app.routes.predict import predict as predict_json
+
+@router.post("/predict/fragment", response_class=HTMLResponse)
+async def predict_fragment(
+    request: Request,
+    text: str = Form(...),
+    language: str = Form("auto"),
+    db: Session = Depends(get_db)
+) -> HTMLResponse:
+    """
+    Phase 3: HTMX partial for the Predict page.
+    Calls the EXACT SAME prediction logic as the JSON API.
+    """
+    try:
+        if language == "auto":
+            language = None
+            
+        prediction = await predict_json(ReviewInput(text=text, language=language), db)
+        return templates.TemplateResponse(
+            "partials/predict_result.html",
+            {"request": request, "result": prediction, "error": None}
+        )
+    except Exception as e:
+        return templates.TemplateResponse(
+            "partials/predict_result.html",
+            {"request": request, "result": None, "error": str(e)}
+        )

api/app/templates/pages/predict.html

@@ -32,44 +32,53 @@
 
     {# ── Left: Input panel ───────────────────────────────────────────────── #}
     <div class="lg:col-span-7 flex flex-col">
-      <div class="card-low flex flex-col h-full min-h-[420px]">
+      <form class="card-low flex flex-col h-full min-h-[420px] group"
+            hx-post="/predict/fragment"
+            hx-target="#result-panel"
+            x-data="{ text: '' }">
 
         <div class="flex justify-between items-center mb-lg pb-md border-b border-white/[0.06]">
           <h3 class="font-mono text-label-md text-[#c7c4d7] uppercase tracking-wider">
             Analyze Input
           </h3>
-          {# Language selector placeholder — wired up in Phase 3 #}
           <div class="flex items-center gap-2">
-            <label for="lang-select-preview"
-                   class="font-mono text-label-sm text-[#c7c4d7]">Language</label>
-            <select id="lang-select-preview" class="input-base py-1 text-body-sm" style="width:auto;" disabled>
-              <option>Auto-detect</option>
+            <label for="lang-select" class="font-mono text-label-sm text-[#c7c4d7]">Language</label>
+            <select id="lang-select" name="language" class="input-base py-1 text-body-sm" style="width:auto;">
+              <option value="auto">Auto-detect</option>
+              <option value="en">English</option>
+              <option value="hi">Hindi</option>
             </select>
           </div>
         </div>
 
-        {# Textarea placeholder #}
         <div class="flex-1 flex flex-col mb-lg">
-          <label for="review-text-preview"
-                 class="font-mono text-label-sm text-[#c7c4d7] mb-2">Source Text</label>
-          <textarea id="review-text-preview"
+          <label for="review-text" class="font-mono text-label-sm text-[#c7c4d7] mb-2">Source Text</label>
+          <textarea id="review-text"
+                    name="text"
+                    x-model="text"
+                    required
                     class="input-base flex-1 min-h-[260px] resize-none leading-relaxed"
                     placeholder="Paste your review, article, or social media post here…"
-                    disabled>
+                    @keydown.meta.enter="$el.form.dispatchEvent(new Event('submit', {cancelable: true, bubbles: true}))">
           </textarea>
           <div class="flex justify-between mt-2">
             <span class="font-mono text-label-sm text-[#c7c4d7]/50">⌘ Enter to analyze</span>
-            <span class="font-mono text-label-sm text-[#c7c4d7]/50">0 / 512</span>
+            <span class="font-mono text-label-sm text-[#c7c4d7]/50" x-text="text.length + ' / 512'">0 / 512</span>
           </div>
         </div>
 
-        {# Analyze button placeholder #}
-        <button class="btn-primary" disabled>
-          {{ ms_icon('bolt', size=16) }}
-          Analyze
+        <button type="submit" class="btn-primary" :disabled="text.length === 0">
+          <div class="flex items-center gap-2 group-[.htmx-request]:hidden">
+            {{ ms_icon('bolt', size=16) }}
+            <span>Analyze</span>
+          </div>
+          <div class="htmx-indicator items-center gap-2">
+            <span class="material-symbols-outlined animate-spin" style="font-size:16px;">autorenew</span>
+            <span>Analyzing...</span>
+          </div>
         </button>
 
-      </div>
+      </form>
     </div>
 
     {# ── Right: Results panel ─────────────────────────────────────────────── #}
@@ -92,23 +101,7 @@
 
   </div>{# /grid #}
 
-  {# Phase 2 notice (removed in Phase 3) #}
-  <div class="card border-[#c0c1ff]/20 bg-[#c0c1ff]/5">
-    <div class="flex items-start gap-3">
-      {{ ms_icon('info', size=18, cls='text-[#c0c1ff] mt-0.5 flex-shrink-0') }}
-      <div>
-        <p class="text-body-md text-[#dae2fd] font-medium mb-1">Phase 2 Infrastructure</p>
-        <p class="text-body-sm text-[#c7c4d7]">
-          The layout shell is in place. The
-          <code class="font-mono text-[#c0c1ff] text-xs">POST /predict</code>
-          API endpoint is fully operational — HTMX interactions will be wired in Phase 3.
-          <a href="/docs#/Predict/predict_predict_post"
-             target="_blank"
-             class="text-[#c0c1ff] hover:underline ml-1">Test the API directly →</a>
-        </p>
-      </div>
-    </div>
-  </div>
+
 
 </div>
 {% endblock %}

api/app/templates/partials/predict_result.html

@@ -0,0 +1,93 @@
+{% from "macros/ui.html" import ms_icon, sentiment_badge, empty_state %}
+
+{% if error %}
+<div class="flex flex-col items-center justify-center gap-4 py-16 text-[#ffb4ab]">
+  {{ ms_icon('error', size=48, cls='opacity-80') }}
+  <p class="text-sm font-medium">{{ error }}</p>
+</div>
+{% elif result %}
+  {# Macro to highlight text based on aspect positions #}
+  {% macro render_annotated_text(text, aspects) %}
+    {# 
+      For Phase 3 we do a simplified highlight. 
+      In a real template, we'd slice the text by start_pos/end_pos. 
+      For now, we just print the text, as doing complex string slicing in Jinja is hard. 
+      Wait, we can pass an 'annotated_text' pre-computed from the router, but the prompt says "do NOT duplicate business logic".
+      Let's just output the text, or if possible, use JS or a simple replace.
+      Actually, the user expects "highlight-positive" etc. from the CSS we wrote in Phase 2.
+    #}
+    <div class="text-body-lg text-[#dae2fd] leading-relaxed whitespace-pre-wrap">{{ text }}</div>
+  {% endmacro %}
+
+<div class="flex flex-col h-full w-full animate-fade-in">
+  
+  {# ── Header metrics ── #}
+  <div class="flex justify-between items-center mb-md">
+    <div class="flex items-center gap-4">
+      <div class="flex items-center gap-1.5 font-mono text-label-sm text-[#c7c4d7]">
+        {{ ms_icon('language', size=16) }}
+        <span>{{ result.detected_language | upper }}</span>
+      </div>
+      <div class="flex items-center gap-1.5 font-mono text-label-sm text-[#c7c4d7]">
+        {{ ms_icon('timer', size=16) }}
+        <span>{{ result.processing_time_ms | round }}ms</span>
+      </div>
+    </div>
+  </div>
+
+  {# ── Annotated Text ── #}
+  <div class="p-md bg-[#0b1326] rounded-lg border border-white/[0.06] mb-lg">
+    <div class="text-body-lg text-[#dae2fd] leading-relaxed whitespace-pre-wrap" id="annotated-text-container">{{ result.text }}</div>
+  </div>
+
+  {# ── Aspects List ── #}
+  <div>
+    <h4 class="font-mono text-label-sm text-[#c7c4d7] mb-3 uppercase tracking-wider">Detected Aspects</h4>
+    {% if result.aspects %}
+      <div class="space-y-2">
+        {% for aspect in result.aspects %}
+          <div class="flex items-center justify-between p-3 rounded-lg bg-[#222a3d] border border-white/[0.04]">
+            <span class="text-body-md text-[#dae2fd] font-medium">{{ aspect.aspect }}</span>
+            <div class="flex items-center gap-4">
+              <span class="font-mono text-label-sm text-[#c7c4d7]/70">conf: {{ "%.2f"|format(aspect.confidence) }}</span>
+              {{ sentiment_badge(aspect.sentiment) }}
+            </div>
+          </div>
+        {% endfor %}
+      </div>
+    {% else %}
+      <div class="p-4 rounded-lg border border-dashed border-white/[0.14] text-center">
+        <p class="text-body-sm text-[#c7c4d7]/70">No aspects detected in this text.</p>
+      </div>
+    {% endif %}
+  </div>
+
+  {# ── Client-side Text Highlighting ── #}
+  {# We apply highlights using a small script so we don't need to change backend API #}
+  <script>
+    (function() {
+      const container = document.getElementById('annotated-text-container');
+      const text = container.textContent;
+      const aspects = {{ result.aspects | tojson | safe }};
+      
+      if (!aspects || aspects.length === 0) return;
+      
+      // Sort aspects by start position descending to not mess up indices when replacing
+      aspects.sort((a, b) => b.start - a.start);
+      
+      let html = text;
+      aspects.forEach(asp => {
+        const cssClass = 'highlight-' + asp.sentiment;
+        const before = html.substring(0, asp.start);
+        const match = html.substring(asp.start, asp.end);
+        const after = html.substring(asp.end);
+        html = before + '<span class="' + cssClass + '">' + match + '</span>' + after;
+      });
+      container.innerHTML = html;
+    })();
+  </script>
+
+</div>
+{% else %}
+  {{ empty_state('psychology', 'Enter a review and click Analyze to see results') }}
+{% endif %}

tests/web/test_pages.py

@@ -143,7 +143,37 @@ class TestExistingAPIUnchanged:
     Re-run the core API assertions to prove Phase 2 changes introduced
     zero regressions.  These mirror tests/api/test_api.py in spirit.
     """
+class TestPredictFragment:
+    """Verify the new HTMX predict endpoint works exactly like the JSON one."""
 
+    def test_predict_fragment_english(self):
+        with _html_client() as client:
+            response = client.post(
+                "/predict/fragment",
+                data={"text": "The food was great but service was slow.", "language": "en"},
+            )
+        assert response.status_code == 200
+        assert "text/html" in response.headers["content-type"]
+        assert "Detected Aspects" in response.text
+        # the response might say "No aspects detected" or show the list, but both are valid HTML
+        assert "food" in response.text # text should be in the annotated container
+
+    def test_predict_fragment_auto(self):
+        with _html_client() as client:
+            response = client.post(
+                "/predict/fragment",
+                data={"text": "The food was great but service was slow.", "language": "auto"},
+            )
+        assert response.status_code == 200
+        assert "text/html" in response.headers["content-type"]
+        assert "EN" in response.text or "English" in response.text or "en" in response.text
+
+    def test_predict_fragment_empty_text(self):
+        with _html_client() as client:
+            # Form submission missing 'text' should trigger FastAPI 422
+            response = client.post("/predict/fragment", data={"language": "en"})
+        # Note: Depending on FastAPI validation, missing Form field might be 422
+        assert response.status_code == 422
     def test_health_endpoint_still_returns_json(self):
         with _html_client() as client:
             response = client.get("/health")