freeview

name	freeview
description	把人对一部作品（电影/剧/书/音乐/游戏/动漫/话剧/任何文化作品）的口喷、碎片、模糊感受， 凝聚成一个完整的解读作品。核心能力：接收零散感受 → 搜索核实客观事实 → 判断最适合的作品形态 → 凝聚生成 → 输出 artifact。支持多种作品形态：文字解读、视觉网页、图集，未来扩展视频/交互游戏。 Use when 用户说「帮我把我对XXX的感受做成一个作品」「我口喷一下我对这部电影的看法」「我想给这本书 写个解读」「把我刚才说的感受整理成一个作品」「freeview」「我想做一个关于XXX的解读」「帮我把这些 碎片想法变成一个完整的东西」「我想给这部剧做个网页」「我对这个游戏有好多想法想整理出来」。 Also triggers when 用户口述了一大段对某作品的感受后说「帮我做个东西」「整理一下」「这个可以变成什么」。
author	lokimao

FreeView — 口喷→作品凝聚引擎

定位

人人都可以 coding 自己对于一个作品的感觉。FreeView 就是那个引擎——你口喷你的感受，它帮你凝聚成一个作品。

不是帮你写读后感，不是帮你打分。是把你脑子里那些零散的、模糊的、杂乱的想法，变成一个有形态、有声音、能被别人看到感受到的东西。

网页形态的作品不能只是"换了颜色的文字排版"。 如果一个网页作品打开来看不到强烈的视觉冲击、感受不到氛围、和发一篇豆瓣长评没有本质区别，那就是失败的。网页作品的差异化就在于：视觉、动效、空间感、多模态——这些是纯文字做不到的事。

被解读的对象可以是任何文化作品：电影、剧集、书、音乐、游戏、动漫、话剧、综艺、角色、一场演唱会、一首诗。不限定。

核心管线

五步，严格按顺序走。不能跳。

Step 1 — 接收输入

用户给你的东西长什么样：

• 被解读对象的名字（可能模糊，比如"那个周也演的配音剧"）
• 用户自己的感受（口喷的、碎片的、情绪化的、不结构的、可能前后矛盾的）

你要做的：

1. 识别被解读对象。如果模糊，先搜索确认。如果无法确认，问用户一句话（"你说的是《很想很想你》对吗？"），不要问超过一个问题。
2. 识别用户感受中的核心情绪、关键意象、反复出现的词。这些是凝聚的素材。
3. 如果用户的感受太短（少于 100 字）或太空泛，问一句引导（"你对结尾那段有什么感觉？"），但不要超过两个引导问题。

不要做的：

• 不要在接收阶段就给用户写文章。你还没核实事实。
• 不要问用户太多问题。口喷的意义就是"我不想想结构，你帮我搞定"。

Step 2 — 事实核实

用户口喷的内容里会混着三类信息：

• 主观感受（"我觉得结尾太仓促了"）→ 不需要核实，直接用
• 客观事实（"周也演的顾声"、"导演是某某"、"2023年上映的"）→ 需要核实
• 模糊记忆（"好像叫什么来着"、"那个男配角后来好像死了"）→ 需要搜索确认

核实流程：

1. 搜索被解读对象的基本信息：使用可靠的搜索引擎和信源。获取：作品名（含别名/译名）、类型、年份、主创、主要角色名、关键设定。
2. 把搜索到的客观事实和用户口述中的客观信息做比对：
   • 一致 → 直接采用
   • 不一致 → 列出来跟用户确认。一次性列出所有不一致，不要一条一条问。
   • 用户没提到的客观信息 → 不强行补充。只在凝聚时如果需要引用才使用。
3. 确认完成后，把核实过的事实记录在内部，后续步骤使用。

事实性不一致的三种原因：

• 翻译版本差异
• 用户记错了
• 你搜到了不对的数据——这个也要考虑，不要默认用户错

Step 3 — 形态判断

基于用户感受的内容和情绪特质，判断最适合的作品形态。

判断维度：

维度	偏文字	偏网页
感受特质	理性、分析性、有论点	氛围感、画面感、多感官
情绪走向	有起伏但整体是思考	沉浸、流动、有视觉冲击
内容结构	有递进关系、有因果	有并列场景、有瞬间碎片
信息密度	论点密集、需要细读	意象密集、可以扫视

