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

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

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

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

關於透過 API 呼叫像是 OpenAI、Anthropic、Google 等服務來建構 LLM 應用程式的文章已經汗牛充棟，所以我認為應該嘗試不同的方法，嘗試完全使用本地模型和技術來建構 Web 應用程式，最好是那些可以在瀏覽器中運行的技術！

為什麼？

以這種方式建構應用程式的主要優勢如下

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

專案

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

資料擷取

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

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

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

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

檢索與生成

現在我已經設定好載入資料的管線，下一步是查詢資料

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

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

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

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

結果

您可以試用 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？

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

感謝您的閱讀！

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

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

• 示範應用程式：https://webml-demo.vercel.app/
• 示範應用程式 GitHub 儲存庫：https://github.com/jacoblee93/fully-local-pdf-chatbot
• Voy：https://github.com/tantaraio/voy
• Ollama：https://github.com/jmorganca/ollama/
• LangChain.js：https://js.langchain.com/
• Transformers.js：https://huggingface.co/docs/transformers.js/index

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