如何将 Poe Canvas 应用导出为 HTML
Poe Canvas 是一个强大的工具,让你直接在 Poe.com 内建立互动式 AI 应用。但如果你想把作品分享给没有 Poe 账号的人呢?第一步就是导出 Canvas 应用的 HTML 源代码。本指南会带你走完整个流程。
什么是 Poe Canvas?
Poe Canvas 是 Poe 内的一项功能,让你建立由 GPT-4、Claude、Gemini 等 AI 模型驱动的互动式网页应用。这些应用在 Poe 的内嵌环境中运行,可以包含聊天界面、数据可视化、游戏、实用工具等。
问题在于:Canvas 应用绑定于 Poe 平台。任何想使用你应用的人都需要 Poe 账号,而且没有内置方法把它们托管成独立网站。这正是导出 HTML 的用处所在。
为何要导出你的 Canvas 应用?
- 公开分享 — 把链接发给朋友、客户或在社交媒体分享,无需 Poe 登录
- 随处嵌入 — 通过 iframe 把已转换的应用放进你自己的网站
- 作品集展示 — 用一个实际运行的范例展示你建立 AI 应用的能力
- 交付客户 — 把精致、独立的应用交付给客户
逐步教程:导出你的 Poe Canvas 应用 HTML
- 打开 Poe.com 并前往你的 Canvas 应用。 登录你的 Poe 账号 poe.com ,找到你想导出的 Canvas 应用。
- 点击「Edit」打开 Canvas 编辑器。 你会看到应用的完整源代码 — 这就是驱动你 Canvas 作品的 HTML、CSS 与 JavaScript。
- 选取所有源代码。 使用
Ctrl+A(Windows/Linux)或Cmd+A(Mac)选取编辑器的全部内容。 - 复制源代码。 使用
Ctrl+C或Cmd+C把它复制到剪贴板。 - 粘贴至 AppToPub。 前往 AppToPub ,把 HTML 粘进上传区。你也可以先把代码存成
.html文件,再上传该文件。
导出的 HTML 包含什么?
导出的 HTML 是一个单一文件的网页应用。通常包含:
- HTML 结构 — 你应用的版面与 UI 元素
- CSS 样式 — 用于外观的内联或内嵌样式表
- JavaScript 逻辑 — 应用行为、对 Poe 推理端点的 API 调用,以及互动性
- Poe API 引用 — 对 Poe 嵌入 API 的调用,让 AI 模型得以通讯
关键要理解的是:如果你只是在浏览器打开,这个 HTML 文件无法运行。它依赖 Poe 的 API 基础设施才能访问 AI 模型。这正是 AppToPub 所解决的 — 它会改写 API 调用,改用你自己的 Poe API 密钥,让应用完全独立运行。
导出时的常见问题
- 我找不到 Edit 按钮
- 请确认你正在查看 Canvas 应用,而非一般的 Poe bot。Canvas 应用有「Edit」选项,可打开源代码编辑器。
- 复制的代码看起来不完整
- 请确认你已选取编辑器中的所有内容。使用 Ctrl+A / Cmd+A 选取全部,而非只选屏幕上可见的部分。
- 我的应用使用了外部资源
- 如果你的 Canvas 应用加载外部 CDN 脚本或样式表,AppToPub 会自动代理这些资源,无需手动更改。
常见问题
- 导出需要 Poe 订阅吗?
- 不需要。任何 Poe 用户都能访问 Canvas 编辑器并复制源代码。使用 AppToPub 则需要 Poe API 密钥,可在 Poe 的开发者设置中获取。
- 我可以导出别人的 Canvas 应用吗?
- 你只能访问由你建立、或你拥有编辑权限的 Canvas 应用编辑器。请尊重其他创作者的知识产权。
- 导出的 HTML 与「查看源代码」一样吗?
- 不一样。Canvas 编辑器显示的是应用源代码,这与浏览器的「查看源代码」输出不同。请务必使用 Canvas 编辑器的 Edit 视图。
导出 HTML 后,你就准备好进行下一步:把它变成一个在线公开网站。前往我们的把 Poe 应用转换成公开网站指南,在 60 秒内完成部署。