Text

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

Embed

<!DOCTYPE html>
<html lang="th">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>AVI Global 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: #111827; /* Very dark gray for a luxurious feel */
        }
        /* Custom scrollbar styling for a cleaner look */
        .chat-history::-webkit-scrollbar {
            width: 8px;
        }
        .chat-history::-webkit-scrollbar-track {
            background: #1f2937;
            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;
        }
        .green-color {
            color: #4a9333;
        }
        .green-bg {
            background-color: #4a9333;
        }
    </style>
</head>
<body class="bg-[#111827] flex items-center justify-center min-h-screen p-4">

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

        
        <div class="bg-[#1f2937] text-white p-6 rounded-t-3xl flex items-center justify-between border-b border-[#374151]">
            <div class="flex items-center space-x-4">
                
                <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="currentColor" class="w-8 h-8 green-color">
                    <path d="M17.3 19.3c.7-.7 1.2-1.6 1.4-2.6.2-1.1-.1-2.1-.7-3.1-.6-1-1.6-1.7-2.7-2-.7-.2-1.4-.3-2-.3-1.6 0-3.3.6-5 1.8-.7.5-1.4 1.1-2 1.8L4.7 15.3l-.2-.2c-1.3-1.3-1.3-3.4 0-4.7L12 3.1l1.5 1.5-7.8 7.8c-.3.3-.3.7 0 1 .3.3.7.3 1 0l7.8-7.8 1.5 1.5-1.3 1.3c-.6.6-1.1 1.2-1.5 1.8l-.5.5c-.3.3-.7.3-1 0-.3-.3-.3-.7 0-1l.8-.8c.4-.4.8-.8 1.3-1.2l-1.3-1.3L12 4.5l-7.8 7.8c-1.3 1.3-1.3 3.4 0 4.7l1.5 1.5 7.8-7.8c.3-.3.7-.3 1 0 .3.3.3.7 0 1l-7.8 7.8-1.5-1.5c.3.3.6.6 1 .9l.2.2c.7.7 1.6 1.2 2.6 1.4 1.1.2 2.1-.1 3.1-.7 1-.6 1.7-1.6 2-2.7.2-.7.3-1.4.3-2 0-1.6-.6-3.3-1.8-5l-.5-.5c-.3-.3-.7-.3-1 0-.3.3-.3.7 0 1l.5.5c1.2 1.7 1.8 3.4 1.8 5 0 .7-.1 1.4-.3 2.1-.2 1.1-.7 2-1.4 2.7l-.2.2z"/>
                </svg>
                <h1 class="text-2xl font-semibold green-color">AVI Global 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-[#374151] flex items-center space-x-4">
            <button id="clear-btn" class="green-bg text-gray-900 p-4 rounded-full shadow-lg hover:bg-green-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-[#374151] text-gray-200 placeholder:text-gray-400 focus:outline-none focus:ring-2 focus:ring-green-400 transition-all duration-200" rows="1" placeholder="พิมพ์ข้อความที่นี่..." oninput="autoResize(this)"></textarea>
            <button id="send-btn" class="green-bg text-gray-900 p-4 rounded-full shadow-lg hover:bg-green-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-pro: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-green-600', 'text-gray-900', 'rounded-br-none');
                } else {
                    messageWrapper.classList.add('justify-start');
                    messageBubble.classList.add('bg-[#374151]', '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: "สวัสดีค่ะพี่ต้น ซีคือ AVI Global AI ค่ะ ซีพร้อมที่จะช่วยเหลือและเป็นผู้ช่วยสำหรับนักธุรกิจเครือข่ายของ AVI Global ค่ะ\n\nมีอะไรให้ซีช่วยได้บ้างคะ?" }]
            };
            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-[#374151] 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

AVI Global AI TEST

AVI Global AI

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