Spaces:

Ikyy
/

ai

Running

File size: 7,847 Bytes

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>AI Chatbot</title>
    <style>
        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        body {
            font-family: 'Arial', sans-serif;
            background-color: #f0f0f0;
            height: 100vh;
            display: flex;
            flex-direction: column;
        }

        #chat-container {
            flex-grow: 1;
            display: flex;
            flex-direction: column;
            max-width: 600px;
            width: 100%;
            margin: 0 auto;
            background-color: white;
            box-shadow: 0 0 10px rgba(0,0,0,0.1);
        }

        #chat-messages {
            flex-grow: 1;
            overflow-y: auto;
            padding: 15px;
            display: flex;
            flex-direction: column;
        }

        .message {
            max-width: 80%;
            margin: 5px 0;
            padding: 10px;
            border-radius: 10px;
            clear: both;
            word-wrap: break-word;
            line-height: 1.4;
        }

        .user-message {
            background-color: #007bff;
            color: white;
            align-self: flex-end;
            margin-left: auto;
        }

        .bot-message {
             background-color: #e9ecef;
            color: black;
            align-self: flex-start;
        }

        .bot-message strong {
            color: #007bff;
        }

        #input-container {
            display: flex;
            padding: 10px;
            background-color: white;
            border-top: 1px solid #e0e0e0;
        }

        #user-input {
            flex-grow: 1;
            padding: 10px;
            border: 1px solid #ddd;
            border-radius: 20px;
            margin-right: 10px;
            outline: none;
        }

        #send-btn {
            background-color: #007bff;
            color: white;
            border: none;
            border-radius: 50%;
            width: 40px;
            height: 40px;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
        }

        /* Typing Indicator */
        .typing-indicator {
            display: flex;
            align-items: center;
            background-color: #e9ecef;
            padding: 10px;
            border-radius: 10px;
            align-self: flex-start;
            margin-bottom: 10px;
        }

        .typing-indicator span {
            height: 8px;
            width: 8px;
            background-color: #888;
            border-radius: 50%;
            margin: 0 3px;
            animation: typing 1.4s infinite;
        }

        .typing-indicator span:nth-child(2) {
            animation-delay: 0.2s;
        }

        .typing-indicator span:nth-child(3) {
            animation-delay: 0.4s;
        }

        @keyframes typing {
            0%, 100% { opacity: 0.4; }
            50% { opacity: 1; }
        }

        @media (max-width: 600px) {
            body {
                margin: 0;
            }

            #chat-container {
                width: 100%;
                height: 100vh;
                max-width: none;
            }

            #input-container {
                padding: 10px;
            }
        }
    </style>
</head>
<body>
    <div id="chat-container">
        <div id="chat-messages"></div>
        <div id="input-container">
            <input type="text" id="user-input" placeholder="Ketik pesan...">
            <button id="send-btn">➤</button>
        </div>
    </div>

    <script>
        const chatMessages = document.getElementById('chat-messages');
        const userInput = document.getElementById('user-input');
        const sendBtn = document.getElementById('send-btn');

        // Fungsi untuk menambahkan pesan ke chat
        function addMessage(message, type, isHTML = false) {
            // Hapus indikator typing jika ada
            removeTypingIndicator();

            const messageElement = document.createElement('div');
            messageElement.classList.add('message', type);
            
            if (isHTML) {
                messageElement.innerHTML = message;
            } else {
                messageElement.textContent = message;
            }

            chatMessages.appendChild(messageElement);
            scrollToBottom();
        }

        // Fungsi untuk menambahkan indikator typing
        function addTypingIndicator() {
            // Hapus indikator typing sebelumnya jika ada
            removeTypingIndicator();

            const typingIndicator = document.createElement('div');
            typingIndicator.classList.add('typing-indicator');
            typingIndicator.innerHTML = `
                <span></span>
                <span></span>
                <span></span>
            `;
            chatMessages.appendChild(typingIndicator);
            scrollToBottom();
        }

        // Fungsi untuk menghapus indikator typing
        function removeTypingIndicator() {
            const existingIndicator = document.querySelector('.typing-indicator');
            if (existingIndicator) {
                existingIndicator.remove();
            }
        }

        // Fungsi untuk scroll ke bawah
        function scrollToBottom() {
            chatMessages.scrollTop = chatMessages.scrollHeight;
        }

        // Fungsi untuk memformat jawaban
        function formatAnswer(answer) {
            // Mengganti markdown bold dengan teks tebal
            return answer.replace(/\*\*(.*?)\*\*/g, '<strong>$1</strong>');
        }

        // Fungsi untuk mengirim pesan
        async function sendMessage() {
            const message = userInput.value.trim();
            if (message === '') return;

            // Tambahkan pesan pengguna
            addMessage(message, 'user-message');
            userInput.value = '';

            // Tampilkan indikator typing
            addTypingIndicator();

            try {
                // Panggil API 
                function generateRandomNumberString(length) {
  let result = '';
  const characters = '0123456789';
  const charactersLength = characters.length;
  for (let i = 0; i < length; i++) {
    result += characters.charAt(Math.floor(Math.random() * charactersLength));
  }
  return result;
}
                const response = await fetch(`https://btch.us.kg/prompt/gpt?text=${encodeURIComponent(message)}&prompt=${encodeURIComponent("gunakan bahasa indonesia dalam merespon dan jawab langsung ke intinya, tidak perlu bertele-tele atau terlalu banyak basa-basi")}&id=${generateRandomNumberString(5)}&apiKey=yanzdev`);
                const data = await response.json();

                // Cek apakah respons valid
                if (data.result) {
                    // Tambahkan respons bot dengan format yang lebih baik
                    const formattedAnswer = formatAnswer(data.result);
                    addMessage(formattedAnswer, 'bot-message', true);
                } else {
                    addMessage('Maaf, saya tidak dapat memproses permintaan Anda.', 'bot-message');
                }
            } catch (error) {
                console.error('Error:', error);
                addMessage('Terjadi kesalahan saat mengambil respons.', 'bot-message');
            }
        }

        // Event listener untuk tombol kirim
        sendBtn.addEventListener('click', sendMessage);

        // Event listener untuk enter key
        userInput.addEventListener('keypress', (event) => {
            if (event.key === 'Enter') {
                sendMessage();
            }
        });
    </script>
</body>
</html>