使用客戶端技術構建 LLM 驅動的 Web 應用程式

2023 年 10 月 13 日

這是 Jacob Lee 的客座部落格文章，他是 @LangChainAI 的 JS/TS 維護者，曾任 @Autocode 的共同創辦人兼技術長，以及 Google 相簿的工程師。

這篇部落格文章的初始版本是為 Google 內部 WebML Summit 2023 所做的演講，您可以在這裡查看

Google’s internal WebML Summit 2023

機器學習長期以來主要以 Python 為主導已不是秘密，但 ChatGPT 近期人氣的飆升已將許多新的開發人員帶入這個領域。由於 JavaScript 是使用最廣泛的程式語言，因此許多網頁開發人員也加入其中並不令人意外，他們自然而然地嘗試構建 Web 應用程式。

關於透過 API 呼叫與 OpenAI、Anthropic、Google 等公司構建 LLM 的文章已經汗牛充棟，因此我認為我應該嘗試不同的方法，嘗試僅使用本地模型和技術（最好是在瀏覽器中運行的技術）來構建 Web 應用程式！

為什麼？

以這種方式構建的一些主要優勢是

  1. 成本。由於所有運算和推論都將在客戶端完成，因此除了（非常便宜的）託管之外，構建應用程式的開發人員不會產生額外成本。
  2. 隱私。任何東西都不需要離開使用者的本地機器！
  3. 由於沒有 HTTP 呼叫的開銷，因此可能提高速度。
    1. 這可能會因使用者硬體限制導致較慢的推論速度而抵消。

專案

我決定嘗試使用開源、本地運行的軟體重新創建 LangChain 最受歡迎的用例之一：執行檢索增強生成（Retrieval-Augmented Generation，簡稱 RAG）的鏈，讓您可以「與您的文件聊天」。這讓您可以從鎖在各種非結構化格式中的數據中收集資訊。

architecture of this example project

資料擷取

第一步是載入我們的資料，並以稍後可以使用自然語言查詢的方式格式化。這涉及以下步驟

  1. 將文件（PDF、網頁或其他一些資料）拆分為語義塊
  2. 使用嵌入模型創建每個塊的向量表示
  3. 將塊和向量載入到稱為向量儲存的專用資料庫中

這些初始步驟需要幾個部分：文本分割器、嵌入模型和向量儲存。幸運的是，這些都已經存在於瀏覽器友好的 JS 中！

LangChain 負責處理文件載入和分割。對於嵌入，我使用了一個小型 HuggingFace 嵌入模型，該模型經過量化，可以使用 Xenova 的 Transformers.js 套件 在瀏覽器中運行；對於向量儲存，我使用了一個非常棒的 Web Assembly 向量儲存，稱為 Voy。

檢索與生成

現在我已經建立了一個用於載入資料的管道，下一步是查詢它

diagram explaining retrival and generation

這裡的一般想法是取得使用者的輸入問題，在我們準備好的向量儲存中搜尋與查詢在語義上最相似的文件塊，並使用檢索到的塊加上原始問題來引導 LLM 根據我們的輸入資料得出最終答案。

後續問題需要一個額外步驟，這些問題可能包含代詞或其他對先前聊天記錄的引用。由於向量儲存透過語義相似性執行檢索，因此這些引用可能會干擾檢索。因此，我們新增了一個額外的解引用步驟，將初始步驟重新措辭為「獨立」問題，然後使用該問題搜尋我們的向量儲存。

找到可以在瀏覽器中運行的 LLM 證明是困難的 - 強大的 LLM 非常龐大，而透過 HuggingFace 提供的 LLM 無法產生良好的回應。還有 Machine Learning Compilation 的 WebLLM 專案，它看起來很有前景，但需要在頁面載入時下載龐大的多 GB 檔案，這增加了大量的延遲。

screenshot of Jacob's terminal

我過去曾嘗試使用 Ollama 作為一種簡單、開箱即用的方式來運行本地模型，當我聽到有支援透過 shell 命令將本地運行的模型公開給 Web 應用程式時，我感到非常驚喜。我將其插入後，發現它是缺失的一塊！我啟動了更新、最先進的 Mistral 7B 模型，該模型在我的 16GB M2 Macbook Pro 上舒適地運行，最終得到了以下本地堆疊

diagram of what's possible with all local RAG with langchain and ollama

結果

您可以在 Vercel 上試用 Next.js 應用程式的線上版本

https://webml-demo.vercel.app

您需要在本地機器上透過 Ollama 運行 Mistral 實例，並透過運行以下命令使其可供相關網域訪問，以避免 CORS 問題

$ ollama run mistral
$ OLLAMA_ORIGINS=https://webml-demo.vercel.app OLLAMA_HOST=127.0.0.1:11435 ollama serve

以下是一些在 LangSmith（我們的可觀察性和追蹤平台）中的範例追蹤，用於幾個問題。我使用我的個人履歷作為輸入文件

  1. 「這是關於誰的？」
    1. https://smith.langchain.com/public/2386b1de-7afb-48a2-8c83-205162bfcac0/r
  2. 「他們懂 JavaScript 嗎？」
    1. https://smith.langchain.com/public/18cec162-d12c-4034-aa9a-39b1cd2011ea/r

結論

總體而言，效果良好。以下是一些觀察結果

  • 開源模型正在快速發展 - 我使用 Llama 2 建構了此應用程式的初始版本，而 Mistral 在幾週後就發布了。
  • 越來越多的消費性硬體製造商在其產品中包含 GPU。
  • 隨著 OSS 模型變得更小、更快，在具有 Ollama 等工具的本地硬體上運行這些模型將變得越來越普遍。
  • 雖然用於向量儲存、嵌入和其他特定任務模型的瀏覽器友好技術在過去幾個月中經歷了一些令人難以置信的進步，但 LLM 仍然太大，無法實際捆綁在 Web 應用程式中。

Web 應用程式利用本地模型的唯一可行解決方案似乎是我上面使用的流程，即將強大的預安裝 LLM 公開給應用程式。

新的瀏覽器 API？

由於非技術性的 Web 終端使用者不會習慣於運行 shell 命令，因此這裡的最佳答案似乎是新的瀏覽器 API，Web 應用程式可以透過彈出視窗請求訪問本地運行的 LLM，然後將該功能與其他瀏覽器內特定任務模型和技術一起使用。

Diagram showing Chrome and Ollama interacting with each other

感謝您的閱讀！

我對 LLM 驅動的 Web 應用程式的未來以及 Ollama 和 LangChain 等技術如何促進令人難以置信的全新使用者互動感到非常興奮。

以下是應用程式中使用的各種組件的連結

請透過 X/Twitter 與 Jacob Lee 和 @LangChainAI 保持聯繫。