Spaces:

poemsforaphrodite
/

bot

Sleeping

App Files Files Community

poemsforaphrodite commited on Jan 16, 2025

Commit

a72e660

verified ·

1 Parent(s): 2b0379e

Update index.html

Browse files

Files changed (1) hide show

index.html +193 -58

index.html CHANGED Viewed

@@ -3,52 +3,128 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Bot Testing Interface</title>
-    <script src="https://cdn.tailwindcss.com"></script>
 </head>
-<body class="bg-gray-100 min-h-screen p-8">
-    <div class="max-w-4xl mx-auto">
-        <h1 class="text-3xl font-bold mb-8 text-center">Bot Testing Interface</h1>
-        <!-- Upload Section -->
-        <div class="bg-white rounded-lg shadow-md p-6 mb-8">
-            <h2 class="text-xl font-semibold mb-4">1. Create Bot</h2>
-            <form id="uploadForm" class="space-y-4">
-                <div class="border-2 border-dashed border-gray-300 rounded-lg p-4">
-                    <input type="file" id="files" multiple class="w-full">
-                </div>
-                <button type="submit" class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600">
-                    Upload Documents
-                </button>
-            </form>
-            <div id="botId" class="mt-4 text-green-600 font-medium"></div>
         </div>
-        <!-- Query Section -->
-        <div class="bg-white rounded-lg shadow-md p-6">
-            <h2 class="text-xl font-semibold mb-4">2. Query Bot</h2>
-            <form id="queryForm" class="space-y-4">
-                <input type="text" id="queryBotId" placeholder="Enter Bot ID"
-                    class="w-full p-2 border rounded">
-                <textarea id="query" placeholder="Enter your question"
-                    class="w-full p-2 border rounded h-24"></textarea>
-                <button type="submit" class="bg-green-500 text-white px-4 py-2 rounded hover:bg-green-600">
-                    Send Query
-                </button>
-            </form>
-            <div id="response" class="mt-4 p-4 bg-gray-50 rounded-lg hidden">
-                <h3 class="font-semibold mb-2">Response:</h3>
-                <p id="responseText" class="whitespace-pre-wrap"></p>
-            </div>
         </div>
     </div>
     <script>
-        document.getElementById('uploadForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const formData = new FormData();
             const files = document.getElementById('files').files;
             for (let file of files) {
                 formData.append('files', file);
             }
@@ -58,36 +134,95 @@
                     method: 'POST',
                     body: formData
                 });
                 const data = await response.json();
-                document.getElementById('botId').textContent = `Bot ID: ${data.botid}`;
-                document.getElementById('queryBotId').value = data.botid;
             } catch (error) {
                 console.error('Error:', error);
-                alert('Error uploading files');
             }
-        });
-        document.getElementById('queryForm').addEventListener('submit', async (e) => {
-            e.preventDefault();
-            const formData = new FormData();
-            formData.append('botid', document.getElementById('queryBotId').value);
-            formData.append('query', document.getElementById('query').value);
             try {
-                const response = await fetch('/query', {
-                    method: 'POST',
-                    body: formData
-                });
                 const data = await response.json();
-                const responseDiv = document.getElementById('response');
-                const responseText = document.getElementById('responseText');
-                responseDiv.classList.remove('hidden');
-                responseText.textContent = data.response;
             } catch (error) {
-                console.error('Error:', error);
-                alert('Error sending query');
             }
-        });
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>SmartlyQ Chatbot Demo</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            max-width: 800px;
+            margin: 0 auto;
+            padding: 20px;
+        }
+        .demo-section {
+            margin: 40px 0;
+            padding: 20px;
+            border: 1px solid #ddd;
+            border-radius: 8px;
+            background: white;
+        }
+        pre {
+            background: #f5f5f5;
+            padding: 15px;
+            border-radius: 4px;
+            overflow-x: auto;
+        }
+        .upload-area {
+            border: 2px dashed #ddd;
+            padding: 20px;
+            text-align: center;
+            margin: 20px 0;
+            border-radius: 8px;
+        }
+        button {
+            background: #007bff;
+            color: white;
+            border: none;
+            padding: 8px 16px;
+            border-radius: 4px;
+            cursor: pointer;
+            margin: 5px;
+        }
+        button:hover {
+            background: #0056b3;
+        }
+        input[type="text"] {
+            padding: 8px;
+            border: 1px solid #ddd;
+            border-radius: 4px;
+            margin: 5px;
+        }
+        .success-message {
+            color: #28a745;
+            margin: 10px 0;
+            font-weight: bold;
+        }
+        .error-message {
+            color: #dc3545;
+            margin: 10px 0;
+            font-weight: bold;
+        }
+        #demo-container {
+            margin-top: 20px;
+        }
+        .bot-link {
+            display: block;
+            margin: 10px 0;
+            color: #007bff;
+            text-decoration: none;
+        }
+        .bot-link:hover {
+            text-decoration: underline;
+        }
+        .copy-button {
+            background: #6c757d;
+            font-size: 0.9em;
+        }
+        .copy-button:hover {
+            background: #5a6268;
+        }
+    </style>
 </head>
