はじめに
このブログでは、これまでにOllamaを使って、ローカルLLMを動かしてきた
その中でも特にollma-pythonを用いてきたが、仕組みはapiを叩いてるだけなので、他の言語でもできるはずだと書いた
（参考）OllamaのPythonライブラリを使ってローカルLLMを利用する
そこで、javascriptを通じてOllamaを利用しようというのが今回の目的
今回は、htmlでできたページに、テキスト入力ボックスと送信ボタンを設置するところまで
サンプルコード
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>LLM Chat</title>
</head>
<body>
<input type="text" id="inputmsg"> <!--入力ボックス-->
<button type="button" id="send">送信</button><!--送信ボタン-->
<div id="messages">
</div>
<script>
const inputMsg = document.getElementById('inputmsg');
const sendBtn = document.getElementById('send');
const messagesDiv = document.getElementById('messages');
sendBtn.addEventListener('click', () => {
const message = inputMsg.value.trim();
if (message) {
// messagesに送信メッセージを追加
const userMessageEl = document.createElement('div');
userMessageEl.textContent = message;
messagesDiv.appendChild(userMessageEl);
// 入力をクリア
inputMsg.value = '';
// messagesに返信メッセージを追加
const systemMessageEl = document.createElement('div');
systemMessageEl.textContent = `あなたは「${message}」と言いました。`;
messagesDiv.appendChild(systemMessageEl);
}
});
</script>
</body>
</html>いずれjavascriptを別ファイルにすると思う
body部分（script部分を除く）では、以下のオブジェクトを配置している
- テキスト入力ボックス
- ボタン
- メッセージ表示領域：messages
script部分ではボタンがクリックされたときの動作を記述している
- 入力テキストを取得
- 入力文をmessagesに追加
- 入力ボックスをクリアする
- 返信文をmessagesに追加
実行例
「こんにちは」と「よろしく」を入力した例
メッセージが下に吊り下げられていく
おわりに
次は、送信メッセージをOllmaに投げてみたい
コメントを残す