LogoLogo
註冊/登入
  • 使用者手冊
  • 技術人員手冊
  • API 文件
  • AI 助理市集
  • 歡迎來到 MaiAgent
  • 生成式 AI 快速入門
    • 大型語言模型(LLM)
    • RAG 知識庫檢索系統
    • Embedding 模型
    • Reranker 模型
    • Parser 解析工具
    • 圖像辨識支援
    • 使用環境規劃(SaaS/私有雲/地端)
    • GPU 算力硬體規劃
  • 進階生成式 AI 技術
    • Text to SQL
    • Function Calling
    • Canvas
    • AI 安全防護機制
  • AI 助理模組
    • 角色指令
    • 知識庫
    • FAQ 常見問題管理
    • 回覆評估與監測結果
    • AWS Guardrails
  • API 串接
    • 快速上手
    • AI 助理列表
    • 對話與訊息回覆(串流/同步)
    • 建立對話與訊息
    • Webhook
    • 檔案上傳
    • 檔案上傳知識庫
    • 附件上傳
  • Line LIFF 串接
    • 什麼是 LINE LIFF
    • 如何串接
  • Remote MCP 串接
    • Remote MCP 服務概述
    • Composio 串接
  • 其他
    • Google Sheet 串接
    • n8n 串接
    • MaiAgent vs. Dify 比較
Powered by GitBook
On this page
  • 什麼是 Canvas
  • 核心特色
  • 技術優勢
  • 與市場現有解決方案的比較
  • MaiAgent Canvas 的功能介紹
  • 如何設置與啟用
  • 功能與架構說明
  • MaiAgent Canvas 的核心價值與應用情境
  • 核心價值
  • 主要應用情境

Was this helpful?

  1. 進階生成式 AI 技術

Canvas

PreviousFunction CallingNextAI 安全防護機制

Last updated 7 days ago

Was this helpful?

什麼是 Canvas

Canvas 是 Agent 模式的一種延伸介面,它讓 AI 助理能夠生成和管理結構化的視覺內容。這項技術使 AI 不僅能夠進行對話,更能創建、編輯和呈現豐富的多媒體內容,包括互動式網頁元件、圖表、文件和程式碼等。

在傳統的對話式 AI 中,助理只能提供純文字回應,但 Canvas 技術打破了這個限制,讓 AI 助理能夠:

  • 即時創建可視化內容

  • 生成可互動的元件

  • 提供結構化的資訊呈現

  • 支援即時渲染程式碼

核心特色

Canvas 技術將傳統的純文字對話擴展到視覺化內容創建領域,讓企業能夠:

  • 即時內容生成:AI 可以根據使用者需求立即創建各種格式的內容

  • 互動式編輯:使用者可以直接與生成的內容進行互動和修改

  • 多格式支援:支援 HTML、React、SVG、Markdown、Mermaid 等多種內容格式

  • 無縫整合:完美融入對話流程,提供更直觀的使用體驗

  • 專業品質:生成的內容達到專業設計和開發標準

  • 即時預覽:所見即所得的內容編輯體驗

技術優勢

  1. 智慧內容識別:AI 能夠自動判斷何時需要使用 Canvas 來呈現內容

  2. 格式自適應:根據內容特性自動選擇最適合的呈現格式

  3. 版本控制:支援內容的迭代更新和版本管理

  4. 即時渲染:提供實時的視覺化效果預覽

  5. 跨平台相容:確保在不同設備和平台上的一致表現

  6. 效能優化:採用先進的渲染技術,確保流暢的使用體驗

與市場現有解決方案的比較

特色功能
MaiAgent Canvas
傳統 AI 助理
其他可視化工具

即時視覺化生成

✅ 自動判斷並生成

❌ 僅文字回應

⚠️ 需手動操作

多格式支援

✅ 多種專業格式

❌ 純文字

⚠️ 限定格式

對話式互動

✅ 無縫整合

✅ 文字對話

❌ 獨立工具

企業級安全

✅ 本地部署

⚠️ 依供應商

⚠️ 依供應商

客製化能力

✅ 高度客製

⚠️ 有限

⚠️ 模板化

MaiAgent Canvas 的功能介紹

如何設置與啟用

Canvas 功能基於 MaiAgent 的 Agent 模式,專門配置了 Canvas 的模式來處理視覺化內容生成需求。

功能與架構說明

前端渲染層

  • 即時預覽引擎:支援所有 Canvas 格式的即時渲染

  • 互動介面:提供直觀的編輯和操作界面

  • 響應式設計:自動適配各種設備螢幕尺寸

AI 處理層

  • 內容分析引擎:智慧分析使用者需求

  • 格式選擇器:自動判斷最適合的呈現格式

  • 品質控制器:確保生成內容的準確性和完整性

智慧內容識別機制

系統支援五種主要的內容格式,每種格式都有其特定的應用場景:

  • HTML:適用於網頁內容和靜態展示

    • 支援完整的 CSS 樣式

    • 可嵌入多媒體元素

    • 適合複雜的版面設計

  • React:用於互動式元件和動態內容

    • 支援 JSX 語法和 React Hooks

    • 可建立複雜的互動功能

    • 適合動態資料展示

  • SVG:向量圖形和圖表設計

    • 無限縮放不失真

    • 檔案大小小、載入快速

    • 適合圖標、插圖、簡單圖表

  • Markdown:結構化文件和代碼展示

    • 支援 GitHub Flavored Markdown

    • 程式碼語法高亮

    • 適合技術文件、說明書

  • Mermaid:流程圖和圖表生成

    • 支援多種圖表類型

    • 程式化描述,易於維護

    • 適合業務流程、系統架構圖

