Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>SoulSync AI - Emotional Connection Technology</title> | |
| <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=Poppins:wght@300;400;500;600;700&family=Playfair+Display:wght@400;500;700&display=swap" rel="stylesheet"> | |
| <script src="https://cdn.jsdelivr.net/npm/chart.js"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script> | |
| <style> | |
| :root { | |
| --primary: #8a4fff; | |
| --primary-dark: #6c2bff; | |
| --secondary: #ff6b8b; | |
| --dark: #2a2a4a; | |
| --light: #f8f9ff; | |
| --gray: #e0e0f0; | |
| --success: #4caf50; | |
| --warning: #ff9800; | |
| --error: #f44336; | |
| } | |
| * { | |
| margin: 0; | |
| padding: 0; | |
| box-sizing: border-box; | |
| } | |
| body { | |
| font-family: 'Poppins', sans-serif; | |
| background: linear-gradient(135deg, #f8f9ff 0%, #e6e9ff 100%); | |
| color: var(--dark); | |
| line-height: 1.6; | |
| overflow-x: hidden; | |
| } | |
| .container { | |
| width: 100%; | |
| max-width: 1200px; | |
| margin: 0 auto; | |
| padding: 0 20px; | |
| } | |
| /* Header Styles */ | |
| header { | |
| background-color: white; | |
| box-shadow: 0 2px 15px rgba(0, 0, 0, 0.1); | |
| position: sticky; | |
| top: 0; | |
| z-index: 100; | |
| } | |
| .navbar { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| padding: 20px 0; | |
| } | |
| .logo { | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| font-size: 24px; | |
| font-weight: 700; | |
| color: var(--primary); | |
| font-family: 'Playfair Display', serif; | |
| } | |
| .logo i { | |
| color: var(--secondary); | |
| } | |
| .nav-links { | |
| display: flex; | |
| gap: 30px; | |
| } | |
| .nav-links a { | |
| text-decoration: none; | |
| color: var(--dark); | |
| font-weight: 500; | |
| transition: color 0.3s; | |
| } | |
| .nav-links a:hover { | |
| color: var(--primary); | |
| } | |
| .auth-buttons { | |
| display: flex; | |
| gap: 15px; | |
| } | |
| .btn { | |
| padding: 10px 20px; | |
| border-radius: 30px; | |
| font-weight: 500; | |
| cursor: pointer; | |
| transition: all 0.3s ease; | |
| border: none; | |
| font-size: 16px; | |
| } | |
| .btn-primary { | |
| background-color: var(--primary); | |
| color: white; | |
| } | |
| .btn-primary:hover { | |
| background-color: var(--primary-dark); | |
| transform: translateY(-2px); | |
| box-shadow: 0 5px 15px rgba(138, 79, 255, 0.3); | |
| } | |
| .btn-secondary { | |
| background-color: white; | |
| color: var(--primary); | |
| border: 2px solid var(--primary); | |
| } | |
| .btn-secondary:hover { | |
| background-color: var(--primary); | |
| color: white; | |
| } | |
| /* Hero Section */ | |
| .hero { | |
| padding: 80px 0; | |
| display: flex; | |
| align-items: center; | |
| gap: 50px; | |
| } | |
| .hero-content { | |
| flex: 1; | |
| } | |
| .hero h1 { | |
| font-size: 3.5rem; | |
| font-weight: 700; | |
| line-height: 1.2; | |
| margin-bottom: 20px; | |
| font-family: 'Playfair Display', serif; | |
| color: var(--dark); | |
| } | |
| .hero h1 span { | |
| color: var(--primary); | |
| } | |
| .hero p { | |
| font-size: 1.2rem; | |
| margin-bottom: 30px; | |
| color: #555; | |
| } | |
| .hero-image { | |
| flex: 1; | |
| display: flex; | |
| justify-content: center; | |
| position: relative; | |
| } | |
| .hero-image img { | |
| max-width: 100%; | |
| border-radius: 20px; | |
| box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15); | |
| z-index: 2; | |
| } | |
| .hero-image::before { | |
| content: ''; | |
| position: absolute; | |
| width: 100%; | |
| height: 100%; | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| border-radius: 20px; | |
| transform: rotate(-5deg); | |
| z-index: 1; | |
| } | |
| /* Features Section */ | |
| .section { | |
| padding: 80px 0; | |
| } | |
| .section-title { | |
| text-align: center; | |
| margin-bottom: 60px; | |
| } | |
| .section-title h2 { | |
| font-size: 2.5rem; | |
| font-weight: 700; | |
| margin-bottom: 15px; | |
| font-family: 'Playfair Display', serif; | |
| color: var(--dark); | |
| } | |
| .section-title p { | |
| font-size: 1.2rem; | |
| color: #666; | |
| max-width: 700px; | |
| margin: 0 auto; | |
| } | |
| .features-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| } | |
| .feature-card { | |
| background: white; | |
| border-radius: 20px; | |
| padding: 30px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); | |
| transition: transform 0.3s, box-shadow 0.3s; | |
| } | |
| .feature-card:hover { | |
| transform: translateY(-10px); | |
| box-shadow: 0 15px 40px rgba(0, 0, 0, 0.1); | |
| } | |
| .feature-icon { | |
| width: 70px; | |
| height: 70px; | |
| border-radius: 50%; | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| margin-bottom: 20px; | |
| } | |
| .feature-icon i { | |
| font-size: 30px; | |
| color: white; | |
| } | |
| .feature-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 15px; | |
| color: var(--dark); | |
| } | |
| /* How It Works */ | |
| .how-it-works { | |
| background-color: white; | |
| } | |
| .steps-container { | |
| display: flex; | |
| justify-content: space-between; | |
| flex-wrap: wrap; | |
| gap: 20px; | |
| } | |
| .step { | |
| flex: 1; | |
| min-width: 250px; | |
| text-align: center; | |
| padding: 30px; | |
| position: relative; | |
| } | |
| .step-number { | |
| width: 50px; | |
| height: 50px; | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: white; | |
| border-radius: 50%; | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| font-size: 1.5rem; | |
| font-weight: 700; | |
| margin: 0 auto 20px; | |
| } | |
| .step h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 15px; | |
| } | |
| /* Use Cases */ | |
| .use-cases { | |
| background: linear-gradient(135deg, var(--dark) 0%, #1a1a35 100%); | |
| color: white; | |
| } | |
| .use-cases .section-title h2 { | |
| color: white; | |
| } | |
| .use-cases .section-title p { | |
| color: #ccc; | |
| } | |
| .case-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 30px; | |
| } | |
| .case-card { | |
| background: rgba(255, 255, 255, 0.1); | |
| border-radius: 20px; | |
| padding: 30px; | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| transition: transform 0.3s; | |
| } | |
| .case-card:hover { | |
| transform: translateY(-10px); | |
| background: rgba(255, 255, 255, 0.15); | |
| } | |
| .case-card i { | |
| font-size: 2.5rem; | |
| color: var(--secondary); | |
| margin-bottom: 20px; | |
| } | |
| .case-card h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 15px; | |
| } | |
| /* Architecture Section */ | |
| .architecture { | |
| background: white; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .architecture::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100" preserveAspectRatio="none"><path d="M0,0 L100,0 L100,100 Z" fill="%238a4fff" opacity="0.05"/></svg>'); | |
| background-size: cover; | |
| z-index: 1; | |
| } | |
| .architecture-content { | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .architecture-diagram { | |
| background: white; | |
| border-radius: 20px; | |
| padding: 30px; | |
| box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1); | |
| margin-top: 40px; | |
| overflow: auto; | |
| } | |
| .mermaid { | |
| min-width: 800px; | |
| text-align: center; | |
| padding: 20px; | |
| } | |
| /* Model Dashboard */ | |
| .model-dashboard { | |
| background: linear-gradient(135deg, #f0f2ff 0%, #e6e9ff 100%); | |
| border-radius: 20px; | |
| padding: 30px; | |
| margin-top: 40px; | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05); | |
| } | |
| .dashboard-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); | |
| gap: 20px; | |
| margin-top: 20px; | |
| } | |
| .dashboard-card { | |
| background: white; | |
| border-radius: 15px; | |
| padding: 20px; | |
| box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05); | |
| } | |
| .dashboard-card h3 { | |
| margin-bottom: 15px; | |
| color: var(--primary); | |
| display: flex; | |
| align-items: center; | |
| gap: 10px; | |
| } | |
| .code-block { | |
| background: #2a2a4a; | |
| color: #f0f0f0; | |
| border-radius: 10px; | |
| padding: 20px; | |
| font-family: monospace; | |
| overflow-x: auto; | |
| margin-top: 20px; | |
| font-size: 14px; | |
| line-height: 1.5; | |
| } | |
| .code-header { | |
| display: flex; | |
| justify-content: space-between; | |
| align-items: center; | |
| margin-bottom: 15px; | |
| color: #aaa; | |
| font-size: 0.9rem; | |
| } | |
| .code-keyword { | |
| color: #ff79c6; | |
| } | |
| .code-function { | |
| color: #50fa7b; | |
| } | |
| .code-comment { | |
| color: #6272a4; | |
| } | |
| .code-string { | |
| color: #f1fa8c; | |
| } | |
| /* Demo Section */ | |
| .demo-section { | |
| background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%); | |
| color: white; | |
| text-align: center; | |
| padding: 100px 0; | |
| border-radius: 0 0 40px 40px; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| .demo-section::before { | |
| content: ''; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| background: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 200 200" preserveAspectRatio="none"><circle cx="100" cy="100" r="80" fill="white" opacity="0.05"/></svg>'); | |
| background-size: cover; | |
| } | |
| .demo-section h2 { | |
| font-size: 2.5rem; | |
| margin-bottom: 20px; | |
| font-family: 'Playfair Display', serif; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .demo-section p { | |
| font-size: 1.2rem; | |
| max-width: 700px; | |
| margin: 0 auto 30px; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .demo-btn { | |
| background: white; | |
| color: var(--primary); | |
| font-weight: 600; | |
| padding: 15px 40px; | |
| font-size: 1.1rem; | |
| position: relative; | |
| z-index: 2; | |
| } | |
| .demo-btn:hover { | |
| transform: translateY(-5px); | |
| box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2); | |
| } | |
| /* Footer */ | |
| footer { | |
| background: var(--dark); | |
| color: white; | |
| padding: 60px 0 30px; | |
| } | |
| .footer-grid { | |
| display: grid; | |
| grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); | |
| gap: 40px; | |
| margin-bottom: 40px; | |
| } | |
| .footer-col h3 { | |
| font-size: 1.5rem; | |
| margin-bottom: 20px; | |
| position: relative; | |
| padding-bottom: 10px; | |
| } | |
| .footer-col h3:after { | |
| content: ''; | |
| position: absolute; | |
| left: 0; | |
| bottom: 0; | |
| width: 50px; | |
| height: 3px; | |
| background: var(--primary); | |
| } | |
| .footer-links { | |
| list-style: none; | |
| } | |
| .footer-links li { | |
| margin-bottom: 10px; | |
| } | |
| .footer-links a { | |
| color: #ccc; | |
| text-decoration: none; | |
| transition: color 0.3s; | |
| } | |
| .footer-links a:hover { | |
| color: var(--primary); | |
| } | |
| .social-links { | |
| display: flex; | |
| gap: 15px; | |
| margin-top: 20px; | |
| } | |
| .social-links a { | |
| width: 40px; | |
| height: 40px; | |
| border-radius: 50%; | |
| background: rgba(255, 255, 255, 0.1); | |
| display: flex; | |
| align-items: center; | |
| justify-content: center; | |
| color: white; | |
| transition: all 0.3s; | |
| } | |
| .social-links a:hover { | |
| background: var(--primary); | |
| transform: translateY(-5px); | |
| } | |
| .copyright { | |
| text-align: center; | |
| padding-top: 30px; | |
| border-top: 1px solid rgba(255, 255, 255, 0.1); | |
| color: #aaa; | |
| font-size: 0.9rem; | |
| } | |
| /* Responsive Design */ | |
| @media (max-width: 992px) { | |
| .hero { | |
| flex-direction: column; | |
| text-align: center; | |
| } | |
| .hero-content { | |
| margin-bottom: 40px; | |
| } | |
| .navbar { | |
| flex-direction: column; | |
| gap: 20px; | |
| } | |
| .nav-links { | |
| gap: 15px; | |
| flex-wrap: wrap; | |
| justify-content: center; | |
| } | |
| } | |
| @media (max-width: 768px) { | |
| .hero h1 { | |
| font-size: 2.5rem; | |
| } | |
| .section-title h2 { | |
| font-size: 2rem; | |
| } | |
| .demo-section h2 { | |
| font-size: 2rem; | |
| } | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <!-- Header --> | |
| <header> | |
| <div class="container"> | |
| <div class="navbar"> | |
| <div class="logo"> | |
| <i class="fas fa-heart"></i> | |
| <span>SoulSync AI</span> | |
| </div> | |
| <div class="nav-links"> | |
| <a href="#features">Features</a> | |
| <a href="#architecture">Architecture</a> | |
| <a href="#models">AI Models</a> | |
| <a href="#dashboard">Dashboard</a> | |
| </div> | |
| <div class="auth-buttons"> | |
| <button class="btn btn-secondary">API Docs</button> | |
| <button class="btn btn-primary">Try Demo</button> | |
| </div> | |
| </div> | |
| </div> | |
| </header> | |
| <!-- Hero Section --> | |
| <section class="hero"> | |
| <div class="container"> | |
| <div class="hero-content"> | |
| <h1>AI-Powered Emotional Connection for Partners</h1> | |
| <p>SoulSync creates personalized AI companions that mirror your partner's personality, voice, and communication style using cutting-edge transformer models.</p> | |
| <div class="hero-buttons"> | |
| <button class="btn btn-primary">Start Free Trial</button> | |
| <button class="btn btn-secondary">Model Architecture</button> | |
| </div> | |
| </div> | |
| <div class="hero-image"> | |
| <img src="https://images.unsplash.com/photo-1569003339405-ea396a5a8a90?ixlib=rb-4.0.3&auto=format&fit=crop&w=800&q=80" alt="AI Emotional Connection"> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Architecture Section --> | |
| <section id="architecture" class="section architecture"> | |
| <div class="container architecture-content"> | |
| <div class="section-title"> | |
| <h2>System Architecture</h2> | |
| <p>Secure, scalable infrastructure for personalized AI companionship</p> | |
| </div> | |
| <div class="architecture-diagram"> | |
| <div class="mermaid"> | |
| graph TD | |
| A[Frontend] --> B[API Gateway] | |
| B --> C[Auth Service] | |
| C --> D[Consent Middleware] | |
| D --> E[Inference Service] | |
| E --> F[Text Personality Mirror] | |
| E --> G[Voice Cloning TTS] | |
| E --> H[Avatar Generation] | |
| D --> I[Batch Trainer] | |
| I --> J[Model Store] | |
| J --> F | |
| J --> G | |
| J --> H | |
| F --> K[Vector DB] | |
| G --> K | |
| H --> K | |
| </div> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-server"></i> | |
| </div> | |
| <h3>Distributed Inference</h3> | |
| <p>vLLM serving with tensor parallelism for low-latency responses</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-lock"></i> | |
| </div> | |
| <h3>Consent Layer</h3> | |
| <p>Granular permission controls with immutable audit logs</p> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-sync-alt"></i> | |
| </div> | |
| <h3>Continual Learning</h3> | |
| <p>Nightly fine-tuning with LoRA adapters for personality evolution</p> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Model Section --> | |
| <section id="models" class="section"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>AI Model Suite</h2> | |
| <p>Specialized transformer models for emotional presence and personality mirroring</p> | |
| </div> | |
| <div class="features-grid"> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-comments"></i> | |
| </div> | |
| <h3>Text Personality Mirror</h3> | |
| <p>Fine-tuned Mistral-7B with LoRA adapters for personalized responses</p> | |
| <div class="code-block"> | |
| <div class="code-header"> | |
| <span>personality_mirror.py</span> | |
| <span>Transformer Model</span> | |
| </div> | |
| <pre><span class="code-keyword">class</span> <span class="code-function">PersonalityMirror</span>(nn.Module): | |
| <span class="code-keyword">def</span> <span class="code-function">__init__</span>(self, base_model, lora_weights): | |
| <span class="code-keyword">super</span>().__init__() | |
| self.base_model = AutoModelForCausalLM.from_pretrained(base_model) | |
| self.lora = PeftModel.from_pretrained(self.base_model, lora_weights) | |
| <span class="code-keyword">def</span> <span class="code-function">forward</span>(self, input_ids, attention_mask): | |
| outputs = self.lora(input_ids, attention_mask=attention_mask) | |
| <span class="code-keyword">return</span> outputs.logits | |
| <span class="code-keyword">def</span> <span class="code-function">generate</span>(self, input_ids, **kwargs): | |
| <span class="code-comment"># Apply personality-specific generation parameters</span> | |
| kwargs.setdefault(<span class="code-string">'temperature'</span>, 0.7) | |
| kwargs.setdefault(<span class="code-string">'top_p'</span>, 0.9) | |
| <span class="code-keyword">return</span> self.lora.generate(input_ids, **kwargs)</pre> | |
| </div> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-microphone"></i> | |
| </div> | |
| <h3>Voice Cloning</h3> | |
| <p>FastSpeech2 + HiFi-GAN with speaker embeddings</p> | |
| <div class="code-block"> | |
| <div class="code-header"> | |
| <span>voice_cloning.py</span> | |
| <span>Speech Synthesis</span> | |
| </div> | |
| <pre><span class="code-keyword">def</span> <span class="code-function">clone_voice</span>(text, speaker_embedding): | |
| <span class="code-comment"># Text normalization and phonemization</span> | |
| cleaned_text = clean_text(text) | |
| phonemes = phonemize(cleaned_text) | |
| <span class="code-comment"># Generate mel-spectrogram with FastSpeech2</span> | |
| mel = fastspeech2(phonemes, speaker_embedding) | |
| <span class="code-comment"># Convert to waveform with HiFi-GAN</span> | |
| audio = hifigan(mel) | |
| <span class="code-keyword">return</span> audio | |
| <span class="code-keyword">def</span> <span class="code-function">extract_speaker_embedding</span>(audio_sample): | |
| <span class="code-comment"># Process 30s of audio to create speaker embedding</span> | |
| preprocessed = preprocess_audio(audio_sample) | |
| embedding = speaker_encoder(preprocessed) | |
| <span class="code-keyword">return</span> embedding</pre> | |
| </div> | |
| </div> | |
| <div class="feature-card"> | |
| <div class="feature-icon"> | |
| <i class="fas fa-user"></i> | |
| </div> | |
| <h3>Avatar Generation</h3> | |
| <p>NeRF-based avatar rendering with audio-driven animation</p> | |
| <div class="code-block"> | |
| <div class="code-header"> | |
| <span>avatar_generator.py</span> | |
| <span>3D Rendering</span> | |
| </div> | |
| <pre><span class="code-keyword">class</span> <span class="code-function">NeRFAvatar</span>: | |
| <span class="code-keyword">def</span> <span class="code-function">__init__</span>(self, model_path): | |
| self.model = load_nerf_model(model_path) | |
| self.animator = VisemeAnimator() | |
| <span class="code-keyword">def</span> <span class="code-function">generate_frame</span>(self, audio_frame, expression): | |
| <span class="code-comment"># Extract viseme parameters from audio</span> | |
| visemes = self.animator.get_visemes(audio_frame) | |
| <span class="code-comment"># Combine with emotional expression</span> | |
| params = combine_parameters(visemes, expression) | |
| <span class="code-comment"># Render NeRF frame</span> | |
| frame = self.model.render(params) | |
| <span class="code-keyword">return</span> frame | |
| <span class="code-keyword">def</span> <span class="code-function">generate_video</span>(self, audio_frames, expressions): | |
| frames = [] | |
| <span class="code-keyword">for</span> i <span class="code-keyword">in</span> range(len(audio_frames)): | |
| frame = self.generate_frame(audio_frames[i], expressions[i]) | |
| frames.append(frame) | |
| <span class="code-keyword">return</span> encode_video(frames)</pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Dashboard Section --> | |
| <section id="dashboard" class="section"> | |
| <div class="container"> | |
| <div class="section-title"> | |
| <h2>Model Dashboard</h2> | |
| <p>Real-time monitoring and configuration of AI models</p> | |
| </div> | |
| <div class="model-dashboard"> | |
| <div class="dashboard-grid"> | |
| <div class="dashboard-card"> | |
| <h3><i class="fas fa-brain"></i> Personality Mirror</h3> | |
| <canvas id="personalityChart" height="200"></canvas> | |
| <div class="code-block" style="margin-top: 20px;"> | |
| <div class="code-header"> | |
| <span>Current Configuration</span> | |
| </div> | |
| <pre>{ | |
| <span class="code-string">"base_model"</span>: <span class="code-string">"mistralai/Mistral-7B"</span>, | |
| <span class="code-string">"lora_rank"</span>: 16, | |
| <span class="code-string">"temperature"</span>: 0.7, | |
| <span class="code-string">"top_p"</span>: 0.9, | |
| <span class="code-string">"training_data"</span>: <span class="code-string">"12,584 messages"</span>, | |
| <span class="code-string">"last_trained"</span>: <span class="code-string">"2025-08-14 03:45:21"</span> | |
| }</pre> | |
| </div> | |
| </div> | |
| <div class="dashboard-card"> | |
| <h3><i class="fas fa-wave-square"></i> Voice Cloning</h3> | |
| <canvas id="voiceChart" height="200"></canvas> | |
| <div class="code-block" style="margin-top: 20px;"> | |
| <div class="code-header"> | |
| <span>API Endpoint</span> | |
| </div> | |
| <pre>POST /v1/tts | |
| Content-Type: application/json | |
| Authorization: Bearer <token> | |
| { | |
| <span class="code-string">"partner_id"</span>: <span class="code-string">"usr_abcd1234"</span>, | |
| <span class="code-string">"text"</span>: <span class="code-string">"Good morning! How did you sleep?"</span>, | |
| <span class="code-string">"style"</span>: <span class="code-string">"warm"</span>, | |
| <span class="code-string">"pitch"</span>: 0.2, | |
| <span class="code-string">"speed"</span>: 1.0 | |
| }</pre> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="dashboard-card" style="margin-top: 30px; grid-column: 1 / -1;"> | |
| <h3><i class="fas fa-shield-alt"></i> Consent & Privacy</h3> | |
| <div class="code-block"> | |
| <div class="code-header"> | |
| <span>consent_manager.py</span> | |
| <span>Privacy Layer</span> | |
| </div> | |
| <pre><span class="code-keyword">class</span> <span class="code-function">ConsentManager</span>: | |
| <span class="code-keyword">def</span> <span class="code-function">__init__</span>(self, db): | |
| self.db = db | |
| <span class="code-keyword">def</span> <span class="code-function">check_consent</span>(self, user_id, action): | |
| consent = self.db.get_consent(user_id) | |
| <span class="code-keyword">if</span> action == <span class="code-string">"voice"</span> <span class="code-keyword">and</span> <span class="code-keyword">not</span> consent.voice: | |
| <span class="code-keyword">raise</span> ConsentError(<span class="code-string">"Voice cloning not permitted"</span>) | |
| <span class="code-keyword">if</span> action == <span class="code-string">"avatar"</span> <span class="code-keyword">and</span> <span class="code-keyword">not</span> consent.avatar: | |
| <span class="code-keyword">raise</span> ConsentError(<span class="code-string">"Avatar generation not permitted"</span>) | |
| <span class="code-keyword">return</span> True | |
| <span class="code-keyword">def</span> <span class="code-function">update_consent</span>(self, user_id, new_consent): | |
| <span class="code-comment"># Validate consent structure</span> | |
| validate_consent_schema(new_consent) | |
| <span class="code-comment"># Update database</span> | |
| self.db.update_consent(user_id, new_consent) | |
| <span class="code-comment"># If voice consent revoked, delete voice model</span> | |
| <span class="code-keyword">if</span> <span class="code-string">"voice"</span> <span class="code-keyword">in</span> new_consent <span class="code-keyword">and</span> <span class="code-keyword">not</span> new_consent.voice: | |
| delete_voice_model(user_id) | |
| <span class="code-comment"># Log consent change</span> | |
| audit_log(user_id, <span class="code-string">"consent_update"</span>, new_consent)</pre> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- Demo Section --> | |
| <section class="demo-section"> | |
| <div class="container"> | |
| <h2>Experience SoulSync AI</h2> | |
| <p>See how our ethical AI companionship can strengthen your relationship</p> | |
| <button class="btn demo-btn">Try Live Demo</button> | |
| </div> | |
| </section> | |
| <!-- Footer --> | |
| <footer> | |
| <div class="container"> | |
| <div class="footer-grid"> | |
| <div class="footer-col"> | |
| <div class="logo"> | |
| <i class="fas fa-heart"></i> | |
| <span>SoulSync AI</span> | |
| </div> | |
| <p>Ethical AI companionship for stronger emotional connections</p> | |
| <div class="social-links"> | |
| <a href="#"><i class="fab fa-github"></i></a> | |
| <a href="#"><i class="fab fa-twitter"></i></a> | |
| <a href="#"><i class="fab fa-linkedin"></i></a> | |
| <a href="#"><i class="fab fa-discord"></i></a> | |
| </div> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Technology</h3> | |
| <ul class="footer-links"> | |
| <li><a href="#">Transformer Models</a></li> | |
| <li><a href="#">LoRA Fine-tuning</a></li> | |
| <li><a href="#">Voice Cloning</a></li> | |
| <li><a href="#">NeRF Avatars</a></li> | |
| <li><a href="#">Privacy Engineering</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Resources</h3> | |
| <ul class="footer-links"> | |
| <li><a href="#">Research Papers</a></li> | |
| <li><a href="#">API Documentation</a></li> | |
| <li><a href="#">Ethical Guidelines</a></li> | |
| <li><a href="#">Model Cards</a></li> | |
| <li><a href="#">Case Studies</a></li> | |
| </ul> | |
| </div> | |
| <div class="footer-col"> | |
| <h3>Company</h3> | |
| <ul class="footer-links"> | |
| <li><a href="#">About Us</a></li> | |
| <li><a href="#">Careers</a></li> | |
| <li><a href="#">Contact</a></li> | |
| <li><a href="#">Blog</a></li> | |
| <li><a href="#">Press Kit</a></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <div class="copyright"> | |
| <p>© 2025 SoulSync AI. All rights reserved. Designed with ❤️ for stronger relationships.</p> | |
| </div> | |
| </div> | |
| </footer> | |
| <script> | |
| // Initialize Mermaid diagrams | |
| mermaid.initialize({ | |
| startOnLoad: true, | |
| theme: 'default', | |
| securityLevel: 'loose' | |
| }); | |
| // Initialize charts | |
| document.addEventListener('DOMContentLoaded', function() { | |
| // Personality Mirror Metrics | |
| const personalityCtx = document.getElementById('personalityChart').getContext('2d'); | |
| new Chart(personalityCtx, { | |
| type: 'radar', | |
| data: { | |
| labels: ['Empathy', 'Accuracy', 'Humor', 'Consistency', 'Response Time'], | |
| datasets: [{ | |
| label: 'Personality Mirror Metrics', | |
| data: [92, 87, 78, 85, 95], | |
| fill: true, | |
| backgroundColor: 'rgba(138, 79, 255, 0.2)', | |
| borderColor: 'rgb(138, 79, 255)', | |
| pointBackgroundColor: 'rgb(138, 79, 255)', | |
| pointBorderColor: '#fff', | |
| pointHoverBackgroundColor: '#fff', | |
| pointHoverBorderColor: 'rgb(138, 79, 255)' | |
| }] | |
| }, | |
| options: { | |
| scales: { | |
| r: { | |
| angleLines: { | |
| display: true | |
| }, | |
| suggestedMin: 0, | |
| suggestedMax: 100 | |
| } | |
| } | |
| } | |
| }); | |
| // Voice Cloning Metrics | |
| const voiceCtx = document.getElementById('voiceChart').getContext('2d'); | |
| new Chart(voiceCtx, { | |
| type: 'bar', | |
| data: { | |
| labels: ['Similarity', 'Naturalness', 'Emotion', 'Latency', 'Stability'], | |
| datasets: [{ | |
| label: 'Voice Cloning Metrics', | |
| data: [94, 88, 85, 96, 91], | |
| backgroundColor: 'rgba(255, 107, 139, 0.7)', | |
| borderColor: 'rgba(255, 107, 139, 1)', | |
| borderWidth: 1 | |
| }] | |
| }, | |
| options: { | |
| scales: { | |
| y: { | |
| beginAtZero: true, | |
| max: 100 | |
| } | |
| } | |
| } | |
| }); | |
| // Smooth scrolling for navigation links | |
| document.querySelectorAll('a[href^="#"]').forEach(anchor => { | |
| anchor.addEventListener('click', function (e) { | |
| e.preventDefault(); | |
| document.querySelector(this.getAttribute('href')).scrollIntoView({ | |
| behavior: 'smooth' | |
| }); | |
| }); | |
| }); | |
| // Animation for feature cards | |
| const featureCards = document.querySelectorAll('.feature-card'); | |
| const observer = new IntersectionObserver((entries) => { | |
| entries.forEach(entry => { | |
| if (entry.isIntersecting) { | |
| entry.target.style.opacity = 1; | |
| entry.target.style.transform = 'translateY(0)'; | |
| } | |
| }); | |
| }, { threshold: 0.1 }); | |
| featureCards.forEach(card => { | |
| card.style.opacity = 0; | |
| card.style.transform = 'translateY(20px)'; | |
| card.style.transition = 'opacity 0.5s ease, transform 0.5s ease'; | |
| observer.observe(card); | |
| }); | |
| // Demo button animation | |
| const demoBtn = document.querySelector('.demo-btn'); | |
| demoBtn.addEventListener('mouseenter', () => { | |
| demoBtn.style.transform = 'translateY(-5px)'; | |
| }); | |
| demoBtn.addEventListener('mouseleave', () => { | |
| demoBtn.style.transform = 'translateY(0)'; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> |