LM StudioをWeb UI化して、ローカルLLMをみんなで使おう！

LM StudioをWeb UI化して、ローカルLLMをみんなで使おう！

【自作ツール】LM StudioをWeb UI化して、ローカルLLMをみんなで使おう！

最近、手元のPCで大規模言語モデル（LLM）を動かすのが流行っていますね。その中でも「LM Studio」は、直感的なUIで誰でも簡単にローカルLLM環境を構築できる、非常に便利なツールです。

しかし、この便利なLM Studioにも、ちょっとした悩みどころがあります。

  1. LM Studioが動いているPCでしか使えない

    2. LM Studioのチャット機能は非常に優秀ですが、利用するにはアプリケーションがインストールされているPCにログインする必要があります。これでは、家族や同じネットワーク内の同僚に「ちょっとこのAI使ってみて」と気軽に共有することができません。

  2. ファイルアップロード機能をもっと強化したい

    3. テキストや画像のアップロードはできますが、「WordやExcelファイルの中身について質問したい」と思っても、一度テキストに手動で変換する必要があり、少し手間がかかります。

そこで、これらの課題を解決するために、ブラウザさえあれば誰でもローカルLLMと対話できる「多機能WebチャットUI」を開発しました。
このツールを使えば、LM StudioをバックエンドのAIサーバーとして活用し、もっと便利で開かれたローカルAI環境を構築できます。


多機能WebチャットUI

「LM Studioで動いているAIを、もっと手軽に、もっと多機能に活用したい！」という思いから、単一のHTMLファイルで動作するWebアプリケーションを開発しました。
特別なサーバー設定は不要で、ブラウザでファイルを開くだけですぐに利用を開始できます。

なお、htmlファイルはGitHubに公開しています。ぜひ参考にしてみてください。 https://github.com/flying-YT/LmstudioWebUI

主な機能

  1. 多彩なファイルアップロード機能

    2. 通常のテキストファイル（.txt, .md, .pyなど）や画像ファイルに加え、Word（.docx）やExcel（.xlsx）ファイルを直接アップロードできます。JavaScriptライブラリがファイルの中身を自動でテキストに変換し、LLMにコンテキストとして渡してくれます。

  2. マルチモーダル対話

    3. 「この画像について、このドキュメントを参考にして説明して」といったように、テキスト、画像、ドキュメントを組み合わせた複雑な質問も可能です。

  3. Markdown & シンタックスハイライト対応

    4. LLMからの返答はリアルタイムでMarkdownとして描画され、ソースコードが含まれている場合はシンタックスハイライトで見やすく表示されます。

このツールの最大の強み

このツールの最大の強みは、その「手軽さ」と「共有のしやすさ」です。
LM Studio側でサーバーを起動し、このHTMLファイルをネットワーク内の共有フォルダに置くだけで、誰でも自分のPCやスマートフォンのブラウザから、あなたのPC上で動いているパワフルなローカルLLMにアクセスできるようになります。


使い方

セットアップは非常に簡単です。

  1. LM StudioでAPIサーバーを起動

    2. LM Studioの「Server」タブを開き、モデルを選択して「Start Server」ボタンを押すだけです。サーバーのアドレス（例: `http://xxx.xxx.xxx.xxx:1234`）が表示されるので、これを控えておきます。

    ちなみにデフォルトのトークン数は4096くらいなので、ご自身のGPUが許容できる分までトークン数を増やすことをオススメします。
    オプションの「コンテキスト長」の値を増やして、再度モデルの読み込みをしてください。（Wordなどのファイルを使う場合は特に）

  2. HTMLファイルのアドレスを修正

    3. 提供されているindex.htmlファイルをテキストエディタで開き、JavaScriptコード内のfetchアドレスを、先ほど控えたものに書き換えます。 

    // 418行目あたり
