ChatAI

SeyhaLite

2 Mar, 2025

ចែករំលែកកូដ៖ បង្កើត ChatGPT Chat ដាក់ក្នុង Website ដោយឥតគិតថ្លៃ (HTML/JS)

សួស្តីបងប្អូនអ្នកសិក្សាផ្នែក IT និងអ្នកបង្កើតវេបសាយទាំងអស់គ្នា! ថ្ងៃនេះខ្ញុំមាន Source Code ដ៏ពិសេសមួយចង់ចែករំលែក គឺការបង្កើត AI Chatbot (ChatGPT Style) ដោយប្រើប្រាស់ HTML, CSS និង JavaScript សុទ្ធ ១០០%។

លក្ខណៈពិសេសនៃកូដនេះ៖

ចំណុចប្រទាក់ស្អាត (Clean UI): រចនាឡើងដូចកម្មវិធី ChatGPT ផ្ទាល់។
Responsive: អាចប្រើបានទាំងលើកុំព្យូទ័រ និងទូរសព្ទដៃ (Mobile Friendly)។
ដំណើរការបានពិតៗ: ភ្ជាប់ជាមួយ API ដើម្បីឆ្លើយឆ្លងជាមួយអ្នកប្រើប្រាស់។
ងាយស្រួលប្រើ: គ្រាន់តែចម្លងកូដ (Copy & Paste) ដាក់ចូលក្នុងឯកសារ .html របស់អ្នកជាការស្រេច។

កូដទាំងស្រុង (Full Source Code)

