Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Berwart AI</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> | |
| @keyframes pulse { | |
| 0%, 100% { opacity: 1; } | |
| 50% { opacity: 0.5; } | |
| } | |
| .typing-indicator span { | |
| animation: pulse 1.5s infinite; | |
| } | |
| .typing-indicator span:nth-child(2) { | |
| animation-delay: 0.2s; | |
| } | |
| .typing-indicator span:nth-child(3) { | |
| animation-delay: 0.4s; | |
| } | |
| .chat-container { | |
| height: calc(100vh - 120px); | |
| } | |
| .message { | |
| max-width: 85%; | |
| } | |
| @media (min-width: 768px) { | |
| .message { | |
| max-width: 70%; | |
| } | |
| } | |
| .user-message { | |
| border-radius: 18px 18px 0 18px; | |
| } | |
| .bot-message { | |
| border-radius: 18px 18px 18px 0; | |
| } | |
| .gradient-bg { | |
| background: linear-gradient(135deg, #2563eb 0%, #7c3aed 100%); | |
| } | |
| .message-input { | |
| transition: all 0.2s; | |
| } | |
| .message-input:focus { | |
| box-shadow: 0 0 0 2px rgba(59, 130, 246, 0.5); | |
| } | |
| .logo-badge { | |
| position: fixed; | |
| top: 10px; | |
| left: 10px; | |
| z-index: 10; | |
| } | |
| </style> | |
| </head> | |
| <body class="bg-gray-50 font-sans"> | |
| <!-- Small floating logo badge --> | |
| <div class="logo-badge"> | |
| <div class="flex items-center space-x-2 bg-white/90 backdrop-blur-sm p-2 rounded-full shadow-sm"> | |
| <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/65f468a2f5c466261a1a7de0/PqrFg6XNtSyhSBY1sdyMf.png" | |
| alt="Berwart Logo" | |
| class="h-8 w-8 rounded-full object-cover border-2 border-blue-100"> | |
| <span class="text-sm font-medium text-gray-700 pr-2 hidden sm:block">Berwart AI</span> | |
| </div> | |
| </div> | |
| <div class="flex flex-col h-screen"> | |
| <!-- Chat Container --> | |
| <div class="chat-container container mx-auto p-4 overflow-y-auto flex-1 pt-4"> | |
| <div class="space-y-4" id="chat-messages"> | |
| <!-- Welcome message --> | |
| <div class="flex"> | |
| <div class="message bot-message bg-white p-4 shadow-sm"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/65f468a2f5c466261a1a7de0/PqrFg6XNtSyhSBY1sdyMf.png" | |
| alt="Berwart AI" | |
| class="h-9 w-9 rounded-full"> | |
| </div> | |
| <div> | |
| <p class="text-gray-700 mt-1">Hello! I'm here to help you with anything about Berwart. How can I assist you today?</p> | |
| <div class="mt-3 flex flex-wrap gap-2"> | |
| <button class="suggestion-btn text-xs bg-blue-50 text-blue-600 px-3 py-1.5 rounded-full hover:bg-blue-100 transition"> | |
| What services does Berwart offer? | |
| </button> | |
| <button class="suggestion-btn text-xs bg-blue-50 text-blue-600 px-3 py-1.5 rounded-full hover:bg-blue-100 transition"> | |
| How can I contact support? | |
| </button> | |
| <button class="suggestion-btn text-xs bg-blue-50 text-blue-600 px-3 py-1.5 rounded-full hover:bg-blue-100 transition"> | |
| Tell me about your company | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Input Area --> | |
| <div class="bg-white border-t border-gray-200 p-4"> | |
| <div class="container mx-auto"> | |
| <div class="flex items-center space-x-2"> | |
| <button class="p-3 text-gray-500 hover:text-gray-700 rounded-full hover:bg-gray-100 transition hidden sm:block"> | |
| <i class="fas fa-paperclip"></i> | |
| </button> | |
| <div class="flex-1 relative"> | |
| <textarea id="message-input" | |
| class="message-input w-full border border-gray-200 rounded-full py-3 px-4 pr-12 focus:outline-none focus:ring-0 focus:border-blue-300 resize-none bg-gray-50" | |
| placeholder="Type your message..." | |
| rows="1"></textarea> | |
| <button class="absolute right-3 bottom-3 text-gray-500 hover:text-blue-500 transition hidden sm:block"> | |
| <i class="far fa-smile"></i> | |
| </button> | |
| </div> | |
| <button id="send-btn" class="p-3 bg-blue-600 text-white rounded-full hover:bg-blue-700 transition"> | |
| <i class="fas fa-paper-plane"></i> | |
| </button> | |
| </div> | |
| <div class="mt-2 text-xs text-gray-500 text-center"> | |
| Berwart AI may produce inaccurate information. Verify important details. | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <script> | |
| document.addEventListener('DOMContentLoaded', function() { | |
| const messageInput = document.getElementById('message-input'); | |
| const sendBtn = document.getElementById('send-btn'); | |
| const chatMessages = document.getElementById('chat-messages'); | |
| const suggestionBtns = document.querySelectorAll('.suggestion-btn'); | |
| // Auto-resize textarea | |
| messageInput.addEventListener('input', function() { | |
| this.style.height = 'auto'; | |
| this.style.height = (this.scrollHeight) + 'px'; | |
| }); | |
| // Send message on Enter key (but allow Shift+Enter for new lines) | |
| messageInput.addEventListener('keydown', function(e) { | |
| if (e.key === 'Enter' && !e.shiftKey) { | |
| e.preventDefault(); | |
| sendMessage(); | |
| } | |
| }); | |
| // Send message on button click | |
| sendBtn.addEventListener('click', sendMessage); | |
| // Quick suggestion buttons | |
| suggestionBtns.forEach(btn => { | |
| btn.addEventListener('click', function() { | |
| messageInput.value = this.textContent.trim(); | |
| messageInput.focus(); | |
| messageInput.style.height = 'auto'; | |
| messageInput.style.height = (messageInput.scrollHeight) + 'px'; | |
| }); | |
| }); | |
| function sendMessage() { | |
| const message = messageInput.value.trim(); | |
| if (message === '') return; | |
| // Add user message to chat | |
| addMessage(message, 'user'); | |
| messageInput.value = ''; | |
| messageInput.style.height = 'auto'; | |
| // Show typing indicator | |
| showTypingIndicator(); | |
| // Simulate AI response after a delay | |
| setTimeout(() => { | |
| removeTypingIndicator(); | |
| const response = getAIResponse(message); | |
| addMessage(response, 'bot'); | |
| }, 800 + Math.random() * 1500); // Random delay between 0.8-2.3 seconds | |
| } | |
| function addMessage(text, sender) { | |
| const messageDiv = document.createElement('div'); | |
| messageDiv.className = 'flex'; | |
| messageDiv.style.justifyContent = sender === 'user' ? 'flex-end' : 'flex-start'; | |
| const messageContent = ` | |
| <div class="message ${sender}-message ${sender === 'user' ? 'bg-blue-600 text-white' : 'bg-white'} p-4 shadow-sm"> | |
| ${sender === 'bot' ? ` | |
| <div class="flex items-start space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/65f468a2f5c466261a1a7de0/PqrFg6XNtSyhSBY1sdyMf.png" | |
| alt="Berwart AI" | |
| class="h-9 w-9 rounded-full"> | |
| </div> | |
| <div> | |
| <p class="text-gray-700">${text}</p> | |
| </div> | |
| </div> | |
| ` : ` | |
| <div class="flex items-start space-x-3"> | |
| <div> | |
| <p>${text}</p> | |
| </div> | |
| <div class="flex-shrink-0"> | |
| <div class="h-9 w-9 rounded-full bg-blue-500 text-white flex items-center justify-center"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| </div> | |
| </div> | |
| `} | |
| </div> | |
| `; | |
| messageDiv.innerHTML = messageContent; | |
| chatMessages.appendChild(messageDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| function showTypingIndicator() { | |
| const typingDiv = document.createElement('div'); | |
| typingDiv.className = 'flex'; | |
| typingDiv.id = 'typing-indicator'; | |
| typingDiv.innerHTML = ` | |
| <div class="message bot-message bg-white p-4 shadow-sm"> | |
| <div class="flex items-start space-x-3"> | |
| <div class="flex-shrink-0"> | |
| <img src="https://cdn-avatars.huggingface.co/v1/production/uploads/65f468a2f5c466261a1a7de0/PqrFg6XNtSyhSBY1sdyMf.png" | |
| alt="Berwart AI" | |
| class="h-9 w-9 rounded-full"> | |
| </div> | |
| <div> | |
| <div class="typing-indicator flex space-x-1.5 items-center"> | |
| <span class="h-2.5 w-2.5 bg-gray-400 rounded-full"></span> | |
| <span class="h-2.5 w-2.5 bg-gray-400 rounded-full"></span> | |
| <span class="h-2.5 w-2.5 bg-gray-400 rounded-full"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| `; | |
| chatMessages.appendChild(typingDiv); | |
| chatMessages.scrollTop = chatMessages.scrollHeight; | |
| } | |
| function removeTypingIndicator() { | |
| const typingIndicator = document.getElementById('typing-indicator'); | |
| if (typingIndicator) { | |
| typingIndicator.remove(); | |
| } | |
| } | |
| // Enhanced AI response logic | |
| function getAIResponse(message) { | |
| const lowerMessage = message.toLowerCase(); | |
| if (lowerMessage.includes('hello') || lowerMessage.includes('hi') || lowerMessage.includes('hey')) { | |
| return "Hello! 👋 I'm Berwart's AI assistant. How can I help you today?"; | |
| } else if (lowerMessage.includes('service') || lowerMessage.includes('offer') || lowerMessage.includes('provide')) { | |
| return "Berwart specializes in AI-powered solutions for businesses:\n\n• AI Consulting & Strategy\n• Custom Machine Learning Models\n• Natural Language Processing\n• Computer Vision Systems\n• Predictive Analytics\n\nWe help companies transform their operations with cutting-edge AI technology."; | |
| } else if (lowerMessage.includes('contact') || lowerMessage.includes('support') || lowerMessage.includes('help')) { | |
| return "You can reach our team through:\n\n📧 Email: support@berwart.com\n📞 Phone: +1 (555) 123-4567\n📍 Office: 123 AI Avenue, Tech City\n\nOur support hours are Mon-Fri, 9AM-5PM (EST)."; | |
| } else if (lowerMessage.includes('company') || lowerMessage.includes('about') || lowerMessage.includes('berwart')) { | |
| return "Berwart is an AI innovation leader founded in 2018. We're on a mission to democratize AI for businesses of all sizes. Our team of 150+ experts has delivered 300+ successful AI implementations across various industries.\n\nCore values:\n• Innovation\n• Integrity\n• Impact"; | |
| } else if (lowerMessage.includes('thank') || lowerMessage.includes('thanks')) { | |
| return "You're very welcome! 😊 Let me know if there's anything else I can help with."; | |
| } else if (lowerMessage.includes('price') || lowerMessage.includes('cost')) { | |
| return "Our pricing depends on the scope and complexity of each project. We offer:\n\n• Custom quotes for enterprise solutions\n• Standard packages for common use cases\n• Pilot programs for testing AI feasibility\n\nWould you like me to connect you with our sales team for a personalized quote?"; | |
| } else { | |
| const genericResponses = [ | |
| "I've noted your question about: " + message + ". Let me provide the most relevant information...", | |
| "That's an interesting question about " + message.split(' ')[0] + ". Here's what I can share...", | |
| "I want to make sure I understand correctly. Could you elaborate on what you mean by \"" + message + "\"?", | |
| "I'm still learning about all aspects of Berwart's operations. Could you rephrase your question or try asking something different?" | |
| ]; | |
| return genericResponses[Math.floor(Math.random() * genericResponses.length)]; | |
| } | |
| } | |
| }); | |
| </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=Mxytyu/chatting-page" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> | |
| </html> |