📑

gpt-oss-20bでローカルチャットボットを作って試してみた

に公開
Python
GPT
LM Studio
gpt-oss-20b
idea

LM Studio連携チャットアプリケーション開発記録

ローカル環境でLLMを動かせる LM Studio を、ChatGPT風のWebアプリとして利用できるようにしました。
元々はコマンドラインで動く script.py をベースに、Flask + HTML/CSS/JavaScript でWeb化しています。

背景

  • LM StudioはローカルPC上でLLMを実行する
  • ChatGPTのようにブラウザで直感的に使える形にしたい
  • gpt-oss-20bで何かアプリを作成したい

LM Studioのダウンロードとgpt-oss-20のダウンロード

https://lmstudio.ai/

LM Studioからpythonで受け取るために下の赤い枠線内のローカルサーバーを起動するボタンをONに（開発者モードが必要かも）

ファイル構成


project/
├── app.py              # Flaskバックエンド
├── static/
│   ├── style.css
│   └── script.js
├── templates/
│   └── index.html
└── requirements.txt

実装のポイント

https://github.com/kento1938/gpt-oss-chatbot/tree/main

 pip install lmstudio

1. リアルタイムチャット

  • APIエンドポイント /api/chat を用意
  • セッションIDで会話履歴を保持
  • Enterで送信、Shift+Enterで改行

2. 応答処理

LM Studioの出力には特殊タグが含まれるため、正規表現で除去。
例:


<|channel|>final<|message|>こんにちは！

→ こんにちは！ のみ抽出。

API仕様

メソッド エンドポイント 説明
POST /api/chat メッセージ送信 & 応答取得
GET /api/history/<session_id> 会話履歴取得
POST /api/clear/<session_id> 履歴クリア

アプリケーションフロー

  1. python app.py でFlaskサーバー起動
  2. ブラウザから http://127.X.X.X:XXXX にアクセス
  3. メッセージ送信
  4. LM Studioが応答生成（またはダミーモード）
  5. 履歴に追加し表示

セットアップ手順

  1. 仮想環境作成（任意）
  2. 依存関係インストール
pip install flask flask-cors lmstudio
  1. LM Studioでモデル読み込み&起動
  2. アプリ起動
python app.py
  1. ブラウザでアクセス
http://127.X.X.X:XXXX
  1. 実行様子

まとめ

CLIだけで動かしていたLM Studioも、Web化することで直感的に利用できるようになりました。
最初に触ってみたとき、「ローカルでGPTが動く」という事実にまず驚きました。
実行中はPCがかなり頑張っているのを感じますが、それでも自分の手元でLLMが動いている体験は新鮮です。
そして、これを誰でも無料で利用できる形で提供しているGPT,GeminiなどのチャットボットやWebサービスの凄さも改めて実感しました。

Discussion