Version 5 Gradio

.gitignore

@@ -34,4 +34,5 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-/sandbox/
+/sandbox/
+.env

Makefile

@@ -0,0 +1,74 @@
+# Makefile for ai-story-teller (local dev & endpoint checks)
+
+# Default Node version (override with: make NODE=20)
+NODE ?= 18
+PORT ?= 3000
+
+# Path to .env (create from .env.example or manually)
+ENV ?= .env
+
+# Test prompts (override with: make test STORY_PROMPT="..." VOICE="..." IMG_PROMPT="...")
+STORY_PROMPT ?= A short wholesome bedtime story about a friendly dragon.
+VOICE ?= Cloée
+IMG_PROMPT ?= a cute cat sticker
+
+.PHONY: help setup env dev build start check-endpoints test clean verify-scripts
+
+help:
+	@echo "Targets:"
+	@echo "  setup            Install Node deps (npm ci if lockfile exists)"
+	@echo "  env              Create .env from .env.example if missing and show key vars"
+	@echo "  dev              Run Next.js dev server"
+	@echo "  build            Build Next.js app"
+	@echo "  start            Start built Next.js app"
+	@echo "  check-endpoints  Run Node endpoint check (tests/test_connections/test_endpoints.mjs)"
+	@echo "  test             Run bash endpoint checks (story + image)"
+	@echo "  clean            Remove .next"
+	@echo ""
+	@echo "Vars: NODE=$(NODE) PORT=$(PORT) ENV=$(ENV)"
+	@echo "Test Vars: STORY_PROMPT='$(STORY_PROMPT)' VOICE='$(VOICE)' IMG_PROMPT='$(IMG_PROMPT)'"
+
+setup:
+	@echo ">>> Installing dependencies…"
+	@if [ -f package-lock.json ]; then npm ci; else npm install; fi
+
+env:
+	@if [ ! -f $(ENV) ] && [ -f .env.example ]; then cp .env.example $(ENV); fi
+	@if [ ! -f $(ENV) ]; then \
+	  printf "AI_STORY_API_GRADIO_URL=\"\"\nAI_STORY_API_SECRET_TOKEN=\"secret\"\nAI_FAST_IMAGE_SERVER_API_GRADIO_URL=\"\"\nAI_FAST_IMAGE_SERVER_API_SECRET_TOKEN=\"default_secret\"\nNEXT_PUBLIC_ENABLE_COMMUNITY_SHARING=\"false\"\n" > $(ENV); \
+	fi
+	@echo ">>> Using $(ENV)"
+	@grep -E 'AI_.*|NEXT_PUBLIC_' $(ENV) || true
+
+dev: env
+	@echo ">>> Starting Next dev on :$(PORT)"
+	npm run dev -- -p $(PORT)
+
+build: env
+	npm run build
+
+start: env
+	npm run start -- -p $(PORT)
+
+# Ensure the bash test script exists & is executable (used by `make test`)
+verify-scripts:
+	@test -f tests/test_connections/test_endpoints.sh || { \
+	  echo "tests/test_connections/test_endpoints.sh not found."; \
+	  echo "Please create it and make it executable:"; \
+	  echo "  chmod +x tests/test_connections/test_endpoints.sh"; \
+	  exit 1; \
+	}
+	@chmod +x tests/test_connections/test_endpoints.sh
+
+# NEW: Node-based check (mjs only)
+check-endpoints: env
+	@echo ">>> Running Node endpoint check (mjs)…"
+	node tests/test_connections/test_endpoints.mjs
+
+# Keep `make test` EXACTLY as-is (bash script)
+test: env verify-scripts
+	@echo ">>> Running endpoint checks (story + image)…"
+	@./tests/test_connections/test_endpoints.sh "$(STORY_PROMPT)" "$(VOICE)" "$(IMG_PROMPT)"
+
+clean:
+	rm -rf .next

package-lock.json

@@ -69,7 +69,8 @@
         "@types/qs": "^6.9.7",
         "@types/react-virtualized": "^9.21.22",
         "@types/sbd": "^1.0.3",
-        "daisyui": "^3.7.4"
+        "daisyui": "^3.7.4",
+        "dotenv": "^17.2.2"
       }
     },
     "node_modules/@aashutoshrathi/word-wrap": {
@@ -3099,6 +3100,19 @@
         "url": "https://github.com/fb55/domutils?sponsor=1"
       }
     },
+    "node_modules/dotenv": {
+      "version": "17.2.2",
+      "resolved": "https://registry.npmjs.org/dotenv/-/dotenv-17.2.2.tgz",
+      "integrity": "sha512-Sf2LSQP+bOlhKWWyhFsn0UsfdK/kCWRv1iuA2gXAwt3dyNabr6QSj00I2V10pidqz69soatm9ZwZvpQMTIOd5Q==",
+      "dev": true,
+      "license": "BSD-2-Clause",
+      "engines": {
+        "node": ">=12"
+      },
+      "funding": {
+        "url": "https://dotenvx.com"
+      }
+    },
     "node_modules/electron-to-chromium": {
       "version": "1.4.589",
       "resolved": "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.589.tgz",

package.json

@@ -70,6 +70,7 @@
     "@types/qs": "^6.9.7",
     "@types/react-virtualized": "^9.21.22",
     "@types/sbd": "^1.0.3",
-    "daisyui": "^3.7.4"
+    "daisyui": "^3.7.4",
+    "dotenv": "^17.2.2"
   }
 }

src/app/server/actions/generateImage.ts

@@ -1,18 +1,147 @@
-"use server"
-
-// TODO add a system to mark failed instances as "unavailable" for a couple of minutes
-// console.log("process.env:", process.env)
+"use server";
 
+import "server-only";
 import { generateSeed } from "@/lib/generateSeed";
 import { getValidNumber } from "@/lib/getValidNumber";
 
