Spaces:
Running
Running
File size: 15,322 Bytes
605885b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 160 161 162 163 164 165 166 167 168 169 170 171 172 173 174 175 176 177 178 179 180 181 182 183 184 185 186 187 188 189 190 191 192 193 194 195 196 197 198 199 200 201 202 203 204 205 206 207 208 209 210 211 212 213 214 215 216 217 218 219 220 221 222 223 224 225 226 227 228 229 230 231 232 233 234 235 236 237 238 239 240 241 242 243 244 245 246 247 248 249 250 251 252 253 254 255 256 257 258 259 260 261 262 263 264 265 266 267 268 269 270 271 272 273 274 275 276 277 278 279 280 281 282 283 284 |
<!DOCTYPE html>
<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: [email protected]\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> |