โค้ดหน้าเดียวจบ! สร้างเว็บ AI Chatbot (เชื่อมต่อ AI จริง) ด้วย HTML + JavaScript ล้วนๆ

/ AI Automation / By

คุณเคยฝันอยากมี AI Chatbot อัจฉริยะเป็นของตัวเองบนหน้าเว็บไซต์ แต่คิดว่ามันเป็นเรื่องยุ่งยากที่ต้องใช้ Backend ซับซ้อนหรือตั้งค่าเซิร์ฟเวอร์วุ่นวายหรือไม่?

ข่าวดี! ในบทความนี้ เราจะลบภาพจำนั้นทิ้งไป เราจะมาสร้าง AI Chatbot ที่สามารถ “คิด” และ “โต้ตอบ” ได้จริง (ไม่ใช่แค่ Bot ที่ตั้งคำตอบไว้ล่วงหน้า) โดยใช้เพียงแค่ 3 ส่วนประกอบหลักที่คุณคุ้นเคย: HTML (สำหรับโครงสร้าง), CSS (สำหรับความสวยงาม), และ JavaScript (สำหรับสมองส่วนหน้า) ที่จะทำหน้าที่เรียกใช้ “สมองส่วนหลัง” ซึ่งก็คือ AI API

นี่คือคู่มือฉบับ “โค้ดหน้าเดียวจบ” ที่จะเปลี่ยนหน้าเว็บเปล่าๆ ของคุณให้กลายเป็นคู่สนทนาอัจฉริยะ

🧠 แนวคิด: มันทำงานอย่างไร?

ก่อนจะลุยโค้ด เรามาเข้าใจภาพรวมง่ายๆ กันก่อน:

  1. Frontend (HTML/CSS): นี่คือหน้าตาของแชท (Chat Interface) ที่ผู้ใช้เห็น มีกล่องข้อความให้พิมพ์ และปุ่มส่ง
  2. Client-Side Logic (JavaScript): นี่คือหัวใจของเราในวันนี้ เมื่อผู้ใช้กด “ส่ง”, JavaScript จะ:
    • รับข้อความที่ผู้ใช้พิมพ์
    • แสดงข้อความนั้นบนหน้าจอ
    • “ยิง” ข้อความนั้นไปขอคำตอบจาก AI API ผ่านอินเทอร์เน็ต (ด้วยคำสั่ง fetch)
  3. The AI Brain (API): นี่คือสมองอัจฉริยะที่เราจะไป “ยืม” ใช้ ในบทความนี้ เราจะใช้ Google Gemini API (ซึ่งสามารถเรียกใช้ได้ง่ายและมี Free Tier) AI จะรับคำถามของเรา, ประมวลผล, และส่งคำตอบกลับมาเป็นข้อความ
  4. JavaScript (อีกครั้ง): เมื่อ JS ได้รับคำตอบจาก AI API แล้ว มันก็จะนำข้อความนั้นมาแสดงผลบนหน้าจอให้ผู้ใช้เห็น

ง่ายๆ แค่นี้เลย!

🔑 ขั้นตอนที่ 0: สิ่งที่คุณต้องมี (สำคัญมาก!)

AI ไม่ใช่ของฟรี (แต่มีให้ใช้ฟรีในโควต้า) คุณต้องมี “กุญแจ” เพื่อบอก AI ว่า “นี่คือฉันนะ ขอใช้สมองเธอหน่อย” กุญแจนี้เรียกว่า API Key

สำหรับบทความนี้ เราจะใช้ Google Gemini:

  1. ไปที่ Google AI Studio (ค้นหา Google ได้เลย)
  2. ลงชื่อเข้าใช้ด้วยบัญชี Google
  3. สร้างโปรเจกต์ใหม่ และคลิกที่ “Get API Key”
  4. คัดลอก Key นั้นเก็บไว้ในที่ปลอดภัย ห้ามแชร์ให้ใครเห็น!

🛠️ ขั้นตอนที่ 1: โครงสร้างหน้าแชท (HTML)