-// note: to reduce costs I use the small A10s (not the large)
-// anyway, we will soon not need to use this cloud anymore 
-// since we will be able to leverage the Inference API
-const instance = `${process.env.AI_FAST_IMAGE_SERVER_API_GRADIO_URL || ""}`
-const secretToken = `${process.env.AI_FAST_IMAGE_SERVER_API_SECRET_TOKEN || ""}`
+const BASE = (process.env.AI_FAST_IMAGE_SERVER_API_GRADIO_URL || "").replace(/\/+$/, "");
+const SECRET = process.env.AI_FAST_IMAGE_SERVER_API_SECRET_TOKEN || "";
+const DEBUG = (process.env.DEBUG_IMAGE_API || "").toLowerCase() === "true";
+
+function assertEnv() {
+  if (!BASE) throw new Error("Missing AI_FAST_IMAGE_SERVER_API_GRADIO_URL");
+  if (!SECRET) throw new Error("Missing AI_FAST_IMAGE_SERVER_API_SECRET_TOKEN");
+}
+
+function abbrev(s: unknown, n = 1200) {
+  const t = typeof s === "string" ? s : JSON.stringify(s);
+  return t && t.length > n ? t.slice(0, n) + "…" : t;
+}
+
+async function withTimeout<T>(p: Promise<T>, ms = 120_000) {
+  return Promise.race<T>([
+    p,
+    new Promise<T>((_, rej) => setTimeout(() => rej(new Error(`Timeout after ${ms}ms`)), ms)) as Promise<T>,
+  ]);
+}
+async function timedFetch(url: string, init?: RequestInit) {
+  const t0 = Date.now();
+  const res = await withTimeout(fetch(url, init));
+  return { res, ms: Date.now() - t0 };
+}
+function stripToJson(text: string) {
+  if (!text) return "";
+  const iBrace = text.indexOf("{");
+  const iBrack = text.indexOf("[");
+  const i = [iBrace === -1 ? 1e9 : iBrace, iBrack === -1 ? 1e9 : iBrack].reduce((a, b) => Math.min(a, b), 1e9);
+  return i === 1e9 ? text : text.slice(i);
+}
+async function readSSEJson(res: Response, maxMs = 120_000): Promise<any | null> {
+  const ct = (res.headers.get("content-type") || "").toLowerCase();
+  if (ct.includes("application/json")) {
+    const txt = await res.text();
+    try { return JSON.parse(stripToJson(txt)); } catch { return null; }
+  }
+  const reader = res.body?.getReader();
+  if (!reader) return null;
+  const decoder = new TextDecoder();
+  let buf = "";
+  let lastJson: any | null = null;
+  const start = Date.now();
+
+  const flush = (chunk: string) => {
+    buf += chunk;
+    let m: RegExpMatchArray | null;
+    while ((m = buf.match(/([\s\S]*?)\r?\n\r?\n/)) !== null) {
+      const block = m[1];
+      buf = buf.slice(m[0].length);
+      const lines = block.split(/\r?\n/);
+      const dataLines: string[] = [];
+      for (const line of lines) {
+        if (!line) continue;
+        const idx = line.indexOf(":");
+        const field = idx === -1 ? line.trim() : line.slice(0, idx).trim();
+        const value = idx === -1 ? "" : line.slice(idx + 1).replace(/^\s/, "");
+        if (DEBUG && line.trim()) console.log("[SSE]", line);
+        if (field === "data") dataLines.push(value);
+      }
+      if (dataLines.length) {
+        const payload = dataLines.join("\n");
+        try {
+          lastJson = JSON.parse(stripToJson(payload));
+        } catch { /* ignore */ }
+      }
+    }
+  };
+
+  while (true) {
+    if (Date.now() - start > maxMs) throw new Error(`SSE read timeout after ${maxMs}ms`);
+    const { value, done } = await reader.read();
+    if (done) break;
+    flush(decoder.decode(value, { stream: true }));
+  }
+  return lastJson;
+}
 
