はじめに
この記事はブラウザ上でローカルLLMと対話したい#3｜HTTPリクエストの続き
前回、Ollamaにリクエストを送信して、その返答を表示できるようになった
しかし、対話履歴は保存されておらず、メッセージを送信するごとに新しい会話が始められたことになってしまうという問題が生じていた
このように、話題をすぐに忘れてしまう感じ
今回は、対話履歴ごと送信する機能を追加する
対話履歴の管理
対話履歴は配列（リスト）で管理する
下記はその例
[{role: "user", content: "こんにちは"}, {role: "assistant", content: "こんにちは。何かお手伝いできることはありますか？"}]| role | 発話者 今回はuser（ユーザ側）とassistant（LLM側）を用いる（他にはsystemを用いる場合もある） |
| content | 発話内容 |
メッセージを追加するには、push()メソッドを用いる
（dialogueは配列）
// dialogueに送信メッセージを追加
dialogue.push({ role: "user", content: message});ソースコード
改良したjavascriptプログラム全体を示す
前回から変わったのはdialogueが増えた部分のみ
async function chat(dialogue) {
const url = 'http://127.0.0.1:11434/api/chat';
const data = {
model: "Llama-3.1-Swallow-8B-Instruct-v0.2_Q4_K_M",
messages: dialogue,
stream: false
};
console.log(data)
// 非同期なHTTPリクエストを送信
const response = await fetch(url, {
method: "POST",
headers: {
"Content-Type": "application/json"
},
body: JSON.stringify(data)
});
const result = await response.json();
return result.message;
}
const inputMsg = document.getElementById('inputmsg');
const sendBtn = document.getElementById('send');
const messagesDiv = document.getElementById('messages');
// 対話履歴を保持する配列
const dialogue = [];
sendBtn.addEventListener('click', async () => {
const message = inputMsg.value.trim();
// messagesに送信メッセージを追加
const userMessageEl = document.createElement('div');
userMessageEl.textContent = message;
messagesDiv.appendChild(userMessageEl);
// dialogueに送信メッセージを追加
dialogue.push({ role: "user", content: message});
// 入力をクリア
inputMsg.value = '';
// messagesに返信メッセージを追加
// chat関数が完了するまで待つ
const result = await chat(dialogue);
const systemMessageEl = document.createElement('div');
systemMessageEl.textContent = result.content;
messagesDiv.appendChild(systemMessageEl);
// dialogueに返信メッセージを追加
dialogue.push({ role: "assistant", content: message});
});実行結果例
5行目の「おすすめは何？」というメッセージに対して、ラーメンの話題を継続できていることがわかる
おわりに
このままでは、対話履歴をずっと追加していくことになる。
対話が長くなる場合は、古いメッセージから削除するなどの工夫が必要そう。
コメントを残す