Spaces:

mitdow
/

deepsite-project-g7pus

Running

App Files Files Community

mitdow commited on Feb 22

Commit

267efe4

verified ·

1 Parent(s): be5e460

Initial DeepSite commit

Browse files

Files changed (4) hide show

README.md +9 -6
chat.html +450 -0
index.html +274 -19
utils.js +78 -0

README.md CHANGED Viewed

@@ -1,10 +1,13 @@
 ---
-title: Deepsite Project G7pus
-emoji: 🦀
-colorFrom: purple
-colorTo: blue
 sdk: static
-pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: DeepSite Project
+colorFrom: blue
+colorTo: purple
 sdk: static
+emoji: 💎
+tags:
+  - deepsite-v4
 ---
+# DeepSite Project
+This project has been created with [DeepSite](https://deepsite.hf.co) AI Vibe Coding.

chat.html ADDED Viewed

	@@ -0,0 +1,450 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Chat | AI Companion</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        .glass-panel {
+            background: rgba(30, 30, 40, 0.7);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .message-bubble {
+            max-width: 80%;
+            word-wrap: break-word;
+        }
+        .action-text {
+            color: #f472b6;
+            font-style: italic;
+            font-weight: 500;
+        }
+        .scrollbar-hide::-webkit-scrollbar {
+            display: none;
+        }
+        .scrollbar-hide {
+            -ms-overflow-style: none;
+            scrollbar-width: none;
+        }
+        .typing-indicator span {
+            animation: typing 1.4s infinite;
+            display: inline-block;
+            margin: 0 1px;
+        }
+        .typing-indicator span:nth-child(2) { animation-delay: 0.2s; }
+        .typing-indicator span:nth-child(3) { animation-delay: 0.4s; }
+        @keyframes typing {
+            0%, 100% { opacity: 0.2; transform: translateY(0); }
+            50% { opacity: 1; transform: translateY(-2px); }
+        }
+        .sidebar-item {
+            transition: all 0.2s;
+        }
+        .sidebar-item:hover {
+            background: rgba(168, 85, 247, 0.1);
+            border-left: 3px solid #a855f7;
+        }
+        .active-chat {
+            background: rgba(168, 85, 247, 0.15);
+            border-left: 3px solid #a855f7;
+        }
+    </style>
+</head>
+<body class="bg-gray-950 text-gray-100 h-screen overflow-hidden flex">
+    <!-- Mobile Sidebar Toggle -->
+    <button id="sidebarToggle" class="lg:hidden fixed top-4 left-4 z-50 p-2 bg-gray-800 rounded-lg shadow-lg">
+        <i data-lucide="menu" class="w-6 h-6"></i>
+    </button>
+    <!-- Sidebar -->
+    <aside id="sidebar" class="fixed lg:static inset-y-0 left-0 z-40 w-80 bg-gray-900 border-r border-gray-800 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 flex flex-col">
+        <!-- Sidebar Header -->
+        <div class="p-4 border-b border-gray-800">
+            <div class="flex items-center justify-between mb-4">
+                <h1 class="text-xl font-bold gradient-text flex items-center gap-2">
+                    <i data-lucide="heart" class="w-5 h-5 text-pink-500"></i>
+                    AI Companion
+                </h1>
+                <button id="closeSidebar" class="lg:hidden text-gray-400 hover:text-white">
+                    <i data-lucide="x" class="w-6 h-6"></i>
+                </button>
+            </div>
+            <button onclick="window.location.href='index.html'" class="w-full bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white py-2 rounded-lg font-medium transition-all flex items-center justify-center gap-2">
+                <i data-lucide="plus" class="w-4 h-4"></i>
+                New Character
+            </button>
+        </div>
+        <!-- Recent Chats -->
+        <div class="flex-1 overflow-y-auto py-4">
+            <h3 class="px-4 text-xs font-semibold text-gray-500 uppercase tracking-wider mb-2">Recent Chats</h3>
+            <div id="recentChatsList" class="space-y-1">
+                <!-- Populated by JS -->
+            </div>
+        </div>
+        <!-- Settings & User -->
+        <div class="border-t border-gray-800 p-4 space-y-2">
+            <button id="settingsBtn" class="sidebar-item w-full flex items-center gap-3 px-4 py-3 rounded-lg text-gray-300 hover:text-white">
+                <i data-lucide="settings" class="w-5 h-5"></i>
+                <span>Settings</span>
+            </button>
+            <button id="clearHistory" class="sidebar-item w-full flex items-center gap-3 px-4 py-3 rounded-lg text-gray-300 hover:text-red-400">
+                <i data-lucide="trash-2" class="w-5 h-5"></i>
+                <span>Clear History</span>
+            </button>
+        </div>
+    </aside>
+    <!-- Main Chat Area -->
+    <main class="flex-1 flex flex-col h-full relative">
+        <!-- Chat Header -->
+        <header class="glass-panel border-b border-gray-800 p-4 flex items-center justify-between sticky top-0 z-30">
+            <div class="flex items-center gap-3 ml-12 lg:ml-0">
+                <div class="relative">
+                    <img id="headerAvatar" src="" alt="Character" class="w-10 h-10 rounded-full object-cover border-2 border-pink-500/30">
+                    <div class="absolute bottom-0 right-0 w-3 h-3 bg-green-500 rounded-full border-2 border-gray-900"></div>
+                </div>
+                <div>
+                    <h2 id="headerName" class="font-semibold text-white">Loading...</h2>
+                    <p class="text-xs text-gray-400">Online • Scenario Active</p>
+                </div>
+            </div>
+            <div class="flex items-center gap-2">
+                <button id="scenarioBtn" class="p-2 hover:bg-gray-800 rounded-lg transition-colors text-gray-400 hover:text-pink-400" title="View Scenario">
+                    <i data-lucide="book-open" class="w-5 h-5"></i>
+                </button>
+                <button id="imageGenBtn" class="p-2 hover:bg-gray-800 rounded-lg transition-colors text-gray-400 hover:text-purple-400" title="Generate Image">
+                    <i data-lucide="image" class="w-5 h-5"></i>
+                </button>
+            </div>
+        </header>
+        <!-- Messages Container -->
+        <div id="messagesContainer" class="flex-1 overflow-y-auto p-4 space-y-4 scrollbar-hide bg-gradient-to-b from-gray-950 to-gray-900">
+            <!-- Scene Setup Message -->
+            <div id="sceneMessage" class="hidden">
+                <div class="flex justify-center mb-6">
+                    <div class="glass-panel rounded-2xl p-4 max-w-2xl border-l-4 border-pink-500">
+                        <div class="flex items-center gap-2 mb-2 text-pink-400 text-sm font-semibold">
+                            <i data-lucide="sparkles" class="w-4 h-4"></i>
+                            Scene Setting
+                        </div>
+                        <p id="sceneText" class="text-gray-300 text-sm leading-relaxed"></p>
+                    </div>
+                </div>
+            </div>
+            <!-- Messages will be inserted here -->
+        </div>
+        <!-- Typing Indicator -->
+        <div id="typingIndicator" class="hidden px-4 py-2">
+            <div class="flex items-center gap-2 text-gray-500 text-sm">
+                <span id="typingName">Character</span>
+                <div class="typing-indicator">
+                    <span class="w-1.5 h-1.5 bg-pink-500 rounded-full"></span>
+                    <span class="w-1.5 h-1.5 bg-pink-500 rounded-full"></span>
+                    <span class="w-1.5 h-1.5 bg-pink-500 rounded-full"></span>
+                </div>
+            </div>
+        </div>
+        <!-- Input Area -->
+        <div class="glass-panel border-t border-gray-800 p-4">
+            <form id="chatForm" class="flex gap-3 max-w-4xl mx-auto">
+                <div class="flex-1 relative">
+                    <input type="text" id="messageInput" placeholder="Type your message... (use * for actions)"
+                        class="w-full bg-gray-800/50 border border-gray-700 rounded-xl px-4 py-3 pr-12 text-white placeholder-gray-500 focus:outline-none focus:border-pink-500/50 transition-colors">
+                    <button type="button" id="quickAction" class="absolute right-3 top-1/2 -translate-y-1/2 text-gray-500 hover:text-pink-400 transition-colors" title="Quick Action">
+                        <i data-lucide="zap" class="w-5 h-5"></i>
+                    </button>
+                </div>
+                <button type="submit" class="bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500 text-white px-6 py-3 rounded-xl font-medium transition-all transform hover:scale-105 flex items-center gap-2">
+                    <i data-lucide="send" class="w-5 h-5"></i>
+                </button>
+            </form>
+            <p class="text-center text-xs text-gray-600 mt-2">Press Enter to send • Use *text* for actions</p>
+        </div>
+    </main>
+    <!-- Settings Modal -->
+    <div id="settingsModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
+        <div class="glass-panel rounded-2xl p-6 max-w-md w-full border border-gray-700">
+            <div class="flex justify-between items-center mb-6">
+                <h3 class="text-xl font-semibold">Settings</h3>
+                <button id="closeSettings" class="text-gray-400 hover:text-white">
+                    <i data-lucide="x" class="w-5 h-5"></i>
+                </button>
+            </div>
+            <div class="space-y-4">
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-2">API Configuration (Sinkin.ai)</label>
+                    <input type="text" id="apiKey" placeholder="Enter your API key..."
+                        class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:border-purple-500 focus:outline-none">
+                    <p class="text-xs text-gray-500 mt-1">Required for image generation</p>
+                </div>
+                <div>
+                    <label class="block text-sm font-medium text-gray-300 mb-2">Response Style</label>
+                    <select id="responseStyle" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-3 py-2 text-sm text-white focus:border-purple-500 focus:outline-none">
+                        <option value="balanced">Balanced</option>
+                        <option value="creative">Creative/Descriptive</option>
+                        <option value="direct">Direct</option>
+                    </select>
+                </div>
+                <div class="flex items-center justify-between">
+                    <span class="text-sm text-gray-300">NSFW Content</span>
+                    <button id="toggleNSFW" class="w-12 h-6 bg-pink-600 rounded-full relative transition-colors">
+                        <span class="absolute right-1 top-1 w-4 h-4 bg-white rounded-full transition-transform"></span>
+                    </button>
+                </div>
+            </div>
+            <button id="saveSettings" class="w-full mt-6 bg-purple-600 hover:bg-purple-500 text-white py-3 rounded-lg font-medium transition-colors">
+                Save Settings
+            </button>
+        </div>
+    </div>
+    <!-- Scenario Modal -->
+    <div id="scenarioModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
+        <div class="glass-panel rounded-2xl p-6 max-w-lg w-full border border-gray-700">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-xl font-semibold gradient-text">Current Scenario</h3>
+                <button id="closeScenario" class="text-gray-400 hover:text-white">
+                    <i data-lucide="x" class="w-5 h-5"></i>
+                </button>
+            </div>
+            <div class="bg-gray-800/30 rounded-xl p-4 mb-4">
+                <h4 id="scenarioTitle" class="font-semibold text-white mb-2"></h4>
+                <p id="scenarioDesc" class="text-gray-300 text-sm leading-relaxed"></p>
+            </div>
+            <div class="flex gap-2 text-sm text-gray-400">
+                <i data-lucide="info" class="w-4 h-4"></i>
+                <span>This scene sets the context for your conversation</span>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Initialize icons
+        lucide.createIcons();
+        // State
+        let currentCharacter = null;
+        let messages = [];
+        let isTyping = false;
+        // Load character
+        function loadCharacter() {
+            const saved = localStorage.getItem('currentCharacter');
+            if (saved) {
+                currentCharacter = JSON.parse(saved);
+                document.getElementById('headerName').textContent = currentCharacter.name;
+                document.getElementById('typingName').textContent = currentCharacter.name;
+                document.getElementById('headerAvatar').src = currentCharacter.image || 'http://static.photos/minimal/640x360/1';
+                document.getElementById('scenarioTitle').textContent = `Scene: ${currentCharacter.name}`;
+                document.getElementById('scenarioDesc').textContent = currentCharacter.scene;
+                // Show scene setting if first message exists
+                if (currentCharacter.scene) {
+                    document.getElementById('sceneMessage').classList.remove('hidden');
+                    document.getElementById('sceneText').textContent = currentCharacter.scene;
+                }
+                // Add first message if exists
+                if (currentCharacter.firstMessage) {
+                    addMessage('character', currentCharacter.firstMessage);
+                }
+            } else {
+                // Redirect to creator if no character
+                window.location.href = 'index.html';
+            }
+        }
+        // Parse message for actions (*text*)
+        function parseMessage(text) {
+            // Replace *text* with styled span
+            return text.replace(/\*(.*?)\*/g, '<span class="action-text">$1</span>');
+        }
+        // Add message to chat
+        function addMessage(sender, text, imageUrl = null) {
+            const container = document.getElementById('messagesContainer');
+            const isUser = sender === 'user';
+            const wrapper = document.createElement('div');
+            wrapper.className = `flex ${isUser ? 'justify-end' : 'justify-start'} mb-4`;
+            let content = '';
+            if (imageUrl) {
+                content = `<img src="${imageUrl}" class="rounded-lg max-w-sm shadow-lg border border-gray-700" alt="Generated">`;
+            } else {
+                const parsedText = parseMessage(text);
+                content = `<div class="message-bubble glass-panel ${isUser ? 'bg-pink-600/20 border-pink-500/30' : 'bg-gray-800/50'} rounded-2xl px-4 py-3 text-gray-100">${parsedText}</div>`;
+            }
+            wrapper.innerHTML = content;
+            container.appendChild(wrapper);
+            container.scrollTop = container.scrollHeight;
+            // Save to history
+            messages.push({ sender, text, imageUrl, timestamp: new Date() });
+            localStorage.setItem(`chat_${currentCharacter.id}`, JSON.stringify(messages));
+        }
+        // Simulate AI Response
+        function simulateResponse(userMessage) {
+            isTyping = true;
+            document.getElementById('typingIndicator').classList.remove('hidden');
+            setTimeout(() => {
+                isTyping = false;
+                document.getElementById('typingIndicator').classList.add('hidden');
+                // Simple response logic (replace with actual API integration)
+                const responses = [
+                    "*leans in closer* That's quite interesting... tell me more about what you're thinking.",
+                    "*smiles softly* I like where this is going. What else do you have in mind?",
+                    "*traces finger along your arm* Mmm, you're being very intriguing today.",
+                    "*bites lip* Really? I hadn't considered that... but I think I like it.",
+                    "*moves closer, voice dropping to a whisper* Go on, I'm listening..."
+                ];
+                const response = responses[Math.floor(Math.random() * responses.length)];
+                addMessage('character', response);
+            }, 1500 + Math.random() * 1000);
+        }
+        // Handle send message
+        document.getElementById('chatForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            const input = document.getElementById('messageInput');
+            const text = input.value.trim();
+            if (text && !isTyping) {
+                addMessage('user', text);
+                input.value = '';
+                simulateResponse(text);
+            }
+        });
+        // Quick action button
+        document.getElementById('quickAction').addEventListener('click', () => {
+            const input = document.getElementById('messageInput');
+            input.value = '*' + input.value + '*';
+            input.focus();
+        });
+        // Sidebar toggle
+        const sidebar = document.getElementById('sidebar');
+        document.getElementById('sidebarToggle').addEventListener('click', () => {
+            sidebar.classList.remove('-translate-x-full');
+        });
+        document.getElementById('closeSidebar').addEventListener('click', () => {
+            sidebar.classList.add('-translate-x-full');
+        });
+        // Load recent chats
+        function loadRecentChats() {
+            const recent = JSON.parse(localStorage.getItem('recentCharacters') || '[]');
+            const list = document.getElementById('recentChatsList');
+            list.innerHTML = '';
+            recent.forEach(char => {
+                const item = document.createElement('button');
+                item.className = 'sidebar-item w-full flex items-center gap-3 px-4 py-3 text-left';
+                if (currentCharacter && char.id === currentCharacter.id) {
+                    item.classList.add('active-chat');
+                }
+                item.innerHTML = `
+                    <img src="${char.image || 'http://static.photos/minimal/640x360/1'}" class="w-10 h-10 rounded-full object-cover border border-gray-700">
+                    <div class="flex-1 min-w-0">
+                        <h4 class="text-sm font-medium text-white truncate">${char.name}</h4>
+                        <p class="text-xs text-gray-500 truncate">${char.scene || 'No scenario'}</p>
+                    </div>
+                `;
+                item.addEventListener('click', () => {
+                    localStorage.setItem('currentCharacter', JSON.stringify(char));
+                    location.reload();
+                });
+                list.appendChild(item);
+            });
+        }
+        // Settings Modal
+        const settingsModal = document.getElementById('settingsModal');
+        document.getElementById('settingsBtn').addEventListener('click', () => {
+            settingsModal.classList.remove('hidden');
+            settingsModal.classList.add('flex');
+        });
+        document.getElementById('closeSettings').addEventListener('click', () => {
+            settingsModal.classList.add('hidden');
+            settingsModal.classList.remove('flex');
+        });
+        document.getElementById('saveSettings').addEventListener('click', () => {
+            settingsModal.classList.add('hidden');
+            settingsModal.classList.remove('flex');
+        });
+        // Scenario Modal
+        const scenarioModal = document.getElementById('scenarioModal');
+        document.getElementById('scenarioBtn').addEventListener('click', () => {
+            scenarioModal.classList.remove('hidden');
+            scenarioModal.classList.add('flex');
+        });
+        document.getElementById('closeScenario').addEventListener('click', () => {
+            scenarioModal.classList.add('hidden');
+            scenarioModal.classList.remove('flex');
+        });
+        // Image Generation in chat
+        document.getElementById('imageGenBtn').addEventListener('click', () => {
+            const prompt = prompt("Enter image prompt for Sinkin.ai (CyberRealistic):");
+            if (prompt) {
+                // Open Sinkin.ai with prompt
+                const encoded = encodeURIComponent(`CyberRealistic, ${prompt}, high quality, detailed`);
+                window.open(`https://sinkin.ai/m/d55J1xB?prompt=${encoded}`, '_blank');
+                // Simulate adding to chat after delay
+                setTimeout(() => {
+                    addMessage('user', `Generated image: "${prompt}"`, 'http://static.photos/minimal/640x360/69');
+                }, 1000);
+            }
+        });
+        // Clear history
+        document.getElementById('clearHistory').addEventListener('click', () => {
+            if (confirm('Clear current chat history?')) {
+                messages = [];
+                localStorage.removeItem(`chat_${currentCharacter.id}`);
+                document.getElementById('messagesContainer').innerHTML = '';
+                document.getElementById('sceneMessage').classList.remove('hidden');
+            }
+        });
+        // Initialize
+        loadCharacter();
+        loadRecentChats();
+        // Load previous messages if exist
+        const savedMessages = localStorage.getItem(`chat_${currentCharacter.id}`);
+        if (savedMessages) {
+            messages = JSON.parse(savedMessages);
+            messages.forEach(msg => {
+                if (msg.imageUrl) {
+                    addMessage(msg.sender, null, msg.imageUrl);
+                } else {
+                    addMessage(msg.sender, msg.text);
+                }
+            });
+        }
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -1,19 +1,274 @@
-<!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>Character Creator | AI Companion</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/lucide@latest"></script>
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap" rel="stylesheet">
+    <style>
+        body { font-family: 'Inter', sans-serif; }
+        .glass-panel {
+            background: rgba(30, 30, 40, 0.7);
+            backdrop-filter: blur(12px);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+        }
+        .gradient-text {
+            background: linear-gradient(135deg, #f472b6 0%, #a855f7 100%);
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+        }
+        .input-field {
+            background: rgba(255, 255, 255, 0.05);
+            border: 1px solid rgba(255, 255, 255, 0.1);
+            transition: all 0.3s ease;
+        }
+        .input-field:focus {
+            border-color: #a855f7;
+            box-shadow: 0 0 0 3px rgba(168, 85, 247, 0.1);
+        }
+        .preview-container {
+            background: linear-gradient(135deg, #1e1e28 0%, #2d2d3a 100%);
+        }
+        .action-pulse {
+            animation: pulse-glow 2s infinite;
+        }
+        @keyframes pulse-glow {
+            0%, 100% { box-shadow: 0 0 5px rgba(244, 114, 182, 0.5); }
+            50% { box-shadow: 0 0 20px rgba(244, 114, 182, 0.8); }
+        }
+    </style>
+</head>
+<body class="bg-gray-950 text-gray-100 min-h-screen overflow-x-hidden">
+    <!-- Background Effects -->
+    <div class="fixed inset-0 overflow-hidden pointer-events-none">
+        <div class="absolute top-0 left-1/4 w-96 h-96 bg-purple-600/20 rounded-full blur-3xl"></div>
+        <div class="absolute bottom-0 right-1/4 w-96 h-96 bg-pink-600/20 rounded-full blur-3xl"></div>
+    </div>
+    <div class="relative z-10 container mx-auto px-4 py-8 max-w-6xl">
+        <!-- Header -->
+        <header class="text-center mb-12">
+            <h1 class="text-5xl font-bold mb-4 gradient-text">Create Your Companion</h1>
+            <p class="text-gray-400 text-lg">Design your perfect AI partner and scenario</p>
+        </header>
+        <div class="grid lg:grid-cols-2 gap-8">
+            <!-- Character Builder Form -->
+            <div class="glass-panel rounded-2xl p-8">
+                <form id="characterForm" class="space-y-6">
+                    <div>
+                        <label class="block text-sm font-medium text-gray-300 mb-2">Character Name</label>
+                        <input type="text" id="charName" required placeholder="e.g., Violet, Mistress Aurora..."
+                            class="input-field w-full px-4 py-3 rounded-xl text-white placeholder-gray-500 focus:outline-none">
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-300 mb-2">Appearance Description</label>
+                        <textarea id="charAppearance" rows="3" placeholder="Long silver hair, piercing blue eyes, wearing a black lace dress..."
+                            class="input-field w-full px-4 py-3 rounded-xl text-white placeholder-gray-500 focus:outline-none resize-none"></textarea>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-300 mb-2">Personality & Traits</label>
+                        <textarea id="charPersonality" rows="3" placeholder="Dominant yet caring, playful tease, deeply affectionate..."
+                            class="input-field w-full px-4 py-3 rounded-xl text-white placeholder-gray-500 focus:outline-none resize-none"></textarea>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-300 mb-2">Scene/Scenario <span class="text-pink-400">*</span></label>
+                        <textarea id="charScene" rows="4" required placeholder="You meet at a dimly lit bar. She notices you from across the room and approaches with a mysterious smile..."
+                            class="input-field w-full px-4 py-3 rounded-xl text-white placeholder-gray-500 focus:outline-none resize-none"></textarea>
+                        <p class="text-xs text-gray-500 mt-1">Set the mood, location, and initial context</p>
+                    </div>
+                    <div>
+                        <label class="block text-sm font-medium text-gray-300 mb-2">First Message (Optional)</label>
+                        <textarea id="firstMessage" rows="2" placeholder="*leans in close* Well, aren't you a interesting one..."
+                            class="input-field w-full px-4 py-3 rounded-xl text-white placeholder-gray-500 focus:outline-none resize-none"></textarea>
+                    </div>
+                    <!-- Image Generation Section -->
+                    <div class="border-t border-gray-700 pt-6">
+                        <label class="block text-sm font-medium text-gray-300 mb-3">Character Portrait</label>
+                        <div class="flex gap-4 mb-4">
+                            <button type="button" id="generateImageBtn"
+                                class="flex-1 bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-500 hover:to-pink-500 text-white py-3 rounded-xl font-medium transition-all flex items-center justify-center gap-2">
+                                <i data-lucide="sparkles" class="w-4 h-4"></i>
+                                Generate with Sinkin.ai
+                            </button>
+                        </div>
+                        <p class="text-xs text-gray-500">Uses CyberRealistic model via Sinkin.ai</p>
+                    </div>
+                    <button type="submit"
+                        class="w-full bg-gradient-to-r from-pink-600 to-purple-600 hover:from-pink-500 hover:to-purple-500 text-white py-4 rounded-xl font-semibold text-lg transition-all transform hover:scale-[1.02] shadow-lg shadow-purple-500/25 flex items-center justify-center gap-2">
+                        <i data-lucide="message-circle" class="w-5 h-5"></i>
+                        Start Chatting
+                    </button>
+                </form>
+            </div>
+            <!-- Live Preview -->
+            <div class="lg:sticky lg:top-8 h-fit">
+                <div class="glass-panel rounded-2xl p-6">
+                    <h3 class="text-xl font-semibold mb-4 flex items-center gap-2">
+                        <i data-lucide="eye" class="w-5 h-5 text-pink-400"></i>
+                        Live Preview
+                    </h3>
+                    <div class="preview-container rounded-xl overflow-hidden aspect-[3/4] relative mb-4">
+                        <img id="previewImage" src="http://static.photos/minimal/640x360/1" alt="Character Preview"
+                            class="w-full h-full object-cover opacity-80">
+                        <div class="absolute inset-0 bg-gradient-to-t from-gray-900 via-transparent to-transparent"></div>
+                        <div class="absolute bottom-0 left-0 right-0 p-6">
+                            <h2 id="previewName" class="text-2xl font-bold text-white mb-1">Your Character</h2>
+                            <p id="previewScene" class="text-sm text-gray-300 line-clamp-2">Scene description will appear here...</p>
+                        </div>
+                    </div>
+                    <div class="space-y-3">
+                        <div class="flex items-center gap-3 text-sm text-gray-400">
+                            <i data-lucide="user" class="w-4 h-4"></i>
+                            <span id="previewPersonality" class="line-clamp-1">Personality traits...</span>
+                        </div>
+                        <div class="flex items-center gap-3 text-sm text-gray-400">
+                            <i data-lucide="image" class="w-4 h-4"></i>
+                            <span id="previewAppearance" class="line-clamp-1">Appearance details...</span>
+                        </div>
+                    </div>
+                </div>
+                <!-- Tips Card -->
+                <div class="mt-6 glass-panel rounded-2xl p-6 border-l-4 border-pink-500">
+                    <h4 class="font-semibold text-pink-400 mb-2 flex items-center gap-2">
+                        <i data-lucide="lightbulb" class="w-4 h-4"></i>
+                        Pro Tips
+                    </h4>
+                    <ul class="text-sm text-gray-400 space-y-2">
+                        <li>• Use *asterisks* for actions in chat (e.g., *smiles seductively*)</li>
+                        <li>• Detailed scenes create more immersive experiences</li>
+                        <li>• Generate images to bring your character to life</li>
+                    </ul>
+                </div>
+            </div>
+        </div>
+    </div>
+    <!-- Image Generation Modal -->
+    <div id="imageModal" class="fixed inset-0 bg-black/80 backdrop-blur-sm z-50 hidden items-center justify-center p-4">
+        <div class="glass-panel rounded-2xl p-6 max-w-md w-full">
+            <div class="flex justify-between items-center mb-4">
+                <h3 class="text-xl font-semibold">Generate Portrait</h3>
+                <button id="closeModal" class="text-gray-400 hover:text-white">
+                    <i data-lucide="x" class="w-5 h-5"></i>
+                </button>
+            </div>
+            <p class="text-sm text-gray-400 mb-4">This will open Sinkin.ai with your character description.</p>
+            <div class="bg-gray-800/50 rounded-lg p-3 mb-4 text-sm text-gray-300" id="promptPreview"></div>
+            <div class="flex gap-3">
+                <button id="confirmGenerate" class="flex-1 bg-purple-600 hover:bg-purple-500 text-white py-3 rounded-lg font-medium transition-colors">
+                    Open Sinkin.ai
+                </button>
+                <button id="cancelGenerate" class="flex-1 bg-gray-700 hover:bg-gray-600 text-white py-3 rounded-lg font-medium transition-colors">
+                    Cancel
+                </button>
+            </div>
+        </div>
+    </div>
+    <script>
+        // Initialize Lucide icons
+        lucide.createIcons();
+        // Live Preview Updates
+        const inputs = {
+            name: document.getElementById('charName'),
+            appearance: document.getElementById('charAppearance'),
+            personality: document.getElementById('charPersonality'),
+            scene: document.getElementById('charScene')
+        };
+        const preview = {
+            name: document.getElementById('previewName'),
+            appearance: document.getElementById('previewAppearance'),
+            personality: document.getElementById('previewPersonality'),
+            scene: document.getElementById('previewScene')
+        };
+        Object.keys(inputs).forEach(key => {
+            inputs[key].addEventListener('input', (e) => {
+                if (key === 'name') {
+                    preview[key].textContent = e.target.value || 'Your Character';
+                } else {
+                    preview[key].textContent = e.target.value || key.charAt(0).toUpperCase() + key.slice(1) + '...';
+                }
+            });
+        });
+        // Image Generation
+        const modal = document.getElementById('imageModal');
+        const generateBtn = document.getElementById('generateImageBtn');
+        const closeModal = document.getElementById('closeModal');
+        const cancelGenerate = document.getElementById('cancelGenerate');
+        const confirmGenerate = document.getElementById('confirmGenerate');
+        const promptPreview = document.getElementById('promptPreview');
+        generateBtn.addEventListener('click', () => {
+            const appearance = inputs.appearance.value || 'beautiful portrait';
+            const name = inputs.name.value || 'character';
+            const prompt = `CyberRealistic portrait of ${name}, ${appearance}, high quality, detailed, 8k, professional photography`;
+            promptPreview.textContent = prompt;
+            modal.classList.remove('hidden');
+            modal.classList.add('flex');
+        });
+        [closeModal, cancelGenerate].forEach(btn => {
+            btn.addEventListener('click', () => {
+                modal.classList.add('hidden');
+                modal.classList.remove('flex');
+            });
+        });
+        confirmGenerate.addEventListener('click', () => {
+            const appearance = inputs.appearance.value || 'beautiful portrait';
+            const name = inputs.name.value || 'character';
+            const prompt = encodeURIComponent(`CyberRealistic portrait of ${name}, ${appearance}, high quality, detailed, 8k`);
+            window.open(`https://sinkin.ai/m/d55J1xB?prompt=${prompt}`, '_blank');
+            modal.classList.add('hidden');
+            modal.classList.remove('flex');
+        });
+        // Form Submission
+        document.getElementById('characterForm').addEventListener('submit', (e) => {
+            e.preventDefault();
+            const characterData = {
+                id: Date.now().toString(),
+                name: inputs.name.value,
+                appearance: inputs.appearance.value,
+                personality: inputs.personality.value,
+                scene: inputs.scene.value,
+                firstMessage: document.getElementById('firstMessage').value,
+                createdAt: new Date().toISOString(),
+                image: document.getElementById('previewImage').src
+            };
+            // Save to localStorage
+            localStorage.setItem('currentCharacter', JSON.stringify(characterData));
+            // Add to recent characters
+            const recent = JSON.parse(localStorage.getItem('recentCharacters') || '[]');
+            recent.unshift(characterData);
+            localStorage.setItem('recentCharacters', JSON.stringify(recent.slice(0, 10)));
+            // Redirect to chat
+            window.location.href = 'chat.html';
+        });
+        // Update preview image randomly on load for variety
+        const seeds = [42, 69, 133, 256, 777];
+        const randomSeed = seeds[Math.floor(Math.random() * seeds.length)];
+        document.getElementById('previewImage').src = `http://static.photos/minimal/640x360/${randomSeed}`;
+    </script>
+<script src="https://deepsite.hf.co/deepsite-badge.js"></script>
+</body>
+</html>

utils.js ADDED Viewed

	@@ -0,0 +1,78 @@

+// Text parsing utilities for NSFW chatbot
+class MessageParser {
+    // Parse action text between asterisks
+    static parseActions(text) {
+        const actionRegex = /\*(.*?)\*/g;
+        return text.replace(actionRegex, '<span class="action-text">$1</span>');
+    }
+    // Detect NSFW content warnings
+    static containsExplicit(text) {
+        const explicitTerms = ['nsfw', 'explicit', 'xxx', 'adult']; // Simplified for demo
+        return explicitTerms.some(term => text.toLowerCase().includes(term));
+    }
+    // Format timestamp
+    static formatTime(date) {
+        return new Date(date).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' });
+    }
+    // Generate image prompt for Sinkin.ai
+    static generateImagePrompt(character, additionalPrompt = '') {
+        const basePrompt = `CyberRealistic, ${character.appearance || 'portrait'}, ${character.scene || ''}, ${additionalPrompt}, high quality, detailed, 8k, professional photography`;
+        return encodeURIComponent(basePrompt);
+    }
+}
+// Character storage management
+class CharacterManager {
+    static save(character) {
+        const key = `char_${character.id}`;
+        localStorage.setItem(key, JSON.stringify(character));
+        this.addToRecent(character);
+    }
+    static load(id) {
+        return JSON.parse(localStorage.getItem(`char_${id}`) || 'null');
+    }
+    static addToRecent(character) {
+        let recent = JSON.parse(localStorage.getItem('recentCharacters') || '[]');
+        recent = recent.filter(c => c.id !== character.id);
+        recent.unshift(character);
+        localStorage.setItem('recentCharacters', JSON.stringify(recent.slice(0, 10)));
+    }
+    static getRecent() {
+        return JSON.parse(localStorage.getItem('recentCharacters') || '[]');
+    }
+    static delete(id) {
+        localStorage.removeItem(`char_${id}`);
+        let recent = this.getRecent();
+        recent = recent.filter(c => c.id !== id);
+        localStorage.setItem('recentCharacters', JSON.stringify(recent));
+    }
+}
+// Sinkin.ai integration helper
+class SinkinAI {
+    static BASE_URL = 'https://sinkin.ai/m/d55J1xB';
+    static generateLink(prompt, options = {}) {
+        const params = new URLSearchParams({
+            prompt: `CyberRealistic, ${prompt}, detailed, high quality`,
+            ...options
+        });
+        return `${this.BASE_URL}?${params.toString()}`;
+    }
+    static openGenerator(prompt) {
+        window.open(this.generateLink(prompt), '_blank');
+    }
+}
+// Export for use in other scripts
+if (typeof module !== 'undefined' && module.exports) {
+    module.exports = { MessageParser, CharacterManager, SinkinAI };
+}