內容生成流程

  1. 需求分析:AI 分析使用者輸入,判斷是否需要使用 Canvas

    • 關鍵字識別:「畫圖」、「製作」、「設計」

    • 內容複雜度評估

    • 視覺化需求判斷

  2. 格式選擇:根據內容特性自動選擇最適合的呈現格式

    • 內容類型分析

    • 互動需求評估

    • 最佳格式推薦

  3. 內容創建:使用專門的生成算法創建結構化內容

    • 範本匹配

    • 自定義生成

    • 品牌元素整合

  4. 品質驗證:確保生成內容的正確性和可用性

    • 語法檢查

    • 渲染測試

    • 相容性驗證

  5. 渲染呈現:在使用者介面中實時渲染內容

    • 即時預覽

    • 效能優化

    • 錯誤處理

智慧判斷邏輯

在沒有特別設定角色指令的情況下,Agent 會根據以下因素判斷是否使用 Canvas:

  1. 內容複雜度:結構化內容優先使用 Canvas

    • 表格、清單、階層結構

    • 多步驟流程說明

    • 比較分析內容

  2. 互動需求:需要使用者互動的內容

    • 表單設計

    • 按鈕和控制項

    • 動態資料展示

  3. 視覺化需求:圖表、圖形等視覺元素

    • 統計圖表

    • 示意圖

    • 架構圖

  4. 格式要求:特定格式要求的內容

    • 程式碼展示

    • 文件範本

    • 專業報告

MaiAgent Canvas 的核心價值與應用情境

核心價值

1. 提升溝通效率

  • 將複雜概念轉化為視覺化呈現

  • 減少文字說明的冗長性

  • 增強資訊傳達的準確性

  • 實際效益:減少 60% 的說明時間,提升 85% 的理解準確度

2. 增強使用者體驗

  • 提供互動式的內容操作體驗

  • 支援即時預覽和修改

  • 創造更直觀的人機互動方式

  • 使用者滿意度:相較傳統文字回應提升 78% 的滿意度

3. 加速內容創作

  • 自動化生成專業格式內容

  • 減少手動編碼和設計時間

  • 提供一站式內容解決方案

  • 效率提升:內容創作速度提升 4-10 倍

4. 降低技術門檻

  • 無需專業設計或編程技能

  • 自然語言即可創建複雜內容

  • 適合各種技術背景的使用者

5. 專業領域適配

  • 各產業快速結合:透過知識庫高度結合行業內部資料

    • 金融業:風險評估報告、投資分析圖表

    • 製造業:生產流程圖、品質控制圖表

    • 醫療業:病患資料視覺化、治療流程圖

    • 教育業:課程設計、學習進度追蹤

  • 自定義提示詞:可根據企業需求調整 Canvas 生成邏輯

    • 企業專用術語整合

    • 特定格式要求設定

    • 品牌風格指導原則

  • 在地化內容:支援台灣本地化的內容格式和標準

    • 台灣法規文件格式

    • 本地商業慣例

    • 文化適應性調整

主要應用情境

📊 資料視覺化

  • 流程圖設計:使用 Mermaid 格式創建業務流程圖、系統架構圖

  • 組織架構圖:生成清晰的企業組織結構、部門關係圖

  • 數據圖表:創建互動式數據分析圖表、儀表板

  • 時程規劃:甘特圖、專案時程表、里程碑規劃

💻 程式開發

  • 程式碼展示:以格式化方式呈現程式碼範例、語法高亮

  • API 文件:生成結構化的技術文件、互動式 API 說明

  • 互動式元件:創建可操作的 React 元件、展示頁面

  • 系統設計:架構圖、資料庫 ER 圖、網路拓撲圖

  • 程式碼審查:視覺化程式碼結構、依賴關係圖

📝 文件製作

  • 報告生成:自動化生成格式化報告、數據分析報告

  • 使用手冊:創建圖文並茂的操作指南、產品說明書

  • 專案提案:製作專業的專案展示文件、商業企劃書

  • 會議記錄:結構化會議紀錄、決議追蹤表

  • 教育訓練:互動式學習教材、課程大綱

🎨 創意設計

  • 原型設計:快速創建網頁或應用程式原型、wireframe

  • 圖形創作:使用 SVG 格式生成向量圖形、圖標設計

  • 使用者介面:設計互動式 UI 元件、介面模擬

  • 品牌設計:Logo 設計概念、品牌視覺元素

  • 行銷素材:社群媒體圖片、廣告橫幅設計

🏢 企業應用

  • 內部培訓:員工手冊、流程說明、安全規範

  • 客戶服務:FAQ 視覺化、服務流程圖

  • 銷售支援:產品介紹頁面、功能比較表

  • 專案管理:任務分配圖、進度追蹤表

透過 MaiAgent Canvas 技術,企業可以實現真正的智慧化內容生成和管理,不僅提升工作效率,更能創造嶄新的使用者互動體驗。這項技術代表了 AI 助理領域的重要突破,將對話式 AI 提升到全新的視覺化和互動化層次。

立即體驗 Canvas 技術的強大功能,讓您的 AI 助理不只會說話,更會創造!

回覆模式需選擇 Agent,下方 Agent 模式啟用畫布模式(Canvas)
透過知識庫上傳數據繪製圖表
根據用戶請求製作互動式 UI 介面
根據用戶請求專業內容的流程圖
啟用畫布模式(Canvas)
財務圖表製作助理
UI 設計助理
流程圖製作助理