Delete index.tsx

index.tsx

@@ -1,314 +0,0 @@
-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>
-  );
-}