migrate to root dir

2025-08-08 19:26:21 +02:00
parent cf8219691b
commit 8720500442
41 changed files with 2478 additions and 4440 deletions
--- a/app/page.tsx
+++ b/app/page.tsx
@@ -0,0 +1,139 @@
+"use client";
+
+import { useState } from "react";
+
+type PipelineResult = {
+  videoPath: string;
+  finalAudioPath: string;
+  imageFiles: string[];
+};
+
+type ApiSuccess = { ok: true; result: PipelineResult };
+
+type ApiError = { ok: false; error?: string };
+
+type ApiResponse = ApiSuccess | ApiError;
+
+function isApiResponse(value: unknown): value is ApiResponse {
+  if (typeof value !== "object" || value === null) return false;
+  const v = value as Record<string, unknown>;
+  if (v.ok === true) {
+    const r = v.result as Record<string, unknown> | undefined;
+    return (
+      typeof r === "object" &&
+      r !== null &&
+      typeof r.videoPath === "string" &&
+      typeof r.finalAudioPath === "string" &&
+      Array.isArray(r.imageFiles)
+    );
+  }
+  return v.ok === false;
+}
+
+export default function Home() {
+  const [storyName, setStoryName] = useState("sample_story");
+  const [concurrency, setConcurrency] = useState(3);
+  const [force, setForce] = useState(false);
+  const [skipUpload, setSkipUpload] = useState(true);
+  const [loading, setLoading] = useState(false);
+  const [result, setResult] = useState<PipelineResult | null>(null);
+  const [error, setError] = useState<string | null>(null);
+
+  async function runPipeline(e: React.FormEvent) {
+    e.preventDefault();
+    setLoading(true);
+    setError(null);
+    setResult(null);
+    try {
+      const res = await fetch("/api/run", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify({ storyName, concurrency, force, skipUpload }),
+      });
+      const data: unknown = await res.json();
+      if (!res.ok || !isApiResponse(data) || data.ok !== true) {
+        const msg = isApiResponse(data) && data.ok === false ? data.error : undefined;
+        throw new Error(msg || `Request failed with status ${res.status}`);
+      }
+      setResult(data.result);
+    } catch (err: unknown) {
+      const message = err instanceof Error ? err.message : String(err);
+      setError(message);
+    } finally {
+      setLoading(false);
+    }
+  }
+
+  return (
+    <div className="min-h-screen w-full flex items-center justify-center p-8">
+      <div className="w-full max-w-2xl space-y-6">
+        <h1 className="text-2xl font-semibold">Audiobooks Hustle – Run Pipeline</h1>
+        <form onSubmit={runPipeline} className="space-y-4">
+          <div>
+            <label className="block text-sm font-medium mb-1">Story name</label>
+            <input
+              className="w-full rounded-md border px-3 py-2"
+              placeholder="sample_story"
+              value={storyName}
+              onChange={(e) => setStoryName(e.target.value)}
+              required
+            />
+            <p className="text-xs text-muted-foreground mt-1">
+              Must match a folder in the repo root at <code>stories/&lt;storyName&gt;</code> containing
+              <code>source.txt</code> and <code>config.yaml</code>.
+            </p>
+          </div>
+          <div className="grid grid-cols-2 gap-4">
+            <div>
+              <label className="block text-sm font-medium mb-1">Concurrency</label>
+              <input
+                type="number"
+                min={1}
+                max={10}
+                className="w-full rounded-md border px-3 py-2"
+                value={concurrency}
+                onChange={(e) => setConcurrency(parseInt(e.target.value || "3", 10))}
+              />
+            </div>
+            <div className="flex items-center gap-4">
+              <label className="inline-flex items-center gap-2">
+                <input type="checkbox" checked={force} onChange={(e) => setForce(e.target.checked)} />
+                <span>Force regenerate</span>
+              </label>
+              <label className="inline-flex items-center gap-2">
+                <input type="checkbox" checked={skipUpload} onChange={(e) => setSkipUpload(e.target.checked)} />
+                <span>Skip upload</span>
+              </label>
+            </div>
+          </div>
+          <button
+            type="submit"
+            className="rounded-md bg-black text-white px-4 py-2 disabled:opacity-50"
+            disabled={loading}
+          >
+            {loading ? "Running..." : "Run pipeline"}
+          </button>
+        </form>
+
+        {error && <div className="rounded-md border border-red-300 bg-red-50 p-3 text-sm text-red-700">{error}</div>}
+
+        {result && (
+          <div className="space-y-2 text-sm">
+            <div className="rounded-md border p-3">
+              <div className="font-medium">Video created:</div>
+              <pre className="overflow-auto whitespace-pre-wrap">{result.videoPath}</pre>
+            </div>
+            <div className="rounded-md border p-3">
+              <div className="font-medium">Final audio:</div>
+              <pre className="overflow-auto whitespace-pre-wrap">{result.finalAudioPath}</pre>
+            </div>
+            <div className="rounded-md border p-3">
+              <div className="font-medium">Images ({result.imageFiles?.length ?? 0}):</div>
+              <pre className="overflow-auto whitespace-pre-wrap">{(result.imageFiles || []).join("\n")}</pre>
+            </div>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+}