+<body>
+    <h1>SmartlyQ Chatbot Demo</h1>
+    <div class="demo-section">
+        <h2>1. Create New Bot</h2>
+        <p>Upload your documents (PDFs, text files) to create a new bot:</p>
+        <div class="upload-area">
+            <input type="file" id="files" multiple>
         </div>
+        <button onclick="uploadDocuments()">Create Bot</button>
+        <div id="upload-result" class="success-message"></div>
+    </div>
+    <div class="demo-section">
+        <h2>2. Test Your Bot</h2>
+        <p>Enter your botid below to test the chatbot:</p>
+        <div style="margin-bottom: 20px;">
+            <input type="text" id="botid-input" placeholder="Enter your botid">
+            <button onclick="loadChatbot()">Load Chatbot</button>
+            <button onclick="openBotPage()" class="copy-button">Open Bot Page</button>
         </div>
+        <div id="bot-link"></div>
+        <div id="demo-container"></div>
+    </div>
+    <div class="demo-section">
+        <h2>3. Embed Code</h2>
+        <p>To embed this chatbot on your website, add the following code to your HTML:</p>
+        <pre id="embed-code">
+<!-- Add your botid to see the embed code -->
+        </pre>
     </div>
     <script>
+        // Keep track of current bot ID
+        let currentBotId = null;
+        async function uploadDocuments() {
             const files = document.getElementById('files').files;
+            if (files.length === 0) {
+                alert('Please select at least one file');
+                return;
+            }
+            const formData = new FormData();
             for (let file of files) {
                 formData.append('files', file);
             }
                     method: 'POST',
                     body: formData
                 });
+                if (!response.ok) {
+                    throw new Error('Upload failed');
+                }
                 const data = await response.json();
+                const uploadResult = document.getElementById('upload-result');
+                uploadResult.textContent = `Success! Your Bot ID: ${data.botid}`;
+                uploadResult.className = 'success-message';
+                // Automatically fill the test bot ID
+                document.getElementById('botid-input').value = data.botid;
+                currentBotId = data.botid;
+                // Update embed code and bot link
+                updateEmbedCode(data.botid);
+                updateBotLink(data.botid);
             } catch (error) {
                 console.error('Error:', error);
+                const uploadResult = document.getElementById('upload-result');
+                uploadResult.textContent = 'Error uploading files. Please try again.';
+                uploadResult.className = 'error-message';
             }
+        }
+        function loadChatbot() {
+            const botid = document.getElementById('botid-input').value.trim();
+            if (!botid) {
+                alert('Please enter a botid');
+                return;
+            }
+            currentBotId = botid;
+            // Update embed code and bot link
+            updateEmbedCode(botid);
+            updateBotLink(botid);
+            // Clear previous chatbot if exists
+            const container = document.getElementById('demo-container');
+            container.innerHTML = '';
+            // Create new container for this instance
+            const chatbotContainer = document.createElement('div');
+            chatbotContainer.id = 'smartlyq-chatbot-container';
+            container.appendChild(chatbotContainer);
+            // Create and append script
+            const script = document.createElement('script');
+            script.src = `/static/chatbot.js?botid=${botid}`;
+            container.appendChild(script);
+        }
+        function updateBotLink(botid) {
+            const botLink = document.getElementById('bot-link');
+            const botUrl = `${window.location.origin}/bot.html?botid=${botid}`;
+            botLink.innerHTML = `
+                <p>Direct bot link:</p>
+                <a href="${botUrl}" target="_blank" class="bot-link">${botUrl}</a>
+                <button onclick="copyToClipboard('${botUrl}')" class="copy-button">Copy Link</button>
+            `;
+        }
+        function openBotPage() {
+            const botid = document.getElementById('botid-input').value.trim();
+            if (!botid) {
+                alert('Please enter a botid');
+                return;
+            }
+            window.open(`/bot.html?botid=${botid}`, '_blank');
+        }
+        function copyToClipboard(text) {
+            navigator.clipboard.writeText(text).then(() => {
+                alert('Link copied to clipboard!');
+            }).catch(err => {
+                console.error('Failed to copy:', err);
+            });
+        }
+        async function updateEmbedCode(botid) {
             try {
+                const response = await fetch(`/embed-code?botid=${botid}`);
                 const data = await response.json();
+                document.getElementById('embed-code').textContent = data.embed_code;
             } catch (error) {
+                console.error('Error fetching embed code:', error);
             }
+        }
     </script>
 </body>
 </html>