## Project Overview Design and build a premium web & mobile (PWA) front-end for a medical-chatbot platform that justifies a $10 000 price tag through sophisticated user experience, meticulous visual polish and bullet-proof engineering. The product revolves around a scannable Medical Card and must feel exclusive yet friction-less. ## Core User Flows **Registration** - Step-by-step wizard (max 3 screens) collects name, DOB, gender, allergies, chronic conditions, emergency contact and optional avatar. - On submit, a server-side endpoint returns a unique patient UUID and a signed JSON Web Token (JWT). - Front-end renders an animated “Medical Card” – a glossy 3-D card with embedded QR code (SVG + PNG fallback). - Card can be downloaded to Apple/Google Wallet or printed. **Authentication** - Scan-to-Sign-In - Uses WebRTC getUserMedia to open the camera, auto-detects QR, exchanges code for refreshed JWT. - Classic Sign-In - Email / username + password, both sent over HTTPS with HSTS and CSP headers. - Fast Switcher - Horizontal carousel shows avatars of previously signed-in profiles (localStorage). - Tap avatar → enter 4-digit PIN → instant login. - Guest Mode - “Browse as Guest” button skips auth, surfaces a watermark “GUEST – chats not saved”. **Consultation / Chat** - Two-pane split-screen layout: left = conversation, right = context panel (vitals, card, quick actions) [1]. - Messages stream in with typewriter animation and subtle haptic pulse on mobile [2]. - All chats autosave (IndexedDB offline cache + REST sync) except in Guest mode. - Each consultation is versioned so users can revisit timelines. ## Information Architecture | Section | Purpose | |---------|---------| | Top App Bar | Tiny patient card thumbnail, name, age; tap → full profile modal | | Conversation Pane | Rich Markdown, image/file attachments, voice notes | | Context Pane | Quick vitals input, previous prescriptions, “End Session” | | Settings Drawer | Theme toggle, language, manage PIN profiles | | Footer | “Made by Me” signature with micro-animation of signature stroke | ## Visual & Motion Design **Color Palette (AMOLED-only)** - #000000 Black (primary background) - #FFFFFF White (primary text) - #FF3B30 Red (error / destructive) - #D4AF37 Golden (premium accents, buttons) - #00C853 Green (success, online status) - #0A84FF Blue (interactive elements, links) Gradients: use 4-stop radial blends (Black→Blue→Green→Golden) at 10% opacity overlays for depth [2]. **Typography** - Heading: Inter Display, 700 - Body: Inter, 400 - Numeric (PIN, vitals): JetBrains Mono **Components** - Glass-morphism cards with 8 px blur, 1 px golden inner stroke. - Floating Action Button (FAB) with ripple in blue → green. - Lottie animations for card issuance, QR scan success, and “Made by Me” signature. **Motion** - 250 ms cubic-bezier(0.4, 0, 0.2, 1) for UI transitions. - Parallax tilt on Medical Card hover (DeviceOrientation API desktop / mobile). - Scroll-triggered fade-in of chat bubbles. ## Technical Stack - React 18 + TypeScript - Vite build pipeline, TailwindCSS (custom AMOLED palette) - Zustand for client state, React Query for API calls - WebAuthn (optional) for biometric PIN unlock - PWA: Service Worker for offline chat, Add-to-Home-Screen - ESLint + Prettier + Stylelint enforced CI - Lighthouse score ≥ 95 on Performance, Accessibility, Best-Practices, SEO ## Accessibility & Compliance - WCAG 2.2 AA: 4.5:1 contrast (white text on black, golden accents large-text only). - ARIA labels for camera & chat controls. - Reduced-motion media query disables animations. - HIPAA-conscious: all PHI confined to secure API calls, no PHI in localStorage. ## Security Notes - QR contains only opaque UUID; token exchanged server-side. - JWT 15 min expiry, rotating refresh token in HttpOnly cookie. - Content Security Policy blocks inline scripts. - PIN hashes (bcrypt) stored in IndexedDB, never sent off-device. ## Deliverables for the $10 000 Package - Figma design system (components, light & AMOLED dark themes) - Full-stack front-end repo with CI/CD GitHub Actions → Vercel preview - Unit + integration tests (Jest, Testing Library, Cypress e2e) - Lighthouse, Axe, and Playwright accessibility reports - Documentation site (Storybook) explaining components, theming, API mocks - 2 hrs onboarding workshop video call for hand-off This specification leverages your expertise in medical chatbots [3], your preference for colorful gradients and animations [2], centered card / split-screen layouts [1], and your premium high-end style [4]. [1] preferences.interface_layout [2] preferences.interface_design [3] programming.chatbots [4] projects.premium_website - Initial Deployment

