Add cancel, history, revert, and quality-of-life features
UX - Add elapsed-time counter and Cancel button to in-flight generations, wired through AbortController so partial responses are discarded cleanly. The cancel action is available from both the input panel and the results header. - Add a Recent generations panel below the input. The last 6 successful generations are saved to localStorage; one click reloads both the input fields and the generated assets. - Add a Revert button to every editable card. It appears the moment the current value diverges from the last generated value and restores the field with a single click. - Add an Empty state to the right panel with a friendly hint pointing at the Generate button and the Settings page. - Add a 'Try an example' button that fills the input with a random starter idea (idea + mood + vocals). - Add Cmd/Ctrl+Enter as a keyboard shortcut to generate. - Add a Footer with project info and a privacy reminder. - Add a 'Clear saved key' button to the Settings page so the user can remove the API key without overwriting it. Bug fix - Settings > Test Connection used to save the in-progress form values to localStorage before testing. It now uses the in-memory candidate config, so failed tests don't pollute the saved config. Code quality - Extract the duplicated useAutoHeight hook to src/lib/useAutoHeight.ts. - Extract a useElapsed hook for the loading timer. - Move InputValues into src/lib/types.ts (was duplicated in InputPanel.tsx) and add SECTION_LABELS, replacing the humanizeSection switch in HomePage. - Centralize the filename sanitization: HomePage now calls sanitizeFilename from zip.ts instead of duplicating the regex. - Add previewConfig / testConnectionWithConfig helpers to llm.ts to support in-memory connection tests.
This commit is contained in:
@@ -11,6 +11,18 @@ OpenAI-compatible `/chat/completions` endpoint, using credentials that you
|
||||
paste into the Settings page. Those credentials are kept in this browser's
|
||||
`localStorage`.
|
||||
|
||||
## Features
|
||||
|
||||
- 🎵 **All 5 Suno assets in one click** — titles, lyrics, style, video prompts, YouTube description
|
||||
- ✏️ **Inline editing** — every generated field is editable; revert any edit with one click
|
||||
- 🔄 **Per-section regeneration** — regenerate just one section; the rest of the song is passed as context for consistency
|
||||
- ⏱ **Elapsed-time counter** + ❌ **Cancel** button for long generations
|
||||
- 🕘 **Recent generations** — last 6 are kept in localStorage; one click to reload
|
||||
- ⌨️ **Keyboard shortcut** — `Cmd/Ctrl + Enter` to generate
|
||||
- 🎲 **Try an example** — fill the input with a random sample idea
|
||||
- 🌗 **Dark / light mode** — toggle in the header, persisted
|
||||
- 💾 **Standalone** — no backend, no signup, no telemetry
|
||||
|
||||
## Tech stack
|
||||
|
||||
- React 18 + TypeScript + Vite
|
||||
@@ -27,15 +39,29 @@ MelodyMuse/
|
||||
│ ├── main.tsx
|
||||
│ ├── index.css # Tailwind layers + design-system components
|
||||
│ ├── components/ # UI building blocks
|
||||
│ │ └── cards/ # The five result cards
|
||||
│ │ ├── cards/ # The five result cards
|
||||
│ │ ├── ConfigBanner.tsx
|
||||
│ │ ├── CopyButton.tsx
|
||||
│ │ ├── EqualizerIcon.tsx
|
||||
│ │ ├── Footer.tsx
|
||||
│ │ ├── HistoryPanel.tsx
|
||||
│ │ ├── InputPanel.tsx
|
||||
│ │ ├── ResultCard.tsx
|
||||
│ │ ├── ResultsPanel.tsx
|
||||
│ │ ├── SkeletonCard.tsx
|
||||
│ │ ├── StickyZipBar.tsx
|
||||
│ │ └── ThemeToggle.tsx
|
||||
│ ├── pages/ # HomePage, SettingsPage
|
||||
│ ├── lib/
|
||||
│ │ ├── history.ts # recent-generations persistence
|
||||
│ │ ├── llm.ts # direct fetch → provider, JSON extraction, config persistence
|
||||
│ │ ├── prompts.ts # system + user prompt construction
|
||||
│ │ ├── types.ts # shared TypeScript types
|
||||
│ │ ├── zip.ts # JSZip layout
|
||||
│ │ ├── theme.ts # dark/light mode
|
||||
│ │ └── toast.tsx # toast context
|
||||
│ │ ├── toast.tsx # toast context
|
||||
│ │ ├── types.ts # shared TypeScript types + SECTION_LABELS
|
||||
│ │ ├── useAutoHeight.ts # shared textarea auto-grow hook
|
||||
│ │ ├── useElapsed.ts # shared "X seconds elapsed" hook
|
||||
│ │ └── zip.ts # JSZip layout
|
||||
│ └── vite-env.d.ts
|
||||
├── public/favicon.svg
|
||||
├── index.html
|
||||
@@ -68,10 +94,11 @@ MelodyMuse/
|
||||
- **Model Name** — e.g. `MiniMax-M3`
|
||||
|
||||
Click **Save Configuration**, then **Test Connection** to confirm
|
||||
everything is wired up.
|
||||
everything is wired up. **Test Connection** uses your unsaved form
|
||||
values — your changes are only persisted when you click **Save**.
|
||||
|
||||
4. **Generate**. Return to the home page, type a music idea, click
|
||||
**Generate Song Assets**.
|
||||
**Generate Song Assets** (or press `Cmd/Ctrl + Enter`).
|
||||
|
||||
## Build for production
|
||||
|
||||
@@ -112,8 +139,11 @@ The configured endpoint must expose an OpenAI-compatible
|
||||
|
||||
- The API key is held in `localStorage` and is only sent to the endpoint you
|
||||
configure. No analytics, no telemetry, no third-party calls.
|
||||
- The `MelodyMuse-config` localStorage key contains your endpoint URL, model
|
||||
name, and key. You can clear it at any time from your browser's devtools
|
||||
- Three localStorage keys are used:
|
||||
- `melodymuse-config` — `{ api_endpoint, api_key, model_name }`
|
||||
- `melodymuse-history` — the last 6 generations (input + assets)
|
||||
- `melodymuse-theme` — `'dark' | 'light'`
|
||||
- You can clear them at any time from your browser's devtools
|
||||
(Application → Local Storage).
|
||||
|
||||
## License
|
||||
|
||||
@@ -0,0 +1,16 @@
|
||||
export function Footer() {
|
||||
return (
|
||||
<footer className="mt-16 border-t border-border">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6 flex flex-col sm:flex-row items-center justify-between gap-2 text-xs text-fg-muted">
|
||||
<p>
|
||||
<span className="gradient-text font-semibold">MelodyMuse</span> ·
|
||||
Generate Suno song assets with AI
|
||||
</p>
|
||||
<p>
|
||||
All generation runs in your browser — your API key never leaves this
|
||||
device.
|
||||
</p>
|
||||
</div>
|
||||
</footer>
|
||||
);
|
||||
}
|
||||
@@ -0,0 +1,135 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
import { Clock, History, Trash2, X } from 'lucide-react';
|
||||
import {
|
||||
clearHistory,
|
||||
formatRelative,
|
||||
loadHistory,
|
||||
removeFromHistory,
|
||||
type HistoryEntry,
|
||||
} from '../lib/history';
|
||||
import type { InputValues } from '../lib/types';
|
||||
|
||||
interface HistoryPanelProps {
|
||||
onLoad: (entry: HistoryEntry) => void;
|
||||
}
|
||||
|
||||
export function HistoryPanel({ onLoad }: HistoryPanelProps) {
|
||||
const [open, setOpen] = useState(false);
|
||||
const [entries, setEntries] = useState<HistoryEntry[]>([]);
|
||||
|
||||
// Refresh the list whenever the panel is opened, so newly-saved generations
|
||||
// appear without needing a full page refresh.
|
||||
useEffect(() => {
|
||||
if (!open) return;
|
||||
setEntries(loadHistory());
|
||||
}, [open]);
|
||||
|
||||
if (entries.length === 0 && !open) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<div className="mt-4">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => setOpen((v) => !v)}
|
||||
className="w-full flex items-center justify-between gap-2 px-3 py-2 rounded-lg border border-border bg-bg-card/50 hover:bg-bg-hover transition-colors text-sm"
|
||||
aria-expanded={open}
|
||||
>
|
||||
<span className="flex items-center gap-2 text-fg">
|
||||
<History className="w-4 h-4" />
|
||||
Recent generations
|
||||
{entries.length > 0 && (
|
||||
<span className="text-xs text-fg-muted">({entries.length})</span>
|
||||
)}
|
||||
</span>
|
||||
<span className="text-xs text-fg-muted">{open ? 'Hide' : 'Show'}</span>
|
||||
</button>
|
||||
|
||||
{open && (
|
||||
<div className="mt-2 rounded-lg border border-border bg-bg-card/30 divide-y divide-border">
|
||||
{entries.length === 0 ? (
|
||||
<p className="px-3 py-4 text-xs text-fg-muted text-center">
|
||||
No recent generations yet.
|
||||
</p>
|
||||
) : (
|
||||
<>
|
||||
{entries.map((e) => (
|
||||
<HistoryRow
|
||||
key={e.id}
|
||||
entry={e}
|
||||
onLoad={() => {
|
||||
onLoad(e);
|
||||
setOpen(false);
|
||||
}}
|
||||
onRemove={() => setEntries(removeFromHistory(e.id))}
|
||||
/>
|
||||
))}
|
||||
<div className="px-3 py-2 flex justify-end">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
clearHistory();
|
||||
setEntries([]);
|
||||
}}
|
||||
className="inline-flex items-center gap-1 text-xs text-fg-muted hover:text-rose-300 transition-colors"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
Clear all
|
||||
</button>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function HistoryRow({
|
||||
entry,
|
||||
onLoad,
|
||||
onRemove,
|
||||
}: {
|
||||
entry: HistoryEntry;
|
||||
onLoad: () => void;
|
||||
onRemove: () => void;
|
||||
}) {
|
||||
const summary = summarizeInput(entry.input);
|
||||
return (
|
||||
<div className="px-3 py-2 flex items-center justify-between gap-2 text-sm hover:bg-bg-hover/40 transition-colors">
|
||||
<button
|
||||
type="button"
|
||||
onClick={onLoad}
|
||||
className="flex-1 text-left min-w-0"
|
||||
>
|
||||
<div className="truncate text-fg">{summary}</div>
|
||||
<div className="flex items-center gap-2 text-[11px] text-fg-muted mt-0.5">
|
||||
<Clock className="w-3 h-3" />
|
||||
<span>{formatRelative(entry.timestamp)}</span>
|
||||
{entry.input.mood && (
|
||||
<>
|
||||
<span>·</span>
|
||||
<span className="truncate">{entry.input.mood}</span>
|
||||
</>
|
||||
)}
|
||||
</div>
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRemove}
|
||||
className="text-fg-muted hover:text-rose-300 transition-colors p-1"
|
||||
aria-label="Remove from history"
|
||||
>
|
||||
<X className="w-3.5 h-3.5" />
|
||||
</button>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function summarizeInput(v: InputValues): string {
|
||||
const idea = v.idea.trim();
|
||||
const max = 90;
|
||||
if (idea.length <= max) return idea || '(no idea text)';
|
||||
return idea.slice(0, max - 1) + '…';
|
||||
}
|
||||
+154
-66
@@ -1,27 +1,54 @@
|
||||
import { useState } from 'react';
|
||||
import { Link } from 'react-router-dom';
|
||||
import { ChevronDown, ChevronUp, Loader2, Settings as SettingsIcon, Sparkles } from 'lucide-react';
|
||||
import { EqualizerIcon } from './EqualizerIcon';
|
||||
import type { Language, Vocals } from '../lib/types';
|
||||
import { useState, type FormEvent, type KeyboardEvent } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import {
|
||||
ChevronDown,
|
||||
ChevronUp,
|
||||
Loader2,
|
||||
Settings as SettingsIcon,
|
||||
Sparkles,
|
||||
Shuffle,
|
||||
} from "lucide-react";
|
||||
import { EqualizerIcon } from "./EqualizerIcon";
|
||||
import type { InputValues, Language, Vocals } from "../lib/types";
|
||||
import { formatElapsed, useElapsed } from "../lib/useElapsed";
|
||||
|
||||
export type { InputValues };
|
||||
|
||||
const LANGUAGES: { value: Language; label: string }[] = [
|
||||
{ value: 'English', label: 'English' },
|
||||
{ value: 'Deutsch', label: 'Deutsch' },
|
||||
{ value: 'Español', label: 'Español' },
|
||||
{ value: 'Français', label: 'Français' },
|
||||
{ value: 'Italiano', label: 'Italiano' },
|
||||
{ value: 'Português', label: 'Português' },
|
||||
{ value: 'Polski', label: 'Polski' },
|
||||
{ value: 'Other', label: 'Other' },
|
||||
{ value: "English", label: "English" },
|
||||
{ value: "Deutsch", label: "Deutsch" },
|
||||
{ value: "Español", label: "Español" },
|
||||
{ value: "Français", label: "Français" },
|
||||
{ value: "Italiano", label: "Italiano" },
|
||||
{ value: "Português", label: "Português" },
|
||||
{ value: "Polski", label: "Polski" },
|
||||
{ value: "Other", label: "Other" },
|
||||
];
|
||||
|
||||
export interface InputValues {
|
||||
idea: string;
|
||||
language: Language | string;
|
||||
customLanguage: string;
|
||||
mood: string;
|
||||
vocals: Vocals;
|
||||
}
|
||||
// A handful of starter ideas shown as quick-fill chips. Kept short and varied
|
||||
// so the user can see the kind of input the model expects.
|
||||
const EXAMPLE_IDEAS: { text: string; mood: string; vocals: Vocals }[] = [
|
||||
{
|
||||
text: "melancholic lo-fi house beat for a rainy sunday morning",
|
||||
mood: "melancholic",
|
||||
vocals: "instrumental",
|
||||
},
|
||||
{
|
||||
text: "euphoric summer pop anthem with a singalong chorus",
|
||||
mood: "euphoric",
|
||||
vocals: "vocals",
|
||||
},
|
||||
{
|
||||
text: "tense cinematic underscore for a thriller chase scene",
|
||||
mood: "tense",
|
||||
vocals: "instrumental",
|
||||
},
|
||||
{
|
||||
text: "dreamy ambient ballad about missing someone far away",
|
||||
mood: "longing",
|
||||
vocals: "vocals",
|
||||
},
|
||||
];
|
||||
|
||||
interface InputPanelProps {
|
||||
values: InputValues;
|
||||
@@ -29,16 +56,48 @@ interface InputPanelProps {
|
||||
onSubmit: () => void;
|
||||
loading: boolean;
|
||||
disabled?: boolean;
|
||||
cancelButton?: React.ReactNode;
|
||||
}
|
||||
|
||||
export function InputPanel({ values, onChange, onSubmit, loading, disabled }: InputPanelProps) {
|
||||
export function InputPanel({
|
||||
values,
|
||||
onChange,
|
||||
onSubmit,
|
||||
loading,
|
||||
disabled,
|
||||
cancelButton,
|
||||
}: InputPanelProps) {
|
||||
const [optionsOpen, setOptionsOpen] = useState(false);
|
||||
const elapsed = useElapsed(loading);
|
||||
|
||||
const set = <K extends keyof InputValues>(key: K, value: InputValues[K]) =>
|
||||
onChange({ ...values, [key]: value });
|
||||
|
||||
const canSubmit = !loading && !disabled && values.idea.trim().length > 0;
|
||||
|
||||
const submit = (e?: FormEvent) => {
|
||||
e?.preventDefault();
|
||||
if (canSubmit) onSubmit();
|
||||
};
|
||||
|
||||
// Submit on Cmd/Ctrl+Enter, even from inside the textarea.
|
||||
const onKeyDown = (e: KeyboardEvent<HTMLTextAreaElement>) => {
|
||||
if ((e.metaKey || e.ctrlKey) && e.key === "Enter") {
|
||||
e.preventDefault();
|
||||
submit();
|
||||
}
|
||||
};
|
||||
|
||||
const fillExample = () => {
|
||||
const ex = EXAMPLE_IDEAS[Math.floor(Math.random() * EXAMPLE_IDEAS.length)];
|
||||
onChange({
|
||||
...values,
|
||||
idea: ex.text,
|
||||
mood: values.mood || ex.mood,
|
||||
vocals: ex.vocals,
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="relative">
|
||||
{/* Animated gradient backdrop behind the header */}
|
||||
@@ -46,32 +105,52 @@ export function InputPanel({ values, onChange, onSubmit, loading, disabled }: In
|
||||
|
||||
<div className="flex items-center gap-3 mb-1">
|
||||
<EqualizerIcon className="w-8 h-8 shrink-0" />
|
||||
<h1 className="text-3xl font-bold gradient-text leading-none">MelodyMuse</h1>
|
||||
<h1 className="text-3xl font-bold gradient-text leading-none">
|
||||
MelodyMuse
|
||||
</h1>
|
||||
</div>
|
||||
<p className="text-sm text-fg-muted mb-6 ml-11">
|
||||
Generate your Suno song assets with AI
|
||||
</p>
|
||||
|
||||
<form
|
||||
onSubmit={(e) => {
|
||||
e.preventDefault();
|
||||
if (canSubmit) onSubmit();
|
||||
}}
|
||||
className="space-y-4"
|
||||
>
|
||||
<form onSubmit={submit} className="space-y-4">
|
||||
<div>
|
||||
<label htmlFor="idea" className="sr-only">
|
||||
Describe your music idea
|
||||
</label>
|
||||
<div className="flex items-center justify-between mb-1.5">
|
||||
<label htmlFor="idea" className="sr-only">
|
||||
Describe your music idea
|
||||
</label>
|
||||
<span className="text-[11px] uppercase tracking-wider text-fg-muted">
|
||||
Music idea
|
||||
</span>
|
||||
<button
|
||||
type="button"
|
||||
onClick={fillExample}
|
||||
className="inline-flex items-center gap-1 text-[11px] text-fg-muted hover:text-fg transition-colors"
|
||||
title="Fill the input with a random example"
|
||||
>
|
||||
<Shuffle className="w-3 h-3" />
|
||||
Try an example
|
||||
</button>
|
||||
</div>
|
||||
<textarea
|
||||
id="idea"
|
||||
value={values.idea}
|
||||
onChange={(e) => set('idea', e.target.value)}
|
||||
onChange={(e) => set("idea", e.target.value)}
|
||||
onKeyDown={onKeyDown}
|
||||
rows={4}
|
||||
placeholder={`Describe your music idea...\ne.g. 'melancholic house beat for a rainy night'`}
|
||||
className="textarea text-base leading-relaxed"
|
||||
required
|
||||
/>
|
||||
<p className="mt-1 text-[11px] text-fg-muted">
|
||||
<kbd className="px-1 py-0.5 rounded bg-bg-hover border border-border font-mono">
|
||||
{navigator?.platform?.toLowerCase().includes("mac")
|
||||
? "⌘"
|
||||
: "Ctrl"}
|
||||
+Enter
|
||||
</kbd>{" "}
|
||||
to generate
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<button
|
||||
@@ -91,13 +170,16 @@ export function InputPanel({ values, onChange, onSubmit, loading, disabled }: In
|
||||
{optionsOpen && (
|
||||
<div className="space-y-4 p-4 rounded-lg border border-border bg-bg-card/50">
|
||||
<div>
|
||||
<label htmlFor="language" className="block text-xs uppercase tracking-wider text-fg-muted mb-1">
|
||||
<label
|
||||
htmlFor="language"
|
||||
className="block text-xs uppercase tracking-wider text-fg-muted mb-1"
|
||||
>
|
||||
Language
|
||||
</label>
|
||||
<select
|
||||
id="language"
|
||||
value={values.language}
|
||||
onChange={(e) => set('language', e.target.value as Language)}
|
||||
onChange={(e) => set("language", e.target.value as Language)}
|
||||
className="input"
|
||||
>
|
||||
{LANGUAGES.map((l) => (
|
||||
@@ -106,19 +188,22 @@ export function InputPanel({ values, onChange, onSubmit, loading, disabled }: In
|
||||
</option>
|
||||
))}
|
||||
</select>
|
||||
{values.language === 'Other' && (
|
||||
{values.language === "Other" && (
|
||||
<input
|
||||
type="text"
|
||||
className="input mt-2"
|
||||
placeholder="e.g. 日本語, Türkçe, Русский"
|
||||
value={values.customLanguage}
|
||||
onChange={(e) => set('customLanguage', e.target.value)}
|
||||
onChange={(e) => set("customLanguage", e.target.value)}
|
||||
/>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<label htmlFor="mood" className="block text-xs uppercase tracking-wider text-fg-muted mb-1">
|
||||
<label
|
||||
htmlFor="mood"
|
||||
className="block text-xs uppercase tracking-wider text-fg-muted mb-1"
|
||||
>
|
||||
Mood
|
||||
</label>
|
||||
<input
|
||||
@@ -126,7 +211,7 @@ export function InputPanel({ values, onChange, onSubmit, loading, disabled }: In
|
||||
type="text"
|
||||
placeholder="e.g. melancholic, euphoric, tense…"
|
||||
value={values.mood}
|
||||
onChange={(e) => set('mood', e.target.value)}
|
||||
onChange={(e) => set("mood", e.target.value)}
|
||||
className="input"
|
||||
/>
|
||||
</div>
|
||||
@@ -138,25 +223,25 @@ export function InputPanel({ values, onChange, onSubmit, loading, disabled }: In
|
||||
<div className="grid grid-cols-2 gap-2">
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => set('vocals', 'vocals')}
|
||||
onClick={() => set("vocals", "vocals")}
|
||||
className={
|
||||
values.vocals === 'vocals'
|
||||
? 'px-3 py-2 rounded-lg font-medium bg-accent-primary text-white transition-colors'
|
||||
: 'chip justify-center py-2'
|
||||
values.vocals === "vocals"
|
||||
? "px-3 py-2 rounded-lg font-medium bg-accent-primary text-white transition-colors"
|
||||
: "chip justify-center py-2"
|
||||
}
|
||||
aria-pressed={values.vocals === 'vocals'}
|
||||
aria-pressed={values.vocals === "vocals"}
|
||||
>
|
||||
🎤 Vocals
|
||||
</button>
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => set('vocals', 'instrumental')}
|
||||
onClick={() => set("vocals", "instrumental")}
|
||||
className={
|
||||
values.vocals === 'instrumental'
|
||||
? 'px-3 py-2 rounded-lg font-medium bg-accent-primary text-white transition-colors'
|
||||
: 'chip justify-center py-2'
|
||||
values.vocals === "instrumental"
|
||||
? "px-3 py-2 rounded-lg font-medium bg-accent-primary text-white transition-colors"
|
||||
: "chip justify-center py-2"
|
||||
}
|
||||
aria-pressed={values.vocals === 'instrumental'}
|
||||
aria-pressed={values.vocals === "instrumental"}
|
||||
>
|
||||
🎹 Instrumental
|
||||
</button>
|
||||
@@ -165,23 +250,26 @@ export function InputPanel({ values, onChange, onSubmit, loading, disabled }: In
|
||||
</div>
|
||||
)}
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!canSubmit}
|
||||
className="w-full py-4 rounded-xl text-base font-semibold text-white shadow-lg shadow-violet-900/30 transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none flex items-center justify-center gap-2 gradient-bg hover:brightness-110 active:brightness-95"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
Generating…
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Sparkles className="w-5 h-5" />
|
||||
Generate Song Assets
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
<div className="space-y-2">
|
||||
<button
|
||||
type="submit"
|
||||
disabled={!canSubmit}
|
||||
className="w-full py-4 rounded-xl text-base font-semibold text-white shadow-lg shadow-violet-900/30 transition-all duration-150 disabled:opacity-50 disabled:cursor-not-allowed disabled:shadow-none flex items-center justify-center gap-2 gradient-bg hover:brightness-110 active:brightness-95"
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<Loader2 className="w-5 h-5 animate-spin" />
|
||||
<span>Generating… {formatElapsed(elapsed)}</span>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<Sparkles className="w-5 h-5" />
|
||||
Generate Song Assets
|
||||
</>
|
||||
)}
|
||||
</button>
|
||||
{loading && cancelButton}
|
||||
</div>
|
||||
|
||||
<div className="text-center">
|
||||
<Link
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
import { RefreshCw } from "lucide-react";
|
||||
import { Music, RefreshCw, Sparkles } from "lucide-react";
|
||||
import type { SongAssets } from "../lib/types";
|
||||
import { SkeletonCard } from "./SkeletonCard";
|
||||
import { TitlesCard } from "./cards/TitlesCard";
|
||||
@@ -18,18 +18,22 @@ export type RegeneratingMap = Partial<Record<SectionKey | "all", boolean>>;
|
||||
|
||||
interface ResultsPanelProps {
|
||||
assets: SongAssets | null;
|
||||
loading: boolean; // true during the initial "Generate all" call
|
||||
originalAssets: SongAssets | null; // last *generated* values, for Revert
|
||||
loading: boolean; // initial "Generate all" skeleton
|
||||
selectedTitleIndex: number;
|
||||
onSelectTitle: (i: number) => void;
|
||||
onChange: <K extends keyof SongAssets>(key: K, value: SongAssets[K]) => void;
|
||||
onChangeVideoPrompt: (index: number, value: string) => void;
|
||||
onRegenerateAll: () => void;
|
||||
onRegenerateSection: (section: SectionKey) => void;
|
||||
onCancel?: () => void; // cancel the in-flight generation
|
||||
anyRegenerating: boolean;
|
||||
regenerating: RegeneratingMap;
|
||||
}
|
||||
|
||||
export function ResultsPanel({
|
||||
assets,
|
||||
originalAssets,
|
||||
loading,
|
||||
selectedTitleIndex,
|
||||
onSelectTitle,
|
||||
@@ -37,26 +41,41 @@ export function ResultsPanel({
|
||||
onChangeVideoPrompt,
|
||||
onRegenerateAll,
|
||||
onRegenerateSection,
|
||||
onCancel,
|
||||
anyRegenerating,
|
||||
regenerating,
|
||||
}: ResultsPanelProps) {
|
||||
const showSkeletons = loading && !assets;
|
||||
const regenAll = Boolean(regenerating.all);
|
||||
|
||||
return (
|
||||
<div>
|
||||
<div className="sticky top-0 z-30 -mx-4 sm:-mx-6 lg:-mx-8 px-4 sm:px-6 lg:px-8 py-3 bg-bg/80 backdrop-blur border-b border-border mb-6 flex items-center justify-between gap-3">
|
||||
<h2 className="text-lg font-semibold text-fg">Results</h2>
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRegenerateAll}
|
||||
disabled={loading || regenAll}
|
||||
className="btn-ghost"
|
||||
>
|
||||
<RefreshCw
|
||||
className={`w-4 h-4 ${regenAll || loading ? "animate-spin" : ""}`}
|
||||
/>
|
||||
<span>Regenerate All</span>
|
||||
</button>
|
||||
<div className="flex items-center gap-1">
|
||||
{anyRegenerating && onCancel && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onCancel}
|
||||
className="btn-ghost"
|
||||
aria-label="Cancel generation"
|
||||
>
|
||||
<span className="text-rose-300">Cancel</span>
|
||||
</button>
|
||||
)}
|
||||
{assets && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onRegenerateAll}
|
||||
disabled={anyRegenerating}
|
||||
className="btn-ghost"
|
||||
>
|
||||
<RefreshCw
|
||||
className={`w-4 h-4 ${regenerating.all ? "animate-spin" : ""}`}
|
||||
/>
|
||||
<span>Regenerate All</span>
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{showSkeletons ? (
|
||||
@@ -67,7 +86,7 @@ export function ResultsPanel({
|
||||
<SkeletonCard height="h-32" rows={4} />
|
||||
<SkeletonCard height="h-56" rows={3} />
|
||||
</div>
|
||||
) : assets ? (
|
||||
) : assets && originalAssets ? (
|
||||
<div className="space-y-4">
|
||||
<TitlesCard
|
||||
titles={assets.titles}
|
||||
@@ -78,6 +97,7 @@ export function ResultsPanel({
|
||||
/>
|
||||
<LyricsCard
|
||||
lyrics={assets.lyrics}
|
||||
originalLyrics={originalAssets.lyrics}
|
||||
onChange={(v) => onChange("lyrics", v)}
|
||||
onRegenerate={() => onRegenerateSection("lyrics")}
|
||||
regenerating={Boolean(regenerating.lyrics)}
|
||||
@@ -85,6 +105,8 @@ export function ResultsPanel({
|
||||
<StyleCard
|
||||
style={assets.style}
|
||||
negativeStyle={assets.negative_style}
|
||||
originalStyle={originalAssets.style}
|
||||
originalNegativeStyle={originalAssets.negative_style}
|
||||
onStyleChange={(v) => onChange("style", v)}
|
||||
onNegativeChange={(v) => onChange("negative_style", v)}
|
||||
onRegenerate={() => onRegenerateSection("style")}
|
||||
@@ -92,18 +114,48 @@ export function ResultsPanel({
|
||||
/>
|
||||
<VideoPromptsCard
|
||||
prompts={assets.video_prompts}
|
||||
originalPrompts={originalAssets.video_prompts}
|
||||
onChange={onChangeVideoPrompt}
|
||||
onRegenerate={() => onRegenerateSection("video_prompts")}
|
||||
regenerating={Boolean(regenerating.video_prompts)}
|
||||
/>
|
||||
<YouTubeCard
|
||||
description={assets.youtube_description}
|
||||
originalDescription={originalAssets.youtube_description}
|
||||
onChange={(v) => onChange("youtube_description", v)}
|
||||
onRegenerate={() => onRegenerateSection("youtube_description")}
|
||||
regenerating={Boolean(regenerating.youtube_description)}
|
||||
/>
|
||||
</div>
|
||||
) : null}
|
||||
) : (
|
||||
<EmptyState />
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function EmptyState() {
|
||||
return (
|
||||
<div className="card p-10 text-center">
|
||||
<div className="mx-auto w-14 h-14 rounded-full gradient-bg-soft flex items-center justify-center mb-4">
|
||||
<Music className="w-7 h-7 text-violet-300" />
|
||||
</div>
|
||||
<h3 className="text-base font-semibold text-fg mb-1">
|
||||
Your song will appear here
|
||||
</h3>
|
||||
<p className="text-sm text-fg-muted max-w-sm mx-auto">
|
||||
Describe a music idea on the left and press{" "}
|
||||
<kbd className="px-1.5 py-0.5 rounded bg-bg-hover border border-border text-[11px] font-mono">
|
||||
Generate
|
||||
</kbd>{" "}
|
||||
to create titles, lyrics, style, video prompts, and a YouTube
|
||||
description — all in one go.
|
||||
</p>
|
||||
<div className="mt-5 flex items-center justify-center gap-2 text-xs text-fg-muted">
|
||||
<Sparkles className="w-3.5 h-3.5" />
|
||||
Tip: open <span className="text-fg">Settings</span> to add your API key
|
||||
first.
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@@ -1,29 +1,25 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { ResultCard } from '../ResultCard';
|
||||
import { CopyButton } from '../CopyButton';
|
||||
import { ResultCard } from "../ResultCard";
|
||||
import { CopyButton } from "../CopyButton";
|
||||
import { RotateCcw } from "lucide-react";
|
||||
import { useAutoHeight } from "../../lib/useAutoHeight";
|
||||
|
||||
interface LyricsCardProps {
|
||||
lyrics: string;
|
||||
originalLyrics: string;
|
||||
onChange: (next: string) => void;
|
||||
onRegenerate: () => void;
|
||||
regenerating: boolean;
|
||||
}
|
||||
|
||||
// Auto-grow the textarea to fit its content. Min height is enforced in CSS via
|
||||
// `min-height`; we only ever grow.
|
||||
function useAutoHeight(value: string, minHeight = 200) {
|
||||
const ref = useRef<HTMLTextAreaElement | null>(null);
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
el.style.height = 'auto';
|
||||
el.style.height = `${Math.max(minHeight, el.scrollHeight)}px`;
|
||||
}, [value, minHeight]);
|
||||
return ref;
|
||||
}
|
||||
|
||||
export function LyricsCard({ lyrics, onChange, onRegenerate, regenerating }: LyricsCardProps) {
|
||||
export function LyricsCard({
|
||||
lyrics,
|
||||
originalLyrics,
|
||||
onChange,
|
||||
onRegenerate,
|
||||
regenerating,
|
||||
}: LyricsCardProps) {
|
||||
const ref = useAutoHeight(lyrics, 200);
|
||||
const dirty = lyrics !== originalLyrics;
|
||||
|
||||
return (
|
||||
<ResultCard
|
||||
@@ -32,7 +28,23 @@ export function LyricsCard({ lyrics, onChange, onRegenerate, regenerating }: Lyr
|
||||
title="Lyrics"
|
||||
onRegenerate={onRegenerate}
|
||||
regenerating={regenerating}
|
||||
headerExtra={lyrics ? <CopyButton value={lyrics} label="Copy" /> : null}
|
||||
headerExtra={
|
||||
<>
|
||||
{dirty && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange(originalLyrics)}
|
||||
className="btn-ghost"
|
||||
aria-label="Revert lyrics to last generated version"
|
||||
title="Revert to last generated"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
<span>Revert</span>
|
||||
</button>
|
||||
)}
|
||||
{lyrics && <CopyButton value={lyrics} label="Copy" />}
|
||||
</>
|
||||
}
|
||||
>
|
||||
<textarea
|
||||
ref={ref}
|
||||
|
||||
@@ -1,30 +1,24 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { ResultCard } from '../ResultCard';
|
||||
import { CopyButton } from '../CopyButton';
|
||||
import { RotateCcw } from "lucide-react";
|
||||
import { ResultCard } from "../ResultCard";
|
||||
import { CopyButton } from "../CopyButton";
|
||||
import { useAutoHeight } from "../../lib/useAutoHeight";
|
||||
|
||||
interface StyleCardProps {
|
||||
style: string;
|
||||
negativeStyle: string;
|
||||
originalStyle: string;
|
||||
originalNegativeStyle: string;
|
||||
onStyleChange: (next: string) => void;
|
||||
onNegativeChange: (next: string) => void;
|
||||
onRegenerate: () => void;
|
||||
regenerating: boolean;
|
||||
}
|
||||
|
||||
function useAutoHeight(value: string, minHeight: number) {
|
||||
const ref = useRef<HTMLTextAreaElement | null>(null);
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
el.style.height = 'auto';
|
||||
el.style.height = `${Math.max(minHeight, el.scrollHeight)}px`;
|
||||
}, [value, minHeight]);
|
||||
return ref;
|
||||
}
|
||||
|
||||
export function StyleCard({
|
||||
style,
|
||||
negativeStyle,
|
||||
originalStyle,
|
||||
originalNegativeStyle,
|
||||
onStyleChange,
|
||||
onNegativeChange,
|
||||
onRegenerate,
|
||||
@@ -33,6 +27,9 @@ export function StyleCard({
|
||||
const styleRef = useAutoHeight(style, 96);
|
||||
const negRef = useAutoHeight(negativeStyle, 64);
|
||||
|
||||
const dirty =
|
||||
style !== originalStyle || negativeStyle !== originalNegativeStyle;
|
||||
|
||||
return (
|
||||
<ResultCard
|
||||
index={2}
|
||||
@@ -40,6 +37,23 @@ export function StyleCard({
|
||||
title="Style"
|
||||
onRegenerate={onRegenerate}
|
||||
regenerating={regenerating}
|
||||
headerExtra={
|
||||
dirty && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => {
|
||||
onStyleChange(originalStyle);
|
||||
onNegativeChange(originalNegativeStyle);
|
||||
}}
|
||||
className="btn-ghost"
|
||||
aria-label="Revert style to last generated version"
|
||||
title="Revert to last generated"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
<span>Revert</span>
|
||||
</button>
|
||||
)
|
||||
}
|
||||
>
|
||||
<div className="space-y-4">
|
||||
<div>
|
||||
@@ -59,7 +73,9 @@ export function StyleCard({
|
||||
|
||||
<div>
|
||||
<div className="flex items-center justify-between mb-2">
|
||||
<label className="text-sm font-medium text-fg">Negative Style</label>
|
||||
<label className="text-sm font-medium text-fg">
|
||||
Negative Style
|
||||
</label>
|
||||
<CopyButton value={negativeStyle} label="Copy" />
|
||||
</div>
|
||||
<textarea
|
||||
|
||||
@@ -1,34 +1,38 @@
|
||||
import { useEffect, useRef, useState } from 'react';
|
||||
import { ResultCard } from '../ResultCard';
|
||||
import { CopyButton } from '../CopyButton';
|
||||
import { NEGATIVE_VIDEO_PROMPT, type VideoPrompt, type VideoPromptType } from '../../lib/types';
|
||||
import { useState } from "react";
|
||||
import { RotateCcw } from "lucide-react";
|
||||
import { ResultCard } from "../ResultCard";
|
||||
import { CopyButton } from "../CopyButton";
|
||||
import { useAutoHeight } from "../../lib/useAutoHeight";
|
||||
import {
|
||||
NEGATIVE_VIDEO_PROMPT,
|
||||
type VideoPrompt,
|
||||
type VideoPromptType,
|
||||
} from "../../lib/types";
|
||||
|
||||
interface VideoPromptsCardProps {
|
||||
prompts: VideoPrompt[];
|
||||
originalPrompts: VideoPrompt[];
|
||||
onChange: (index: number, next: string) => void;
|
||||
onRegenerate: () => void;
|
||||
regenerating: boolean;
|
||||
}
|
||||
|
||||
const TABS: VideoPromptType[] = ['Abstract', 'Cinematic', 'Hybrid'];
|
||||
const TABS: VideoPromptType[] = ["Abstract", "Cinematic", "Hybrid"];
|
||||
|
||||
export function VideoPromptsCard({
|
||||
prompts,
|
||||
originalPrompts,
|
||||
onChange,
|
||||
onRegenerate,
|
||||
regenerating,
|
||||
}: VideoPromptsCardProps) {
|
||||
const [tab, setTab] = useState<VideoPromptType>('Abstract');
|
||||
const [tab, setTab] = useState<VideoPromptType>("Abstract");
|
||||
const idx = prompts.findIndex((p) => p.type === tab);
|
||||
const current = idx >= 0 ? prompts[idx] : undefined;
|
||||
const originalCurrent = originalPrompts.find((p) => p.type === tab);
|
||||
const dirty = current?.prompt !== originalCurrent?.prompt;
|
||||
|
||||
const ref = useRef<HTMLTextAreaElement | null>(null);
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el || !current) return;
|
||||
el.style.height = 'auto';
|
||||
el.style.height = `${Math.max(120, el.scrollHeight)}px`;
|
||||
}, [current?.prompt, tab]);
|
||||
const ref = useAutoHeight(current?.prompt ?? "", 120);
|
||||
|
||||
return (
|
||||
<ResultCard
|
||||
@@ -37,7 +41,25 @@ export function VideoPromptsCard({
|
||||
title="Video Prompts"
|
||||
onRegenerate={onRegenerate}
|
||||
regenerating={regenerating}
|
||||
headerExtra={current ? <CopyButton value={current.prompt} label="Copy" /> : null}
|
||||
headerExtra={
|
||||
current ? (
|
||||
<>
|
||||
{dirty && originalCurrent && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange(idx, originalCurrent.prompt)}
|
||||
className="btn-ghost"
|
||||
aria-label="Revert video prompt to last generated version"
|
||||
title="Revert to last generated"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
<span>Revert</span>
|
||||
</button>
|
||||
)}
|
||||
<CopyButton value={current.prompt} label="Copy" />
|
||||
</>
|
||||
) : null
|
||||
}
|
||||
>
|
||||
<div className="flex items-center gap-1 mb-4 p-1 rounded-lg bg-bg-hover/40 border border-border w-fit">
|
||||
{TABS.map((t) => {
|
||||
@@ -49,8 +71,8 @@ export function VideoPromptsCard({
|
||||
onClick={() => setTab(t)}
|
||||
className={
|
||||
isActive
|
||||
? 'px-3 py-1.5 rounded-md text-sm font-medium bg-accent-primary text-white transition-colors'
|
||||
: 'px-3 py-1.5 rounded-md text-sm font-medium text-fg-muted hover:text-fg hover:bg-bg-hover transition-colors'
|
||||
? "px-3 py-1.5 rounded-md text-sm font-medium bg-accent-primary text-white transition-colors"
|
||||
: "px-3 py-1.5 rounded-md text-sm font-medium text-fg-muted hover:text-fg hover:bg-bg-hover transition-colors"
|
||||
}
|
||||
role="tab"
|
||||
aria-selected={isActive}
|
||||
@@ -78,12 +100,19 @@ export function VideoPromptsCard({
|
||||
</div>
|
||||
|
||||
<p className="text-sm italic text-fg-muted">
|
||||
→ Best for: <span className="not-italic text-fg">{current.tool_recommendation}</span>
|
||||
→ Best for:{" "}
|
||||
<span className="not-italic text-fg">
|
||||
{current.tool_recommendation}
|
||||
</span>
|
||||
</p>
|
||||
|
||||
<div className="mt-1 p-3 rounded-lg bg-bg-hover/40 border border-border">
|
||||
<p className="text-[11px] uppercase tracking-wider text-fg-muted mb-1">Negative</p>
|
||||
<p className="text-xs text-fg-muted leading-relaxed">{NEGATIVE_VIDEO_PROMPT}</p>
|
||||
<p className="text-[11px] uppercase tracking-wider text-fg-muted mb-1">
|
||||
Negative
|
||||
</p>
|
||||
<p className="text-xs text-fg-muted leading-relaxed">
|
||||
{NEGATIVE_VIDEO_PROMPT}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
) : (
|
||||
|
||||
@@ -1,9 +1,11 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
import { ResultCard } from '../ResultCard';
|
||||
import { CopyButton } from '../CopyButton';
|
||||
import { RotateCcw } from "lucide-react";
|
||||
import { ResultCard } from "../ResultCard";
|
||||
import { CopyButton } from "../CopyButton";
|
||||
import { useAutoHeight } from "../../lib/useAutoHeight";
|
||||
|
||||
interface YouTubeCardProps {
|
||||
description: string;
|
||||
originalDescription: string;
|
||||
onChange: (next: string) => void;
|
||||
onRegenerate: () => void;
|
||||
regenerating: boolean;
|
||||
@@ -11,17 +13,13 @@ interface YouTubeCardProps {
|
||||
|
||||
export function YouTubeCard({
|
||||
description,
|
||||
originalDescription,
|
||||
onChange,
|
||||
onRegenerate,
|
||||
regenerating,
|
||||
}: YouTubeCardProps) {
|
||||
const ref = useRef<HTMLTextAreaElement | null>(null);
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
el.style.height = 'auto';
|
||||
el.style.height = `${Math.max(300, el.scrollHeight)}px`;
|
||||
}, [description]);
|
||||
const ref = useAutoHeight(description, 300);
|
||||
const dirty = description !== originalDescription;
|
||||
|
||||
return (
|
||||
<ResultCard
|
||||
@@ -30,7 +28,23 @@ export function YouTubeCard({
|
||||
title="YouTube Description"
|
||||
onRegenerate={onRegenerate}
|
||||
regenerating={regenerating}
|
||||
headerExtra={description ? <CopyButton value={description} label="Copy" /> : null}
|
||||
headerExtra={
|
||||
<>
|
||||
{dirty && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={() => onChange(originalDescription)}
|
||||
className="btn-ghost"
|
||||
aria-label="Revert description to last generated version"
|
||||
title="Revert to last generated"
|
||||
>
|
||||
<RotateCcw className="w-4 h-4" />
|
||||
<span>Revert</span>
|
||||
</button>
|
||||
)}
|
||||
{description && <CopyButton value={description} label="Copy" />}
|
||||
</>
|
||||
}
|
||||
>
|
||||
<textarea
|
||||
ref={ref}
|
||||
|
||||
@@ -0,0 +1,82 @@
|
||||
// Recent-generations history. Persists the last N successful generations in
|
||||
// localStorage so the user can revisit a song without re-running the model.
|
||||
|
||||
import type { InputValues } from '../components/InputPanel';
|
||||
import type { SongAssets } from './types';
|
||||
|
||||
const HISTORY_KEY = 'melodymuse-history';
|
||||
const MAX_HISTORY = 6;
|
||||
|
||||
export interface HistoryEntry {
|
||||
id: string;
|
||||
timestamp: number;
|
||||
input: InputValues;
|
||||
assets: SongAssets;
|
||||
}
|
||||
|
||||
function readAll(): HistoryEntry[] {
|
||||
if (typeof window === 'undefined') return [];
|
||||
try {
|
||||
const raw = window.localStorage.getItem(HISTORY_KEY);
|
||||
if (!raw) return [];
|
||||
const parsed = JSON.parse(raw);
|
||||
if (!Array.isArray(parsed)) return [];
|
||||
return parsed.filter(
|
||||
(e): e is HistoryEntry =>
|
||||
e &&
|
||||
typeof e === 'object' &&
|
||||
typeof e.id === 'string' &&
|
||||
typeof e.timestamp === 'number' &&
|
||||
typeof e.input === 'object' &&
|
||||
typeof e.assets === 'object',
|
||||
);
|
||||
} catch {
|
||||
return [];
|
||||
}
|
||||
}
|
||||
|
||||
function writeAll(entries: HistoryEntry[]): void {
|
||||
window.localStorage.setItem(HISTORY_KEY, JSON.stringify(entries));
|
||||
}
|
||||
|
||||
export function loadHistory(): HistoryEntry[] {
|
||||
return readAll();
|
||||
}
|
||||
|
||||
export function addToHistory(
|
||||
input: InputValues,
|
||||
assets: SongAssets,
|
||||
): HistoryEntry[] {
|
||||
const entry: HistoryEntry = {
|
||||
id: `${Date.now()}-${Math.random().toString(36).slice(2, 8)}`,
|
||||
timestamp: Date.now(),
|
||||
input,
|
||||
assets,
|
||||
};
|
||||
const next = [entry, ...readAll()].slice(0, MAX_HISTORY);
|
||||
writeAll(next);
|
||||
return next;
|
||||
}
|
||||
|
||||
export function removeFromHistory(id: string): HistoryEntry[] {
|
||||
const next = readAll().filter((e) => e.id !== id);
|
||||
writeAll(next);
|
||||
return next;
|
||||
}
|
||||
|
||||
export function clearHistory(): void {
|
||||
writeAll([]);
|
||||
}
|
||||
|
||||
export function formatRelative(timestamp: number, now: number = Date.now()): string {
|
||||
const diff = Math.max(0, now - timestamp);
|
||||
const s = Math.floor(diff / 1000);
|
||||
if (s < 60) return 'just now';
|
||||
const m = Math.floor(s / 60);
|
||||
if (m < 60) return `${m}m ago`;
|
||||
const h = Math.floor(m / 60);
|
||||
if (h < 24) return `${h}h ago`;
|
||||
const d = Math.floor(h / 24);
|
||||
if (d < 7) return `${d}d ago`;
|
||||
return new Date(timestamp).toLocaleDateString();
|
||||
}
|
||||
+65
-3
@@ -13,12 +13,13 @@ import { buildSystemPrompt, buildUserMessage } from "./prompts";
|
||||
import type {
|
||||
ConfigDisplay,
|
||||
GenerateRequest,
|
||||
InputValues,
|
||||
SongAssets,
|
||||
TestConnectionResult,
|
||||
} from "./types";
|
||||
|
||||
const STORAGE_KEY = "melodymuse-config";
|
||||
const DEFAULT_MODEL = "MiniMax-M3";
|
||||
export const DEFAULT_MODEL = "MiniMax-M3";
|
||||
|
||||
export interface StoredConfig {
|
||||
api_endpoint: string;
|
||||
@@ -97,6 +98,32 @@ export function setConfig(patch: Partial<StoredConfig>): ConfigDisplay {
|
||||
return getConfigDisplay();
|
||||
}
|
||||
|
||||
/**
|
||||
* Persist *only* the fields the caller passed that are non-empty. Unlike
|
||||
* `setConfig`, this overwrites the endpoint/model and replaces the API key if
|
||||
* a new one is provided. Used by /settings's Test Connection path when the
|
||||
* user is in the middle of editing and wants to try values before committing.
|
||||
*/
|
||||
export function previewConfig(patch: Partial<StoredConfig>): StoredConfig {
|
||||
const current = loadConfig();
|
||||
const candidate: StoredConfig = {
|
||||
api_endpoint:
|
||||
typeof patch.api_endpoint === "string" &&
|
||||
patch.api_endpoint.trim().length > 0
|
||||
? patch.api_endpoint.trim()
|
||||
: current.api_endpoint,
|
||||
api_key:
|
||||
typeof patch.api_key === "string" && patch.api_key.length > 0
|
||||
? patch.api_key
|
||||
: current.api_key,
|
||||
model_name:
|
||||
typeof patch.model_name === "string" && patch.model_name.trim().length > 0
|
||||
? patch.model_name.trim()
|
||||
: current.model_name,
|
||||
};
|
||||
return candidate;
|
||||
}
|
||||
|
||||
// ──────────────────────────────────────────────────────────────────────────────
|
||||
// JSON extraction + shape validation
|
||||
// ──────────────────────────────────────────────────────────────────────────────
|
||||
@@ -183,6 +210,7 @@ interface ProviderRequest {
|
||||
async function callProvider(
|
||||
body: ProviderRequest,
|
||||
cfg: StoredConfig,
|
||||
signal?: AbortSignal,
|
||||
): Promise<string> {
|
||||
const base = cfg.api_endpoint.replace(/\/+$/, "");
|
||||
const url = `${base}/chat/completions`;
|
||||
@@ -196,8 +224,13 @@ async function callProvider(
|
||||
Authorization: `Bearer ${cfg.api_key}`,
|
||||
},
|
||||
body: JSON.stringify(body),
|
||||
signal,
|
||||
});
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === "AbortError") {
|
||||
// Re-throw so the caller can recognize a cancellation distinctly.
|
||||
throw err;
|
||||
}
|
||||
// fetch() throws TypeError for network/CORS failures. Surface a helpful
|
||||
// message — the user is running the app standalone, so CORS is the most
|
||||
// likely culprit.
|
||||
@@ -242,15 +275,25 @@ type PartialRequest = Omit<GenerateRequest, "section"> & {
|
||||
section: Exclude<GenerateRequest["section"], "all">;
|
||||
};
|
||||
|
||||
export async function generateSong(req: AllRequest): Promise<SongAssets>;
|
||||
export interface GenerateOptions {
|
||||
signal?: AbortSignal;
|
||||
}
|
||||
|
||||
export async function generateSong(
|
||||
req: AllRequest,
|
||||
options?: GenerateOptions,
|
||||
): Promise<SongAssets>;
|
||||
export async function generateSong(
|
||||
req: PartialRequest,
|
||||
options?: GenerateOptions,
|
||||
): Promise<Partial<SongAssets>>;
|
||||
export async function generateSong(
|
||||
req: GenerateRequest,
|
||||
options?: GenerateOptions,
|
||||
): Promise<Partial<SongAssets>>;
|
||||
export async function generateSong(
|
||||
req: GenerateRequest,
|
||||
options?: GenerateOptions,
|
||||
): Promise<Partial<SongAssets>> {
|
||||
const cfg = loadConfig();
|
||||
if (!isConfigured(cfg)) {
|
||||
@@ -267,6 +310,7 @@ export async function generateSong(
|
||||
],
|
||||
},
|
||||
cfg,
|
||||
options?.signal,
|
||||
);
|
||||
|
||||
let parsed: unknown;
|
||||
@@ -291,8 +335,20 @@ export async function generateSong(
|
||||
return parsed as Partial<SongAssets>;
|
||||
}
|
||||
|
||||
/**
|
||||
* Test the connection using the *currently saved* configuration.
|
||||
*/
|
||||
export async function testConnection(): Promise<TestConnectionResult> {
|
||||
const cfg = loadConfig();
|
||||
return testConnectionWithConfig(loadConfig());
|
||||
}
|
||||
|
||||
/**
|
||||
* Test the connection using an arbitrary (in-memory) configuration. Used by
|
||||
* the Settings page to try out a candidate key/endpoint before persisting it.
|
||||
*/
|
||||
export async function testConnectionWithConfig(
|
||||
cfg: StoredConfig,
|
||||
): Promise<TestConnectionResult> {
|
||||
if (!isConfigured(cfg)) {
|
||||
return {
|
||||
success: false,
|
||||
@@ -311,9 +367,15 @@ export async function testConnection(): Promise<TestConnectionResult> {
|
||||
);
|
||||
return { success: true, message: "Connection successful" };
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === "AbortError") {
|
||||
return { success: false, message: "Cancelled" };
|
||||
}
|
||||
return {
|
||||
success: false,
|
||||
message: err instanceof Error ? err.message : "Connection test failed",
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
// Re-export so consumers can import everything from one place.
|
||||
export type { InputValues };
|
||||
|
||||
+38
-25
@@ -1,27 +1,27 @@
|
||||
// Domain types shared across the app. These mirror the JSON shape produced by
|
||||
// the `generate-song` edge function.
|
||||
// the LLM module.
|
||||
|
||||
export type Language =
|
||||
| 'English'
|
||||
| 'Deutsch'
|
||||
| 'Español'
|
||||
| 'Français'
|
||||
| 'Italiano'
|
||||
| 'Português'
|
||||
| 'Polski'
|
||||
| 'Other';
|
||||
| "English"
|
||||
| "Deutsch"
|
||||
| "Español"
|
||||
| "Français"
|
||||
| "Italiano"
|
||||
| "Português"
|
||||
| "Polski"
|
||||
| "Other";
|
||||
|
||||
export type Vocals = 'vocals' | 'instrumental';
|
||||
export type Vocals = "vocals" | "instrumental";
|
||||
|
||||
export type GenerationSection =
|
||||
| 'all'
|
||||
| 'lyrics'
|
||||
| 'style'
|
||||
| 'titles'
|
||||
| 'video_prompts'
|
||||
| 'youtube_description';
|
||||
| "all"
|
||||
| "lyrics"
|
||||
| "style"
|
||||
| "titles"
|
||||
| "video_prompts"
|
||||
| "youtube_description";
|
||||
|
||||
export type VideoPromptType = 'Abstract' | 'Cinematic' | 'Hybrid';
|
||||
export type VideoPromptType = "Abstract" | "Cinematic" | "Hybrid";
|
||||
|
||||
export interface VideoPrompt {
|
||||
type: VideoPromptType;
|
||||
@@ -40,7 +40,7 @@ export interface SongAssets {
|
||||
|
||||
export interface GenerateRequest {
|
||||
input: string;
|
||||
language: string; // 'English' or free-text from "Other"
|
||||
language: string; // 'English' or free-text from "Other"
|
||||
mood?: string;
|
||||
vocals: Vocals;
|
||||
section: GenerationSection;
|
||||
@@ -53,16 +53,29 @@ export interface ConfigDisplay {
|
||||
api_key_set: boolean;
|
||||
}
|
||||
|
||||
export interface SaveConfigPayload {
|
||||
api_endpoint: string;
|
||||
api_key: string; // empty string => keep existing
|
||||
model_name: string;
|
||||
}
|
||||
|
||||
export interface TestConnectionResult {
|
||||
success: boolean;
|
||||
message: string;
|
||||
}
|
||||
|
||||
export interface InputValues {
|
||||
idea: string;
|
||||
language: Language | string;
|
||||
customLanguage: string;
|
||||
mood: string;
|
||||
vocals: Vocals;
|
||||
}
|
||||
|
||||
export const NEGATIVE_VIDEO_PROMPT =
|
||||
'text, watermark, logo, flash, abrupt cuts, camera shake, faces, hands, distortion, blur';
|
||||
"text, watermark, logo, flash, abrupt cuts, camera shake, faces, hands, distortion, blur";
|
||||
|
||||
// Human-readable labels for each regenerable section — used by toasts and the
|
||||
// history panel. Keep in sync with `GenerationSection`.
|
||||
export const SECTION_LABELS: Record<GenerationSection, string> = {
|
||||
all: "everything",
|
||||
titles: "titles",
|
||||
lyrics: "lyrics",
|
||||
style: "style",
|
||||
video_prompts: "video prompts",
|
||||
youtube_description: "description",
|
||||
};
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
import { useEffect, useRef } from 'react';
|
||||
|
||||
// Auto-grow a textarea to fit its content, with a configurable minimum height.
|
||||
// Use this anywhere a free-form text field should grow with the user's input.
|
||||
export function useAutoHeight(
|
||||
value: string,
|
||||
minHeight = 0,
|
||||
) {
|
||||
const ref = useRef<HTMLTextAreaElement | null>(null);
|
||||
useEffect(() => {
|
||||
const el = ref.current;
|
||||
if (!el) return;
|
||||
el.style.height = 'auto';
|
||||
el.style.height = `${Math.max(minHeight, el.scrollHeight)}px`;
|
||||
}, [value, minHeight]);
|
||||
return ref;
|
||||
}
|
||||
@@ -0,0 +1,29 @@
|
||||
import { useEffect, useState } from 'react';
|
||||
|
||||
// Returns the number of seconds elapsed since `active` became true. The returned
|
||||
// value ticks every 250 ms while active, freezes when `active` is false.
|
||||
export function useElapsed(active: boolean): number {
|
||||
const [seconds, setSeconds] = useState(0);
|
||||
|
||||
useEffect(() => {
|
||||
if (!active) {
|
||||
setSeconds(0);
|
||||
return;
|
||||
}
|
||||
const start = Date.now();
|
||||
setSeconds(0);
|
||||
const id = window.setInterval(() => {
|
||||
setSeconds(Math.floor((Date.now() - start) / 1000));
|
||||
}, 250);
|
||||
return () => window.clearInterval(id);
|
||||
}, [active]);
|
||||
|
||||
return seconds;
|
||||
}
|
||||
|
||||
export function formatElapsed(s: number): string {
|
||||
if (s < 60) return `${s}s`;
|
||||
const m = Math.floor(s / 60);
|
||||
const r = s % 60;
|
||||
return `${m}m ${r.toString().padStart(2, '0')}s`;
|
||||
}
|
||||
+159
-82
@@ -1,6 +1,6 @@
|
||||
import { useCallback, useEffect, useMemo, useState } from "react";
|
||||
import { Link } from "react-router-dom";
|
||||
import { InputPanel, type InputValues } from "../components/InputPanel";
|
||||
import { useCallback, useEffect, useMemo, useRef, useState } from "react";
|
||||
import { InputPanel } from "../components/InputPanel";
|
||||
import type { InputValues } from "../components/InputPanel";
|
||||
import {
|
||||
ResultsPanel,
|
||||
type RegeneratingMap,
|
||||
@@ -9,10 +9,17 @@ import {
|
||||
import { StickyZipBar } from "../components/StickyZipBar";
|
||||
import { ConfigBanner } from "../components/ConfigBanner";
|
||||
import { ThemeToggle } from "../components/ThemeToggle";
|
||||
import { HistoryPanel } from "../components/HistoryPanel";
|
||||
import { Footer } from "../components/Footer";
|
||||
import { useToast } from "../lib/toast";
|
||||
import { generateSong, getConfigDisplay } from "../lib/llm";
|
||||
import { buildSongZip, downloadBlob } from "../lib/zip";
|
||||
import type { SongAssets, VideoPrompt } from "../lib/types";
|
||||
import { addToHistory, type HistoryEntry } from "../lib/history";
|
||||
import { buildSongZip, downloadBlob, sanitizeFilename } from "../lib/zip";
|
||||
import {
|
||||
SECTION_LABELS,
|
||||
type SongAssets,
|
||||
type VideoPrompt,
|
||||
} from "../lib/types";
|
||||
|
||||
const DEFAULT_INPUT: InputValues = {
|
||||
idea: "",
|
||||
@@ -28,16 +35,32 @@ function resolveLanguage(v: InputValues): string {
|
||||
: v.language;
|
||||
}
|
||||
|
||||
// `true` when any in-flight generation is running, false otherwise.
|
||||
function isAnyBusy(loading: boolean, regenerating: RegeneratingMap): boolean {
|
||||
if (loading) return true;
|
||||
for (const v of Object.values(regenerating)) if (v) return true;
|
||||
return false;
|
||||
}
|
||||
|
||||
export function HomePage() {
|
||||
const toast = useToast();
|
||||
|
||||
const [input, setInput] = useState<InputValues>(DEFAULT_INPUT);
|
||||
const [assets, setAssets] = useState<SongAssets | null>(null);
|
||||
// The "last generated" snapshot. The cards compare their current editable
|
||||
// values against these to decide whether to show the Revert button.
|
||||
const [originalAssets, setOriginalAssets] = useState<SongAssets | null>(null);
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [regenerating, setRegenerating] = useState<RegeneratingMap>({});
|
||||
const [selectedTitleIndex, setSelectedTitleIndex] = useState(0);
|
||||
const [apiKeySet, setApiKeySet] = useState<boolean>(false);
|
||||
|
||||
// AbortController for the *current* network request. Refs are used so the
|
||||
// cancel handler always sees the latest value without re-binding.
|
||||
const abortRef = useRef<AbortController | null>(null);
|
||||
|
||||
const anyRegenerating = isAnyBusy(loading, regenerating);
|
||||
|
||||
// Check localStorage on mount: if the API key isn't set, show a banner
|
||||
// pointing the user at Settings.
|
||||
useEffect(() => {
|
||||
@@ -45,6 +68,9 @@ export function HomePage() {
|
||||
setApiKeySet(cfg.api_key_set);
|
||||
}, []);
|
||||
|
||||
// Clean up any in-flight request on unmount.
|
||||
useEffect(() => () => abortRef.current?.abort(), []);
|
||||
|
||||
const selectedTitle = useMemo(() => {
|
||||
if (!assets || assets.titles.length === 0) return undefined;
|
||||
return assets.titles[
|
||||
@@ -52,94 +78,129 @@ export function HomePage() {
|
||||
];
|
||||
}, [assets, selectedTitleIndex]);
|
||||
|
||||
const cancel = useCallback(() => {
|
||||
abortRef.current?.abort();
|
||||
abortRef.current = null;
|
||||
}, []);
|
||||
|
||||
const runGeneration = useCallback(
|
||||
async (
|
||||
buildRequest: (
|
||||
signal: AbortSignal,
|
||||
) => Promise<GenerateCall> | GenerateCall,
|
||||
onSuccess: (result: Partial<SongAssets>) => void,
|
||||
busySetter: (b: boolean) => void,
|
||||
successMsg: string,
|
||||
) => {
|
||||
// Cancel any in-flight request before starting a new one.
|
||||
abortRef.current?.abort();
|
||||
const ctrl = new AbortController();
|
||||
abortRef.current = ctrl;
|
||||
|
||||
busySetter(true);
|
||||
try {
|
||||
const req = await buildRequest(ctrl.signal);
|
||||
const result = await generateSong(req, { signal: ctrl.signal });
|
||||
onSuccess(result);
|
||||
toast.success(successMsg);
|
||||
} catch (err) {
|
||||
if (err instanceof DOMException && err.name === "AbortError") {
|
||||
toast.info("Generation cancelled");
|
||||
} else {
|
||||
toast.error(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "Generation failed — please try again",
|
||||
);
|
||||
}
|
||||
} finally {
|
||||
busySetter(false);
|
||||
if (abortRef.current === ctrl) abortRef.current = null;
|
||||
}
|
||||
},
|
||||
[toast],
|
||||
);
|
||||
|
||||
const handleGenerate = useCallback(async () => {
|
||||
if (!input.idea.trim()) return;
|
||||
setLoading(true);
|
||||
setAssets(null);
|
||||
try {
|
||||
const result = await generateSong({
|
||||
await runGeneration(
|
||||
() => ({
|
||||
input: input.idea.trim(),
|
||||
language: resolveLanguage(input),
|
||||
mood: input.mood.trim() || undefined,
|
||||
vocals: input.vocals,
|
||||
section: "all",
|
||||
});
|
||||
setAssets(result);
|
||||
setSelectedTitleIndex(0);
|
||||
toast.success("Song assets generated");
|
||||
} catch (err) {
|
||||
toast.error(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "Generation failed — please try again",
|
||||
);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
}, [input, toast]);
|
||||
section: "all" as const,
|
||||
}),
|
||||
(result) => {
|
||||
const next = result as SongAssets;
|
||||
setAssets(next);
|
||||
setOriginalAssets(next);
|
||||
setSelectedTitleIndex(0);
|
||||
// Persist to history. Don't `await` — the user shouldn't wait.
|
||||
addToHistory(input, next);
|
||||
},
|
||||
setLoading,
|
||||
"Song assets generated",
|
||||
);
|
||||
}, [input, runGeneration]);
|
||||
|
||||
const handleRegenerateAll = useCallback(async () => {
|
||||
if (!input.idea.trim()) return;
|
||||
setLoading(true);
|
||||
setRegenerating((m) => ({ ...m, all: true }));
|
||||
try {
|
||||
const result = await generateSong({
|
||||
await runGeneration(
|
||||
() => ({
|
||||
input: input.idea.trim(),
|
||||
language: resolveLanguage(input),
|
||||
mood: input.mood.trim() || undefined,
|
||||
vocals: input.vocals,
|
||||
section: "all",
|
||||
});
|
||||
setAssets(result);
|
||||
setSelectedTitleIndex(0);
|
||||
toast.success("Regenerated all sections");
|
||||
} catch (err) {
|
||||
toast.error(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "Generation failed — please try again",
|
||||
);
|
||||
} finally {
|
||||
setLoading(false);
|
||||
setRegenerating((m) => ({ ...m, all: false }));
|
||||
}
|
||||
}, [input, toast]);
|
||||
section: "all" as const,
|
||||
}),
|
||||
(result) => {
|
||||
const next = result as SongAssets;
|
||||
setAssets(next);
|
||||
setOriginalAssets(next);
|
||||
setSelectedTitleIndex(0);
|
||||
addToHistory(input, next);
|
||||
},
|
||||
(b) => {
|
||||
setLoading(b);
|
||||
setRegenerating((m) => ({ ...m, all: b }));
|
||||
},
|
||||
"Regenerated all sections",
|
||||
);
|
||||
}, [input, runGeneration]);
|
||||
|
||||
const handleRegenerateSection = useCallback(
|
||||
async (section: SectionKey) => {
|
||||
if (!input.idea.trim() || !assets) return;
|
||||
setRegenerating((m) => ({ ...m, [section]: true }));
|
||||
try {
|
||||
const result = await generateSong({
|
||||
await runGeneration(
|
||||
() => ({
|
||||
input: input.idea.trim(),
|
||||
language: resolveLanguage(input),
|
||||
mood: input.mood.trim() || undefined,
|
||||
vocals: input.vocals,
|
||||
section,
|
||||
// Pass the rest of the song as context so the model can stay consistent.
|
||||
context: assets,
|
||||
});
|
||||
setAssets({ ...assets, ...result });
|
||||
toast.success(`Regenerated ${humanizeSection(section)}`);
|
||||
} catch (err) {
|
||||
toast.error(
|
||||
err instanceof Error
|
||||
? err.message
|
||||
: "Generation failed — please try again",
|
||||
);
|
||||
} finally {
|
||||
setRegenerating((m) => ({ ...m, [section]: false }));
|
||||
}
|
||||
}),
|
||||
(result) => {
|
||||
// Merge partial into current assets, and update the original snapshot
|
||||
// for the keys that the model returned. Any keys the user has
|
||||
// hand-edited that the model *didn't* return stay as-is.
|
||||
const merged: SongAssets = { ...assets, ...result };
|
||||
setAssets(merged);
|
||||
setOriginalAssets((prev) => (prev ? { ...prev, ...result } : merged));
|
||||
},
|
||||
(b) => setRegenerating((m) => ({ ...m, [section]: b })),
|
||||
`Regenerated ${SECTION_LABELS[section]}`,
|
||||
);
|
||||
},
|
||||
[input, assets, toast],
|
||||
[input, assets, runGeneration],
|
||||
);
|
||||
|
||||
const handleDownload = useCallback(async () => {
|
||||
if (!assets || !selectedTitle) return;
|
||||
try {
|
||||
const blob = await buildSongZip(assets, selectedTitle);
|
||||
const filename = `${selectedTitle.replace(/\s+/g, "_").replace(/[^a-zA-Z0-9_-]/g, "")}.zip`;
|
||||
downloadBlob(blob, filename);
|
||||
downloadBlob(blob, `${sanitizeFilename(selectedTitle)}.zip`);
|
||||
} catch {
|
||||
toast.error("Could not generate ZIP — please try again");
|
||||
}
|
||||
@@ -166,16 +227,23 @@ export function HomePage() {
|
||||
[],
|
||||
);
|
||||
|
||||
// Restore a previous generation from history.
|
||||
const handleLoadHistory = useCallback(
|
||||
(entry: HistoryEntry) => {
|
||||
setInput(entry.input);
|
||||
setAssets(entry.assets);
|
||||
setOriginalAssets(entry.assets);
|
||||
setSelectedTitleIndex(0);
|
||||
toast.info(`Loaded "${truncate(entry.input.idea, 60)}"`);
|
||||
},
|
||||
[toast],
|
||||
);
|
||||
|
||||
return (
|
||||
<div className="min-h-screen pb-32">
|
||||
<header className="sticky top-0 z-20 bg-bg/70 backdrop-blur border-b border-border">
|
||||
<div className="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-14 flex items-center justify-between">
|
||||
<Link
|
||||
to="/"
|
||||
className="text-sm text-fg-muted hover:text-fg transition-colors"
|
||||
>
|
||||
MelodyMuse
|
||||
</Link>
|
||||
<span className="text-sm text-fg-muted">MelodyMuse</span>
|
||||
<ThemeToggle />
|
||||
</div>
|
||||
</header>
|
||||
@@ -196,12 +264,23 @@ export function HomePage() {
|
||||
onChange={setInput}
|
||||
onSubmit={handleGenerate}
|
||||
loading={loading}
|
||||
cancelButton={
|
||||
<button
|
||||
type="button"
|
||||
onClick={cancel}
|
||||
className="btn-secondary w-full"
|
||||
>
|
||||
Cancel generation
|
||||
</button>
|
||||
}
|
||||
/>
|
||||
<HistoryPanel onLoad={handleLoadHistory} />
|
||||
</div>
|
||||
|
||||
<div>
|
||||
<ResultsPanel
|
||||
assets={assets}
|
||||
originalAssets={originalAssets}
|
||||
loading={loading}
|
||||
selectedTitleIndex={selectedTitleIndex}
|
||||
onSelectTitle={setSelectedTitleIndex}
|
||||
@@ -209,6 +288,8 @@ export function HomePage() {
|
||||
onChangeVideoPrompt={handleVideoPromptChange}
|
||||
onRegenerateAll={handleRegenerateAll}
|
||||
onRegenerateSection={handleRegenerateSection}
|
||||
onCancel={cancel}
|
||||
anyRegenerating={anyRegenerating}
|
||||
regenerating={regenerating}
|
||||
/>
|
||||
</div>
|
||||
@@ -222,21 +303,17 @@ export function HomePage() {
|
||||
onDownload={handleDownload}
|
||||
/>
|
||||
)}
|
||||
|
||||
<Footer />
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
function humanizeSection(s: SectionKey): string {
|
||||
switch (s) {
|
||||
case "titles":
|
||||
return "titles";
|
||||
case "lyrics":
|
||||
return "lyrics";
|
||||
case "style":
|
||||
return "style";
|
||||
case "video_prompts":
|
||||
return "video prompts";
|
||||
case "youtube_description":
|
||||
return "description";
|
||||
}
|
||||
function truncate(s: string, n: number): string {
|
||||
const t = s.trim();
|
||||
if (t.length <= n) return t || "previous generation";
|
||||
return t.slice(0, n - 1) + "…";
|
||||
}
|
||||
|
||||
// Internal alias so the `runGeneration` helper stays readable.
|
||||
type GenerateCall = Parameters<typeof generateSong>[0];
|
||||
|
||||
+56
-19
@@ -1,14 +1,30 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Link, useNavigate } from "react-router-dom";
|
||||
import { ArrowLeft, Eye, EyeOff, Loader2, Save, Plug } from "lucide-react";
|
||||
import {
|
||||
ArrowLeft,
|
||||
Eye,
|
||||
EyeOff,
|
||||
Loader2,
|
||||
Save,
|
||||
Plug,
|
||||
Trash2,
|
||||
} from "lucide-react";
|
||||
import { ThemeToggle } from "../components/ThemeToggle";
|
||||
import { useToast } from "../lib/toast";
|
||||
import { getConfigDisplay, setConfig, testConnection } from "../lib/llm";
|
||||
import {
|
||||
getConfigDisplay,
|
||||
setConfig,
|
||||
previewConfig,
|
||||
testConnectionWithConfig,
|
||||
saveConfig,
|
||||
loadConfig,
|
||||
DEFAULT_MODEL,
|
||||
} from "../lib/llm";
|
||||
|
||||
const DEFAULTS = {
|
||||
api_endpoint: "",
|
||||
api_key: "",
|
||||
model_name: "MiniMax-M3",
|
||||
model_name: DEFAULT_MODEL,
|
||||
};
|
||||
|
||||
export function SettingsPage() {
|
||||
@@ -34,7 +50,7 @@ export function SettingsPage() {
|
||||
setLoading(false);
|
||||
}, []);
|
||||
|
||||
const onSave = async (e: React.FormEvent) => {
|
||||
const onSave = (e: React.FormEvent) => {
|
||||
e.preventDefault();
|
||||
setSaving(true);
|
||||
try {
|
||||
@@ -55,27 +71,28 @@ export function SettingsPage() {
|
||||
}
|
||||
};
|
||||
|
||||
// Test using *in-memory* form values — don't persist until the user clicks
|
||||
// Save. An empty API key field still falls back to the previously saved key,
|
||||
// matching the behaviour of Save.
|
||||
const onTest = async () => {
|
||||
setTesting(true);
|
||||
// Persist current form values first so the test reflects them. setConfig
|
||||
// preserves the existing key when the field is empty, so this is safe.
|
||||
try {
|
||||
const result = setConfig({
|
||||
api_endpoint: endpoint.trim(),
|
||||
api_key: apiKey,
|
||||
model_name: model.trim(),
|
||||
});
|
||||
setApiKey("");
|
||||
setApiKeySet(result.api_key_set);
|
||||
} catch (err) {
|
||||
const candidate = previewConfig({
|
||||
api_endpoint: endpoint.trim(),
|
||||
api_key: apiKey,
|
||||
model_name: model.trim(),
|
||||
});
|
||||
|
||||
if (
|
||||
!candidate.api_endpoint ||
|
||||
!candidate.api_key ||
|
||||
!candidate.model_name
|
||||
) {
|
||||
setTesting(false);
|
||||
toast.error(
|
||||
err instanceof Error ? err.message : "Failed to save configuration",
|
||||
);
|
||||
toast.error("❌ Fill in endpoint, key, and model before testing");
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await testConnection();
|
||||
const result = await testConnectionWithConfig(candidate);
|
||||
if (result.success) {
|
||||
toast.success(`✅ ${result.message}`);
|
||||
} else {
|
||||
@@ -84,6 +101,16 @@ export function SettingsPage() {
|
||||
setTesting(false);
|
||||
};
|
||||
|
||||
const onClearKey = () => {
|
||||
if (!apiKeySet) return;
|
||||
if (!window.confirm("Clear the saved API key from this browser?")) return;
|
||||
const current = loadConfig();
|
||||
saveConfig({ ...current, api_key: "" });
|
||||
setApiKeySet(false);
|
||||
setApiKey("");
|
||||
toast.info("Saved API key cleared");
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="min-h-screen">
|
||||
<header className="sticky top-0 z-20 bg-bg/70 backdrop-blur border-b border-border">
|
||||
@@ -175,6 +202,16 @@ export function SettingsPage() {
|
||||
A key is currently saved.
|
||||
</p>
|
||||
)}
|
||||
{apiKeySet && (
|
||||
<button
|
||||
type="button"
|
||||
onClick={onClearKey}
|
||||
className="mt-2 inline-flex items-center gap-1 text-xs text-fg-muted hover:text-rose-300 transition-colors"
|
||||
>
|
||||
<Trash2 className="w-3.5 h-3.5" />
|
||||
Clear saved key
|
||||
</button>
|
||||
)}
|
||||
</div>
|
||||
|
||||
<div>
|
||||
|
||||
Reference in New Issue
Block a user