見出し画像

WebLLM を使って Qwen2.5-1.5B のブラウザ上でのローカル実行を試す

npaka

「WebLLM」を使って「Qwen2.5-1.5B」のブラウザ上でのローカル実行を試したのでまとめました。


1. WebLLM

「WebLLM」は、「MLC」の技術を活用してWebブラウザ上でLLMを実行できるようにするプロジェクトです。

・サーバーにアクセスせずにブラウザ内でLLMを実行
・WebAssemblyとWebGLを使用

これにより、ユーザーはローカルのGPUリソースを活用して、プライバシーを保ちながらLLMと対話できるようになりました。

2. WebLLM での実行

WebLLM での実行手順は、次のとおりです。

(1) Node.jsの準備。

(2) Reactプロジェクトの準備。
今回は、Reactでサンプルアプリケーションを作成します。

npx create-react-app hello --template typescript
cd hello

(3) 「src/App.tsx」の編集。
今回は、「Qwen2.5-1.5B-Instruct-q4f16_1-MLC」を使用しました。

import React, { useState, useEffect } from 'react';
import { CreateMLCEngine } from '@mlc-ai/web-llm';

// アプリ
const App: React.FC = () => {
  const [engine, setEngine] = useState<any>(null); // エンジン
  const [inputText, setInputText] = useState<string>(''); // 入力
  const [response, setResponse] = useState<string>(''); // 出力
  const [loading, setLoading] = useState<boolean>(false); // ロード中
  
  // LLMエンジンの初期化
  const initializeEngine = async () => {
    setLoading(true);
    try {
      const initProgressCallback = (initProgress: any) => {
        setResponse(initProgress["text"]);
      }
      const engine = await CreateMLCEngine(
        "Qwen2.5-1.5B-Instruct-q4f16_1-MLC",
        { initProgressCallback: initProgressCallback },
      );
      setEngine(engine)
    } catch (error) {
      setResponse('Error');
      console.error(error);
    } finally {
      setLoading(false);
    }      
    setLoading(false);
  }

  // 初期化
  useEffect(() => {
    const init = async () => {
      await initializeEngine();
    };
    init();
  }, []); 

  // ボタン押下時に呼ばれる
  const onClick = async () => {
    setLoading(true);
    try {
      // メッセージの準備
      const messages: any = [
        { role: "user", content: inputText },
      ]

      // 推論の実行
      const reply = await engine.chat.completions.create({
        messages,
      });
      if (reply.choices[0].message.content) {
        setResponse(reply.choices[0].message.content);
      }
    } catch (error) {
      setResponse('Error');
      console.error(error);
    } finally {
      setLoading(false);
    }
  };

  // UI
  return (
    <div style={{ padding: '20px' }}>
      <textarea
        value={inputText}
        onChange={(e) => setInputText(e.target.value)}
        rows={4}
        cols={50}
      />
      <br />
      <button onClick={onClick} disabled={loading}>
        {loading ? 'Loading...' : 'Send'}
      </button>
      <pre style={{ whiteSpace: 'pre-wrap' }}>{response}</pre>
    </div>
  );
};

export default App;

MCLのモデルは以下で確認できます。

(4) 実行。

npm start

(5) ブラウザで「http://localhost:3000/」を開く。

関連



この記事が気に入ったらサポートをしてみませんか？