สร้างไฟล์ชื่อ index.html แล้ววางโค้ดนี้ลงไป นี่คือโครงสร้างพื้นฐานสุดๆ

HTML

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>My AI Chatbot</title>
    <link rel="stylesheet" href="style.css">
</head>
<body>

    <h1>My AI Chatbot</h1>
    
    <div id="chat-container">
        <div id="chat-log"></div>
        
        <div id="chat-input-area">
            <input type="text" id="user-input" placeholder="พิมพ์ข้อความที่นี่...">
            <button id="send-button">ส่ง</button>
        </div>
    </div>

    <script src="script.js"></script>
</body>
</html>

💅 ขั้นตอนที่ 2: แต่งหน้าทาปาก (CSS)

เพื่อให้มันดูเหมือนหน้าต่างแชทจริงๆ สร้างไฟล์ style.css แล้ววางโค้ดนี้

CSS

body {
    font-family: Arial, sans-serif;
    background-color: #f0f0f0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100vh;
}

#chat-container {
    width: 90%;
    max-width: 600px;
    height: 70vh;
    border: 1px solid #ccc;
    background-color: #fff;
    border-radius: 8px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

#chat-log {
    flex-grow: 1;
    padding: 10px;
    overflow-y: auto; /* ทำให้เลื่อนได้ถ้าข้อความยาว */
}

.message {
    margin-bottom: 10px;
    padding: 8px 12px;
    border-radius: 15px;
    line-height: 1.4;
}

.user {
    background-color: #007bff;
    color: white;
    align-self: flex-end; /* ข้อความเราอยู่ขวา */
    margin-left: auto;
}

.bot {
    background-color: #e9e9eb;
    color: black;
    align-self: flex-start; /* ข้อความ Bot อยู่ซ้าย */
}

#chat-input-area {
    display: flex;
    border-top: 1px solid #ccc;
}

#user-input {
    flex-grow: 1;
    border: none;
    padding: 10px;
    font-size: 1em;
}

#send-button {
    border: none;
    background-color: #007bff;
    color: white;
    padding: 0 20px;
    cursor: pointer;
    font-size: 1em;
}

#send-button:hover {
    background-color: #0056b3;
}

🚀 ขั้นตอนที่ 3: สมองส่วนหน้า (JavaScript)

นี่คือพระเอกของเรา! สร้างไฟล์ script.js นี่คือที่ที่เราจะใส่ API Key และเขียน Logic ทั้งหมด

สำคัญมาก: ห้ามใช้ API Key ของคุณในโค้ด JavaScript ที่จะนำขึ้นเว็บไซต์จริง (Production) เพราะใครๆ ก็สามารถเปิดดูและขโมย Key ของคุณไปใช้ได้ วิธีนี้ใช้สำหรับ “ทดสอบในเครื่องตัวเอง” เท่านั้น

JavaScript

// 1. เชื่อมต่อกับ Element ใน HTML
const chatLog = document.getElementById('chat-log');
const userInput = document.getElementById('user-input');
const sendButton = document.getElementById('send-button');

// 2. ใส่ API Key ที่คุณได้มา
// ‼️ คำเตือน: นี่เป็นวิธีที่ไม่ปลอดภัยสำหรับ Production ‼️
// ‼️ ห้ามอัปโหลดโค้ดนี้พร้อม Key จริงขึ้น GitHub หรือเซิร์ฟเวอร์สาธารณะ! ‼️
const API_KEY = 'YOUR_GOOGLE_AI_API_KEY'; // <--- ‼️ ใส่ Key ของคุณที่นี่
const API_URL = `https://generativelanguage.googleapis.com/v1beta/models/gemini-pro:generateContent?key=${API_KEY}`;


// 3. เมื่อกดปุ่ม "ส่ง"
sendButton.addEventListener('click', sendMessage);
userInput.addEventListener('keydown', (event) => {
    if (event.key === 'Enter') {
        sendMessage();
    }
});