const response = await fetch('http://xxx.xxx.xxx.xxx:1234/v1/chat/completions', {
    method: 'POST',
    headers: { 'Content-Type': 'application/json' },
    body: JSON.stringify({
      messages: conversationHistory,
      stream: true
    }),
});
  3. ブラウザで開く

    4. 修正したindex.htmlファイルをブラウザで開けば、すぐにチャットを開始できます！

コードの抜粋 (ファイル処理部分)

このツールの心臓部とも言えるファイルの種類に応じて処理を分岐させるJavaScript関数です。ライブラリを使うことで、本文などの中身のみをLLMに渡すことができるようになります。 

async function processFile(file) {
    return new Promise((resolve, reject) => {
        const reader = new FileReader();
        const extension = file.name.split('.').pop().toLowerCase();

        reader.onload = async (e) => {
            try {
                let content;
                const fileType = file.type;
                
                // mammoth.js を使用して .docx ファイルを処理します。
                if (extension === 'docx') {
                    const result = await mammoth.extractRawText({ arrayBuffer: e.target.result });
                    content = result.value;
                // xlsx.js (SheetJS) を使用して .xlsx ファイルを処理します。
                } else if (extension === 'xlsx') {
                    const workbook = XLSX.read(e.target.result, { type: 'array' });
                    let fullText = '';
                    workbook.SheetNames.forEach(sheetName => {
                        const worksheet = workbook.Sheets[sheetName];
                        const sheetText = XLSX.utils.sheet_to_txt(worksheet);
                        fullText += `--- Sheet: ${sheetName} ---\n${sheetText}\n\n`;
                    });
                    content = fullText.trim();
                } else if (fileType.startsWith('image/')) {
                    content = e.target.result; // Base64
                } else {
                    // その他のファイルはテキストとみなします。
                    content = e.target.result;
                }
                
                resolve({
                    name: file.name,
                    type: fileType || extension,
                    content: content
                });

            } catch (err) {
                reject(err);
            }
        };

        // Handle file reading errors.
        reader.onerror = (err) => reject(err);

        // Word/ExcelファイルはArrayBufferとして読み込む必要があります。
        if (extension === 'docx' || extension === 'xlsx') {
            reader.readAsArrayBuffer(file);
        } else if (file.type.startsWith('image/')) {
            reader.readAsDataURL(file);
        } else {
            reader.readAsText(file);
        }
    });
}

補足

なお、ブラウザから簡単に利用できる反面、あくまでLM Studioの一部機能を使ったバックエンドになっています。
そのため、複数人同時の処理は想定していません。。

もし同時にアクセスがあると、アクセスが入って来た順番に待ち行列が作成され、1つ1つリクエストに回答していく形式です。
大人数の利用は想定していないのでご容赦ください。


さいごに

LM Studioのおかげで、誰もが手軽に高性能なAIをローカルで実行できるようになりました。今回作成したツールは、その可能性をさらに一歩押し進め、ローカルAIを「個人で楽しむ」ものから「チームや家族で共有する」ものへと変えるきっかけになるかもしれません。

単一のHTMLファイルなので、自由にカスタマイズして「自分だけのAIチャットUI」を作るのも面白いでしょう。ぜひこのツールを試して、あなたのローカルLLM環境をアップグレードしてみてください。

今回はこの辺で、ではまた！

コメント

コメントを投稿

このブログの人気の投稿

Power Automateでファイル名から拡張子を取得

