OllamaとOpen WebUIとVS Code拡張Continueのメモ
ローカルLLMを試したときのMEMO
Ollama
ローカルLLMを動かすAPIサーバです。
下記URLが参考になります。
Linuxだと"curl -fsSL https://ollama.com/install.sh | sh"でインストールです。
他のサーバから繋ぐには"sudo vi /etc/systemd/system/ollama.service"でファイルを書き換えます。
Environment="OLLAMA_HOST=0.0.0.0"
他にEnvironment行があった場合、別に定義です。
GGUFフォーマットのLLMモデルが使えるようです。
ダウンロードされているLLMモデル一覧を表示
$ ollama list
Open WebUI
ChatGPTのようなWebUIです。裏にOllama等のAPIが使えます。
下記でインストールして起動します。
$ python -m venv open-webui
$ pip install open-webui
$ open-webui serve
どのAPIサーバとつなぐかは起動してログインしてからの設定で行います。
設定ファイルはopen-webuiをvenvで作成した"./envs/open-webui/lib/python3.11/site-packages/open_webui/data/webui.db"に保存されていました。
VS Code拡張Continue
VS CodeのTab補完候補にLLMが使えるようになります。
HOMEディレクトリに.continue/config.jsonが出来ているので下記を書き足すと動きました。
{"title": "qwen2.5-coder:7b","model": "qwen2.5-coder:7b","provider": "ollama",}],"tabAutocompleteModel": {"title": "qwen2.5-coder:7b","model": "qwen2.5-coder:7b","provider": "ollama",},
チャット欄で使える@指定は下記に載っていました
タブ補完のおすすめmodelはstarcoder2:3bのようです。
Model setup | Continue
2024/12/07に上記リンクを見るとqwen2.5-coder:1.5bがバランスが良い。
GPUスペックが良かったらqwen2.5-coder:7bが良いに変わっていました。
2025/4追記: 流行りのMCPを試す場合、チャットを入力欄の左下のAgent/Chat/Editの選択しをAgentにする必要がありました。
qwen3:8b等、Toolsをサポートしたmodelを選ばないとAgentは有効になりませんでした。
LM Studioのモデルを使うには下記のようにしました。LM Studioの設定でサーバを有効にする必要もありました。
{"title": "local-lmstudio-qwen3-8b","provider": "lmstudio","model": "qwen3-8b",},{"title": "local-lmstudio-qwen2.5-coder-3b","provider": "lmstudio","model": "qwen2.5-coder-3b",}
wsl2でOllamaを動かして他のPCからアクセスしたMemo
からOllamaをwsl2にインストールしました。
/etc/systemd/system/ollama.serviceに設定ファイルができたので他のPCからアクセスできるようにOLLAMA_HOSTとOLLAMA_ORIGINS環境変数の設定をPATH環境変数の次の行に足しました。
Environment="OLLAMA_HOST=0.0.0.0"
Environment="OLLAMA_ORIGINS=192.168.1.*"
さらにwsl2他のPCからアクセスできるようにポートフォワードの設定を足した。
管理者権限のコマンドプロンプトから下記を実行
netsh interface portproxy add v4tov4 listenaddress=192.168.1.111 listenport=11434 connectaddress=172.19.49.138 connectport=11434
このポートフォワードは以下を参考にした。
WSL2で起動したサーバーに外部の端末からアクセスする – GUNMA GIS GEEK
設定(管理者権限が必要)
netsh.exe interface portproxy add v4tov4 listenaddress=＜ホストOSのipアドレス＞listenport=3000 connectaddress=＜wslのipアドレス＞ connectport=3000
設定確認
> netsh.exe interface portproxy show v4tov4
設定削除するときは以下
> netsh.exe interface portproxy delete v4tov4 listenport=3000 listenaddress=＜ホストOSのipアドレス＞
NginxでBasic認証したリバースプロキシを作ったMemo
/etc/nginx/sites-available/defaultに下記を書くだけ
server {
listen 443 ssl;
listen [::]:443 ssl;
ssl_certificate /etc/nginx/server.crt;
ssl_certificate_key /etc/nginx/server.key;location / {
proxy_pass http://localhost:8080/;
auth_basic "Restricted";
auth_basic_user_file /etc/nginx/.htpasswd;
}}
証明書と.htpasswdは用意する必要がある。
HTML/CSSを再入門したMEMO
HTMLタグ
<!DOCTYPE html>: HTML5で有ることを示す。先頭に記載する
<meta name="viewport" content="width=device-width, inital-sacle=1"> headタグの中に書く。1倍でデバイスの幅いっぱい使うの意味。スマホ向けの定番らしい。
<p>: 段落
CSS
CSSのルールや定番
@アットマークの記載
@import url(index.css); 他のCSSを参照
@media (mini-width: 768px) {ここに設定} メディアの条件によって設定
設定範囲の指定方法(セレクタ)
<p>に対してはp { color: #00FF00;}
<p class="classname">に対しては .classname{ color: #00FF00;}。classnameは重複できる
<p id="idname">に対しては#idname { color: #00FF00;}。idは重複できない
a:hover { color: #0000FF;} のように条件指定できる
p strong { color: #121212;}のようにするとpタグの中のstrongタグに設定される
p,strong { color: #121212;}のよう","区切りにするとpタグとstrongタグに対して設定される
* { color: #121212;)のようにすると全てに設定される
.classname * { color: #121212;} のようにするとclass="classname"が付いた子供全てに適用される。
幅や高さ
p { box-size: border-box; width: 100%; }とすると親要素と揃う
html *,::before,::after {box-sizing: border-box;} とすると全ての要素にborder-boxがつく。これが定番なようだ
スタイルの適用される順番
同じのを複数回た場合、後から書いた方が優先
p { font-size: 10px;}
p { font-size: 20px;}
となっていると20pxとなる。
.classnameや#idnameのように細かく指定されていた場合細かい方が優先さえる。
後から書いた方が優先されるため最後に
@media (min-width: 768px) {
/* PC向けの設定*/
}
のようにしてレイアウト設定を更新する
Normalize.css
ブラウザ間の差分を初期化する。
Normalize.css: Make browsers render all elements more consistently. (necolas.github.io)
レイアウト
フレックスでレイアウト
<div class="flexroot">
<div class="flexcntent">コンテンツ1</div>
<div class="flexcntent">コンテンツ2</div>
</div>
.flexroot { display: flex; }
.flexcont { flex: 1 1 auto; }
とするとコンテンツ1とコンテンツ2が横いっぱいに広がる。
グリッドレイアウト
<div class="gridroot">
<div class="gridcntent">コンテンツ1</div>
<div class="gridcntent">コンテンツ2</div>
<div class="gridcntent">コンテンツ3</div>
<div class="gridcntent">コンテンツ4</div>
<div class="gridcntent">コンテンツ5</div>
<div class="gridcntent">コンテンツ6</div>
</div>
.gridroot {
display: grid;
grid-template-columns: 1fr 1fr 1fr;
}
とすると3列のgridになる。
コンテンツ1 コンテンツ2 コンテンツ3
コンテンツ4 コンテンツ5 コンテンツ6
画像にテキストを回り込ませる
flowやfloatは画像にしか使わない
<div class="flowroot">
<img src="./img/hoge.jpg" class="flowleft">
<p>回り込む文字列</p>
</div>
<div><p>回り込まない次の段落</p>
のようにする。
cssで
.flowroot {
display: flow-root;
}
.flowleft {
float: left;
}
のようにする。"display: fow-root"を指定しないと後ろが回り込み続ける。
デザイン
角を丸くする
border-radius: 100px;
いまさらtmuxのメモ
window操作
ctrl+b c : windowを新しく開く
ctrl+b w : windowを選択
pane(ペイン)操作
ctrl+b " もしくは ctrl+b % : 上下もしくは左右に新しくpaneを開く
ctrl+b o : アクティブなペインの切り替え
ctrl+b :select-pane -T 名前 : ペインに名前を付ける
ctrl+m : ペインをマーク
ctrl+b :join-pane : マークしたペインを現在のwindowに持ってくる
Raspberry Pi OS BullseyeでリモートデスクトップやVNC
ラズパイをリモートデスクトップのサーバにする
Windowsで使われているリモートデスクトップです。
xrdpをインストールするだけです。
$ sudo apt update
$ sudo apt install xrdp
$ shutdown -r now
再起動後、リモートデスクトップで接続します。ポート番号は3389です。
ただし、3389はリモートデスクトップのデフォルトポート番号です。そのためWindowsのリモートデスクトップクライアントからは、ラズパイのIPを指定するだけで接続可能です。
別ユーザが同時にそれぞれ接続できそうです。(ラズパイのパワー不足で重そうですが)
ラズパイをVNCサーバにする
まずVNCサーバを有効にします。
左上ラズパイマーク -> 設定 -> Raspberry Piの設定
インタフェース -> VNCを有効
/root/.vnc/config.d/vncserver-x11 に次の行を追記します。($ sudo vi /root/.vnc/config.d/vncserver-x11等で編集)
Authentication=VncAuth
VNCのパスワードを設定設定します。
$ sudo vncpasswd -service
ポート番号は5900です。こちらもVNCのデフォルトポート番号なため、VNCクライアントからラズパイのIPを指定するだけで接続可能です。
2023年4月1日追記: UltraVNCから繋がらなくなった。ラズパイの右上のVNCのアイコン->右上のハンバーガーメニュー->Optionから下記でつながる状態に戻った。
- Security -> Encryption "Prefer off"
- Users & Permissions -> "Standard user(user)"のパスワードを再設定。Legacyクライアントからの接続を許可
Arduino IDEでM5Stamp C3U 2022年3月時点
ファイル->環境設定
追加のボードマネージャのURL:
https://m5stack.oss-cn-shenzhen.aliyuncs.com/resource/arduino/package_m5stack_index.json
ツール->ボード->ボードマネージャ
M5Stackをインストール
ツール->ボード->M5Stack Arduino->STAMP-C3
USB CDC OnBootをEnableへ
スケッチ->ライブラリをインクルード->ライブラリを管理
Adafruint NeoPixelをインストール(カラーLED用ライブラリ)
ArduinoJsonをインストール(JSONライブラリ)
Adafruit PWM Servo Driver libraryをインストール(PCA9685サーボモータードライバ用ライブラリ)
SDAがGPIO8、SDLがGPIO9
