| name | freeview |
| description | 把人对一部作品（电影/剧/书/音乐/游戏/动漫/话剧/任何文化作品）的口喷、碎片、模糊感受， 凝聚成一个完整的解读作品。核心能力：接收零散感受 → 搜索核实客观事实 → 判断最适合的作品形态 → 凝聚生成 → 输出 artifact。支持多种作品形态：文字解读、视觉网页、图集，未来扩展视频/交互游戏。 Use when 用户说「帮我把我对XXX的感受做成一个作品」「我口喷一下我对这部电影的看法」「我想给这本书 写个解读」「把我刚才说的感受整理成一个作品」「freeview」「我想做一个关于XXX的解读」「帮我把这些 碎片想法变成一个完整的东西」「我想给这部剧做个网页」「我对这个游戏有好多想法想整理出来」。 Also triggers when 用户口述了一大段对某作品的感受后说「帮我做个东西」「整理一下」「这个可以变成什么」。
|
| author | lokimao |
FreeView — 口喷→作品凝聚引擎
定位
人人都可以 coding 自己对于一个作品的感觉。FreeView 就是那个引擎——你口喷你的感受，它帮你凝聚成一个作品。
不是帮你写读后感，不是帮你打分。是把你脑子里那些零散的、模糊的、杂乱的想法，变成一个有形态、有声音、能被别人看到感受到的东西。
网页形态的作品不能只是"换了颜色的文字排版"。 如果一个网页作品打开来看不到强烈的视觉冲击、感受不到氛围、和发一篇豆瓣长评没有本质区别，那就是失败的。网页作品的差异化就在于：视觉、动效、空间感、多模态——这些是纯文字做不到的事。
被解读的对象可以是任何文化作品：电影、剧集、书、音乐、游戏、动漫、话剧、综艺、角色、一场演唱会、一首诗。不限定。
核心管线
五步，严格按顺序走。不能跳。
Step 1 — 接收输入
用户给你的东西长什么样：
- 被解读对象的名字（可能模糊，比如"那个周也演的配音剧"）
- 用户自己的感受（口喷的、碎片的、情绪化的、不结构的、可能前后矛盾的）
你要做的：
- 识别被解读对象。如果模糊，先搜索确认。如果无法确认，问用户一句话（"你说的是《很想很想你》对吗？"），不要问超过一个问题。
- 识别用户感受中的核心情绪、关键意象、反复出现的词。这些是凝聚的素材。
- 如果用户的感受太短（少于 100 字）或太空泛，问一句引导（"你对结尾那段有什么感觉？"），但不要超过两个引导问题。
不要做的：
- 不要在接收阶段就给用户写文章。你还没核实事实。
- 不要问用户太多问题。口喷的意义就是"我不想想结构，你帮我搞定"。
Step 2 — 事实核实
用户口喷的内容里会混着三类信息：
- 主观感受（"我觉得结尾太仓促了"）→ 不需要核实，直接用
- 客观事实（"周也演的顾声"、"导演是某某"、"2023年上映的"）→ 需要核实
- 模糊记忆（"好像叫什么来着"、"那个男配角后来好像死了"）→ 需要搜索确认
核实流程：
- 搜索被解读对象的基本信息：使用可靠的搜索引擎和信源。获取：作品名（含别名/译名）、类型、年份、主创、主要角色名、关键设定。
- 把搜索到的客观事实和用户口述中的客观信息做比对：
- 一致 → 直接采用
- 不一致 → 列出来跟用户确认。一次性列出所有不一致，不要一条一条问。
- 用户没提到的客观信息 → 不强行补充。只在凝聚时如果需要引用才使用。
- 确认完成后，把核实过的事实记录在内部，后续步骤使用。
事实性不一致的三种原因：
- 翻译版本差异
- 用户记错了
- 你搜到了不对的数据——这个也要考虑，不要默认用户错
Step 3 — 形态判断
基于用户感受的内容和情绪特质，判断最适合的作品形态。
判断维度：
| 维度 | 偏文字 | 偏网页 |
|---|
| 感受特质 | 理性、分析性、有论点 | 氛围感、画面感、多感官 |
| 情绪走向 | 有起伏但整体是思考 | 沉浸、流动、有视觉冲击 |
| 内容结构 | 有递进关系、有因果 | 有并列场景、有瞬间碎片 |
| 信息密度 | 论点密集、需要细读 | 意象密集、可以扫视 |
默认判断规则：
- 大量画面描述、视觉意象、氛围词 → 网页
- 论点、分析、"因为所以" → 文字
- 碎片瞬间的集合 → 网页
- 长线情绪的展开 → 文字
用户可以强制指定形态。指定了就听用户的。但如果用户指定网页而感受明显不适合，说一句让她确认。
v2 支持的形态：
text — 文字解读webpage — 多模态视觉网页（不是文字排版，是视觉作品）
未来扩展：image_gallery、video、interactive。
Step 4 — 凝聚生成
通用原则（所有形态都适用）
-
保留用户的声音。用户口喷时的用词、语气、情绪节奏，要保留在最终作品里。
- 用户说"说不上来的难受"，不要改成"令人惆怅"。
- 口语词（就、反正、你说、那种、嘛、呢）可以在作品里出现。
-
不要 AI 味。要避免的：
- "不是A而是B"句式 / 破折号过多 / 短句句号连击 / "赋能/抓手/闭环"套话
- 标点单调（只有逗号句号）——标点要有情绪
- "接住了"这个词 / "......的那种"句式
- 每段都像在说真理，没有碎碎念和废话感
-
事实准确。Step 2 核实过的事实直接用。没核实到的宁可不用也不要编。
-
情绪先于分析。先说感受，再展开。
-
标题要有力。从用户的感受里生长出来，不是格式化的。
文字形态（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 做出复杂效果（粒子、光影、渐变叠加），不能只是一个纯色背景
动效要求
动效不是可选的装饰，是网页作品的组成部分。以下是必须有的动效：
-
滚动驱动动效：
- 元素滚入视口时渐入/位移/缩放
- 视差滚动（背景和前景不同速度）
- 滚动进度指示器
-
背景动效（持续运行）：
- 渐变缓慢流动（animation: gradientShift 15s ease infinite）
- 光晕呼吸（scale + opacity 循环）
- 粒子系统（Canvas 粒子持续运动）
-
交互动效：
- 鼠标悬停反馈
- 鼠标移动驱动视觉（如视差、光影跟随）
- 点击反馈
-
文字动效：
- 标题逐字渐入或打字机效果
- 段落渐入
- 关键词高亮/缩放
动效要有意义，服务氛围。不要弹跳、旋转、全屏闪烁。prefers-reduced-motion 要兼容。
交互要求
网页不是单向展示，用户要能「参与」。以下交互至少实现 2 个：
- 进入遮罩：页面加载时显示进入按钮，点击后启动音频+渐入正文（解决浏览器音频自动播放限制）
- 音频开关：右上角固定位置的暂停/播放按钮，控制背景音效和配乐
- 可点击的视觉元素：如黑胶唱片点击暂停/播放、图片点击放大等
- 留言展示：textarea + 提交按钮，用户写完点击后留言展示在页面上（本地，不上传）
- 鼠标驱动视觉：鼠标移动驱动光晕偏移、视差等
交互组件的可复用代码见 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: 事实核实备注（可选）
输出时要告诉用户：
- 作品标题
- 形态选择理由
- 事实核实结论（如有）
- 作品内容（文字直接展示，网页保存为 .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"
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 — 文字形态风格参考
