improve home screen
This commit is contained in:
@ -584,69 +584,133 @@ export default function App() {
|
||||
|
||||
if (!videoPath) {
|
||||
return (
|
||||
<div className="h-screen flex flex-col bg-editor-bg">
|
||||
<div className="flex-1 flex flex-col items-center justify-center gap-8 px-6">
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
<Film className="w-14 h-14 text-editor-accent opacity-80" />
|
||||
<h1 className="text-3xl font-semibold tracking-tight">TalkEdit</h1>
|
||||
<p className="text-editor-text-muted text-sm max-w-sm text-center">
|
||||
Offline AI-powered video editor.
|
||||
<div className="h-screen flex flex-col bg-editor-bg relative overflow-hidden">
|
||||
{/* Background pattern */}
|
||||
<div className="absolute inset-0 opacity-[0.03] pointer-events-none" style={{
|
||||
backgroundImage: `radial-gradient(circle at 25% 25%, #6366f1 1px, transparent 1px),
|
||||
radial-gradient(circle at 75% 75%, #818cf8 1px, transparent 1px)`,
|
||||
backgroundSize: '60px 60px, 80px 80px',
|
||||
}} />
|
||||
|
||||
{/* Animated audio waveform background — left and right sides filling to center */}
|
||||
<div className="absolute inset-y-0 left-0 w-[30%] flex items-center justify-end gap-[3px] pr-16 pointer-events-none opacity-[0.09]">
|
||||
{[
|
||||
[60, 1.3, 0.0], [100, 1.0, 0.12], [40, 1.6, 0.24], [120, 0.9, 0.08],
|
||||
[80, 1.2, 0.2], [30, 1.8, 0.04], [110, 1.1, 0.28], [50, 1.5, 0.16],
|
||||
[70, 1.4, 0.08], [140, 0.85, 0.24], [60, 1.3, 0.12], [90, 1.2, 0.0],
|
||||
[130, 0.95, 0.2], [45, 1.7, 0.28], [80, 1.4, 0.04], [55, 1.1, 0.16],
|
||||
[100, 1.3, 0.24], [35, 1.6, 0.12], [120, 0.9, 0.0], [65, 1.5, 0.2],
|
||||
[85, 1.2, 0.08], [150, 0.8, 0.28], [40, 1.9, 0.16], [95, 1.1, 0.04],
|
||||
[75, 1.4, 0.24], [25, 2.0, 0.12], [105, 1.05, 0.2], [155, 0.82, 0.08],
|
||||
[50, 1.55, 0.28], [115, 0.92, 0.16], [70, 1.35, 0.04], [135, 0.88, 0.24],
|
||||
[90, 1.15, 0.12], [42, 1.75, 0.0], [125, 0.98, 0.2], [58, 1.45, 0.08],
|
||||
].map(([peak, dur, delay], i) => (
|
||||
<div
|
||||
key={`left-${i}`}
|
||||
className="welcome-audio-bar"
|
||||
style={{
|
||||
'--bar-peak': `${peak}px`,
|
||||
'--bar-duration': `${dur}s`,
|
||||
'--bar-delay': `${delay}s`,
|
||||
} as React.CSSProperties}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
<div className="absolute inset-y-0 right-0 w-[30%] flex items-center justify-start gap-[3px] pl-16 pointer-events-none opacity-[0.09]">
|
||||
{[
|
||||
[100, 1.0, 0.0], [60, 1.3, 0.08], [130, 0.9, 0.16], [40, 1.6, 0.04],
|
||||
[80, 1.2, 0.12], [150, 0.85, 0.24], [50, 1.5, 0.2], [110, 1.1, 0.28],
|
||||
[70, 1.4, 0.08], [30, 1.8, 0.16], [140, 0.9, 0.0], [90, 1.2, 0.24],
|
||||
[60, 1.3, 0.12], [120, 0.95, 0.04], [85, 1.4, 0.2], [45, 1.7, 0.28],
|
||||
[160, 0.8, 0.08], [55, 1.5, 0.24], [100, 1.1, 0.0], [75, 1.3, 0.16],
|
||||
[35, 1.9, 0.2], [115, 1.0, 0.12], [65, 1.6, 0.28], [140, 0.88, 0.04],
|
||||
[95, 1.25, 0.24], [25, 1.85, 0.08], [125, 0.93, 0.16], [155, 0.78, 0.28],
|
||||
[48, 1.65, 0.12], [82, 1.32, 0.2], [108, 1.08, 0.04], [72, 1.42, 0.24],
|
||||
[135, 0.9, 0.16], [38, 1.78, 0.0], [62, 1.48, 0.08], [118, 1.02, 0.28],
|
||||
].map(([peak, dur, delay], i) => (
|
||||
<div
|
||||
key={`right-${i}`}
|
||||
className="welcome-audio-bar"
|
||||
style={{
|
||||
'--bar-peak': `${peak}px`,
|
||||
'--bar-duration': `${dur}s`,
|
||||
'--bar-delay': `${delay}s`,
|
||||
} as React.CSSProperties}
|
||||
/>
|
||||
))}
|
||||
</div>
|
||||
|
||||
<div className="absolute top-1/4 -left-32 w-96 h-96 bg-editor-accent/5 rounded-full blur-3xl pointer-events-none" />
|
||||
<div className="absolute bottom-1/4 -right-32 w-96 h-96 bg-blue-500/5 rounded-full blur-3xl pointer-events-none" />
|
||||
|
||||
<div className="flex-1 flex flex-col items-center justify-center gap-6 px-6 relative z-10">
|
||||
{/* App icon */}
|
||||
<div className="w-36 h-36 rounded-[20px] bg-editor-accent/10 border border-editor-accent/20 flex items-center justify-center shadow-lg shadow-editor-accent/10">
|
||||
<svg width="96" height="96" viewBox="0 0 36 36" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M6 10h12a6 6 0 0 1 0 12H8l-2 4V10Z" stroke="#818cf8" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" opacity="0.7"/>
|
||||
<path d="M6 10h12a6 6 0 0 1 0 12H8l-2 4V10Z" stroke="#6366f1" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round"/>
|
||||
<path d="M10 14v4M13 13v6M16 14v4" stroke="#6366f1" strokeWidth="1.5" strokeLinecap="round"/>
|
||||
<path d="M22 16h6M22 19h4M22 22h5" stroke="#818cf8" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round" opacity="0.6"/>
|
||||
</svg>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col items-center gap-2">
|
||||
<h1 className="text-3xl font-bold tracking-tight text-editor-text">
|
||||
Talk<span className="text-editor-accent">Edit</span>
|
||||
</h1>
|
||||
<p className="text-editor-text-muted text-sm max-w-sm text-center leading-relaxed">
|
||||
The offline video editor that doesn't slow down on long files.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
{/* Whisper model selector */}
|
||||
<div className="flex items-center gap-3">
|
||||
<label className="text-xs text-editor-text-muted whitespace-nowrap">Model:</label>
|
||||
<select
|
||||
value={whisperModel}
|
||||
onChange={(e) => setWhisperModel(e.target.value)}
|
||||
className="px-3 py-1.5 bg-editor-surface border border-editor-border rounded-lg text-xs text-black focus:outline-none focus:border-editor-accent"
|
||||
>
|
||||
<optgroup label="Multilingual (any language)">
|
||||
<option value="tiny">tiny — ~75 MB · fastest, low accuracy</option>
|
||||
<option value="base">base — ~140 MB · fast, decent accuracy</option>
|
||||
<option value="small">small — ~460 MB · good balance</option>
|
||||
<option value="medium">medium — ~1.5 GB · better accuracy</option>
|
||||
<option value="large-v2">large-v2 — ~2.9 GB · high accuracy</option>
|
||||
<option value="large-v3">large-v3 — ~2.9 GB · best overall ★</option>
|
||||
<option value="large-v3-turbo">large-v3-turbo — ~1.6 GB · fast + accurate ★</option>
|
||||
<option value="distil-large-v3">distil-large-v3 — ~1.5 GB · fast, near large-v3 quality</option>
|
||||
</optgroup>
|
||||
<optgroup label="English-only (faster & more accurate for English)">
|
||||
<option value="tiny.en">tiny.en — ~75 MB · fastest English</option>
|
||||
<option value="base.en">base.en — ~140 MB · fast English</option>
|
||||
<option value="small.en">small.en — ~460 MB · good English</option>
|
||||
<option value="medium.en">medium.en — ~1.5 GB · great English</option>
|
||||
<option value="distil-small.en">distil-small.en — ~190 MB · fast English ★</option>
|
||||
<option value="distil-medium.en">distil-medium.en — ~750 MB · best fast English ★</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
<p className="text-[11px] text-editor-text-muted text-center max-w-sm">
|
||||
For noisy/YouTube videos use <span className="text-white">large-v3</span> or <span className="text-white">large-v3-turbo</span>.
|
||||
English-only models are ~10% faster and more accurate for English content.
|
||||
</p>
|
||||
|
||||
<div className="flex flex-col items-center gap-3">
|
||||
{/* Action row — button + model selector side by side */}
|
||||
<div className="flex items-center gap-3 mt-2">
|
||||
<button
|
||||
onClick={handleOpenFile}
|
||||
className="flex items-center gap-2 px-6 py-3 bg-editor-accent hover:bg-editor-accent-hover rounded-lg text-white font-medium transition-colors"
|
||||
className="flex items-center gap-2 px-8 py-3 bg-editor-accent hover:bg-editor-accent-hover rounded-xl text-white font-medium transition-all hover:scale-[1.02] active:scale-[0.98]"
|
||||
>
|
||||
<FolderOpen className="w-5 h-5" />
|
||||
Open Video File
|
||||
</button>
|
||||
<button
|
||||
onClick={handleLoadProject}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm text-editor-text-muted hover:text-editor-text hover:bg-editor-surface rounded-lg transition-colors"
|
||||
>
|
||||
<FileInput className="w-4 h-4" />
|
||||
Load Project (.aive)
|
||||
Process File
|
||||
</button>
|
||||
<div className="flex items-center gap-2 px-4 py-2.5 rounded-xl bg-editor-surface/50 border border-editor-border/50">
|
||||
<span className="text-xs text-editor-text-muted whitespace-nowrap">Transcription model:</span>
|
||||
<select
|
||||
value={whisperModel}
|
||||
onChange={(e) => setWhisperModel(e.target.value)}
|
||||
className="bg-transparent text-xs text-editor-text focus:outline-none [color-scheme:dark]"
|
||||
title="Choose Whisper model for transcription accuracy"
|
||||
>
|
||||
<optgroup label="Multilingual">
|
||||
<option value="tiny">tiny (75 MB · fastest)</option>
|
||||
<option value="base">base (140 MB · fast)</option>
|
||||
<option value="small">small (460 MB · balanced)</option>
|
||||
<option value="medium">medium (1.5 GB · better)</option>
|
||||
<option value="large-v3-turbo">large-v3-turbo (1.6 GB ★)</option>
|
||||
<option value="large-v3">large-v3 (2.9 GB · best)</option>
|
||||
</optgroup>
|
||||
<optgroup label="English-only (faster)">
|
||||
<option value="tiny.en">tiny.en (75 MB)</option>
|
||||
<option value="base.en">base.en (140 MB)</option>
|
||||
<option value="small.en">small.en (460 MB)</option>
|
||||
<option value="medium.en">medium.en (1.5 GB)</option>
|
||||
<option value="distil-small.en">distil-small.en (190 MB ★)</option>
|
||||
<option value="distil-medium.en">distil-medium.en (750 MB ★)</option>
|
||||
</optgroup>
|
||||
</select>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button
|
||||
onClick={handleLoadProject}
|
||||
className="flex items-center gap-2 px-4 py-2 text-sm text-editor-text-muted hover:text-editor-text hover:bg-editor-surface rounded-lg transition-colors"
|
||||
>
|
||||
<FileInput className="w-4 h-4" />
|
||||
Load Project (.aive)
|
||||
</button>
|
||||
</div>
|
||||
|
||||
{licenseStatus?.tag === 'Trial' && (
|
||||
<div className="h-9 flex items-center justify-center gap-2 px-4 bg-editor-accent/10 border-t border-editor-accent/20 shrink-0">
|
||||
<div className="h-9 flex items-center justify-center gap-2 px-4 bg-editor-accent/10 border-t border-editor-accent/20 shrink-0 relative z-10">
|
||||
<Clock className="w-3.5 h-3.5 text-editor-accent shrink-0" />
|
||||
<span className="text-xs text-editor-accent">
|
||||
Free trial: {licenseStatus.days_remaining} day{licenseStatus.days_remaining !== 1 ? 's' : ''} remaining
|
||||
@ -661,7 +725,7 @@ export default function App() {
|
||||
)}
|
||||
|
||||
{licenseStatus?.tag === 'Expired' && (
|
||||
<div className="h-9 flex items-center justify-center gap-2 px-4 bg-red-500/15 border-t border-red-500/30 shrink-0">
|
||||
<div className="h-9 flex items-center justify-center gap-2 px-4 bg-red-500/15 border-t border-red-500/30 shrink-0 relative z-10">
|
||||
<AlertTriangle className="w-3.5 h-3.5 text-red-400 shrink-0" />
|
||||
<span className="text-xs text-red-300">Trial expired</span>
|
||||
<button
|
||||
|
||||
Reference in New Issue
Block a user