adding continuous
This commit is contained in:
@@ -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>
|
||||
|
||||
Reference in New Issue
Block a user