跳至主要内容

什麼是文物，如何在 Open WebUI 中使用它們？

Open WebUI 中的文物是一項創新的功能，靈感來自 Claude.AI 的文物，使您能夠與 LLM 在聊天中生成的重大獨立內容互動。它們使您能夠單獨檢視、修改、構建或引用主要對話之外的重要內容，方便處理複雜的輸出，並確保您可以稍後重新訪問重要信息。

Open WebUI 何時使用文物？​

當生成的內容符合我們的平台特定標準時，Open WebUI 會創建一個文物：

  1. 可渲染：作為文物顯示，內容必須是 Open WebUI 支持渲染的格式，其中包括：
  • 單頁 HTML 網站
  • 可縮放向量圖形（SVG）圖片
  • 完整網頁，包括 HTML、Javascript 和 CSS 都在同一個文物中。請注意，如果生成完整網頁，HTML 是必需的。
  • ThreeJS 可視化以及其他 JavaScript 可視化庫，例如 D3.js。

其他類型的內容，例如文件（Markdown 或純文本）、代碼片段和 React 組件，Open WebUI 不作為文物渲染。

Open WebUI 的模型如何創建文物？​

在 Open WebUI 中使用文物，需要模型提供觸發渲染過程以創建文物的內容。這包括生成有效的 HTML、SVG 代碼或其他支持文物渲染的格式。當生成的內容符合上述標準時，Open WebUI 將其顯示為可交互的文物。

我如何在 Open WebUI 中使用文物？​

當 Open WebUI 創建文物時，您會在聊天主界面右側看到內容顯示在專用的文物窗口中。以下是與文物互動的方法：

  • 編輯和迭代：在聊天中要求 LLM 編輯或迭代內容，這些更新將直接顯示在文物窗口中。您可以使用文物左下角的版本選擇器切換版本。每次編輯都會創建一個新版本，讓您可以使用版本選擇器跟踪更改。
  • 更新：Open WebUI 可能根據您的消息更新現有文物。文物窗口將顯示最新內容。
  • 操作：訪問文物的其他操作，例如複製內容或在全屏中打開文物，這些操作位於文物右下角。

編輯文物​

  1. 針對性的更新：描述您希望更改的內容及位置。例如：
  • 「將圖表中的條形顏色從藍色改為紅色。」
  • 「將 SVG 圖片的標題更新為「新的標題」。」
  1. 完全重寫：請求對大部分內容的主要更改，以便進行大規模重構或多節更新。例如：
  • 「將此單頁 HTML 網站重寫為登錄頁面。」
  • 「重新設計此 SVG，使其使用 ThreeJS 進行動畫化。」

最佳做法：

  • 明確指出您希望更改文物的哪一部分。
  • 引用希望改變的獨特識別文本，進行針對性的更新。
  • 考慮是小幅更新還是完全重寫更適合您的需求。

使用案例​

Open WebUI 的文物使各種團隊能快速有效地創建高品質的工作產品。以下是一些針對我們平台的示例：

  • 設計師：
    • 創建交互式 SVG 圖形，用於 UI/UX 設計。
    • 設計單頁 HTML 網站或登錄頁面。
  • 開發者：創建簡單的 HTML 原型或生成項目的 SVG 圖標。
  • 營銷人員：
    • 設計具有性能指標的活動登錄頁面。
    • 為廣告創意或社交媒體帖子創建 SVG 圖形。

您可以使用 Open WebUI 的文物創建的項目示例​

Open WebUI 的文物使各種團隊和個人能快速有效地創建高品質的工作產品。以下是一些針對我們平台的示例，展示了文物的多功能性並激發您探索其潛力：

  1. 交互式可視化
  • 使用的組件：ThreeJS、D3.js 和 SVG
  • 優勢：使用交互式可視化創建身臨其境的數據故事。Open WebUI 的文物使您能夠在版本之間切換，更輕鬆地測試不同的可視化方法並跟踪更改。

示例項目：使用 ThreeJS 創建交互式折線圖，展示隨時間變化的股價。更新圖表的顏色和刻度並生成不同版本以比較各種可視化策略。

  1. 單頁 Web 應用程序
  • 使用的組件：HTML、CSS 和 JavaScript
  • 優勢：直接在 Open WebUI 中開發單頁 Web 應用程序。使用針對性更新和完全重寫來編輯和迭代內容。

範例專案：設計一個待辦事項應用程式，使用HTML和CSS建立使用者介面。使用JavaScript添加互動功能。通過目標更新和完整重寫更新應用程式的佈局和UI/UX。

  1. 動畫SVG圖形
  • 使用元件：SVG 和 ThreeJS
  • 優點：為行銷活動、社群媒體或網頁設計製作吸引人的動畫SVG圖形。Open WebUI的Artifacts使您可以在單一視窗中編輯和迭代這些圖形。

範例專案：設計一個公司的品牌動畫SVG標誌。 使用ThreeJS添加動畫效果，並運用Open WebUI的目標更新來完善標誌的色彩和設計。

  1. 網頁原型
  • 使用元件：HTML、CSS 和 JavaScript
  • 優點：直接在Open WebUI中建立並測試網頁原型。切換不同版本以比較不同設計方法並改進原型。

範例專案：使用HTML、CSS和JavaScript開發一個新的電子商務網站原型。使用Open WebUI的目標更新來改善導航、佈局和UI/UX。

  1. 互動式故事講述
  • 使用元件：HTML、CSS 和 JavaScript
  • 優點：使用滾動效果、動畫及其他互動元素創作互動式故事。Open WebUI的Artifacts使您能夠完善故事並測試不同版本。

範例專案：建立一個關於公司歷史的互動式故事，使用滾動效果和動畫來吸引讀者。使用目標更新完善故事敘述，並運用Open WebUI的版本選擇器測試不同版本。