changess

2026-03-25 19:46:14 -03:00
parent 9d5413a522
commit 26f61077b8
13 changed files with 382 additions and 187 deletions
--- a/packages/frontend/src/pages/Recom.tsx
+++ b/packages/frontend/src/pages/Recom.tsx
@@ -0,0 +1,148 @@
+import { useState, useCallback, useEffect } from 'preact/hooks';
+import { route } from 'preact-router';
+import { PipelineProgress } from '../components/PipelineProgress.js';
+import { RecommendationCard } from '../components/RecommendationCard.js';
+import { useRecommendations } from '../hooks/useRecommendations.js';
+import { useSSE } from '../hooks/useSSE.js';
+import { getRecommendation } from '../api/client.js';
+import type { Recommendation, SSEEvent, StageMap, PipelineStage } from '../types/index.js';
+
+interface RecomProps {
+  id: string;
+  path?: string;
+}
+
+const DEFAULT_STAGES: StageMap = {
+  interpreter: 'pending',
+  retrieval: 'pending',
+  ranking: 'pending',
+  curator: 'pending',
+};
+
+const STAGE_ORDER: (keyof StageMap)[] = ['interpreter', 'retrieval', 'ranking', 'curator'];
+
+export function Recom({ id }: RecomProps) {
+  const { feedback, submitFeedback, rerank, updateStatus, refreshList } = useRecommendations();
+
+  const [rec, setRec] = useState<Recommendation | null>(null);
+  const [stages, setStages] = useState<StageMap>(DEFAULT_STAGES);
+  const [sseUrl, setSseUrl] = useState<string | null>(null);
+
+  useEffect(() => {
+    setRec(null);
+    setStages(DEFAULT_STAGES);
+    setSseUrl(null);
+    getRecommendation(id)
+      .then((data) => {
+        setRec(data);
+        if (data.status === 'running' || data.status === 'pending') {
+          setStages(DEFAULT_STAGES);
+          setSseUrl(`/api/recommendations/${id}/stream`);
+        }
+      })
+      .catch(() => route('/'));
+  }, [id]);
+
+  const handleSSEEvent = useCallback(
+    (event: SSEEvent) => {
+      if (event.stage !== 'complete') {
+        const stageKey = event.stage as keyof StageMap;
+        if (STAGE_ORDER.includes(stageKey)) {
+          setStages((prev) => ({
+            ...prev,
+            [stageKey]: event.status === 'start' ? 'running' : event.status === 'done' ? 'done' : 'error',
+          }));
+        }
+      }
+
+      if (event.stage === 'complete' && event.status === 'done') {
+        setSseUrl(null);
+        updateStatus(id, 'done');
+        void getRecommendation(id).then(setRec);
+        void refreshList();
+      }
+
+      if (event.status === 'error') {
+        setSseUrl(null);
+        updateStatus(id, 'error');
+        const stageKey = event.stage as PipelineStage;
+        if (stageKey !== 'complete') {
+          setStages((prev) => ({ ...prev, [stageKey as keyof StageMap]: 'error' }));
+        }
+      }
+    },
+    [id, updateStatus, refreshList],
+  );
+
+  useSSE(sseUrl, handleSSEEvent);
+
+  const handleRerank = async () => {
+    await rerank(id);
+    setStages(DEFAULT_STAGES);
+    setSseUrl(`/api/recommendations/${id}/stream`);
+    setRec((prev) => (prev ? { ...prev, status: 'pending' } : null));
+  };
+
+  const isRunning = rec?.status === 'running' || rec?.status === 'pending' || !!sseUrl;
+  const feedbackMap = new Map(feedback.map((f) => [f.tv_show_name, f]));
+
+  return (
+    <div class="recom-page">
+      <nav class="recom-nav">
+        <a
+          class="recom-back"
+          href="/"
+          onClick={(e) => { e.preventDefault(); route('/'); }}
+        >
+          ← Recommender
+        </a>
+      </nav>
+
+      <div class="recom-content">
+        {isRunning && (
+          <div class="content-area">
+            <PipelineProgress stages={stages} />
+          </div>
+        )}
+
+        {!isRunning && rec?.status === 'done' && rec.recommendations && (
+          <div class="content-area">
+            <h2 class="rec-title">{rec.title}</h2>
+            <div class="cards-grid">
+              {rec.recommendations.map((show) => (
+                <RecommendationCard
+                  key={show.title}
+                  show={show}
+                  existingFeedback={feedbackMap.get(show.title)}
+                  onFeedback={async (name, stars, comment) => {
+                    await submitFeedback({ tv_show_name: name, stars, feedback: comment });
+                  }}
+                />
+              ))}
+            </div>
+            <div class="rerank-section">
+              <button
+                class="btn-rerank"
+                onClick={handleRerank}
+                disabled={feedback.length === 0}
+                title={feedback.length === 0 ? 'Rate at least one show to enable re-ranking' : 'Re-rank based on your feedback'}
+              >
+                Re-rank with Feedback {feedback.length > 0 ? `(${feedback.length} rated)` : ''}
+              </button>
+            </div>
+          </div>
+        )}
+
+        {!isRunning && rec?.status === 'error' && (
+          <div class="content-area error-state">
+            <h2>Something went wrong</h2>
+            <p>The pipeline encountered an error. You can try again by clicking Re-rank.</p>
+            <button class="btn-primary" onClick={handleRerank}>
+              Try Again
+            </button>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}