-
- 云梦
-
-
-
- 逐 · 帧 · 而 · 成
-
-
-
-
-
-
-
- 每一帧
-
-
+function Frame({ className = "" }: { className?: string }) {
+ return ;
+}
-
- - 一场 · 开源 · 实验 · MMXXVI -
-
- 每一帧
-
- 都于
-
- 此刻
- 诞生。
-
- - 云梦是一部视觉小说 — 场景、对话、选项，整个界面皆由 AI - 一帧一帧绘成。你点击。它落笔。故事铺展。 -
-
-
+function CardBody({
+ title,
+ outline,
+ image,
+}: {
+ title: string;
+ outline: string;
+ image?: string;
+}) {
+ return (
+ ;
+ setTxt("");
+ const tick = () => {
+ const full = phrases[p] ?? "";
+ if (!del) {
+ i++;
+ setTxt(full.slice(0, i));
+ if (i >= full.length) {
+ del = true;
+ timer = setTimeout(tick, 1700);
+ return;
+ }
+ timer = setTimeout(tick, 70);
+ } else {
+ i--;
+ setTxt(full.slice(0, i));
+ if (i <= 0) {
+ del = false;
+ p = (p + 1) % phrases.length;
+ timer = setTimeout(tick, 450);
+ return;
+ }
+ timer = setTimeout(tick, 28);
+ }
+ };
+ timer = setTimeout(tick, 500);
+ return () => clearTimeout(timer);
+ }, [phrases]);
+
+ return (
+ <>
+ {txt}
+
+
+ );
+}
+
+/* ---------- collapsible category selector ---------- */
+
+function CategorySelect({
+ label,
+ items,
+ value,
+ open,
+ onToggle,
+ onPick,
+}: {
+ label: string;
+ items: string[];
+ value: number;
+ open: boolean;
+ onToggle: () => void;
+ onPick: (i: number) => void;
+}) {
+ return (
+ (null);
+ const canvasRef = useRef(null);
+
+ useLayoutEffect(() => {
+ const fit = () => {
+ const stage = stageRef.current;
+ const canvas = canvasRef.current;
+ if (!stage || !canvas) return;
+ // scale to fit width; clamp so very wide screens don't pixel-up the design
+ const s = Math.min(1, stage.clientWidth / HERO_CANVAS_W);
+ canvas.style.transform = `scale(${s})`;
+ stage.style.height = HERO_CANVAS_H * s + "px";
+ };
+ fit();
+ window.addEventListener("resize", fit);
+ const ro = new ResizeObserver(fit);
+ if (stageRef.current) ro.observe(stageRef.current);
+ return () => {
+ window.removeEventListener("resize", fit);
+ ro.disconnect();
+ };
+ }, []);
+
+ return (
+ (OPTS.map((o) => o.defaultIndex ?? 0));
+ const [open, setOpen] = useState(-1);
+ const [styleOpen, setStyleOpen] = useState(false);
+ const [prompt, setPrompt] = useState("");
+ const inputRef = useRef(null);
+
+ const styleRow = OPTS.findIndex((o) => o.modal);
+ const genderIndex = sel[0] ?? 0;
+ const gender = (OPTS[0]!.items[genderIndex] as "男性向" | "女性向") ?? "男性向";
+ const phrases = EXAMPLE_PHRASES[gender];
+
+ /* close any open dropdown on outside click */
+ useEffect(() => {
+ const h = (e: MouseEvent) => {
+ const target = e.target as HTMLElement | null;
+ if (!target?.closest?.(".ip-cat")) setOpen(-1);
+ };
+ document.addEventListener("mousedown", h);
+ return () => document.removeEventListener("mousedown", h);
+ }, []);
+
+ const start = () => {
+ const userPrompt = prompt.trim();
+ const artStyle = OPTS[1]!.items[sel[1] ?? 0]!;
+ const plotStyle = OPTS[2]!.items[sel[2] ?? 1]!;
+ const voice = OPTS[3]!.items[sel[3] ?? 1]!;
+ const pace = OPTS[4]!.items[sel[4] ?? 1]!;
+
+ const worldSetting = [
+ `这是一款面向【${gender}】观众的 AI 交互剧情游戏。`,
+ `剧情风格：${plotStyle}。内容节奏：${pace}。`,
+ userPrompt ? `玩家给出的故事种子：「${userPrompt}」。` : "",
+ `请依据上述设定，以极致的戏剧张力与细腻的情感起伏，为玩家编织精彩的故事分支与对话。`,
+ ]
+ .filter(Boolean)
+ .join("\n");
+
+ const styleMap: Record = {
+ 二次元: "唯美二次元动漫插画，日系 galgame 精致质感，柔和温暖的自然光照。",
+ 吉卜力: "吉卜力工作室风格，手绘动画质感，柔和水彩底色，温暖治愈的氛围。",
+ 真实系: "真实电影感，柔和自然光照，胶片颗粒。",
+ 超写实: "超写实人像与场景，电影级布光，皮肤与材质细节精致。",
+ 水彩: "水彩插画，湿润晕染笔触，纸纹底色。",
+ 像素风: "像素风格，复古游戏 16-bit 调色，方块化几何造型。",
+ 日系动画: "现代日系动画 cel-shading，硬光阴影分层，赛璐璐风。",
+ "3D 渲染": "3D 渲染卡通风格，柔和次表面散射，干净的电影级布光。",
+ 蒸汽朋克: "蒸汽朋克美学，铜色齿轮与蒸汽，工业革命氛围。",
+ 玄幻: "国风玄幻插画，仙气缭绕，群山烟雨与神兽萦绕。",
+ 国风水墨: "国潮唯美古风插画，水墨微晕渲染，仙侠浪漫色彩，极具东方神韵。",
+ 赛博朋克: "赛博朋克都市，霓虹反射湿润街道，电子义体高光。",
+ };
+ // 「自动」→ fall back to 二次元 (project default). Plain prompts like
+ // "由模型自动判断画风" are not understood by FLUX — it just paints them
+ // literally, so we'd rather lock in a sensible default.
+ const effectiveStyle = artStyle === "自动" ? "二次元" : artStyle;
+ const styleGuide = styleMap[effectiveStyle] ?? styleMap["二次元"]!;
+ const audioEnabled = voice === "开启";
+
+ sessionStorage.setItem(
+ "yume:custom",
+ JSON.stringify({ worldSetting, styleGuide, audioEnabled }),
+ );
+ router.push("/play?custom=1");
+ };
+
+ const onCardClick = (seed?: string) => {
+ if (seed) setPrompt(seed);
+ inputRef.current?.focus();
+ };
+
+ return (
+ >(new Map());
+ // User-toggled "语音配音" from the homepage. Defaults to true for back-compat
+ // when older sessionStorage payloads omit the field. Mutated once in
+ // bootstrap and read by fetchBeatAudio to early-return without any /api call.
+ const audioEnabledRef = useRef(true);
// Mirrors for use inside async handlers (closure-stable)
const sessionRef = useRef(null);
@@ -317,6 +321,7 @@ function PlayInner() {
sess: Session,
beat: { id: string; speaker?: string; line?: string; lineDelivery?: string },
): Promise => {
+ if (!audioEnabledRef.current) return; // user toggled 语音配音 → 关闭
if (!beat.speaker || !beat.line) return;
const speaker = sess.characters.find((c) => c.name === beat.speaker);
if (!speaker?.voice) return; // not yet provisioned — server can't synth anyway
@@ -450,7 +455,14 @@ function PlayInner() {
const stored = sessionStorage.getItem("yume:custom");
if (stored) {
try {
- payload = JSON.parse(stored);
+ const parsed = JSON.parse(stored) as {
+ worldSetting: string;
+ styleGuide: string;
+ audioEnabled?: boolean;
+ };
+ payload = { worldSetting: parsed.worldSetting, styleGuide: parsed.styleGuide };
+ // default true for older payloads that omit the flag
+ audioEnabledRef.current = parsed.audioEnabled !== false;
} catch {
payload = null;
}
diff --git a/apps/web/public/home/gallery0.webp b/apps/web/public/home/gallery0.webp
new file mode 100644
index 0000000..3db39da
Binary files /dev/null and b/apps/web/public/home/gallery0.webp differ
diff --git a/apps/web/public/home/gallery1.webp b/apps/web/public/home/gallery1.webp
new file mode 100644
index 0000000..3c83e90
Binary files /dev/null and b/apps/web/public/home/gallery1.webp differ
diff --git a/apps/web/public/home/gallery10.webp b/apps/web/public/home/gallery10.webp
new file mode 100644
index 0000000..7cb9637
Binary files /dev/null and b/apps/web/public/home/gallery10.webp differ
diff --git a/apps/web/public/home/gallery11.webp b/apps/web/public/home/gallery11.webp
new file mode 100644
index 0000000..7594c0e
Binary files /dev/null and b/apps/web/public/home/gallery11.webp differ
diff --git a/apps/web/public/home/gallery12.webp b/apps/web/public/home/gallery12.webp
new file mode 100644
index 0000000..e6fb238
Binary files /dev/null and b/apps/web/public/home/gallery12.webp differ
diff --git a/apps/web/public/home/gallery13.webp b/apps/web/public/home/gallery13.webp
new file mode 100644
index 0000000..235f82c
Binary files /dev/null and b/apps/web/public/home/gallery13.webp differ
diff --git a/apps/web/public/home/gallery14.webp b/apps/web/public/home/gallery14.webp
new file mode 100644
index 0000000..6f60940
Binary files /dev/null and b/apps/web/public/home/gallery14.webp differ
diff --git a/apps/web/public/home/gallery15.webp b/apps/web/public/home/gallery15.webp
new file mode 100644
index 0000000..1ecde7d
Binary files /dev/null and b/apps/web/public/home/gallery15.webp differ
diff --git a/apps/web/public/home/gallery2.webp b/apps/web/public/home/gallery2.webp
new file mode 100644
index 0000000..d696835
Binary files /dev/null and b/apps/web/public/home/gallery2.webp differ
diff --git a/apps/web/public/home/gallery3.webp b/apps/web/public/home/gallery3.webp
new file mode 100644
index 0000000..47cb349
Binary files /dev/null and b/apps/web/public/home/gallery3.webp differ
diff --git a/apps/web/public/home/gallery4.webp b/apps/web/public/home/gallery4.webp
new file mode 100644
index 0000000..0bac913
Binary files /dev/null and b/apps/web/public/home/gallery4.webp differ
diff --git a/apps/web/public/home/gallery5.webp b/apps/web/public/home/gallery5.webp
new file mode 100644
index 0000000..4548659
Binary files /dev/null and b/apps/web/public/home/gallery5.webp differ
diff --git a/apps/web/public/home/gallery6.webp b/apps/web/public/home/gallery6.webp
new file mode 100644
index 0000000..ae925e1
Binary files /dev/null and b/apps/web/public/home/gallery6.webp differ
diff --git a/apps/web/public/home/gallery7.webp b/apps/web/public/home/gallery7.webp
new file mode 100644
index 0000000..49ad884
Binary files /dev/null and b/apps/web/public/home/gallery7.webp differ
diff --git a/apps/web/public/home/gallery8.webp b/apps/web/public/home/gallery8.webp
new file mode 100644
index 0000000..a39e02a
Binary files /dev/null and b/apps/web/public/home/gallery8.webp differ
diff --git a/apps/web/public/home/gallery9.webp b/apps/web/public/home/gallery9.webp
new file mode 100644
index 0000000..f2c3913
Binary files /dev/null and b/apps/web/public/home/gallery9.webp differ
diff --git a/apps/web/public/home/hero0.webp b/apps/web/public/home/hero0.webp
new file mode 100644
index 0000000..ca01a86
Binary files /dev/null and b/apps/web/public/home/hero0.webp differ
diff --git a/apps/web/public/home/hero0_f.webp b/apps/web/public/home/hero0_f.webp
new file mode 100644
index 0000000..2f134ab
Binary files /dev/null and b/apps/web/public/home/hero0_f.webp differ
diff --git a/apps/web/public/home/hero1.webp b/apps/web/public/home/hero1.webp
new file mode 100644
index 0000000..a961d8b
Binary files /dev/null and b/apps/web/public/home/hero1.webp differ
diff --git a/apps/web/public/home/hero1_f.webp b/apps/web/public/home/hero1_f.webp
new file mode 100644
index 0000000..109d21a
Binary files /dev/null and b/apps/web/public/home/hero1_f.webp differ
diff --git a/apps/web/public/home/hero2.webp b/apps/web/public/home/hero2.webp
new file mode 100644
index 0000000..cf96cb2
Binary files /dev/null and b/apps/web/public/home/hero2.webp differ
diff --git a/apps/web/public/home/hero2_f.webp b/apps/web/public/home/hero2_f.webp
new file mode 100644
index 0000000..11b8883
Binary files /dev/null and b/apps/web/public/home/hero2_f.webp differ
diff --git a/apps/web/public/home/hero3.webp b/apps/web/public/home/hero3.webp
new file mode 100644
index 0000000..9628702
Binary files /dev/null and b/apps/web/public/home/hero3.webp differ
diff --git a/apps/web/public/home/hero3_f.webp b/apps/web/public/home/hero3_f.webp
new file mode 100644
index 0000000..df46e9a
Binary files /dev/null and b/apps/web/public/home/hero3_f.webp differ
diff --git a/apps/web/public/home/hero4.webp b/apps/web/public/home/hero4.webp
new file mode 100644
index 0000000..cdf0195
Binary files /dev/null and b/apps/web/public/home/hero4.webp differ
diff --git a/apps/web/public/home/hero4_f.webp b/apps/web/public/home/hero4_f.webp
new file mode 100644
index 0000000..ff104ca
Binary files /dev/null and b/apps/web/public/home/hero4_f.webp differ
diff --git a/apps/web/public/home/hero5.webp b/apps/web/public/home/hero5.webp
new file mode 100644
index 0000000..fa7ed8e
Binary files /dev/null and b/apps/web/public/home/hero5.webp differ
diff --git a/apps/web/public/home/hero5_f.webp b/apps/web/public/home/hero5_f.webp
new file mode 100644
index 0000000..1cb6336
Binary files /dev/null and b/apps/web/public/home/hero5_f.webp differ
diff --git a/apps/web/public/home/hero6.webp b/apps/web/public/home/hero6.webp
new file mode 100644
index 0000000..82ac365
Binary files /dev/null and b/apps/web/public/home/hero6.webp differ
diff --git a/apps/web/public/home/hero6_f.webp b/apps/web/public/home/hero6_f.webp
new file mode 100644
index 0000000..54f3d77
Binary files /dev/null and b/apps/web/public/home/hero6_f.webp differ
diff --git a/apps/web/scripts/generate-home-images.mjs b/apps/web/scripts/generate-home-images.mjs
new file mode 100644
index 0000000..1c7d067
--- /dev/null
+++ b/apps/web/scripts/generate-home-images.mjs
@@ -0,0 +1,373 @@
+#!/usr/bin/env node
+/**
+ * One-off generator: produces 23 AI cards (7 hero + 16 gallery) for the
+ * InfiPlot homepage via Runware FLUX.2 and writes them as PNGs under
+ * apps/web/public/home/.
+ *
+ * Reads IMAGE_BASE_URL / IMAGE_API_KEY / IMAGE_MODEL from apps/web/.env.local.
+ *
+ * Run once:
+ * node apps/web/scripts/generate-home-images.mjs
+ *
+ * Idempotent: skips any PNG that already exists. Pass --force to regenerate.
+ */
+
+import { fileURLToPath } from "node:url";
+import { dirname, resolve } from "node:path";
+import { readFileSync, existsSync, mkdirSync, writeFileSync, statSync } from "node:fs";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const WEB_ROOT = resolve(__dirname, "..");
+const ENV_FILE = resolve(WEB_ROOT, ".env.local");
+const OUT_DIR = resolve(WEB_ROOT, "public", "home");
+
+const FORCE = process.argv.includes("--force");
+
+/* ---------- env loading (tiny .env parser) ---------- */
+function loadEnv(path) {
+ const txt = readFileSync(path, "utf8");
+ const env = {};
+ for (const raw of txt.split(/\r?\n/)) {
+ const line = raw.trim();
+ if (!line || line.startsWith("#")) continue;
+ const eq = line.indexOf("=");
+ if (eq < 0) continue;
+ const k = line.slice(0, eq).trim();
+ let v = line.slice(eq + 1).trim();
+ if ((v.startsWith('"') && v.endsWith('"')) || (v.startsWith("'") && v.endsWith("'"))) {
+ v = v.slice(1, -1);
+ }
+ env[k] = v;
+ }
+ return env;
+}
+
+const env = loadEnv(ENV_FILE);
+const BASE_URL = env.IMAGE_BASE_URL;
+const API_KEY = env.IMAGE_API_KEY;
+const MODEL = env.IMAGE_MODEL;
+if (!BASE_URL || !API_KEY || !MODEL) {
+ console.error("Missing IMAGE_BASE_URL / IMAGE_API_KEY / IMAGE_MODEL in", ENV_FILE);
+ process.exit(2);
+}
+if (!BASE_URL.includes("runware.ai")) {
+ console.error("This script assumes Runware. Got:", BASE_URL);
+ process.exit(2);
+}
+
+/* ---------- prompts ---------- */
+
+const BASE_QUALITY =
+ "masterpiece, best quality, highly detailed, cinematic lighting, soft warm color grading, intricate background, no text, no watermark";
+
+// 7 hero cards — varied flagship moods that showcase the platform's range
+const HERO = [
+ {
+ name: "hero0",
+ prompt:
+ "anime visual novel cover art, two high school students standing under cherry blossom petals at dusk, warm golden sunset light, soft watercolor texture, japanese galgame illustration, widescreen composition",
+ w: 1024,
+ h: 640,
+ },
+ {
+ name: "hero1",
+ prompt:
+ "post-apocalyptic wasteland anime, lone scavenger silhouette against rusted mecha mountain, golden dust storm sweeping across the dunes, cinematic widescreen, anime concept art, dramatic backlight",
+ w: 1024,
+ h: 640,
+ },
+ {
+ name: "hero2",
+ prompt:
+ "anime xianxia cultivator boy in flowing white robes standing on a floating mountain peak above a sea of clouds, vermillion banners fluttering, vertical poster composition, chinese mythology, galgame illustration",
+ w: 768,
+ h: 1024,
+ },
+ {
+ name: "hero3",
+ prompt:
+ "anime visual novel scene, southern chinese small town in june rain, a transfer student looking back from a rainy classroom window, ceiling fan in background, soft warm afternoon tones, slice of life galgame illustration",
+ w: 1024,
+ h: 832,
+ },
+ {
+ name: "hero4",
+ prompt:
+ "cyberpunk anime portrait, amnesiac detective standing in neon-soaked rainy alley of an east-asian metropolis in 2087, holographic signs reflecting on wet pavement, vertical composition, blade runner palette, anime illustration",
+ w: 768,
+ h: 1024,
+ },
+ {
+ name: "hero5",
+ prompt:
+ "anime mystery scene, late-night high school library underground chamber, flickering candlelight, a class president kneeling before a glowing rune circle on the stone floor, gothic galgame style, mysterious teal-green glow",
+ w: 1024,
+ h: 640,
+ },
+ {
+ name: "hero6",
+ prompt:
+ "anime isekai cathedral scene, silver-haired holy maiden with tearful eyes kneeling before a glowing magic summoning circle, golden cathedral light streaming through stained glass, summoned hero just appearing in modern school uniform, warm galgame illustration",
+ w: 1024,
+ h: 640,
+ },
+];
+
+// 7 female-oriented hero cards — same slot aspect ratios as HERO above,
+// otome / josei / xianxia / cyberpunk romance angles
+const HERO_F = [
+ {
+ name: "hero0_f",
+ prompt:
+ "anime josei otome game illustration, beautiful female protagonist in ornate eastern hanfu silk robes, behind her a tall stoic regent prince in dark embroidered robes leaning down to clasp a red jade bracelet on her wrist, ancient chinese palace interior, soft candlelight, romantic widescreen composition",
+ w: 1024,
+ h: 640,
+ },
+ {
+ name: "hero1_f",
+ prompt:
+ "anime modern romance scene, young woman in pajamas sitting on a bed at dawn, golden light through curtains, looking at her phone in shock as if she has just been pulled back in time, soft warm tones, melancholic otome illustration, widescreen",
+ w: 1024,
+ h: 640,
+ },
+ {
+ name: "hero2_f",
+ prompt:
+ "anime villainess otome game character, beautiful young noblewoman with elaborate golden ringlet hair and crimson ballgown, standing alone in a baroque royal academy ballroom while other noble girls glare from the background, dramatic chandelier light, vertical poster composition, otome game cover art",
+ w: 768,
+ h: 1024,
+ },
+ {
+ name: "hero3_f",
+ prompt:
+ "anime visual novel scene, female high school transfer student standing on a rainy southern chinese town rooftop, sharing her umbrella with a moody boy reading poetry on the railing, soft warm afternoon palette, slice of life otome illustration",
+ w: 1024,
+ h: 832,
+ },
+ {
+ name: "hero4_f",
+ prompt:
+ "anime josei coronation scene, beautiful young empress in ornate ceremonial robes seated on a high eastern throne, head turned to glance at a handsome attendant standing in the shadowed pillars below, vertical composition, opulent silks and gold, otome game illustration",
+ w: 768,
+ h: 1024,
+ },
+ {
+ name: "hero5_f",
+ prompt:
+ "anime wuxia swordswoman in flowing light hanfu, jade hairpin, white sword raised mid-stance, cherry blossoms swirling around her, mountain pavilion in the background at golden hour, dynamic widescreen otome wuxia illustration",
+ w: 1024,
+ h: 640,
+ },
+ {
+ name: "hero6_f",
+ prompt:
+ "anime visual novel scene, female high school student standing on a sunset rooftop looking up at a tall handsome senior in school uniform, warm orange sky, golden hour, romantic galgame otome cover art, widescreen",
+ w: 1024,
+ h: 640,
+ },
+];
+
+// 16 gallery cards — broader sweep of genres / moods showcased by the platform
+const GALLERY = [
+ {
+ name: "gallery0",
+ prompt:
+ "anime girl in summer yukata watching fireworks at a japanese festival night, warm bokeh lanterns, vertical composition, soft watercolor, slice of life galgame",
+ w: 768,
+ h: 1024,
+ },
+ {
+ name: "gallery1",
+ prompt:
+ "cyberpunk neon city skyline at rainy night, flying vehicles, holographic billboards in chinese characters, anime widescreen, cinematic",
+ w: 1024,
+ h: 640,
+ },
+ {
+ name: "gallery2",
+ prompt:
+ "anime two students standing on empty rural train platform after school, golden hour, slice of life galgame illustration, cinematic widescreen, warm tones",
+ w: 1024,
+ h: 832,
+ },
+ {
+ name: "gallery3",
+ prompt:
+ "anime mage girl in star-embroidered robes casting starlight spell, ancient fantasy library, vertical composition, magical particles, painterly illustration",
+ w: 768,
+ h: 1024,
+ },
+ {
+ name: "gallery4",
+ prompt:
+ "anime mecha pilot girl strapped in cockpit, holographic interfaces around her, dramatic red emergency lighting, intense expression, mecha anime style",
+ w: 1024,
+ h: 640,
+ },
+ {
+ name: "gallery5",
+ prompt:
+ "anime detective girl in long trench coat under a flickering streetlamp at midnight, noir mood, vertical composition, rain mist, cinematic anime",
+ w: 768,
+ h: 1024,
+ },
+ {
+ name: "gallery6",
+ prompt:
+ "anime cyberpunk couple sharing a quiet moment in a neon-lit rainy alley, holographic umbrella, electric blue and pink reflections, romantic galgame illustration",
+ w: 1024,
+ h: 832,
+ },
+ {
+ name: "gallery7",
+ prompt:
+ "anime sword duel between two xianxia cultivators in a bamboo grove, motion blur on swords, falling bamboo leaves, dynamic action composition",
+ w: 1024,
+ h: 640,
+ },
+ {
+ name: "gallery8",
+ prompt:
+ "anime princess in ornate eastern gown seated on an ancient carved throne, candlelight, intricate background tapestries, vertical poster composition, fantasy galgame",
+ w: 768,
+ h: 1024,
+ },
+ {
+ name: "gallery9",
+ prompt:
+ "anime classroom afternoon, sun streaming through windows onto empty desks, a single uniformed student writing in a notebook, slice of life watercolor, nostalgic",
+ w: 1024,
+ h: 640,
+ },
+ {
+ name: "gallery10",
+ prompt:
+ "anime girl reading a folded letter under a cherry blossom tree, melancholic expression, petals drifting, soft warm watercolor, slice of life galgame",
+ w: 1024,
+ h: 832,
+ },
+ {
+ name: "gallery11",
+ prompt:
+ "anime moon goddess descending from a starlit sky, silver hair flowing, ethereal aurora glow, dreamy painterly illustration, vertical composition",
+ w: 768,
+ h: 1024,
+ },
+ {
+ name: "gallery12",
+ prompt:
+ "anime samurai standing alone under a blood red full moon, sakura petals carried on the wind, katana drawn, dramatic backlight, cinematic widescreen",
+ w: 1024,
+ h: 640,
+ },
+ {
+ name: "gallery13",
+ prompt:
+ "anime witch girl brewing a glowing potion in a candlelit forest hut, hanging dried herbs, magical sparks rising from the cauldron, vertical composition",
+ w: 768,
+ h: 1024,
+ },
+ {
+ name: "gallery14",
+ prompt:
+ "anime beach summer scene, two girlfriends sitting on the sand watching a pink-orange sunset, gentle waves, slice of life galgame illustration",
+ w: 1024,
+ h: 640,
+ },
+ {
+ name: "gallery15",
+ prompt:
+ "anime hacker girl in a dim apartment surrounded by glowing screens, neon cyan reflections on her face, intense focus, cyberpunk galgame style",
+ w: 1024,
+ h: 832,
+ },
+];
+
+const ALL = [...HERO, ...HERO_F, ...GALLERY];
+
+/* ---------- Runware caller ---------- */
+
+async function generate({ prompt, w, h }) {
+ const body = [
+ {
+ taskType: "imageInference",
+ taskUUID: crypto.randomUUID(),
+ model: MODEL,
+ positivePrompt: `${prompt}, ${BASE_QUALITY}`,
+ width: w,
+ height: h,
+ steps: 4,
+ CFGScale: 3.5,
+ numberResults: 1,
+ outputType: "base64Data",
+ outputFormat: "PNG",
+ },
+ ];
+ const res = await fetch(BASE_URL.replace(/\/$/, ""), {
+ method: "POST",
+ headers: {
+ "Content-Type": "application/json",
+ Authorization: `Bearer ${API_KEY}`,
+ },
+ body: JSON.stringify(body),
+ });
+ const text = await res.text();
+ let json;
+ try {
+ json = JSON.parse(text);
+ } catch {
+ throw new Error(`HTTP ${res.status}: ${text.slice(0, 300)}`);
+ }
+ if (json.errors?.length) {
+ const e = json.errors[0];
+ throw new Error(`Runware [${e.code ?? "?"}]: ${e.message ?? "no msg"}`);
+ }
+ const b64 = json.data?.[0]?.imageBase64Data;
+ if (!b64) throw new Error(`No image data: ${text.slice(0, 200)}`);
+ return Buffer.from(b64, "base64");
+}
+
+/* ---------- main loop ---------- */
+
+if (!existsSync(OUT_DIR)) mkdirSync(OUT_DIR, { recursive: true });
+
+const total = ALL.length;
+let done = 0;
+let skipped = 0;
+let failed = 0;
+const t0 = Date.now();
+
+console.log(`[gen] ${total} cards → ${OUT_DIR}`);
+
+for (const card of ALL) {
+ const out = resolve(OUT_DIR, `${card.name}.png`);
+ const webpOut = resolve(OUT_DIR, `${card.name}.webp`);
+ if (!FORCE && (existsSync(out) || existsSync(webpOut))) {
+ const path = existsSync(out) ? out : webpOut;
+ const size = statSync(path).size;
+ if (size > 1024) {
+ skipped++;
+ done++;
+ console.log(`[${done}/${total}] skip ${card.name} (${size} B)`);
+ continue;
+ }
+ }
+ const label = `[${++done}/${total}] ${card.name}`;
+ process.stdout.write(`${label} … `);
+ const t = Date.now();
+ try {
+ const buf = await generate(card);
+ writeFileSync(out, buf);
+ process.stdout.write(`ok ${buf.length} B in ${Math.round((Date.now() - t) / 100) / 10}s\n`);
+ } catch (e) {
+ failed++;
+ process.stdout.write(`FAIL: ${e.message}\n`);
+ }
+}
+
+console.log(
+ `\n[gen] done in ${Math.round((Date.now() - t0) / 1000)}s — generated ${
+ done - skipped - failed
+ } / skipped ${skipped} / failed ${failed}`,
+);
+process.exit(failed ? 1 : 0);
diff --git a/apps/web/scripts/optimize-home-images.mjs b/apps/web/scripts/optimize-home-images.mjs
new file mode 100644
index 0000000..9b76d1e
--- /dev/null
+++ b/apps/web/scripts/optimize-home-images.mjs
@@ -0,0 +1,42 @@
+#!/usr/bin/env node
+/**
+ * Compresses the freshly generated apps/web/public/home/*.png into much
+ * smaller .webp files alongside them, then deletes the originals.
+ * Output webps target ~1200px on the long edge and quality 78.
+ */
+
+import { readdirSync, statSync, unlinkSync } from "node:fs";
+import { resolve, dirname, extname, basename } from "node:path";
+import { fileURLToPath } from "node:url";
+import sharp from "sharp";
+
+const __dirname = dirname(fileURLToPath(import.meta.url));
+const DIR = resolve(__dirname, "..", "public", "home");
+
+const MAX_EDGE = 1200;
+const QUALITY = 78;
+
+const files = readdirSync(DIR).filter((f) => f.toLowerCase().endsWith(".png"));
+let totalIn = 0;
+let totalOut = 0;
+
+for (const f of files) {
+ const inPath = resolve(DIR, f);
+ const outPath = resolve(DIR, basename(f, extname(f)) + ".webp");
+ const inSize = statSync(inPath).size;
+ totalIn += inSize;
+
+ const img = sharp(inPath);
+ const meta = await img.metadata();
+ const longEdge = Math.max(meta.width ?? 0, meta.height ?? 0);
+ const resized = longEdge > MAX_EDGE ? img.resize({ width: meta.width >= meta.height ? MAX_EDGE : undefined, height: meta.height > meta.width ? MAX_EDGE : undefined }) : img;
+ await resized.webp({ quality: QUALITY, effort: 5 }).toFile(outPath);
+ const outSize = statSync(outPath).size;
+ totalOut += outSize;
+ console.log(`${f.padEnd(16)} ${(inSize / 1024).toFixed(0).padStart(5)} KB → ${(outSize / 1024).toFixed(0).padStart(4)} KB`);
+ unlinkSync(inPath);
+}
+
+console.log(
+ `\nTotal: ${(totalIn / 1024 / 1024).toFixed(1)} MB → ${(totalOut / 1024 / 1024).toFixed(2)} MB`,
+);
+
-
-
-
-
-
-
+
+ );
+}
+
+/* ---------- typewriter ---------- */
+
+function Typewriter({ phrases }: { phrases: string[] }) {
+ const [txt, setTxt] = useState("");
+
+ useEffect(() => {
+ let p = 0;
+ let i = 0;
+ let del = false;
+ let timer: ReturnType
+ {image ? (
+ 
+ ) : (
+
+
+
-
- {title}
+{outline}
-
-
- - 四 扇 门 -
-- 择 一 世 界 · 或 自 行 编 织 -
-
- {PRESETS.map((p, i) => (
-
-
-
- {ORDINALS[3]}
-
-
-
-
-
-
- 编 织
-
-
- - 无 题 -
-- 带来你自己的世界。用你自己的话讲述它。 -
-
-
- - 题 跋 · I -
-- 一场关于生成式叙事的小型开源实验。一键 Vercel 自建。 -
-
-
- - 题 跋 · II -
--
-
- 文 · 大语言模型 -
- 图 · 生成式渲染 -
- 感知 · 视觉解读 -
-
- - 题 跋 · III -
-- 三者各自独立配置 — 任何 OpenAI 兼容端点皆可。 -
-
+
+ {open && (
+
+ );
+}
+
+/* ---------- style picker modal ---------- */
+
+function StyleModal({
+ items,
+ value,
+ onPick,
+ onClose,
+}: {
+ items: string[];
+ value: number;
+ onPick: (i: number) => void;
+ onClose: () => void;
+}) {
+ const [q, setQ] = useState("");
+ const [shown, setShown] = useState(false);
+ useEffect(() => {
+ const id = requestAnimationFrame(() => setShown(true));
+ return () => cancelAnimationFrame(id);
+ }, []);
+ const close = () => {
+ setShown(false);
+ setTimeout(onClose, 300);
+ };
+ const list = items.map((name, i) => ({ name, i })).filter((x) => x.name.includes(q.trim()));
+ return (
+
+ {items.map((it, i) => (
+
+ ))}
+
+
+ )}
+
+
+ );
+}
+
+/* ---------- scale-to-fit hero canvas ---------- */
+
+function HeroCanvas({ children }: { children: React.ReactNode }) {
+ const stageRef = useRef e.stopPropagation()}>
+
+
+
+
+
+ 选择绘画风格
+ 默认「自动」· 由模型根据 prompt 判断风格
+
+
+ setQ(e.target.value)}
+ placeholder="搜索风格…"
+ autoFocus
+ />
+ ⌕
+
+
+
+ {list.map(({ name, i }) => (
+
+ {
+ onPick(i);
+ close();
+ }}
+ >
+
+ ))}
+ {list.length === 0 &&
+
+ {name}
+ 没有匹配的风格
}
+
+
+ );
+}
+
+/* ---------- page ---------- */
+
+export default function HomePage() {
+ const router = useRouter();
+
+ const [sel, setSel] = useState
+ {children}
+
+
+ {/* ================== HERO (scale-to-fit 1900×980 canvas) ================== */}
+
+ {/* tagline */}
+
+
+ {/* ================== SCROLL HINT + GALLERY ================== */}
+ setSel((s) => s.map((v, j) => (j === styleRow ? i : v)))}
+ onClose={() => setStyleOpen(false)}
+ />
+ )}
);
}
diff --git a/apps/web/app/play/page.tsx b/apps/web/app/play/page.tsx
index 88b0308..5ecd243 100644
--- a/apps/web/app/play/page.tsx
+++ b/apps/web/app/play/page.tsx
@@ -262,6 +262,10 @@ function PlayInner() {
// changes so stale in-flight requests can't poison the new scene's map
// (beat ids like "b1" are scene-local and would collide across scenes).
const beatAudioAbortRef = useRef
+
+
+ {/* prompt bar */}
+
+ 今天想穿越到什么故事？
+
+
+
+
+
+ {/* category selectors */}
+
+ {OPTS.map((o, r) => (
+ {
+ if (o.modal) {
+ setStyleOpen(true);
+ } else {
+ setOpen(open === r ? -1 : r);
+ }
+ }}
+ onPick={(i) => {
+ setSel((s) => s.map((v, j) => (j === r ? i : v)));
+ setOpen(-1);
+ }}
+ />
+ ))}
+
+
+ {/* hero scattered cards — content switches by 性向 */}
+ {HERO_SLOTS.map((slot, i) => {
+ const content = HERO_CONTENT[gender][i]!;
+ const suffix = gender === "女性向" ? "_f" : "";
+ return (
+ onCardClick(content.outline)}
+ >
+
+ );
+ })}
+
+
+ ↓
+ 继续下滑 · 加载更多示例卡片
+
+
+
+ {GALLERY.map((g, i) => (
+
+
+ {/* ================== PROJECT INTRO ================== */}
+ onCardClick(g.outline)}
+ >
+
+ ))}
+
+
+
+ {styleOpen && styleRow >= 0 && (
+ INFIPLOT · AI 实时交互剧情游戏 · Demo
+
+ + InfiPlot 是一款用 AI 实时生成内容的交互式剧情游戏 —— 图片、语音与剧情分支都在游玩过程中即时生成。我们希望探索多模态模型在「直接生成图片、视频」这类 + one-shot 能力之外，更多的可能性。 +
++ 我们希望通过这个页面，与赞助商、未来的团队成员以及内测用户建立联系。 +
+ +团 队
+ + 我们是一群来自清华大学等海内外高校、充满激情的年轻人，目前仍处于早期阶段。产品还在打磨，团队也在招募成员。 +
+ +加 入 / 合 作
+ + 如有意加入团队，请将简历发送至 hi@infiplot.com +
+ +联 系 方 式
+ + 邮箱 hi@infiplot.com · Founder X / Twitter @yzh_im +
+ +内 测 用 户 群
+ + 群二维码 / 邀请链接 （待补充） +
+ +
+ 内测期间本产品可免费使用，但稳定性可能会随并发用户数量而有波动。欢迎赞助商联系我们，提供更多算力资源和商讨长期合作事宜。
+
+ 内测期间生成的内容不会被保存，如有需要，请通过录屏或截图等方式保存游玩体验，并记录下生成故事时的提示词与风格选项等。
+
+ AI 生成的内容不代表本团队立场。
+