Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Phi-2 Chatbot Interface</title> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> | |
| <style> | |
| .chat-container { | |
| height: calc(100vh - 160px); | |
| } | |
| .message-animation { | |
| animation: fadeIn 0.3s ease-in-out; | |
| } | |
| @keyframes fadeIn { | |
| from { opacity: 0; transform: translateY(10px); } | |
| to { opacity: 1; transform: translateY(0); } | |
| } | |
| .typing-indicator::after { | |
| content: "..."; | |
| animation: typing 1.5s infinite; | |
| } | |
| @keyframes typing { | |
| 0% { content: "."; } | |
| 33% { content: ".."; } | |
| 66% { content: "..."; } | |
| } | |
| .scrollbar-hide::-webkit-scrollbar { | |
| display: none; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100"> | |
| <div class="max-w-4xl mx-auto p-4"> | |
| <!-- Header --> | |
| <header class="bg-gradient-to-r from-blue-600 to-indigo-700 text-white rounded-lg p-6 mb-6 shadow-lg"> | |
| <div class="flex items-center justify-between"> | |
| <div> | |
| <h1 class="text-3xl font-bold">Phi-2 Chatbot</h1> | |
| <p class="text-blue-100 mt-2">Powered by Microsoft's Phi-2 model fine-tuned for conversation</p> | |
| </div> | |
| <div class="bg-white/20 p-3 rounded-full"> | |
| <i class="fas fa-robot text-3xl"></i> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Model Info Card --> | |
| <div class="bg-white rounded-lg shadow-md p-4 mb-6 border-l-4 border-blue-500"> | |
| <div class="flex items-start"> | |
| <div class="mr-4 text-blue-500"> | |
| <i class="fas fa-info-circle text-xl"></i> | |
| </div> | |
| <div> | |
| <h3 class="font-semibold text-gray-800">Model Information</h3> | |
| <p class="text-gray-600 text-sm mt-1"> | |
| This interface connects to Microsoft's Phi-2 (2.7B parameters) model fine-tuned by AlbelTec for chatbot applications. | |
| Phi-2 is a small but powerful language model that demonstrates outstanding reasoning and language understanding capabilities. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Chat Container --> | |
| <div class="bg-white rounded-xl shadow-md overflow-hidden"> | |
| <!-- Chat Header --> | |
| <div class="bg-gray-50 px-4 py-3 border-b flex items-center"> | |
| <div class="w-3 h-3 rounded-full bg-green-400 mr-2"></div> | |
| <span class="text-sm font-medium text-gray-700">Active</span> | |
| <div class="ml-auto flex space-x-2"> | |
| <button class="p-1 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-cog"></i> | |
| </button> | |
| <button class="p-1 text-gray-500 hover:text-gray-700"> | |
| <i class="fas fa-ellipsis-v"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <!-- Messages Area --> | |
| <div class="chat-container overflow-y-auto p-4 scrollbar-hide" id="chat-messages"> | |
| <!-- Welcome message --> | |
| <div class="message-animation mb-4"> | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-robot text-blue-600"></i> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-3 max-w-[85%]"> | |
| <p class="text-gray-800">Hello! I'm a Phi-2 powered chatbot. How can I help you today?</p> | |
| <p class="text-xs text-gray-500 mt-1">Just now</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="border-t p-4 bg-gray-50"> | |
| <form id="chat-form" class="flex items-center"> | |
| <div class="flex-grow relative"> | |
| <input | |
| type="text" | |
| id="user-input" | |
| placeholder="Type your message here..." | |
| class="w-full px-4 py-3 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent" | |
| autocomplete="off" | |
| > | |
| <div class="absolute right-3 top-3 flex space-x-1"> | |
| <button type="button" class="text-gray-400 hover:text-gray-600"> | |
| <i class="far fa-smile"></i> | |
| </button> | |
| <button type="button" class="text-gray-400 hover:text-gray-600"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| </div> | |
| </div> | |
| <button | |
| type="submit" | |
| class="ml-3 bg-blue-600 hover:bg-blue-700 text-white p-3 rounded-full transition-colors duration-200" | |
| > | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </form> | |
| <p class="text-xs text-gray-500 mt-2 text-center"> | |
| Phi-2 may produce inaccurate information. Verify important facts. | |
| </p> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const chatForm = document.getElementById('chat-form'); | |
| const userInput = document.getElementById('user-input'); | |
| const chatMessages = document.getElementById('chat-messages'); | |
| // Simulate API call to Phi-2 model | |
| async function getBotResponse(userMessage) { | |
| // In a real implementation, this would call your backend API | |
| // that connects to the Phi-2 model | |
| return new Promise(resolve => { | |
| setTimeout(() => { | |
| const responses = [ | |
| "I'm a fine-tuned version of Microsoft's Phi-2 model. I can help answer questions, have conversations, and assist with various tasks.", | |
| "That's an interesting question. As a Phi-2 based AI, my knowledge is current up to my training data.", | |
| "I can certainly help with that! Could you provide more details about what you're looking for?", | |
| "Phi-2 is known for its strong reasoning capabilities despite its relatively small size compared to other models.", | |
| "I'm designed to be helpful while being mindful of ethical considerations in my responses." | |
| ]; | |
| const randomResponse = responses[Math.floor(Math.random() * responses.length)]; | |
| resolve(randomResponse); | |
| }, 1000 + Math.random() * 2000); // Simulate variable response time | |
| }); | |
| } | |
| function addMessage(content, isUser = false) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = `message-animation mb-4 ${isUser ? 'text-right' : ''}`; | |
| const messageContent = ` | |
| <div class="flex items-start ${isUser ? 'flex-row-reverse' : ''}"> | |
| ${!isUser ? ` | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-robot text-blue-600"></i> | |
| </div> | |
| ` : ''} | |
| <div class="${isUser ? 'bg-blue-600 text-white' : 'bg-gray-100'} rounded-lg p-3 max-w-[85%]"> | |
| <p>${content}</p> | |
| <p class="text-xs ${isUser ? 'text-blue-200' : 'text-gray-500'} mt-1">Just now</p> | |
| </div> | |
| ${isUser ? ` | |
| <div class="bg-blue-600 p-2 rounded-full ml-3 text-white"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| ` : ''} | |
| </div> | |
| `; | |
| messageDiv.innerHTML = messageContent; | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| return messageDiv; | |
| } | |
| function showTypingIndicator() { | |
| const typingDiv = document.createElement('div'); | |
| typingDiv.className = 'message-animation mb-4'; | |
| typingDiv.id = 'typing-indicator'; | |
| typingDiv.innerHTML = ` | |
| <div class="flex items-start"> | |
| <div class="bg-blue-100 p-2 rounded-full mr-3"> | |
| <i class="fas fa-robot text-blue-600"></i> | |
| </div> | |
| <div class="bg-gray-100 rounded-lg p-3 max-w-[85%]"> | |
| <p class="typing-indicator text-gray-800"></p> | |
| </div> | |
| </div> | |
| `; | |
| chatMessages.appendChild(typingDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| return typingDiv; | |
| } | |
| function removeTypingIndicator() { | |
| const typingIndicator = document.getElementById('typing-indicator'); | |
| if (typingIndicator) { | |
| typingIndicator.remove(); | |
| } | |
| } | |
| chatForm.addEventListener('submit', async function(e) { | |
| e.preventDefault(); | |
| const message = userInput.value.trim(); | |
| if (message) { | |
| // Add user message | |
| addMessage(message, true); | |
| userInput.value = ''; | |
| // Show typing indicator | |
| showTypingIndicator(); | |
| // Get and display bot response | |
| const response = await getBotResponse(message); | |
| removeTypingIndicator(); | |
| addMessage(response); | |
| } | |
| }); | |
| // Allow pressing Enter to submit (but Shift+Enter for new line) | |
| userInput.addEventListener('keydown', function(e) { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| chatForm.dispatchEvent(new Event('submit')); | |
| } | |
| }); | |
| }); | |
| </script> | |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=bjcstudentCOR/helpso" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |