FlowGram.AI登場倒數！視覺化AI流程，新手也能輕鬆駕馭！

FlowGram.AI：用節點打造你的AI工作流程，新手也能輕鬆上手！

哈囉，各位熱愛技術的台灣朋友們！今天我們要來介紹一個超酷的工具，叫做 FlowGram.AI。如果你是個對AI、視覺化工作流程有興趣，但又覺得程式碼很複雜的朋友，那這篇文章絕對適合你！

什麼是 FlowGram.AI？

FlowGram.AI 是一個基於節點（node）的流程建立引擎。簡單來說，它讓你用拖拉、連接節點的方式，就能快速建立各種工作流程。想像一下，你不再需要埋首於密密麻麻的程式碼，而是像拼積木一樣，把不同的功能模組（節點）串接起來，就能實現你的想法！

這個工具特別適合需要清楚定義輸入和輸出的視覺化工作流程。而且，在現在這個AI蓬勃發展的時代，FlowGram.AI 也特別著重於如何用AI能力來強化工作流程，這也是為什麼它的名字裡有個 “AI” 的原因。

為什麼 FlowGram.AI 適合新手？

• 視覺化介面： FlowGram.AI 採用視覺化的節點編輯方式，讓你擺脫複雜的程式碼，更容易理解工作流程的邏輯。
• 簡單易上手： 它提供了兩種佈局模式，一種是固定佈局，一種是自由連接佈局。你可以根據自己的喜好和需求，選擇最適合你的方式。
• 豐富的範例： FlowGram.AI 提供了許多範例，讓你可以快速上手，了解各種功能的用法。
• 社群支持： 如果你有任何問題，可以透過 GitHub Issues 或是加入他們的 Lark 群組來尋求幫助。

FlowGram.AI 的核心概念：節點與連接

FlowGram.AI 的核心概念就是「節點」和「連接」。

• 節點 (Node): 節點代表一個獨立的功能模組，例如讀取檔案、處理數據、或是執行一個AI模型。每個節點都有自己的輸入和輸出。
• 連接 (Connection): 連接是用來連接不同的節點，將一個節點的輸出作為另一個節點的輸入。透過連接，你可以將不同的節點串聯起來，形成一個完整的工作流程。

兩種佈局模式：固定佈局 vs. 自由佈局

FlowGram.AI 提供了兩種主要的佈局模式，讓你可以根據不同的需求選擇：

1. 固定佈局 (Fixed Layout):
   • 特色： 節點只能拖曳到預先定義好的位置。這種佈局方式適合需要嚴謹結構的工作流程。
   • 優點： 結構清晰，易於理解和維護。
   • 範例： 可以用來建立像分支和迴圈這種複合節點的工作流程。
   • 線上Demo: Fixed Layout Example (請複製連結到瀏覽器開啟)
   • 想像情境: 你在設計一個自動化的圖片處理流程，流程的步驟非常固定，例如：讀取圖片 -> 調整大小 -> 加上浮水印 -> 儲存圖片。 使用固定佈局可以確保每個步驟都按照預期的順序執行。
2. 自由佈局 (Free Layout):
   • 特色： 節點可以放置在任何位置，並使用自由形式的線條連接。這種佈局方式適合需要更彈性、更自由的工作流程。
   • 優點： 更靈活，可以更容易地表達複雜的邏輯。
   • 範例： 可以用來建立更複雜、更客製化的工作流程。
   • 線上Demo: Free Layout Example (請複製連結到瀏覽器開啟)
   • 想像情境: 你在開發一個AI聊天機器人，機器人的對話流程需要根據使用者的輸入進行動態調整。 使用自由佈局可以讓你更靈活地設計不同的對話分支，讓機器人可以更好地應對不同的情況。

如何開始使用 FlowGram.AI？

FlowGram.AI 提供了非常簡單的上手方式。以下是快速開始的步驟：

1. 安裝 Node.js (18+): 確保你的電腦已經安裝了 Node.js 18 或更高版本。你可以到 Node.js 官網 下載並安裝。
2. 建立 Demo 專案: 在你的終端機 (Terminal) 輸入以下指令，來建立一個 FlowGram.AI 的 Demo 專案：

   npx @flowgram.ai/create-app@latest
   

   • 如果你是用 PowerShell，請使用以下指令：

   npx "@flowgram.ai/create-app@latest"
   

3. 選擇範例: 執行指令後，你會看到一個選單，讓你選擇要建立哪種範例專案。你可以選擇：
   • fixed-layout: 完整的固定佈局功能展示。
   • free-layout: 完整的自由佈局功能展示。
   • fixed-layout-simple: 基礎的固定佈局用法。
   • free-layout-simple: 基礎的自由佈局用法。

   建議新手可以先從 fixed-layout-simple 或 free-layout-simple 開始，了解基本的用法。

4. 進入專案資料夾: 建立完成後，進入專案資料夾，就可以開始探索 FlowGram.AI 的世界了！

   cd <你的專案名稱>
   

開發環境設定 (進階)

如果你想要更深入地開發 FlowGram.AI，例如修改程式碼、貢獻功能等等，可以參考以下的開發環境設定步驟：

1. 安裝 Node.js 18+: 再次確認你已經安裝了 Node.js 18 或更高版本。
2. Clone 程式碼: 將 FlowGram.AI 的 GitHub 程式碼複製到你的電腦：

   git clone git@github.com:bytedance/flowgram.ai.git
   

3. 安裝全域依賴: 安裝專案需要的全域依賴：

   npm i -g pnpm@9.12.0 @microsoft/rush@5.140.0
   

4. 安裝專案依賴: 安裝專案的依賴套件：

   rush update
   

5. 建置專案: 建置專案：

   rush build
   

6. 執行文件或 Demo: 執行文件或 Demo 來測試你的設定：

   rush dev:docs # 文件
   rush dev:demo-fixed-layout # 固定佈局 Demo
   rush dev:demo-free-layout # 自由佈局 Demo
   

個人實作心得與錯誤排除指南

在實際使用 FlowGram.AI 的過程中，我發現以下幾點心得可以分享給大家：

• 從範例開始： FlowGram.AI 提供的範例非常豐富，建議大家可以先從範例開始，了解各種節點的用法和工作流程的建立方式。
• 善用官方文件： FlowGram.AI 的官方文件非常詳細，包含了各種功能的說明和 API 參考。遇到問題時，可以先查閱官方文件。 (Official Documentation)
• 釐清輸入輸出： 在建立工作流程時，一定要清楚每個節點的輸入和輸出是什麼。這可以幫助你更好地理解工作流程的邏輯，並避免出現錯誤。
• 逐步測試： 建立工作流程時，建議逐步測試，確保每個節點都能正常運作。
• 常見錯誤與排除：
  • 相依性問題： 如果在執行 rush update 或 rush build 時遇到相依性問題，可以嘗試清除快取後再執行一次。 例如: npm cache clean --force 或是 pnpm store prune
  • 版本不相容： 確保你的 Node.js、npm 和其他工具的版本符合 FlowGram.AI 的要求。
  • 節點連接錯誤： 檢查節點之間的連接是否正確，確保輸入和輸出的類型匹配。

FlowGram.AI 的應用場景

FlowGram.AI 的應用場景非常廣泛，以下是一些常見的例子：

• 自動化數據處理： 可以用來建立自動化的數據處理流程，例如從檔案讀取數據、清洗數據、轉換數據、然後儲存到資料庫。
• AI 模型部署： 可以用來建立 AI 模型的部署流程，例如從雲端儲存下載模型、載入模型、執行預測、然後將結果儲存到資料庫。
• 自動化測試： 可以用來建立自動化的測試流程，例如從檔案讀取測試案例、執行測試、然後產生測試報告。
• 物聯網應用： 可以用來建立物聯網應用，例如從感測器讀取數據、分析數據、然後控制執行器。
• 遊戲開發: 用於遊戲邏輯的可視化編程，例如AI行為樹的創建。

FlowGram.AI 的未來發展

FlowGram.AI 在 AI 浪潮下，將會持續強化其 AI 能力，讓開發者可以更輕鬆地將 AI 技術應用到各種工作流程中。我們可以期待 FlowGram.AI 在未來推出更多更強大的節點和功能，讓開發者可以更快速、更高效地建立各種 AI 應用。

總結

FlowGram.AI 是一個功能強大、易於使用的視覺化工作流程引擎。它讓開發者可以用更直觀、更高效的方式建立各種工作流程，特別適合 AI 相關的應用。如果你是個對 AI 和視覺化工作流程有興趣的朋友，不妨試試 FlowGram.AI 吧！相信它會給你帶來全新的開發體驗！

希望這篇文章能幫助大家更了解 FlowGram.AI。如果你有任何問題，歡迎在下方留言討論！

相關連結

• FlowGram.AI 官方網站： https://flowgram.ai/
• FlowGram.AI GitHub 專案： https://github.com/bytedance/flowgram.ai

祝大家使用愉快！

參考閱讀

https://github.com/bytedance/flowgram.ai