如何將 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 秒內完成部署。