使用 React 和 Transformers.js 建立人工智慧驅動的背景去除器

背景去除是影像處理中常見的任務，傳統上需要複雜的桌面軟體或基於雲端的服務。然而，隨著網路技術和人工智慧模型的最新進展，現在可以建立一個完全在瀏覽器中運行的強大背景去除器。在本教程中，我們將探索如何使用 React、Transformers.js 和最先進的 AI 模型創建這樣的工具。

立即嘗試刪除背景！

主要特點

• ？客戶端處理 - 無需伺服器上傳
• ？支援多種AI模型（RMBG-1.4和ModNet）
• ？批次能力
• ？用於後製的內建影像編輯器
• ？注重隱私 - 所有處理都在本地進行

技術架構

該應用程式由幾個關鍵元件建構：

1. 前端 UI：使用 TypeScript 進行反應以確保類型安全性
2. AI 處理：用於運行 AI 模型的 Transformers.js
3. 工作執行緒：用於非阻塞處理的Web Workers
4. 狀態管理：用於本地狀態管理的 React hook

實施細節

設定模型

我們使用兩種不同的模型進行背景去除：

type ModelType = "briaai/RMBG-1.4" | "Xenova/modnet";

RMBG-1.4 是我們推薦的模型，以獲得更好的質量，而 ModNet 作為替代選項。這兩個模型都使用 Transformers.js 完全在瀏覽器中載入和運行。

核心組件

主要組件結構由三個關鍵區域組成：

1. 上傳區域：處理檔案輸入與模型選擇
2. 編輯區域：顯示具有編輯功能的處理後的圖像
3. 圖片清單：顯示所有上傳的圖片及其處理狀態

工作執行緒實現

為了在影像處理過程中保持 UI 回應，我們使用 Web Worker：

const useTask = (onImageProcessed?: (id: string) => void) => {
  const [files, setFiles] = useState<FileWithMoreInfo[]>([]);

  const { worker, isModelLoading } = useWorker(
    (event: WorkerResponseMessageEvent) => {
      const { type, data, id, status } = event.data;

      switch (type) {
        case WorkerResponseTaskType.REMOVE_BACKGROUND_COMPLETE:
          // Update UI with processed image
          break;
      }
    }
  );

  // ... task management logic
};

加工流水線

1. 用戶上傳圖片
2. 影像已排隊等待處理
3. 工作執行緒載入選定的AI模型
4. 執行背景去除
5. 處理後的影像以透明背景顯示

後處理功能

背景刪除後，使用者可以：

• 旋轉影像
• 加文字或貼紙
• 應用過濾器
• 下載單一影像或批次下載 ZIP

性能考慮因素

• 模型在首次載入後快取
• 處理分塊進行，以防止 UI 凍結
• 批次上傳時影像依序處理
• 預覽縮圖高效率產生

未來的改進

1. 支援更多AI模型
2. 進階編輯功能
3. 背景替換選項
4. 批次最佳化
5. 以不同格式匯出

結論

建立基於瀏覽器的背景去除器展示了網路技術的進步。透過利用現代框架和人工智慧模型，我們可以創建完全在客戶端運行的強大影像處理工具，確保效能和隱私。

完整的源代碼展示瞭如何構建這樣的應用程序，處理複雜的圖像處理任務，並提供流暢的用戶體驗。請隨意探索並調整此實作以適合您自己的專案！

資源

• Transformers.js 文件
• RMBG-1.4型號
• ModNet 文件

以上是使用 React 和 Transformers.js 建立人工智慧驅動的背景去除器的詳細內容。更多資訊請關注PHP中文網其他相關文章！