ai官小西

Flipbook：当浏览器不再渲染 HTML，而是生成图像

2026 年 4 月 23 日，前 OpenAI 工程师 Zain Shah 在 Twitter 上发了一条推文："Imagine every page you visit is an image. Not HTML, not CSS, not JS. Just pixels generated on demand."

他展示的产品叫 Flipbook — 一个完全由图像模型实时生成的"视觉浏览器"。你输入一个搜索词，不会看到蓝色链接列表，不会看到 DOM 树，不会看到任何 HTML 元素。你看到的是一张图片，上面的每一个区域都可以点击，点击后生成一张新的图片。

这件事迅速在 Hacker News 上炸开（439 upvotes, 118 评论），评论区两极分化：一边说这是"教科书级别的未来"，另一边说这是"慢到令人发指的算力浪费"。

两边都对。但更重要的是，Flipbook 揭示了一个方向：当图像生成成本趋近于零时，HTML 不再是网页的唯一载体。

产品体验：慢，但有东西

我花了半小时认真使用 Flipbook。搜索 "how does a transformer work"，点击 "self-attention mechanism"，再点击 "multi-head attention"。每一次点击，页面不是跳转，而是生成一张新图片。

体验上很奇特：

  • 每张页面 15-19 秒生成时间。是的，很慢。像 1998 年的拨号上网。
  • 但生成的内容质量很高。用 "how do transformers work" 搜出来的结果，解释质量不输一篇中等博客文章，而且图文并茂。
  • 你可以点击图片上的任意位置，系统会理解你点击的是什么并生成下一页。不需要链接——你点哪儿，它就去哪儿。

有个 HN 用户（ID: giobox）用它生成了自己车辆悬挂系统的扭矩规格图，"大部分数据都对"。另一个用户提到用它探索汽车引擎结构，逐层深入活塞、曲轴、气门等组件。

这恰好暴露了 Flipbook 同时是最有意义和最不切实际的产品：它的信息密度极低，延迟极高，成本极高——但它展示了一个可能的方向。

技术架构：完全不同于传统浏览器

Flipbook 的渲染管线完全颠覆了 Web 标准：

用户输入搜索词
  ↓
Agentic web search（爬取多个来源）
  ↓
LLM 规划页面结构 + 内容
  ↓
Gemini 2.5 Flash Image 生成完整页面图像
  ↓
base64 JPEG 通过 SSE 流式返回前端
  ↓
用户看到一张完整的"网页截图"，点击某处重新触发流程

这不是渐进增强，这是对 Web 渲染模型的彻底替换。你的浏览器不再解析 HTML、执行 JavaScript、计算布局。它只做一件事：显示图片。

更激进的是 live video mode。

Flipbook Pipeline Architecture

打开一个 toggle，Flipbook 会打开 WebSocket 连接到 Modal 上的 GPU 实例，使用 LTX-Video 模型实时生成视频流：

Client → WebSocket → Modal GPU → LTX-Video pipeline → custom binary protocol

协议被称为 LTXF：前 4 字节是帧数，然后是 video/mp4 初始化段 + media segments。浏览器端通过 Media Source Extensions API 实时解码。

内部 codename 叫 "Sketchapedia"（在 /api/iteratively-generate 的请求里可以找到）。

技术架构自底向上

我通过抓包和源码分析还原了 Flipbook 的技术栈：

推理层：Modal（serverless GPU 平台）

  • 图像生成运行在 Modal GPU 上（推测 A100/H100）
  • 视频流使用定制的 Diffusers 管线包装 Lightricks LTX-2 模型

AI 服务层：

  • 页面规划：LLM（推测 GPT-4o 或 Gemini 2.5 Flash）+ agentic web search
  • 图像生成：Gemini 2.5 Flash Image（nano-banana）
  • 点击解析：Qwen 2.5 VL 72B（视觉语言模型，解析用户点击的区域对应什么）
  • 视频流：定制的 LTX-Video 管线，optimized for 1080p@24fps

工具: Agentic web search — 不是传统的搜索引擎 API，而是让 LLM 自主决定搜索什么、点击哪些结果、提取哪些内容

数据层：Cloudflare R2（图片持久化）+ MongoDB（session graph, node metadata）

前端: Next.js 15 + React，但与传统 Next.js 应用的思维方式完全不同。核心组件 apps/web/app/play/page.tsx 有 1,887 行（最初是 2,522 行，经过一轮提取-refactor）

WebSocket 视频协议: LTXF

这是 Flipbook 最有趣的技术细节。视频流的 binary 帧格式：