README.md

@@ -1,10 +1,12 @@
 ---
-title: V4
-emoji: 🌖
-colorFrom: pink
-colorTo: red
+title: v4
+emoji: 🐳
+colorFrom: gray
+colorTo: purple
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
 
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html

@@ -1,19 +1,441 @@
-<!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>MediChat Pro | Premium Medical 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">
+    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;700&display=swap" rel="stylesheet">
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=JetBrains+Mono:wght@400;700&display=swap');
+        
+        :root {
+            --gold: #D4AF37;
+            --blue: #0A84FF;
+            --green: #00C853;
+            --red: #FF3B30;
+        }
+        
+        body {
+            font-family: 'Inter', sans-serif;
+            background-color: #000;
+            color: #fff;
+            margin: 0;
+            padding: 0;
+            overflow-x: hidden;
+        }
+        
+        .mono {
+            font-family: 'JetBrains Mono', monospace;
+        }
+        
+        .glass-card {
+            background: rgba(0, 0, 0, 0.5);
+            backdrop-filter: blur(8px);
+            -webkit-backdrop-filter: blur(8px);
+            border: 1px solid rgba(212, 175, 55, 0.2);
+            box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
+        }
+        
+        .gold-border {
+            border: 1px solid var(--gold);
+        }
+        
+        .inner-gold-border {
+            box-shadow: inset 0 0 0 1px var(--gold);
+        }
+        
+        .gradient-bg {
+            background: radial-gradient(circle at 50% 50%, rgba(10, 132, 255, 0.1) 0%, rgba(0, 200, 83, 0.1) 50%, rgba(212, 175, 55, 0.1) 100%);
+        }
+        
+        .fab-ripple {
+            position: relative;
+            overflow: hidden;
+        }
+        
+        .fab-ripple:after {
+            content: "";
+            display: block;
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            top: 0;
+            left: 0;
+            pointer-events: none;
+            background-image: radial-gradient(circle, var(--blue) 10%, transparent 10.01%);
+            background-repeat: no-repeat;
+            background-position: 50%;
+            transform: scale(10,10);
+            opacity: 0;
+            transition: transform .5s, opacity 1s;
+        }
+        
+        .fab-ripple:active:after {
+            transform: scale(0,0);
+            opacity: 0.3;
+            transition: 0s;
+        }
+        
+        .chat-bubble {
+            opacity: 0;
+            transform: translateY(10px);
+            transition: opacity 0.3s ease-out, transform 0.3s ease-out;
+        }
+        
+        .chat-bubble.visible {
+            opacity: 1;
+            transform: translateY(0);
+        }
+        
+        .typewriter {
+            overflow: hidden;
+            border-right: 2px solid var(--gold);
+            white-space: nowrap;
+            margin: 0 auto;
+            letter-spacing: 0.15em;
+            animation: typing 3.5s steps(40, end), blink-caret 0.75s step-end infinite;
+        }
+        
+        @keyframes typing {
+            from { width: 0 }
+            to { width: 100% }
+        }
+        
+        @keyframes blink-caret {
+            from, to { border-color: transparent }
+            50% { border-color: var(--gold) }
+        }
+        
+        .medical-card {
+            transform-style: preserve-3d;
+            transition: transform 0.5s;
+            transform: perspective(1000px) rotateX(0deg) rotateY(0deg);
+        }
+        
+        .medical-card:hover {
+            transform: perspective(1000px) rotateX(5deg) rotateY(5deg);
+        }
+        
+        @media (max-width: 768px) {
+            .split-layout {
+                flex-direction: column;
+            }
+            
+            .conversation-pane, .context-pane {
+                width: 100% !important;
+            }
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col">
+    <!-- Top App Bar -->
+    <header class="bg-black py-4 px-6 flex justify-between items-center border-b border-gray-800">
+        <div class="flex items-center space-x-4">
+            <div class="relative">
+                <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center cursor-pointer medical-card" id="profileThumbnail">
+                    <div class="w-8 h-8 rounded-full bg-gradient-to-br from-blue-500 to-green-500 flex items-center justify-center text-white font-bold">JP</div>
+                    <div class="absolute -bottom-1 -right-1 w-4 h-4 rounded-full bg-green-500 border-2 border-black"></div>
+                </div>
+            </div>
+            <div>
+                <h1 class="text-white font-bold">John Peterson</h1>
+                <p class="text-gray-400 text-xs">42 years • Blood Type: A+</p>
+            </div>
+        </div>
+        <div class="flex items-center space-x-4">
+            <button class="text-gray-400 hover:text-white transition-colors">
+                <i class="fas fa-cog text-lg"></i>
+            </button>
+            <button class="text-gray-400 hover:text-white transition-colors">
+                <i class="fas fa-question-circle text-lg"></i>
+            </button>
+        </div>
+    </header>
+
+    <!-- Main Content -->
+    <main class="flex-1 flex split-layout">
+        <!-- Conversation Pane -->
+        <section class="w-2/3 p-6 flex flex-col" style="height: calc(100vh - 72px);">
+            <div class="flex-1 overflow-y-auto mb-4 space-y-4" id="chatContainer">
+                <!-- Chat bubbles will be added here by JavaScript -->
+            </div>
+            
+            <div class="glass-card rounded-lg p-4 gradient-bg">
+                <div class="flex items-center space-x-2">
+                    <div class="flex-1 relative">
+                        <input type="text" placeholder="Type your health concern..." 
+                               class="w-full bg-gray-900 text-white px-4 py-3 rounded-lg focus:outline-none focus:ring-2 focus:ring-blue-500 focus:border-transparent">
+                        <div class="absolute right-3 top-3 flex space-x-2">
+                            <button class="text-gray-400 hover:text-blue-500 transition-colors">
+                                <i class="fas fa-microphone"></i>
+                            </button>
+                            <button class="text-gray-400 hover:text-blue-500 transition-colors">
+                                <i class="fas fa-paperclip"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <button class="fab-ripple bg-gradient-to-br from-blue-500 to-green-500 text-white w-12 h-12 rounded-full flex items-center justify-center shadow-lg hover:shadow-xl transition-shadow">
+                        <i class="fas fa-paper-plane"></i>
+                    </button>
+                </div>
+                <div class="mt-2 text-xs text-gray-500 flex justify-between">
+                    <span>MediChat Pro v2.4.1</span>
+                    <span>End-to-end encrypted</span>
+                </div>
+            </div>
+        </section>
+        
+        <!-- Context Pane -->
+        <section class="w-1/3 border-l border-gray-800 p-6 flex flex-col" style="height: calc(100vh - 72px);">
+            <div class="glass-card rounded-lg p-6 mb-6 gradient-bg inner-gold-border">
+                <h2 class="text-xl font-bold text-white mb-4 flex items-center">
+                    <i class="fas fa-id-card mr-2 text-gold-500" style="color: var(--gold);"></i>
+                    Medical Card
+                </h2>
+                <div class="medical-card bg-gradient-to-br from-gray-900 to-gray-800 rounded-xl p-6 gold-border shadow-xl cursor-pointer transform transition-transform">
+                    <div class="flex justify-between items-start mb-6">
+                        <div>
+                            <h3 class="text-2xl font-bold">John Peterson</h3>
+                            <p class="text-gray-400">42 years • Male</p>
+                        </div>
+                        <div class="bg-black p-2 rounded">
+                            <div class="w-16 h-16 bg-white flex items-center justify-center">
+                                <!-- QR Code Placeholder -->
+                                <div class="grid grid-cols-4 gap-1 w-12 h-12">
+                                    <div class="bg-black"></div><div class="bg-black"></div><div class="bg-black"></div><div class="bg-black"></div>
+                                    <div class="bg-black"></div><div class="bg-white"></div><div class="bg-white"></div><div class="bg-black"></div>
+                                    <div class="bg-black"></div><div class="bg-white"></div><div class="bg-black"></div><div class="bg-black"></div>
+                                    <div class="bg-black"></div><div class="bg-black"></div><div class="bg-white"></div><div class="bg-black"></div>
+                                </div>
+                            </div>
+                        </div>
+                    </div>
+                    
+                    <div class="grid grid-cols-2 gap-4 mb-6">
+                        <div>
+                            <p class="text-gray-400 text-xs">Blood Type</p>
+                            <p class="font-bold">A+</p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400 text-xs">Allergies</p>
+                            <p class="font-bold">Penicillin</p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400 text-xs">Conditions</p>
+                            <p class="font-bold">Hypertension</p>
+                        </div>
+                        <div>
+                            <p class="text-gray-400 text-xs">Last Updated</p>
+                            <p class="font-bold">Jun 15, 2023</p>
+                        </div>
+                    </div>
+                    
+                    <div class="flex justify-between items-center">
+                        <button class="text-xs bg-black text-white px-3 py-1 rounded flex items-center">
+                            <i class="fas fa-download mr-1"></i> Save
+                        </button>
+                        <div class="text-xs text-gray-400">
+                            ID: 7X9P-2K4M-6R8Q
+                        </div>
+                    </div>
+                </div>
+            </div>
+            
+            <div class="glass-card rounded-lg p-6 mb-6 gradient-bg inner-gold-border">
+                <h2 class="text-xl font-bold text-white mb-4 flex items-center">
+                    <i class="fas fa-heartbeat mr-2" style="color: var(--red);"></i>
+                    Quick Vitals
+                </h2>
+                <div class="grid grid-cols-2 gap-4">
+                    <div class="bg-gray-900 rounded-lg p-3">
+                        <p class="text-gray-400 text-xs">Blood Pressure</p>
+                        <div class="flex items-end">
+                            <input type="text" value="120" class="bg-transparent border-b border-gray-700 w-8 text-right mono focus:outline-none">
+                            <span class="mx-1">/</span>
+                            <input type="text" value="80" class="bg-transparent border-b border-gray-700 w-8 text-right mono focus:outline-none">
+                            <span class="ml-1 text-xs">mmHg</span>
+                        </div>
+                    </div>
+                    <div class="bg-gray-900 rounded-lg p-3">
+                        <p class="text-gray-400 text-xs">Heart Rate</p>
+                        <div class="flex items-end">
+                            <input type="text" value="72" class="bg-transparent border-b border-gray-700 w-8 text-right mono focus:outline-none">
+                            <span class="ml-1 text-xs">bpm</span>
+                        </div>
+                    </div>
+                    <div class="bg-gray-900 rounded-lg p-3">
+                        <p class="text-gray-400 text-xs">Temperature</p>
+                        <div class="flex items-end">
+                            <input type="text" value="36.6" class="bg-transparent border-b border-gray-700 w-12 text-right mono focus:outline-none">
+                            <span class="ml-1 text-xs">°C</span>
+                        </div>
+                    </div>
+                    <div class="bg-gray-900 rounded-lg p-3">
+                        <p class="text-gray-400 text-xs">Oxygen</p>
+                        <div class="flex items-end">
+                            <input type="text" value="98" class="bg-transparent border-b border-gray-700 w-8 text-right mono focus:outline-none">
+                            <span class="ml-1 text-xs">%</span>
+                        </div>
+                    </div>
+                </div>
+                <button class="w-full mt-4 bg-gradient-to-r from-blue-500 to-green-500 text-white py-2 rounded-lg font-bold hover:opacity-90 transition-opacity">
+                    Update Vitals
+                </button>
+            </div>
+            
+            <div class="glass-card rounded-lg p-6 gradient-bg inner-gold-border flex-1 flex flex-col">
+                <h2 class="text-xl font-bold text-white mb-4 flex items-center">
+                    <i class="fas fa-history mr-2" style="color: var(--blue);"></i>
+                    Recent Consultations
+                </h2>
+                <div class="flex-1 overflow-y-auto">
+                    <div class="space-y-3">
+                        <div class="bg-gray-900 rounded-lg p-4 cursor-pointer hover:bg-gray-800 transition-colors">
+                            <div class="flex justify-between items-center mb-1">
+                                <h3 class="font-bold">Headache & Dizziness</h3>
+                                <span class="text-xs text-gray-400">Jun 12, 2023</span>
+                            </div>
+                            <p class="text-sm text-gray-400 truncate">Recommended: hydration, rest, follow up if symptoms persist...</p>
+                        </div>
+                        <div class="bg-gray-900 rounded-lg p-4 cursor-pointer hover:bg-gray-800 transition-colors">
+                            <div class="flex justify-between items-center mb-1">
+                                <h3 class="font-bold">Blood Pressure Review</h3>
+                                <span class="text-xs text-gray-400">May 28, 2023</span>
+                            </div>
+                            <p class="text-sm text-gray-400 truncate">Current medication appears effective, continue dosage...</p>
+                        </div>
+                        <div class="bg-gray-900 rounded-lg p-4 cursor-pointer hover:bg-gray-800 transition-colors">
+                            <div class="flex justify-between items-center mb-1">
+                                <h3 class="font-bold">Allergy Symptoms</h3>
+                                <span class="text-xs text-gray-400">Apr 15, 2023</span>
+                            </div>
+                            <p class="text-sm text-gray-400 truncate">Identified potential new allergen, recommended allergy testing...</p>
+                        </div>
+                    </div>
+                </div>
+                <button class="w-full mt-4 bg-black text-white py-2 rounded-lg font-bold border border-gray-700 hover:bg-gray-800 transition-colors">
+                    View All Consultations
+                </button>
+            </div>
+        </section>
+    </main>
+    
+    <!-- Footer -->
+    <footer class="bg-black py-4 px-6 border-t border-gray-800 flex justify-between items-center">
+        <div class="text-gray-500 text-sm">
+            <span class="font-bold" style="color: var(--gold);">MediChat</span> Pro • HIPAA Compliant
+        </div>
+        <div class="flex items-center space-x-4">
+            <button class="text-gray-500 hover:text-white transition-colors">
+                <i class="fab fa-apple"></i>
+            </button>
+            <button class="text-gray-500 hover:text-white transition-colors">
+                <i class="fab fa-google-play"></i>
+            </button>
+            <button class="text-gray-500 hover:text-white transition-colors">
+                <i class="fas fa-share-alt"></i>
+            </button>
+        </div>
+    </footer>
+    
+    <!-- Signature Animation -->
+    <div class="fixed bottom-4 right-4 text-xs text-gray-500 flex items-center">
+        <span class="mr-2">Made by</span>
+        <svg width="80" height="20" viewBox="0 0 200 40" class="signature">
+            <path fill="none" stroke="var(--gold)" stroke-width="2" stroke-dasharray="300" stroke-dashoffset="300" 
+                  d="M10,30 Q30,10 50,30 T90,30" class="animate-draw" style="animation: draw 2s ease-in-out forwards;"></path>
+        </svg>
+    </div>
+    
+    <script>
+        // Sample chat messages
+        const chatMessages = [
+            {
+                sender: 'bot',
+                text: 'Hello John, I\'m your MediChat assistant. How can I help you today?',
+                timestamp: '2:45 PM'
+            },
+            {
+                sender: 'user',
+                text: 'I\'ve been having headaches for the past 3 days.',
+                timestamp: '2:46 PM'
+            },
+            {
+                sender: 'bot',
+                text: 'I\'m sorry to hear that. To better assist you, could you rate the pain on a scale from 1 to 10?',
+                timestamp: '2:46 PM'
+            },
+            {
+                sender: 'user',
+                text: 'About a 6. It\'s persistent but not unbearable.',
+                timestamp: '2:47 PM'
+            },
+            {
+                sender: 'bot',
+                text: 'Thank you. Based on your medical history, I recommend:\n\n1. Hydration - drink at least 8 glasses of water today\n2. Rest - try to reduce screen time\n3. Monitor - if pain persists beyond 48 hours, we should schedule a video consultation\n\nWould you like me to set a reminder to check in tomorrow?',
+                timestamp: '2:48 PM'
+            }
+        ];
+        
+        // Render chat messages with animation
+        function renderChatMessages() {
+            const chatContainer = document.getElementById('chatContainer');
+            chatContainer.innerHTML = '';
+            
+            chatMessages.forEach((message, index) => {
+                const messageElement = document.createElement('div');
+                messageElement.className = `chat-bubble flex ${message.sender === 'user' ? 'justify-end' : 'justify-start'}`;
+                
+                messageElement.innerHTML = `
+                    <div class="max-w-xs md:max-w-md lg:max-w-lg ${message.sender === 'user' ? 'bg-gradient-to-br from-blue-500 to-green-500' : 'bg-gray-800'} rounded-2xl p-4 shadow-lg">
+                        <div class="text-white">${message.text}</div>
+                        <div class="text-xs mt-1 ${message.sender === 'user' ? 'text-blue-100' : 'text-gray-400'}">${message.timestamp}</div>
+                    </div>
+                `;
+                
+                chatContainer.appendChild(messageElement);
+                
+                // Animate in
+                setTimeout(() => {
+                    messageElement.classList.add('visible');
+                    
+                    // Add typewriter effect to bot messages
+                    if (message.sender === 'bot' && index === 0) {
+                        const textElement = messageElement.querySelector('div:first-child');
+                        textElement.classList.add('typewriter');
+                    }
+                }, index * 300);
+            });
+        }
+        
+        // Medical card hover effect
+        function setupMedicalCardHover() {
+            const card = document.querySelector('.medical-card');
+            
+            if (window.matchMedia("(min-width: 768px)").matches) {
+                card.addEventListener('mousemove', (e) => {
+                    const xAxis = (window.innerWidth / 2 - e.pageX) / 25;
+                    const yAxis = (window.innerHeight / 2 - e.pageY) / 25;
+                    card.style.transform = `perspective(1000px) rotateX(${yAxis}deg) rotateY(${xAxis}deg)`;
+                });
+                
+                card.addEventListener('mouseleave', () => {
+                    card.style.transform = 'perspective(1000px) rotateX(0deg) rotateY(0deg)';
+                });
+            }
+        }
+        
+        // Initialize
+        document.addEventListener('DOMContentLoaded', () => {
+            renderChatMessages();
+            setupMedicalCardHover();
+            
+            // Add animation for signature
+            const signature = document.querySelector('.signature path');
+            signature.style.animation = 'draw 2s ease-in-out forwards';
+        });
+    </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=MoiMoi-01/v4" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>