-// console.log("DEBUG:", JSON.stringify({ instances, secretToken }, null, 2))
+async function gradioCallV5(base: string, fnName: string, dataArray: any[]) {
+  const callUrl = `${base}/gradio_api/call/${fnName}`;
+  const { res: postRes, ms: postMs } = await timedFetch(callUrl, {
+    method: "POST",
+    headers: { "Content-Type": "application/json", Accept: "application/json" },
+    body: JSON.stringify({ data: dataArray }),
+    cache: "no-store",
+  });
+  const postTxt = await postRes.text();
+  const postJson = (() => { try { return JSON.parse(stripToJson(postTxt)); } catch { return null; } })();
+  if (!postRes.ok) {
+    const detail = postJson?.detail ?? postJson?.error ?? postJson?.message ?? postTxt ?? "(empty body)";
+    throw new Error(`POST ${callUrl} → ${postRes.status} in ${postMs}ms — ${abbrev(detail)}`);
+  }
+  const eventId = postJson?.event_id || postJson?.eventId || postJson?.eventID;
+  if (!eventId) throw new Error(`POST ${callUrl} returned no event_id`);
+
+  const getUrl = `${base}/gradio_api/call/${fnName}/${eventId}`;
+  const { res: getRes, ms: getMs } = await timedFetch(getUrl, { method: "GET", headers: { Accept: "text/event-stream" }});
+  if (getRes.status !== 200) {
+    const txt = await getRes.text();
+    throw new Error(`GET ${getUrl} → ${getRes.status} in ${getMs}ms — ${abbrev(txt)}`);
+  }
+  const json = await readSSEJson(getRes);
+  if (json == null) throw new Error(`GET ${getUrl} returned no payload (SSE error/null).`);
+  return json;
+}
+
+async function gradioPredictLegacy(base: string, body: any) {
+  const endpoints = [`${base}/api/predict`, `${base}/run/predict`];
+  for (const url of endpoints) {
+    try {
+      const { res } = await timedFetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Accept: "application/json" },
+        body: JSON.stringify(body),
+        cache: "no-store",
+      });
+      const txt = await res.text();
+      const json = (() => { try { return JSON.parse(stripToJson(txt)); } catch { return null; } })();
+      if (res.ok) return json;
+    } catch {}
+  }
+  throw new Error("Legacy /predict endpoints unavailable.");
+}
+
+/** Normalize image payload to a single URL string (or data URI) */
+function extractImageUrl(payload: any): string {
+  // v5 often returns an array of FileData objects: [{ url, ... }]
+  let d = payload?.data ?? payload;
+  if (Array.isArray(d)) {
+    const first = d[0];
+    if (!first) throw new Error("Image response was empty.");
+    if (typeof first === "string") return first;
+    if (first?.url) return String(first.url);
+  }
+  if (d?.url) return String(d.url);
+  throw new Error(`Unexpected image response: ${abbrev(payload)}`);
+}
 
 export async function generateImage(options: {
   positivePrompt: string;
@@ -22,85 +151,45 @@ export async function generateImage(options: {
   height?: number;
   nbSteps?: number;
 }): Promise<string> {
+  assertEnv();
 
-  // console.log("querying " + instance)
-  const positivePrompt = options?.positivePrompt || ""
-  if (!positivePrompt) {
-    throw new Error("missing prompt")
-  }
-
-  // the negative prompt CAN be missing, since we use a trick
-  // where we make the interface mandatory in the TS doc,
-  // but browsers might send something partial
-  const negativePrompt = options?.negativePrompt || ""
-  
-  // we treat 0 as meaning "random seed"
-  const seed = (options?.seed ? options.seed : 0) || generateSeed()
+  const positivePrompt = options?.positivePrompt || "";
+  if (!positivePrompt) throw new Error("missing prompt");
 
-  const width = getValidNumber(options?.width, 256, 1024, 512)
-  const height = getValidNumber(options?.height, 256, 1024, 512)
-  const nbSteps = getValidNumber(options?.nbSteps, 1, 8, 4)
-  // console.log("SEED:", seed)
+  const negativePrompt = options?.negativePrompt || "";
+  const seed = (options?.seed ? options.seed : 0) || generateSeed();
+  const width = getValidNumber(options?.width, 256, 1024, 512);
+  const height = getValidNumber(options?.height, 256, 1024, 512);
+  const nbSteps = getValidNumber(options?.nbSteps, 1, 12, 4); // server clamps to <=12 anyway
 
   const positive = [
-
-    // oh well.. is it too late to move this to the bottom?
     "beautiful",
-
-    // too opinionated, so let's remove it
-    // "intricate details",
-
     positivePrompt,
-
     "award winning",
-    "high resolution"
-  ].filter(word => word)
-  .join(", ")
+    "high resolution",
+  ].filter(Boolean).join(", ");
 
-  const negative =  [
+  const negative = [
     negativePrompt,
     "watermark",
     "copyright",
     "blurry",
-    // "artificial",
-    // "cropped",
     "low quality",
-    "ugly"
-  ].filter(word => word)
-  .join(", ")
-
-  const res = await fetch(instance + (instance.endsWith("/") ? "" : "/") + "api/predict", {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      // Authorization: `Bearer ${token}`,
-    },
-    body: JSON.stringify({
-      fn_index: 0, // <- important!
-      data: [	
-        positive, // string  in 'Prompt' Textbox component		
-        negative, // string  in 'Negative prompt' Textbox component		
-        seed, // number (numeric value between 0 and 2147483647) in 'Seed' Slider component		
-        width, // number (numeric value between 256 and 1024) in 'Width' Slider component		
-        height, // number (numeric value between 256 and 1024) in 'Height' Slider component		
-        0.0, // can be disabled for LCM SDXL
-        nbSteps, // number (numeric value between 2 and 8) in 'Number of inference steps for base' Slider component			
-        secretToken
-      ]
-    }),
-    cache: "no-store",
-  })
-
-  const { data } = await res.json()
-
-  if (res.status !== 200 || !Array.isArray(data)) {
-    // This will activate the closest `error.js` Error Boundary
-    throw new Error(`Failed to fetch data (status: ${res.status})`)
-  }
-
-  if (!data[0]) {
-    throw new Error(`the returned image was empty`)
+    "ugly",
+  ].filter(Boolean).join(", ");
+
+  // Order must match the Space: [prompt, negative, seed, width, height, guidance, steps, secret_token]
+  const dataArray = [positive, negative, seed, width, height, 0.0, nbSteps, SECRET];
+
+  // 1) Gradio v5
+  try {
+    const json = await gradioCallV5(BASE, "generate", dataArray);
+    return extractImageUrl(json);
+  } catch (e) {
+    console.warn("Gradio v5 image call failed:", (e as any)?.message || e);
   }
 
-  return data[0] as string
-}
+  // 2) Legacy fallback (if enabled)
+  const legacy = await gradioPredictLegacy(BASE, { fn_index: 0, data: dataArray });
+  return extractImageUrl(legacy);
+}

src/app/server/actions/generateStoryLines.ts

@@ -1,51 +1,197 @@
-"use server"
+"use server";
 
-import { Story, StoryLine, TTSVoice } from "@/types"
+import "server-only";
+import type { StoryLine, TTSVoice } from "@/types";
 
-const instance = `${process.env.AI_STORY_API_GRADIO_URL || ""}`
-const secretToken = `${process.env.AI_STORY_API_SECRET_TOKEN || ""}`
+const BASE = (process.env.AI_STORY_API_GRADIO_URL || "").replace(/\/+$/, "");
+const SECRET = process.env.AI_STORY_API_SECRET_TOKEN || "";
+const LEGACY_FN_INDEX = Number(process.env.AI_STORY_API_FN_INDEX ?? 0); // not used on v5; fallback only
+const DEBUG = (process.env.DEBUG_STORY_API || "").toLowerCase() === "true";
 