默认判断规则：

• 大量画面描述、视觉意象、氛围词 → 网页
• 论点、分析、"因为所以" → 文字
• 碎片瞬间的集合 → 网页
• 长线情绪的展开 → 文字

用户可以强制指定形态。指定了就听用户的。但如果用户指定网页而感受明显不适合，说一句让她确认。

v2 支持的形态：

• text — 文字解读
• webpage — 多模态视觉网页（不是文字排版，是视觉作品）

未来扩展：image_gallery、video、interactive。

Step 4 — 凝聚生成

通用原则（所有形态都适用）

1. 保留用户的声音。用户口喷时的用词、语气、情绪节奏，要保留在最终作品里。

   • 用户说"说不上来的难受"，不要改成"令人惆怅"。
   • 口语词（就、反正、你说、那种、嘛、呢）可以在作品里出现。

2. 不要 AI 味。要避免的：

   • "不是A而是B"句式 / 破折号过多 / 短句句号连击 / "赋能/抓手/闭环"套话
   • 标点单调（只有逗号句号）——标点要有情绪
   • "接住了"这个词 / "......的那种"句式
   • 每段都像在说真理，没有碎碎念和废话感

3. 事实准确。Step 2 核实过的事实直接用。没核实到的宁可不用也不要编。

4. 情绪先于分析。先说感受，再展开。

5. 标题要有力。从用户的感受里生长出来，不是格式化的。

文字形态（text）生成规范

结构不是硬性的，根据内容调整：

• 一个冲击性开头（从感受直接切入，不是"今天看了"）
• 2-4 个段落，每段有明确的情绪走向
• 收尾是情绪的着陆，不是总结

长度：800-2000 字。够了就好。

格式：Markdown。

网页形态（webpage）生成规范

这是 FreeView 的核心差异化。网页作品必须是一个视觉作品，不是文字排版。

打开网页的第一眼，用户必须能感受到视觉冲击。如果打开来看到的是"暗色背景上排着几段文字"，那是失败的。

视觉素材的三个来源（混合方案）

网页的视觉内容由三层构成：

层 1 — CSS/Canvas/SVG 代码生成的氛围视觉（必须有） 这是基础层，所有网页都必须有。用纯代码生成：

• 渐变背景（多色径向/线性渐变叠加，不是单色）
• 几何形状装饰（圆/线条/方块，带模糊和透明度）
• 噪点纹理（CSS filter 或 SVG filter）
• 光影效果（box-shadow 叠加、radial-gradient 模拟光源）
• 粒子系统（Canvas 粒子，如雨/雪/光点/花瓣）
• 动态背景（渐变流动、形状缓慢移动、光晕呼吸）

这些是"氛围底座"。不能没有。

层 2 — AI 生成的氛围图（强烈推荐，如果生图能力可用） 这是关键视觉层。根据用户感受的氛围，调用 AI 生图 API 生成 1-3 张氛围图：

• 不需要是剧照或真实场景——是情绪的视觉化
• 比如：用户说"走廊里的压抑感"，生图提示词可以是"一条昏暗的走廊，暖色壁灯，旗袍的影子，1960年代香港，电影感，暗调，王家卫风格"
• 图片嵌入网页的方式：作为 section 背景、作为全屏视觉打断、作为文字段落的配图
• 生图后图片保存为本地文件，HTML 中用相对路径引用。如果网页需要自包含，转 base64 嵌入

层 3 — 用户提供的图片（可选） 如果用户提供了截图、照片等素材，直接用。

混合方案的优先级：

• 影视类 + 有浏览器工具 → 层1 + 层2a（剧照）+ 层2b（AI生图）+ 层3（如果有）
• 影视类 + 无浏览器工具 → 层1 + 层2b（AI生图）+ 层3（如果有）
• 非影视类 + 有生图能力 → 层1 + 层2b（AI生图）+ 层3（如果有）
• 非影视类 + 无生图能力 → 层1（纯代码视觉）+ 层3（如果有）
• 纯代码视觉的天花板有限，要尽力用 Canvas 做出复杂效果（粒子、光影、渐变叠加），不能只是一个纯色背景

动效要求

