Create pages/index.tsx

pages/index.tsx

@@ -0,0 +1,317 @@
+import { useState, useEffect } from "react";
+import type { VoiceType } from "../lib/types";
+
+interface LibraryItem {
+  id: string;
+  title: string;
+  duration: number;
+  voice: VoiceType;
+  blobUrl?: string;
+}
+
+export default function Home() {
+  const [stylePrompt, setStylePrompt] = useState("");
+  const [lyricPrompt, setLyricPrompt] = useState("");
+  const [voice, setVoice] = useState<VoiceType>("Random");
+  const [durationSeconds, setDurationSeconds] = useState<number | undefined>(undefined);
+  const [isGenerating, setIsGenerating] = useState(false);
+  const [result, setResult] = useState<any>(null);
+  const [library, setLibrary] = useState<LibraryItem[]>([]);
+  const [selectedTrackId, setSelectedTrackId] = useState<string | null>(null);
+  const [editOperation, setEditOperation] = useState<"cover" | "extend" | "swap_vocal" | "crop">("cover");
+  const [editResult, setEditResult] = useState<any>(null);
+
+  useEffect(() => {
+    const loadLibrary = async () => {
+      try {
+        const res = await fetch("/api/library");
+        const json = await res.json();
+        if (Array.isArray(json.items)) {
+          setLibrary(json.items);
+        }
+      } catch {
+        // silent library load failure
+      }
+    };
+    loadLibrary();
+  }, []);
+
+  const handleGenerate = async () => {
+    setIsGenerating(true);
+    setResult(null);
+
+    const duration =
+      typeof durationSeconds === "number"
+        ? durationSeconds
+        : undefined; // randomizer handled server-side
+
+    try {
+      // ensure this never fails by guarding inputs and catching errors
+      let t = await fetch("/api/generate", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify({
+          stylePrompt,
+          lyricPrompt: lyricPrompt || undefined,
+          voice,
+          durationSeconds: duration,
+        }),
+      });
+
+      if (!t.ok) {
+        const err = await t.json().catch(() => ({}));
+        setResult({ error: err.error || "Generation failed", details: err.details });
+      } else {
+        const json = await t.json();
+        setResult(json);
+
+        const id = crypto.randomUUID();
+        const item: LibraryItem = {
+          id,
+          title: stylePrompt || "Untitled",
+          duration: json.duration,
+          voice,
+        };
+
+        setLibrary((prev) => [...prev, item]);
+
+        try {
+          await fetch("/api/library", {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+              Accept: "application/json",
+            },
+            body: JSON.stringify(item),
+          });
+        } catch {
+          // library persistence failure is non-fatal
+        }
+      }
+    } catch (e: any) {
+      setResult({
+        error: "Unexpected client error during generation",
+        details: e?.message ?? "Unknown error",
+      });
+    } finally {
+      setIsGenerating(false);
+    }
+  };
+
+  const handleEdit = async () => {
+    if (!selectedTrackId) return;
+
+    try {
+      const res = await fetch("/api/edit", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify({
+          operation: editOperation,
+          trackId: selectedTrackId,
+          params: {},
+        }),
+      });
+
+      const json = await res.json();
+      setEditResult(json);
+    } catch (e: any) {
+      setEditResult({
+        error: "Unexpected client error during editing",
+        details: e?.message ?? "Unknown error",
+      });
+    }
+  };
+
+  const handleImport = async (event: React.ChangeEvent<HTMLInputElement>) => {
+    const file = event.target.files?.[0];
+    if (!file) return;
+
+    const ext = file.name.split(".").pop()?.toLowerCase();
+    if (!["mp3", "wav"].includes(ext || "")) {
+      alert("Only MP3/WAV files are supported.");
+      return;
+    }
+
+    const blobUrl = URL.createObjectURL(file);
+    const id = crypto.randomUUID();
+
+    const item: LibraryItem = {
+      id,
+      title: file.name,
+      duration: 0,
+      voice: "Random",
+      blobUrl,
+    };
+
+    setLibrary((prev) => [...prev, item]);
+
+    try {
+      await fetch("/api/library", {
+        method: "POST",
+        headers: {
+          "Content-Type": "application/json",
+          Accept: "application/json",
+        },
+        body: JSON.stringify(item),
+      });
+    } catch {
+      // non-fatal
+    }
+  };
+
+  const handleExport = async (item: LibraryItem) => {
+    if (!item.blobUrl) {
+      alert("No audio blob available for export.");
+      return;
+    }
+    const a = document.createElement("a");
+    a.href = item.blobUrl;
+    a.download = `${item.title || "track"}.wav`;
+    a.click();
+  };
+
+  return (
+    <main style={{ padding: 24, fontFamily: "system-ui" }}>
+      <h1>ACE-Step Riffusion Studio</h1>
+
+      <section style={{ marginBottom: 24 }}>
+        <h2>Generate song</h2>
+        <div>
+          <label>
+            Style prompt:
+            <textarea
+              value={stylePrompt}
+              onChange={(e) => setStylePrompt(e.target.value)}
+              rows={3}
+              style={{ width: "100%" }}
+            />
+          </label>
+        </div>
+        <div>
+          <label>
+            Lyrics (optional):
+            <textarea
+              value={lyricPrompt}
+              onChange={(e) => setLyricPrompt(e.target.value)}
+              rows={3}
+              style={{ width: "100%" }}
+            />
+          </label>
+        </div>
+        <div>
+          <label>
+            Voice:
+            <select value={voice} onChange={(e) => setVoice(e.target.value as VoiceType)}>
+              <option value="Random">Random</option>
+              <option value="Male">Male</option>
+              <option value="Female">Female</option>
+            </select>
+          </label>
+        </div>
+        <div>
+          <label>
+            Duration (30–240s, leave empty for random):
+            <input
+              type="number"
+              min={30}
+              max={240}
+              value={durationSeconds ?? ""}
+              onChange={(e) =>
+                setDurationSeconds(
+                  e.target.value ? Math.min(240, Math.max(30, Number(e.target.value))) : undefined
+                )
+              }
+            />
+          </label>
+        </div>
+        <button onClick={handleGenerate} disabled={isGenerating || !stylePrompt}>
+          {isGenerating ? "Generating..." : "Generate"}
+        </button>
+        {result && (
+          <pre style={{ marginTop: 12, background: "#111", color: "#eee", padding: 12 }}>
+            {JSON.stringify(result, null, 2)}
+          </pre>
+        )}
+      </section>
+
+      <section style={{ marginBottom: 24 }}>
+        <h2>Editing suite (DreamVAE)</h2>
+        <div>
+          <label>
+            Operation:
+            <select
+              value={editOperation}
+              onChange={(e) =>
+                setEditOperation(e.target.value as "cover" | "extend" | "swap_vocal" | "crop")
+              }
+            >
+              <option value="cover">Musical cover maker</option>
+              <option value="extend">Song extender</option>
+              <option value="swap_vocal">Vocal swapper</option>
+              <option value="crop">Cropping mechanism</option>
+            </select>
+          </label>
+        </div>
+        <div>
+          <label>
+            Track:
+            <select
+              value={selectedTrackId ?? ""}
+              onChange={(e) => setSelectedTrackId(e.target.value || null)}
+            >
+              <option value="">Select track</option>
+              {library.map((item) => (
+                <option key={item.id} value={item.id}>
+                  {item.title}
+                </option>
+              ))}
+            </select>
+          </label>
+        </div>
+        <button onClick={handleEdit} disabled={!selectedTrackId}>
+          Apply edit
+        </button>
+        {editResult && (
+          <pre style={{ marginTop: 12, background: "#111", color: "#eee", padding: 12 }}>
+            {JSON.stringify(editResult, null, 2)}
+          </pre>
+        )}
+      </section>
+
+      <section style={{ marginBottom: 24 }}>
+        <h2>Import / Export</h2>
+        <div>
+          <label>
+            Import MP3/WAV:
+            <input type="file" accept=".mp3,.wav" onChange={handleImport} />
+          </label>
+        </div>
+        <div style={{ marginTop: 12 }}>
+          <h3>Library</h3>
+          {library.length === 0 && <p>No tracks yet.</p>}
+          <ul>
+            {library.map((item) => (
+              <li key={item.id} style={{ marginBottom: 8 }}>
+                <strong>{item.title}</strong> ({item.voice}, {item.duration || 0}s)
+                {item.blobUrl && (
+                  <>
+                    {" "}
+                    <button onClick={() => handleExport(item)}>Export</button>
+                    {" "}
+                    <audio controls src={item.blobUrl} />
+                  </>
+                )}
+              </li>
+            ))}
+          </ul>
+        </div>
+      </section>
+    </main>
+  );
+}