yuanzonghao
72331bb865
InfiPlot now deploys to either Vercel or Cloudflare Workers — both targets are first-class. The project is fully stateless (sessions live on the client), so the Cloudflare side needs only Workers + Workers Assets and zero D1/KV/R2. - apps/web/wrangler.jsonc — nodejs_compat, Assets binding, 60s CPU limit (Workers Paid required; matches vercel.json maxDuration). I/O wait does not count against this budget — fits the LLM-bound workload that's most of the runtime. - apps/web/open-next.config.ts — minimal defineCloudflareConfig (no cache needed since the engine is stateless). - apps/web/package.json — added build:cf / preview:cf / deploy:cf via @opennextjs/cloudflare + wrangler (both devDeps); sharp moved from dependencies to devDependencies (only used by the manual optimize-home-images.mjs / localize-firstact-images.mjs scripts now). - .gitignore — .open-next, .wrangler, .dev.vars. - READMEs (3 langs) — Deploy to Cloudflare button next to Vercel, plus a Cloudflare section in the env-var setup (wrangler secret put + Cloudflare Access for staging access control). Verified: pnpm typecheck + pnpm build (Vercel path) + pnpm build:cf (OpenNext bundle: worker 4 KB, server 24 MB, assets 32 MB / 186 files — all within Workers limits) + pnpm preview:cf with the full play loop (start → scene → background click → CORS-clean Canvas annotation via Runware CDN → vision LLM → insert-beat) all green. Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>
175 lines
13 KiB
Markdown
175 lines
13 KiB
Markdown
<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>
|
||
|
||
[](https://github.com/zonghaoyuan/infiplot/stargazers)
|
||
[](https://github.com/zonghaoyuan/infiplot/watchers)
|
||
[](https://github.com/zonghaoyuan/infiplot/network)
|
||
[](https://github.com/zonghaoyuan/infiplot/issues)
|
||
|
||
[](https://infiplot.com)
|
||
[](LICENSE)
|
||
[](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)
|
||
|
||
---
|
||
|
||
## One-click deploy
|
||
|
||
InfiPlot deploys to both Vercel and Cloudflare Workers — pick whichever you prefer.
|
||
|
||
[](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) [](https://deploy.workers.cloudflare.com/?url=https://github.com/zonghaoyuan/infiplot/tree/main/apps/web)
|
||
|
||
After deploy, fill in the environment variables — see the [Configuration guide](#configuration-guide) below. Both platforms need `apps/web` as the project root (Vercel's button passes this automatically; on Cloudflare, set the build root to `apps/web` and the build command to `pnpm --filter @infiplot/web build:cf`).
|
||
|
||
---
|
||
|
||
## 📸 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.
|
||
|
||
---
|
||
|
||
## 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**
|
||
|
||
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. |
|
||
|
||
Where to set them (see `apps/web/.env.example` for the exact shape):
|
||
|
||
- **Local dev** — `apps/web/.env.local`
|
||
- **Vercel** — Project Settings → Environment Variables
|
||
- **Cloudflare Workers** — from `apps/web/`, run `wrangler secret put <NAME>` for each variable, or set them in the dashboard (Workers → infiplot → Settings → Variables and Secrets). For a private staging instance, gate the Worker behind [Cloudflare Access](https://developers.cloudflare.com/cloudflare-one/applications/) — zero-code email-whitelist auth in front of the Worker.
|
||
|
||
**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
|
||
|
||
[](https://star-history.com/#zonghaoyuan/infiplot&Date)
|