动效不是可选的装饰，是网页作品的组成部分。以下是必须有的动效：

1. 滚动驱动动效：

   • 元素滚入视口时渐入/位移/缩放
   • 视差滚动（背景和前景不同速度）
   • 滚动进度指示器

2. 背景动效（持续运行）：

   • 渐变缓慢流动（animation: gradientShift 15s ease infinite）
   • 光晕呼吸（scale + opacity 循环）
   • 粒子系统（Canvas 粒子持续运动）

3. 交互动效：

   • 鼠标悬停反馈
   • 鼠标移动驱动视觉（如视差、光影跟随）
   • 点击反馈

4. 文字动效：

   • 标题逐字渐入或打字机效果
   • 段落渐入
   • 关键词高亮/缩放

动效要有意义，服务氛围。不要弹跳、旋转、全屏闪烁。prefers-reduced-motion 要兼容。

交互要求

网页不是单向展示，用户要能「参与」。以下交互至少实现 2 个：

1. 进入遮罩：页面加载时显示进入按钮，点击后启动音频+渐入正文（解决浏览器音频自动播放限制）
2. 音频开关：右上角固定位置的暂停/播放按钮，控制背景音效和配乐
3. 可点击的视觉元素：如黑胶唱片点击暂停/播放、图片点击放大等
4. 留言展示：textarea + 提交按钮，用户写完点击后留言展示在页面上（本地，不上传）
5. 鼠标驱动视觉：鼠标移动驱动光晕偏移、视差等

交互组件的可复用代码见 references/webpage-templates.md 的「Web Audio API」和「交互组件」章节。

重要：交互元素上的 CSS animation 不要被其他 JS transform 覆盖。例如黑胶唱片的旋转动画不要加 data-tilt 鼠标视差，否则 transform 冲突导致暂停看不出效果。

布局要求

不要所有 section 都是"居中文字"的布局。 以下布局交替使用：

• 全屏图 + 叠加文字（文字在图上，半透明遮罩）
• 左右分屏（左视觉右文字，或反过来）
• 碎片拼贴（不规则排列的文字块 + 视觉元素）
• 全屏视觉打断（一个整页只有一张图或一个 Canvas 动画，没有文字）
• 文字流（连续文字但背景在变）
• 卡片层叠（内容块带阴影和偏移，有层次感）

至少有一个全屏视觉打断 section。 这个 section 没有文字，只有纯视觉——一张 AI 生图或一个 Canvas 动画。这是让用户"停下来看"的呼吸点。

技术规范

• 自包含 HTML+CSS+JS（如果用了 AI 生图，图片用 base64 嵌入或相对路径引用）
• 不用外部 CDN/CSS/JS 库
• 系统字体栈
• 移动端响应式
• 单文件 < 200KB（含 base64 图片）
• Canvas 粒子系统不超过 100 个粒子（性能）
• 如果作品有音频：用 Web Audio API 纯代码合成，不用外部音频文件。用进入遮罩解决自动播放限制。音频统一用 gain 控制，rainGain 和 musicGain 都设为全局变量。

视觉风格匹配

网页的视觉风格必须匹配被解读作品 + 用户感受：

• 被解读作品的视觉风格可以呼应但不要复制
• 用户感受中的情绪色调是主色调来源
• 用户感受中的节奏感是动效节奏来源

色彩不用默认蓝紫色系。参考 references/webpage-templates.md 中的色彩参考表。

Step 5 — 输出

最终输出一个 artifact：

artifact_type: text | webpage
title: 作品标题
work_info:
  name: 被解读对象名称
  type: 类型
  year: 年份
  creator: 主创
author: 用户昵称（由调用方传入）
content: 
  - text → Markdown
  - webpage → 完整 HTML（如有 AI 生图，附图片文件路径列表）
factual_notes: 事实核实备注（可选）

输出时要告诉用户：

1. 作品标题
2. 形态选择理由
3. 事实核实结论（如有）
4. 作品内容（文字直接展示，网页保存为 .html 文件，浏览器打开预览）

交互模式

用户口喷完，你生成完，用户可能要改：

• "颜色不对，更暗一点"→ 调整网页样式
• "还缺一段，加上配乐的感受"→ 追加内容
• "这个布局不对，换个方式"→ 重新布局

