imcuttle /
flipbook-app
在 AI 生成的图片上任意位置长按 2 秒，AI 会推断你点的是什么，必要时联网查资料，然后生成一张子图并把它链回来 —— 一本可以"点出来"的可探索画册。 产品理念参考自 Flipbook.page 的"可探索画册"思路，用一套自己的开源实现把它跑通。 它解决什么问题 我自己用 AI 看科普 / 看架构图的时候，经常有这种感觉：图很漂亮，但图里那个东西到底是什么、它内部又长什么样，AI 不会主动告诉我，我也懒得复制粘贴去问下一轮。 F…
Product images
About
在 AI 生成的图片上任意位置长按 2 秒，AI 会推断你点的是什么，必要时联网查资料，然后生成一张子图并把它链回来 —— 一本可以"点出来"的可探索画册。 产品理念参考自 Flipbook.page 的"可探索画册"思路，用一套自己的开源实现把它跑通。 它解决什么问题 我自己用 AI 看科普 / 看架构图的时候，经常有这种感觉：图很漂亮，但图里那个东西到底是什么、它内部又长什么样，AI 不会主动告诉我，我也懒得复制粘贴去问下一轮。 Flipbook Canvas 把这件事做成了一个动作：长按图里你想知道的部位 2 秒，剩下的它来 —— 1. 后端先用一次大模型推断你点击的位置在语义上是什么（比如"啄木鸟的舌部"）； 2. 判断这个主题需不需要联网搜资料，需要就跑一次 web search 把权威来源喂给 planner； 3. 生成一张细致标注的子图（150–220 字图说 + 20–40 处图内文字注释，像儿童百科图鉴的风格）； 4. 用钻入动画把你带进去，就像翻进画册的下一层；再次点击同一区域会直接跳进去（空间 + 语义双重去重）。 下面是输入"啄木鸟"从零跑完整条流水线的样子： 几个我自己挺喜欢的细节 节点级并发：同一张父图最多 4 个不同位置同时生成，每个进行中的点击会在热点上流式显示阶段：推断标签… → 搜索网络… → 生成图像…。达到上限后光标会变成 ⌛。 联网搜索增强：planner 之前先有一个"决策再搜索"的关卡，明显抽象 / 超时态的主题会跳过搜索，时效性强的主题才去查；查到的来源会以 📚 徽标的形式挂在面包屑旁边，鼠标移上去能看完整 source list。 预览分享：任意 canvas 可以一键生成只读 ?s=<token> 链接，访客能浏览也能通过 SSE 实时看到作者还在生成的图片刷出来，但不能触发新的生成。 全屏投屏 / 移动端：⛶ 一键全屏，再切一下隐藏 UI 就剩一张图，适合投屏；移动端顶栏会自动收成图标、画廊变单列。 磁盘格式与静态站兼容：生成完的 canvas 可以直接喂给一个 skill 脚本导出成纯静态站，反过来把静态站文件夹丢回 server/data/canvases/ 重启服务也能被自动识别。 技术栈 Express + SSE + SQLite 后端，Vite + React + TS 前端。整条 AI 流水线（planner + 图像生成 + WebSearch）走 CodeBuddy CLI 子进程驱动，图像 provider 可插拔（默认 CodeBuddy；OpenAI / Nano Banana / Seedream 留好接口位；svg 兜底）。所以这个 repo 顺便也是一份 "把 CodeBuddy 当作运行时依赖" 的参考实现。 试用 bash git clone && cd flipbook-app npm install && npm run dev # stub 模式，秒级响应、无大模型 ENABLECODEBUDDY=1 npm run dev:server # 真实生成 打开 中英双语，欢迎开 issue。
Discovery history
- HelloGitHub·用户投稿
- 阮一峰周刊·用户投稿
Discuss this product