Spaces:

Mxytyu
/

chatting-page

Running

App Files Files Community

Mxytyu commited on Apr 7

Commit

605885b

verified ·

1 Parent(s): 442293c

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +284 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Chatting Page
-emoji: 🌖
-colorFrom: red
-colorTo: green
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: chatting-page
+emoji: 🐳
+colorFrom: yellow
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,284 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!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>