docs: add hero header to READMEs and make Chinese the default

- Add centered hero block: SVG wordmark banner, short tagline, and
  project-stat badges (stars/watchers/forks/issues + Live Demo, License,
  LINUX DO forum backlink)
- Swap default README to Chinese (targeting CN developers); English
  moves to README.en.md, Japanese stays README.ja.md
- Add SVG wordmark banner at docs/banner.svg
- Cross-link language switchers and fix per-language deploy envLink anchors

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
This commit is contained in:
yuanzonghao
2026-06-02 20:35:34 +08:00
committed by Zonghao Yuan
parent ee3a614d26
commit 236f5494c1
5 changed files with 307 additions and 223 deletions
+168
View File
@@ -0,0 +1,168 @@
<div align="center">
<img src="docs/banner.svg" alt="InfiPlot" width="100%">
<p><b>An interactive story game, generated in real time for you</b></p>
[![Stars](https://img.shields.io/github/stars/zonghaoyuan/infiplot?style=flat-square)](https://github.com/zonghaoyuan/infiplot/stargazers)
[![Watchers](https://img.shields.io/github/watchers/zonghaoyuan/infiplot?style=flat-square)](https://github.com/zonghaoyuan/infiplot/watchers)
[![Forks](https://img.shields.io/github/forks/zonghaoyuan/infiplot?style=flat-square)](https://github.com/zonghaoyuan/infiplot/network)
[![Issues](https://img.shields.io/github/issues/zonghaoyuan/infiplot?style=flat-square)](https://github.com/zonghaoyuan/infiplot/issues)
[![Live Demo](https://img.shields.io/badge/Live_Demo-infiplot.com-D97A2E?style=flat-square&logo=vercel&logoColor=white)](https://infiplot.com)
[![License](https://img.shields.io/github/license/zonghaoyuan/infiplot?style=flat-square)](LICENSE)
[![LINUX DO](https://img.shields.io/badge/LINUX-DO-FFB003?style=flat-square&logo=data:image/svg%2bxml;base64,DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiPjxwYXRoIGQ9Ik00Ni44Mi0uMDU1aDYuMjVxMjMuOTY5IDIuMDYyIDM4IDIxLjQyNmM1LjI1OCA3LjY3NiA4LjIxNSAxNi4xNTYgOC44NzUgMjUuNDV2Ni4yNXEtMi4wNjQgMjMuOTY4LTIxLjQzIDM4LTExLjUxMiA3Ljg4NS0yNS40NDUgOC44NzRoLTYuMjVxLTIzLjk3LTIuMDY0LTM4LjAwNC0yMS40M1EuOTcxIDY3LjA1Ni0uMDU0IDUzLjE4di02LjQ3M0MxLjM2MiAzMC43ODEgOC41MDMgMTguMTQ4IDIxLjM3IDguODE3IDI5LjA0NyAzLjU2MiAzNy41MjcuNjA0IDQ2LjgyMS0uMDU2IiBzdHlsZT0ic3Ryb2tlOm5vbmU7ZmlsbC1ydWxlOmV2ZW5vZGQ7ZmlsbDojZWNlY2VjO2ZpbGwtb3BhY2l0eToxIi8+PHBhdGggZD0iTTQ3LjI2NiAyLjk1N3EyMi41My0uNjUgMzcuNzc3IDE1LjczOGE0OS43IDQ5LjcgMCAwIDEgNi44NjcgMTAuMTU3cS00MS45NjQuMjIyLTgzLjkzIDAgOS43NS0xOC42MTYgMzAuMDI0LTI0LjM4N2E2MSA2MSAwIDAgMSA5LjI2Mi0xLjUwOCIgc3R5bGU9InN0cm9rZTpub25lO2ZpbGwtcnVsZTpldmVub2RkO2ZpbGw6IzE5MTkxOTtmaWxsLW9wYWNpdHk6MSIvPjxwYXRoIGQ9Ik03Ljk4IDcwLjkyNmMyNy45NzctLjAzNSA1NS45NTQgMCA4My45My4xMTNRODMuNDI2IDg3LjQ3MyA2Ni4xMyA5NC4wODZxLTE4LjgxIDYuNTQ0LTM2LjgzMi0xLjg5OC0xNC4yMDMtNy4wOS0yMS4zMTctMjEuMjYyIiBzdHlsZT0ic3Ryb2tlOm5vbmU7ZmlsbC1ydWxlOmV2ZW5vZGQ7ZmlsbDojZjlhZjAwO2ZpbGwtb3BhY2l0eToxIi8+PC9zdmc+)](https://linux.do)
[简体中文](README.md) · English · [日本語](README.ja.md)
</div>
---
## ⚡ Overview
InfiPlot is an interactive story game with content generated by AI in real time. There are no pre-written plots and no pre-made characters — everything is generated on demand, tailored to you.
In one line: what we're building is an AI-generated, real-time take on *Love Is All Around* (《完蛋!我被美女包围了!》).
Whether you're a six-year-old, a twenty-something, thirty-five, or sixty, there's a fantasy here that belongs to you and you alone:
Learn magic in the world of Harry Potter; become the one everyone at school adores and confesses to; publish paper after paper in top journals and conferences with grant money to spare; step into *Empresses in the Palace* and live out the court intrigue; or return to your younger self and make a different choice about something you regret…
---
## 🌐 Live Demo
Free to play, no setup required: [infiplot.com](https://infiplot.com)
---
## 📸 Screenshots
<table>
<tr>
<td><a href="docs/screenshots/4.webp"><img src="docs/screenshots/4.webp" width="280" alt="School rooftop scene"></a></td>
<td><a href="docs/screenshots/c3.webp"><img src="docs/screenshots/c3.webp" width="280" alt="Golden hour rooftop dialogue"></a></td>
<td><a href="docs/screenshots/c5.webp"><img src="docs/screenshots/c5.webp" width="280" alt="Sunset rooftop confession"></a></td>
</tr>
<tr>
<td><a href="docs/screenshots/c7.webp"><img src="docs/screenshots/c7.webp" width="280" alt="Rooftop close-up choice"></a></td>
<td><a href="docs/screenshots/a4.webp"><img src="docs/screenshots/a4.webp" width="280" alt="Twilight rooftop drama"></a></td>
<td><a href="docs/screenshots/5.webp"><img src="docs/screenshots/5.webp" width="280" alt="Cityscape evening scene"></a></td>
</tr>
<tr>
<td><a href="docs/screenshots/d2.webp"><img src="docs/screenshots/d2.webp" width="280" alt="Cyberpunk neon alley"></a></td>
<td><a href="docs/screenshots/f2.webp"><img src="docs/screenshots/f2.webp" width="280" alt="Night street anime scene"></a></td>
<td><a href="docs/screenshots/f5.webp"><img src="docs/screenshots/f5.webp" width="280" alt="Late-night encounter"></a></td>
</tr>
</table>
---
## Team & Vision
We're a group of young people from Tsinghua University and other schools.
On one hand, we're longtime, devoted players of galgames, otome games, FMV, and AI role-play games. Even while enjoying them, we kept imagining how much more delightful and thrilling it would be if the story choices weren't fixed in advance — or if you could truly interact with an AI character in depth, instead of just texting it through a chat app.
On the other hand, we happen to know a little about large-model technology: enough to turn ideas into working software quickly with AI, and to have formed some modest views on the technical paths available and the limits of what today's tech can build.
The spark came on April 22, 2026, when [@zan2434](https://x.com/zan2434) and others released [flipbook](https://flipbook.page/). We were stunned and delighted by this entirely new form of interaction.
So one day in May, we agreed on the spot to build something like this — both to help people live out the fantasies they'd once set aside, and to explore the new modes of interaction that multimodal models make possible.
The project is still very early and many features are far from polished. We'd love your feedback — open an [issue](https://github.com/zonghaoyuan/infiplot/issues), or join our dev team and explore the new possibilities with us, and satisfy your own curiosity.
Get in touch: hi@infiplot.com
Scan to join our **beta community on QQ** (group ID `575404333`) to share feedback and help shape the project:
<img src="apps/web/public/qq-group.webp" alt="InfiPlot beta community QQ group QR code" width="200" />
---
## How it works
Built on text, image, and audio models, we've assembled a multi-agent framework to deliver on InfiPlot's goal. We split the agents into five roles — **Architect, Writer, Character Designer, Cinematographer, and Painter** — that work together to keep the plot coherent, the characters consistent, and the scenes continuous, all while making the story as compelling as we can.
We call each complete playthrough a **story**.
A story unfolds as a sequence of scenes. Each scene is one AI-painted background plus a short tree of beats — moments of narration, dialogue, and the occasional choice. You tap through a scene's beats and the image stays put; only when a choice leads somewhere genuinely new — another place, a new point of view, a jump in time — does the AI paint the next scene.
```mermaid
flowchart TD
U["Your input: world setting + art style"] --> A["Architect<br/>parses input → full story structure (first step)"]
A --> W["Writer<br/>directs this scene's beats: narration · dialogue · choices"]
subgraph SCENE["Generating one scene"]
direction TB
W --> C["Character Designer<br/>portrait + voice (parallel, per new character)"]
W --> S["Cinematographer<br/>shot composition + background prompt"]
C --> P["Painter<br/>renders the 16:9 background using portraits as reference"]
S --> P
end
P --> SC["One scene: background image + beat tree"]
SC -. speculatively pre-generate the next scene .-> W
```
While you're reading one scene, the engine speculatively generates the scenes your choices could lead to — and, for unavoidable next steps, the scene after that. By the time you pick a direction, its image is usually already painted, so the cut feels instant. If you still notice some lag today, don't worry — we're working hard to bring it down.
Clicking the background itself (not a button) routes through a vision model: it reads where you tapped and decides whether you're exploring the current scene (it inserts a beat — no new image) or moving on (a new scene). This builds on a valuable lesson we learned from flipbook, and we believe it will become one of InfiPlot's defining features — taking the experience to the next level.
There is no traditional game UI baked into the art. The AI paints the world in whatever style you pick — "stick figure on grid paper" or "cyberpunk noir" — and the dialogue panel and choice buttons are a light HTML layer drawn on top, tuned to sit over the scene. In other words, the UI fits the story of each playthrough, rather than staying the same every time.
---
## One-click deploy
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zonghaoyuan/infiplot&root-directory=apps/web&env=TEXT_BASE_URL,TEXT_API_KEY,TEXT_MODEL,IMAGE_BASE_URL,IMAGE_API_KEY,IMAGE_MODEL,VISION_BASE_URL,VISION_API_KEY,VISION_MODEL,TTS_BASE_URL,TTS_API_KEY,TTS_SPEECH_MODEL,MOCK_IMAGE&envDescription=Three%20required%20providers%20%2B%20optional%20TTS.%20Any%20OpenAI-compatible%20endpoint%20works%20for%20text%2Fvision.%20TTS%20uses%20MiMo%27s%20own%20protocol.&envLink=https://github.com/zonghaoyuan/infiplot/blob/main/README.en.md%23configuration-guide)
After deploy, set your environment variables in the Vercel project — see the [Configuration guide](#configuration-guide) below. The Vercel project's **Root Directory** must be `apps/web` (the deploy button passes this automatically; if you configure manually, set it in Project Settings).
---
## Configuration guide
InfiPlot talks to four kinds of model providers. **Text and Vision use any OpenAI-compatible endpoint**, so you can mix and match freely. **Image** currently goes to **Runware** (its own task-array protocol, not OpenAI-compatible). **TTS** uses **Xiaomi MiMo**'s own voice design / clone protocol — per-character voice design, clone, and per-line delivery direction.
**1. Choose your providers**
| Provider | Variables | Required? | Recommended |
|---|---|---|---|
| Text · story director | `TEXT_BASE_URL` `TEXT_API_KEY` `TEXT_MODEL` | ✅ | `deepseek-v4-flash` via DeepSeek |
| Image · scene renderer | `IMAGE_BASE_URL` `IMAGE_API_KEY` `IMAGE_MODEL` | ✅ | `runware:400@6` (FLUX.2 [klein] 9B KV) via [Runware](https://runware.ai) |
| Vision · click reader | `VISION_BASE_URL` `VISION_API_KEY` `VISION_MODEL` | ✅ | `gemini-3.5-flash` via Google |
| TTS · per-character voice | `TTS_BASE_URL` `TTS_API_KEY` `TTS_SPEECH_MODEL` | optional — leave blank to run silently | `mimo-v2.5-tts` via Xiaomi MiMo |
**2. Set the environment variables**
Set these in your Vercel project (**Settings → Environment Variables**), or in `apps/web/.env.local` for local runs. Nine variables are required; TTS is optional (leave blank to run silently). There's also a flag for cheap testing:
| Variable | Effect |
|---|---|
| `MOCK_IMAGE=true` | Skip image generation; the renderer returns a static placeholder. Story, voice, and choices still run normally. Great for iterating on TTS without burning Runware credits. |
See `apps/web/.env.example` for the exact shape.
**3. Mind the cost**
With the recommended trio, each scene's cost comes mainly from the image generation model. The FLUX.2 [klein] 9B KV image is roughly **\$0.00078** per scene (1792×1024, 4 steps, sub-second); the text model uses `deepseek-v4-flash`, so text costs are negligible by comparison. Tapping through a scene's beats is free. To keep transitions instant, the engine also pre-generates scenes you might pick but ultimately don't — so real spend runs somewhat higher than the scenes you actually see.
---
## Roadmap
- [ ] Make generation latency imperceptible
- [ ] Compatibility with more model providers
- [ ] Free-form player input mid-story
- [ ] Mobile browser support
- [ ] User accounts and login
- [ ] Upgrade from static images to motion video
- [ ] Voice interaction
- [ ] Share the story you're playing
- [ ] Mobile app
---
## Star history
[![Star History Chart](https://api.star-history.com/svg?repos=zonghaoyuan/infiplot&type=Date)](https://star-history.com/#zonghaoyuan/infiplot&Date)
+22 -3
View File
@@ -1,6 +1,25 @@
[English](https://github.com/zonghaoyuan/infiplot "Back to homepage") · [简体中文](README.zh-CN.md) · 日本語 <div align="center">
# ⚡ 概要 <img src="docs/banner.svg" alt="InfiPlot" width="100%">
<p><b>あなたのためにリアルタイム生成されるインタラクティブ・ストーリーゲーム</b></p>
[![Stars](https://img.shields.io/github/stars/zonghaoyuan/infiplot?style=flat-square)](https://github.com/zonghaoyuan/infiplot/stargazers)
[![Watchers](https://img.shields.io/github/watchers/zonghaoyuan/infiplot?style=flat-square)](https://github.com/zonghaoyuan/infiplot/watchers)
[![Forks](https://img.shields.io/github/forks/zonghaoyuan/infiplot?style=flat-square)](https://github.com/zonghaoyuan/infiplot/network)
[![Issues](https://img.shields.io/github/issues/zonghaoyuan/infiplot?style=flat-square)](https://github.com/zonghaoyuan/infiplot/issues)
[![Live Demo](https://img.shields.io/badge/Live_Demo-infiplot.com-D97A2E?style=flat-square&logo=vercel&logoColor=white)](https://infiplot.com)
[![License](https://img.shields.io/github/license/zonghaoyuan/infiplot?style=flat-square)](LICENSE)
[![LINUX DO](https://img.shields.io/badge/LINUX-DO-FFB003?style=flat-square&logo=data:image/svg%2bxml;base64,DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiPjxwYXRoIGQ9Ik00Ni44Mi0uMDU1aDYuMjVxMjMuOTY5IDIuMDYyIDM4IDIxLjQyNmM1LjI1OCA3LjY3NiA4LjIxNSAxNi4xNTYgOC44NzUgMjUuNDV2Ni4yNXEtMi4wNjQgMjMuOTY4LTIxLjQzIDM4LTExLjUxMiA3Ljg4NS0yNS40NDUgOC44NzRoLTYuMjVxLTIzLjk3LTIuMDY0LTM4LjAwNC0yMS40M1EuOTcxIDY3LjA1Ni0uMDU0IDUzLjE4di02LjQ3M0MxLjM2MiAzMC43ODEgOC41MDMgMTguMTQ4IDIxLjM3IDguODE3IDI5LjA0NyAzLjU2MiAzNy41MjcuNjA0IDQ2LjgyMS0uMDU2IiBzdHlsZT0ic3Ryb2tlOm5vbmU7ZmlsbC1ydWxlOmV2ZW5vZGQ7ZmlsbDojZWNlY2VjO2ZpbGwtb3BhY2l0eToxIi8+PHBhdGggZD0iTTQ3LjI2NiAyLjk1N3EyMi41My0uNjUgMzcuNzc3IDE1LjczOGE0OS43IDQ5LjcgMCAwIDEgNi44NjcgMTAuMTU3cS00MS45NjQuMjIyLTgzLjkzIDAgOS43NS0xOC42MTYgMzAuMDI0LTI0LjM4N2E2MSA2MSAwIDAgMSA5LjI2Mi0xLjUwOCIgc3R5bGU9InN0cm9rZTpub25lO2ZpbGwtcnVsZTpldmVub2RkO2ZpbGw6IzE5MTkxOTtmaWxsLW9wYWNpdHk6MSIvPjxwYXRoIGQ9Ik03Ljk4IDcwLjkyNmMyNy45NzctLjAzNSA1NS45NTQgMCA4My45My4xMTNRODMuNDI2IDg3LjQ3MyA2Ni4xMyA5NC4wODZxLTE4LjgxIDYuNTQ0LTM2LjgzMi0xLjg5OC0xNC4yMDMtNy4wOS0yMS4zMTctMjEuMjYyIiBzdHlsZT0ic3Ryb2tlOm5vbmU7ZmlsbC1ydWxlOmV2ZW5vZGQ7ZmlsbDojZjlhZjAwO2ZpbGwtb3BhY2l0eToxIi8+PC9zdmc+)](https://linux.do)
[简体中文](README.md) · [English](README.en.md) · 日本語
</div>
---
## ⚡ 概要
InfiPlot は、AI がコンテンツをリアルタイムに生成するインタラクティブ・ストーリーゲームです。あらかじめ用意された筋書きもキャラクターもなく、すべてがあなたの求めに応じてその場で生成されます。 InfiPlot は、AI がコンテンツをリアルタイムに生成するインタラクティブ・ストーリーゲームです。あらかじめ用意された筋書きもキャラクターもなく、すべてがあなたの求めに応じてその場で生成されます。
@@ -72,7 +91,7 @@ flowchart TD
## ワンクリックデプロイ ## ワンクリックデプロイ
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zonghaoyuan/infiplot&root-directory=apps/web&env=TEXT_BASE_URL,TEXT_API_KEY,TEXT_MODEL,IMAGE_BASE_URL,IMAGE_API_KEY,IMAGE_MODEL,VISION_BASE_URL,VISION_API_KEY,VISION_MODEL,TTS_BASE_URL,TTS_API_KEY,TTS_SPEECH_MODEL,MOCK_IMAGE&envDescription=Three%20required%20providers%20%2B%20optional%20TTS.%20Any%20OpenAI-compatible%20endpoint%20works%20for%20text%2Fvision.%20TTS%20uses%20MiMo%27s%20own%20protocol.&envLink=https://github.com/zonghaoyuan/infiplot%23configuration-guide) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zonghaoyuan/infiplot&root-directory=apps/web&env=TEXT_BASE_URL,TEXT_API_KEY,TEXT_MODEL,IMAGE_BASE_URL,IMAGE_API_KEY,IMAGE_MODEL,VISION_BASE_URL,VISION_API_KEY,VISION_MODEL,TTS_BASE_URL,TTS_API_KEY,TTS_SPEECH_MODEL,MOCK_IMAGE&envDescription=Three%20required%20providers%20%2B%20optional%20TTS.%20Any%20OpenAI-compatible%20endpoint%20works%20for%20text%2Fvision.%20TTS%20uses%20MiMo%27s%20own%20protocol.&envLink=https://github.com/zonghaoyuan/infiplot/blob/main/README.ja.md%23%E8%A8%AD%E5%AE%9A%E3%82%AC%E3%82%A4%E3%83%89)
デプロイ後、Vercel プロジェクトで環境変数を設定してください —— 下記の[設定ガイド](#設定ガイド)を参照。Vercel プロジェクトの **Root Directory**`apps/web` に設定する必要があります(デプロイボタンが自動で渡します。手動設定の場合は Project Settings で指定してください)。 デプロイ後、Vercel プロジェクトで環境変数を設定してください —— 下記の[設定ガイド](#設定ガイド)を参照。Vercel プロジェクトの **Root Directory**`apps/web` に設定する必要があります(デプロイボタンが自動で渡します。手動設定の場合は Project Settings で指定してください)。
+90 -72
View File
@@ -1,149 +1,167 @@
[English](https://github.com/zonghaoyuan/infiplot) · [简体中文](README.zh-CN.md) · [日本語](README.ja.md) <div align="center">
# ⚡ Overview <img src="docs/banner.svg" alt="InfiPlot" width="100%">
InfiPlot is an interactive story game with content generated by AI in real time. There are no pre-written plots and no pre-made characters — everything is generated on demand, tailored to you. <p><b>为你实时生成的互动剧情游戏</b></p>
In one line: what we're building is an AI-generated, real-time take on *Love Is All Around* (《完蛋!我被美女包围了!》). [![Stars](https://img.shields.io/github/stars/zonghaoyuan/infiplot?style=flat-square)](https://github.com/zonghaoyuan/infiplot/stargazers)
[![Watchers](https://img.shields.io/github/watchers/zonghaoyuan/infiplot?style=flat-square)](https://github.com/zonghaoyuan/infiplot/watchers)
[![Forks](https://img.shields.io/github/forks/zonghaoyuan/infiplot?style=flat-square)](https://github.com/zonghaoyuan/infiplot/network)
[![Issues](https://img.shields.io/github/issues/zonghaoyuan/infiplot?style=flat-square)](https://github.com/zonghaoyuan/infiplot/issues)
Whether you're a six-year-old, a twenty-something, thirty-five, or sixty, there's a fantasy here that belongs to you and you alone: [![Live Demo](https://img.shields.io/badge/Live_Demo-infiplot.com-D97A2E?style=flat-square&logo=vercel&logoColor=white)](https://infiplot.com)
[![License](https://img.shields.io/github/license/zonghaoyuan/infiplot?style=flat-square)](LICENSE)
[![LINUX DO](https://img.shields.io/badge/LINUX-DO-FFB003?style=flat-square&logo=data:image/svg%2bxml;base64,DQo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCIgaGVpZ2h0PSIxMDAiPjxwYXRoIGQ9Ik00Ni44Mi0uMDU1aDYuMjVxMjMuOTY5IDIuMDYyIDM4IDIxLjQyNmM1LjI1OCA3LjY3NiA4LjIxNSAxNi4xNTYgOC44NzUgMjUuNDV2Ni4yNXEtMi4wNjQgMjMuOTY4LTIxLjQzIDM4LTExLjUxMiA3Ljg4NS0yNS40NDUgOC44NzRoLTYuMjVxLTIzLjk3LTIuMDY0LTM4LjAwNC0yMS40M1EuOTcxIDY3LjA1Ni0uMDU0IDUzLjE4di02LjQ3M0MxLjM2MiAzMC43ODEgOC41MDMgMTguMTQ4IDIxLjM3IDguODE3IDI5LjA0NyAzLjU2MiAzNy41MjcuNjA0IDQ2LjgyMS0uMDU2IiBzdHlsZT0ic3Ryb2tlOm5vbmU7ZmlsbC1ydWxlOmV2ZW5vZGQ7ZmlsbDojZWNlY2VjO2ZpbGwtb3BhY2l0eToxIi8+PHBhdGggZD0iTTQ3LjI2NiAyLjk1N3EyMi41My0uNjUgMzcuNzc3IDE1LjczOGE0OS43IDQ5LjcgMCAwIDEgNi44NjcgMTAuMTU3cS00MS45NjQuMjIyLTgzLjkzIDAgOS43NS0xOC42MTYgMzAuMDI0LTI0LjM4N2E2MSA2MSAwIDAgMSA5LjI2Mi0xLjUwOCIgc3R5bGU9InN0cm9rZTpub25lO2ZpbGwtcnVsZTpldmVub2RkO2ZpbGw6IzE5MTkxOTtmaWxsLW9wYWNpdHk6MSIvPjxwYXRoIGQ9Ik03Ljk4IDcwLjkyNmMyNy45NzctLjAzNSA1NS45NTQgMCA4My45My4xMTNRODMuNDI2IDg3LjQ3MyA2Ni4xMyA5NC4wODZxLTE4LjgxIDYuNTQ0LTM2LjgzMi0xLjg5OC0xNC4yMDMtNy4wOS0yMS4zMTctMjEuMjYyIiBzdHlsZT0ic3Ryb2tlOm5vbmU7ZmlsbC1ydWxlOmV2ZW5vZGQ7ZmlsbDojZjlhZjAwO2ZpbGwtb3BhY2l0eToxIi8+PC9zdmc+)](https://linux.do)
Learn magic in the world of Harry Potter; become the one everyone at school adores and confesses to; publish paper after paper in top journals and conferences with grant money to spare; step into *Empresses in the Palace* and live out the court intrigue; or return to your younger self and make a different choice about something you regret… [English](README.en.md) · 简体中文 · [日本語](README.ja.md)
</div>
--- ---
## 🌐 Live Demo ## ⚡ 概览
Free to play, no setup required: [infiplot.com](https://infiplot.com) InfiPlot是一款AI实时生成内容的互动剧情游戏,这里没有预设好的剧情、角色,所有内容都根据你的需求定制化的生成。
用一句话说,我们要做的是一款用AI实时生成内容的《完蛋!我被美女包围了!》
无论你是六岁的小朋友,20岁的年轻人,35岁的青年还是60岁的长者,都能在这里满足独属于你的幻想:
穿越到哈利波特世界学习魔法、成为学校里所有异性青睐和表达爱意的对象、顶刊顶会发不停科研经费拿到手软、穿越到甄嬛传体验宫廷斗争、或者重返年轻为遗憾的事情重新做选择......
--- ---
## 📸 Screenshots ## 🌐 在线体验
免费在线试玩,无需本地部署:[infiplot.com](https://infiplot.com)
---
## 📸 游戏截图
<table> <table>
<tr> <tr>
<td><a href="docs/screenshots/4.webp"><img src="docs/screenshots/4.webp" width="280" alt="School rooftop scene"></a></td> <td><a href="docs/screenshots/4.webp"><img src="docs/screenshots/4.webp" width="280" alt="高中天台黄昏对话"></a></td>
<td><a href="docs/screenshots/c3.webp"><img src="docs/screenshots/c3.webp" width="280" alt="Golden hour rooftop dialogue"></a></td> <td><a href="docs/screenshots/c3.webp"><img src="docs/screenshots/c3.webp" width="280" alt="夕阳下的告白"></a></td>
<td><a href="docs/screenshots/c5.webp"><img src="docs/screenshots/c5.webp" width="280" alt="Sunset rooftop confession"></a></td> <td><a href="docs/screenshots/c5.webp"><img src="docs/screenshots/c5.webp" width="280" alt="天台上的选择"></a></td>
</tr> </tr>
<tr> <tr>
<td><a href="docs/screenshots/c7.webp"><img src="docs/screenshots/c7.webp" width="280" alt="Rooftop close-up choice"></a></td> <td><a href="docs/screenshots/c7.webp"><img src="docs/screenshots/c7.webp" width="280" alt="近景特写镜头"></a></td>
<td><a href="docs/screenshots/a4.webp"><img src="docs/screenshots/a4.webp" width="280" alt="Twilight rooftop drama"></a></td> <td><a href="docs/screenshots/a4.webp"><img src="docs/screenshots/a4.webp" width="280" alt="校园暮色"></a></td>
<td><a href="docs/screenshots/5.webp"><img src="docs/screenshots/5.webp" width="280" alt="Cityscape evening scene"></a></td> <td><a href="docs/screenshots/5.webp"><img src="docs/screenshots/5.webp" width="280" alt="城市夜景"></a></td>
</tr> </tr>
<tr> <tr>
<td><a href="docs/screenshots/d2.webp"><img src="docs/screenshots/d2.webp" width="280" alt="Cyberpunk neon alley"></a></td> <td><a href="docs/screenshots/d2.webp"><img src="docs/screenshots/d2.webp" width="280" alt="赛博朋克霓虹巷"></a></td>
<td><a href="docs/screenshots/f2.webp"><img src="docs/screenshots/f2.webp" width="280" alt="Night street anime scene"></a></td> <td><a href="docs/screenshots/f2.webp"><img src="docs/screenshots/f2.webp" width="280" alt="日系夜街相遇"></a></td>
<td><a href="docs/screenshots/f5.webp"><img src="docs/screenshots/f5.webp" width="280" alt="Late-night encounter"></a></td> <td><a href="docs/screenshots/f5.webp"><img src="docs/screenshots/f5.webp" width="280" alt="深夜街角邂逅"></a></td>
</tr> </tr>
</table> </table>
--- ---
## Team & Vision ## 团队与愿景
We're a group of young people from Tsinghua University and other schools. 我们是一群来自清华大学等高校的年轻人。
On one hand, we're longtime, devoted players of galgames, otome games, FMV, and AI role-play games. Even while enjoying them, we kept imagining how much more delightful and thrilling it would be if the story choices weren't fixed in advance — or if you could truly interact with an AI character in depth, instead of just texting it through a chat app. 一方面,我们本来就是galgame、乙女游戏、FMV、AI角色扮演游戏这类游戏的深度用户,在享受游戏体验的同时,也会想象如果能选择不被预设的剧情选项,或者和对话的AI角色深度互动而不只是通过聊天软件聊天,该是多么愉快刺激的体验。
On the other hand, we happen to know a little about large-model technology: enough to turn ideas into working software quickly with AI, and to have formed some modest views on the technical paths available and the limits of what today's tech can build. 另一方面,我们恰好又对大模型技术有些了解,能用AI快速实现想法,对技术路线和基于已有技术的产品能力边界有一些浅薄的思考。
The spark came on April 22, 2026, when [@zan2434](https://x.com/zan2434) and others released [flipbook](https://flipbook.page/). We were stunned and delighted by this entirely new form of interaction. 契机发生在 2026 年 4 月 22 日,[@zan2434](https://x.com/zan2434) 等人发布了 [flipbook](https://flipbook.page/),我们对这种全新的交互形态感到震惊和欣喜。
于是在 5 月的某一天,我们一拍即合,决定做一款这样的产品,既帮助大家满足那些曾经遗憾过的幻想,又能够探索多模态模型所带来的新的交互形态。
So one day in May, we agreed on the spot to build something like this — both to help people live out the fantasies they'd once set aside, and to explore the new modes of interaction that multimodal models make possible. 目前我们的项目还很早期,有许多功能尚不完善,欢迎提交 [issues](https://github.com/zonghaoyuan/infiplot/issues) 反馈问题,或者加入我们的开发团队一起探索新的可能性,满足你的好奇心。
The project is still very early and many features are far from polished. We'd love your feedback — open an [issue](https://github.com/zonghaoyuan/infiplot/issues), or join our dev team and explore the new possibilities with us, and satisfy your own curiosity. 联系方式:hi@infiplot.com
Get in touch: hi@infiplot.com 欢迎扫码加入 **InfiPlot 内测交流群**QQ 群号 `575404333`),一起反馈体验、参与共建:
Scan to join our **beta community on QQ** (group ID `575404333`) to share feedback and help shape the project: <img src="apps/web/public/qq-group.webp" alt="InfiPlot 内测交流群 QQ 二维码" width="200" />
<img src="apps/web/public/qq-group.webp" alt="InfiPlot beta community QQ group QR code" width="200" />
--- ---
## How it works ## 工作原理
Built on text, image, and audio models, we've assembled a multi-agent framework to deliver on InfiPlot's goal. We split the agents into five roles — **Architect, Writer, Character Designer, Cinematographer, and Painter** — that work together to keep the plot coherent, the characters consistent, and the scenes continuous, all while making the story as compelling as we can. 基于文本、图像和音频模型,我们搭建了一个多智能体框架来实现InfiPlot的目标。我们把agent分为架构师、编剧、角色设计师、场景布置师和画家五个职能,让他们之间相互配合,在保证剧情连贯性、角色一致性、场景一致性的基础上,尽可能使得剧情足够富有吸引力。
We call each complete playthrough a **story**. 我们把每一次游玩的整体体验称为故事(story)。
A story unfolds as a sequence of scenes. Each scene is one AI-painted background plus a short tree of beats — moments of narration, dialogue, and the occasional choice. You tap through a scene's beats and the image stays put; only when a choice leads somewhere genuinely new — another place, a new point of view, a jump in time — does the AI paint the next scene. 故事以一连串场景(scene)的形式展开。每个场景由一张 AI 绘制的背景图,加上一棵简短的节拍(beat)树组成 —— 也就是旁白、对话和偶尔出现的选项。你逐拍点过一个场景时,画面始终不变;只有当某个选项把你带到真正全新的地方 —— 换了空间、换了视角、跳跃了时间 —— AI 才会绘制下一幕场景。
```mermaid ```mermaid
flowchart TD flowchart TD
U["Your input: world setting + art style"] --> A["Architect<br/>parses input → full story structure (first step)"] U["你的输入:世界设定 + 画风"] --> A["架构师 / Architect<br/>解析输入 → 完整剧情结构(第一步)"]
A --> W["Writer<br/>directs this scene's beats: narration · dialogue · choices"] A --> W["编剧 / Writer<br/>生成本幕节拍:旁白 · 对话 · 选项"]
subgraph SCENE["Generating one scene"] subgraph SCENE["每一幕场景的生成"]
direction TB direction TB
W --> C["Character Designer<br/>portrait + voice (parallel, per new character)"] W --> C["角色设计师 / Character Designer<br/>立绘 + 音色(每个新角色并行)"]
W --> S["Cinematographer<br/>shot composition + background prompt"] W --> S["场景布置师 / Cinematographer<br/>镜头编排 + 背景提示词"]
C --> P["Painter<br/>renders the 16:9 background using portraits as reference"] C --> P["画家 / Painter<br/>以立绘为参考渲染 16:9 背景"]
S --> P S --> P
end end
P --> SC["One scene: background image + beat tree"] P --> SC["一幕场景:背景图 + 节拍树"]
SC -. speculatively pre-generate the next scene .-> W SC -. 预测式预生成下一幕 .-> W
``` ```
While you're reading one scene, the engine speculatively generates the scenes your choices could lead to — and, for unavoidable next steps, the scene after that. By the time you pick a direction, its image is usually already painted, so the cut feels instant. If you still notice some lag today, don't worry — we're working hard to bring it down. 当你正在阅读一幕场景时,引擎会预测式地生成你的选项可能通向的那些场景 —— 对于无法回避的下一步,还会再往前生成一幕。等你真正选定方向时,那一幕的图通常已经画好了,于是切换瞬间完成、毫无停顿。如果你现在仍然感到有些延迟,别担心,我们正在努力优化它。
Clicking the background itself (not a button) routes through a vision model: it reads where you tapped and decides whether you're exploring the current scene (it inserts a beat — no new image) or moving on (a new scene). This builds on a valuable lesson we learned from flipbook, and we believe it will become one of InfiPlot's defining features — taking the experience to the next level. 直接点击背景本身(而非按钮)会走一个视觉(vision)模型:它读取你点击的位置,判断你是在探索当前场景(于是插入一个节拍 —— 不生成新图),还是要继续前进(生成一幕新场景)。这是基于我们从flipbook那里学到的宝贵认知,我们相信这个功能会在未来成为InfiPlot的关键功能,让你的游玩体验更上一层楼。
There is no traditional game UI baked into the art. The AI paints the world in whatever style you pick — "stick figure on grid paper" or "cyberpunk noir" — and the dialogue panel and choice buttons are a light HTML layer drawn on top, tuned to sit over the scene. In other words, the UI fits the story of each playthrough, rather than staying the same every time. 未来,画面里将没有烤进任何传统的游戏 UI。AI 会用你选择的任意风格来描绘整个世界 —— 「方格纸上的火柴人」也好,「赛博朋克黑色电影」也罢 —— 而对话框和选项按钮,只是叠在画面之上、并为贴合场景而精心调校过的一层轻量 HTML。也就是说,每次游玩时,UI都会契合当前的故事,而不是一成不变。
--- ---
## One-click deploy ## 一键部署
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zonghaoyuan/infiplot&root-directory=apps/web&env=TEXT_BASE_URL,TEXT_API_KEY,TEXT_MODEL,IMAGE_BASE_URL,IMAGE_API_KEY,IMAGE_MODEL,VISION_BASE_URL,VISION_API_KEY,VISION_MODEL,TTS_BASE_URL,TTS_API_KEY,TTS_SPEECH_MODEL,MOCK_IMAGE&envDescription=Three%20required%20providers%20%2B%20optional%20TTS.%20Any%20OpenAI-compatible%20endpoint%20works%20for%20text%2Fvision.%20TTS%20uses%20MiMo%27s%20own%20protocol.&envLink=https://github.com/zonghaoyuan/infiplot%23configuration-guide) [![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zonghaoyuan/infiplot&root-directory=apps/web&env=TEXT_BASE_URL,TEXT_API_KEY,TEXT_MODEL,IMAGE_BASE_URL,IMAGE_API_KEY,IMAGE_MODEL,VISION_BASE_URL,VISION_API_KEY,VISION_MODEL,TTS_BASE_URL,TTS_API_KEY,TTS_SPEECH_MODEL,MOCK_IMAGE&envDescription=Three%20required%20providers%20%2B%20optional%20TTS.%20Any%20OpenAI-compatible%20endpoint%20works%20for%20text%2Fvision.%20TTS%20uses%20MiMo%27s%20own%20protocol.&envLink=https://github.com/zonghaoyuan/infiplot%23%E9%85%8D%E7%BD%AE%E6%95%99%E7%A8%8B)
After deploy, set your environment variables in the Vercel project — see the [Configuration guide](#configuration-guide) below. The Vercel project's **Root Directory** must be `apps/web` (the deploy button passes this automatically; if you configure manually, set it in Project Settings). 部署完成后,在 Vercel 项目里填好环境变量 —— 详见下方的[配置教程](#配置教程)。Vercel 项目的 **Root Directory** 必须设为 `apps/web`(一键部署按钮会自动带上;若手动配置,请在 Project Settings 里设置)。
--- ---
## Configuration guide ## 配置教程
InfiPlot talks to four kinds of model providers. **Text and Vision use any OpenAI-compatible endpoint**, so you can mix and match freely. **Image** currently goes to **Runware** (its own task-array protocol, not OpenAI-compatible). **TTS** uses **Xiaomi MiMo**'s own voice design / clone protocol — per-character voice design, clone, and per-line delivery direction. InfiPlot 会与四类模型供应商通信。**文本(Text)和视觉(Vision)都使用 OpenAI 兼容的接口**,可以自由搭配。**图像(Image)**目前接入 **Runware**(其自有的 task-array 协议,并非 OpenAI 兼容)。**语音(TTS**使用**小米 MiMo** 自有的音色设计/克隆协议——支持角色级音色设计、克隆与逐行演绎指导。
**1. Choose your providers** **1. 选择你的供应商**
| Provider | Variables | Required? | Recommended | | 供应商 | 环境变量 | 是否必填 | 推荐 |
|---|---|---|---| |---|---|---|---|
| Text · story director | `TEXT_BASE_URL` `TEXT_API_KEY` `TEXT_MODEL` | ✅ | `deepseek-v4-flash` via DeepSeek | | Text · 剧情导演 | `TEXT_BASE_URL` `TEXT_API_KEY` `TEXT_MODEL` | ✅ | DeepSeek 的 `deepseek-v4-flash` |
| Image · scene renderer | `IMAGE_BASE_URL` `IMAGE_API_KEY` `IMAGE_MODEL` | ✅ | `runware:400@6` (FLUX.2 [klein] 9B KV) via [Runware](https://runware.ai) | | Image · 场景渲染 | `IMAGE_BASE_URL` `IMAGE_API_KEY` `IMAGE_MODEL` | ✅ | [Runware](https://runware.ai) 的 `runware:400@6`FLUX.2 [klein] 9B KV |
| Vision · click reader | `VISION_BASE_URL` `VISION_API_KEY` `VISION_MODEL` | ✅ | `gemini-3.5-flash` via Google | | Vision · 点击解读 | `VISION_BASE_URL` `VISION_API_KEY` `VISION_MODEL` | ✅ | Google 的 `gemini-3.5-flash` |
| TTS · per-character voice | `TTS_BASE_URL` `TTS_API_KEY` `TTS_SPEECH_MODEL` | optional — leave blank to run silently | `mimo-v2.5-tts` via Xiaomi MiMo | | TTS · 角色配音 | `TTS_BASE_URL` `TTS_API_KEY` `TTS_SPEECH_MODEL` | 可选 —— 留空则静音运行 | 小米 MiMo 的 `mimo-v2.5-tts` |
**2. Set the environment variables** **2. 填写环境变量**
Set these in your Vercel project (**Settings → Environment Variables**), or in `apps/web/.env.local` for local runs. Nine variables are required; TTS is optional (leave blank to run silently). There's also a flag for cheap testing: 在 Vercel 项目里设置(**Settings → Environment Variables**),或在本地运行时写进 `apps/web/.env.local`。九个变量为必填;TTS 可选(留空则静音运行)。此外还有一个用于低成本测试的开关:
| Variable | Effect | | 变量 | 作用 |
|---|---| |---|---|
| `MOCK_IMAGE=true` | Skip image generation; the renderer returns a static placeholder. Story, voice, and choices still run normally. Great for iterating on TTS without burning Runware credits. | | `MOCK_IMAGE=true` | 跳过图像生成,渲染器返回一张静态占位图。剧情、语音、选项照常运行。非常适合在不消耗 Runware 额度的情况下调试 TTS。 |
See `apps/web/.env.example` for the exact shape. 确切的字段格式见 `apps/web/.env.example`
**3. Mind the cost** **3. 注意成本**
With the recommended trio, each scene's cost comes mainly from the image generation model. The FLUX.2 [klein] 9B KV image is roughly **\$0.00078** per scene (1792×1024, 4 steps, sub-second); the text model uses `deepseek-v4-flash`, so text costs are negligible by comparison. Tapping through a scene's beats is free. To keep transitions instant, the engine also pre-generates scenes you might pick but ultimately don't — so real spend runs somewhat higher than the scenes you actually see. 使用推荐的三件套时,每一幕场景的开销主要来自图像生成模型。FLUX.2 [klein] 9B KV 的图像大约 **$0.00078** 一张(1792×1024,4 步,亚秒级);文本模型使用 `deepseek-v4-flash` 时,成本极低。逐拍点过一个场景是免费的。为了让切换瞬间完成,引擎还会预测式地生成那些你可能选、但最终可能没选的场景 —— 所以真实花费会比你实际看到的场景数略高一些。
--- ---
## Roadmap ## Roadmap
- [ ] Make generation latency imperceptible - [ ] 让用户感知不到生成延迟
- [ ] Compatibility with more model providers - [ ] 兼容更多模型 provider
- [ ] Free-form player input mid-story - [ ] 游玩过程中支持用户自定义输入
- [ ] Mobile browser support - [ ] 移动端浏览器适配
- [ ] User accounts and login - [ ] 用户注册登录系统
- [ ] Upgrade from static images to motion video - [ ] 由静态图升级为动态视频
- [ ] Voice interaction - [ ] 语音交互
- [ ] Share the story you're playing - [ ] 分享正在游玩的故事
- [ ] Mobile app - [ ] 移动端 app
--- ---
## Star history ## Star 趋势
[![Star History Chart](https://api.star-history.com/svg?repos=zonghaoyuan/infiplot&type=Date)](https://star-history.com/#zonghaoyuan/infiplot&Date) [![Star History Chart](https://api.star-history.com/svg?repos=zonghaoyuan/infiplot&type=Date)](https://star-history.com/#zonghaoyuan/infiplot&Date)
-148
View File
@@ -1,148 +0,0 @@
[English](https://github.com/zonghaoyuan/infiplot "Back to homepage") · 简体中文 · [日本語](README.ja.md)
# ⚡ 概览
InfiPlot是一款AI实时生成内容的互动剧情游戏,这里没有预设好的剧情、角色,所有内容都根据你的需求定制化的生成。
用一句话说,我们要做的是一款用AI实时生成内容的《完蛋!我被美女包围了!》
无论你是六岁的小朋友,20岁的年轻人,35岁的青年还是60岁的长者,都能在这里满足独属于你的幻想:
穿越到哈利波特世界学习魔法、成为学校里所有异性青睐和表达爱意的对象、顶刊顶会发不停科研经费拿到手软、穿越到甄嬛传体验宫廷斗争、或者重返年轻为遗憾的事情重新做选择......
---
## 🌐 在线体验
免费在线试玩,无需本地部署:[infiplot.com](https://infiplot.com)
---
## 📸 游戏截图
<table>
<tr>
<td><a href="docs/screenshots/4.webp"><img src="docs/screenshots/4.webp" width="280" alt="高中天台黄昏对话"></a></td>
<td><a href="docs/screenshots/c3.webp"><img src="docs/screenshots/c3.webp" width="280" alt="夕阳下的告白"></a></td>
<td><a href="docs/screenshots/c5.webp"><img src="docs/screenshots/c5.webp" width="280" alt="天台上的选择"></a></td>
</tr>
<tr>
<td><a href="docs/screenshots/c7.webp"><img src="docs/screenshots/c7.webp" width="280" alt="近景特写镜头"></a></td>
<td><a href="docs/screenshots/a4.webp"><img src="docs/screenshots/a4.webp" width="280" alt="校园暮色"></a></td>
<td><a href="docs/screenshots/5.webp"><img src="docs/screenshots/5.webp" width="280" alt="城市夜景"></a></td>
</tr>
<tr>
<td><a href="docs/screenshots/d2.webp"><img src="docs/screenshots/d2.webp" width="280" alt="赛博朋克霓虹巷"></a></td>
<td><a href="docs/screenshots/f2.webp"><img src="docs/screenshots/f2.webp" width="280" alt="日系夜街相遇"></a></td>
<td><a href="docs/screenshots/f5.webp"><img src="docs/screenshots/f5.webp" width="280" alt="深夜街角邂逅"></a></td>
</tr>
</table>
---
## 团队与愿景
我们是一群来自清华大学等高校的年轻人。
一方面,我们本来就是galgame、乙女游戏、FMV、AI角色扮演游戏这类游戏的深度用户,在享受游戏体验的同时,也会想象如果能选择不被预设的剧情选项,或者和对话的AI角色深度互动而不只是通过聊天软件聊天,该是多么愉快刺激的体验。
另一方面,我们恰好又对大模型技术有些了解,能用AI快速实现想法,对技术路线和基于已有技术的产品能力边界有一些浅薄的思考。
契机发生在 2026 年 4 月 22 日,[@zan2434](https://x.com/zan2434) 等人发布了 [flipbook](https://flipbook.page/),我们对这种全新的交互形态感到震惊和欣喜。
于是在 5 月的某一天,我们一拍即合,决定做一款这样的产品,既帮助大家满足那些曾经遗憾过的幻想,又能够探索多模态模型所带来的新的交互形态。
目前我们的项目还很早期,有许多功能尚不完善,欢迎提交 [issues](https://github.com/zonghaoyuan/infiplot/issues) 反馈问题,或者加入我们的开发团队一起探索新的可能性,满足你的好奇心。
联系方式:hi@infiplot.com
欢迎扫码加入 **InfiPlot 内测交流群**QQ 群号 `575404333`),一起反馈体验、参与共建:
<img src="apps/web/public/qq-group.webp" alt="InfiPlot 内测交流群 QQ 二维码" width="200" />
---
## 工作原理
基于文本、图像和音频模型,我们搭建了一个多智能体框架来实现InfiPlot的目标。我们把agent分为架构师、编剧、角色设计师、场景布置师和画家五个职能,让他们之间相互配合,在保证剧情连贯性、角色一致性、场景一致性的基础上,尽可能使得剧情足够富有吸引力。
我们把每一次游玩的整体体验称为故事(story)。
故事以一连串场景(scene)的形式展开。每个场景由一张 AI 绘制的背景图,加上一棵简短的节拍(beat)树组成 —— 也就是旁白、对话和偶尔出现的选项。你逐拍点过一个场景时,画面始终不变;只有当某个选项把你带到真正全新的地方 —— 换了空间、换了视角、跳跃了时间 —— AI 才会绘制下一幕场景。
```mermaid
flowchart TD
U["你的输入:世界设定 + 画风"] --> A["架构师 / Architect<br/>解析输入 → 完整剧情结构(第一步)"]
A --> W["编剧 / Writer<br/>生成本幕节拍:旁白 · 对话 · 选项"]
subgraph SCENE["每一幕场景的生成"]
direction TB
W --> C["角色设计师 / Character Designer<br/>立绘 + 音色(每个新角色并行)"]
W --> S["场景布置师 / Cinematographer<br/>镜头编排 + 背景提示词"]
C --> P["画家 / Painter<br/>以立绘为参考渲染 16:9 背景"]
S --> P
end
P --> SC["一幕场景:背景图 + 节拍树"]
SC -. 预测式预生成下一幕 .-> W
```
当你正在阅读一幕场景时,引擎会预测式地生成你的选项可能通向的那些场景 —— 对于无法回避的下一步,还会再往前生成一幕。等你真正选定方向时,那一幕的图通常已经画好了,于是切换瞬间完成、毫无停顿。如果你现在仍然感到有些延迟,别担心,我们正在努力优化它。
直接点击背景本身(而非按钮)会走一个视觉(vision)模型:它读取你点击的位置,判断你是在探索当前场景(于是插入一个节拍 —— 不生成新图),还是要继续前进(生成一幕新场景)。这是基于我们从flipbook那里学到的宝贵认知,我们相信这个功能会在未来成为InfiPlot的关键功能,让你的游玩体验更上一层楼。
未来,画面里将没有烤进任何传统的游戏 UI。AI 会用你选择的任意风格来描绘整个世界 —— 「方格纸上的火柴人」也好,「赛博朋克黑色电影」也罢 —— 而对话框和选项按钮,只是叠在画面之上、并为贴合场景而精心调校过的一层轻量 HTML。也就是说,每次游玩时,UI都会契合当前的故事,而不是一成不变。
---
## 一键部署
[![Deploy with Vercel](https://vercel.com/button)](https://vercel.com/new/clone?repository-url=https://github.com/zonghaoyuan/infiplot&root-directory=apps/web&env=TEXT_BASE_URL,TEXT_API_KEY,TEXT_MODEL,IMAGE_BASE_URL,IMAGE_API_KEY,IMAGE_MODEL,VISION_BASE_URL,VISION_API_KEY,VISION_MODEL,TTS_BASE_URL,TTS_API_KEY,TTS_SPEECH_MODEL,MOCK_IMAGE&envDescription=Three%20required%20providers%20%2B%20optional%20TTS.%20Any%20OpenAI-compatible%20endpoint%20works%20for%20text%2Fvision.%20TTS%20uses%20MiMo%27s%20own%20protocol.&envLink=https://github.com/zonghaoyuan/infiplot%23configuration-guide)
部署完成后,在 Vercel 项目里填好环境变量 —— 详见下方的[配置教程](#配置教程)。Vercel 项目的 **Root Directory** 必须设为 `apps/web`(一键部署按钮会自动带上;若手动配置,请在 Project Settings 里设置)。
---
## 配置教程
InfiPlot 会与四类模型供应商通信。**文本(Text)和视觉(Vision)都使用 OpenAI 兼容的接口**,可以自由搭配。**图像(Image)**目前接入 **Runware**(其自有的 task-array 协议,并非 OpenAI 兼容)。**语音(TTS**使用**小米 MiMo** 自有的音色设计/克隆协议——支持角色级音色设计、克隆与逐行演绎指导。
**1. 选择你的供应商**
| 供应商 | 环境变量 | 是否必填 | 推荐 |
|---|---|---|---|
| Text · 剧情导演 | `TEXT_BASE_URL` `TEXT_API_KEY` `TEXT_MODEL` | ✅ | DeepSeek 的 `deepseek-v4-flash` |
| Image · 场景渲染 | `IMAGE_BASE_URL` `IMAGE_API_KEY` `IMAGE_MODEL` | ✅ | [Runware](https://runware.ai) 的 `runware:400@6`FLUX.2 [klein] 9B KV |
| Vision · 点击解读 | `VISION_BASE_URL` `VISION_API_KEY` `VISION_MODEL` | ✅ | Google 的 `gemini-3.5-flash` |
| TTS · 角色配音 | `TTS_BASE_URL` `TTS_API_KEY` `TTS_SPEECH_MODEL` | 可选 —— 留空则静音运行 | 小米 MiMo 的 `mimo-v2.5-tts` |
**2. 填写环境变量**
在 Vercel 项目里设置(**Settings → Environment Variables**),或在本地运行时写进 `apps/web/.env.local`。九个变量为必填;TTS 可选(留空则静音运行)。此外还有一个用于低成本测试的开关:
| 变量 | 作用 |
|---|---|
| `MOCK_IMAGE=true` | 跳过图像生成,渲染器返回一张静态占位图。剧情、语音、选项照常运行。非常适合在不消耗 Runware 额度的情况下调试 TTS。 |
确切的字段格式见 `apps/web/.env.example`
**3. 注意成本**
使用推荐的三件套时,每一幕场景的开销主要来自图像生成模型。FLUX.2 [klein] 9B KV 的图像大约 **$0.00078** 一张(1792×1024,4 步,亚秒级);文本模型使用 `deepseek-v4-flash` 时,成本极低。逐拍点过一个场景是免费的。为了让切换瞬间完成,引擎还会预测式地生成那些你可能选、但最终可能没选的场景 —— 所以真实花费会比你实际看到的场景数略高一些。
---
## Roadmap
- [ ] 让用户感知不到生成延迟
- [ ] 兼容更多模型 provider
- [ ] 游玩过程中支持用户自定义输入
- [ ] 移动端浏览器适配
- [ ] 用户注册登录系统
- [ ] 由静态图升级为动态视频
- [ ] 语音交互
- [ ] 分享正在游玩的故事
- [ ] 移动端 app
---
## Star 趋势
[![Star History Chart](https://api.star-history.com/svg?repos=zonghaoyuan/infiplot&type=Date)](https://star-history.com/#zonghaoyuan/infiplot&Date)
+27
View File
@@ -0,0 +1,27 @@
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 1280 320" width="1280" height="320" role="img" aria-label="InfiPlot — real-time AI story game">
<defs>
<linearGradient id="bg" x1="0" y1="0" x2="0" y2="1">
<stop offset="0" stop-color="#FBF7F0"/>
<stop offset="1" stop-color="#F5EFE3"/>
</linearGradient>
<radialGradient id="glow" cx="50%" cy="34%" r="62%">
<stop offset="0" stop-color="#E89B5C" stop-opacity="0.20"/>
<stop offset="1" stop-color="#E89B5C" stop-opacity="0"/>
</radialGradient>
</defs>
<rect width="1280" height="320" fill="url(#bg)"/>
<rect width="1280" height="320" fill="url(#glow)"/>
<!-- wordmark: Infi (clay-900) + Plot (ember-500, italic light) -->
<text x="640" y="166" text-anchor="middle"
font-family="Georgia, 'Times New Roman', serif" font-size="120" letter-spacing="-2">
<tspan fill="#2D1810" font-weight="600">Infi</tspan><tspan fill="#D97A2E" font-style="italic" font-weight="400">Plot</tspan>
</text>
<!-- editorial kicker -->
<line x1="592" y1="206" x2="688" y2="206" stroke="#C68B5C" stroke-width="1.5"/>
<text x="640" y="244" text-anchor="middle"
font-family="'Helvetica Neue', Arial, sans-serif" font-size="20" font-weight="500"
letter-spacing="6" fill="#A8693B">REAL-TIME AI STORY GAME</text>
</svg>

After

Width:  |  Height:  |  Size: 1.3 KiB