Spaces:

Kostya5605
/

luna-with-ai

Running

App Files Files Community

Kostya5605 commited on May 7

Commit

cb4fb84

verified ·

1 Parent(s): 16c4e0b

Add 3 files

Browse files

Files changed (3) hide show

README.md +7 -5
index.html +363 -19
prompts.txt +1 -0

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Luna With Ai
-emoji: 💻
-colorFrom: indigo
-colorTo: pink
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: luna-with-ai
+emoji: 🐳
+colorFrom: green
+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,363 @@
-<!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>AI Companion - 2D Virtual Girl</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%, 100% { transform: translateY(0); }
+            50% { transform: translateY(-10px); }
+        }
+        @keyframes blink {
+            0%, 100% { height: 20px; }
+            50% { height: 5px; }
+        }
+        .character {
+            animation: float 3s ease-in-out infinite;
+        }
+        .eye {
+            animation: blink 3s infinite;
+        }
+        .chat-bubble {
+            border-radius: 20px;
+            position: relative;
+            opacity: 0;
+            transform: translateY(10px);
+            transition: all 0.3s ease;
+        }
+        .chat-bubble.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        .typing-indicator span {
+            display: inline-block;
+            width: 8px;
+            height: 8px;
+            background-color: #666;
+            border-radius: 50%;
+            margin: 0 2px;
+            animation: bounce 1.4s infinite ease-in-out;
+        }
+        .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); }
+        }
+        .mood-happy {
+            filter: hue-rotate(-20deg) brightness(1.1);
+        }
+        .mood-sad {
+            filter: hue-rotate(40deg) brightness(0.9);
+        }
+        .mood-angry {
+            filter: hue-rotate(-60deg) brightness(1.2);
+        }
+        .mood-neutral {
+            filter: none;
+        }
+    </style>
+</head>
+<body class="bg-gradient-to-b from-indigo-100 to-purple-100 min-h-screen flex flex-col items-center justify-center p-4">
+    <div class="max-w-4xl w-full bg-white rounded-3xl shadow-xl overflow-hidden">
+        <div class="flex flex-col md:flex-row h-full">
+            <!-- Character Panel -->
+            <div class="w-full md:w-1/3 bg-gradient-to-b from-pink-100 to-purple-200 p-6 flex flex-col items-center justify-center">
+                <div class="character relative mb-6" id="character">
+                    <!-- Head -->
+                    <div class="w-48 h-48 bg-pink-200 rounded-full relative">
+                        <!-- Eyes -->
+                        <div class="absolute top-16 left-10 w-8 h-8 bg-white rounded-full flex justify-center items-center">
+                            <div class="eye w-6 h-6 bg-blue-500 rounded-full relative overflow-hidden">
+                                <div class="absolute w-3 h-3 bg-black rounded-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"></div>
+                            </div>
+                        </div>
+                        <div class="absolute top-16 right-10 w-8 h-8 bg-white rounded-full flex justify-center items-center">
+                            <div class="eye w-6 h-6 bg-blue-500 rounded-full relative overflow-hidden">
+                                <div class="absolute w-3 h-3 bg-black rounded-full top-1/2 left-1/2 transform -translate-x-1/2 -translate-y-1/2"></div>
+                            </div>
+                        </div>
+                        <!-- Mouth -->
+                        <div class="absolute bottom-12 left-1/2 transform -translate-x-1/2 w-16 h-8 bg-pink-300 rounded-b-full" id="mouth"></div>
+                        <!-- Blush -->
+                        <div class="absolute bottom-16 left-6 w-6 h-3 bg-pink-300 opacity-60 rounded-full"></div>
+                        <div class="absolute bottom-16 right-6 w-6 h-3 bg-pink-300 opacity-60 rounded-full"></div>
+                    </div>
+                    <!-- Body -->
+                    <div class="w-32 h-40 bg-pink-100 rounded-t-full mt-4 relative">
+                        <!-- Arms -->
+                        <div class="absolute -left-8 top-8 w-16 h-6 bg-pink-100 rounded-full transform -rotate-45"></div>
+                        <div class="absolute -right-8 top-8 w-16 h-6 bg-pink-100 rounded-full transform rotate-45"></div>
+                    </div>
+                </div>
+                <div class="text-center">
+                    <h2 class="text-2xl font-bold text-purple-800">Luna</h2>
+                    <p class="text-purple-600">Your AI Companion</p>
+                    <div class="mt-4 flex justify-center space-x-2">
+                        <button class="mood-btn bg-blue-100 text-blue-800 p-2 rounded-full" data-mood="happy">
+                            <i class="fas fa-smile"></i>
+                        </button>
+                        <button class="mood-btn bg-yellow-100 text-yellow-800 p-2 rounded-full" data-mood="sad">
+                            <i class="fas fa-sad-tear"></i>
+                        </button>
+                        <button class="mood-btn bg-red-100 text-red-800 p-2 rounded-full" data-mood="angry">
+                            <i class="fas fa-angry"></i>
+                        </button>
+                        <button class="mood-btn bg-gray-100 text-gray-800 p-2 rounded-full" data-mood="neutral">
+                            <i class="fas fa-meh"></i>
+                        </button>
+                    </div>
+                </div>
+                <div class="mt-6 w-full">
+                    <div class="bg-white bg-opacity-70 rounded-xl p-4">
+                        <h3 class="font-semibold text-purple-700">Personality</h3>
+                        <div class="flex flex-wrap gap-2 mt-2">
+                            <span class="bg-purple-100 text-purple-800 px-2 py-1 rounded-full text-xs">Friendly</span>
+                            <span class="bg-pink-100 text-pink-800 px-2 py-1 rounded-full text-xs">Curious</span>
+                            <span class="bg-blue-100 text-blue-800 px-2 py-1 rounded-full text-xs">Playful</span>
+                            <span class="bg-green-100 text-green-800 px-2 py-1 rounded-full text-xs">Supportive</span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- Chat Panel -->
+            <div class="w-full md:w-2/3 p-6 flex flex-col">
+                <div class="flex items-center mb-6">
+                    <div class="w-10 h-10 bg-pink-200 rounded-full flex items-center justify-center mr-3">
+                        <i class="fas fa-robot text-purple-700"></i>
+                    </div>
+                    <div>
+                        <h2 class="font-bold text-purple-800">Chat with Luna</h2>
+                        <p class="text-xs text-gray-500">AI-powered virtual companion</p>
+                    </div>
+                </div>
+                <div class="flex-1 overflow-y-auto mb-4 space-y-4" id="chat-container">
+                    <!-- Initial greeting -->
+                    <div class="chat-bubble visible">
+                        <div class="bg-purple-100 text-purple-900 p-4 rounded-2xl rounded-tl-none max-w-xs">
+                            <p>Hello! I'm Luna, your AI companion. How can I brighten your day today? 💖</p>
+                        </div>
+                    </div>
+                </div>
+                <div class="mt-auto">
+                    <div class="relative">
+                        <textarea id="user-input" class="w-full p-4 pr-12 border border-purple-200 rounded-2xl focus:outline-none focus:ring-2 focus:ring-purple-300 resize-none" placeholder="Type your message..." rows="2"></textarea>
+                        <button id="send-btn" class="absolute right-3 bottom-3 bg-purple-600 text-white p-2 rounded-full hover:bg-purple-700 transition">
+                            <i class="fas fa-paper-plane"></i>
+                        </button>
+                    </div>
+                    <div class="flex justify-between items-center mt-2 text-xs text-gray-500">
+                        <div>
+                            <button id="voice-btn" class="mr-2 text-purple-600 hover:text-purple-800">
+                                <i class="fas fa-microphone"></i>
+                            </button>
+                            <button id="clear-btn" class="text-gray-500 hover:text-gray-700">
+                                <i class="fas fa-trash-alt"></i> Clear chat
+                            </button>
+                        </div>
+                        <div id="typing-indicator" class="typing-indicator hidden">
+                            <span></span>
+                            <span></span>
+                            <span></span>
+                        </div>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+    <script>
+        document.addEventListener('DOMContentLoaded', function() {
+            const chatContainer = document.getElementById('chat-container');
+            const userInput = document.getElementById('user-input');
+            const sendBtn = document.getElementById('send-btn');
+            const voiceBtn = document.getElementById('voice-btn');
+            const clearBtn = document.getElementById('clear-btn');
+            const typingIndicator = document.getElementById('typing-indicator');
+            const character = document.getElementById('character');
+            const mouth = document.getElementById('mouth');
+            let currentMood = 'happy';
+            // Sample responses based on mood and input
+            const responses = {
+                greeting: [
+                    "Hello there! How are you feeling today?",
+                    "Hi! It's nice to meet you. What's on your mind?",
+                    "Hey! I'm here to chat whenever you need me."
+                ],
+                question: [
+                    "That's an interesting question! Let me think...",
+                    "Hmm, I'd say it depends on the situation.",
+                    "I'm not entirely sure, but here's what I think."
+                ],
+                compliment: [
+                    "Aww, you're making me blush! Thank you!",
+                    "That's so sweet of you to say!",
+                    "You're too kind! I appreciate it."
+                ],
+                sad: [
+                    "I'm sorry to hear that. Would you like to talk about it?",
+                    "It's okay to feel that way. I'm here for you.",
+                    "Sending you virtual hugs. Things will get better."
+                ],
+                happy: [
+                    "That's wonderful! I'm happy for you!",
+                    "Yay! That's great news!",
+                    "Your happiness makes me happy too!"
+                ],
+                confused: [
+                    "I'm not sure I understand. Could you explain more?",
+                    "Hmm, I might need more context to help with that.",
+                    "Let me think about that for a moment..."
+                ],
+                default: [
+                    "Tell me more about that.",
+                    "That's interesting! What else?",
+                    "I'd love to hear more about your thoughts on this."
+                ]
+            };
+            // Mood buttons
+            document.querySelectorAll('.mood-btn').forEach(btn => {
+                btn.addEventListener('click', function() {
+                    currentMood = this.dataset.mood;
+                    updateCharacterMood();
+                });
+            });
+            // Update character appearance based on mood
+            function updateCharacterMood() {
+                character.className = 'character relative mb-6';
+                character.classList.add(`mood-${currentMood}`);
+                // Change mouth shape based on mood
+                switch(currentMood) {
+                    case 'happy':
+                        mouth.className = 'absolute bottom-12 left-1/2 transform -translate-x-1/2 w-16 h-8 bg-pink-300 rounded-b-full';
+                        break;
+                    case 'sad':
+                        mouth.className = 'absolute bottom-16 left-1/2 transform -translate-x-1/2 w-16 h-4 bg-pink-300 rounded-t-full';
+                        break;
+                    case 'angry':
+                        mouth.className = 'absolute bottom-14 left-1/2 transform -translate-x-1/2 w-16 h-2 bg-pink-300';
+                        break;
+                    default:
+                        mouth.className = 'absolute bottom-12 left-1/2 transform -translate-x-1/2 w-12 h-4 bg-pink-300';
+                }
+            }
+            // Send message function
+            function sendMessage() {
+                const message = userInput.value.trim();
+                if (message === '') return;
+                // Add user message to chat
+                addMessageToChat(message, 'user');
+                userInput.value = '';
+                // Show typing indicator
+                typingIndicator.classList.remove('hidden');
+                // Simulate AI thinking time
+                setTimeout(() => {
+                    typingIndicator.classList.add('hidden');
+                    const aiResponse = generateAIResponse(message);
+                    addMessageToChat(aiResponse, 'ai');
+                    // Scroll to bottom
+                    chatContainer.scrollTop = chatContainer.scrollHeight;
+                }, 1000 + Math.random() * 2000);
+            }
+            // Add message to chat container
+            function addMessageToChat(message, sender) {
+                const bubble = document.createElement('div');
+                bubble.className = 'chat-bubble';
+                const content = document.createElement('div');
+                content.className = sender === 'user'
+                    ? 'bg-purple-600 text-white p-4 rounded-2xl rounded-tr-none ml-auto max-w-xs'
+                    : 'bg-purple-100 text-purple-900 p-4 rounded-2xl rounded-tl-none max-w-xs';
+                content.textContent = message;
+                bubble.appendChild(content);
+                chatContainer.appendChild(bubble);
+                // Make bubble visible with animation
+                setTimeout(() => {
+                    bubble.classList.add('visible');
+                }, 10);
+                // Scroll to bottom
+                chatContainer.scrollTop = chatContainer.scrollHeight;
+            }
+            // Generate AI response based on input
+            function generateAIResponse(input) {
+                input = input.toLowerCase();
+                // Determine response category
+                let category = 'default';
+                if (input.includes('?') || input.includes('what') || input.includes('how') || input.includes('why')) {
+                    category = 'question';
+                } else if (input.includes('hi') || input.includes('hello') || input.includes('hey')) {
+                    category = 'greeting';
+                } else if (input.includes('love') || input.includes('like') || input.includes('cute') || input.includes('nice')) {
+                    category = 'compliment';
+                } else if (input.includes('sad') || input.includes('upset') || input.includes('depressed') || input.includes('unhappy')) {
+                    category = 'sad';
+                } else if (input.includes('happy') || input.includes('joy') || input.includes('excited') || input.includes('great')) {
+                    category = 'happy';
+                } else if (input.includes('confused') || input.includes('dont know') || input.includes('understand')) {
+                    category = 'confused';
+                }
+                // Get random response from selected category
+                const possibleResponses = responses[category] || responses['default'];
+                const randomIndex = Math.floor(Math.random() * possibleResponses.length);
+                return possibleResponses[randomIndex];
+            }
+            // Event listeners
+            sendBtn.addEventListener('click', sendMessage);
+            userInput.addEventListener('keypress', function(e) {
+                if (e.key === 'Enter' && !e.shiftKey) {
+                    e.preventDefault();
+                    sendMessage();
+                }
+            });
+            voiceBtn.addEventListener('click', function() {
+                alert('Voice input would be implemented here in a real application!');
+            });
+            clearBtn.addEventListener('click', function() {
+                if (confirm('Are you sure you want to clear the chat?')) {
+                    chatContainer.innerHTML = '';
+                    // Add initial greeting back
+                    addMessageToChat("Hello again! What would you like to talk about now?", 'ai');
+                }
+            });
+            // Initial mood
+            updateCharacterMood();
+        });
+    </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=Kostya5605/luna-with-ai" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>

prompts.txt ADDED Viewed

	@@ -0,0 +1 @@


1	+ Ai girl, разговаривает с тобой, 2д, взаимодействие с ней, генерация ответов с помощью ии