new things
All checks were successful
Recommender Build and Deploy (internal) / Build Recommender Image (push) Successful in 4m4s
Recommender Build and Deploy (internal) / Deploy Recommender (internal) (push) Successful in 11s

This commit is contained in:
2026-04-02 19:24:58 -03:00
parent 91870f4046
commit ba38092784
19 changed files with 695 additions and 130 deletions

View File

@@ -24,6 +24,11 @@ export function createRecommendation(body: {
brainstorm_count?: number;
media_type: MediaType;
use_web_search?: boolean;
use_validator?: boolean;
hard_requirements?: boolean;
self_expansive?: boolean;
expansive_passes?: number;
expansive_mode?: 'soft' | 'extreme';
}): Promise<{ id: string }> {
return request('/recommendations', {
method: 'POST',

View File

@@ -62,6 +62,18 @@
color: #e879f9;
}
.badge-verified {
background: rgba(34, 197, 94, 0.15);
color: #4ade80;
}
.card-badges {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-bottom: 10px;
}
.card-title {
font-size: 16px;
font-weight: 600;
@@ -81,7 +93,6 @@
background: rgba(148, 163, 184, 0.12);
color: var(--text-dim);
display: inline-block;
margin-bottom: 10px;
text-transform: none;
letter-spacing: 0;
}

View File

@@ -244,4 +244,64 @@
.toggle-switch.on .toggle-knob {
transform: translateX(18px);
}
/* ── Disabled toggle ─────────────────────────────────────── */
.toggle-disabled {
opacity: 0.45;
cursor: not-allowed;
}
.toggle-switch-disabled {
cursor: not-allowed;
}
/* ── Self Expansive options ──────────────────────────────── */
.expansive-options {
padding: 12px 14px;
background: var(--bg-surface-2);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
display: flex;
flex-direction: column;
gap: 14px;
margin-top: -8px;
}
.mode-buttons {
display: flex;
gap: 8px;
}
.mode-btn {
flex: 1;
padding: 8px 0;
background: var(--bg-surface);
border: 1px solid var(--border);
border-radius: var(--radius-sm);
color: var(--text-muted);
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: background 0.15s, border-color 0.15s, color 0.15s;
font-family: inherit;
}
.mode-btn--active {
background: var(--accent-dim);
border-color: var(--accent);
color: var(--accent);
}
.mode-btn:hover:not(.mode-btn--active) {
background: var(--bg-surface-3);
border-color: var(--text-dim);
color: var(--text);
}
.mode-desc {
display: block;
margin-top: 4px;
}

View File

@@ -12,6 +12,11 @@ interface NewRecommendationModalProps {
brainstorm_count?: number;
media_type: MediaType;
use_web_search?: boolean;
use_validator?: boolean;
hard_requirements?: boolean;
self_expansive?: boolean;
expansive_passes?: number;
expansive_mode?: 'soft' | 'extreme';
}) => Promise<void>;
}
@@ -24,6 +29,11 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
const [themes, setThemes] = useState('');
const [brainstormCount, setBrainstormCount] = useState(100);
const [useWebSearch, setUseWebSearch] = useState(false);
const [useValidator, setUseValidator] = useState(false);
const [useHardRequirements, setUseHardRequirements] = useState(false);
const [selfExpansive, setSelfExpansive] = useState(false);
const [expansivePasses, setExpansivePasses] = useState(2);
const [expansiveMode, setExpansiveMode] = useState<'soft' | 'extreme'>('soft');
const [loading, setLoading] = useState(false);
const mediaLabel = mediaType === 'movie' ? 'Movie' : 'TV Show';
@@ -34,6 +44,12 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
setStep('form');
};
const handleWebSearchToggle = () => {
const next = !useWebSearch;
setUseWebSearch(next);
if (!next) setUseValidator(false);
};
const handleSubmit = async (e: Event) => {
e.preventDefault();
if (!mainPrompt.trim()) return;
@@ -47,6 +63,11 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
brainstorm_count: brainstormCount,
media_type: mediaType,
use_web_search: useWebSearch,
use_validator: useValidator,
hard_requirements: useHardRequirements,
self_expansive: selfExpansive,
expansive_passes: selfExpansive ? expansivePasses : 1,
expansive_mode: expansiveMode,
});
onClose();
} finally {
@@ -165,12 +186,96 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
<span class="toggle-title">Web Search</span>
<span class="toggle-desc">Use real-time web search for more accurate and up-to-date {mediaPluralLabel}</span>
</div>
<div class={`toggle-switch${useWebSearch ? ' on' : ''}`} onClick={() => setUseWebSearch((v) => !v)}>
<div class={`toggle-switch${useWebSearch ? ' on' : ''}`} onClick={handleWebSearchToggle}>
<div class="toggle-knob" />
</div>
</label>
</div>
<div class="form-group-toggle">
<label class={`toggle-label${!useWebSearch ? ' toggle-disabled' : ''}`}>
<div class="toggle-text">
<span class="toggle-title">Validator Agent</span>
<span class="toggle-desc">
Verify candidates against real {mediaPluralLabel} metadata using web search
{!useWebSearch && ' (requires Web Search)'}
</span>
</div>
<div
class={`toggle-switch${useValidator ? ' on' : ''}${!useWebSearch ? ' toggle-switch-disabled' : ''}`}
onClick={() => useWebSearch && setUseValidator((v) => !v)}
>
<div class="toggle-knob" />
</div>
</label>
</div>
<div class="form-group-toggle">
<label class="toggle-label">
<div class="toggle-text">
<span class="toggle-title">Hard Requirements</span>
<span class="toggle-desc">Strictly enforce all specified requirements when generating and ranking</span>
</div>
<div class={`toggle-switch${useHardRequirements ? ' on' : ''}`} onClick={() => setUseHardRequirements((v) => !v)}>
<div class="toggle-knob" />
</div>
</label>
</div>
<div class="form-group-toggle">
<label class="toggle-label">
<div class="toggle-text">
<span class="toggle-title">Self Expansive Mode</span>
<span class="toggle-desc">Re-run the pipeline using Full Match results to discover more great {mediaPluralLabel}</span>
</div>
<div class={`toggle-switch${selfExpansive ? ' on' : ''}`} onClick={() => setSelfExpansive((v) => !v)}>
<div class="toggle-knob" />
</div>
</label>
</div>
{selfExpansive && (
<div class="expansive-options">
<div class="form-group">
<label for="expansive-passes">Extra passes ({expansivePasses})</label>
<input
id="expansive-passes"
type="range"
class="form-input"
min={1}
max={5}
step={1}
value={expansivePasses}
onInput={(e) => setExpansivePasses(Number((e.target as HTMLInputElement).value))}
/>
</div>
<div class="form-group">
<label>Mode</label>
<div class="mode-buttons">
<button
type="button"
class={`mode-btn${expansiveMode === 'soft' ? ' mode-btn--active' : ''}`}
onClick={() => setExpansiveMode('soft')}
>
Soft
</button>
<button
type="button"
class={`mode-btn${expansiveMode === 'extreme' ? ' mode-btn--active' : ''}`}
onClick={() => setExpansiveMode('extreme')}
>
Extreme
</button>
</div>
<span class="toggle-desc mode-desc">
{expansiveMode === 'soft'
? 'Each extra pass brainstorms 60 new candidates in 2 buckets'
: `Each extra pass brainstorms ${brainstormCount} new candidates (same as main pass)`}
</span>
</div>
</div>
)}
<div class="modal-actions">
<button type="button" class="btn-secondary" onClick={onClose} disabled={loading}>
Cancel

View File

@@ -88,3 +88,26 @@
.pipeline-retry {
margin-top: 20px;
}
.pipeline-step--skipped {
border-color: var(--border);
background: var(--bg-surface);
opacity: 0.45;
}
.stage-skipped {
color: var(--text-dim);
}
.pipeline-pass-group--extra {
margin-top: 20px;
}
.pipeline-pass-label {
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.06em;
color: var(--text-dim);
margin-bottom: 8px;
}

View File

@@ -1,14 +1,18 @@
import './PipelineProgress.css';
import type { StageMap, StageStatus } from '../types/index.js';
const STAGES: { key: keyof StageMap; label: string }[] = [
{ key: 'interpreter', label: 'Interpreting Preferences' },
{ key: 'retrieval', label: 'Generating Candidates' },
{ key: 'ranking', label: 'Ranking Candidates' },
{ key: 'curator', label: 'Curating Results' },
];
export interface StageEntry {
key: string;
label: string;
}
export interface StageGroup {
label: string;
stages: StageEntry[];
}
interface PipelineProgressProps {
stageGroups: StageGroup[];
stages: StageMap;
onRetry?: () => void;
}
@@ -21,25 +25,35 @@ function StageIcon({ status }: { status: StageStatus }) {
return <span class="stage-icon stage-error"></span>;
case 'running':
return <span class="stage-icon stage-running spinner"></span>;
case 'skipped':
return <span class="stage-icon stage-skipped"></span>;
default:
return <span class="stage-icon stage-pending"></span>;
}
}
export function PipelineProgress({ stages, onRetry }: PipelineProgressProps) {
export function PipelineProgress({ stageGroups, stages, onRetry }: PipelineProgressProps) {
const hasError = Object.values(stages).some((s) => s === 'error');
return (
<div class="pipeline-progress">
<h3 class="pipeline-title">{hasError ? 'Pipeline Failed' : 'Generating Recommendations…'}</h3>
<ul class="pipeline-steps">
{STAGES.map(({ key, label }) => (
<li key={key} class={`pipeline-step pipeline-step--${stages[key]}`}>
<StageIcon status={stages[key]} />
<span class="pipeline-step-label">{label}</span>
</li>
))}
</ul>
{stageGroups.map((group, gi) => (
<div key={gi} class={`pipeline-pass-group${gi > 0 ? ' pipeline-pass-group--extra' : ''}`}>
{group.label && <div class="pipeline-pass-label">{group.label}</div>}
<ul class="pipeline-steps">
{group.stages.map(({ key, label }) => {
const status: StageStatus = stages[key] ?? 'pending';
return (
<li key={key} class={`pipeline-step pipeline-step--${status}`}>
<StageIcon status={status} />
<span class="pipeline-step-label">{label}</span>
</li>
);
})}
</ul>
</div>
))}
{hasError && onRetry && (
<div class="pipeline-retry">
<button class="btn-primary" onClick={onRetry}>Re-run Pipeline</button>

View File

@@ -4,6 +4,7 @@ import type { CuratorOutput, CuratorCategory } from '../types/index.js';
interface RecommendationCardProps {
show: CuratorOutput;
verified?: boolean;
existingFeedback?: { stars: number; feedback: string };
onFeedback: (item_name: string, stars: number, feedback: string) => Promise<void>;
}
@@ -16,7 +17,7 @@ const CATEGORY_COLORS: Record<CuratorCategory, string> = {
'Will Not Like': 'badge-red',
};
export function RecommendationCard({ show, existingFeedback, onFeedback }: RecommendationCardProps) {
export function RecommendationCard({ show, verified, existingFeedback, onFeedback }: RecommendationCardProps) {
const [selectedStars, setSelectedStars] = useState(existingFeedback?.stars ?? 0);
const [hoverStar, setHoverStar] = useState(0);
const [comment, setComment] = useState(existingFeedback?.feedback ?? '');
@@ -49,7 +50,10 @@ export function RecommendationCard({ show, existingFeedback, onFeedback }: Recom
</div>
<p class="card-explanation">{show.explanation}</p>
{show.genre && <span class="badge genre-badge">{show.genre}</span>}
<div class="card-badges">
{show.genre && <span class="badge genre-badge">{show.genre}</span>}
{verified && <span class="badge badge-verified">Verified</span>}
</div>
{(show.pros?.length > 0 || show.cons?.length > 0) && (
<div class="pros-cons-table">

View File

@@ -38,6 +38,11 @@ export function useRecommendations() {
brainstorm_count?: number;
media_type: MediaType;
use_web_search?: boolean;
use_validator?: boolean;
hard_requirements?: boolean;
self_expansive?: boolean;
expansive_passes?: number;
expansive_mode?: 'soft' | 'extreme';
}) => {
const { id } = await createRecommendation(body);
await refreshList();

View File

@@ -2,33 +2,71 @@ import { useState, useCallback, useEffect } from 'preact/hooks';
import './Recom.css';
import { route } from 'preact-router';
import { PipelineProgress } from '../components/PipelineProgress.js';
import type { StageGroup } from '../components/PipelineProgress.js';
import { RecommendationCard } from '../components/RecommendationCard.js';
import { Sidebar } from '../components/Sidebar.js';
import { NewRecommendationModal } from '../components/NewRecommendationModal.js';
import { useRecommendationsContext } from '../context/RecommendationsContext.js';
import { useSSE } from '../hooks/useSSE.js';
import { getRecommendation } from '../api/client.js';
import type { Recommendation, SSEEvent, StageMap, PipelineStage } from '../types/index.js';
import type { Recommendation, SSEEvent, StageMap, StageStatus } from '../types/index.js';
interface RecomProps {
id: string;
path?: string;
}
const DEFAULT_STAGES: StageMap = {
interpreter: 'pending',
retrieval: 'pending',
ranking: 'pending',
curator: 'pending',
};
function buildDefaultStages(rec: Recommendation | null): StageMap {
const map: StageMap = {
interpreter: 'pending',
retrieval: 'pending',
validator: 'pending',
ranking: 'pending',
curator: 'pending',
};
if (rec?.self_expansive && rec.expansive_passes > 0) {
for (let i = 0; i < rec.expansive_passes; i++) {
const p = i + 2;
map[`pass${p}:retrieval`] = 'pending';
if (rec.use_validator) map[`pass${p}:validator`] = 'pending';
map[`pass${p}:ranking`] = 'pending';
map[`pass${p}:curator`] = 'pending';
}
}
return map;
}
const STAGE_ORDER: (keyof StageMap)[] = ['interpreter', 'retrieval', 'ranking', 'curator'];
function buildStageGroups(rec: Recommendation | null): StageGroup[] {
const baseStages = [
{ key: 'interpreter', label: 'Interpreting Preferences' },
{ key: 'retrieval', label: 'Generating Candidates' },
{ key: 'validator', label: 'Validating Candidates' },
{ key: 'ranking', label: 'Ranking Candidates' },
{ key: 'curator', label: 'Curating Results' },
];
const groups: StageGroup[] = [{ label: '', stages: baseStages }];
if (rec?.self_expansive && rec.expansive_passes > 0) {
for (let i = 0; i < rec.expansive_passes; i++) {
const p = i + 2;
groups.push({
label: `Pass ${p}`,
stages: [
{ key: `pass${p}:retrieval`, label: 'Generating Candidates' },
...(rec.use_validator ? [{ key: `pass${p}:validator`, label: 'Validating Candidates' }] : []),
{ key: `pass${p}:ranking`, label: 'Ranking Candidates' },
{ key: `pass${p}:curator`, label: 'Curating Results' },
],
});
}
}
return groups;
}
export function Recom({ id }: RecomProps) {
const { list, feedback, submitFeedback, rerank, updateStatus, updateTitle, refreshList, createNew, deleteRec } = useRecommendationsContext();
const [rec, setRec] = useState<Recommendation | null>(null);
const [stages, setStages] = useState<StageMap>(DEFAULT_STAGES);
const [stages, setStages] = useState<StageMap>(buildDefaultStages(null));
// sseKey drives the SSE connection. null = inactive; a number = active.
// Using a timestamp nonce ensures the URL is always unique on (re)connect,
// so useSSE's useEffect always re-runs even if the base path hasn't changed.
@@ -42,13 +80,13 @@ export function Recom({ id }: RecomProps) {
useEffect(() => {
setRec(null);
setStages(DEFAULT_STAGES);
setStages(buildDefaultStages(null));
setSseKey(null);
getRecommendation(id)
.then((data) => {
setRec(data);
if (data.status === 'running' || data.status === 'pending') {
setStages(DEFAULT_STAGES);
setStages(buildDefaultStages(data));
setSseKey(Date.now());
}
})
@@ -58,13 +96,20 @@ export function Recom({ id }: RecomProps) {
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',
}));
}
const stageKey = event.stage as string;
setStages((prev) => {
if (!(stageKey in prev)) return prev;
const eventData = event.data as { skipped?: boolean } | undefined;
let newStatus: StageStatus;
if (event.status === 'start') {
newStatus = 'running';
} else if (event.status === 'done') {
newStatus = eventData?.skipped ? 'skipped' : 'done';
} else {
newStatus = 'error';
}
return { ...prev, [stageKey]: newStatus };
});
}
if (event.stage === 'complete' && event.status === 'done') {
@@ -88,9 +133,9 @@ export function Recom({ id }: RecomProps) {
setSseKey(null);
updateStatus(id, 'error');
setRec((prev) => (prev ? { ...prev, status: 'error' as const } : null));
const stageKey = event.stage as PipelineStage;
const stageKey = event.stage as string;
if (stageKey !== 'complete') {
setStages((prev) => ({ ...prev, [stageKey as keyof StageMap]: 'error' }));
setStages((prev) => (stageKey in prev ? { ...prev, [stageKey]: 'error' } : prev));
}
}
},
@@ -102,7 +147,10 @@ export function Recom({ id }: RecomProps) {
if (data.status === 'done') {
setSseKey(null);
setRec(data);
setStages({ interpreter: 'done', retrieval: 'done', ranking: 'done', curator: 'done' });
const allDone = Object.fromEntries(
Object.keys(buildDefaultStages(data)).map((k) => [k, 'done' as StageStatus])
);
setStages(allDone);
updateStatus(id, 'done');
void refreshList();
} else if (data.status === 'error') {
@@ -121,14 +169,14 @@ export function Recom({ id }: RecomProps) {
const handleRetry = async () => {
await rerank(id);
setStages(DEFAULT_STAGES);
setStages(buildDefaultStages(rec));
setSseKey(Date.now());
setRec((prev) => (prev ? { ...prev, status: 'pending' as const } : null));
};
const handleRerank = async () => {
await rerank(id);
setStages(DEFAULT_STAGES);
setStages(buildDefaultStages(rec));
setSseKey(Date.now());
setRec((prev) => (prev ? { ...prev, status: 'pending' as const } : null));
};
@@ -141,6 +189,11 @@ export function Recom({ id }: RecomProps) {
brainstorm_count?: number;
media_type: import('../types/index.js').MediaType;
use_web_search?: boolean;
use_validator?: boolean;
hard_requirements?: boolean;
self_expansive?: boolean;
expansive_passes?: number;
expansive_mode?: 'soft' | 'extreme';
}) => {
const newId = await createNew(body);
route(`/recom/${newId}`);
@@ -148,6 +201,7 @@ export function Recom({ id }: RecomProps) {
const isRunning = rec?.status === 'running' || rec?.status === 'pending' || sseKey !== null;
const feedbackMap = new Map(feedback.map((f) => [f.item_name, f]));
const stageGroups = buildStageGroups(rec);
return (
<div class="layout">
@@ -203,6 +257,24 @@ export function Recom({ id }: RecomProps) {
<span class="rec-info-badge">enabled</span>
</div>
)}
{rec.use_validator && (
<div class="rec-info-row">
<span class="rec-info-label">Validator</span>
<span class="rec-info-badge">enabled</span>
</div>
)}
{rec.hard_requirements && (
<div class="rec-info-row">
<span class="rec-info-label">Hard Req.</span>
<span class="rec-info-badge">enabled</span>
</div>
)}
{rec.self_expansive && (
<div class="rec-info-row">
<span class="rec-info-label">Self Expansive</span>
<span class="rec-info-badge">{rec.expansive_passes} pass{rec.expansive_passes !== 1 ? 'es' : ''} · {rec.expansive_mode}</span>
</div>
)}
<div class="rec-info-row rec-info-delete-row">
{!isRunning && (
<button class="btn-rerun btn-rerank" onClick={handleRetry}>
@@ -228,7 +300,7 @@ export function Recom({ id }: RecomProps) {
{isRunning && (
<div class="content-area">
<PipelineProgress stages={stages} onRetry={handleRetry} />
<PipelineProgress stageGroups={stageGroups} stages={stages} onRetry={handleRetry} />
</div>
)}
@@ -239,6 +311,7 @@ export function Recom({ id }: RecomProps) {
<RecommendationCard
key={show.title}
show={show}
verified={rec.use_validator}
existingFeedback={feedbackMap.get(show.title)}
onFeedback={async (name, stars, comment) => {
await submitFeedback({ item_name: name, stars, feedback: comment });

View File

@@ -22,6 +22,11 @@ export interface Recommendation {
themes: string;
media_type: MediaType;
use_web_search: boolean;
use_validator: boolean;
hard_requirements: boolean;
self_expansive: boolean;
expansive_passes: number;
expansive_mode: 'soft' | 'extreme';
recommendations: CuratorOutput[] | null;
status: RecommendationStatus;
created_at: string;
@@ -43,7 +48,18 @@ export interface FeedbackEntry {
created_at: string;
}
export type PipelineStage = 'interpreter' | 'retrieval' | 'ranking' | 'curator' | 'complete';
export type PipelineStage =
| 'interpreter'
| 'retrieval'
| 'validator'
| 'ranking'
| 'curator'
| 'complete'
| `pass${number}:retrieval`
| `pass${number}:validator`
| `pass${number}:ranking`
| `pass${number}:curator`;
export type SSEStatus = 'start' | 'done' | 'error';
export interface SSEEvent {
@@ -52,6 +68,6 @@ export interface SSEEvent {
data?: unknown;
}
export type StageStatus = 'pending' | 'running' | 'done' | 'error';
export type StageStatus = 'pending' | 'running' | 'done' | 'error' | 'skipped';
export type StageMap = Record<Exclude<PipelineStage, 'complete'>, StageStatus>;
export type StageMap = Record<string, StageStatus>;