adding continuous
This commit is contained in:
@@ -66,3 +66,81 @@ export function getFeedback(): Promise<FeedbackEntry[]> {
|
||||
export function deleteRecommendation(id: string): Promise<{ ok: boolean }> {
|
||||
return request(`/recommendations/${id}`, { method: 'DELETE' });
|
||||
}
|
||||
|
||||
export function createContinuousRecommendation(body: {
|
||||
liked_shows: string;
|
||||
disliked_shows?: string;
|
||||
themes?: string;
|
||||
requirements?: string;
|
||||
avoid?: string;
|
||||
total_count: number;
|
||||
media_type: MediaType;
|
||||
use_web_search?: boolean;
|
||||
validate_results?: boolean;
|
||||
}): Promise<{ id: string }> {
|
||||
return (async () => {
|
||||
const res = await fetch(`${BASE}/recommendations/continuous`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
Accept: 'text/event-stream',
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
});
|
||||
|
||||
if (!res.ok) {
|
||||
const text = await res.text();
|
||||
throw new Error(`HTTP ${res.status}: ${text}`);
|
||||
}
|
||||
|
||||
if (!res.body) {
|
||||
throw new Error('Missing response stream for continuous recommendation');
|
||||
}
|
||||
|
||||
const reader = res.body.getReader();
|
||||
const decoder = new TextDecoder();
|
||||
let buffer = '';
|
||||
|
||||
try {
|
||||
while (true) {
|
||||
const { value, done } = await reader.read();
|
||||
|
||||
if (value) {
|
||||
buffer += decoder.decode(value, { stream: !done });
|
||||
}
|
||||
|
||||
let boundary = buffer.indexOf('\n\n');
|
||||
while (boundary !== -1) {
|
||||
const rawEvent = buffer.slice(0, boundary).trim();
|
||||
buffer = buffer.slice(boundary + 2);
|
||||
|
||||
if (rawEvent) {
|
||||
const dataLine = rawEvent
|
||||
.split('\n')
|
||||
.find((line) => line.startsWith('data:'));
|
||||
|
||||
if (dataLine) {
|
||||
const payload = dataLine.slice(5).trim();
|
||||
const event = JSON.parse(payload) as { type?: string; id?: string };
|
||||
|
||||
if (event.type === 'created' && event.id) {
|
||||
await reader.cancel();
|
||||
return { id: event.id };
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
boundary = buffer.indexOf('\n\n');
|
||||
}
|
||||
|
||||
if (done) {
|
||||
break;
|
||||
}
|
||||
}
|
||||
} finally {
|
||||
reader.releaseLock();
|
||||
}
|
||||
|
||||
throw new Error('Continuous recommendation stream ended before returning an id');
|
||||
})();
|
||||
}
|
||||
|
||||
@@ -1,307 +1,577 @@
|
||||
/* ── Modal ──────────────────────────────────────────────── */
|
||||
|
||||
.modal-backdrop {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
z-index: 100;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
z-index: 100;
|
||||
backdrop-filter: blur(2px);
|
||||
padding: 24px;
|
||||
background:
|
||||
radial-gradient(circle at top, rgba(56, 189, 248, 0.12), transparent 32%),
|
||||
radial-gradient(circle at bottom right, rgba(251, 191, 36, 0.12), transparent 28%),
|
||||
rgba(6, 8, 12, 0.76);
|
||||
backdrop-filter: blur(12px);
|
||||
}
|
||||
|
||||
.modal {
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 12px;
|
||||
width: 650px;
|
||||
max-width: 96vw;
|
||||
max-height: 90vh;
|
||||
width: min(900px, 100%);
|
||||
max-height: min(92vh, 980px);
|
||||
overflow-y: auto;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 28px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 18%),
|
||||
linear-gradient(145deg, rgba(15, 23, 42, 0.97), rgba(17, 24, 39, 0.96));
|
||||
box-shadow:
|
||||
0 32px 90px rgba(0, 0, 0, 0.45),
|
||||
inset 0 1px 0 rgba(255, 255, 255, 0.05);
|
||||
}
|
||||
|
||||
.modal-hero,
|
||||
.modal-header {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
padding: 20px 20px 0;
|
||||
gap: 24px;
|
||||
padding: 28px 30px 0;
|
||||
}
|
||||
|
||||
.modal-hero h2,
|
||||
.modal-header h2 {
|
||||
font-size: 18px;
|
||||
font-size: clamp(1.8rem, 3vw, 2.35rem);
|
||||
line-height: 1.05;
|
||||
letter-spacing: -0.03em;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.modal-hero-copy {
|
||||
max-width: 560px;
|
||||
margin-top: 12px;
|
||||
color: rgba(226, 232, 240, 0.72);
|
||||
font-size: 1rem;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.modal-eyebrow {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-bottom: 14px;
|
||||
padding: 6px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(56, 189, 248, 0.14);
|
||||
color: #7dd3fc;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.12em;
|
||||
text-transform: uppercase;
|
||||
}
|
||||
|
||||
.modal-close,
|
||||
.modal-back {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 42px;
|
||||
height: 42px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 14px;
|
||||
background: rgba(255, 255, 255, 0.03);
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.modal-close:hover:not(:disabled),
|
||||
.modal-back:hover:not(:disabled) {
|
||||
transform: translateY(-1px);
|
||||
color: #f8fafc;
|
||||
border-color: rgba(125, 211, 252, 0.34);
|
||||
background: rgba(56, 189, 248, 0.08);
|
||||
}
|
||||
|
||||
.modal-close:disabled,
|
||||
.modal-back:disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.modal-header-left {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.modal-type-select,
|
||||
.modal-form {
|
||||
padding: 28px 30px 30px;
|
||||
}
|
||||
|
||||
.modal-type-select {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 24px;
|
||||
}
|
||||
|
||||
.modal-section {
|
||||
padding: 22px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||
border-radius: 24px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.02), transparent 100%),
|
||||
rgba(15, 23, 42, 0.58);
|
||||
}
|
||||
|
||||
.modal-section-header {
|
||||
display: flex;
|
||||
gap: 14px;
|
||||
align-items: flex-start;
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.modal-section-header h3,
|
||||
.settings-card-header h3 {
|
||||
font-size: 1.08rem;
|
||||
color: #f8fafc;
|
||||
}
|
||||
|
||||
.modal-section-header p,
|
||||
.settings-card-header p {
|
||||
margin-top: 4px;
|
||||
color: var(--text-muted);
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.modal-section-step {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
background: linear-gradient(135deg, rgba(56, 189, 248, 0.18), rgba(251, 191, 36, 0.16));
|
||||
color: #f8fafc;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 22px;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
padding: 0;
|
||||
.modal-type-cards,
|
||||
.mode-cards,
|
||||
.modal-form-grid {
|
||||
display: grid;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: var(--text);
|
||||
.modal-type-cards,
|
||||
.mode-cards {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.type-card,
|
||||
.mode-card {
|
||||
position: relative;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
gap: 12px;
|
||||
padding: 20px 20px 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
border-radius: 22px;
|
||||
background:
|
||||
linear-gradient(180deg, rgba(255, 255, 255, 0.03), transparent 100%),
|
||||
rgba(30, 41, 59, 0.68);
|
||||
color: inherit;
|
||||
text-align: left;
|
||||
cursor: pointer;
|
||||
transition: transform 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.type-card:hover,
|
||||
.mode-card:hover {
|
||||
transform: translateY(-2px);
|
||||
border-color: rgba(125, 211, 252, 0.4);
|
||||
box-shadow: 0 18px 32px rgba(2, 8, 23, 0.25);
|
||||
}
|
||||
|
||||
.type-card--selected,
|
||||
.mode-card--active {
|
||||
border-color: rgba(125, 211, 252, 0.55);
|
||||
background:
|
||||
linear-gradient(180deg, rgba(56, 189, 248, 0.12), rgba(251, 191, 36, 0.06)),
|
||||
rgba(17, 24, 39, 0.92);
|
||||
box-shadow: inset 0 0 0 1px rgba(125, 211, 252, 0.14);
|
||||
}
|
||||
|
||||
.type-card-icon {
|
||||
display: inline-block;
|
||||
font-size: 1.55rem;
|
||||
line-height: 1;
|
||||
margin: 0 2px 0 0;
|
||||
transform: translateY(1px);
|
||||
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.18));
|
||||
}
|
||||
|
||||
.type-card-label,
|
||||
.mode-card-label {
|
||||
color: #f8fafc;
|
||||
font-size: 1.04rem;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.type-card-title-row {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.type-card-desc,
|
||||
.mode-card-desc {
|
||||
color: rgba(226, 232, 240, 0.72);
|
||||
line-height: 1.55;
|
||||
font-size: 0.92rem;
|
||||
}
|
||||
|
||||
.mode-card-badge {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 4px 10px;
|
||||
border-radius: 999px;
|
||||
background: rgba(251, 191, 36, 0.14);
|
||||
color: #fcd34d;
|
||||
font-size: 0.72rem;
|
||||
font-weight: 700;
|
||||
letter-spacing: 0.04em;
|
||||
}
|
||||
|
||||
.modal-type-footer {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: 20px;
|
||||
}
|
||||
|
||||
.modal-selection-summary,
|
||||
.modal-summary-strip {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 10px;
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.summary-pill {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
padding: 8px 12px;
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.05);
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
color: #e2e8f0;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.summary-pill--accent {
|
||||
background: rgba(56, 189, 248, 0.12);
|
||||
border-color: rgba(125, 211, 252, 0.22);
|
||||
color: #7dd3fc;
|
||||
}
|
||||
|
||||
.summary-caption {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.modal-continue {
|
||||
padding-inline: 22px;
|
||||
}
|
||||
|
||||
.modal-form {
|
||||
padding: 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
gap: 22px;
|
||||
}
|
||||
|
||||
.modal-form-grid {
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.form-group {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 6px;
|
||||
flex: 1;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.form-group--full {
|
||||
grid-column: 1 / -1;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
color: var(--text-muted);
|
||||
color: #e2e8f0;
|
||||
font-size: 0.92rem;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-help {
|
||||
color: var(--text-dim);
|
||||
font-size: 0.8rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.form-input,
|
||||
.form-textarea {
|
||||
background: var(--bg-surface-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
color: var(--text);
|
||||
font-size: 14px;
|
||||
padding: 10px 12px;
|
||||
outline: none;
|
||||
transition: border-color 0.15s;
|
||||
font-family: inherit;
|
||||
width: 100%;
|
||||
padding: 13px 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.09);
|
||||
border-radius: 16px;
|
||||
background: rgba(15, 23, 42, 0.66);
|
||||
color: #f8fafc;
|
||||
font: inherit;
|
||||
outline: none;
|
||||
transition: border-color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.form-input[type="range"] {
|
||||
padding: 0;
|
||||
cursor: pointer;
|
||||
.form-input::placeholder,
|
||||
.form-textarea::placeholder {
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.form-input:focus,
|
||||
.form-textarea:focus {
|
||||
border-color: var(--accent);
|
||||
border-color: rgba(125, 211, 252, 0.52);
|
||||
box-shadow: 0 0 0 4px rgba(56, 189, 248, 0.12);
|
||||
background: rgba(15, 23, 42, 0.86);
|
||||
}
|
||||
|
||||
.form-input[type='range'] {
|
||||
padding: 0;
|
||||
border: none;
|
||||
background: transparent;
|
||||
box-shadow: none;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.form-textarea {
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
min-height: 120px;
|
||||
}
|
||||
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding-top: 4px;
|
||||
.form-textarea--hero {
|
||||
min-height: 138px;
|
||||
}
|
||||
|
||||
/* ── Type selection step ─────────────────────────────────── */
|
||||
|
||||
.modal-type-select {
|
||||
padding: 16px 20px 28px;
|
||||
.settings-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 20px;
|
||||
gap: 16px;
|
||||
padding: 22px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||
border-radius: 24px;
|
||||
background:
|
||||
radial-gradient(circle at top right, rgba(56, 189, 248, 0.07), transparent 28%),
|
||||
rgba(15, 23, 42, 0.58);
|
||||
}
|
||||
|
||||
.modal-type-hint {
|
||||
font-size: 14px;
|
||||
.slider-card {
|
||||
padding: 16px 18px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(15, 23, 42, 0.72);
|
||||
}
|
||||
|
||||
.slider-card--compact {
|
||||
padding: 14px 16px;
|
||||
}
|
||||
|
||||
.slider-card-header {
|
||||
display: flex;
|
||||
align-items: flex-start;
|
||||
justify-content: space-between;
|
||||
gap: 18px;
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.slider-label {
|
||||
display: block;
|
||||
color: #f8fafc;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.slider-copy {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
color: var(--text-muted);
|
||||
margin: 0;
|
||||
font-size: 0.82rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.modal-type-cards {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.type-card {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
padding: 4rem 2rem;
|
||||
background: var(--bg-surface-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 10px;
|
||||
cursor: pointer;
|
||||
transition: border-color 0.15s, background 0.15s;
|
||||
.slider-value {
|
||||
min-width: 48px;
|
||||
padding: 8px 10px;
|
||||
border-radius: 12px;
|
||||
background: rgba(56, 189, 248, 0.12);
|
||||
color: #7dd3fc;
|
||||
font-weight: 700;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.type-card:hover {
|
||||
border-color: var(--accent);
|
||||
background: var(--bg-surface);
|
||||
}
|
||||
|
||||
.type-card-icon {
|
||||
font-size: 32px;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.type-card-label {
|
||||
font-size: 16px;
|
||||
font-weight: 700;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.type-card-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
/* ── Modal header back button ────────────────────────────── */
|
||||
|
||||
.modal-header-left {
|
||||
.toggle-stack {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
flex-direction: column;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.modal-back {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 18px;
|
||||
color: var(--text-muted);
|
||||
cursor: pointer;
|
||||
line-height: 1;
|
||||
padding: 0 4px 0 0;
|
||||
.toggle-card {
|
||||
padding: 15px 16px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.07);
|
||||
background: rgba(15, 23, 42, 0.6);
|
||||
}
|
||||
|
||||
.modal-back:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* ── Web search toggle ───────────────────────────────────── */
|
||||
|
||||
.form-group-toggle {
|
||||
padding: 12px 0 4px;
|
||||
border-top: 1px solid var(--border);
|
||||
.toggle-card--disabled {
|
||||
opacity: 0.55;
|
||||
}
|
||||
|
||||
.toggle-label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
cursor: pointer;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.toggle-text {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 3px;
|
||||
gap: 4px;
|
||||
}
|
||||
|
||||
.toggle-title {
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
color: #f8fafc;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.toggle-desc {
|
||||
font-size: 12px;
|
||||
color: var(--text-muted);
|
||||
font-size: 0.84rem;
|
||||
line-height: 1.5;
|
||||
}
|
||||
|
||||
.toggle-switch {
|
||||
flex-shrink: 0;
|
||||
width: 40px;
|
||||
height: 22px;
|
||||
background: var(--bg-surface-2);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 11px;
|
||||
position: relative;
|
||||
flex-shrink: 0;
|
||||
width: 52px;
|
||||
height: 30px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.11);
|
||||
border-radius: 999px;
|
||||
background: rgba(255, 255, 255, 0.06);
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, border-color 0.2s;
|
||||
transition: background 0.2s ease, border-color 0.2s ease;
|
||||
}
|
||||
|
||||
.toggle-switch.on {
|
||||
background: var(--accent);
|
||||
border-color: var(--accent);
|
||||
}
|
||||
|
||||
.toggle-knob {
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
left: 2px;
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #fff;
|
||||
border-radius: 50%;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
|
||||
.toggle-switch.on .toggle-knob {
|
||||
transform: translateX(18px);
|
||||
}
|
||||
|
||||
/* ── Disabled toggle ─────────────────────────────────────── */
|
||||
|
||||
.toggle-disabled {
|
||||
opacity: 0.45;
|
||||
cursor: not-allowed;
|
||||
background: linear-gradient(135deg, rgba(56, 189, 248, 0.95), rgba(14, 165, 233, 0.85));
|
||||
border-color: rgba(125, 211, 252, 0.4);
|
||||
}
|
||||
|
||||
.toggle-switch-disabled {
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
/* ── Self Expansive options ──────────────────────────────── */
|
||||
.toggle-knob {
|
||||
position: absolute;
|
||||
top: 3px;
|
||||
left: 3px;
|
||||
width: 22px;
|
||||
height: 22px;
|
||||
border-radius: 50%;
|
||||
background: #fff;
|
||||
transition: transform 0.2s ease;
|
||||
}
|
||||
|
||||
.toggle-switch.on .toggle-knob {
|
||||
transform: translateX(22px);
|
||||
}
|
||||
|
||||
.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;
|
||||
padding: 16px;
|
||||
border-radius: 18px;
|
||||
border: 1px solid rgba(125, 211, 252, 0.14);
|
||||
background: rgba(8, 47, 73, 0.15);
|
||||
}
|
||||
|
||||
.mode-buttons {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
.segmented-control {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
gap: 10px;
|
||||
}
|
||||
|
||||
.mode-btn {
|
||||
flex: 1;
|
||||
padding: 8px 0;
|
||||
background: var(--bg-surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius-sm);
|
||||
.segmented-control-btn {
|
||||
padding: 12px 14px;
|
||||
border-radius: 14px;
|
||||
border: 1px solid rgba(255, 255, 255, 0.08);
|
||||
background: rgba(15, 23, 42, 0.66);
|
||||
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;
|
||||
font: inherit;
|
||||
font-weight: 600;
|
||||
transition: border-color 0.2s ease, color 0.2s ease, background 0.2s ease;
|
||||
}
|
||||
|
||||
.mode-btn--active {
|
||||
background: var(--accent-dim);
|
||||
border-color: var(--accent);
|
||||
color: var(--accent);
|
||||
.segmented-control-btn--active {
|
||||
background: rgba(56, 189, 248, 0.12);
|
||||
border-color: rgba(125, 211, 252, 0.34);
|
||||
color: #7dd3fc;
|
||||
}
|
||||
|
||||
.mode-btn:hover:not(.mode-btn--active) {
|
||||
background: var(--bg-surface-3);
|
||||
border-color: var(--text-dim);
|
||||
color: var(--text);
|
||||
.modal-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 12px;
|
||||
padding-top: 2px;
|
||||
}
|
||||
|
||||
.mode-desc {
|
||||
display: block;
|
||||
margin-top: 4px;
|
||||
}
|
||||
@media (max-width: 860px) {
|
||||
.modal {
|
||||
width: 100%;
|
||||
border-radius: 24px;
|
||||
}
|
||||
|
||||
.modal-hero,
|
||||
.modal-header,
|
||||
.modal-type-select,
|
||||
.modal-form {
|
||||
padding-inline: 22px;
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: 720px) {
|
||||
.modal-backdrop {
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.modal-hero,
|
||||
.modal-header {
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
align-self: flex-end;
|
||||
}
|
||||
|
||||
.modal-type-cards,
|
||||
.mode-cards,
|
||||
.modal-form-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.modal-type-footer,
|
||||
.modal-actions {
|
||||
flex-direction: column;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.toggle-label,
|
||||
.slider-card-header {
|
||||
align-items: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,7 +1,9 @@
|
||||
import { useState } from 'preact/hooks';
|
||||
import { useEffect, useState } from 'preact/hooks';
|
||||
import type { MediaType } from '../types/index.js';
|
||||
import './Modal.css';
|
||||
|
||||
type GenerationMode = 'brainstorm' | 'continuous';
|
||||
|
||||
interface NewRecommendationModalProps {
|
||||
onClose: () => void;
|
||||
onSubmit: (body: {
|
||||
@@ -9,6 +11,8 @@ interface NewRecommendationModalProps {
|
||||
liked_shows: string;
|
||||
disliked_shows: string;
|
||||
themes: string;
|
||||
requirements?: string;
|
||||
avoid?: string;
|
||||
brainstorm_count?: number;
|
||||
media_type: MediaType;
|
||||
use_web_search?: boolean;
|
||||
@@ -17,58 +21,140 @@ interface NewRecommendationModalProps {
|
||||
self_expansive?: boolean;
|
||||
expansive_passes?: number;
|
||||
expansive_mode?: 'soft' | 'extreme';
|
||||
generation_mode?: GenerationMode;
|
||||
total_count?: number;
|
||||
validate_results?: boolean;
|
||||
}) => Promise<void>;
|
||||
}
|
||||
|
||||
const MEDIA_OPTIONS: Array<{
|
||||
type: MediaType;
|
||||
icon: string;
|
||||
label: string;
|
||||
description: string;
|
||||
}> = [
|
||||
{
|
||||
type: 'tv_show',
|
||||
icon: '📺',
|
||||
label: 'TV Shows',
|
||||
description: 'Serialized stories, limited series, and long-form comfort watches.',
|
||||
},
|
||||
{
|
||||
type: 'movie',
|
||||
icon: '🎬',
|
||||
label: 'Movies',
|
||||
description: 'Feature films, prestige cinema, and one-night picks.',
|
||||
},
|
||||
];
|
||||
|
||||
const MODE_OPTIONS: Array<{
|
||||
mode: GenerationMode;
|
||||
label: string;
|
||||
badge: string;
|
||||
description: string;
|
||||
}> = [
|
||||
{
|
||||
mode: 'brainstorm',
|
||||
label: 'Brainstorm',
|
||||
badge: 'Best for variety',
|
||||
description: 'Explore a broad pool of options, then rank and curate the strongest fits.',
|
||||
},
|
||||
{
|
||||
mode: 'continuous',
|
||||
label: 'Continuous',
|
||||
badge: 'Best for deep search',
|
||||
description: 'Generate recommendations in chained batches for a steadier, longer-running hunt.',
|
||||
},
|
||||
];
|
||||
|
||||
export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationModalProps) {
|
||||
const [step, setStep] = useState<'type' | 'form'>('type');
|
||||
const [step, setStep] = useState<'type' | 'mode' | 'form'>('type');
|
||||
const [mediaType, setMediaType] = useState<MediaType>('tv_show');
|
||||
const [generationMode, setGenerationMode] = useState<GenerationMode>('brainstorm');
|
||||
const [mainPrompt, setMainPrompt] = useState('');
|
||||
const [likedShows, setLikedShows] = useState('');
|
||||
const [dislikedShows, setDislikedShows] = useState('');
|
||||
const [themes, setThemes] = useState('');
|
||||
const [requirements, setRequirements] = useState('');
|
||||
const [avoid, setAvoid] = useState('');
|
||||
const [brainstormCount, setBrainstormCount] = useState(100);
|
||||
const [totalCount, setTotalCount] = useState(30);
|
||||
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 [validateResults, setValidateResults] = useState(false);
|
||||
const [loading, setLoading] = useState(false);
|
||||
|
||||
useEffect(() => {
|
||||
const handleKeyDown = (event: KeyboardEvent) => {
|
||||
if (event.key === 'Escape' && !loading) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
window.addEventListener('keydown', handleKeyDown);
|
||||
return () => window.removeEventListener('keydown', handleKeyDown);
|
||||
}, [loading, onClose]);
|
||||
|
||||
const mediaLabel = mediaType === 'movie' ? 'Movie' : 'TV Show';
|
||||
const mediaPluralLabel = mediaType === 'movie' ? 'movies' : 'shows';
|
||||
|
||||
const handleSelectType = (type: MediaType) => {
|
||||
setMediaType(type);
|
||||
setStep('form');
|
||||
setStep('mode');
|
||||
};
|
||||
|
||||
const handleWebSearchToggle = () => {
|
||||
const next = !useWebSearch;
|
||||
setUseWebSearch(next);
|
||||
if (!next) setUseValidator(false);
|
||||
if (!next) {
|
||||
setUseValidator(false);
|
||||
setValidateResults(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleSubmit = async (e: Event) => {
|
||||
e.preventDefault();
|
||||
if (!mainPrompt.trim()) return;
|
||||
if (generationMode === 'brainstorm' && !mainPrompt.trim()) return;
|
||||
if (!likedShows.trim()) return;
|
||||
|
||||
setLoading(true);
|
||||
try {
|
||||
await onSubmit({
|
||||
main_prompt: mainPrompt.trim(),
|
||||
liked_shows: likedShows.trim(),
|
||||
disliked_shows: dislikedShows.trim(),
|
||||
themes: themes.trim(),
|
||||
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,
|
||||
});
|
||||
if (generationMode === 'brainstorm') {
|
||||
await onSubmit({
|
||||
main_prompt: mainPrompt.trim(),
|
||||
liked_shows: likedShows.trim(),
|
||||
disliked_shows: dislikedShows.trim(),
|
||||
themes: themes.trim(),
|
||||
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,
|
||||
generation_mode: 'brainstorm',
|
||||
});
|
||||
} else {
|
||||
await onSubmit({
|
||||
main_prompt: '',
|
||||
liked_shows: likedShows.trim(),
|
||||
disliked_shows: dislikedShows.trim(),
|
||||
themes: themes.trim(),
|
||||
requirements: requirements.trim(),
|
||||
avoid: avoid.trim(),
|
||||
media_type: mediaType,
|
||||
use_web_search: useWebSearch,
|
||||
validate_results: validateResults,
|
||||
generation_mode: 'continuous',
|
||||
total_count: totalCount,
|
||||
});
|
||||
}
|
||||
|
||||
onClose();
|
||||
} finally {
|
||||
setLoading(false);
|
||||
@@ -76,33 +162,105 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
|
||||
};
|
||||
|
||||
const handleBackdropClick = (e: MouseEvent) => {
|
||||
if ((e.target as HTMLElement).classList.contains('modal-backdrop')) {
|
||||
if ((e.target as HTMLElement).classList.contains('modal-backdrop') && !loading) {
|
||||
onClose();
|
||||
}
|
||||
};
|
||||
|
||||
const selectedMode = MODE_OPTIONS.find((option) => option.mode === generationMode);
|
||||
|
||||
return (
|
||||
<div class="modal-backdrop" onClick={handleBackdropClick}>
|
||||
<div class="modal">
|
||||
<div class="modal" role="dialog" aria-modal="true" aria-labelledby="recommendation-modal-title">
|
||||
{step === 'type' ? (
|
||||
<>
|
||||
<div class="modal-header">
|
||||
<h2>New Recommendation</h2>
|
||||
<button class="modal-close" onClick={onClose} aria-label="Close">×</button>
|
||||
<div class="modal-hero">
|
||||
<div>
|
||||
<div class="modal-eyebrow">Create Recommendation</div>
|
||||
<h2 id="recommendation-modal-title">Shape the kind of discovery session you want.</h2>
|
||||
<p class="modal-hero-copy">
|
||||
Pick a format, choose how deep the search should go, and we'll take it from there.
|
||||
</p>
|
||||
</div>
|
||||
<button class="modal-close" onClick={onClose} aria-label="Close" disabled={loading}>×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-type-select">
|
||||
<p class="modal-type-hint">What would you like recommendations for?</p>
|
||||
<div class="modal-type-cards">
|
||||
<button class="type-card" onClick={() => handleSelectType('tv_show')}>
|
||||
<span class="type-card-icon">📺</span>
|
||||
<span class="type-card-label">TV Shows</span>
|
||||
<span class="type-card-desc">Series & episodic content</span>
|
||||
</button>
|
||||
<button class="type-card" onClick={() => handleSelectType('movie')}>
|
||||
<span class="type-card-icon">🎬</span>
|
||||
<span class="type-card-label">Movies</span>
|
||||
<span class="type-card-desc">Feature films & cinema</span>
|
||||
<section class="modal-section">
|
||||
<div class="modal-section-header">
|
||||
<span class="modal-section-step">1</span>
|
||||
<div>
|
||||
<h3>Choose your format</h3>
|
||||
<p>Start with the kind of thing you want to watch next.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="modal-type-cards">
|
||||
{MEDIA_OPTIONS.map((option) => (
|
||||
<button
|
||||
key={option.type}
|
||||
type="button"
|
||||
class={`type-card${mediaType === option.type ? ' type-card--selected' : ''}`}
|
||||
onClick={() => handleSelectType(option.type)}
|
||||
>
|
||||
<span class="type-card-title-row">
|
||||
<span class="type-card-icon">{option.icon}</span>
|
||||
<span class="type-card-label">{option.label}</span>
|
||||
</span>
|
||||
<span class="type-card-desc">{option.description}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</>
|
||||
) : step === 'mode' ? (
|
||||
<>
|
||||
<div class="modal-header">
|
||||
<div class="modal-header-left">
|
||||
<button class="modal-back" onClick={() => setStep('type')} aria-label="Back" disabled={loading}>
|
||||
←
|
||||
</button>
|
||||
<div>
|
||||
<div class="modal-eyebrow">Step 2 of 3</div>
|
||||
<h2 id="recommendation-modal-title">Choose the pipeline style.</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button class="modal-close" onClick={onClose} aria-label="Close" disabled={loading}>×</button>
|
||||
</div>
|
||||
|
||||
<div class="modal-type-select">
|
||||
<section class="modal-section">
|
||||
<div class="modal-section-header">
|
||||
<span class="modal-section-step">2</span>
|
||||
<div>
|
||||
<h3>Pick the search mode</h3>
|
||||
<p>Go broad for variety or deeper for a more persistent search.</p>
|
||||
</div>
|
||||
</div>
|
||||
<div class="mode-cards">
|
||||
{MODE_OPTIONS.map((option) => (
|
||||
<button
|
||||
key={option.mode}
|
||||
type="button"
|
||||
class={`mode-card${generationMode === option.mode ? ' mode-card--active' : ''}`}
|
||||
onClick={() => {
|
||||
setGenerationMode(option.mode);
|
||||
setStep('form');
|
||||
}}
|
||||
>
|
||||
<span class="mode-card-badge">{option.badge}</span>
|
||||
<span class="mode-card-label">{option.label}</span>
|
||||
<span class="mode-card-desc">{option.description}</span>
|
||||
</button>
|
||||
))}
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="modal-type-footer">
|
||||
<div class="modal-selection-summary">
|
||||
<span class="summary-pill">{mediaType === 'movie' ? 'Movies' : 'TV Shows'}</span>
|
||||
<span class="summary-pill">{selectedMode?.label}</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</>
|
||||
@@ -110,178 +268,301 @@ export function NewRecommendationModal({ onClose, onSubmit }: NewRecommendationM
|
||||
<>
|
||||
<div class="modal-header">
|
||||
<div class="modal-header-left">
|
||||
<button class="modal-back" onClick={() => setStep('type')} aria-label="Back">←</button>
|
||||
<h2>New {mediaLabel} Recommendation</h2>
|
||||
<button class="modal-back" onClick={() => setStep('mode')} aria-label="Back" disabled={loading}>
|
||||
←
|
||||
</button>
|
||||
<div>
|
||||
<div class="modal-eyebrow">Step 3 of 3</div>
|
||||
<h2 id="recommendation-modal-title">Tell us what a great match looks like.</h2>
|
||||
</div>
|
||||
</div>
|
||||
<button class="modal-close" onClick={onClose} aria-label="Close">×</button>
|
||||
<button class="modal-close" onClick={onClose} aria-label="Close" disabled={loading}>×</button>
|
||||
</div>
|
||||
|
||||
<form class="modal-form" onSubmit={handleSubmit}>
|
||||
<div class="form-group">
|
||||
<label for="main-prompt">What are you looking for?</label>
|
||||
<textarea
|
||||
id="main-prompt"
|
||||
class="form-textarea"
|
||||
placeholder={`Describe what you want to watch. Be as specific as you like — mood, themes, setting, what you've enjoyed before...`}
|
||||
value={mainPrompt}
|
||||
onInput={(e) => setMainPrompt((e.target as HTMLTextAreaElement).value)}
|
||||
rows={5}
|
||||
required
|
||||
/>
|
||||
<div class="modal-summary-strip">
|
||||
<span class="summary-pill">{mediaType === 'movie' ? 'Movies' : 'TV Shows'}</span>
|
||||
<span class="summary-pill summary-pill--accent">{selectedMode?.label}</span>
|
||||
<span class="summary-caption">
|
||||
{generationMode === 'brainstorm'
|
||||
? 'Fast wide search with ranking and curation.'
|
||||
: 'Longer chained search that keeps exploring in batches.'}
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="liked-shows">{mediaLabel}s you liked</label>
|
||||
<input
|
||||
id="liked-shows"
|
||||
type="text"
|
||||
class="form-input"
|
||||
placeholder={mediaType === 'movie' ? 'e.g. Inception, The Godfather' : 'e.g. Breaking Bad, The Wire'}
|
||||
value={likedShows}
|
||||
onInput={(e) => setLikedShows((e.target as HTMLInputElement).value)}
|
||||
/>
|
||||
{generationMode === 'brainstorm' && (
|
||||
<div class="form-group form-group--full">
|
||||
<label for="main-prompt">What are you looking for?</label>
|
||||
<textarea
|
||||
id="main-prompt"
|
||||
class="form-textarea form-textarea--hero"
|
||||
placeholder="Describe the mood, themes, setting, pacing, or vibe you want right now."
|
||||
value={mainPrompt}
|
||||
onInput={(e) => setMainPrompt((e.target as HTMLTextAreaElement).value)}
|
||||
rows={5}
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="modal-form-grid">
|
||||
<div class="form-group">
|
||||
<label for="liked-shows">{mediaLabel}s you liked</label>
|
||||
<input
|
||||
id="liked-shows"
|
||||
type="text"
|
||||
class="form-input"
|
||||
placeholder={mediaType === 'movie' ? 'e.g. Inception, The Godfather' : 'e.g. Breaking Bad, The Wire'}
|
||||
value={likedShows}
|
||||
onInput={(e) => setLikedShows((e.target as HTMLInputElement).value)}
|
||||
required
|
||||
/>
|
||||
<span class="form-help">A few strong examples help the pipeline lock onto your taste.</span>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="disliked-shows">{mediaLabel}s you disliked</label>
|
||||
<input
|
||||
id="disliked-shows"
|
||||
type="text"
|
||||
class="form-input"
|
||||
placeholder={mediaType === 'movie' ? 'e.g. Transformers' : 'e.g. Game of Thrones'}
|
||||
value={dislikedShows}
|
||||
onInput={(e) => setDislikedShows((e.target as HTMLInputElement).value)}
|
||||
/>
|
||||
<span class="form-help">Optional, but useful when you want to steer away from common misses.</span>
|
||||
</div>
|
||||
|
||||
<div class={`form-group${generationMode === 'continuous' ? '' : ' form-group--full'}`}>
|
||||
<label for="themes">Themes, moods, and preferences</label>
|
||||
<input
|
||||
id="themes"
|
||||
type="text"
|
||||
class="form-input"
|
||||
placeholder="e.g. tense, grounded sci-fi, emotional, political intrigue"
|
||||
value={themes}
|
||||
onInput={(e) => setThemes((e.target as HTMLInputElement).value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{generationMode === 'continuous' && (
|
||||
<>
|
||||
<div class="form-group">
|
||||
<label for="requirements">Hard requirements</label>
|
||||
<input
|
||||
id="requirements"
|
||||
type="text"
|
||||
class="form-input"
|
||||
placeholder="e.g. 2020+, under 2 hours, streaming on Netflix"
|
||||
value={requirements}
|
||||
onInput={(e) => setRequirements((e.target as HTMLInputElement).value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="avoid">Avoid</label>
|
||||
<input
|
||||
id="avoid"
|
||||
type="text"
|
||||
class="form-input"
|
||||
placeholder="e.g. gore, bleak endings, broad comedy"
|
||||
value={avoid}
|
||||
onInput={(e) => setAvoid((e.target as HTMLInputElement).value)}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="disliked-shows">{mediaLabel}s you disliked</label>
|
||||
<input
|
||||
id="disliked-shows"
|
||||
type="text"
|
||||
class="form-input"
|
||||
placeholder={mediaType === 'movie' ? 'e.g. Transformers' : 'e.g. Game of Thrones'}
|
||||
value={dislikedShows}
|
||||
onInput={(e) => setDislikedShows((e.target as HTMLInputElement).value)}
|
||||
/>
|
||||
</div>
|
||||
<div class="settings-card">
|
||||
<div class="settings-card-header">
|
||||
<h3>Tuning</h3>
|
||||
<p>Adjust depth, validation, and how aggressively the search expands.</p>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="themes">Themes and requirements</label>
|
||||
<input
|
||||
id="themes"
|
||||
type="text"
|
||||
class="form-input"
|
||||
placeholder="e.g. dramatic setting, historical, sci-fi, etc."
|
||||
value={themes}
|
||||
onInput={(e) => setThemes((e.target as HTMLInputElement).value)}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="brainstorm-count">{mediaLabel}s to brainstorm ({brainstormCount})</label>
|
||||
<input
|
||||
id="brainstorm-count"
|
||||
type="range"
|
||||
class="form-input"
|
||||
min={50}
|
||||
max={200}
|
||||
step={10}
|
||||
value={brainstormCount}
|
||||
onInput={(e) => setBrainstormCount(Number((e.target as HTMLInputElement).value))}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="form-group-toggle">
|
||||
<label class="toggle-label" for="web-search">
|
||||
<div class="toggle-text">
|
||||
<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={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>
|
||||
{generationMode === 'continuous' ? (
|
||||
<div class="slider-card">
|
||||
<div class="slider-card-header">
|
||||
<div>
|
||||
<span class="slider-label">Total recommendations</span>
|
||||
<span class="slider-copy">Generated in batches of 10 through the continuous pipeline.</span>
|
||||
</div>
|
||||
<span class="slider-value">{totalCount}</span>
|
||||
</div>
|
||||
<input
|
||||
id="expansive-passes"
|
||||
id="total-count"
|
||||
type="range"
|
||||
class="form-input"
|
||||
min={1}
|
||||
max={5}
|
||||
step={1}
|
||||
value={expansivePasses}
|
||||
onInput={(e) => setExpansivePasses(Number((e.target as HTMLInputElement).value))}
|
||||
min={10}
|
||||
max={100}
|
||||
step={10}
|
||||
value={totalCount}
|
||||
onInput={(e) => setTotalCount(Number((e.target as HTMLInputElement).value))}
|
||||
/>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label>Mode</label>
|
||||
<div class="mode-buttons">
|
||||
) : (
|
||||
<div class="slider-card">
|
||||
<div class="slider-card-header">
|
||||
<div>
|
||||
<span class="slider-label">Brainstorm pool size</span>
|
||||
<span class="slider-copy">Higher values search wider before ranking and curation.</span>
|
||||
</div>
|
||||
<span class="slider-value">{brainstormCount}</span>
|
||||
</div>
|
||||
<input
|
||||
id="brainstorm-count"
|
||||
type="range"
|
||||
class="form-input"
|
||||
min={50}
|
||||
max={200}
|
||||
step={10}
|
||||
value={brainstormCount}
|
||||
onInput={(e) => setBrainstormCount(Number((e.target as HTMLInputElement).value))}
|
||||
/>
|
||||
</div>
|
||||
)}
|
||||
|
||||
<div class="toggle-stack">
|
||||
<div class="toggle-card">
|
||||
<label class="toggle-label" for="web-search">
|
||||
<div class="toggle-text">
|
||||
<span class="toggle-title">Use Web Search</span>
|
||||
<span class="toggle-desc">Pull in live web context for fresher, more grounded {mediaPluralLabel}.</span>
|
||||
</div>
|
||||
<button
|
||||
id="web-search"
|
||||
type="button"
|
||||
class={`toggle-switch${useWebSearch ? ' on' : ''}`}
|
||||
aria-pressed={useWebSearch}
|
||||
onClick={handleWebSearchToggle}
|
||||
>
|
||||
<div class="toggle-knob" />
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
{generationMode === 'brainstorm' ? (
|
||||
<>
|
||||
<div class={`toggle-card${!useWebSearch ? ' toggle-card--disabled' : ''}`}>
|
||||
<label class="toggle-label">
|
||||
<div class="toggle-text">
|
||||
<span class="toggle-title">Validator Agent</span>
|
||||
<span class="toggle-desc">
|
||||
Verify brainstormed candidates against real metadata before ranking.
|
||||
</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class={`toggle-switch${useValidator ? ' on' : ''}${!useWebSearch ? ' toggle-switch-disabled' : ''}`}
|
||||
aria-pressed={useValidator}
|
||||
onClick={() => useWebSearch && setUseValidator((value) => !value)}
|
||||
>
|
||||
<div class="toggle-knob" />
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="toggle-card">
|
||||
<label class="toggle-label">
|
||||
<div class="toggle-text">
|
||||
<span class="toggle-title">Hard Requirements</span>
|
||||
<span class="toggle-desc">Bias ranking toward strict fit instead of softer exploratory matches.</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class={`toggle-switch${useHardRequirements ? ' on' : ''}`}
|
||||
aria-pressed={useHardRequirements}
|
||||
onClick={() => setUseHardRequirements((value) => !value)}
|
||||
>
|
||||
<div class="toggle-knob" />
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<div class="toggle-card">
|
||||
<label class="toggle-label">
|
||||
<div class="toggle-text">
|
||||
<span class="toggle-title">Self Expansive Search</span>
|
||||
<span class="toggle-desc">Run extra passes using earlier full matches as context.</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class={`toggle-switch${selfExpansive ? ' on' : ''}`}
|
||||
aria-pressed={selfExpansive}
|
||||
onClick={() => setSelfExpansive((value) => !value)}
|
||||
>
|
||||
<div class="toggle-knob" />
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
</>
|
||||
) : (
|
||||
<div class={`toggle-card${!useWebSearch ? ' toggle-card--disabled' : ''}`}>
|
||||
<label class="toggle-label">
|
||||
<div class="toggle-text">
|
||||
<span class="toggle-title">Validate Results</span>
|
||||
<span class="toggle-desc">Verify continuous batches against real metadata before final ranking.</span>
|
||||
</div>
|
||||
<button
|
||||
type="button"
|
||||
class={`toggle-switch${validateResults ? ' on' : ''}${!useWebSearch ? ' toggle-switch-disabled' : ''}`}
|
||||
aria-pressed={validateResults}
|
||||
onClick={() => useWebSearch && setValidateResults((value) => !value)}
|
||||
>
|
||||
<div class="toggle-knob" />
|
||||
</button>
|
||||
</label>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
|
||||
{generationMode === 'brainstorm' && selfExpansive && (
|
||||
<div class="expansive-options">
|
||||
<div class="slider-card slider-card--compact">
|
||||
<div class="slider-card-header">
|
||||
<div>
|
||||
<span class="slider-label">Extra passes</span>
|
||||
<span class="slider-copy">How many additional exploration rounds to run.</span>
|
||||
</div>
|
||||
<span class="slider-value">{expansivePasses}</span>
|
||||
</div>
|
||||
<input
|
||||
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="segmented-control">
|
||||
<button
|
||||
type="button"
|
||||
class={`mode-btn${expansiveMode === 'soft' ? ' mode-btn--active' : ''}`}
|
||||
class={`segmented-control-btn${expansiveMode === 'soft' ? ' segmented-control-btn--active' : ''}`}
|
||||
onClick={() => setExpansiveMode('soft')}
|
||||
>
|
||||
Soft
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
class={`mode-btn${expansiveMode === 'extreme' ? ' mode-btn--active' : ''}`}
|
||||
class={`segmented-control-btn${expansiveMode === 'extreme' ? ' segmented-control-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>
|
||||
|
||||
<div class="modal-actions">
|
||||
<button type="button" class="btn-secondary" onClick={onClose} disabled={loading}>
|
||||
Cancel
|
||||
</button>
|
||||
<button type="submit" class="btn-primary" disabled={loading || !mainPrompt.trim()}>
|
||||
{loading ? 'Starting…' : 'Get Recommendations'}
|
||||
<button type="submit" class="btn-primary" disabled={loading}>
|
||||
{loading ? 'Creating…' : generationMode === 'brainstorm' ? 'Start Recommendation' : 'Start Continuous Search'}
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
|
||||
@@ -3,12 +3,35 @@ import type { MediaType, RecommendationSummary, FeedbackEntry } from '../types/i
|
||||
import {
|
||||
listRecommendations,
|
||||
createRecommendation,
|
||||
createContinuousRecommendation,
|
||||
rerankRecommendation,
|
||||
submitFeedback,
|
||||
getFeedback,
|
||||
deleteRecommendation,
|
||||
} from '../api/client.js';
|
||||
|
||||
type GenerationMode = 'brainstorm' | 'continuous';
|
||||
|
||||
interface CreateBody {
|
||||
main_prompt: string;
|
||||
liked_shows: string;
|
||||
disliked_shows: string;
|
||||
themes: string;
|
||||
requirements?: string;
|
||||
avoid?: string;
|
||||
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';
|
||||
generation_mode?: GenerationMode;
|
||||
total_count?: number;
|
||||
validate_results?: boolean;
|
||||
}
|
||||
|
||||
export function useRecommendations() {
|
||||
const [list, setList] = useState<RecommendationSummary[]>([]);
|
||||
const [selectedId, setSelectedId] = useState<string | null>(null);
|
||||
@@ -30,21 +53,27 @@ export function useRecommendations() {
|
||||
}, [refreshList, refreshFeedback]);
|
||||
|
||||
const createNew = useCallback(
|
||||
async (body: {
|
||||
main_prompt: string;
|
||||
liked_shows: string;
|
||||
disliked_shows: string;
|
||||
themes: string;
|
||||
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);
|
||||
async (body: CreateBody) => {
|
||||
let id = '';
|
||||
|
||||
if (body.generation_mode === 'continuous') {
|
||||
const result = await createContinuousRecommendation({
|
||||
liked_shows: body.liked_shows,
|
||||
disliked_shows: body.disliked_shows,
|
||||
themes: body.themes,
|
||||
requirements: body.requirements ?? '',
|
||||
avoid: body.avoid ?? '',
|
||||
total_count: body.total_count ?? 30,
|
||||
media_type: body.media_type,
|
||||
use_web_search: body.use_web_search,
|
||||
validate_results: body.validate_results,
|
||||
});
|
||||
id = result.id;
|
||||
} else {
|
||||
const result = await createRecommendation(body);
|
||||
id = result.id;
|
||||
}
|
||||
|
||||
await refreshList();
|
||||
setSelectedId(id);
|
||||
return id;
|
||||
|
||||
@@ -16,12 +16,24 @@ export function Home() {
|
||||
liked_shows: string;
|
||||
disliked_shows: string;
|
||||
themes: string;
|
||||
requirements?: string;
|
||||
avoid?: string;
|
||||
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';
|
||||
generation_mode?: 'brainstorm' | 'continuous';
|
||||
total_count?: number;
|
||||
validate_results?: boolean;
|
||||
}) => {
|
||||
const id = await createNew(body);
|
||||
route(`/recom/${id}`);
|
||||
if (id) {
|
||||
route(`/recom/${id}`);
|
||||
}
|
||||
};
|
||||
|
||||
return (
|
||||
|
||||
@@ -194,9 +194,14 @@ export function Recom({ id }: RecomProps) {
|
||||
self_expansive?: boolean;
|
||||
expansive_passes?: number;
|
||||
expansive_mode?: 'soft' | 'extreme';
|
||||
generation_mode?: 'brainstorm' | 'continuous';
|
||||
total_count?: number;
|
||||
validate_results?: boolean;
|
||||
}) => {
|
||||
const newId = await createNew(body);
|
||||
route(`/recom/${newId}`);
|
||||
if (newId) {
|
||||
route(`/recom/${newId}`);
|
||||
}
|
||||
};
|
||||
|
||||
const isRunning = rec?.status === 'running' || rec?.status === 'pending' || sseKey !== null;
|
||||
|
||||
Reference in New Issue
Block a user