如何使用 Transformers.js 透過 React 建立深度學習應用程式

隨著機器學習 (ML) 在 Web 開發中的興起，將深度學習模型整合到前端應用程式中比以往任何時候都更容易。該領域最令人興奮的進步之一是使用來自Hugging Face 的Transformers.js，這是一個JavaScript 庫，允許開發人員直接在瀏覽器中運行最先進的深度學習模型，而無需使用需要伺服器端計算。

在這篇文章中，我們將探索如何使用React 和Transformers.js 建立深度學習應用程序，以利用模型執行自然語言處理(NLP) 和電腦視覺等任務。該庫直接在瀏覽器中支援多項任務，包括文字生成、情緒分析、圖像分類等。

為什麼選擇 Transformers.js？

Transformers.js 非常適合想要將機器學習的力量帶到客戶端的開發人員，確保：

• 無需伺服器基礎架構：您可以在客戶端執行機器學習模型，減少伺服器負載並提高隱私性。
• 輕鬆整合：與 React 和 Next.js 等流行框架無縫協作。
• 存取 Hugging Face 的模型庫：存取數千個預訓練模型以執行各種任務。

React 和 Transformers.js 入門

1. 設定你的 React 項目： 如果您尚未設定 React 項目，請使用以下命令建立一個：

   npx create-react-app my-ml-app
   cd my-ml-app

1. 安裝 Transformers.js： 您可以透過 npm 安裝該程式庫：

   npm install @xenova/transformers

1. 在 React 中使用預訓練模型： 安裝程式庫後，您可以從 Hugging Face 的中心載入模型。以下是如何在 React 應用程式中載入情緒分析模型並執行預測的範例：

   import React, { useState, useEffect } from 'react';
   import { pipeline } from '@xenova/transformers';

   function SentimentAnalysis() {
     const [model, setModel] = useState(null);
     const [text, setText] = useState("");
     const [result, setResult] = useState(null);

     useEffect(() => {
       // Load the sentiment analysis model
       pipeline('sentiment-analysis').then((pipe) => setModel(pipe));
     }, []);

     const analyzeSentiment = async () => {
       const analysis = await model(text);
       setResult(analysis);
     };

     return (
       <div>
         <h1 id="Sentiment-Analysis">Sentiment Analysis</h1>
         <input type="text" value="{text}" onchange="{(e)"> setText(e.target.value)} />
         <button onclick="{analyzeSentiment}">Analyze</button>
         {result && <p>Sentiment: {result[0].label}, Confidence: {result[0].score}</p>}
       </div>
     );
   }

   export default SentimentAnalysis;

在此程式碼片段中，我們使用 Transformers.js 中的管道函數來載入情緒分析模型。使用者可以輸入文本，應用程式將分析情緒並顯示結果。

支援的任務和模型

Transformers.js 支援跨 NLP、視覺和音訊處理的各種任務。一些最受歡迎的任務包括：

• 文本分類（例如情緒分析）：將給定文本的情緒分類。
• 文字產生：根據提示產生連貫的文字。
• 影像分類：將影像中的物件分類（在電子商務或醫療保健應用程式中有用）。
• 物件偵測：辨識影像或視訊影格中的物件。

進階用例

• 多語言翻譯：使用 Transformers.js，您可以建立即時多語言翻譯工具，增強應用程式的全球可訪問性。
• 語音合成：建立將文字轉換為語音的應用程序，非常適合創建虛擬助理或輔助工具。

性能考慮因素

在客戶端執行機器學習模型可能會佔用大量資源。但是，Transformers.js 使用 WebAssembly (WASM) 來最佳化效能。此外，開發者可以將模型轉換並量化為ONNX格式，使其更便於瀏覽器推理【6†來源】【7†來源】。

結論

使用 React 和 Transformers.js 建立深度學習應用程式為創建智慧、互動式和隱私權保護的 Web 應用程式提供了多種可能性。透過 Hugging Face 模型中心的靈活性，您可以在幾分鐘內實現尖端模型，同時保持無伺服器狀態。無論您是在開發基於文字的應用程式還是視覺機器學習項目，Transformers.js 都能提供讓您的應用程式更聰明、更快速的工具。

想深入了解嗎？在 Transformers.js 官方文件中探索更多資訊。

以上是如何使用 Transformers.js 透過 React 建立深度學習應用程式的詳細內容。更多資訊請關注PHP中文網其他相關文章！