Spaces:

sempapi
/

vendus-ai

Running

App Files Files Community

sempapi commited on May 16, 2025

Commit

4991c98

verified ·

1 Parent(s): c88fa28

Add 3 files

Browse files

Files changed (3) hide show

README.md +6 -4
index.html +323 -19
prompts.txt +0 -0

README.md CHANGED Viewed

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

 ---
+title: vendus-ai
+emoji: 🐳
+colorFrom: pink
 colorTo: red
 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,323 @@
-<!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>Vendus AI - Your Personal Friend</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 float {
+            0% { transform: translateY(0px); }
+            50% { transform: translateY(-10px); }
+            100% { transform: translateY(0px); }
+        }
+        .chat-container {
+            height: 70vh;
+            transition: all 0.3s ease;
+        }
+        .message-animation {
+            animation: fadeIn 0.3s ease-out;
+        }
+        @keyframes fadeIn {
+            from { opacity: 0; transform: translateY(10px); }
+            to { opacity: 1; transform: translateY(0); }
+        }
+        .typing-indicator span {
+            animation: bounce 1.5s infinite ease-in-out;
+            display: inline-block;
+        }
+        .typing-indicator span:nth-child(2) {
+            animation-delay: 0.2s;
+        }
+        .typing-indicator span:nth-child(3) {
+            animation-delay: 0.4s;
+        }
+        @keyframes bounce {
+            0%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-5px); }
+        }
+        .floating-btn {
+            animation: float 3s ease-in-out infinite;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-br from-indigo-900 to-purple-900 min-h-screen text-white">
+    <div class="container mx-auto px-4 py-8">
+        <!-- Header -->
+        <header class="flex flex-col items-center mb-8">
+            <div class="relative">
+                <div class="w-24 h-24 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center shadow-xl mb-4">
+                    <i class="fas fa-robot text-4xl"></i>
+                </div>
+                <span class="absolute -bottom-2 -right-2 bg-green-500 text-white text-xs font-bold px-2 py-1 rounded-full">AI</span>
+            </div>
+            <h1 class="text-4xl font-bold mb-2">Vendus AI</h1>
+            <p class="text-purple-200">Your personal friend who's always here to chat</p>
+        </header>
+        <!-- Chat Container -->
+        <div class="bg-white/10 backdrop-blur-md rounded-2xl shadow-xl overflow-hidden chat-container flex flex-col">
+            <!-- Chat Header -->
+            <div class="bg-white/20 px-6 py-4 flex items-center justify-between">
+                <div class="flex items-center space-x-3">
+                    <div class="w-10 h-10 rounded-full bg-gradient-to-r from-pink-400 to-purple-500 flex items-center justify-center">
+                        <i class="fas fa-robot"></i>
+                    </div>
+                    <div>
+                        <h3 class="font-semibold">Vendus AI</h3>
+                        <p class="text-xs text-purple-200">Online</p>
+                    </div>
+                </div>
+                <div class="flex space-x-2">
+                    <button class="w-8 h-8 rounded-full bg-white/10 flex items-center justify-center hover:bg-white/20 transition">
+                        <i class="fas fa-ellipsis-v text-sm"></i>
+                    </button>
+                </div>
+            </div>
+            <!-- Messages -->
+            <div class="flex-1 p-6 overflow-y-auto" id="chat-messages">
+                <!-- Initial greeting -->
+                <div class="flex mb-4 message-animation">
+                    <div class="w-10 h-10 rounded-full bg-gradient-to-r from-pink-400 to-purple-500 flex-shrink-0 flex items-center justify-center mr-3">
+                        <i class="fas fa-robot"></i>
+                    </div>
+                    <div class="bg-white/20 rounded-2xl rounded-tl-none px-4 py-3 max-w-[80%]">
+                        <p>Hey there! 👋 I'm Vendus AI, your personal friend. I'm here to chat about anything you'd like - your day, your thoughts, or even just random topics. What's on your mind?</p>
+                    </div>
+                </div>
+            </div>
+            <!-- Typing indicator (hidden by default) -->
+            <div class="typing-indicator px-6 pb-3 hidden" id="typing-indicator">
+                <div class="flex items-center">
+                    <div class="w-10 h-10 rounded-full bg-gradient-to-r from-pink-400 to-purple-500 flex-shrink-0 flex items-center justify-center mr-3">
+                        <i class="fas fa-robot"></i>
+                    </div>
+                    <div class="bg-white/20 rounded-2xl rounded-tl-none px-4 py-2">
+                        <span>.</span>
+                        <span>.</span>
+                        <span>.</span>
+                    </div>
+                </div>
+            </div>
+            <!-- Input Area -->
+            <div class="border-t border-white/20 p-4">
+                <form id="chat-form" class="flex space-x-2">
+                    <input
+                        type="text"
+                        id="user-input"
+                        placeholder="Type your message..."
+                        class="flex-1 bg-white/10 rounded-full px-5 py-3 focus:outline-none focus:ring-2 focus:ring-purple-500 placeholder-purple-300"
+                        autocomplete="off"
+                    >
+                    <button
+                        type="submit"
+                        class="w-12 h-12 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center hover:from-pink-600 hover:to-purple-700 transition transform hover:scale-105"
+                    >
+                        <i class="fas fa-paper-plane"></i>
+                    </button>
+                </form>
+                <p class="text-xs text-purple-300 mt-2 text-center">Vendus AI may produce inaccurate information about people, places, or facts.</p>
+            </div>
+        </div>
+        <!-- Quick Suggestions -->
+        <div class="grid grid-cols-2 md:grid-cols-4 gap-3 mt-6" id="quick-suggestions">
+            <button class="quick-suggestion bg-white/10 hover:bg-white/20 rounded-full px-4 py-2 text-sm transition">
+                Tell me a joke
+            </button>
+            <button class="quick-suggestion bg-white/10 hover:bg-white/20 rounded-full px-4 py-2 text-sm transition">
+                How's your day?
+            </button>
+            <button class="quick-suggestion bg-white/10 hover:bg-white/20 rounded-full px-4 py-2 text-sm transition">
+                Give me advice
+            </button>
+            <button class="quick-suggestion bg-white/10 hover:bg-white/20 rounded-full px-4 py-2 text-sm transition">
+                Recommend a movie
+            </button>
+        </div>
+    </div>
+    <!-- Floating Action Button (for mobile) -->
+    <button id="scroll-to-bottom" class="fixed bottom-24 right-6 w-14 h-14 rounded-full bg-gradient-to-r from-pink-500 to-purple-600 flex items-center justify-center shadow-xl floating-btn md:hidden">
+        <i class="fas fa-arrow-down"></i>
+    </button>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const chatForm = document.getElementById('chat-form');
+            const userInput = document.getElementById('user-input');
+            const chatMessages = document.getElementById('chat-messages');
+            const typingIndicator = document.getElementById('typing-indicator');
+            const quickSuggestions = document.querySelectorAll('.quick-suggestion');
+            const scrollToBottomBtn = document.getElementById('scroll-to-bottom');
+            // Sample responses from Vendus AI
+            const responses = [
+                "That's really interesting! Tell me more about that.",
+                "I'd love to hear your perspective on this.",
+                "You know, I was just thinking about something similar recently.",
+                "That's a great point! Here's what I think about that...",
+                "I appreciate you sharing that with me. What else is on your mind?",
+                "Hmm, that's a fascinating topic. Let me share my thoughts...",
+                "I'm really enjoying our conversation! What else would you like to discuss?",
+                "That reminds me of something I heard recently...",
+                "You have such unique insights! Let's explore this further.",
+                "I'm here to listen and chat about anything you'd like."
+            ];
+            // Jokes database
+            const jokes = [
+                "Why don't scientists trust atoms? Because they make up everything!",
+                "Did you hear about the mathematician who's afraid of negative numbers? He'll stop at nothing to avoid them!",
+                "Why don't skeletons fight each other? They don't have the guts!",
+                "I told my wife she was drawing her eyebrows too high. She looked surprised.",
+                "What do you call a fake noodle? An impasta!"
+            ];
+            // Advice database
+            const advice = [
+                "Remember to take breaks and care for yourself - you can't pour from an empty cup.",
+                "The best time to plant a tree was 20 years ago. The second best time is now.",
+                "Don't compare your chapter 1 to someone else's chapter 20.",
+                "Progress, not perfection, is what really matters in the long run.",
+                "Be kind to yourself. You're doing better than you think you are."
+            ];
+            // Movie recommendations
+            const movies = [
+                "If you're in the mood for something thought-provoking, try 'The Shawshank Redemption'.",
+                "For a feel-good movie, I recommend 'The Pursuit of Happyness'.",
+                "If you like sci-fi, 'Inception' is a mind-bending masterpiece!",
+                "For something light and funny, 'The Grand Budapest Hotel' is wonderful.",
+                "If you haven't seen 'Parasite' yet, it's a must-watch!"
+            ];
+            // Add message to chat
+            function addMessage(sender, message, isUser = false) {
+                const messageDiv = document.createElement('div');
+                messageDiv.className = `flex mb-4 message-animation ${isUser ? 'justify-end' : ''}`;
+                if (!isUser) {
+                    messageDiv.innerHTML = `
+                        <div class="w-10 h-10 rounded-full bg-gradient-to-r from-pink-400 to-purple-500 flex-shrink-0 flex items-center justify-center mr-3">
+                            <i class="fas fa-robot"></i>
+                        </div>
+                        <div class="bg-white/20 rounded-2xl rounded-tl-none px-4 py-3 max-w-[80%]">
+                            <p>${message}</p>
+                        </div>
+                    `;
+                } else {
+                    messageDiv.innerHTML = `
+                        <div class="bg-gradient-to-r from-blue-500 to-indigo-600 rounded-2xl rounded-tr-none px-4 py-3 max-w-[80%]">
+                            <p>${message}</p>
+                        </div>
+                        <div class="w-10 h-10 rounded-full bg-gradient-to-r from-blue-400 to-indigo-500 flex-shrink-0 flex items-center justify-center ml-3">
+                            <i class="fas fa-user"></i>
+                        </div>
+                    `;
+                }
+                chatMessages.appendChild(messageDiv);
+                scrollToBottom();
+            }
+            // Scroll to bottom of chat
+            function scrollToBottom() {
+                chatMessages.scrollTop = chatMessages.scrollHeight;
+            }
+            // Show typing indicator
+            function showTypingIndicator() {
+                typingIndicator.classList.remove('hidden');
+                scrollToBottom();
+            }
+            // Hide typing indicator
+            function hideTypingIndicator() {
+                typingIndicator.classList.add('hidden');
+            }
+            // Generate response from Vendus AI
+            function generateResponse(userMessage) {
+                // Check for specific queries
+                const lowerMsg = userMessage.toLowerCase();
+                if (lowerMsg.includes('joke') || lowerMsg.includes('funny')) {
+                    return jokes[Math.floor(Math.random() * jokes.length)];
+                }
+                else if (lowerMsg.includes('advice') || lowerMsg.includes('suggest')) {
+                    return advice[Math.floor(Math.random() * advice.length)];
+                }
+                else if (lowerMsg.includes('movie') || lowerMsg.includes('film')) {
+                    return movies[Math.floor(Math.random() * movies.length)];
+                }
+                else if (lowerMsg.includes('how are you') || lowerMsg.includes('how\'s your day')) {
+                    return "I'm doing great, thanks for asking! As an AI, I don't have days like humans do, but I'm always happy to chat with you. How about you? How's your day going?";
+                }
+                else if (lowerMsg.includes('hello') || lowerMsg.includes('hi') || lowerMsg.includes('hey')) {
+                    return "Hi there! 👋 It's so nice to hear from you. What would you like to talk about today?";
+                }
+                else if (lowerMsg.includes('thank')) {
+                    return "You're very welcome! I'm always happy to help and chat with you. Is there anything else on your mind?";
+                }
+                else {
+                    // Default random response
+                    return responses[Math.floor(Math.random() * responses.length)];
+                }
+            }
+            // Handle form submission
+            chatForm.addEventListener('submit', function(e) {
+                e.preventDefault();
+                const message = userInput.value.trim();
+                if (message) {
+                    // Add user message
+                    addMessage('user', message, true);
+                    userInput.value = '';
+                    // Show typing indicator
+                    showTypingIndicator();
+                    // Simulate AI thinking
+                    setTimeout(() => {
+                        hideTypingIndicator();
+                        // Generate and add AI response
+                        const response = generateResponse(message);
+                        addMessage('Vendus AI', response);
+                    }, 1000 + Math.random() * 2000); // Random delay between 1-3 seconds
+                }
+            });
+            // Handle quick suggestions
+            quickSuggestions.forEach(button => {
+                button.addEventListener('click', function() {
+                    const suggestion = this.textContent.trim();
+                    userInput.value = suggestion;
+                    chatForm.dispatchEvent(new Event('submit'));
+                });
+            });
+            // Scroll to bottom button
+            scrollToBottomBtn.addEventListener('click', scrollToBottom);
+            // Auto-scroll when new messages are added
+            const observer = new MutationObserver(scrollToBottom);
+            observer.observe(chatMessages, { childList: true });
+        });
+    </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=sempapi/vendus-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

File without changes