Merge pull request #120 from zonghaoyuan/readme-restructure
docs(readme): restructure for star conversion optimization
This commit is contained in:
Zonghao Yuan
GitHub
+62
-108
@@ -27,9 +27,22 @@ InfiPlot is an interactive story game with content generated by AI in real time.
|
|||||||
|
|
||||||
In one line: what we're building is an AI-generated, real-time take on *Love Is All Around* (《完蛋！我被美女包围了！》).
|
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:
|
Whatever your age, there's a fantasy here that belongs to 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…
|
- Learn magic in the world of Harry Potter
|
||||||
|
- Become the one everyone at school adores and confesses to
|
||||||
|
- Publish top-tier papers and never run out of grant money
|
||||||
|
- Step into *Empresses in the Palace* and live out court intrigue
|
||||||
|
- Return to your younger self and choose differently about something you regret
|
||||||
|
- ……
|
||||||
|
|
||||||
|
Core capabilities:
|
||||||
|
|
||||||
|
- **Multi-agent collaboration** — Writer, Character Designer, Cinematographer, and Painter work together to keep story coherent and characters consistent
|
||||||
|
- **Speculative generation** — by the time you choose, the next scene is usually already painted; transitions feel instant
|
||||||
|
- **Click to explore** — tap anywhere on the scene; a vision model interprets your intent and responds
|
||||||
|
- **AI voice acting** — every character gets a unique voice, via Xiaomi MiMo (free) or StepFun (paid, higher quality)
|
||||||
|
- **Any art style** — stick figures, cyberpunk, watercolor, manga… generate in whatever style you want
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -39,75 +52,19 @@ Free to play, no setup required: [infiplot.com](https://infiplot.com)
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Deploy
|
|
||||||
|
|
||||||
InfiPlot offers multiple deployment options. For personal use, we recommend the one-click Vercel deploy; to self-host on your own server or local machine, use Docker.
|
|
||||||
|
|
||||||
### OpenDeploy / Vercel / Cloudflare (one-click)
|
|
||||||
|
|
||||||
Cloudflare deployment requires the Workers Paid Plan because the scene pipeline needs longer CPU time. OpenDeploy lets your AI agent handle the deployment for you.
|
|
||||||
|
|
||||||
<a href="https://opendeploy.dev/github/zonghaoyuan/infiplot"><img src="https://oss.opendeploy.dev/static/deploy-with-your-agent.svg" alt="Deploy with your agent" height="34"></a>
|
|
||||||
<a href="https://vercel.com/new/clone?repository-url=https://github.com/zonghaoyuan/infiplot&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%3A%20Xiaomi%20MiMo%20%28free%29%20or%20StepFun%20%28paid%2C%20better%20quality%29.&envLink=https://github.com/zonghaoyuan/infiplot/blob/main/README.en.md%23configuration-guide"><img src="https://vercel.com/button" alt="Deploy with Vercel" height="34"></a>
|
|
||||||
<a href="https://deploy.workers.cloudflare.com/?url=https://github.com/zonghaoyuan/infiplot"><img src="https://deploy.workers.cloudflare.com/button" alt="Deploy to Cloudflare" height="34"></a>
|
|
||||||
|
|
||||||
After deploy, fill in the environment variables — see the [Configuration guide](#configuration-guide) below. The repo root is the app itself: Vercel needs no special root directory; on Cloudflare, just set the build command to `pnpm build:cf`.
|
|
||||||
|
|
||||||
### Docker (self-hosted)
|
|
||||||
|
|
||||||
For VPS, home servers, or local machines. Supports x86 and ARM (including Apple Silicon Macs). No need to clone the repo — just download two files:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
mkdir -p infiplot && cd infiplot
|
|
||||||
curl -fsSL https://raw.githubusercontent.com/zonghaoyuan/infiplot/main/docker-compose.yml -o docker-compose.yml
|
|
||||||
curl -fsSL https://raw.githubusercontent.com/zonghaoyuan/infiplot/main/.env.example -o .env.example
|
|
||||||
[ -f .env.local ] || cp .env.example .env.local
|
|
||||||
```
|
|
||||||
|
|
||||||
Edit `.env.local` with your API keys (see [Configuration guide](#configuration-guide)), then start:
|
|
||||||
|
|
||||||
```bash
|
|
||||||
docker compose up -d
|
|
||||||
```
|
|
||||||
|
|
||||||
Visit `http://localhost:3000` to start playing.
|
|
||||||
|
|
||||||
> You can also run the image directly without Compose:
|
|
||||||
> ```bash
|
|
||||||
> docker run -d -p 3000:3000 --env-file .env.local ghcr.io/zonghaoyuan/infiplot:latest
|
|
||||||
> ```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📸 Screenshots
|
## 📸 Screenshots
|
||||||
|
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="docs/screenshots/1.webp"><img src="docs/screenshots/1.webp" width="420" alt="InfiPlot screenshot 1"></a></td>
|
<td><a href="docs/screenshots/1.webp"><img src="docs/screenshots/1.webp" width="420" alt="InfiPlot screenshot 1"></a></td>
|
||||||
<td><a href="docs/screenshots/2.webp"><img src="docs/screenshots/2.webp" width="420" alt="InfiPlot screenshot 2"></a></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><a href="docs/screenshots/3.webp"><img src="docs/screenshots/3.webp" width="420" alt="InfiPlot screenshot 3"></a></td>
|
<td><a href="docs/screenshots/3.webp"><img src="docs/screenshots/3.webp" width="420" alt="InfiPlot screenshot 3"></a></td>
|
||||||
<td><a href="docs/screenshots/4.webp"><img src="docs/screenshots/4.webp" width="420" alt="InfiPlot screenshot 4"></a></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="docs/screenshots/5.webp"><img src="docs/screenshots/5.webp" width="420" alt="InfiPlot screenshot 5"></a></td>
|
|
||||||
<td><a href="docs/screenshots/6.webp"><img src="docs/screenshots/6.webp" width="420" alt="InfiPlot screenshot 6"></a></td>
|
<td><a href="docs/screenshots/6.webp"><img src="docs/screenshots/6.webp" width="420" alt="InfiPlot screenshot 6"></a></td>
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><a href="docs/screenshots/7.webp"><img src="docs/screenshots/7.webp" width="420" alt="InfiPlot screenshot 7"></a></td>
|
|
||||||
<td><a href="docs/screenshots/8.webp"><img src="docs/screenshots/8.webp" width="420" alt="InfiPlot screenshot 8"></a></td>
|
<td><a href="docs/screenshots/8.webp"><img src="docs/screenshots/8.webp" width="420" alt="InfiPlot screenshot 8"></a></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="docs/screenshots/9.webp"><img src="docs/screenshots/9.webp" width="420" alt="InfiPlot screenshot 9"></a></td>
|
|
||||||
<td><a href="docs/screenshots/10.webp"><img src="docs/screenshots/10.webp" width="420" alt="InfiPlot screenshot 10"></a></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><a href="docs/screenshots/11.webp"><img src="docs/screenshots/11.webp" width="420" alt="InfiPlot screenshot 11"></a></td>
|
|
||||||
<td><a href="docs/screenshots/12.webp"><img src="docs/screenshots/12.webp" width="420" alt="InfiPlot screenshot 12"></a></td>
|
<td><a href="docs/screenshots/12.webp"><img src="docs/screenshots/12.webp" width="420" alt="InfiPlot screenshot 12"></a></td>
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><a href="docs/screenshots/13.webp"><img src="docs/screenshots/13.webp" width="420" alt="InfiPlot screenshot 13"></a></td>
|
|
||||||
<td><a href="docs/screenshots/14.webp"><img src="docs/screenshots/14.webp" width="420" alt="InfiPlot screenshot 14"></a></td>
|
<td><a href="docs/screenshots/14.webp"><img src="docs/screenshots/14.webp" width="420" alt="InfiPlot screenshot 14"></a></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
@@ -134,68 +91,43 @@ There is no traditional game UI baked into the art. The AI paints the world in w
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## Team & Vision
|
## Deploy
|
||||||
|
|
||||||
We're a group of young people from Tsinghua University and other schools.
|
InfiPlot offers multiple deployment options. For personal use, we recommend the one-click Vercel deploy; to self-host on your own server or local machine, use Docker.
|
||||||
|
|
||||||
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.
|
### OpenDeploy / Vercel / Cloudflare (one-click)
|
||||||
|
|
||||||
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.
|
Cloudflare deployment requires the Workers Paid Plan because the scene pipeline needs longer CPU time. OpenDeploy lets your AI agent handle the deployment for you.
|
||||||
|
|
||||||
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.
|
<a href="https://opendeploy.dev/github/zonghaoyuan/infiplot"><img src="https://oss.opendeploy.dev/static/deploy-with-your-agent.svg" alt="Deploy with your agent" height="34"></a>
|
||||||
|
<a href="https://vercel.com/new/clone?repository-url=https://github.com/zonghaoyuan/infiplot&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%3A%20Xiaomi%20MiMo%20%28free%29%20or%20StepFun%20%28paid%2C%20better%20quality%29.&envLink=https://github.com/zonghaoyuan/infiplot/blob/main/docs/configuration.en.md"><img src="https://vercel.com/button" alt="Deploy with Vercel" height="34"></a>
|
||||||
|
<a href="https://deploy.workers.cloudflare.com/?url=https://github.com/zonghaoyuan/infiplot"><img src="https://deploy.workers.cloudflare.com/button" alt="Deploy to Cloudflare" height="34"></a>
|
||||||
|
|
||||||
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.
|
After deploy, set up your environment variables following the [Configuration guide](docs/configuration.en.md). The repo root is the app itself: Vercel needs no special root directory; on Cloudflare, just set the build command to `pnpm build:cf`.
|
||||||
|
|
||||||
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.
|
### Docker (self-hosted)
|
||||||
|
|
||||||
Get in touch: hi@infiplot.com
|
For VPS, home servers, or local machines. Supports x86 and ARM (including Apple Silicon Macs). No need to clone the repo — just download two files:
|
||||||
|
|
||||||
Scan to join our **beta community on QQ** (group ID `575404333`) to share feedback and help shape the project:
|
```bash
|
||||||
|
mkdir -p infiplot && cd infiplot
|
||||||
|
curl -fsSL https://raw.githubusercontent.com/zonghaoyuan/infiplot/main/docker-compose.yml -o docker-compose.yml
|
||||||
|
curl -fsSL https://raw.githubusercontent.com/zonghaoyuan/infiplot/main/.env.example -o .env.example
|
||||||
|
[ -f .env.local ] || cp .env.example .env.local
|
||||||
|
```
|
||||||
|
|
||||||
<img src="public/qq-group.webp" alt="InfiPlot beta community QQ group QR code" width="200" />
|
Edit `.env.local` with your API keys (see [Configuration guide](docs/configuration.en.md)), then start:
|
||||||
|
|
||||||
---
|
```bash
|
||||||
|
docker compose up -d
|
||||||
|
```
|
||||||
|
|
||||||
## Configuration guide
|
Visit `http://localhost:3000` to start playing.
|
||||||
|
|
||||||
InfiPlot talks to four kinds of model providers. **Text and Vision use any OpenAI-compatible endpoint**, so you can mix and match freely — for Google Gemini, point `*_BASE_URL` at its OpenAI-compatible endpoint (`https://generativelanguage.googleapis.com/v1beta/openai`). For Anthropic Claude, a compatible gateway (e.g. LiteLLM) is recommended — Anthropic's official endpoint offers an OpenAI-compatible layer but no caching, which raises cost and latency. **Image** supports **Runware** (its own task-array protocol) and **OpenAI** (`gpt-image`). **TTS** supports **Xiaomi MiMo** (its own voice design / clone protocol — per-character voice design, clone, and per-line delivery direction; free) and **StepFun** (32 preset voices, auto-matched by AI; paid but better quality).
|
> You can also run the image directly without Compose:
|
||||||
|
> ```bash
|
||||||
**1. Choose your providers**
|
> docker run -d -p 3000:3000 --env-file .env.local ghcr.io/zonghaoyuan/infiplot:latest
|
||||||
|
> ```
|
||||||
| 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 (free); paid alternative: `step-tts-2` via [StepFun](https://www.stepfun.com) |
|
|
||||||
|
|
||||||
**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 `.env.example` for the exact shape):
|
|
||||||
|
|
||||||
- **Local dev** — `.env.local`
|
|
||||||
- **Vercel** — Project Settings → Environment Variables
|
|
||||||
- **Cloudflare Workers** — from the repo root, 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.
|
|
||||||
|
|
||||||
**4. Image proxy (optional)**
|
|
||||||
|
|
||||||
By default the browser fetches images directly from the provider — no setup needed; leave `NEXT_PUBLIC_IMAGE_PROXY_URL` blank and you're completely unaffected. You only want this if you hit progressive "top-to-bottom" image loading (Chrome's `ERR_QUIC_PROTOCOL_ERROR` on some networks paints partial PNGs row by row): deploy a tiny Cloudflare Worker that re-fetches images server-side and serves them atomically over HTTP/2. One-click deploy at **[infiplot-image-proxy](https://github.com/zonghaoyuan/infiplot-image-proxy)**, then paste the `workers.dev` URL it prints into `NEXT_PUBLIC_IMAGE_PROXY_URL`.
|
|
||||||
|
|
||||||
**5. Let players bring their own voice Key (optional, recommended)**
|
|
||||||
|
|
||||||
Xiaomi rate-limits the TTS model by RPM/TPM. When a public deployment has many people playing at once through a single shared `TTS_API_KEY`, those limits are easy to hit — the symptom is **story and visuals work fine, but there's no audio**. To fix this, players can optionally enter **their own** Xiaomi MiMo key on the homepage (free to obtain). Synthesis then runs **browser-direct to Xiaomi**, the **key stays in the player's browser and never touches your server**, and they get stable voice with lower latency. It's purely additive: leave it blank and playback falls back to your server key exactly as before.
|
|
||||||
|
|
||||||
See the [Bring-your-own voice Key guide](docs/xiaomi-tts-key.md) for how to obtain and enter one.
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -222,6 +154,28 @@ See the [Bring-your-own voice Key guide](docs/xiaomi-tts-key.md) for how to obta
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## 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="public/qq-group.webp" alt="InfiPlot beta community QQ group QR code" width="200" />
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Star history
|
## Star history
|
||||||
|
|
||||||
[](https://star-history.com/#zonghaoyuan/infiplot&Date)
|
[](https://star-history.com/#zonghaoyuan/infiplot&Date)
|
||||||
|
|||||||
+61
-107
@@ -27,9 +27,22 @@ InfiPlot は、AI がコンテンツをリアルタイムに生成するイン
|
|||||||
|
|
||||||
ひとことで言えば、私たちが作っているのは、AI がリアルタイムにコンテンツを生成する『Love Is All Around（完蛋！我被美女包围了！）』です。
|
ひとことで言えば、私たちが作っているのは、AI がリアルタイムにコンテンツを生成する『Love Is All Around（完蛋！我被美女包围了！）』です。
|
||||||
|
|
||||||
6 歳の子どもでも、20 代の若者でも、35 歳でも、60 歳でも —— ここには、あなただけのファンタジーがあります：
|
どんな方でも、ここにはあなただけのファンタジーがあります：
|
||||||
|
|
||||||
ハリー・ポッターの世界で魔法を学ぶ。学校で誰もが憧れ、想いを寄せる存在になる。トップ誌・トップ会議に論文を出し続け、研究費にも事欠かない。『宮廷の諍い女（甄嬛传）』の世界で宮廷の駆け引きを味わう。あるいは若い頃に戻り、悔いの残るあの選択をやり直す……
|
- ハリー・ポッターの世界で魔法を学ぶ
|
||||||
|
- 学校で誰もが憧れ、想いを寄せる存在になる
|
||||||
|
- トップ誌・トップ会議に論文を出し続け、研究費にも事欠かない
|
||||||
|
- 『宮廷の諍い女（甄嬛传）』の世界で宮廷の駆け引きを味わう
|
||||||
|
- 若い頃に戻り、悔いの残るあの選択をやり直す
|
||||||
|
- ……
|
||||||
|
|
||||||
|
コア機能：
|
||||||
|
|
||||||
|
- **マルチエージェント連携** — 脚本家・キャラクターデザイナー・撮影監督・絵師がそれぞれの役割を担い、物語の一貫性とキャラクターの統一感を保つ
|
||||||
|
- **先読み生成** — あなたが選択する頃には、次のシーンはたいてい描き上がっていて、切り替えは一瞬
|
||||||
|
- **クリック探索** — 画面のどこでもタップでき、ビジョンモデルがあなたの意図を解釈して応答
|
||||||
|
- **AI ボイス** — キャラクターごとに固有の声を生成。Xiaomi MiMo（無料）または StepFun（有料・高品質）に対応
|
||||||
|
- **自由な画風** — 棒人間、サイバーパンク、水彩、漫画……あらゆるスタイルで生成可能
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -39,75 +52,19 @@ InfiPlot は、AI がコンテンツをリアルタイムに生成するイン
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## デプロイ
|
|
||||||
|
|
||||||
InfiPlot は複数のデプロイ方法に対応しています。個人利用には Vercel のワンクリックデプロイをおすすめします。自分のサーバーやローカルマシンで動かしたい場合は Docker を使ってください。
|
|
||||||
|
|
||||||
### OpenDeploy / Vercel / Cloudflare（ワンクリック）
|
|
||||||
|
|
||||||
Cloudflare へのデプロイはシーンパイプラインがより長い CPU 時間を必要とするため、Workers Paid Plan が必要です。OpenDeploy では AI エージェントにデプロイを任せることができます。
|
|
||||||
|
|
||||||
<a href="https://opendeploy.dev/github/zonghaoyuan/infiplot"><img src="https://oss.opendeploy.dev/static/deploy-with-your-agent.svg" alt="Deploy with your agent" height="34"></a>
|
|
||||||
<a href="https://vercel.com/new/clone?repository-url=https://github.com/zonghaoyuan/infiplot&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%3A%20Xiaomi%20MiMo%20%28free%29%20or%20StepFun%20%28paid%2C%20better%20quality%29.&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"><img src="https://vercel.com/button" alt="Deploy with Vercel" height="34"></a>
|
|
||||||
<a href="https://deploy.workers.cloudflare.com/?url=https://github.com/zonghaoyuan/infiplot"><img src="https://deploy.workers.cloudflare.com/button" alt="Deploy to Cloudflare" height="34"></a>
|
|
||||||
|
|
||||||
デプロイ後、環境変数を設定してください —— 下記の[設定ガイド](#設定ガイド)を参照。リポジトリのルートがアプリ本体です：Vercel では特別なルート設定は不要です。Cloudflare ではビルドコマンドを `pnpm build:cf` に設定するだけで済みます。
|
|
||||||
|
|
||||||
### Docker デプロイ（セルフホスト）
|
|
||||||
|
|
||||||
VPS、ホームサーバー、ローカルマシンに対応。x86 と ARM（Apple Silicon Mac を含む）をサポート。リポジトリのクローンは不要です。2 つのファイルをダウンロードするだけで始められます：
|
|
||||||
|
|
||||||
```bash
|
|
||||||
mkdir -p infiplot && cd infiplot
|
|
||||||
curl -fsSL https://raw.githubusercontent.com/zonghaoyuan/infiplot/main/docker-compose.yml -o docker-compose.yml
|
|
||||||
curl -fsSL https://raw.githubusercontent.com/zonghaoyuan/infiplot/main/.env.example -o .env.example
|
|
||||||
[ -f .env.local ] || cp .env.example .env.local
|
|
||||||
```
|
|
||||||
|
|
||||||
`.env.local` を編集して API キーを設定し（[設定ガイド](#設定ガイド)を参照）、起動します：
|
|
||||||
|
|
||||||
```bash
|
|
||||||
docker compose up -d
|
|
||||||
```
|
|
||||||
|
|
||||||
`http://localhost:3000` にアクセスしてゲームを開始できます。
|
|
||||||
|
|
||||||
> Compose を使わず、直接イメージを実行することもできます：
|
|
||||||
> ```bash
|
|
||||||
> docker run -d -p 3000:3000 --env-file .env.local ghcr.io/zonghaoyuan/infiplot:latest
|
|
||||||
> ```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📸 スクリーンショット
|
## 📸 スクリーンショット
|
||||||
|
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="docs/screenshots/1.webp"><img src="docs/screenshots/1.webp" width="420" alt="InfiPlot スクリーンショット 1"></a></td>
|
<td><a href="docs/screenshots/1.webp"><img src="docs/screenshots/1.webp" width="420" alt="InfiPlot スクリーンショット 1"></a></td>
|
||||||
<td><a href="docs/screenshots/2.webp"><img src="docs/screenshots/2.webp" width="420" alt="InfiPlot スクリーンショット 2"></a></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><a href="docs/screenshots/3.webp"><img src="docs/screenshots/3.webp" width="420" alt="InfiPlot スクリーンショット 3"></a></td>
|
<td><a href="docs/screenshots/3.webp"><img src="docs/screenshots/3.webp" width="420" alt="InfiPlot スクリーンショット 3"></a></td>
|
||||||
<td><a href="docs/screenshots/4.webp"><img src="docs/screenshots/4.webp" width="420" alt="InfiPlot スクリーンショット 4"></a></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="docs/screenshots/5.webp"><img src="docs/screenshots/5.webp" width="420" alt="InfiPlot スクリーンショット 5"></a></td>
|
|
||||||
<td><a href="docs/screenshots/6.webp"><img src="docs/screenshots/6.webp" width="420" alt="InfiPlot スクリーンショット 6"></a></td>
|
<td><a href="docs/screenshots/6.webp"><img src="docs/screenshots/6.webp" width="420" alt="InfiPlot スクリーンショット 6"></a></td>
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><a href="docs/screenshots/7.webp"><img src="docs/screenshots/7.webp" width="420" alt="InfiPlot スクリーンショット 7"></a></td>
|
|
||||||
<td><a href="docs/screenshots/8.webp"><img src="docs/screenshots/8.webp" width="420" alt="InfiPlot スクリーンショット 8"></a></td>
|
<td><a href="docs/screenshots/8.webp"><img src="docs/screenshots/8.webp" width="420" alt="InfiPlot スクリーンショット 8"></a></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="docs/screenshots/9.webp"><img src="docs/screenshots/9.webp" width="420" alt="InfiPlot スクリーンショット 9"></a></td>
|
|
||||||
<td><a href="docs/screenshots/10.webp"><img src="docs/screenshots/10.webp" width="420" alt="InfiPlot スクリーンショット 10"></a></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><a href="docs/screenshots/11.webp"><img src="docs/screenshots/11.webp" width="420" alt="InfiPlot スクリーンショット 11"></a></td>
|
|
||||||
<td><a href="docs/screenshots/12.webp"><img src="docs/screenshots/12.webp" width="420" alt="InfiPlot スクリーンショット 12"></a></td>
|
<td><a href="docs/screenshots/12.webp"><img src="docs/screenshots/12.webp" width="420" alt="InfiPlot スクリーンショット 12"></a></td>
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><a href="docs/screenshots/13.webp"><img src="docs/screenshots/13.webp" width="420" alt="InfiPlot スクリーンショット 13"></a></td>
|
|
||||||
<td><a href="docs/screenshots/14.webp"><img src="docs/screenshots/14.webp" width="420" alt="InfiPlot スクリーンショット 14"></a></td>
|
<td><a href="docs/screenshots/14.webp"><img src="docs/screenshots/14.webp" width="420" alt="InfiPlot スクリーンショット 14"></a></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
@@ -134,67 +91,43 @@ docker compose up -d
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## チームとビジョン
|
## デプロイ
|
||||||
|
|
||||||
私たちは、清華大学をはじめとする大学に集う若者のグループです。
|
InfiPlot は複数のデプロイ方法に対応しています。個人利用には Vercel のワンクリックデプロイをおすすめします。自分のサーバーやローカルマシンで動かしたい場合は Docker を使ってください。
|
||||||
|
|
||||||
一方で、私たち自身が galgame、乙女ゲーム、FMV、AI ロールプレイといったゲームのヘビーユーザーでした。楽しみながらも、もし筋書きが固定された選択肢に縛られず、チャットアプリ越しの会話ではなく AI キャラクターと深く関われたら、どれほど愉快で刺激的だろうと想像していました。
|
### OpenDeploy / Vercel / Cloudflare（ワンクリック）
|
||||||
|
|
||||||
もう一方で、私たちはたまたま大規模モデルの技術を少しばかり理解しており、AI でアイデアを素早く形にでき、技術の道筋や既存技術で実現できる製品の限界について、ささやかな考えを持っていました。
|
Cloudflare へのデプロイはシーンパイプラインがより長い CPU 時間を必要とするため、Workers Paid Plan が必要です。OpenDeploy では AI エージェントにデプロイを任せることができます。
|
||||||
|
|
||||||
きっかけは 2026 年 4 月 22 日、[@zan2434](https://x.com/zan2434) たちが [flipbook](https://flipbook.page/) を公開したことでした。この全く新しいインタラクションの形に、私たちは驚き、心を躍らせました。
|
<a href="https://opendeploy.dev/github/zonghaoyuan/infiplot"><img src="https://oss.opendeploy.dev/static/deploy-with-your-agent.svg" alt="Deploy with your agent" height="34"></a>
|
||||||
そして 5 月のある日、意気投合し、こうした製品を作ろうと決めました —— かつて諦めた幻想を叶える手助けをしつつ、マルチモーダルモデルがもたらす新しいインタラクションの形を探るために。
|
<a href="https://vercel.com/new/clone?repository-url=https://github.com/zonghaoyuan/infiplot&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%3A%20Xiaomi%20MiMo%20%28free%29%20or%20StepFun%20%28paid%2C%20better%20quality%29.&envLink=https://github.com/zonghaoyuan/infiplot/blob/main/docs/configuration.ja.md"><img src="https://vercel.com/button" alt="Deploy with Vercel" height="34"></a>
|
||||||
|
<a href="https://deploy.workers.cloudflare.com/?url=https://github.com/zonghaoyuan/infiplot"><img src="https://deploy.workers.cloudflare.com/button" alt="Deploy to Cloudflare" height="34"></a>
|
||||||
|
|
||||||
プロジェクトはまだごく初期で、多くの機能が未完成です。[issue](https://github.com/zonghaoyuan/infiplot/issues) でのフィードバックを歓迎します。あるいは開発チームに加わって、一緒に新たな可能性を探り、あなた自身の好奇心を満たしてください。
|
デプロイ後、[設定ガイド](docs/configuration.ja.md)に従って環境変数を設定してください。リポジトリのルートがアプリ本体です：Vercel では特別なルート設定は不要です。Cloudflare ではビルドコマンドを `pnpm build:cf` に設定するだけで済みます。
|
||||||
|
|
||||||
お問い合わせ：hi@infiplot.com
|
### Docker デプロイ（セルフホスト）
|
||||||
|
|
||||||
**InfiPlot ベータ交流グループ**（QQ グループ番号 `575404333`）—— QR コードを読み取って参加し、フィードバックや共同開発にご参加ください：
|
VPS、ホームサーバー、ローカルマシンに対応。x86 と ARM（Apple Silicon Mac を含む）をサポート。リポジトリのクローンは不要です。2 つのファイルをダウンロードするだけで始められます：
|
||||||
|
|
||||||
<img src="public/qq-group.webp" alt="InfiPlot ベータ交流グループ QQ QRコード" width="200" />
|
```bash
|
||||||
|
mkdir -p infiplot && cd infiplot
|
||||||
|
curl -fsSL https://raw.githubusercontent.com/zonghaoyuan/infiplot/main/docker-compose.yml -o docker-compose.yml
|
||||||
|
curl -fsSL https://raw.githubusercontent.com/zonghaoyuan/infiplot/main/.env.example -o .env.example
|
||||||
|
[ -f .env.local ] || cp .env.example .env.local
|
||||||
|
```
|
||||||
|
|
||||||
---
|
`.env.local` を編集して API キーを設定し（[設定ガイド](docs/configuration.ja.md)を参照）、起動します：
|
||||||
|
|
||||||
## 設定ガイド
|
```bash
|
||||||
|
docker compose up -d
|
||||||
|
```
|
||||||
|
|
||||||
InfiPlot は 4 種類のモデルプロバイダと通信します。**テキスト（Text）・ビジョン（Vision）は、任意の OpenAI 互換エンドポイント**を使用でき、自由に組み合わせられます —— Google Gemini を使う場合は、`*_BASE_URL` をその OpenAI 互換エンドポイント（`https://generativelanguage.googleapis.com/v1beta/openai`）に向けるだけです。Anthropic Claude を使う場合は、互換ゲートウェイ（LiteLLM など）の経由を推奨します —— Anthropic の公式エンドポイントは OpenAI 互換レイヤーを提供していますがキャッシュ非対応のため、コストとレイテンシが上昇します。**画像（Image）**は **Runware**（独自の task-array プロトコル）と **OpenAI**（`gpt-image`）に対応します。**音声（TTS）**は **Xiaomi MiMo**（独自の音声デザイン/クローンプロトコル —— キャラクターごとの音声デザイン、クローン、行ごとの抑揚指示に対応、無料）と **StepFun**（32 種のプリセット音声を AI が自動マッチング、有料ですがより高品質）に対応します。
|
`http://localhost:3000` にアクセスしてゲームを開始できます。
|
||||||
|
|
||||||
**1. プロバイダを選ぶ**
|
> Compose を使わず、直接イメージを実行することもできます：
|
||||||
|
> ```bash
|
||||||
| プロバイダ | 環境変数 | 必須？ | 推奨 |
|
> docker run -d -p 3000:3000 --env-file .env.local ghcr.io/zonghaoyuan/infiplot:latest
|
||||||
|---|---|---|---|
|
> ```
|
||||||
| 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` | 任意 —— 空欄なら無音で動作 | Xiaomi MiMo の `mimo-v2.5-tts`（無料）；有料の選択肢：[StepFun](https://www.stepfun.com) の `step-tts-2` |
|
|
||||||
|
|
||||||
**2. 環境変数を設定する**
|
|
||||||
|
|
||||||
9 つの変数が必須で、TTS は任意です（空欄なら無音で動作）。低コストなテスト用のフラグもあります。
|
|
||||||
|
|
||||||
| 変数 | 効果 |
|
|
||||||
|---|---|
|
|
||||||
| `MOCK_IMAGE=true` | 画像生成をスキップし、レンダラが静的なプレースホルダを返します。ストーリー・音声・選択肢は通常どおり動作します。Runware のクレジットを消費せずに TTS を調整するのに最適です。 |
|
|
||||||
|
|
||||||
設定場所（正確なフォーマットは `.env.example` を参照）：
|
|
||||||
|
|
||||||
- **ローカル開発** —— `.env.local`
|
|
||||||
- **Vercel** —— Project Settings → Environment Variables
|
|
||||||
- **Cloudflare Workers** —— リポジトリのルートから各変数について `wrangler secret put <NAME>` を実行するか、ダッシュボード（Workers → infiplot → Settings → Variables and Secrets）で設定します。ステージング環境にアクセス制限を掛けたい場合は、Worker の前に [Cloudflare Access](https://developers.cloudflare.com/cloudflare-one/applications/) を挟むと、ゼロコードでメール許可リスト方式の認証が利用できます。
|
|
||||||
|
|
||||||
**3. コストに注意**
|
|
||||||
|
|
||||||
推奨の 3 点セットでは、各シーンのコストは主に画像生成モデルによるものです。FLUX.2 [klein] 9B KV の画像は 1 シーンあたり概ね **$0.00078**（1792×1024、4 ステップ、サブ秒）。テキストモデルは `deepseek-v4-flash` を使用するため、テキストコストは比較になりません。シーン内のビートをタップしていくのは無料です。切り替えを一瞬に保つため、エンジンは選ぶ可能性はあるが最終的に選ばないシーンも先行生成します —— そのため実際の支出は、あなたが実際に見るシーン数よりやや高くなります。
|
|
||||||
|
|
||||||
**4. 画像プロキシ（オプション）**
|
|
||||||
|
|
||||||
デフォルトではブラウザが画像プロバイダーに直接アクセスするため、設定は不要です —— `NEXT_PUBLIC_IMAGE_PROXY_URL` を空欄のままにすれば、まったく影響ありません。画像が「上から順に」表示される現象（一部のネットワークで Chrome の `ERR_QUIC_PROTOCOL_ERROR` により PNG が行ごとに描画される）に遭遇した場合のみ必要です。小さな Cloudflare Worker をデプロイすると、画像をサーバー側で再取得し HTTP/2 で一括返却します。ワンクリックデプロイは **[infiplot-image-proxy](https://github.com/zonghaoyuan/infiplot-image-proxy)** を参照し、出力された `workers.dev` の URL を `NEXT_PUBLIC_IMAGE_PROXY_URL` に設定してください。
|
|
||||||
|
|
||||||
**5. プレイヤー自身の音声 Key（任意・推奨）**
|
|
||||||
|
|
||||||
Xiaomi は TTS モデルに RPM/TPM 制限を設けています。公開デプロイで多数のプレイヤーが単一の `TTS_API_KEY` を共有して同時にプレイすると、この制限に達しやすく、**ストーリーも画像も正常なのに音声だけ出ない**という症状になります。対策として、プレイヤーはトップページで**自分の** Xiaomi MiMo Key（無料で取得可）を任意で入力できます。合成は**ブラウザから Xiaomi へ直接**行われ、**Key はプレイヤーのブラウザ内にのみ保存され、あなたのサーバーを一切経由しません**。これにより安定した音声と低遅延が得られます。完全な追加機能であり、未入力ならこれまで通りサーバー側の Key にフォールバックします。
|
|
||||||
|
|
||||||
取得・入力の手順は [音声 Key 持ち込みガイド](docs/xiaomi-tts-key.md) を参照してください。
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -221,6 +154,27 @@ Xiaomi は TTS モデルに RPM/TPM 制限を設けています。公開デプ
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## チームとビジョン
|
||||||
|
|
||||||
|
私たちは、清華大学をはじめとする大学に集う若者のグループです。
|
||||||
|
|
||||||
|
一方で、私たち自身が galgame、乙女ゲーム、FMV、AI ロールプレイといったゲームのヘビーユーザーでした。楽しみながらも、もし筋書きが固定された選択肢に縛られず、チャットアプリ越しの会話ではなく AI キャラクターと深く関われたら、どれほど愉快で刺激的だろうと想像していました。
|
||||||
|
|
||||||
|
もう一方で、私たちはたまたま大規模モデルの技術を少しばかり理解しており、AI でアイデアを素早く形にでき、技術の道筋や既存技術で実現できる製品の限界について、ささやかな考えを持っていました。
|
||||||
|
|
||||||
|
きっかけは 2026 年 4 月 22 日、[@zan2434](https://x.com/zan2434) たちが [flipbook](https://flipbook.page/) を公開したことでした。この全く新しいインタラクションの形に、私たちは驚き、心を躍らせました。
|
||||||
|
そして 5 月のある日、意気投合し、こうした製品を作ろうと決めました —— かつて諦めた幻想を叶える手助けをしつつ、マルチモーダルモデルがもたらす新しいインタラクションの形を探るために。
|
||||||
|
|
||||||
|
プロジェクトはまだごく初期で、多くの機能が未完成です。[issue](https://github.com/zonghaoyuan/infiplot/issues) でのフィードバックを歓迎します。あるいは開発チームに加わって、一緒に新たな可能性を探り、あなた自身の好奇心を満たしてください。
|
||||||
|
|
||||||
|
お問い合わせ：hi@infiplot.com
|
||||||
|
|
||||||
|
**InfiPlot ベータ交流グループ**（QQ グループ番号 `575404333`）—— QR コードを読み取って参加し、フィードバックや共同開発にご参加ください：
|
||||||
|
|
||||||
|
<img src="public/qq-group.webp" alt="InfiPlot ベータ交流グループ QQ QRコード" width="200" />
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## スター推移
|
## スター推移
|
||||||
|
|
||||||
[](https://star-history.com/#zonghaoyuan/infiplot&Date)
|
[](https://star-history.com/#zonghaoyuan/infiplot&Date)
|
||||||
|
|||||||
@@ -27,9 +27,22 @@ InfiPlot是一款AI实时生成内容的互动剧情游戏，这里没有预设
|
|||||||
|
|
||||||
用一句话说，我们要做的是一款用AI实时生成内容的《完蛋！我被美女包围了！》
|
用一句话说，我们要做的是一款用AI实时生成内容的《完蛋！我被美女包围了！》
|
||||||
|
|
||||||
无论你是六岁的小朋友，20岁的年轻人，35岁的青年还是60岁的长者，都能在这里满足独属于你的幻想：
|
无论你是谁，都能在这里满足独属于你的幻想：
|
||||||
|
|
||||||
穿越到哈利波特世界学习魔法、成为学校里所有异性青睐和表达爱意的对象、顶刊顶会发不停科研经费拿到手软、穿越到甄嬛传体验宫廷斗争、或者重返年轻为遗憾的事情重新做选择......
|
- 穿越到哈利波特世界学习魔法
|
||||||
|
- 成为学校里所有异性青睐和表达爱意的对象
|
||||||
|
- 顶刊顶会发不停，科研经费拿到手软
|
||||||
|
- 穿越到甄嬛传体验宫廷斗争
|
||||||
|
- 重返年轻，为遗憾的事情重新做选择
|
||||||
|
- ......
|
||||||
|
|
||||||
|
核心能力：
|
||||||
|
|
||||||
|
- **多智能体协作** — 编剧、角色设计师、场景布置师、画家各司其职，保证剧情连贯、角色一致
|
||||||
|
- **预测式生成** — 你做出选择时，下一幕通常已经画好，切换瞬间完成
|
||||||
|
- **点击探索** — 直接点击画面任意位置，vision 模型会理解你的意图并做出响应
|
||||||
|
- **AI 配音** — 每个角色拥有独特声线，支持小米 MiMo（免费）和 StepFun（付费高品质）
|
||||||
|
- **风格自由** — 火柴人、赛博朋克、水彩、漫画......任意风格都能生成
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -39,75 +52,19 @@ InfiPlot是一款AI实时生成内容的互动剧情游戏，这里没有预设
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 部署
|
|
||||||
|
|
||||||
InfiPlot 支持多种部署方式。个人使用推荐 Vercel 一键部署；想部署到自己的服务器或本地运行，可以用 Docker。
|
|
||||||
|
|
||||||
### OpenDeploy / Vercel / Cloudflare（一键部署）
|
|
||||||
|
|
||||||
Cloudflare 部署因场景流水线需要更长 CPU 时间，需要 Workers Paid Plan。OpenDeploy 支持让 AI Agent 帮你完成部署。
|
|
||||||
|
|
||||||
<a href="https://opendeploy.dev/github/zonghaoyuan/infiplot"><img src="https://oss.opendeploy.dev/static/deploy-with-your-agent.svg" alt="Deploy with your agent" height="34"></a>
|
|
||||||
<a href="https://vercel.com/new/clone?repository-url=https://github.com/zonghaoyuan/infiplot&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%3A%20Xiaomi%20MiMo%20%28free%29%20or%20StepFun%20%28paid%2C%20better%20quality%29.&envLink=https://github.com/zonghaoyuan/infiplot%23%E9%85%8D%E7%BD%AE%E6%95%99%E7%A8%8B"><img src="https://vercel.com/button" alt="Deploy with Vercel" height="34"></a>
|
|
||||||
<a href="https://deploy.workers.cloudflare.com/?url=https://github.com/zonghaoyuan/infiplot"><img src="https://deploy.workers.cloudflare.com/button" alt="Deploy to Cloudflare" height="34"></a>
|
|
||||||
|
|
||||||
部署完成后，填好环境变量 —— 详见下方的[配置教程](#配置教程)。仓库根目录就是应用本身：Vercel 无需额外设置 root directory；在 Cloudflare 上把构建命令设为 `pnpm build:cf` 即可。
|
|
||||||
|
|
||||||
### Docker 部署（自托管）
|
|
||||||
|
|
||||||
适用于 VPS、家庭服务器或本地电脑。支持 x86 和 ARM（含 Apple Silicon Mac）。无需克隆仓库，只需下载两个文件：
|
|
||||||
|
|
||||||
```bash
|
|
||||||
mkdir -p infiplot && cd infiplot
|
|
||||||
curl -fsSL https://raw.githubusercontent.com/zonghaoyuan/infiplot/main/docker-compose.yml -o docker-compose.yml
|
|
||||||
curl -fsSL https://raw.githubusercontent.com/zonghaoyuan/infiplot/main/.env.example -o .env.example
|
|
||||||
[ -f .env.local ] || cp .env.example .env.local
|
|
||||||
```
|
|
||||||
|
|
||||||
编辑 `.env.local` 填入你的 API Key（详见[配置教程](#配置教程)），然后启动：
|
|
||||||
|
|
||||||
```bash
|
|
||||||
docker compose up -d
|
|
||||||
```
|
|
||||||
|
|
||||||
访问 `http://localhost:3000` 即可开始游戏。
|
|
||||||
|
|
||||||
> 也可以不用 Compose，直接运行镜像：
|
|
||||||
> ```bash
|
|
||||||
> docker run -d -p 3000:3000 --env-file .env.local ghcr.io/zonghaoyuan/infiplot:latest
|
|
||||||
> ```
|
|
||||||
|
|
||||||
---
|
|
||||||
|
|
||||||
## 📸 游戏截图
|
## 📸 游戏截图
|
||||||
|
|
||||||
<table>
|
<table>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="docs/screenshots/1.webp"><img src="docs/screenshots/1.webp" width="420" alt="InfiPlot 游戏截图 1"></a></td>
|
<td><a href="docs/screenshots/1.webp"><img src="docs/screenshots/1.webp" width="420" alt="InfiPlot 游戏截图 1"></a></td>
|
||||||
<td><a href="docs/screenshots/2.webp"><img src="docs/screenshots/2.webp" width="420" alt="InfiPlot 游戏截图 2"></a></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><a href="docs/screenshots/3.webp"><img src="docs/screenshots/3.webp" width="420" alt="InfiPlot 游戏截图 3"></a></td>
|
<td><a href="docs/screenshots/3.webp"><img src="docs/screenshots/3.webp" width="420" alt="InfiPlot 游戏截图 3"></a></td>
|
||||||
<td><a href="docs/screenshots/4.webp"><img src="docs/screenshots/4.webp" width="420" alt="InfiPlot 游戏截图 4"></a></td>
|
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="docs/screenshots/5.webp"><img src="docs/screenshots/5.webp" width="420" alt="InfiPlot 游戏截图 5"></a></td>
|
|
||||||
<td><a href="docs/screenshots/6.webp"><img src="docs/screenshots/6.webp" width="420" alt="InfiPlot 游戏截图 6"></a></td>
|
<td><a href="docs/screenshots/6.webp"><img src="docs/screenshots/6.webp" width="420" alt="InfiPlot 游戏截图 6"></a></td>
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><a href="docs/screenshots/7.webp"><img src="docs/screenshots/7.webp" width="420" alt="InfiPlot 游戏截图 7"></a></td>
|
|
||||||
<td><a href="docs/screenshots/8.webp"><img src="docs/screenshots/8.webp" width="420" alt="InfiPlot 游戏截图 8"></a></td>
|
<td><a href="docs/screenshots/8.webp"><img src="docs/screenshots/8.webp" width="420" alt="InfiPlot 游戏截图 8"></a></td>
|
||||||
</tr>
|
</tr>
|
||||||
<tr>
|
<tr>
|
||||||
<td><a href="docs/screenshots/9.webp"><img src="docs/screenshots/9.webp" width="420" alt="InfiPlot 游戏截图 9"></a></td>
|
|
||||||
<td><a href="docs/screenshots/10.webp"><img src="docs/screenshots/10.webp" width="420" alt="InfiPlot 游戏截图 10"></a></td>
|
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><a href="docs/screenshots/11.webp"><img src="docs/screenshots/11.webp" width="420" alt="InfiPlot 游戏截图 11"></a></td>
|
|
||||||
<td><a href="docs/screenshots/12.webp"><img src="docs/screenshots/12.webp" width="420" alt="InfiPlot 游戏截图 12"></a></td>
|
<td><a href="docs/screenshots/12.webp"><img src="docs/screenshots/12.webp" width="420" alt="InfiPlot 游戏截图 12"></a></td>
|
||||||
</tr>
|
|
||||||
<tr>
|
|
||||||
<td><a href="docs/screenshots/13.webp"><img src="docs/screenshots/13.webp" width="420" alt="InfiPlot 游戏截图 13"></a></td>
|
|
||||||
<td><a href="docs/screenshots/14.webp"><img src="docs/screenshots/14.webp" width="420" alt="InfiPlot 游戏截图 14"></a></td>
|
<td><a href="docs/screenshots/14.webp"><img src="docs/screenshots/14.webp" width="420" alt="InfiPlot 游戏截图 14"></a></td>
|
||||||
</tr>
|
</tr>
|
||||||
</table>
|
</table>
|
||||||
@@ -134,79 +91,43 @@ docker compose up -d
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
## 团队与愿景
|
## 部署
|
||||||
|
|
||||||
我们是一群来自清华大学、兰州大学等高校的年轻人。
|
InfiPlot 支持多种部署方式。个人使用推荐 Vercel 一键部署；想部署到自己的服务器或本地运行，可以用 Docker。
|
||||||
|
|
||||||
一方面，我们本来就是galgame、乙女游戏、FMV、AI角色扮演游戏这类游戏的深度用户，在享受游戏体验的同时，也会想象如果能选择不被预设的剧情选项，或者和对话的AI角色深度互动而不只是通过聊天软件聊天，该是多么愉快刺激的体验。
|
### OpenDeploy / Vercel / Cloudflare（一键部署）
|
||||||
|
|
||||||
另一方面，我们恰好又对大模型技术有些了解，能用AI快速实现想法，对技术路线和基于已有技术的产品能力边界有一些浅薄的思考。
|
Cloudflare 部署因场景流水线需要更长 CPU 时间，需要 Workers Paid Plan。OpenDeploy 支持让 AI Agent 帮你完成部署。
|
||||||
|
|
||||||
契机发生在 2026 年 4 月 22 日，[@zan2434](https://x.com/zan2434) 等人发布了 [flipbook](https://flipbook.page/)，我们对这种全新的交互形态感到震惊和欣喜。
|
<a href="https://opendeploy.dev/github/zonghaoyuan/infiplot"><img src="https://oss.opendeploy.dev/static/deploy-with-your-agent.svg" alt="Deploy with your agent" height="34"></a>
|
||||||
于是在 5 月的某一天，我们一拍即合，决定做一款这样的产品，既帮助大家满足那些曾经遗憾过的幻想，又能够探索多模态模型所带来的新的交互形态。
|
<a href="https://vercel.com/new/clone?repository-url=https://github.com/zonghaoyuan/infiplot&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%3A%20Xiaomi%20MiMo%20%28free%29%20or%20StepFun%20%28paid%2C%20better%20quality%29.&envLink=https://github.com/zonghaoyuan/infiplot/blob/main/docs/configuration.md"><img src="https://vercel.com/button" alt="Deploy with Vercel" height="34"></a>
|
||||||
|
<a href="https://deploy.workers.cloudflare.com/?url=https://github.com/zonghaoyuan/infiplot"><img src="https://deploy.workers.cloudflare.com/button" alt="Deploy to Cloudflare" height="34"></a>
|
||||||
|
|
||||||
目前我们的项目还很早期，有许多功能尚不完善，欢迎提交 [issues](https://github.com/zonghaoyuan/infiplot/issues) 反馈问题，或者加入我们的开发团队一起探索新的可能性，满足你的好奇心。
|
部署完成后，按照 [配置教程](docs/configuration.md) 设置环境变量即可开始游戏。仓库根目录就是应用本身：Vercel 无需额外设置 root directory；在 Cloudflare 上把构建命令设为 `pnpm build:cf` 即可。
|
||||||
|
|
||||||
联系方式：hi@infiplot.com
|
### Docker 部署（自托管）
|
||||||
|
|
||||||
欢迎扫码加入 **InfiPlot 公测交流群**（QQ 群号 `575404333`），一起反馈体验、参与共建：
|
适用于 VPS、家庭服务器或本地电脑。支持 x86 和 ARM（含 Apple Silicon Mac）。无需克隆仓库，只需下载两个文件：
|
||||||
|
|
||||||
<img src="public/qq-group.webp" alt="InfiPlot 公测交流群 QQ 二维码" width="200" />
|
```bash
|
||||||
|
mkdir -p infiplot && cd infiplot
|
||||||
|
curl -fsSL https://raw.githubusercontent.com/zonghaoyuan/infiplot/main/docker-compose.yml -o docker-compose.yml
|
||||||
|
curl -fsSL https://raw.githubusercontent.com/zonghaoyuan/infiplot/main/.env.example -o .env.example
|
||||||
|
[ -f .env.local ] || cp .env.example .env.local
|
||||||
|
```
|
||||||
|
|
||||||
---
|
编辑 `.env.local` 填入你的 API Key（详见 [配置教程](docs/configuration.md)），然后启动：
|
||||||
|
|
||||||
## 配置教程
|
```bash
|
||||||
|
docker compose up -d
|
||||||
|
```
|
||||||
|
|
||||||
InfiPlot 会与四类模型供应商通信。**文本（Text）和视觉（Vision）** 只走 OpenAI 兼容接口——想用 Google Gemini 的话，把 `*_BASE_URL` 指向其 OpenAI 兼容端点（`https://generativelanguage.googleapis.com/v1beta/openai`）即可；想用 Anthropic Claude 的话，推荐通过兼容网关（如 LiteLLM）转发，官方 OpenAI 兼容层不支持缓存，可能推高成本与延迟。**图像（Image）** 支持 **Runware**（其自有 task-array 协议）与 **OpenAI**（`gpt-image`）。**语音（TTS）** 支持**小米 MiMo**（自有的音色设计/克隆协议——支持角色级音色设计、克隆与逐行演绎指导，免费）和 **StepFun 阶跃星辰**（32 个预设音色，由 AI 自动匹配，付费但体验更好）。
|
访问 `http://localhost:3000` 即可开始游戏。
|
||||||
|
|
||||||
**1. 选择你的供应商**
|
> 也可以不用 Compose，直接运行镜像：
|
||||||
|
> ```bash
|
||||||
| 供应商 | 环境变量 | 是否必填 | 推荐 |
|
> docker run -d -p 3000:3000 --env-file .env.local ghcr.io/zonghaoyuan/infiplot:latest
|
||||||
|---|---|---|---|
|
> ```
|
||||||
| 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`（免费）；付费可选 [StepFun](https://www.stepfun.com) 的 `step-tts-2` |
|
|
||||||
|
|
||||||
> **可选 · 指定接口协议**：每类模型都可加一个 `*_PROVIDER` 变量（`TEXT_PROVIDER` / `VISION_PROVIDER` / `IMAGE_PROVIDER`）显式选择接口协议。**不设则保持向后兼容**——文本/视觉默认走 OpenAI 兼容接口，图像按 `*_BASE_URL` 自动判断（`runware.ai` → Runware，否则 OpenAI 兼容；个别在 `runware.ai` 上以 OpenAI 协议提供的模型——如 `image-2-vip`——会按 OpenAI 兼容处理，需要时用 `IMAGE_PROVIDER` 显式覆盖即可）。
|
|
||||||
>
|
|
||||||
> | 取值 | 适用 | 说明 |
|
|
||||||
> |---|---|---|
|
|
||||||
> | `openai_compatible`（默认） | Text · Vision · Image | OpenAI Chat Completions / `/images/generations` |
|
|
||||||
> | `openai` | Image | OpenAI `gpt-image`，支持参考图编辑 |
|
|
||||||
> | `runware` | Image | Runware task-array 协议 |
|
|
||||||
>
|
|
||||||
> 文本和视觉**仅**支持 `openai_compatible`。要用 Gemini，把 `*_BASE_URL` 指向其 OpenAI 兼容端点（`https://generativelanguage.googleapis.com/v1beta/openai`）即可。要用 Claude，推荐通过兼容网关（如 LiteLLM）转发——Anthropic 官方端点虽提供 OpenAI 兼容层，但不支持缓存，会推高成本与延迟。
|
|
||||||
>
|
|
||||||
> 此外，`*_BASE_URL` 带不带 `/v1`（甚至末尾多写了 `/chat/completions`）都能正常工作——引擎会自动规范化。
|
|
||||||
|
|
||||||
**2. 填写环境变量**
|
|
||||||
|
|
||||||
九个变量为必填；TTS 可选（留空则静音运行）。此外还有一个用于低成本测试的开关：
|
|
||||||
|
|
||||||
| 变量 | 作用 |
|
|
||||||
|---|---|
|
|
||||||
| `MOCK_IMAGE=true` | 跳过图像生成，渲染器返回一张静态占位图。剧情、语音、选项照常运行。非常适合在不消耗 Runware 额度的情况下调试 TTS。 |
|
|
||||||
|
|
||||||
在哪里设置（确切字段见 `.env.example`）：
|
|
||||||
|
|
||||||
- **本地开发** —— `.env.local`
|
|
||||||
- **Vercel** —— Project Settings → Environment Variables
|
|
||||||
- **Cloudflare Workers** —— 在仓库根目录下逐个执行 `wrangler secret put <NAME>`，或在 dashboard 里设置（Workers → infiplot → Settings → Variables and Secrets）。如果要给 staging 加访问限制，可以在 Worker 前面挂一个 [Cloudflare Access](https://developers.cloudflare.com/cloudflare-one/applications/)（零代码，邮箱白名单）。
|
|
||||||
|
|
||||||
**3. 注意成本**
|
|
||||||
|
|
||||||
使用推荐的三件套时，每一幕场景的开销主要来自图像生成模型。FLUX.2 [klein] 9B KV 的图像大约 **$0.00078** 一张（1792×1024，4 步，亚秒级）；文本模型使用 `deepseek-v4-flash` 时，成本极低。逐拍点过一个场景是免费的。为了让切换瞬间完成，引擎还会预测式地生成那些你可能选、但最终可能没选的场景 —— 所以真实花费会比你实际看到的场景数略高一些。
|
|
||||||
|
|
||||||
**4. 图片代理（可选）**
|
|
||||||
|
|
||||||
默认浏览器直连图片供应商，无需任何配置 —— 留空 `NEXT_PUBLIC_IMAGE_PROXY_URL` 即可，完全不受影响。只有当你遇到图片「层层加载」（Chrome 在某些网络下 `ERR_QUIC_PROTOCOL_ERROR` 导致 PNG 逐行渲染）时才需要它：部署一个极小的 Cloudflare Worker，把图片改为服务端转发 + HTTP/2 原子返回。一键部署见 **[infiplot-image-proxy](https://github.com/zonghaoyuan/infiplot-image-proxy)**，然后把它给出的 `workers.dev` 地址填进 `NEXT_PUBLIC_IMAGE_PROXY_URL`。
|
|
||||||
|
|
||||||
**5. 玩家自带配音 Key（可选，推荐）**
|
|
||||||
|
|
||||||
小米对 TTS 模型有 RPM/TPM 限额。当你的公共部署有多人同时游玩、共用同一把 `TTS_API_KEY` 时，很容易撞到限额，表现为**剧情、画面都正常，唯独没有声音**。为此，玩家可以在首页可选地填入**自己的**小米 MiMo Key（免费申请）——配音请求由**浏览器直连小米**完成，**Key 只存在玩家本地、绝不经过你的服务器**，从而获得稳定配音与更低延迟。这是纯增强：不填则照常使用你部署的服务器 Key，行为不变。
|
|
||||||
|
|
||||||
申请与填写步骤见 [自带配音 Key 教程](docs/xiaomi-tts-key.md)。
|
|
||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
@@ -233,6 +154,27 @@ InfiPlot 会与四类模型供应商通信。**文本（Text）和视觉（Visio
|
|||||||
|
|
||||||
---
|
---
|
||||||
|
|
||||||
|
## 团队与愿景
|
||||||
|
|
||||||
|
我们是一群来自清华大学、兰州大学等高校的年轻人。
|
||||||
|
|
||||||
|
一方面，我们本来就是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="public/qq-group.webp" alt="InfiPlot 公测交流群 QQ 二维码" width="200" />
|
||||||
|
|
||||||
|
---
|
||||||
|
|
||||||
## Star 趋势
|
## Star 趋势
|
||||||
|
|
||||||
[](https://star-history.com/#zonghaoyuan/infiplot&Date)
|
[](https://star-history.com/#zonghaoyuan/infiplot&Date)
|
||||||
|
|||||||
@@ -0,0 +1,52 @@
|
|||||||
|
# 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 — for Google Gemini, point `*_BASE_URL` at its OpenAI-compatible endpoint (`https://generativelanguage.googleapis.com/v1beta/openai`). For Anthropic Claude, a compatible gateway (e.g. LiteLLM) is recommended — Anthropic's official endpoint offers an OpenAI-compatible layer but no caching, which raises cost and latency. **Image** supports **Runware** (its own task-array protocol) and **OpenAI** (`gpt-image`). **TTS** supports **Xiaomi MiMo** (its own voice design / clone protocol — per-character voice design, clone, and per-line delivery direction; free) and **StepFun** (32 preset voices, auto-matched by AI; paid but better quality).
|
||||||
|
|
||||||
|
## 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 (free); paid alternative: `step-tts-2` via [StepFun](https://www.stepfun.com) |
|
||||||
|
|
||||||
|
> **Optional · explicit protocol override**: each provider slot accepts a `*_PROVIDER` variable (`TEXT_PROVIDER` / `VISION_PROVIDER` / `IMAGE_PROVIDER`) to force a specific protocol. **Leave unset for backwards-compatible defaults** — text/vision default to OpenAI-compatible, image auto-detects from `*_BASE_URL` (`runware.ai` → Runware, otherwise OpenAI-compatible; models served via OpenAI protocol on `runware.ai` — such as `image-2-vip` — are handled as OpenAI-compatible; override with `IMAGE_PROVIDER` when needed).
|
||||||
|
>
|
||||||
|
> | Value | Applies to | Description |
|
||||||
|
> |---|---|---|
|
||||||
|
> | `openai_compatible` (default) | Text · Vision · Image | OpenAI Chat Completions / `/images/generations` |
|
||||||
|
> | `openai` | Image | OpenAI `gpt-image`, supports reference-image editing |
|
||||||
|
> | `runware` | Image | Runware task-array protocol |
|
||||||
|
>
|
||||||
|
> Text and vision **only** support `openai_compatible`. For Gemini, point `*_BASE_URL` at its OpenAI-compatible endpoint (`https://generativelanguage.googleapis.com/v1beta/openai`). For Claude, a compatible gateway (e.g. LiteLLM) is recommended — Anthropic's official endpoint offers an OpenAI-compatible layer but no caching, raising cost and latency.
|
||||||
|
>
|
||||||
|
> `*_BASE_URL` works with or without a trailing `/v1` (or even a trailing `/chat/completions`) — the engine normalizes automatically.
|
||||||
|
|
||||||
|
## 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 `.env.example` for the exact shape):
|
||||||
|
|
||||||
|
- **Local dev** — `.env.local`
|
||||||
|
- **Vercel** — Project Settings → Environment Variables
|
||||||
|
- **Cloudflare Workers** — from the repo root, 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.
|
||||||
|
|
||||||
|
## 4. Image proxy (optional)
|
||||||
|
|
||||||
|
By default the browser fetches images directly from the provider — no setup needed; leave `NEXT_PUBLIC_IMAGE_PROXY_URL` blank and you're completely unaffected. You only want this if you hit progressive "top-to-bottom" image loading (Chrome's `ERR_QUIC_PROTOCOL_ERROR` on some networks paints partial PNGs row by row): deploy a tiny Cloudflare Worker that re-fetches images server-side and serves them atomically over HTTP/2. One-click deploy at **[infiplot-image-proxy](https://github.com/zonghaoyuan/infiplot-image-proxy)**, then paste the `workers.dev` URL it prints into `NEXT_PUBLIC_IMAGE_PROXY_URL`.
|
||||||
|
|
||||||
|
## 5. Let players bring their own voice Key (optional, recommended)
|
||||||
|
|
||||||
|
Xiaomi rate-limits the TTS model by RPM/TPM. When a public deployment has many people playing at once through a single shared `TTS_API_KEY`, those limits are easy to hit — the symptom is **story and visuals work fine, but there's no audio**. To fix this, players can optionally enter **their own** Xiaomi MiMo key on the homepage (free to obtain). Synthesis then runs **browser-direct to Xiaomi**, the **key stays in the player's browser and never touches your server**, and they get stable voice with lower latency. It's purely additive: leave it blank and playback falls back to your server key exactly as before.
|
||||||
|
|
||||||
|
See the [Bring-your-own voice Key guide](xiaomi-tts-key.md) for how to obtain and enter one.
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
# 設定ガイド
|
||||||
|
|
||||||
|
InfiPlot は 4 種類のモデルプロバイダと通信します。**テキスト（Text）・ビジョン（Vision）は、任意の OpenAI 互換エンドポイント**を使用でき、自由に組み合わせられます —— Google Gemini を使う場合は、`*_BASE_URL` をその OpenAI 互換エンドポイント（`https://generativelanguage.googleapis.com/v1beta/openai`）に向けるだけです。Anthropic Claude を使う場合は、互換ゲートウェイ（LiteLLM など）の経由を推奨します —— Anthropic の公式エンドポイントは OpenAI 互換レイヤーを提供していますがキャッシュ非対応のため、コストとレイテンシが上昇します。**画像（Image）**は **Runware**（独自の task-array プロトコル）と **OpenAI**（`gpt-image`）に対応します。**音声（TTS）**は **Xiaomi MiMo**（独自の音声デザイン/クローンプロトコル —— キャラクターごとの音声デザイン、クローン、行ごとの抑揚指示に対応、無料）と **StepFun**（32 種のプリセット音声を AI が自動マッチング、有料ですがより高品質）に対応します。
|
||||||
|
|
||||||
|
## 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` | 任意 —— 空欄なら無音で動作 | Xiaomi MiMo の `mimo-v2.5-tts`（無料）；有料の選択肢：[StepFun](https://www.stepfun.com) の `step-tts-2` |
|
||||||
|
|
||||||
|
> **オプション · プロトコルの明示的指定**：各プロバイダスロットには `*_PROVIDER` 変数（`TEXT_PROVIDER` / `VISION_PROVIDER` / `IMAGE_PROVIDER`）を追加して、使用するプロトコルを明示的に指定できます。**未設定なら後方互換のデフォルト**を維持します —— テキスト/ビジョンは OpenAI 互換がデフォルト、画像は `*_BASE_URL` から自動判定（`runware.ai` → Runware、それ以外は OpenAI 互換。`runware.ai` 上で OpenAI プロトコルで提供されるモデル —— `image-2-vip` など —— は OpenAI 互換として処理されます。必要に応じて `IMAGE_PROVIDER` で上書きしてください）。
|
||||||
|
>
|
||||||
|
> | 値 | 対象 | 説明 |
|
||||||
|
> |---|---|---|
|
||||||
|
> | `openai_compatible`（デフォルト） | Text · Vision · Image | OpenAI Chat Completions / `/images/generations` |
|
||||||
|
> | `openai` | Image | OpenAI `gpt-image`、参照画像編集に対応 |
|
||||||
|
> | `runware` | Image | Runware task-array プロトコル |
|
||||||
|
>
|
||||||
|
> テキストとビジョンは `openai_compatible` **のみ**対応。Gemini を使う場合は `*_BASE_URL` をその OpenAI 互換エンドポイント（`https://generativelanguage.googleapis.com/v1beta/openai`）に向けてください。Claude を使う場合は互換ゲートウェイ（LiteLLM など）の経由を推奨 —— Anthropic の公式エンドポイントは OpenAI 互換レイヤーを提供していますが、キャッシュ非対応のためコストとレイテンシが上昇します。
|
||||||
|
>
|
||||||
|
> `*_BASE_URL` は末尾に `/v1` があってもなくても（`/chat/completions` まで付いていても）正常に動作します —— エンジンが自動で正規化します。
|
||||||
|
|
||||||
|
## 2. 環境変数を設定する
|
||||||
|
|
||||||
|
9 つの変数が必須で、TTS は任意です（空欄なら無音で動作）。低コストなテスト用のフラグもあります。
|
||||||
|
|
||||||
|
| 変数 | 効果 |
|
||||||
|
|---|---|
|
||||||
|
| `MOCK_IMAGE=true` | 画像生成をスキップし、レンダラが静的なプレースホルダを返します。ストーリー・音声・選択肢は通常どおり動作します。Runware のクレジットを消費せずに TTS を調整するのに最適です。 |
|
||||||
|
|
||||||
|
設定場所（正確なフォーマットは `.env.example` を参照）：
|
||||||
|
|
||||||
|
- **ローカル開発** —— `.env.local`
|
||||||
|
- **Vercel** —— Project Settings → Environment Variables
|
||||||
|
- **Cloudflare Workers** —— リポジトリのルートから各変数について `wrangler secret put <NAME>` を実行するか、ダッシュボード（Workers → infiplot → Settings → Variables and Secrets）で設定します。ステージング環境にアクセス制限を掛けたい場合は、Worker の前に [Cloudflare Access](https://developers.cloudflare.com/cloudflare-one/applications/) を挟むと、ゼロコードでメール許可リスト方式の認証が利用できます。
|
||||||
|
|
||||||
|
## 3. コストに注意
|
||||||
|
|
||||||
|
推奨の 3 点セットでは、各シーンのコストは主に画像生成モデルによるものです。FLUX.2 [klein] 9B KV の画像は 1 シーンあたり概ね **$0.00078**（1792×1024、4 ステップ、サブ秒）。テキストモデルは `deepseek-v4-flash` を使用するため、テキストコストは比較になりません。シーン内のビートをタップしていくのは無料です。切り替えを一瞬に保つため、エンジンは選ぶ可能性はあるが最終的に選ばないシーンも先行生成します —— そのため実際の支出は、あなたが実際に見るシーン数よりやや高くなります。
|
||||||
|
|
||||||
|
## 4. 画像プロキシ（オプション）
|
||||||
|
|
||||||
|
デフォルトではブラウザが画像プロバイダーに直接アクセスするため、設定は不要です —— `NEXT_PUBLIC_IMAGE_PROXY_URL` を空欄のままにすれば、まったく影響ありません。画像が「上から順に」表示される現象（一部のネットワークで Chrome の `ERR_QUIC_PROTOCOL_ERROR` により PNG が行ごとに描画される）に遭遇した場合のみ必要です。小さな Cloudflare Worker をデプロイすると、画像をサーバー側で再取得し HTTP/2 で一括返却します。ワンクリックデプロイは **[infiplot-image-proxy](https://github.com/zonghaoyuan/infiplot-image-proxy)** を参照し、出力された `workers.dev` の URL を `NEXT_PUBLIC_IMAGE_PROXY_URL` に設定してください。
|
||||||
|
|
||||||
|
## 5. プレイヤー自身の音声 Key（任意・推奨）
|
||||||
|
|
||||||
|
Xiaomi は TTS モデルに RPM/TPM 制限を設けています。公開デプロイで多数のプレイヤーが単一の `TTS_API_KEY` を共有して同時にプレイすると、この制限に達しやすく、**ストーリーも画像も正常なのに音声だけ出ない**という症状になります。対策として、プレイヤーはトップページで**自分の** Xiaomi MiMo Key（無料で取得可）を任意で入力できます。合成は**ブラウザから Xiaomi へ直接**行われ、**Key はプレイヤーのブラウザ内にのみ保存され、あなたのサーバーを一切経由しません**。これにより安定した音声と低遅延が得られます。完全な追加機能であり、未入力ならこれまで通りサーバー側の Key にフォールバックします。
|
||||||
|
|
||||||
|
取得・入力の手順は [音声 Key 持ち込みガイド](xiaomi-tts-key.md) を参照してください。
|
||||||
@@ -0,0 +1,52 @@
|
|||||||
|
# 配置教程
|
||||||
|
|
||||||
|
InfiPlot 会与四类模型供应商通信。**文本（Text）和视觉（Vision）** 只走 OpenAI 兼容接口——想用 Google Gemini 的话，把 `*_BASE_URL` 指向其 OpenAI 兼容端点（`https://generativelanguage.googleapis.com/v1beta/openai`）即可；想用 Anthropic Claude 的话，推荐通过兼容网关（如 LiteLLM）转发，官方 OpenAI 兼容层不支持缓存，可能推高成本与延迟。**图像（Image）** 支持 **Runware**（其自有 task-array 协议）与 **OpenAI**（`gpt-image`）。**语音（TTS）** 支持**小米 MiMo**（自有的音色设计/克隆协议——支持角色级音色设计、克隆与逐行演绎指导，免费）和 **StepFun 阶跃星辰**（32 个预设音色，由 AI 自动匹配，付费但体验更好）。
|
||||||
|
|
||||||
|
## 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`（免费）；付费可选 [StepFun](https://www.stepfun.com) 的 `step-tts-2` |
|
||||||
|
|
||||||
|
> **可选 · 指定接口协议**：每类模型都可加一个 `*_PROVIDER` 变量（`TEXT_PROVIDER` / `VISION_PROVIDER` / `IMAGE_PROVIDER`）显式选择接口协议。**不设则保持向后兼容**——文本/视觉默认走 OpenAI 兼容接口，图像按 `*_BASE_URL` 自动判断（`runware.ai` → Runware，否则 OpenAI 兼容；个别在 `runware.ai` 上以 OpenAI 协议提供的模型——如 `image-2-vip`——会按 OpenAI 兼容处理，需要时用 `IMAGE_PROVIDER` 显式覆盖即可）。
|
||||||
|
>
|
||||||
|
> | 取值 | 适用 | 说明 |
|
||||||
|
> |---|---|---|
|
||||||
|
> | `openai_compatible`（默认） | Text · Vision · Image | OpenAI Chat Completions / `/images/generations` |
|
||||||
|
> | `openai` | Image | OpenAI `gpt-image`，支持参考图编辑 |
|
||||||
|
> | `runware` | Image | Runware task-array 协议 |
|
||||||
|
>
|
||||||
|
> 文本和视觉**仅**支持 `openai_compatible`。要用 Gemini，把 `*_BASE_URL` 指向其 OpenAI 兼容端点（`https://generativelanguage.googleapis.com/v1beta/openai`）即可。要用 Claude，推荐通过兼容网关（如 LiteLLM）转发——Anthropic 官方端点虽提供 OpenAI 兼容层，但不支持缓存，会推高成本与延迟。
|
||||||
|
>
|
||||||
|
> 此外，`*_BASE_URL` 带不带 `/v1`（甚至末尾多写了 `/chat/completions`）都能正常工作——引擎会自动规范化。
|
||||||
|
|
||||||
|
## 2. 填写环境变量
|
||||||
|
|
||||||
|
九个变量为必填；TTS 可选（留空则静音运行）。此外还有一个用于低成本测试的开关：
|
||||||
|
|
||||||
|
| 变量 | 作用 |
|
||||||
|
|---|---|
|
||||||
|
| `MOCK_IMAGE=true` | 跳过图像生成，渲染器返回一张静态占位图。剧情、语音、选项照常运行。非常适合在不消耗 Runware 额度的情况下调试 TTS。 |
|
||||||
|
|
||||||
|
在哪里设置（确切字段见 `.env.example`）：
|
||||||
|
|
||||||
|
- **本地开发** —— `.env.local`
|
||||||
|
- **Vercel** —— Project Settings → Environment Variables
|
||||||
|
- **Cloudflare Workers** —— 在仓库根目录下逐个执行 `wrangler secret put <NAME>`，或在 dashboard 里设置（Workers → infiplot → Settings → Variables and Secrets）。如果要给 staging 加访问限制，可以在 Worker 前面挂一个 [Cloudflare Access](https://developers.cloudflare.com/cloudflare-one/applications/)（零代码，邮箱白名单）。
|
||||||
|
|
||||||
|
## 3. 注意成本
|
||||||
|
|
||||||
|
使用推荐的三件套时，每一幕场景的开销主要来自图像生成模型。FLUX.2 [klein] 9B KV 的图像大约 **$0.00078** 一张（1792×1024，4 步，亚秒级）；文本模型使用 `deepseek-v4-flash` 时，成本极低。逐拍点过一个场景是免费的。为了让切换瞬间完成，引擎还会预测式地生成那些你可能选、但最终可能没选的场景 —— 所以真实花费会比你实际看到的场景数略高一些。
|
||||||
|
|
||||||
|
## 4. 图片代理（可选）
|
||||||
|
|
||||||
|
默认浏览器直连图片供应商，无需任何配置 —— 留空 `NEXT_PUBLIC_IMAGE_PROXY_URL` 即可，完全不受影响。只有当你遇到图片「层层加载」（Chrome 在某些网络下 `ERR_QUIC_PROTOCOL_ERROR` 导致 PNG 逐行渲染）时才需要它：部署一个极小的 Cloudflare Worker，把图片改为服务端转发 + HTTP/2 原子返回。一键部署见 **[infiplot-image-proxy](https://github.com/zonghaoyuan/infiplot-image-proxy)**，然后把它给出的 `workers.dev` 地址填进 `NEXT_PUBLIC_IMAGE_PROXY_URL`。
|
||||||
|
|
||||||
|
## 5. 玩家自带配音 Key（可选，推荐）
|
||||||
|
|
||||||
|
小米对 TTS 模型有 RPM/TPM 限额。当你的公共部署有多人同时游玩、共用同一把 `TTS_API_KEY` 时，很容易撞到限额，表现为**剧情、画面都正常，唯独没有声音**。为此，玩家可以在首页可选地填入**自己的**小米 MiMo Key（免费申请）——配音请求由**浏览器直连小米**完成，**Key 只存在玩家本地、绝不经过你的服务器**，从而获得稳定配音与更低延迟。这是纯增强：不填则照常使用你部署的服务器 Key，行为不变。
|
||||||
|
|
||||||
|
申请与填写步骤见 [自带配音 Key 教程](xiaomi-tts-key.md)。
|
||||||
Reference in New Issue
Block a user