Product Research
Flipbook.page
产品技术拆解
一个按需实时生成的无限视觉浏览器——每一"页"都是 AI 生图，没有 HTML
01 · 产品体验
两种交互模式
用户可以通过搜索输入或点击图片任意位置来探索内容。每次交互都会生成一张全新的 AI 图片作为"下一页"。
主界面：地址栏输入 + "Tap anywhere on the page to expand"
Search 模式
输入
用户在地址栏输入任意主题，如"西安"
渐进生成
10 次 preview 从模糊到清晰（115KB → 780KB），扩散模型中间步骤直出
Draft 完成
草稿质量图可提前交互，用户不必等最终版
HQ 完成
最终高质量图替换 draft，生成完毕
搜索"西安"后生成的等距插画风格信息图
Tap 模式
点击
用户点击图片上任意感兴趣的区域
标记
前端在点击位置画红色十字瞄准器，生成标记图
识别
多模态模型"看图"识别被点击的对象（如 "Trocadero gardens"）
生成
基于标记图 + 固定 prompt 模板生成深入的下一页
点击"西安"页面后，自动深入生成了城区详细地图
02 · 技术原理
Query 到图片的
完整加工链
用户的 query 从来不会直接传给生图模型。系统做两层加工：内容加工 + 风格包装。
核心发现
真正决定画面质量的是那个精心调教过的固定风格模板（团队称经历了"数百次迭代"），而不是对用户 query 的改写。用户输入的内容只是被"嵌入"到模板的 Content 字段中。
Search 模式加工链
用户输入 Query
如 "History of the Roman Colosseum"
Web Search 增强
搜索获取真实数据，补充模型知识
Prompt Author 改写
LLM 改写为 authored_prompt（fallback 时直接透传原文）
风格模板包装
固定风格描述 + "内容：{authored_prompt}" = final_prompt
生图模型输出
Draft: fal-ai/flux-2 → Final: fal-ai/nano-banana-2
Search 模式请求体
POST /api/iteratively-generate-next-page
{
"query": "History of the Roman Colosseum",
"aspect_ratio": "16:9",
"web_search": true,
"session_id": "session_uuid",
"current_node_id": ""
}
传给生图模型的完整 Prompt
Draft 阶段 · fal-ai/flux-2
text → image
精美的插画风格技术海报，使用干净的线稿线条，柔和的漫射光，克制的灰色、柔和的绿色和温暖的点缀色，优雅简化的建筑形态，极简纹理，清晰的视觉层次。使用锐利的边缘，高文字可读性，物体与标签之间清晰分隔，简洁高对比度的构图。所有文字必须清晰、准确、易读。避免装饰性标注、速写感、模糊、难以辨认的微型文字、填充性文字和不必要的视觉复杂度。非卡通风格，非写实风格。
内容：{authored_prompt}
内容：{authored_prompt}
Final 阶段 · nano-banana-2
高质量
你可以针对用户选择的主题生成一篇新的视觉文章。如果有现有的参考图片，应将其作为有用上下文，但新图片应该是全新的构图。
新图片应该是高度精细的等距插画：
· 精致克制的配色，柔和灰色、自然绿色和微妙暖色点缀
· 精确干净的线条，细墨线轮廓
· 安静沉思的氛围，编辑式/建筑图纸质感
· 丰富环境构图，有意留白，清晰视觉层次
· 俯视/等距视角，柔和漫射光，无硬阴影
· 高度精细又有条理，如同博物馆插图
· 非卡通、非写实
内容：{authored_prompt}
新图片应该是高度精细的等距插画：
· 精致克制的配色，柔和灰色、自然绿色和微妙暖色点缀
· 精确干净的线条，细墨线轮廓
· 安静沉思的氛围，编辑式/建筑图纸质感
· 丰富环境构图，有意留白，清晰视觉层次
· 俯视/等距视角，柔和漫射光，无硬阴影
· 高度精细又有条理，如同博物馆插图
· 非卡通、非写实
内容：{authored_prompt}
Search 模式加工总结
authored_prompt 在 fallback 状态下 = 用户原始 query 原文。加工极其轻量——核心靠固定风格模板控制输出质量和一致性。
03 · Tap 模式深度拆解
点击如何变成
下一张图
Tap 模式比 Search 复杂很多——需要先"理解"用户点了什么，再生成深入内容。核心靠"看图"而非文字坐标。
用户点击图片
捕获归一化坐标 (x: 0-1, y: 0-1)
前端画红色瞄准器
红圈 #ff3b30 + 十字线 + 白色描边，半径 = min(宽,高) × 8.5%
多模态模型识别
Llama 4 Scout 看标记图 → 输出 tap_subject（如 "Trocadero gardens"）
tap_subject 不传给生图模型！
仅用于前端 UI 展示（面包屑、过渡动画）
构造 authored_prompt
固定内容模板 + parent_title + parent_query
image_to_image 生图
风格模板 + authored_prompt + 带红色标记的原图 → 生图模型
Tap 模式请求体
POST /api/iteratively-generate-next-page
{
"mode": "tap",
"image": "data:image/jpeg;base64,...",
// ↑ 带红色瞄准器的完整页面图片 (~350KB)
"aspect_ratio": "16:9",
"web_search": true,
"parent_query": "Eiffel Tower Paris",
"parent_title": "Eiffel Tower Paris",
"session_id": "session_uuid",
"current_node_id": "parent_node_id"
}
Tap 的 authored_prompt（完整原文）
固定内容模板 · 动态插入 parent 信息
image → image
针对红色圆圈标注的主题，生成一张全新构图的深入调查图片。在该特定子主题上深入挖掘，同时保留父页面的范围和上下文。不要简单地重复、裁剪或轻微变化父页面的构图。围绕新的子主题重新构图，使用全新的中心主题和辅助细节插图。
父页面上下文：{parent_title}。{parent_query}。
这张图片应该充满关于被标记主题的细节。不要在生成的图片中包含红色圆圈本身。
父页面上下文：{parent_title}。{parent_query}。
这张图片应该充满关于被标记主题的细节。不要在生成的图片中包含红色圆圈本身。
parent_title 和 parent_query 是什么？
它们来自用户当前正在查看的页面的元数据：
· parent_title = 当前页面的标题（page_title 字段）
· parent_query = 当前页面生成时的搜索词（query 字段）
· parent_title = 当前页面的标题（page_title 字段）
· parent_query = 当前页面生成时的搜索词（query 字段）
实测数据
场景
Prompt 中实际呈现
搜索"西安"后点击
Parent context: 西安. .parent_query 为空
搜索"Eiffel Tower"后点击
Parent context: Eiffel Tower Paris. Eiffel Tower Paris.多层钻取（第三层）
Parent context: 一号坑. Selected detail.query 退化为固定值
关键发现
1. tap_subject 不参与 prompt——生图模型不知道用户具体点了什么名字
2. Tap 生成的页面 query 固定为 "Selected detail"——深层钻取时 parent_query 无意义
3. 生图模型必须自己从带红色标记的图片中"看懂"用户想深入什么
4. 文字上下文（parent_title/query）只是辅助锚点，真正的理解靠视觉
2. Tap 生成的页面 query 固定为 "Selected detail"——深层钻取时 parent_query 无意义
3. 生图模型必须自己从带红色标记的图片中"看懂"用户想深入什么
4. 文字上下文（parent_title/query）只是辅助锚点，真正的理解靠视觉
两种模式关键对比
Search 模式
Tap 模式
用户输入一句话
用户点击图片某处
传 query 文本
传带红色标记的整张图
text_to_image
image_to_image
nano-banana-2（文生图）
nano-banana-2/edit（图编辑）
authored_prompt = query 原文
authored_prompt = 固定模板
04 · 模型分工
五个模型的协作
Llama 4 Scout 17B
输入：带红色标记的图 → 输出：tap_subject 短语
flux-2/flash
输入：tap_subject 文字 → 输出：小图标缩略图（过渡动画用）
Prompt Author Model
输入：用户 query → 输出：改写后的 authored_prompt
fal-ai/flux-2
Draft 阶段快速生图，支持 text_to_image 和 image_to_image
fal-ai/nano-banana-2
Final 阶段高质量输出（/edit 变体用于 Tap 的图编辑模式）
05 · 社媒反馈
用户怎么说
HN 439 points / 118 comments，Twitter 多位技术人物转发。整体 60/40 正面，概念一致认可但准确性遭质疑。
正面评价
"This is one of the more unique ideas I've encountered in a long time"
— brohan90 · Hacker News
"Flipbook is pretty incredible. Whole new way of interacting with AI models"
— Alex Atallah (@alexatallah) · Twitter
"Using this was like a peek into the future. This kind of generative UI offers a lot more immediate practical utility than world model demos."
— bigbossman · Hacker News
"This is the best implementation of A Young Lady's Illustrated Primer so far."
— kyle-rb · Hacker News · 引用《钻石年代》
"This is a use case of AI image generation that's actually a positive for society."
— frays · Hacker News
质疑与批评
"I asked it about designing a 12V solar system and it got everything but the broadest strokes wrong. Absolute non-starter for any information you plan on depending on."
— giobox · Hacker News
"M2 is labeled as GPU...GPU is labeled as M.2 and RAM...Random plant inside"
— stephenpontes · Hacker News · PC 组装图标注错误
"The worst part is the attention it squanders by being glacially slow. MS Encarta CDs were faster and more in-depth."
— CrzyLngPwd · Hacker News
情感维度
交互创新
视觉效果
实用价值
信息准确
生成速度