[0..3]   ASCII "LTXF"          ← magic bytes
[4..7]   uint32 big-endian     ← header length (n)
[8..8+n] UTF-8 JSON header     ← {media_type, sequence, codec, is_init_segment, final}
[8+n..]  fMP4 segment bytes    ← ISO Base Media File Format
  • Init segment: 包含 moov 和 trak boxes，带有 codec 信息和 track 参数
  • Media segments: 包含 moof 和 mdat boxes，实际的编码视频帧
  • 观察到的 codec: avc1.640028（H.264 High Profile, Level 4.0）
  • 浏览器通过 MediaSource API 播放，不需要 <video src=...>

loopy_mode + anchor_loop 策略处理页间过渡：每个 "page" 是一个锚帧，模型生成一个无缝循环回锚帧的短片。

Flipbook 不代表一切,但它证明了什么

Flipbook 的价值不在产品本身,而在证明一点：足够好的图像模型可以替代 UI 工具包。

我们对 HTML/CSS/JS 架构的依赖是过去 30 年技术进化的结果,不是数学定式。在很多场景下，图像作为界面更合理：

  1. 教育 & 探索式学习: 生成式的、可交互的可视化解释 → 下一代教科书的雏形。一个 HN 评论简单概括："This would make an amazing educational tool."

  2. 技术文档 & 参考: 把知识图谱变成可视化的交互式图表,而不是分散的文本超链接

  3. 信息发现: 视觉浏览允许外设视觉和格式塔图案识别,比线性文本浏览更高效

  4. 界面设计的范式转移: HTML/CSS 假设内容是有结构的文本。当你的界面图是一张图,所有布局规则都被 models 替代

为什么 Flipbook 实际不够 "好用

三个根本问题：

1. 成本（💸）

每一次生成都要：agent search → LLM planning → image generation。直接的经济成本高到不现实。Modal 目前赞助了所有计算资源，这是投资人的钱在烧，不是产品本身的 unit economics。

2. 速度（🐢）

15-19 秒的页面生成时间太慢。即使有了渐进渲染（先显示低质量草稿再显示最终图像），用户体验仍然是个问题。和你现在的 Chromium 浏览器比，这差了不止一两个数量级。

好消息是，这个问题有解的。图像模型的延迟正在快速下降,而且像 Flux Schnell 这样的蒸馏模型已经能做到亚秒生成。

3. 幻觉（🌀）

图像模型渲染文字不稳定，偶尔会生成拼写错误。更致命的是：深度越深，准确性越低。因为每一页是基于上一页的图像生成的（而不是原始文本源），错误会逐层累积。你点进去的第一页可能是 90% 准确的，第三页可能变成了 60%，第五页变成了"有趣的创意写作"而非事实。

开源：复刻者做得更好

原始 Flipbook 是闭源的。团队选择产品策略（闭源、融资、迭代），这无可厚非。

但七个星期后，开源社区给出了强力回应。eren23/openflipbook 是一个 MIT 许可的完整复刻，用 Next.js + FastAPI + Modal 架构完整再现了 Flipbook 的核心体验，但全部基于开放工具：

组件 Flipbook (闭源) openflipbook (开源)
图像生成 私有模型 fal-ai/nano-banana
点击解析 未知 VLM Qwen 2.5 VL 72B (OpenRouter)
页面规划 未知 LLM + agentic search Qwen 2.5 72B + web search
视频生成 私有 LTX-2 管线 fal-ai/ltx-video (5s clip, $0.02)
视频流 私有 LTXF WebSocket 可选的 LTXF WebSocket (你自己的 Modal)
数据存储 未知 Cloudflare R2 + MongoDB
许可证 闭源 MIT

openflipbook 证明了整个模式（image-as-UI、click-to-explore、VLM 导航、视频流）都是商品化的基础设施。你能克隆它，设置几个 API key，在自己的基础设施上运行相同的体验。

这是真正重要的故事。Flipbook 证明了 image-as-UI 可行。openflipbook 证明了它人人都能做到。

我们的判断

Flipbook 不是一个立刻会用到的产品。它是一个 前瞻实验，展示了未来的可能性而非现在的实用性。

声量和现实的差距值得玩味。Zain 的 tweet 说要"stream every pixel live from a model, no HTML, no code"。实际的产品更 modest：每页是一张 JPEG，实时视频是可选的开关（默认关闭），大部分内容是静态的。这不是批评——这种差距本身就有信息量：它告诉我们第一代 image-as-UI 产品能做什么，做不到什么。

因为真正重要的问题不是"何时每像素都由 AI 生成"。而是：当图像生成成本趋近于零时，HTML 不再是什么网页的默认载体？

Flipbook 没有回答这个问题，但它是第一个把它摆到台面上的产品。

资料来源

Flipbook:

openflipbook:

技术参考: