Text

<h1 style="white-space:pre-line">CoreNetwork AI</h1>
<p class="normal" style="white-space:pre-line">พัฒนาศักภาพธุรกิจของคุณถึงขั้นสูงสุด<br />ด้วย CoreNetwork.</p>

Embed

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Core Network AI</title>
    
    <script src="https://cdn.tailwindcss.com"></script>
    
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
    <style>
        body {
            font-family: 'Inter', sans-serif;
            background-color: #0d1222; /* Dark blue background from the theme */
        }
        /* Custom scrollbar styling for a cleaner look */
        .chat-history::-webkit-scrollbar {
            width: 8px;
        }
        .chat-history::-webkit-scrollbar-track {
            background: #1e293b;
            border-radius: 10px;
        }
        .chat-history::-webkit-scrollbar-thumb {
            background: #475569;
            border-radius: 10px;
        }
        .chat-history::-webkit-scrollbar-thumb:hover {
            background: #64748b;
        }
        /* Hide the default spinner for textarea */
        textarea {
            -webkit-box-shadow: none;
            -moz-box-shadow: none;
            box-shadow: none;
        }
        /* Style for line breaks in chat messages */
        .message-content {
            white-space: pre-wrap;
        }
        .core-network-blue-color {
            color: #00a3e0;
        }
        .core-network-blue-bg {
            background-color: #00a3e0;
        }
    </style>
