สร้าง Chatbot Web Application ด้วย HTML, CSS และ JavaScript

ในยุคที่เทคโนโลยีก้าวหน้าขึ้นอย่างรวดเร็ว Chatbot กลายเป็นเครื่องมือสำคัญในการสื่อสารระหว่างผู้ใช้งานกับบริการต่าง ๆ บนเว็บไซต์ ในบทความนี้เราจะมาดูวิธีการสร้าง Chatbot Web Application ง่าย ๆ ด้วยการใช้ HTML, CSS, และ JavaScript โดยใช้ Ollama เป็นโมเดลประมวลผลข้อความเพื่อโต้ตอบกับผู้ใช้งาน

โครงสร้างของโค้ด

โค้ดตัวอย่างที่เราจะพูดถึงประกอบไปด้วย 3 ส่วนหลัก ๆ ได้แก่:

• HTML – โครงสร้างของเว็บเพจ
• CSS – การจัดรูปแบบและการออกแบบ
• JavaScript – การจัดการกับข้อความจากผู้ใช้งานและการส่งคำขอไปยังเซิร์ฟเวอร์

สร้างไฟล์ chat.html

โครงสร้าง HTML

ในส่วนของ HTML เรามีการใช้แท็กพื้นฐานในการสร้าง Chatbox ซึ่งมีองค์ประกอบหลัก ๆ ดังนี้:

<div id="chat-box">
    <h2>Chat</h2>
    <ul id="messages"></ul>
    <input type="text" id="user-input" placeholder="ถามอะไรสักอย่าง..." onkeydown="checkEnter(event)" />
</div>

Code language: HTML, XML (xml)

• #chat-box : กล่องหลักที่ใช้แสดงผลการสนทนา
• #messages : ใช้สำหรับแสดงข้อความทั้งหมดระหว่างผู้ใช้และบอท
• input[type="text"] : ช่องกรอกข้อความที่ผู้ใช้จะพิมพ์คำถามหรือคำสั่ง

การออกแบบด้วย CSS

ส่วนนี้จะช่วยให้แอปพลิเคชันของเราดูดีขึ้น โดยใช้ CSS สำหรับจัดการความสวยงามของข้อความและกล่องแชท:

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    background-color: #e5e5e5;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
    padding: 10px;
}

#chat-box {
    width: 100%;
    max-width: 500px;
    background-color: #fff;
    border-radius: 15px;
    box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    padding: 20px;
    display: flex;
    flex-direction: column;
    height: 80vh;
}

h2 {
    text-align: center;
    font-size: 1.5rem;
    margin-bottom: 20px;
}

#messages {
    flex: 1;
    overflow-y: auto;
    margin-bottom: 15px;
    padding-right: 5px;
}

.message {
    box-sizing: border-box;
    padding: 0.5rem 1rem;
    margin: 1rem;
    background: #FFF;
    border-radius: 1.125rem 1.125rem 1.125rem 0;
    min-height: 2.25rem;
    width: fit-content;
    max-width: 80%;
    box-shadow: 0 0 2rem rgba(black, 0.075), 0rem 1rem 1rem -1rem rgba(black, 0.1);
}

.user-message {
    align-self: flex-end;
    background-color: #007aff;
    color: white;
    border-top-right-radius: 0;
    text-align: right;
    margin-left: auto;
}

.bot-response {
    align-self: flex-start;
    background-color: #f1f1f1;
    color: black;
    border-top-left-radius: 0;
    text-align: left;
    margin-right: auto;
}

input[type="text"] {
    width: 100%;
    padding: 12px 18px;
    font-size: 1rem;
    border-radius: 25px;
    border: 1px solid #ccc;
    margin-top: 10px;
    outline: none;
    transition: border-color 0.3s;
}

input[type="text"]:focus {
    border-color: #007bff;
}

Code language: CSS (css)

การใช้ CSS ในส่วนนี้ทำให้การแสดงผลบนหน้าเว็บดูสะอาดตาและใช้งานได้สะดวก โดยข้อความของผู้ใช้จะมีพื้นหลังสีน้ำเงิน ในขณะที่ข้อความของบอทจะมีพื้นหลังสีเทาอ่อน

การทำงานของ JavaScript

ในส่วนของ JavaScript เราจะสร้างฟังก์ชันเพื่อให้ Chatbot สามารถตอบคำถามจากผู้ใช้ได้:

async function sendMessage() {
    const userInput = document.getElementById("user-input").value;
    if (userInput.trim() === "") return;

    const messagesList = document.getElementById("messages");
    const userMessage = document.createElement("li");
    userMessage.classList.add("message", "user-message");
    userMessage.textContent = "You: " + userInput;
    messagesList.appendChild(userMessage);

    // Clear the input field
    document.getElementById("user-input").value = "";

    // Send message to FastAPI
    const response = await fetch("/chat", {
        method: "POST",
        headers: {
            "Content-Type": "application/json"
        },
        body: JSON.stringify({ message: userInput })
    });
    const data = await response.json();

    const botMessage = document.createElement("li");
    botMessage.classList.add("message", "bot-response");
    botMessage.textContent = "Bot: " + data.response;
    messagesList.appendChild(botMessage);

    // Scroll to the bottom of the chat after appending the new message
    messagesList.scrollTop = messagesList.scrollHeight;
}

function checkEnter(event) {
    if (event.key === "Enter") {
        sendMessage();
    }
}

Code language: JavaScript (javascript)

• ฟังก์ชัน sendMessage() รับข้อความจากผู้ใช้และส่งไปยังเซิร์ฟเวอร์ FastAPI
• เมื่อได้รับคำตอบจากเซิร์ฟเวอร์ (เช่นคำตอบจากโมเดล Ollama) จะเพิ่มข้อความที่ตอบกลับลงใน UI
• ฟังก์ชัน checkEnter() จะตรวจจับการกดปุ่ม “Enter” เพื่อส่งข้อความโดยไม่ต้องคลิกปุ่ม
• การสร้าง เซิร์ฟเวอร์ FastAPI ใช้คำตอบจากโมเดล Ollama

การสร้าง Chatbot Web Application ด้วย HTML, CSS, และ JavaScript ในบทความนี้สามารถช่วยให้ผู้ใช้งานได้เรียนรู้การพัฒนาแอปพลิเคชันแชทที่สามารถโต้ตอบกับผู้ใช้ได้ โดยผ่านการเชื่อมต่อกับ API ของ FastAPI ที่ทำหน้าที่ประมวลผลคำถามและให้คำตอบผ่านโมเดลอย่าง Ollama การใช้งานที่ง่ายดายและการออกแบบที่สะอาดตาทำให้เป็นตัวเลือกที่ดีในการเรียนรู้และพัฒนาแอปพลิเคชันแบบ real-time.

ทีมงานพร้อมให้คำปรึกษาและพัฒนาซอฟต์แวร์