សូមចម្លងកូដខាងក្រោមនេះ យកទៅរក្សាទុកជាឯកសារឈ្មោះ index.html រួចបើកមើលលើ Browser របស់អ្នក៖

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>ChatGPT Chat</title>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css" rel="stylesheet">
    <style>
        body { margin: 0; font-family: Arial, sans-serif; background-color: #fff; color: #000; display: flex; flex-direction: column; height: 100vh; max-width: 100%; }
        .top-bar { background-color: #fff; padding: 10px 15px; font-size: 1.2em; font-weight: bold; color: #000; border-bottom: 1px solid rgba(0, 0, 0, 0.1); text-align: left; position: relative; }
        .chat-container { flex: 1; display: flex; flex-direction: column; padding: 10px; overflow: hidden; }
        .chat-content { flex: 1; overflow-y: auto; padding: 10px; scroll-behavior: smooth; background-color: #f9f9f9; border: 1px solid #ddd; border-radius: 5px; }
        .message { margin: 8px 0; display: flex; align-items: flex-end; max-width: 90%; }
        .message.user { justify-content: flex-end; margin-left: auto; }
        .message.bot { justify-content: flex-start; margin-right: auto; }
        .bubble { padding: 8px 12px; border-radius: 15px; word-wrap: break-word; background-color: #f0f0f0; color: #000; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); max-width: calc(100% - 40px); }
        .message.user .bubble { background-color: #007BFF; color: #fff; }
        .avatar { width: 30px; height: 30px; border-radius: 50%; margin: 0 8px; }
        .loading { display: flex; padding: 8px 12px; background-color: #f0f0f0; border-radius: 15px; max-width: 30%; box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
        .dots { display: flex; gap: 4px; }
        .dot { width: 6px; height: 6px; background-color: #000; border-radius: 50%; animation: blink 1.4s infinite; }
        .dot:nth-child(2) { animation-delay: 0.2s; }
        .dot:nth-child(3) { animation-delay: 0.4s; }
        @keyframes blink { 0%, 80%, 100% { opacity: 0; } 40% { opacity: 1; } }
        .bottom-bar { display: flex; align-items: center; padding: 10px; background-color: #fff; border-top: 1px solid rgba(0, 0, 0, 0.1); position: relative; }
        .bottom-bar input { flex: 1; padding: 8px 12px; border: 1px solid rgba(0, 0, 0, 0.2); border-radius: 15px; font-size: 0.9em; background-color: #f9f9f9; margin-right: 8px; outline: none; }
        .bottom-bar button { padding: 8px 15px; border: none; border-radius: 15px; font-size: 0.9em; background-color: #007BFF; color: #fff; cursor: pointer; transition: background-color 0.3s; }
        .bottom-bar button:hover { background-color: #0056b3; }
        pre { background-color: #f5f5f5; padding: 8px; border-radius: 5px; font-size: 0.9em; white-space: pre-wrap; word-wrap: break-word; max-width: 100%; }
        .code-block { position: relative; background-color: #f4f4f4; padding: 8px; border-radius: 5px; margin: 5px 0; overflow: auto; font-family: monospace; font-size: 0.9em; }
        .copy-button { background-color: transparent; color: #007bff; border: none; padding: 0; cursor: pointer; font-size: 14px; position: absolute; top: 5px; right: 5px; }
    </style>
</head>
<body>
    <div class="top-bar">ChatGPT</div>
    <div class="chat-container">
        <div id="chat-content" class="chat-content"></div>
    </div>
    <form id="chat-form" class="bottom-bar">
        <input id="user-input" type="text" placeholder="Type your message..." autocomplete="off">
        <button type="submit">Send</button>
    </form>

    <script>
        const chatContent = document.getElementById("chat-content");
        const chatForm = document.getElementById("chat-form");
        const userInput = document.getElementById("user-input");
        const chatGPTLogo = "https://i.ibb.co/JxcxBzh/67373267.jpg";
        const userLogo = "https://i.ibb.co/ssQNvBC/67373290.jpg";

        function parseMarkdown(text) {
            text = text.replace(/```([\s\S]*?)```/g, (match, code) => {
                const codeWithoutLanguage = code.split('\n').slice(1).join('\n');
                return `<pre class="code-block"><code>${escapeHtml(code)}</code><button class="copy-button" data-code="${encodeURIComponent(codeWithoutLanguage)}"><i class="fa fa-copy"></i></button></pre>`;
            });
            text = text.replace(/\n/g, '<br/>');
            return text;
        }

        function escapeHtml(text) {
            return text.replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;").replace(/"/g, "&quot;").replace(/'/g, "&#039;");
        }

        function copyToClipboard(text, button) {
            navigator.clipboard.writeText(text).then(() => {
                const icon = button.querySelector('i');
                icon.classList.remove('fa-copy');
                icon.classList.add('fa-check');
                setTimeout(() => { icon.classList.remove('fa-check'); icon.classList.add('fa-copy'); }, 1000);
            });
        }

        document.addEventListener("click", (event) => {
            const button = event.target.closest('.copy-button');
            if (button) {
                const code = decodeURIComponent(button.getAttribute('data-code'));
                copyToClipboard(code, button);
            }
        });

        function createMessageElement(message, fromUser, isLoading = false) {
            const wrapper = document.createElement("div");
            wrapper.classList.add("message", fromUser ? "user" : "bot");
            const avatar = document.createElement("img");
            avatar.src = fromUser ? userLogo : chatGPTLogo;
            avatar.alt = fromUser ? "User" : "ChatGPT";
            avatar.classList.add("avatar");
            const bubble = document.createElement("div");
            if (isLoading) {
                bubble.classList.add("loading");
                bubble.innerHTML = `<div class="dots"><div class="dot"></div><div class="dot"></div><div class="dot"></div></div>`;
            } else {
                bubble.classList.add("bubble");
                bubble.innerHTML = parseMarkdown(message);
            }
            wrapper.appendChild(fromUser ? bubble : avatar);
            wrapper.appendChild(fromUser ? avatar : bubble);
            return wrapper;
        }

        async function fetchResponse(userMessage) {
            try {
                const response = await fetch("https://backend.buildpicoapps.com/aero/run/llm-api?pk=v1-Z0FBQUFBQm5IZkJDMlNyYUVUTjIyZVN3UWFNX3BFTU85SWpCM2NUMUk3T2dxejhLSzBhNWNMMXNzZlp3c09BSTR6YW1Sc1BmdGNTVk1GY0liT1RoWDZZX1lNZlZ0Z1dqd3c9PQ==", {
                    method: "POST",
                    headers: { "Content-Type": "application/json" },
                    body: JSON.stringify({ prompt: userMessage })
                });
                const data = await response.json();
                return data.status === "success" ? data.text : "Error in response.";
            } catch (error) { return "There was an error. Please try again later."; }
        }

        chatForm.addEventListener("submit", async (event) => {
            event.preventDefault();
            const userMessage = userInput.value.trim();
            if (!userMessage) return;
            chatContent.appendChild(createMessageElement(userMessage, true));
            userInput.value = "";
            const loadingMessage = createMessageElement("", false, true);
            chatContent.appendChild(loadingMessage);
            chatContent.scrollTop = chatContent.scrollHeight;
            const botResponse = await fetchResponse(userMessage);
            chatContent.removeChild(loadingMessage);
            chatContent.appendChild(createMessageElement(botResponse, false));
            chatContent.scrollTop = chatContent.scrollHeight;
        });

        window.addEventListener('load', () => {
            setTimeout(() => {
                chatContent.appendChild(createMessageElement("How can I help you today?", false));
                chatContent.scrollTop = chatContent.scrollHeight;
            }, 100);
        });
    </script>
</body>
</html>

សង្ឃឹមថាការចែករំលែកនេះមានប្រយោជន៍ដល់អ្នកទាំងអស់គ្នា។ ប្រសិនបើមានចម្ងល់អាចបញ្ចេញមតិខាងក្រោមបាន!

Written by Baysamnum Team

ChatAI

ចែករំលែកកូដ៖ បង្កើត ChatGPT Chat ដាក់ក្នុង Website ដោយឥតគិតថ្លៃ (HTML/JS)

លក្ខណៈពិសេសនៃកូដនេះ៖

កូដទាំងស្រុង (Full Source Code)

ការប្រកាសពេញនិយម

ប្រភេទ :

Hashtag ( ហាសធេក )

បណ្ណសារប្លុក

ចែករំលែកកូដ៖ បង្កើត ChatGPT Chat ដាក់ក្នុង Website ដោយឥតគិតថ្លៃ (HTML/JS)

លក្ខណៈពិសេសនៃកូដនេះ៖

កូដទាំងស្រុង (Full Source Code)

ការប្រកាសពេញនិយម

មេរៀននេះសង្ខេបចំណុចសំខាន់ៗអំពីវ៉ាឡង់

គន្លឹះត្រៀមប្រឡងយកពិន្ទុពេញ (100%) លើវិធីសាស្ត្រសរសេរតែងសេចក្តី

កំណែរូបវិទ្យានិងគីមីថ្នាក់ទី9

មេរៀន និង លំហាត់គីមីសម្រាប់ត្រៀមប្រឡង (Q & A ខ្លីៗ ងាយស្រួលទន្ទេញ)

សង្ខេបមេរៀនជីវវិទ្យា៖ កំណកោសិកា និងការបន្តពូជ

ការវិភាគស៊ីជម្រៅ៖ តុល្យភាពរវាងវិន័យសាលារៀន និងផលប៉ះពាល់នៃ “ហិង្សាដោយសម្ដី”

កំណែសិសធម៍និងគេហះថ្នាក់ទី9

ប្រភេទ :

Hashtag ( ហាសធេក )

បណ្ណសារប្លុក