Spaces:

UjjwalK
/

my-space

Running

App Files Files Community

UjjwalK commited on Apr 1

Commit

e6bc8b0

verified ·

1 Parent(s): da2397f

Add 2 files

Browse files

Files changed (2) hide show

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

README.md CHANGED Viewed

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

 ---
+title: my-space
+emoji: 🐳
+colorFrom: blue
+colorTo: blue
 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,482 @@
-<!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>Knowledge Base Assistant</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>
+        /* Custom animations */
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .message {
+            animation: fadeIn 0.3s ease-out forwards;
+        }
+        /* Custom scrollbar */
+        .custom-scrollbar::-webkit-scrollbar {
+            width: 6px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-track {
+            background: #f1f1f1;
+            border-radius: 10px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb {
+            background: #888;
+            border-radius: 10px;
+        }
+        .custom-scrollbar::-webkit-scrollbar-thumb:hover {
+            background: #555;
+        }
+        /* Pulse animation for typing indicator */
+        @keyframes pulse {
+            0%, 100% { opacity: 1; }
+            50% { opacity: 0.5; }
+        }
+        .typing-dot {
+            animation: pulse 1.5s infinite ease-in-out;
+        }
+        .typing-dot:nth-child(1) {
+            animation-delay: 0s;
+        }
+        .typing-dot:nth-child(2) {
+            animation-delay: 0.3s;
+        }
+        .typing-dot:nth-child(3) {
+            animation-delay: 0.6s;
+        }
+    </style>
+</head>
+<body class="bg-gray-100 font-sans">
+    <div class="container mx-auto max-w-6xl p-4">
+        <!-- Header -->
+        <header class="flex justify-between items-center mb-6">
+            <div class="flex items-center">
+                <div class="w-12 h-12 rounded-full bg-blue-600 flex items-center justify-center mr-3">
+                    <i class="fas fa-robot text-white text-2xl"></i>
+                </div>
+                <div>
+                    <h1 class="text-2xl font-bold text-gray-800">Knowledge Base Assistant</h1>
+                    <p class="text-gray-600">Ask me anything from our documentation</p>
+                </div>
+            </div>
+            <div class="flex space-x-2">
+                <button id="clearChat" class="px-4 py-2 bg-gray-200 hover:bg-gray-300 rounded-lg text-gray-700 transition">
+                    <i class="fas fa-trash-alt mr-2"></i>Clear
+                </button>
+                <button class="px-4 py-2 bg-blue-600 hover:bg-blue-700 rounded-lg text-white transition">
+                    <i class="fas fa-book mr-2"></i>Knowledge Base
+                </button>
+            </div>
+        </header>
+        <!-- Main Chat Area -->
+        <div class="bg-white rounded-xl shadow-lg overflow-hidden">
+            <div class="flex h-[70vh]">
+                <!-- Sidebar with categories -->
+                <div class="w-64 bg-gray-50 border-r border-gray-200 p-4 hidden md:block">
+                    <div class="mb-6">
+                        <h3 class="font-semibold text-gray-700 mb-3">Categories</h3>
+                        <ul class="space-y-2">
+                            <li>
+                                <button class="category-btn w-full text-left px-3 py-2 rounded-lg bg-blue-100 text-blue-700 font-medium">
+                                    <i class="fas fa-cog mr-2"></i>Getting Started
+                                </button>
+                            </li>
+                            <li>
+                                <button class="category-btn w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 transition">
+                                    <i class="fas fa-user mr-2"></i>User Guide
+                                </button>
+                            </li>
+                            <li>
+                                <button class="category-btn w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 transition">
+                                    <i class="fas fa-tools mr-2"></i>Troubleshooting
+                                </button>
+                            </li>
+                            <li>
+                                <button class="category-btn w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 transition">
+                                    <i class="fas fa-shield-alt mr-2"></i>Security
+                                </button>
+                            </li>
+                            <li>
+                                <button class="category-btn w-full text-left px-3 py-2 rounded-lg hover:bg-gray-100 text-gray-700 transition">
+                                    <i class="fas fa-chart-line mr-2"></i>API Reference
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
+                    <div>
+                        <h3 class="font-semibold text-gray-700 mb-3">Popular Questions</h3>
+                        <ul class="space-y-2">
+                            <li>
+                                <button class="suggested-question w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-600 transition">
+                                    How do I reset my password?
+                                </button>
+                            </li>
+                            <li>
+                                <button class="suggested-question w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-600 transition">
+                                    Where can I download the mobile app?
+                                </button>
+                            </li>
+                            <li>
+                                <button class="suggested-question w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-600 transition">
+                                    What are the system requirements?
+                                </button>
+                            </li>
+                            <li>
+                                <button class="suggested-question w-full text-left px-3 py-2 text-sm rounded-lg hover:bg-gray-100 text-gray-600 transition">
+                                    How to enable two-factor authentication?
+                                </button>
+                            </li>
+                        </ul>
+                    </div>
+                </div>
+                <!-- Chat messages -->
+                <div class="flex-1 flex flex-col">
+                    <div id="chatMessages" class="flex-1 p-6 overflow-y-auto custom-scrollbar">
+                        <!-- Welcome message -->
+                        <div class="message mb-6">
+                            <div class="flex items-start">
+                                <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
+                                    <i class="fas fa-robot text-blue-600"></i>
+                                </div>
+                                <div class="flex-1">
+                                    <div class="bg-gray-100 rounded-xl p-4 inline-block max-w-3xl">
+                                        <h3 class="font-bold text-gray-800 mb-1">Hello! 👋</h3>
+                                        <p class="text-gray-700">I'm your Knowledge Base Assistant. I can help you find answers from our documentation. Try asking me something like:</p>
+                                        <ul class="mt-2 space-y-1">
+                                            <li class="text-blue-600">• How do I create an account?</li>
+                                            <li class="text-blue-600">• Where can I find the user manual?</li>
+                                            <li class="text-blue-600">• What's the refund policy?</li>
+                                        </ul>
+                                    </div>
+                                    <p class="text-xs text-gray-500 mt-1">Today at <span id="currentTime"></span></p>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Typing indicator (hidden by default) -->
+                    <div id="typingIndicator" class="px-6 pb-4 hidden">
+                        <div class="flex items-start">
+                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
+                                <i class="fas fa-robot text-blue-600"></i>
+                            </div>
+                            <div class="flex items-center space-x-1 bg-gray-100 rounded-xl p-3">
+                                <div class="typing-dot w-2 h-2 bg-gray-500 rounded-full"></div>
+                                <div class="typing-dot w-2 h-2 bg-gray-500 rounded-full"></div>
+                                <div class="typing-dot w-2 h-2 bg-gray-500 rounded-full"></div>
+                            </div>
+                        </div>
+                    </div>
+                    <!-- Input area -->
+                    <div class="border-t border-gray-200 p-4 bg-gray-50">
+                        <form id="chatForm" class="flex items-center">
+                            <div class="flex-1 relative">
+                                <input
+                                    id="userInput"
+                                    type="text"
+                                    placeholder="Ask a question..."
+                                    class="w-full p-4 pr-12 rounded-lg border border-gray-300 focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent"
+                                    autocomplete="off"
+                                >
+                                <button type="button" id="attachFile" class="absolute right-12 top-4 text-gray-500 hover:text-gray-700">
+                                    <i class="fas fa-paperclip"></i>
+                                </button>
+                                <button type="button" id="voiceInput" class="absolute right-4 top-4 text-gray-500 hover:text-gray-700">
+                                    <i class="fas fa-microphone"></i>
+                                </button>
+                            </div>
+                            <button type="submit" class="ml-3 w-12 h-12 rounded-lg bg-blue-600 text-white hover:bg-blue-700 transition flex items-center justify-center">
+                                <i class="fas fa-paper-plane"></i>
+                            </button>
+                        </form>
+                        <div class="mt-2 text-xs text-gray-500 flex justify-between">
+                            <div>
+                                <span id="charCount">0</span>/500 characters
+                            </div>
+                            <div>
+                                <button id="suggestQuestions" class="text-blue-600 hover:underline">Need inspiration?</button>
+                            </div>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <!-- Feedback modal (hidden by default) -->
+        <div id="feedbackModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50 hidden">
+            <div class="bg-white rounded-xl p-6 w-full max-w-md">
+                <div class="flex justify-between items-center mb-4">
+                    <h3 class="text-lg font-semibold">Was this response helpful?</h3>
+                    <button id="closeFeedbackModal" class="text-gray-500 hover:text-gray-700">
+                        <i class="fas fa-times"></i>
+                    </button>
+                </div>
+                <div class="flex space-x-3 mb-4">
+                    <button class="feedback-btn flex-1 py-2 rounded-lg border border-gray-300 hover:bg-green-50 hover:border-green-500 text-gray-700" data-feedback="yes">
+                        <i class="fas fa-thumbs-up mr-2 text-green-500"></i> Yes
+                    </button>
+                    <button class="feedback-btn flex-1 py-2 rounded-lg border border-gray-300 hover:bg-red-50 hover:border-red-500 text-gray-700" data-feedback="no">
+                        <i class="fas fa-thumbs-down mr-2 text-red-500"></i> No
+                    </button>
+                </div>
+                <div id="feedbackCommentArea" class="hidden">
+                    <textarea class="w-full p-3 border border-gray-300 rounded-lg mb-3" placeholder="What could be improved?"></textarea>
+                    <button id="submitFeedback" class="w-full py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700">Submit Feedback</button>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            // Set current time
+            const now = new Date();
+            const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+            document.getElementById('currentTime').textContent = timeString;
+            // Character counter for input
+            const userInput = document.getElementById('userInput');
+            const charCount = document.getElementById('charCount');
+            userInput.addEventListener('input', function() {
+                charCount.textContent = this.value.length;
+            });
+            // Chat form submission
+            const chatForm = document.getElementById('chatForm');
+            const chatMessages = document.getElementById('chatMessages');
+            const typingIndicator = document.getElementById('typingIndicator');
+            chatForm.addEventListener('submit', function(e) {
+                e.preventDefault();
+                const message = userInput.value.trim();
+                if (message === '') return;
+                // Add user message to chat
+                addMessageToChat('user', message);
+                userInput.value = '';
+                charCount.textContent = '0';
+                // Show typing indicator
+                typingIndicator.classList.remove('hidden');
+                // Scroll to bottom
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+                // Simulate bot response after a delay
+                setTimeout(() => {
+                    typingIndicator.classList.add('hidden');
+                    const botResponse = generateBotResponse(message);
+                    addMessageToChat('bot', botResponse);
+                    // Scroll to bottom after bot responds
+                    setTimeout(() => {
+                        chatMessages.scrollTop = chatMessages.scrollHeight;
+                    }, 100);
+                }, 1500);
+            });
+            // Clear chat button
+            document.getElementById('clearChat').addEventListener('click', function() {
+                chatMessages.innerHTML = `
+                    <div class="message mb-6">
+                        <div class="flex items-start">
+                            <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
+                                <i class="fas fa-robot text-blue-600"></i>
+                            </div>
+                            <div class="flex-1">
+                                <div class="bg-gray-100 rounded-xl p-4 inline-block max-w-3xl">
+                                    <h3 class="font-bold text-gray-800 mb-1">Hello! 👋</h3>
+                                    <p class="text-gray-700">I'm your Knowledge Base Assistant. I can help you find answers from our documentation. Try asking me something like:</p>
+                                    <ul class="mt-2 space-y-1">
+                                        <li class="text-blue-600">• How do I create an account?</li>
+                                        <li class="text-blue-600">• Where can I find the user manual?</li>
+                                        <li class="text-blue-600">• What's the refund policy?</li>
+                                    </ul>
+                                </div>
+                                <p class="text-xs text-gray-500 mt-1">Today at ${timeString}</p>
+                            </div>
+                        </div>
+                    </div>
+                `;
+            });
+            // Suggested questions
+            document.querySelectorAll('.suggested-question').forEach(button => {
+                button.addEventListener('click', function() {
+                    userInput.value = this.textContent;
+                    userInput.focus();
+                });
+            });
+            // Need inspiration button
+            document.getElementById('suggestQuestions').addEventListener('click', function() {
+                const suggestions = [
+                    "How do I update my profile information?",
+                    "Where can I find the pricing plans?",
+                    "How to export my data?",
+                    "What payment methods do you accept?",
+                    "How to contact customer support?"
+                ];
+                const randomSuggestion = suggestions[Math.floor(Math.random() * suggestions.length)];
+                userInput.value = randomSuggestion;
+                userInput.focus();
+            });
+            // Feedback modal
+            const feedbackModal = document.getElementById('feedbackModal');
+            const closeFeedbackModal = document.getElementById('closeFeedbackModal');
+            const feedbackBtns = document.querySelectorAll('.feedback-btn');
+            const feedbackCommentArea = document.getElementById('feedbackCommentArea');
+            const submitFeedback = document.getElementById('submitFeedback');
+            feedbackBtns.forEach(btn => {
+                btn.addEventListener('click', function() {
+                    if (this.dataset.feedback === 'no') {
+                        feedbackCommentArea.classList.remove('hidden');
+                    } else {
+                        feedbackModal.classList.add('hidden');
+                        showToast('Thanks for your feedback!');
+                    }
+                });
+            });
+            closeFeedbackModal.addEventListener('click', function() {
+                feedbackModal.classList.add('hidden');
+            });
+            submitFeedback.addEventListener('click', function() {
+                feedbackModal.classList.add('hidden');
+                showToast('Feedback submitted. Thank you!');
+            });
+            // Helper functions
+            function addMessageToChat(sender, message) {
+                const now = new Date();
+                const timeString = now.toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+                if (sender === 'user') {
+                    const messageElement = `
+                        <div class="message mb-6">
+                            <div class="flex items-start justify-end">
+                                <div class="flex-1 max-w-3xl">
+                                    <div class="bg-blue-600 text-white rounded-xl p-4 inline-block">
+                                        ${message}
+                                    </div>
+                                    <p class="text-xs text-gray-500 mt-1 text-right">${timeString}</p>
+                                </div>
+                                <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center ml-3">
+                                    <i class="fas fa-user text-white"></i>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                    chatMessages.insertAdjacentHTML('beforeend', messageElement);
+                } else {
+                    const messageElement = `
+                        <div class="message mb-6">
+                            <div class="flex items-start">
+                                <div class="w-10 h-10 rounded-full bg-blue-100 flex items-center justify-center mr-3">
+                                    <i class="fas fa-robot text-blue-600"></i>
+                                </div>
+                                <div class="flex-1">
+                                    <div class="bg-gray-100 rounded-xl p-4 inline-block max-w-3xl">
+                                        ${message}
+                                    </div>
+                                    <div class="mt-2 flex items-center space-x-3">
+                                        <button class="text-xs text-blue-600 hover:underline feedback-trigger">Was this helpful?</button>
+                                        <button class="text-xs text-gray-500 hover:text-gray-700">
+                                            <i class="fas fa-copy mr-1"></i>Copy
+                                        </button>
+                                    </div>
+                                    <p class="text-xs text-gray-500 mt-1">${timeString}</p>
+                                </div>
+                            </div>
+                        </div>
+                    `;
+                    chatMessages.insertAdjacentHTML('beforeend', messageElement);
+                    // Add event listener to the new feedback button
+                    const lastMessage = chatMessages.lastElementChild;
+                    const feedbackTrigger = lastMessage.querySelector('.feedback-trigger');
+                    feedbackTrigger.addEventListener('click', function() {
+                        feedbackModal.classList.remove('hidden');
+                    });
+                }
+            }
+            function generateBotResponse(question) {
+                // This is a simplified response generator
+                // In a real app, you would connect to your knowledge base API
+                const responses = {
+                    "hello": "Hello! How can I assist you with our knowledge base today?",
+                    "hi": "Hi there! What would you like to know?",
+                    "help": "I'm here to help! Please ask me a specific question about our product or service.",
+                    "account": "To manage your account, please go to Settings > Account. There you can update your profile, change your password, and manage security settings.",
+                    "password": "To reset your password: 1) Go to the login page 2) Click 'Forgot password' 3) Enter your email 4) Follow the instructions in the email you receive.",
+                    "contact": "You can contact our support team by email at [email protected] or by phone at (555) 123-4567. Our support hours are Monday-Friday, 9AM-5PM.",
+                    "refund": "Our refund policy allows for returns within 30 days of purchase. Please contact our support team with your order number to initiate a refund.",
+                    "download": "You can download our mobile app from the Apple App Store or Google Play Store. Search for 'OurProductName' to find it."
+                };
+                // Check for exact matches first
+                const lowerQuestion = question.toLowerCase();
+                if (responses[lowerQuestion]) {
+                    return responses[lowerQuestion];
+                }
+                // Check for keywords
+                if (lowerQuestion.includes('password')) {
+                    return responses['password'];
+                } else if (lowerQuestion.includes('account')) {
+                    return responses['account'];
+                } else if (lowerQuestion.includes('contact') || lowerQuestion.includes('support')) {
+                    return responses['contact'];
+                } else if (lowerQuestion.includes('refund') || lowerQuestion.includes('return')) {
+                    return responses['refund'];
+                } else if (lowerQuestion.includes('download') || lowerQuestion.includes('app')) {
+                    return responses['download'];
+                }
+                // Default response
+                return `I found this information that might help with your question about "${question}":<br><br>
+                <div class="bg-blue-50 border-l-4 border-blue-500 p-3 rounded-r-lg mb-3">
+                    <h4 class="font-semibold text-blue-800">Related Article</h4>
+                    <p class="text-blue-700">"${question.replace('?', '')}" in our knowledge base</p>
+                    <a href="#" class="text-blue-600 text-sm hover:underline mt-1 inline-block">Read more →</a>
+                </div>
+                Does this answer your question? If not, please try rephrasing or ask something more specific.`;
+            }
+            function showToast(message) {
+                const toast = document.createElement('div');
+                toast.className = 'fixed bottom-4 right-4 bg-gray-800 text-white px-4 py-2 rounded-lg shadow-lg animate-fade-in-out';
+                toast.textContent = message;
+                document.body.appendChild(toast);
+                setTimeout(() => {
+                    toast.remove();
+                }, 3000);
+            }
+        });
+    </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=UjjwalK/my-space" style="color: #fff;text-decoration: underline;" target="_blank" >🧬 Remix</a></p></body>
+</html>