イメージ
Power Automateでファイル名から拡張子を取得 Power Automateでファイル名から拡張子を取得 以前、 Power Automateで自動ファイルバックアップ（OneDrive） という記事で ファイル名から拡張子を取得する方法 をまとめました。 その際には複数の変数を用意して、かつ関数も使用して取得していましたが、これはフロー作成にかなり手間がかかるものです。 そのため、どうにか簡略化できなかと検討したところ新しい取得方法で、より簡潔に作成できることがわかったので、今回はファイル名から拡張子を取得する方法について新しい手法をまとめたいと思います。 作成方法を解説 まず取得する方法を説明する前に、以前の方法ではどのように取得していたかというと、 ファイル名から拡張子までの文字数を取得 ファイル名の拡張子部分の長さを取得する 拡張子の開始位置から、拡張子の文字数分だけ切り取って取得する といった手順を踏んでいました。 詳細は先程リンクを貼っているブログか、文字列抽出方法をまとめたブログがあるので参考にしてください。 Power Automateで文字列抽出 このように以前の方法ですと、ステップ数が増えるため作成も手間ですし、メンテナンス性も良くない状況です。 なのでもっと簡略化して実装する方法を紹介します。また2つの関数を使用するものの、シンプルなため可読性は高いです。さらに、今回の方法で実装すると事前準備していた変数3つが不要になります！！ では、いよいよ本題に入ります。 今回使用する関数は split と last の2つになります。 split関数 split関数 は文字列を指定の文字で 分割 する関数です。 ...
続きを読む

PowerAppsで座席表を作成する

イメージ
PowerAppsで座席表を作成する。 PowerAppsで座席表を作成する。 昨今、会社では指定された先がなく、自由に席を選んで仕事ができる フリーアドレス が増えてきているのではないでしょうか。 私の会社も フリーアドレス を採用しているのですが、その日の気分によって座る場所を変えることができるので私は気に入っています。 ただ自由で便利な反面、困る場面もあるかと思います。 フリーアドレス は自由に座れるのですが、だれがどこに座っているのか分からなくなる状況があります。 さらに テレワーク が重なると出社していない人もいるため、より分からなくなるかと思います。 みなさんの会社でも同様の状況になっていないでしょうか。 もちろん最近は便利なアプリなどによって改善されていたり気がしますが、そのアプリの利用料などがかかるため導入にためらってしまったりするかと思います。 なので今回は、この課題を Power Apps で改善をしていきます。 アプリの概要 アプリの概要を簡単に説明します。 Labelを複数配置していき、机や椅子、その他会議室やロッカーなどを表現 席用のLableの「OnSelect」メソッドにフロー起動の処理を追加 上記だけで簡易な座席表を作成できます。 別途データベース用のListsを作成しておきます。 それでは、Listsの作成から進めています。 下準備 今回のアプリのデータベースはMicrosoft Listsを使用します。 適当な場所にListsを下記内容で作成します。 必要なカラムは「Title(Id)」「Name」です。 今回は適当に数個座席を作成しておきます。「Name」部分は空...
続きを読む

Power AutomateでTeamsのキーワードをトリガーにする

イメージ
Power AutomateでTeamsのキーワードをトリガーにする Power AutomateでTeamsのキーワードをトリガーにする Power Automate には Teams に使えるアクションが多く存在しています。 その中でも今回は「 キーワードが言及された場合 」というトリガーを紹介していきたいと思います。 このトリガーは、グループチャットもしくはチャネルに投稿されたメッセージに、指摘のキーワードが含まれていると起動するトリガーになります。キーワードが含まれてさえいればいいので、チームなどでキーワードを取り決めておけばいつでも起動できます。 フローを作成してみる 今回はトリガーなので、起動することさえPower Automate上で確認すればよいですが、せっかくなので何かしらのメッセージをTeams上に投稿したいと思います。 トリガーを選択する フローの作成で、「自動化したクラウドフロー」を選択します。 今回のフローの名は「キーワード検知」として、フローのトリガーにはキーワードで検索し「キーワードが言及された場合」を選択します。 トリガーの設定をする このトリガーでは「グループチャット」か「チャット」のどちらかを選択することができます。 今回は設定値を下記のようにします。 メッセージの種類：グループチャット 検索キーワード：test Chat-1：テストの会議 これで、「テストの会議」のチャットでメッセージに「test」が含まれる投稿がされた際に、このフローが...
続きを読む