</head>
<body class="bg-[#0d1222] flex items-center justify-center min-h-screen p-4">

    
    <div class="bg-[#1a2333] rounded-3xl shadow-2xl w-full max-w-xl mx-auto flex flex-col h-[80vh] md:h-[70vh]">

        
        <div class="bg-[#1a2333] text-white p-6 rounded-t-3xl flex items-center justify-between border-b border-[#2d3a50]">
            <div class="flex items-center space-x-4">
                
                <svg viewBox="0 0 512 512" fill="currentColor" class="w-10 h-10 core-network-blue-color">
                    <path d="M256 0C114.6 0 0 114.6 0 256s114.6 256 256 256s256-114.6 256-256S397.4 0 256 0zm0 464c-114.9 0-208-93.1-208-208S141.1 48 256 48s208 93.1 208 208s-93.1 208-208 208z"/>
                    <path d="M168 144c-13.3 0-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24s-10.7-24-24-24zm176 0c-13.3 0-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24s-10.7-24-24-24z"/>
                    <path d="M256 320c-44.2 0-80-35.8-80-80c0-13.3-10.7-24-24-24s-24 10.7-24 24c0 70.6 57.4 128 128 128c13.3 0 24-10.7 24-24s-10.7-24-24-24z"/>
                    <path d="M368 288c-13.3 0-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24s-10.7-24-24-24z"/>
                    <path d="M144 288c-13.3 0-24 10.7-24 24s10.7 24 24 24s24-10.7 24-24s-10.7-24-24-24z"/>
                </svg>
                <h1 class="text-2xl font-semibold core-network-blue-color">Core Network AI</h1>
            </div>
            
            <div class="flex items-center space-x-2 text-sm text-gray-300">
                <span class="w-2.5 h-2.5 bg-green-400 rounded-full animate-pulse"></span>
                <span>ออนไลน์</span>
            </div>
        </div>

        
        <div id="chat-history" class="flex-grow p-6 overflow-y-auto space-y-4 chat-history">
            
        </div>

        
        <div class="p-4 border-t border-[#2d3a50] flex items-center space-x-4">
            <button id="clear-btn" class="core-network-blue-bg text-[#1a2333] p-4 rounded-full shadow-lg hover:bg-blue-700 transition-colors duration-200 transform hover:scale-105">
                
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
                    <polyline points="3 6 5 6 21 6"></polyline>
                    <path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path>
                    <line x1="10" y1="11" x2="10" y2="17"></line>
                    <line x1="14" y1="11" x2="14" y2="17"></line>
                </svg>
            </button>
            <textarea id="user-input" class="flex-grow resize-none p-4 rounded-full border border-gray-600 bg-[#2d3a50] text-gray-200 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-[#00a3e0] transition-all duration-200" rows="1" placeholder="พิมพ์ข้อความที่นี่..." oninput="autoResize(this)"></textarea>
            <button id="send-btn" class="core-network-blue-bg text-[#1a2333] p-4 rounded-full shadow-lg hover:bg-blue-700 transition-colors duration-200 transform hover:scale-105">
                
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="w-6 h-6">
                    <line x1="22" y1="2" x2="11" y2="13"></line>
                    <polygon points="22 2 15 22 11 13 2 9 22 2"></polygon>
                </svg>
            </button>
        </div>

    </div>

    
    <script>
        const chatHistoryElement = document.getElementById('chat-history');
        const userInput = document.getElementById('user-input');
        const sendBtn = document.getElementById('send-btn');
        const clearBtn = document.getElementById('clear-btn');

        // This array will store the full chat conversation for context
        let chatHistory = [];
        
        // Please replace this placeholder with your actual API URL.
        const GEMINI_API_URL = "https://generativelanguage.googleapis.com/v1beta/models/gemini-2.5-flash-preview-05-20:generateContent?key=";
        const API_KEY = ""; // Replace with your actual API key here.

        // Auto-resize the textarea based on content
        function autoResize(textarea) {
            textarea.style.height = 'auto';
            textarea.style.height = textarea.scrollHeight + 'px';
        }
        
        // Function to render all messages from the chatHistory array
        function renderChatHistory() {
            chatHistoryElement.innerHTML = ''; // Clear the entire chat display
            chatHistory.forEach(msg => {
                const messageWrapper = document.createElement('div');
                messageWrapper.classList.add('flex', 'p-2');

                const messageBubble = document.createElement('div');
                messageBubble.classList.add('p-4', 'rounded-3xl', 'shadow-md', 'max-w-[85%]', 'message-content');
                // Use innerHTML to render line breaks correctly
                messageBubble.innerHTML = msg.parts[0].text.replace(/\n/g, '<br>');

                if (msg.role === 'user') {
                    messageWrapper.classList.add('justify-end');
                    messageBubble.classList.add('bg-blue-500', 'text-white', 'rounded-br-none');
                } else {
                    messageWrapper.classList.add('justify-start');
                    messageBubble.classList.add('bg-[#2d3a50]', 'text-gray-200', 'rounded-bl-none');
                }

                messageWrapper.appendChild(messageBubble);
                chatHistoryElement.appendChild(messageWrapper);
            });
            // Auto-scroll to the latest message
            chatHistoryElement.scrollTop = chatHistoryElement.scrollHeight;
        }

        // Function to create and append the initial AI message
        function createInitialMessage() {
            const initialMessage = {
                role: "model",
                parts: [{ text: "สวัสดีค่ะพี่ต้น ซีคือ Core Network AI ค่ะ ซีพร้อมที่จะช่วยเหลือพี่ในเรื่อง Core AI ที่เป็นทั้ง AI Agent และ AI Automation ค่ะ มีอะไรให้ซีช่วยได้บ้างคะ?" }]
            };
            chatHistory.push(initialMessage);
            renderChatHistory();
        }

        // Call this function when the page loads
        document.addEventListener('DOMContentLoaded', () => {
            createInitialMessage();
        });

        // Function to add a typing indicator
        function appendTypingIndicator() {
            const indicatorWrapper = document.createElement('div');
            indicatorWrapper.id = 'typing-indicator';
            indicatorWrapper.classList.add('flex', 'justify-start', 'items-center', 'p-2');

            const typingDots = `
                <div class="flex space-x-1 p-4 bg-[#2d3a50] rounded-3xl rounded-bl-none shadow-md">
                    <span class="w-2 h-2 bg-gray-400 rounded-full animate-[bounce_1.4s_infinite_0s_running]"></span>
                    <span class="w-2 h-2 bg-gray-400 rounded-full animate-[bounce_1.4s_infinite_0.2s_running]"></span>
                    <span class="w-2 h-2 bg-gray-400 rounded-full animate-[bounce_1.4s_infinite_0.4s_running]"></span>
                </div>
            `;
            indicatorWrapper.innerHTML = typingDots;
            chatHistoryElement.appendChild(indicatorWrapper);
            chatHistoryElement.scrollTop = chatHistoryElement.scrollHeight;
        }

        // Function to remove the typing indicator
        function removeTypingIndicator() {
            const indicator = document.getElementById('typing-indicator');
            if (indicator) {
                indicator.remove();
            }
        }
        
        // Asynchronous function to call the Gemini API with exponential backoff
        async function fetchWithRetry(url, options, retries = 3) {
            for (let i = 0; i < retries; i++) {
                try {
                    const response = await fetch(url, options);
                    if (response.ok) {
                        return await response.json();
                    }
                    if (response.status === 429) { // Too Many Requests
                        const delay = Math.pow(2, i) * 1000 + Math.random() * 1000;
                        await new Promise(res => setTimeout(res, delay));
                        continue; // Retry
                    } else {
                        throw new Error(`API error: ${response.status}`);
                    }
                } catch (error) {
                    if (i === retries - 1) {
                        throw error;
                    }
                }
            }
        }

        // Main function to handle sending a message and getting a response
        async function sendMessage() {
            const message = userInput.value.trim();
            if (message === '') return;

            // Add the user's message to our chat history
            chatHistory.push({ role: "user", parts: [{ text: message }] });

            // Clear input and reset its size
            userInput.value = '';
            autoResize(userInput);
            
            // Re-render the chat UI with the new user message
            renderChatHistory();
            appendTypingIndicator(); // Show typing indicator while waiting for AI

            try {
                // Prepare the payload for the API
                const payload = {
                    contents: chatHistory,
                    generationConfig: {
                        temperature: 0.9,
                        topK: 1,
                        topP: 1,
                        maxOutputTokens: 2048,
                        stopSequences: []
                    },
                    safetySettings: [
                        {
                            category: "HARM_CATEGORY_HARASSMENT",
                            threshold: "BLOCK_MEDIUM_AND_ABOVE"
                        },
                        {
                            category: "HARM_CATEGORY_HATE_SPEECH",
                            threshold: "BLOCK_MEDIUM_AND_ABOVE"
                        },
                        {
                            category: "HARM_CATEGORY_SEXUALLY_EXPLICIT",
                            threshold: "BLOCK_MEDIUM_AND_ABOVE"
                        },
                        {
                            category: "HARM_CATEGORY_DANGEROUS_CONTENT",
                            threshold: "BLOCK_MEDIUM_AND_ABOVE"
                        }
                    ]
                };
                
                if (!API_KEY) {
                    throw new Error("API_KEY is not set. Please add your Gemini API key to the code.");
                }

                const apiUrl = `${GEMINI_API_URL}${API_KEY}`;

                const result = await fetchWithRetry(apiUrl, {
                    method: 'POST',
                    headers: { 'Content-Type': 'application/json' },
                    body: JSON.stringify(payload)
                });
                
                // Get the AI's response text
                const aiResponse = result?.candidates?.[0]?.content?.parts?.[0]?.text || "ขออภัยค่ะ ไม่สามารถประมวลผลคำขอได้ในขณะนี้";

                // Add the AI's message to the chat history
                chatHistory.push({ role: "model", parts: [{ text: aiResponse }] });
            } catch (error) {
                console.error("Failed to fetch response from API:", error);
                chatHistory.push({ role: "model", parts: [{ text: "เกิดข้อผิดพลาดในการเชื่อมต่อ กรุณาลองใหม่อีกครั้งค่ะ" }] });
            } finally {
                removeTypingIndicator();
                renderChatHistory();
                userInput.focus(); // Keep focus on the input box
            }
        }

        // Function to clear all messages from the chat history
        function clearChat() {
            chatHistory = [];
            createInitialMessage();
            userInput.focus();
        }

        // Event listeners for sending messages
        sendBtn.addEventListener('click', sendMessage);
        userInput.addEventListener('keypress', (e) => {
            if (e.key === 'Enter' && !e.shiftKey) {
                e.preventDefault(); // Prevent new line
                sendMessage();
            }
        });

        // Event listener for the clear button
        clearBtn.addEventListener('click', clearChat);
    </script>
</body>
</html>

Call to action

พัฒนาและขยายองค์กรให้เติบโตด้วยระบบ AI ของ CoreNetwork

CoreNetwork AI

Core Network AI

ยกระดับธุรกิจ