初めに
今回はチャットボットを書いていきます。
ファイル構造
今回はindex.html一つで作ります
コピペ
index.htmlに以下のコードをコピペしてください。
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot Test</title>
<style>
body {
color: black;
}
.container {
width: 98%;
height: 50vh;
overflow-y: scroll; /* スクロール有効 */
border: 1px solid black; /* ボーダー表示 */
margin: 0 auto;
padding: 10px;
box-sizing: border-box; /* パディングを含む幅計算 */
}
/* スクロールバーを完全に非表示にする */
.container::-webkit-scrollbar {
width: 0;
height: 0;
}
.container2 {
width: 50%;
height: 70vh;
overflow-y: scroll; /* スクロール有効 */
margin: 0 auto;
text-align: center;
border: none; /* ボーダー追加 */
box-sizing: border-box; /* パディングを含む幅計算 */
}
.container2::-webkit-scrollbar {
width: 0;
height: 0;
}
h1 {
font-weight: 1;
}
button {
width: 100px;
height: 25px;
margin-top: 10px;
}
input[type="text"] {
width: 300px;
height: 20px;
}
</style>
</head>
<body>
<div class="container2">
<h1>しきい値を用いたチャットボットのテスト</h1>
<div class="container" id="chatContainer"></div>
<input type="text" id="prompt" placeholder="メッセージを入力してください">
<button id="sendBtn">送信</button>
</div>
<script>
const responses = { //レスポンスデータ。必要に応じてデータを追加
"こんにちは": [
"こんにちは。お手伝いできることはありますか？",
"こんにちは。今日も一日頑張りましょう！",
"こんにちは。またお会いできて嬉しいです！"
],
"あなたは誰": [
"Javascriptで作成されたAIです。仕組みとしてはJSONでレスポンスを管理して、該当するものがあったら、ランダムでレスポンスを返します。",
"Javascriptで作成されたAIです。しきい値を利用しています。",
"Javascriptで作成されているAIです。まだまだですが。頑張ります！"
],
"こんばんは": [
"こんばんは！"
]
};
const chatContainer = document.getElementById("chatContainer");
const sendBtn = document.getElementById("sendBtn");
const promptInput = document.getElementById("prompt");
const threshold = 3; // しきい値
function calculateDifference(word1, word2) {
let cost = 0;
const minLength = Math.min(word1.length, word2.length);
for (let i = 0; i < minLength; i++) {
if (word1[i] !== word2[i]) {
cost++;
}
}
cost += Math.abs(word1.length - word2.length);
return cost;
}
function checkWords(input, target) {
if (input === target) return true;
const cost = calculateDifference(input, target);
return cost <= threshold;
}
function getResponse(input) {
for (const key in responses) {
if (checkWords(input, key)) {
const possibleResponses = responses[key];
const randomIndex = Math.floor(Math.random() * possibleResponses.length);
return possibleResponses[randomIndex];
}
}
return "その質問には答えられません。";
}
function addMessageToChat(sender, message) {
const messageElement = document.createElement("div");
messageElement.textContent = `${sender}: ${message}`;
chatContainer.appendChild(messageElement);
chatContainer.scrollTop = chatContainer.scrollHeight; // 自動スクロール
}
sendBtn.addEventListener("click", () => {
const userMessage = promptInput.value.trim();
if (!userMessage) return;
addMessageToChat("あなた", userMessage);
const botResponse = getResponse(userMessage);
addMessageToChat("Bot", botResponse);
promptInput.value = ""; // 入力欄をクリア
});
</script>
</body>
</html>
仕組み
しきい値を利用しています。なので。「こんいちは」などでもこんにちはと同じ応答が返ってきます
最後に
いかがだったでしょうか？
今回はjavascriptを使用して簡単なチャットボットを書いてみました。今回は、 calculateDifference内の修正などをchatGPTにやってもらいました。
それではまたお会いしましょう！