// 4. ฟังก์ชันหลักในการส่งและรับข้อความ
async function sendMessage() {
    const userMessage = userInput.value.trim();

    // ถ้าไม่ได้พิมพ์อะไรมา ก็ไม่ต้องทำอะไร
    if (userMessage === '') {
        return;
    }

    // แสดงข้อความของผู้ใช้บนจอ
    appendMessage('user', userMessage);
    userInput.value = ''; // เคลียร์ช่องพิมพ์

    // ---- ส่วนที่เรียก AI ----
    try {
        // แสดง "กำลังพิมพ์..."
        appendMessage('bot', 'กำลังคิด...');

        const response = await fetch(API_URL, {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                // นี่คือรูปแบบที่ Gemini ต้องการ
                contents: [{
                    parts: [{
                        text: userMessage
                    }]
                }]
            })
        });

        if (!response.ok) {
            throw new Error(`HTTP error! status: ${response.status}`);
        }

        const data = await response.json();
        
        // ดึงข้อความคำตอบจาก AI
        // (เราต้องเช็คก่อนว่ามีคำตอบกลับมาจริง)
        const botMessage = data.candidates[0]?.content?.parts[0]?.text || "ขออภัย ฉันไม่เข้าใจค่ะ";

        // ลบ "กำลังพิมพ์..." ออก
        removeLastMessage();
        
        // แสดงคำตอบของ Bot
        appendMessage('bot', botMessage);

    } catch (error) {
        console.error('Error fetching AI response:', error);
        removeLastMessage(); // ลบ "กำลังพิมพ์..."
        appendMessage('bot', 'เกิดข้อผิดพลาดในการเชื่อมต่อ: ' + error.message);
    }
    // ---- จบส่วนที่เรียก AI ----
}

// 5. ฟังก์ชันช่วยในการแสดงข้อความบนจอ
function appendMessage(sender, message) {
    const messageElement = document.createElement('div');
    messageElement.classList.add('message', sender); // เพิ่ม class 'message' และ class 'user' หรือ 'bot'
    messageElement.innerText = message;
    chatLog.appendChild(messageElement);
    chatLog.scrollTop = chatLog.scrollHeight; // เลื่อนไปล่างสุด
}

// 6. ฟังก์ชันลบข้อความ "กำลังพิมพ์..."
function removeLastMessage() {
    const lastMessage = chatLog.lastChild;
    if (lastMessage && lastMessage.classList.contains('bot')) {
        chatLog.removeChild(lastMessage);
    }
}

🚨 ย้ำอีกครั้ง: เรื่องความปลอดภัยของ API Key

วิธีที่เราทำในบทความนี้ (ใส่ Key ใน JavaScript) เหมาะสำหรับการทดลองเล่นและพัฒนาในเครื่องของคุณเท่านั้น

ห้ามอัปโหลดโค้ดนี้ขึ้นเว็บโฮสติ้งสาธารณะเด็ดขาด!

หากคุณต้องการนำขึ้นเว็บจริง คุณต้องสร้าง “Backend Proxy” (เช่น ใช้ Node.js, Python หรือ Cloud Functions) เพื่อทำหน้าที่เป็นตัวกลางในการซ่อน API Key ไม่ให้แสดงต่อสาธารณะ

สรุป

ยินดีด้วย! ตอนนี้คุณมีเว็บ AI Chatbot ส่วนตัวที่ทำงานได้จริงแล้ว นี่เป็นเพียงจุดเริ่มต้น คุณสามารถนำไปต่อยอดได้อีกมากมาย เช่น:

  • ปรับแต่ง CSS ให้สวยงามกว่านี้
  • เพิ่มระบบจดจำบทสนทนา (Conversation History)
  • เปลี่ยนไปใช้ AI API เจ้าอื่น (เช่น OpenAI)
  • และที่สำคัญที่สุด คือการเรียนรู้วิธีสร้าง Backend Proxy เพื่อความปลอดภัย

ขอให้สนุกกับการสร้างสรรค์ค่ะ!

Post Views: 7

Related Posts

Subscribe
Subscribe
Scroll to Top