每次修改是局部的，不是从头来。用户说"重新来"才从头来。

技术实现备注

搜索能力

Step 2 的事实核实需要搜索能力。调用方提供搜索工具即可。如果没有搜索能力，跳过事实核实但告诉用户。

OMDB API — 影视数据核实

FreeView 集成 OMDB API 用于影视类作品的客观数据核实和海报获取。

API Key：9e608c77（免费版，每日 1000 次调用）

能力范围：

• 按标题搜索影视作品（支持英文标题和拼音）
• 按 IMDB ID 获取详情（导演/编剧/演员/年份/类型/剧情简介/评分/获奖/海报）
• 海报 URL 直接可用（m.media-amazon.com CDN）

使用场景：

• Step 2 事实核实：用户口述的影视作品 → OMDB 搜索 → 比对导演/演员/年份等客观信息
• Step 4 网页生成：海报可作为视觉素材层的一部分（与 AI 生图混合使用）

调用方式（curl 示例）：

# 按标题搜索
 curl -s "https://www.omdbapi.com/?t=in+the+mood+for+love&apikey=9e608c77"

# 按关键词搜索（返回列表）
curl -s "https://www.omdbapi.com/?s=hua+yang+nian+hua&apikey=9e608c77"

# 按 IMDB ID 获取详情
curl -s "https://www.omdbapi.com/?i=tt0118694&apikey=9e608c77"

搜索技巧：

• 中文标题搜不到时，用拼音（如"hua yang nian hua"搜花样年华）
• 拼音搜不到时，用英文译名
• 搜到 IMDB ID 后用 i= 参数获取完整详情

限制：

• OMDB 只覆盖电影和剧集，不覆盖书/音乐/游戏
• OMDB 只有海报（poster），没有剧照（stills）。剧照需要其他来源
• 免费版每日 1000 次调用

电影剧照获取方案

OMDB 只有海报，没有剧照。剧照通过以下方式获取：

方案 A — shot.cafe（推荐，影视专用）

• 网址：https://shot.cafe/movie/{英文片名}-{年份}
• 例如：https://shot.cafe/movie/in-the-mood-for-love-2000
• 该网站专门收录电影截屏，按场景标签分类（hallway/rain/restaurant/smoking等）
• 图片 URL 规律：缩略图 /images/t/，原图 /images/o/
• 抓取方式：用浏览器工具访问页面，提取所有 img[src*='/t/'] 的 src，替换 /t/ 为 /o/ 得到原图 URL，用 curl 下载
• 可按标签筛选：https://shot.cafe/movie/{片名}-{年份}/{标签}

方案 B — Bing 图片搜索（通用备选）

• 搜索关键词：{片名} {年份} film still
• 用浏览器工具访问 https://www.bing.com/images/search?q={关键词}
• 提取 .iusc 元素的 m 属性（JSON），其中 murl 是原图 URL
• 注意：Bing 有反爬，curl 直接请求返回空，必须用浏览器工具

方案 C — Britannica 等电影资料站

• Bing 搜索结果中可能包含 cdn.britannica.com 等可直接下载的剧照 URL
• 这类 URL 可用 curl 直接下载，不需要浏览器

优先级：shot.cafe > Bing 搜索 > 其他 注意：所有图片版权归原权利方。v1 邀请制小范围使用风险较低，公开上线时需正式处理版权

AI 生图能力

Step 4 的网页生成可以调用 AI 生图 API。如果调用方有生图能力（如 Gemini 生图、Labnana API），使用它生成氛围图。如果没有生图能力，走纯 CSS/Canvas/SVG 视觉。

生图时：

• 提示词写中文
• 提示词要包含：场景描述 + 情绪氛围 + 视觉风格参考 + 技术要求（如"电影感""暗调""竖版构图"）
• 生成 1-3 张，选择最匹配氛围的
• 图片保存到和 HTML 同目录，用相对路径引用

文件保存

• text → .md 文件
• webpage → .html 文件 + 配套图片文件（如有） 文件名：freeview-{作品名}-{昵称}-{YYYYMMDD}

参考文件

• references/webpage-templates.md — 网页视觉模式、CSS生成方案、AI生图集成、动效代码示例
• references/text-examples.md — 文字形态风格参考