Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <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); | |
| } | |
| try { | |
| const response = await fetch('/upload-documents', { | |
| 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> |