Spaces:
Sleeping
Sleeping
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>{% block title %}PickLLM - Find Your Perfect LLM{% endblock %}</title> | |
| <!-- Bootstrap CSS --> | |
| <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"> | |
| <!-- Custom CSS --> | |
| <style> | |
| :root { | |
| --primary-color: #f59e0b; | |
| --secondary-color: #d97706; | |
| --accent-color: #fbbf24; | |
| --light-bg: #ffffff; | |
| --secondary-bg: #fef3c7; | |
| --text-dark: #1f2937; | |
| --text-secondary: #374151; | |
| } | |
| body { | |
| font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; | |
| background: linear-gradient(135deg, var(--light-bg) 0%, var(--secondary-bg) 100%); | |
| color: var(--text-dark); | |
| min-height: 100vh; | |
| } | |
| .navbar-brand { | |
| font-weight: 700; | |
| font-size: 1.5rem; | |
| color: var(--text-dark) ; | |
| } | |
| .btn-primary-custom { | |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); | |
| border: none; | |
| padding: 12px 32px; | |
| font-weight: 600; | |
| border-radius: 8px; | |
| transition: all 0.3s ease; | |
| color: white; | |
| } | |
| .btn-primary-custom:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 10px 25px rgba(245, 158, 11, 0.4); | |
| color: white; | |
| } | |
| .gradient-text { | |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); | |
| -webkit-background-clip: text; | |
| -webkit-text-fill-color: transparent; | |
| background-clip: text; | |
| } | |
| .navbar { | |
| background-color: rgba(255, 255, 255, 0.95) ; | |
| backdrop-filter: blur(10px); | |
| border-bottom: 1px solid rgba(245, 158, 11, 0.2); | |
| } | |
| /* Chatbot Widget Styles */ | |
| .chatbot-widget { | |
| position: fixed; | |
| bottom: 20px; | |
| right: 20px; | |
| z-index: 1000; | |
| } | |
| .chatbot-toggle { | |
| width: 60px; | |
| height: 60px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); | |
| border: none; | |
| box-shadow: 0 4px 12px rgba(245, 158, 11, 0.4); | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 24px; | |
| transition: all 0.3s ease; | |
| } | |
| .chatbot-toggle:hover { | |
| transform: scale(1.1); | |
| box-shadow: 0 6px 20px rgba(245, 158, 11, 0.5); | |
| } | |
| .chatbot-window { | |
| position: absolute; | |
| bottom: 80px; | |
| right: 0; | |
| width: 380px; | |
| max-width: calc(100vw - 40px); | |
| height: 500px; | |
| background: white; | |
| border-radius: 16px; | |
| box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15); | |
| display: none; | |
| flex-direction: column; | |
| overflow: hidden; | |
| } | |
| .chatbot-window.active { | |
| display: flex; | |
| } | |
| .chatbot-header { | |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); | |
| color: white; | |
| padding: 16px; | |
| font-weight: 600; | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| } | |
| .chatbot-close { | |
| background: none; | |
| border: none; | |
| color: white; | |
| font-size: 24px; | |
| cursor: pointer; | |
| padding: 0; | |
| width: 30px; | |
| height: 30px; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| } | |
| .chatbot-messages { | |
| flex: 1; | |
| overflow-y: auto; | |
| padding: 16px; | |
| display: flex; | |
| flex-direction: column; | |
| gap: 12px; | |
| } | |
| .chatbot-message { | |
| max-width: 80%; | |
| padding: 10px 14px; | |
| border-radius: 12px; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| } | |
| .chatbot-message.user { | |
| background: var(--accent-color); | |
| align-self: flex-end; | |
| margin-left: auto; | |
| } | |
| .chatbot-message.bot { | |
| background: #f3f4f6; | |
| align-self: flex-start; | |
| } | |
| .chatbot-message.typing { | |
| background: #f3f4f6; | |
| align-self: flex-start; | |
| font-style: italic; | |
| color: #6b7280; | |
| } | |
| .chatbot-input-area { | |
| padding: 16px; | |
| border-top: 1px solid #e5e7eb; | |
| display: flex; | |
| gap: 8px; | |
| } | |
| .chatbot-input { | |
| flex: 1; | |
| border: 1px solid #e5e7eb; | |
| border-radius: 20px; | |
| padding: 10px 16px; | |
| font-size: 14px; | |
| outline: none; | |
| } | |
| .chatbot-input:focus { | |
| border-color: var(--primary-color); | |
| } | |
| .chatbot-send { | |
| background: linear-gradient(135deg, var(--primary-color) 0%, var(--secondary-color) 100%); | |
| border: none; | |
| color: white; | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| cursor: pointer; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| transition: all 0.2s ease; | |
| } | |
| .chatbot-send:hover:not(:disabled) { | |
| transform: scale(1.05); | |
| } | |
| .chatbot-send:disabled { | |
| opacity: 0.5; | |
| cursor: not-allowed; | |
| } | |
| @media (max-width: 768px) { | |
| .chatbot-window { | |
| width: calc(100vw - 40px); | |
| height: 70vh; | |
| } | |
| } | |
| </style> | |
| {% block head %}{% endblock %} | |
| </head> | |
| <body> | |
| <!-- Navigation --> | |
| <nav class="navbar navbar-expand-lg navbar-dark"> | |
| <div class="container"> | |
| <a class="navbar-brand" href="/"> | |
| 🎯 <span class="gradient-text">PickLLM</span> | |
| </a> | |
| </div> | |
| </nav> | |
| <!-- Main Content --> | |
| <main> | |
| {% block content %}{% endblock %} | |
| </main> | |
| <!-- Chatbot Widget --> | |
| {% block chatbot %} | |
| <div class="chatbot-widget"> | |
| <button class="chatbot-toggle" id="chatbotToggle" aria-label="Open chatbot"> | |
| 💬 | |
| </button> | |
| <div class="chatbot-window" id="chatbotWindow"> | |
| <div class="chatbot-header"> | |
| <span>Ask PickLLM</span> | |
| <button class="chatbot-close" id="chatbotClose" aria-label="Close chatbot">×</button> | |
| </div> | |
| <div class="chatbot-messages" id="chatbotMessages"> | |
| <div class="chatbot-message bot"> | |
| Hi! I'm here to help answer questions about PickLLM. Ask me anything! | |
| </div> | |
| </div> | |
| <div class="chatbot-input-area"> | |
| <input | |
| type="text" | |
| class="chatbot-input" | |
| id="chatbotInput" | |
| placeholder="Type your question..." | |
| autocomplete="off" | |
| > | |
| <button class="chatbot-send" id="chatbotSend" aria-label="Send message"> | |
| ➤ | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| // Chatbot functionality | |
| const chatbotToggle = document.getElementById('chatbotToggle'); | |
| const chatbotClose = document.getElementById('chatbotClose'); | |
| const chatbotWindow = document.getElementById('chatbotWindow'); | |
| const chatbotMessages = document.getElementById('chatbotMessages'); | |
| const chatbotInput = document.getElementById('chatbotInput'); | |
| const chatbotSend = document.getElementById('chatbotSend'); | |
| // Toggle chatbot window | |
| chatbotToggle.addEventListener('click', () => { | |
| chatbotWindow.classList.add('active'); | |
| chatbotInput.focus(); | |
| }); | |
| chatbotClose.addEventListener('click', () => { | |
| chatbotWindow.classList.remove('active'); | |
| }); | |
| // Add message to chat | |
| function addMessage(text, isUser = false) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `chatbot-message ${isUser ? 'user' : 'bot'}`; | |
| messageDiv.textContent = text; | |
| chatbotMessages.appendChild(messageDiv); | |
| chatbotMessages.scrollTop = chatbotMessages.scrollHeight; | |
| } | |
| // Show typing indicator | |
| function showTyping() { | |
| const typingDiv = document.createElement('div'); | |
| typingDiv.className = 'chatbot-message typing'; | |
| typingDiv.id = 'typingIndicator'; | |
| typingDiv.textContent = 'Thinking...'; | |
| chatbotMessages.appendChild(typingDiv); | |
| chatbotMessages.scrollTop = chatbotMessages.scrollHeight; | |
| } | |
| // Remove typing indicator | |
| function removeTyping() { | |
| const typingIndicator = document.getElementById('typingIndicator'); | |
| if (typingIndicator) { | |
| typingIndicator.remove(); | |
| } | |
| } | |
| // Send message | |
| async function sendMessage() { | |
| const message = chatbotInput.value.trim(); | |
| if (!message) return; | |
| // Disable input while processing | |
| chatbotInput.disabled = true; | |
| chatbotSend.disabled = true; | |
| // Add user message | |
| addMessage(message, true); | |
| chatbotInput.value = ''; | |
| // Show typing indicator | |
| showTyping(); | |
| try { | |
| const response = await fetch('/api/chat', { | |
| method: 'POST', | |
| headers: { | |
| 'Content-Type': 'application/json', | |
| }, | |
| body: JSON.stringify({ message: message }), | |
| signal: AbortSignal.timeout(60000) // 60 second timeout | |
| }); | |
| const data = await response.json(); | |
| removeTyping(); | |
| if (data.status === 'success' && data.response) { | |
| addMessage(data.response); | |
| } else if (data.error) { | |
| addMessage(data.error); | |
| } else { | |
| addMessage('Sorry, I encountered an error. Please try again.'); | |
| } | |
| } catch (error) { | |
| console.error('Chat error:', error); | |
| removeTyping(); | |
| if (error.name === 'TimeoutError') { | |
| addMessage('Sorry, the request timed out. The chatbot may be initializing. Please try again in a moment.'); | |
| } else { | |
| addMessage('Sorry, I encountered an error. Please try again later.'); | |
| } | |
| } finally { | |
| // Re-enable input | |
| chatbotInput.disabled = false; | |
| chatbotSend.disabled = false; | |
| chatbotInput.focus(); | |
| } | |
| } | |
| // Event listeners | |
| chatbotSend.addEventListener('click', sendMessage); | |
| chatbotInput.addEventListener('keypress', (e) => { | |
| if (e.key === 'Enter') { | |
| sendMessage(); | |
| } | |
| }); | |
| </script> | |
| {% endblock %} | |
| <!-- Bootstrap JS --> | |
| <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script> | |
| {% block scripts %}{% endblock %} | |
| </body> | |
| </html> |