Spaces:

Ikyy
/

ai

Running

App Files Files Community

Ikyy commited on Nov 29, 2024

Commit

3860210

verified ·

1 Parent(s): b878a5b

Upload index.html

Browse files

Files changed (1) hide show

index.html +310 -19

index.html CHANGED Viewed

@@ -1,19 +1,310 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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; }
+        }
+        .suggested-questions {
+            margin-top: 10px;
+        }
+        .suggested-question-btn {
+            display: block;
+            margin: 5px 0;
+            padding: 5px 10px;
+            background-color: #f0f0f0;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+            transition: background-color 0.3s ease;
+            text-align: left;
+            width: 100%;
+        }
+        .suggested-question-btn:hover {
+            background-color: #e0e0e0;
+        }
+        @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 menambahkan pertanyaan tambahan
+        function addSuggestedQuestions(questions) {
+            const suggestedQuestionsContainer = document.createElement('div');
+            suggestedQuestionsContainer.classList.add('suggested-questions');
+            const title = document.createElement('div');
+            title.textContent = 'Pertanyaan yang mungkin Anda minati:';
+            title.style.fontWeight = 'bold';
+            title.style.marginTop = '10px';
+            suggestedQuestionsContainer.appendChild(title);
+            questions.forEach(q => {
+                const questionButton = document.createElement('button');
+                questionButton.textContent = q.question;
+                questionButton.classList.add('suggested-question-btn');
+                questionButton.addEventListener('click', () => {
+                    userInput.value = q.question;
+                    sendMessage();
+                });
+                suggestedQuestionsContainer.appendChild(questionButton);
+            });
+            chatMessages.appendChild(suggestedQuestionsContainer);
+            scrollToBottom();
+        }
+        // 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
+                const response = await fetch(`https://api.yanzbotz.live/api/ai/ai-search?query=${encodeURIComponent(message)}&apiKey=yanzdev`);
+                const data = await response.json();
+                // Cek apakah respons valid
+                if (data.result && data.result.answer) {
+                    // Tambahkan respons bot dengan format yang lebih baik
+                    const formattedAnswer = formatAnswer(data.result.answer);
+                    addMessage(formattedAnswer, 'bot-message', true);
+                    // Tambahan fitur: menampilkan pertanyaan tambahan
+                    if (data.result.questions && data.result.questions.length > 0) {
+                        addSuggestedQuestions(data.result.questions);
+                    }
+                } 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>