初めに

今回はチャットボットを書いていきます。

ファイル構造

今回は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にやってもらいました。
それではまたお会いしましょう！