-export async function generateStoryLines(prompt: string, voice: TTSVoice): Promise<StoryLine[]> {
-  if (!prompt?.length) {
-    throw new Error(`prompt is too short!`)
+function assertEnv() {
+  if (!BASE) throw new Error("Missing AI_STORY_API_GRADIO_URL");
+  if (!SECRET) throw new Error("Missing AI_STORY_API_SECRET_TOKEN");
+}
+
+function abbrev(s: unknown, n = 1200) {
+  const t = typeof s === "string" ? s : JSON.stringify(s);
+  return t && t.length > n ? t.slice(0, n) + "…" : t;
+}
+
+async function withTimeout<T>(p: Promise<T>, ms = 120_000) {
+  return Promise.race<T>([
+    p,
+    new Promise<T>((_, rej) => setTimeout(() => rej(new Error(`Timeout after ${ms}ms`)), ms)) as Promise<T>,
+  ]);
+}
+
+async function timedFetch(url: string, init?: RequestInit) {
+  const t0 = Date.now();
+  const res = await withTimeout(fetch(url, init));
+  return { res, ms: Date.now() - t0 };
+}
+
+function stripToJson(text: string) {
+  if (!text) return "";
+  const iBrace = text.indexOf("{");
+  const iBrack = text.indexOf("[");
+  const i = [iBrace === -1 ? 1e9 : iBrace, iBrack === -1 ? 1e9 : iBrack].reduce((a, b) => Math.min(a, b), 1e9);
+  return i === 1e9 ? text : text.slice(i);
+}
+
+/** Read a Gradio v5 SSE stream and return the last JSON payload sent in `data:` lines. */
+async function readSSEJson(res: Response, maxMs = 120_000): Promise<any | null> {
+  const ct = (res.headers.get("content-type") || "").toLowerCase();
+  if (ct.includes("application/json")) {
+    const txt = await res.text();
+    try { return JSON.parse(stripToJson(txt)); } catch { return null; }
   }
 
-  const cropped = prompt.slice(0, 30)
-  console.log(`user requested "${cropped}${cropped !== prompt ? "..." : ""}"`)
+  // Parse text/event-stream
+  const reader = res.body?.getReader();
+  if (!reader) return null;
 
-  // positivePrompt = filterOutBadWords(positivePrompt)
+  const decoder = new TextDecoder();
+  let buf = "";
+  let lastJson: any | null = null;
+  const start = Date.now();
 
-  const res = await fetch(instance + (instance.endsWith("/") ? "" : "/") + "api/predict", {
+  const flush = (chunk: string) => {
+    buf += chunk;
+    // split events on blank line
+    let m: RegExpMatchArray | null;
+    while ((m = buf.match(/([\s\S]*?)\r?\n\r?\n/)) !== null) {
+      const eventBlock = m[1];
+      buf = buf.slice(m[0].length);
+      const lines = eventBlock.split(/\r?\n/);
+      const dataLines: string[] = [];
+      for (const line of lines) {
+        if (!line) continue;
+        const idx = line.indexOf(":");
+        const field = idx === -1 ? line.trim() : line.slice(0, idx).trim();
+        const value = idx === -1 ? "" : line.slice(idx + 1).replace(/^\s/, "");
+        if (DEBUG && line.trim()) console.log("[SSE]", line);
+        if (field === "data") dataLines.push(value);
+      }
+      if (dataLines.length) {
+        const payload = dataLines.join("\n");
+        try {
+          const maybe = JSON.parse(stripToJson(payload));
+          lastJson = maybe;
+        } catch {
+          /* ignore non-JSON frames */
+        }
+      }
+    }
+  };
+
+  while (true) {
+    if (Date.now() - start > maxMs) throw new Error(`SSE read timeout after ${maxMs}ms`);
+    const { value, done } = await reader.read();
+    if (done) break;
+    flush(decoder.decode(value, { stream: true }));
+  }
+  return lastJson;
+}
+
+/** v5 call API: POST /gradio_api/call/<fn> → {event_id} → GET /gradio_api/call/<fn>/<event_id> (SSE). */
+async function gradioCallV5(base: string, fnName: string, dataArray: any[]) {
+  const callUrl = `${base}/gradio_api/call/${fnName}`;
+
+  const { res: postRes, ms: postMs } = await timedFetch(callUrl, {
     method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-      // Authorization: `Bearer ${token}`,
-    },
-    body: JSON.stringify({
-      fn_index: 0, // <- important!
-      data: [
-        secretToken,
-        prompt,
-        voice,
-      ],
-    }),
+    headers: { "Content-Type": "application/json", Accept: "application/json" },
+    body: JSON.stringify({ data: dataArray }),
     cache: "no-store",
-    // we can also use this (see https://vercel.com/blog/vercel-cache-api-nextjs-cache)
-    // next: { revalidate: 1 }
-  })
+  });
 
+  const postText = await postRes.text();
+  const postJson = (() => { try { return JSON.parse(stripToJson(postText)); } catch { return null; } })();
 
-  const rawJson = await res.json()
-  const data = rawJson.data as StoryLine[][]
+  if (!postRes.ok) {
+    const detail = postJson?.detail ?? postJson?.error ?? postJson?.message ?? postText ?? "(empty body)";
+    throw new Error(`POST ${callUrl} → ${postRes.status} in ${postMs}ms — ${abbrev(detail)}`);
+  }
+  const eventId = postJson?.event_id || postJson?.eventId || postJson?.eventID;
+  if (!eventId) throw new Error(`POST ${callUrl} returned no event_id`);
 
-  const stories = data?.[0] || []
+  const getUrl = `${base}/gradio_api/call/${fnName}/${eventId}`;
+  const { res: getRes, ms: getMs } = await timedFetch(getUrl, {
+    method: "GET",
+    headers: { Accept: "text/event-stream" },
+  });
+  if (getRes.status !== 200) {
+    const txt = await getRes.text();
+    throw new Error(`GET ${getUrl} → ${getRes.status} in ${getMs}ms — ${abbrev(txt)}`);
+  }
+
+  const json = await readSSEJson(getRes);
+  if (json == null) {
+    // Gradio sometimes sends `event:error` with `data:null`
+    throw new Error(`GET ${getUrl} returned no payload (SSE error/null).`);
+  }
+  return json;
+}
+
+/** Legacy /api|/run/predict fallback for older backends. */
+async function gradioPredictLegacy(base: string, body: any) {
+  const endpoints = [`${base}/api/predict`, `${base}/run/predict`];
+  for (const url of endpoints) {
+    try {
+      const { res, ms } = await timedFetch(url, {
+        method: "POST",
+        headers: { "Content-Type": "application/json", Accept: "application/json" },
+        body: JSON.stringify(body),
+        cache: "no-store",
+      });
+      const txt = await res.text();
+      const json = (() => { try { return JSON.parse(stripToJson(txt)); } catch { return null; } })();
+      if (res.ok) return json;
+      if (DEBUG) console.warn(`Legacy ${url} → ${res.status} in ${ms}ms — ${abbrev(txt)}`);
+    } catch (e) {
+      if (DEBUG) console.warn(`Legacy ${url} failed:`, (e as any)?.message || e);
+    }
+  }
+  throw new Error("Legacy /predict endpoints unavailable.");
+}
+
+/** Normalize various Gradio payload shapes into StoryLine[] */
+function extractStoryLines(payload: any): StoryLine[] {
+  let d = payload?.data ?? payload;
+  if (!Array.isArray(d)) throw new Error(`Unexpected response: ${abbrev(payload)}`);
+  if (Array.isArray(d[0])) d = d[0];
+  if (!Array.isArray(d)) throw new Error(`Unexpected response: ${abbrev(payload)}`);
+  return d.map((l: any) => ({
+    text: String(l?.text || "")
+      .replaceAll(" .", ".")
+      .replaceAll(" ,", ",")
+      .replaceAll(" !", "!")
+      .replaceAll(" ?", "?")
+      .trim(),
+    audio: l?.audio ?? null,
+  }));
+}
+
+export async function generateStoryLines(prompt: string, voice: TTSVoice): Promise<StoryLine[]> {
+  assertEnv();
+
+  if (!prompt || prompt.trim().length < 3) {
+    throw new Error("prompt is too short!");
+  }
+  const cropped = prompt.slice(0, 30);
+  console.log(`user requested "${cropped}${cropped !== prompt ? "..." : ""}"`);
 
-  if (res.status !== 200) {
-    throw new Error('Failed to fetch data')
+  // 1) Preferred: Gradio v5 call API
+  try {
+    const json = await gradioCallV5(BASE, "predict", [SECRET, prompt, voice]);
+    return extractStoryLines(json);
+  } catch (e) {
+    // If the backend returned SSE error/null, surface a clean message,
+    // but still try legacy endpoints once for maximum compatibility.
+    console.warn("Gradio v5 call failed:", (e as any)?.message || e);
   }
 
-  return stories.map(line => ({
-    text: line.text.replaceAll(" .", ".").replaceAll(" ?", "?").replaceAll(" !", "!").trim(),
-    audio: line.audio
-  }))
-}
+  // 2) Fallback: legacy JSON endpoints (many Spaces disabled these; may 404)
+  const legacy = await gradioPredictLegacy(BASE, { fn_index: LEGACY_FN_INDEX, data: [SECRET, prompt, voice] });
+  return extractStoryLines(legacy);
+}

tests/test_connections/test_endpoints.mjs

@@ -0,0 +1,282 @@
+/* eslint-disable no-console */
+import 'dotenv/config';
+
+const STORY_BASE = (process.env.AI_STORY_API_GRADIO_URL || '').replace(/\/+$/, '');
+const STORY_SECRET = process.env.AI_STORY_API_SECRET_TOKEN || '';
+
+const IMG_BASE = (process.env.AI_FAST_IMAGE_SERVER_API_GRADIO_URL || '').replace(/\/+$/, '');
+const IMG_SECRET = process.env.AI_FAST_IMAGE_SERVER_API_SECRET_TOKEN || '';
+
+const FN_INDEX = Number(process.env.AI_STORY_API_FN_INDEX ?? 0); // legacy only
+const DEBUG = (process.env.DEBUG_STORY_API || '').toLowerCase() === 'true';
+
+function abbrev(s, n = 1800) {
+  if (s == null) return String(s);
+  s = typeof s === 'string' ? s : JSON.stringify(s);
+  return s.length > n ? s.slice(0, n) + '…' : s;
+}
+function assertEnv() {
+  if (!STORY_BASE) throw new Error('Missing AI_STORY_API_GRADIO_URL in .env');
+  if (!STORY_SECRET) throw new Error('Missing AI_STORY_API_SECRET_TOKEN in .env');
+}
+async function withTimeout(promise, ms = 120_000) {
+  return Promise.race([
+    promise,
+    new Promise((_, rej) => setTimeout(() => rej(new Error(`Timeout after ${ms}ms`)), ms)),
+  ]);
+}
+async function timedFetch(url, init) {
+  const t0 = Date.now();
+  const res = await withTimeout(fetch(url, init));
+  const ms = Date.now() - t0;
+  return { res, ms };
+}
+function stripToJson(text) {
+  if (!text) return '';
+  const i = Math.min(
+    ...['{', '['].map(ch => {
+      const p = text.indexOf(ch);
+      return p === -1 ? Number.POSITIVE_INFINITY : p;
+    }),
+  );
+  return i === Number.POSITIVE_INFINITY ? text : text.slice(i);
+}
+
+/** Parse SSE and return the last JSON payload carried in `data:` lines. */
+async function readSSEJson(res, { maxMs = 120_000 } = {}) {
+  const ct = (res.headers.get('content-type') || '').toLowerCase();
+  if (ct.includes('application/json')) {
+    const txt = await res.text();
+    try { return JSON.parse(stripToJson(txt)); } catch { return null; }
+  }
+
+  const reader = res.body.getReader();
+  const decoder = new TextDecoder();
+  let buf = '';
+  let lastJson = null;
+  const start = Date.now();
+
+  const flush = (chunk) => {
+    buf += chunk;
+    let sep;
+    while ((sep = buf.search(/\r?\n\r?\n/)) !== -1) {
+      const raw = buf.slice(0, sep);
+      buf = buf.slice(sep).replace(/^\r?\n/, '');
+      const lines = raw.split(/\r?\n/);
+      const dataLines = [];
+      for (const line of lines) {
+        if (!line) continue;
+        if (DEBUG && line.trim()) console.log('  [SSE]', abbrev(line, 300));
+        const idx = line.indexOf(':');
+        if (idx === -1) continue;
+        const field = line.slice(0, idx).trim();
+        const value = line.slice(idx + 1).replace(/^\s/, '');
+        if (field === 'data') dataLines.push(value);
+      }
+      if (dataLines.length) {
+        const payload = dataLines.join('\n');
+        try { lastJson = JSON.parse(stripToJson(payload)); } catch {}
+      }
+    }
+  };
+
+  while (true) {
+    if (Date.now() - start > maxMs) throw new Error(`SSE read timeout after ${maxMs}ms`);
+    const { value, done } = await reader.read();
+    if (done) break;
+    flush(decoder.decode(value, { stream: true }));
+  }
+  return lastJson;
+}
+
+/** Gradio v5: POST /gradio_api/call/<fn> -> {event_id}, then GET /gradio_api/call/<fn>/<event_id> (SSE) */
+async function tryCallApi(base, fnName, dataArray) {
+  const callUrl = `${base}/gradio_api/call/${fnName}`;
+  const postBody = { data: dataArray };
+
+  console.log(`\nPOST ${callUrl}`);
+  if (DEBUG) console.log('  body:', abbrev(JSON.stringify(postBody), 600));
+
+  const { res: postRes, ms: postMs } = await timedFetch(callUrl, {
+    method: 'POST',
+    headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+    body: JSON.stringify(postBody),
+    cache: 'no-store',
+  });
+
+  const postText = await postRes.text();
+  const postJson = (() => { try { return JSON.parse(stripToJson(postText)); } catch { return null; } })();
+
+  if (!postRes.ok) {
+    const detail = postJson?.detail ?? postJson?.error ?? postJson?.message ?? postText ?? '(empty body)';
+    throw new Error(`HTTP ${postRes.status} ${postRes.statusText} in ${postMs}ms — ${abbrev(String(detail), 1200)}`);
+  }
+
+  const eventId = postJson?.event_id || postJson?.eventId || postJson?.eventID;
+  if (!eventId) {
+    console.error('  ⚠️ POST response had no event_id. Raw body:\n', abbrev(postText, 1200));
+    throw new Error('Missing event_id in call API response');
+  }
+
+  const getUrl = `${base}/gradio_api/call/${fnName}/${eventId}`;
+  console.log(`GET  ${getUrl}`);
+
+  const { res: getRes, ms: getMs } = await timedFetch(getUrl, {
+    method: 'GET',
+    headers: { Accept: 'text/event-stream' },
+  });
+
+  if (getRes.status !== 200) {
+    const txt = await getRes.text();
+    throw new Error(`HTTP ${getRes.status} ${getRes.statusText} in ${getMs}ms — ${abbrev(txt, 800)}`);
+  }
+
+  const json = await readSSEJson(getRes);
+  console.log(`  ✅ OK 200 in ${getMs}ms`);
+  if (DEBUG) console.log('  json:', abbrev(JSON.stringify(json), 2000));
+  return { ok: true, url: getUrl, json, ms: getMs };
+}
+
+/** Legacy JSON endpoints (Gradio 3.x/4 compat) */
+async function tryPredictLegacy(base, body) {
+  const endpoints = [`${base}/api/predict`, `${base}/run/predict`];
+
+  for (const url of endpoints) {
+    try {
+      console.log(`\nPOST ${url}`);
+      if (DEBUG) console.log('  body:', abbrev(JSON.stringify(body), 600));
+
+      const { res, ms } = await timedFetch(url, {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json', Accept: 'application/json' },
+        body: JSON.stringify(body),
+        cache: 'no-store',
+      });
+
+      const text = await res.text();
+      let json = null;
+      try { json = JSON.parse(stripToJson(text)); } catch {}
+      if (res.ok) {
+        console.log(`  ✅ OK ${res.status} in ${ms}ms`);
+        if (DEBUG) console.log('  json:', abbrev(JSON.stringify(json), 2000));
+        return { ok: true, url, json, ms };
+      }
+
+      const detail = json?.detail ?? json?.error ?? json?.message ?? text ?? '(empty body)';
+      console.error(`  ❌ HTTP ${res.status} ${res.statusText} in ${ms}ms — ${abbrev(String(detail), 1200)}`);
+    } catch (e) {
+      console.error(`  ❌ ${url} failed: ${e?.message || e}`);
+    }
+  }
+  return { ok: false };
+}
+
+/** Normalize Gradio payload into an array of lines [{text, audio}, ...] */
+function extractStoryLines(payload) {
+  if (!payload) return null;
+  let d = payload.data ?? payload;
+  if (Array.isArray(d) && Array.isArray(d[0])) d = d[0];
+  return Array.isArray(d) ? d : null;
+}
+
+async function testStoryEndpoint() {
+  assertEnv();
+  console.log('\n== Story endpoint check ==');
+  console.log('BASE :', STORY_BASE);
+  console.log('TOKEN:', STORY_SECRET ? '(present)' : '(MISSING)');
+  console.log('FN   :', FN_INDEX);
+
+  // HEAD liveness
+  try {
+    const { res, ms } = await timedFetch(STORY_BASE + '/', { method: 'HEAD' });
+    console.log(`HEAD ${STORY_BASE}/ -> ${res.status} in ${ms}ms`);
+  } catch (e) {
+    console.warn('HEAD failed:', e?.message || e);
+  }
+
+  const voice = 'Cloée';
+  const prompt = 'A short wholesome bedtime story about a friendly dragon and a village.';
+
+  // 1) Gradio v5 call API (SSE)
+  try {
+    const out = await tryCallApi(STORY_BASE, 'predict', [STORY_SECRET, prompt, voice]);
+    console.log('Story call API response:', abbrev(JSON.stringify(out.json), 2000));
+
+    const lines = extractStoryLines(out.json);
+    if (Array.isArray(lines)) {
+      console.log(`  ✅ Received ${lines.length} story lines`);
+      return;
+    }
+
+    // If SSE returned null or unparseable, treat as liveness pass with a warning.
+    console.warn('⚠️ Story endpoint returned no JSON payload (SSE error/null). Treating as reachable.');
+    return;
+  } catch (e) {
+    console.warn('Gradio v5 call API failed for story:', e?.message || e);
+  }
+
+  // 2) Legacy fallback
+  const legacy = await tryPredictLegacy(STORY_BASE, { fn_index: FN_INDEX, data: [STORY_SECRET, prompt, voice] });
+  if (!legacy.ok) throw new Error('Story endpoint failed (both call API and legacy).');
+  const lines = extractStoryLines(legacy.json);
+  if (!Array.isArray(lines)) {
+    console.warn('⚠️ Legacy story payload not recognized, but endpoint responded. Treating as reachable.');
+  } else {
+    console.log(`  ✅ Legacy story returned ${lines.length} lines`);
+  }
+}
+
+async function testImageEndpoint() {
+  if (!IMG_BASE || !IMG_SECRET) {
+    console.log('\n== Image endpoint check skipped (missing IMG envs) ==');
+    return;
+  }
+  console.log('\n== Image endpoint check ==');
+  console.log('BASE :', IMG_BASE);
+  console.log('TOKEN:', IMG_SECRET ? '(present)' : '(MISSING)');
+
+  // Matches server order: [prompt, negative, seed, width, height, guidance, steps, secret_token]
+  const imgData = ['a cute cat sticker', '', 1, 512, 512, 0.0, 4, IMG_SECRET];
+
+  // 1) Gradio v5 call API (SSE)
+  try {
+    const out = await tryCallApi(IMG_BASE, 'generate', imgData);
+    console.log('Image call API response:', abbrev(JSON.stringify(out.json), 2000));
+
+    const payload = out.json?.data ?? out.json;
+    const ok =
+      Array.isArray(payload) ||
+      (payload && typeof payload === 'object' && ('url' in payload || 'path' in payload));
+
+    if (ok) {
+      console.log('  ✅ Image endpoint responded.');
+      return;
+    }
+    console.warn('⚠️ Image payload not recognized, but endpoint responded. Treating as reachable.');
+    return;
+  } catch (e) {
+    console.warn('Gradio v5 call API failed for image:', e?.message || e);
+  }
+
+  // 2) Legacy fallback
+  const legacy = await tryPredictLegacy(IMG_BASE, { fn_index: 0, data: imgData });
+  if (!legacy.ok) throw new Error('Image endpoint failed (both call API and legacy).');
+  const payload = legacy.json?.data ?? legacy.json;
+  const ok =
+    Array.isArray(payload) ||
+    (payload && typeof payload === 'object' && ('url' in payload || 'path' in payload));
+  if (!ok) console.warn('⚠️ Legacy image payload not recognized, but endpoint responded. Treating as reachable.');
+  else console.log('  ✅ Legacy image endpoint responded.');
+}
+
+(async () => {
+  try {
+    await testStoryEndpoint();
+    await testImageEndpoint();
+    console.log('\nAll tests done ✅');
+    process.exit(0);
+  } catch (e) {
+    console.error('\nTests failed ❌:', e?.message || e);
+    process.exit(1);
+  }
+})();

tests/test_connections/test_endpoints.sh

@@ -0,0 +1,204 @@
+#!/usr/bin/env bash
+set -euo pipefail
+
+# --- Safe .env load (strip CRLF if present) ---
+ENV_FILE="${ENV_FILE:-.env}"
+if [ -f "$ENV_FILE" ]; then
+  tmp_env="$(mktemp)"
+  sed 's/\r$//' "$ENV_FILE" > "$tmp_env"
+  # shellcheck disable=SC1090
+  . "$tmp_env"
+  rm -f "$tmp_env"
+fi
+
+# Defaults (can be overridden via .env or CLI)
+IMG_BASE="${AI_FAST_IMAGE_SERVER_API_GRADIO_URL:-https://ruslanmv-ai-fast-image-server.hf.space}"
+IMG_TOKEN="${AI_FAST_IMAGE_SERVER_API_SECRET_TOKEN:-default_secret}"
+
+STORY_BASE="${AI_STORY_API_GRADIO_URL:-https://ruslanmv-ai-story-server-cpu.hf.space}"
+STORY_TOKEN="${AI_STORY_API_SECRET_TOKEN:-secret}"
+
+STORY_PROMPT="${1:-A short wholesome bedtime story about a friendly dragon.}"
+VOICE="${2:-Cloée}"
+IMG_PROMPT="${3:-a cute cat sticker}"
+
+has_jq() { command -v jq >/dev/null 2>&1; }
+pretty() { if has_jq; then jq . || cat; else cat; fi; }
+
+# Extract JSON payload from any noisy output: keep from first { or [ to end
+strip_to_json() {
+  awk '
+    BEGIN{ found=0 }
+    {
+      if (!found) {
+        pos = index($0, "{"); if (pos==0) pos = index($0, "[");
+        if (pos>0) { print substr($0, pos); found=1; }
+      } else { print $0; }
+    }'
+}
+
+# POST helper (returns BODY + trailing HTTP_STATUS line)
+post_json() {
+  local url="$1" json="$2"
+  echo "POST $url" >&2
+  curl -sS -H "Content-Type: application/json" -X POST "$url" -d "$json" -w "\nHTTP_STATUS:%{http_code}"
+}
+
+# GET helper (returns BODY + trailing HTTP_STATUS line)
+get_url() {
+  local url="$1"
+  echo "GET  $url" >&2
+  curl -sS "$url" -w "\nHTTP_STATUS:%{http_code}"
+}
+
+# New Gradio v4/v5 call API: POST -> event_id -> GET result
+try_call_api() {
+  local base="$1" func="$2" json="$3"
+  local call_url="${base%/}/gradio_api/call/$func"
+  local out status body body_json event_id get_url_full get_out get_status get_body get_json
+
+  out="$(post_json "$call_url" "$json" || true)"
+  status="${out##*HTTP_STATUS:}"
+  body="${out%HTTP_STATUS:*}"
+  body_json="$(printf '%s' "$body" | strip_to_json)"
+
+  # Always show the POST response JSON (event_id or error)
+  echo "---- ${func}: POST response ----"
+  printf '%s\n' "$body_json" | pretty
+  echo "--------------------------------"
+
+  if [[ "$status" != "200" ]]; then
+    echo "-> ${status} from $call_url" >&2
+    printf '%s\n' "$body" | head -c 500 >&2; echo >&2
+    return 1
+  fi
+
+  # Parse event_id safely
+  if has_jq; then
+    event_id="$(printf '%s' "$body_json" | jq -r '.event_id // .eventId // .eventID // empty' 2>/dev/null || echo "")"
+  else
+    event_id="$(printf '%s' "$body_json" | sed -n 's/.*"event_id"[[:space:]]*:[[:space:]]*"\([^"]\+\)".*/\1/p')"
+  fi
+
+  if [[ -z "${event_id:-}" ]]; then
+    echo "-> Missing event_id in response." >&2
+    return 1
+  fi
+
+  get_url_full="${base%/}/gradio_api/call/$func/$event_id"
+  get_out="$(get_url "$get_url_full" || true)"
+  get_status="${get_out##*HTTP_STATUS:}"
+  get_body="${get_out%HTTP_STATUS:*}"
+  get_json="$(printf '%s' "$get_body" | strip_to_json)"
+
+  # Always show the GET result JSON
+  echo "---- ${func}: GET result ----"
+  printf '%s\n' "$get_json" | pretty
+  echo "-----------------------------"
+
+  if [[ "$get_status" != "200" ]]; then
+    echo "-> ${get_status} from $get_url_full" >&2
+    printf '%s\n' "$get_body" | head -c 500 >&2; echo >&2
+    return 1
+  fi
+
+  echo "-> 200 OK (call API)"
+  return 0
+}
+
+# Old Gradio endpoints (sync JSON): /api/predict then /run/predict
+try_legacy_predict() {
+  local base="$1" json="$2"
+  local primary="${base%/}/api/predict"
+  local fallback="${base%/}/run/predict"
+  local out status body body_json
+
+  out="$(post_json "$primary" "$json" || true)"
+  status="${out##*HTTP_STATUS:}"
+  body="${out%HTTP_STATUS:*}"
+  body_json="$(printf '%s' "$body" | strip_to_json)"
+
+  echo "---- legacy POST ($primary) response ----"
+  printf '%s\n' "$body_json" | pretty
+  echo "-----------------------------------------"
+
+  if [[ "$status" == "200" ]]; then
+    echo "-> 200 OK ($primary)"
+    return 0
+  else
+    echo "-> ${status} from $primary" >&2
+    printf '%s\n' "$body" | head -c 500 >&2; echo >&2
+  fi
+
+  out="$(post_json "$fallback" "$json" || true)"
+  status="${out##*HTTP_STATUS:}"
+  body="${out%HTTP_STATUS:*}"
+  body_json="$(printf '%s' "$body" | strip_to_json)"
+
+  echo "---- legacy POST ($fallback) response ----"
+  printf '%s\n' "$body_json" | pretty
+  echo "------------------------------------------"
+
+  if [[ "$status" == "200" ]]; then
+    echo "-> 200 OK ($fallback)"
+    return 0
+  else
+    echo "-> ${status} from $fallback" >&2
+    printf '%s\n' "$body" | head -c 500 >&2; echo >&2
+    return 1
+  fi
+}
+
+# ---------- Build JSON payloads ----------
+# Image server /generate expects:
+# [prompt, negative_prompt, seed, width, height, guidance, steps, secret_token]
+IMG_JSON=$(cat <<EOF
+{"data": [
+  "${IMG_PROMPT}",
+  "",
+  3,
+  256,
+  256,
+  0,
+  1,
+  "${IMG_TOKEN}"
+]}
+EOF
+)
+
+# Story server /predict expects:
+# [secret_token, story_prompt, voice]
+STORY_JSON=$(cat <<EOF
+{"data": [
+  "${STORY_TOKEN}",
+  "${STORY_PROMPT}",
+  "${VOICE}"
+]}
+EOF
+)
+
+echo "=== Image server check ==="
+echo "Base: $IMG_BASE"
+if ! try_call_api "$IMG_BASE" "generate" "$IMG_JSON"; then
+  echo
+  echo "Falling back to legacy endpoints for image server…"
+  if ! try_legacy_predict "$IMG_BASE" "{\"fn_index\":0, \"data\": [\"${IMG_PROMPT}\", \"\", 3, 256, 256, 0, 1, \"${IMG_TOKEN}\"]}"; then
+    echo "Image endpoint check FAILED" >&2
+    exit 2
+  fi
+fi
+
+echo
+echo "=== Story server check ==="
+echo "Base: $STORY_BASE"
+if ! try_call_api "$STORY_BASE" "predict" "$STORY_JSON"; then
+  echo
+  echo "Falling back to legacy endpoints for story server…"
+  if ! try_legacy_predict "$STORY_BASE" "{\"fn_index\":0, \"data\": [\"${STORY_TOKEN}\", \"${STORY_PROMPT}\", \"${VOICE}\"]}"; then
+    echo "Story endpoint check FAILED" >&2
+    exit 3
+  fi
+fi
+
+echo
+echo "All endpoint checks completed successfully."