Hugging Face's logo

Spaces:
gaur3009
/
connectsquare
Running

App Files Community
gaur3009 commited on
Commit
fb2860e
·
verified ·
1 Parent(s): 0a2ad0b

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +442 -330
index.html CHANGED
@@ -3,9 +3,11 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>SoulSync AI - Stay Connected Emotionally</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <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">
 
 
9
  <style>
10
  :root {
11
  --primary: #8a4fff;
@@ -30,6 +32,7 @@
30
  background: linear-gradient(135deg, #f8f9ff 0%, #e6e9ff 100%);
31
  color: var(--dark);
32
  line-height: 1.6;
 
33
  }
34
 
35
  .container {
@@ -157,12 +160,25 @@
157
  flex: 1;
158
  display: flex;
159
  justify-content: center;
 
160
  }
161
 
162
  .hero-image img {
163
  max-width: 100%;
164
  border-radius: 20px;
165
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
 
 
 
 
 
 
 
 
 
 
 
 
166
  }
167
 
168
  /* Features Section */
@@ -315,118 +331,111 @@
315
  margin-bottom: 15px;
316
  }
317
 
318
- /* Testimonials */
319
- .testimonials-grid {
320
- display: grid;
321
- grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
322
- gap: 30px;
323
- }
324
-
325
- .testimonial {
326
  background: white;
327
- border-radius: 20px;
328
- padding: 30px;
329
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
330
  }
331
 
332
- .testimonial-header {
333
- display: flex;
334
- align-items: center;
335
- gap: 15px;
336
- margin-bottom: 20px;
 
 
 
 
 
337
  }
338
 
339
- .avatar {
340
- width: 60px;
341
- height: 60px;
342
- border-radius: 50%;
343
- background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
344
- display: flex;
345
- align-items: center;
346
- justify-content: center;
347
- color: white;
348
- font-weight: bold;
349
- font-size: 1.5rem;
350
  }
351
 
352
- .testimonial-info h3 {
353
- font-size: 1.2rem;
354
- margin-bottom: 5px;
 
 
 
 
355
  }
356
 
357
- .testimonial-info p {
358
- color: #777;
359
- font-size: 0.9rem;
 
360
  }
361
 
362
- .rating {
363
- color: #ffc107;
364
- margin: 10px 0;
 
 
 
 
365
  }
366
 
367
- /* Pricing */
368
- .pricing-grid {
369
  display: grid;
370
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
371
- gap: 30px;
 
372
  }
373
 
374
- .pricing-card {
375
  background: white;
376
- border-radius: 20px;
377
- padding: 40px 30px;
378
- box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
379
- text-align: center;
380
- position: relative;
381
- border: 2px solid var(--gray);
382
- transition: all 0.3s;
383
  }
384
 
385
- .pricing-card.popular {
386
- border-color: var(--primary);
387
- transform: scale(1.05);
388
- box-shadow: 0 15px 40px rgba(138, 79, 255, 0.2);
 
 
389
  }
390
 
391
- .popular-tag {
392
- position: absolute;
393
- top: -15px;
394
- left: 50%;
395
- transform: translateX(-50%);
396
- background: var(--primary);
397
- color: white;
398
- padding: 5px 15px;
399
- border-radius: 20px;
400
- font-size: 0.9rem;
401
- font-weight: 500;
402
  }
403
 
404
- .pricing-card h3 {
405
- font-size: 1.8rem;
 
 
406
  margin-bottom: 15px;
407
- color: var(--dark);
 
408
  }
409
 
410
- .price {
411
- font-size: 3rem;
412
- font-weight: 700;
413
- margin-bottom: 20px;
414
- color: var(--primary);
415
  }
416
 
417
- .price span {
418
- font-size: 1rem;
419
- color: #777;
420
  }
421
 
422
- .pricing-features {
423
- list-style: none;
424
- margin-bottom: 30px;
425
  }
426
 
427
- .pricing-features li {
428
- padding: 10px 0;
429
- border-bottom: 1px solid var(--gray);
430
  }
431
 
432
  /* Demo Section */
@@ -436,18 +445,35 @@
436
  text-align: center;
437
  padding: 100px 0;
438
  border-radius: 0 0 40px 40px;
 
 
 
 
 
 
 
 
 
 
 
 
 
439
  }
440
 
441
  .demo-section h2 {
442
  font-size: 2.5rem;
443
  margin-bottom: 20px;
444
  font-family: 'Playfair Display', serif;
 
 
445
  }
446
 
447
  .demo-section p {
448
  font-size: 1.2rem;
449
  max-width: 700px;
450
  margin: 0 auto 30px;
 
 
451
  }
452
 
453
  .demo-btn {
@@ -456,6 +482,8 @@
456
  font-weight: 600;
457
  padding: 15px 40px;
458
  font-size: 1.1rem;
 
 
459
  }
460
 
461
  .demo-btn:hover {
@@ -592,14 +620,13 @@
592
  </div>
593
  <div class="nav-links">
594
  <a href="#features">Features</a>
595
- <a href="#how-it-works">How It Works</a>
596
- <a href="#use-cases">Use Cases</a>
597
- <a href="#pricing">Pricing</a>
598
- <a href="#testimonials">Testimonials</a>
599
  </div>
600
  <div class="auth-buttons">
601
- <button class="btn btn-secondary">Log In</button>
602
- <button class="btn btn-primary">Get Started</button>
603
  </div>
604
  </div>
605
  </div>
@@ -609,246 +636,266 @@
609
  <section class="hero">
610
  <div class="container">
611
  <div class="hero-content">
612
- <h1>Stay Emotionally Connected with Your Partner, <span>Always</span></h1>
613
- <p>SoulSync AI creates a personalized AI companion that mirrors your partner's personality, voice, and communication style. Bridge the distance and stay connected like never before.</p>
614
  <div class="hero-buttons">
615
  <button class="btn btn-primary">Start Free Trial</button>
616
- <button class="btn btn-secondary">See Demo</button>
617
  </div>
618
  </div>
619
  <div class="hero-image">
620
- <img src="https://i.postimg.cc/CKGMxHtJ/pexels-timur-weber-8560427.jpg" alt="Couple using SoulSync AI">
621
  </div>
622
  </div>
623
  </section>
624
 
625
- <!-- Features Section -->
626
- <section id="features" class="section">
627
- <div class="container">
628
  <div class="section-title">
629
- <h2>Emotional Connection Technology</h2>
630
- <p>Powered by advanced AI that understands and replicates the unique connection between partners</p>
631
  </div>
632
- <div class="features-grid">
633
- <div class="feature-card">
634
- <div class="feature-icon">
635
- <i class="fas fa-heart"></i>
636
- </div>
637
- <h3>Emotional Presence</h3>
638
- <p>Experience the emotional comfort of your partner's presence anytime, anywhere. Our AI captures the essence of your connection.</p>
639
- </div>
640
- <div class="feature-card">
641
- <div class="feature-icon">
642
- <i class="fas fa-microphone"></i>
643
- </div>
644
- <h3>Voice Cloning</h3>
645
- <p>Hear your partner's voice with our realistic voice cloning technology. Authentic conversations that feel real.</p>
 
 
 
 
 
646
  </div>
 
 
 
647
  <div class="feature-card">
648
  <div class="feature-icon">
649
- <i class="fas fa-brain"></i>
650
  </div>
651
- <h3>Personality Mirroring</h3>
652
- <p>AI learns and replicates your partner's unique communication style, humor, and emotional patterns.</p>
653
  </div>
654
  <div class="feature-card">
655
  <div class="feature-icon">
656
- <i class="fas fa-shield-alt"></i>
657
  </div>
658
- <h3>Privacy First</h3>
659
- <p>Military-grade encryption and strict consent protocols ensure your data remains completely private.</p>
660
  </div>
661
  <div class="feature-card">
662
  <div class="feature-icon">
663
  <i class="fas fa-sync-alt"></i>
664
  </div>
665
- <h3>Two-Way Connection</h3>
666
- <p>Both partners create their AI counterparts for a mutual connection experience that strengthens relationships.</p>
667
- </div>
668
- <div class="feature-card">
669
- <div class="feature-icon">
670
- <i class="fas fa-toggle-on"></i>
671
- </div>
672
- <h3>Consent Controls</h3>
673
- <p>Complete control over what your AI can say and share. Set boundaries that both partners agree on.</p>
674
  </div>
675
  </div>
676
  </div>
677
  </section>
678
 
679
- <!-- How It Works -->
680
- <section id="how-it-works" class="section how-it-works">
681
  <div class="container">
682
  <div class="section-title">
683
- <h2>How SoulSync Works</h2>
684
- <p>A seamless process to create your partner's AI companion with complete transparency and consent</p>
685
  </div>
686
- <div class="steps-container">
687
- <div class="step">
688
- <div class="step-number">1</div>
689
- <h3>Consent & Setup</h3>
690
- <p>Both partners agree to create their AI versions and set privacy boundaries.</p>
691
- </div>
692
- <div class="step">
693
- <div class="step-number">2</div>
694
- <h3>Personalize</h3>
695
- <p>Upload conversations, voice notes, videos, and memories to train your AI.</p>
696
- </div>
697
- <div class="step">
698
- <div class="step-number">3</div>
699
- <h3>AI Training</h3>
700
- <p>Our technology creates a unique personality profile that mirrors your partner.</p>
701
- </div>
702
- <div class="step">
703
- <div class="step-number">4</div>
704
- <h3>Connect</h3>
705
- <p>Start interacting with your partner's AI through chat, voice, or video.</p>
 
 
 
 
 
 
 
 
 
706
  </div>
707
- </div>
708
- </div>
709
- </section>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
710
 
711
- <!-- Use Cases -->
712
- <section id="use-cases" class="section use-cases">
713
- <div class="container">
714
- <div class="section-title">
715
- <h2>For Couples Who Need Connection</h2>
716
- <p>SoulSync helps maintain emotional bonds in challenging circumstances</p>
717
- </div>
718
- <div class="case-grid">
719
- <div class="case-card">
720
- <i class="fas fa-globe-americas"></i>
721
- <h3>Long-Distance Relationships</h3>
722
- <p>Bridge time zones and distance with constant emotional presence. Feel connected even when miles apart.</p>
723
- </div>
724
- <div class="case-card">
725
- <i class="fas fa-user-clock"></i>
726
- <h3>Busy Professionals</h3>
727
- <p>Maintain your connection during demanding work schedules. Never miss an important moment.</p>
728
- </div>
729
- <div class="case-card">
730
- <i class="fas fa-shield-alt"></i>
731
- <h3>Military Families</h3>
732
- <p>Stay connected during deployments. Our secure platform works even in low-bandwidth situations.</p>
733
  </div>
734
- <div class="case-card">
735
- <i class="fas fa-heartbeat"></i>
736
- <h3>Therapeutic Support</h3>
737
- <p>Used alongside counseling to maintain connection during challenging relationship phases.</p>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
738
  </div>
739
  </div>
740
  </div>
741
  </section>
742
 
743
- <!-- Testimonials -->
744
- <section id="testimonials" class="section">
745
  <div class="container">
746
  <div class="section-title">
747
- <h2>Real Relationships, Real Results</h2>
748
- <p>Couples who have strengthened their connection with SoulSync</p>
749
  </div>
750
- <div class="testimonials-grid">
751
- <div class="testimonial">
752
- <div class="testimonial-header">
753
- <div class="avatar">MJ</div>
754
- <div class="testimonial-info">
755
- <h3>Michael & Jessica</h3>
756
- <p>Long-distance for 2 years</p>
 
 
 
 
 
 
 
 
 
 
 
757
  </div>
758
  </div>
759
- <div class="rating">
760
- <i class="fas fa-star"></i>
761
- <i class="fas fa-star"></i>
762
- <i class="fas fa-star"></i>
763
- <i class="fas fa-star"></i>
764
- <i class="fas fa-star"></i>
765
- </div>
766
- <p>"With our 8-hour time difference, SoulSync has been a game-changer. Hearing Jessica's voice when I wake up makes the distance disappear. It's incredible how the AI captures her humor perfectly."</p>
767
- </div>
768
- <div class="testimonial">
769
- <div class="testimonial-header">
770
- <div class="avatar">DS</div>
771
- <div class="testimonial-info">
772
- <h3>David & Sarah</h3>
773
- <p>Military family</p>
 
 
 
 
774
  </div>
775
  </div>
776
- <div class="rating">
777
- <i class="fas fa-star"></i>
778
- <i class="fas fa-star"></i>
779
- <i class="fas fa-star"></i>
780
- <i class="fas fa-star"></i>
781
- <i class="fas fa-star"></i>
782
- </div>
783
- <p>"During David's deployment, SoulSync helped our kids feel connected to their dad. The voice cloning is so realistic, it brings tears to my eyes. It's helped us maintain our emotional bond."</p>
784
  </div>
785
- <div class="testimonial">
786
- <div class="testimonial-header">
787
- <div class="avatar">AT</div>
788
- <div class="testimonial-info">
789
- <h3>Alex & Taylor</h3>
790
- <p>Shift workers</p>
 
791
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
792
  </div>
793
- <div class="rating">
794
- <i class="fas fa-star"></i>
795
- <i class="fas fa-star"></i>
796
- <i class="fas fa-star"></i>
797
- <i class="fas fa-star"></i>
798
- <i class="fas fa-star-half-alt"></i>
799
- </div>
800
- <p>"With opposite work schedules, we barely saw each other. SoulSync helped us stay connected throughout the day. The AI even reminds me of things Taylor would say, which helps avoid misunderstandings."</p>
801
- </div>
802
- </div>
803
- </div>
804
- </section>
805
-
806
- <!-- Pricing -->
807
- <section id="pricing" class="section">
808
- <div class="container">
809
- <div class="section-title">
810
- <h2>Simple, Transparent Pricing</h2>
811
- <p>Choose the plan that works for your relationship needs</p>
812
- </div>
813
- <div class="pricing-grid">
814
- <div class="pricing-card">
815
- <h3>Basic</h3>
816
- <div class="price">$19<span>/month</span></div>
817
- <ul class="pricing-features">
818
- <li>Text-based AI companion</li>
819
- <li>Personality mirroring</li>
820
- <li>100 message credits/month</li>
821
- <li>Basic privacy controls</li>
822
- <li>Email support</li>
823
- </ul>
824
- <button class="btn btn-secondary">Get Started</button>
825
- </div>
826
- <div class="pricing-card popular">
827
- <div class="popular-tag">Most Popular</div>
828
- <h3>Premium</h3>
829
- <div class="price">$39<span>/month</span></div>
830
- <ul class="pricing-features">
831
- <li>Voice cloning & conversations</li>
832
- <li>Advanced personality mirroring</li>
833
- <li>Unlimited messages</li>
834
- <li>Video avatar generation</li>
835
- <li>Advanced privacy controls</li>
836
- <li>Priority support</li>
837
- </ul>
838
- <button class="btn btn-primary">Get Started</button>
839
- </div>
840
- <div class="pricing-card">
841
- <h3>Couples Plan</h3>
842
- <div class="price">$59<span>/month</span></div>
843
- <ul class="pricing-features">
844
- <li>Two Premium accounts</li>
845
- <li>Relationship insights dashboard</li>
846
- <li>Shared memory bank</li>
847
- <li>Date night suggestions</li>
848
- <li>Anniversary reminders</li>
849
- <li>24/7 premium support</li>
850
- </ul>
851
- <button class="btn btn-secondary">Get Started</button>
852
  </div>
853
  </div>
854
  </div>
@@ -857,9 +904,9 @@
857
  <!-- Demo Section -->
858
  <section class="demo-section">
859
  <div class="container">
860
- <h2>Experience the SoulSync Difference</h2>
861
- <p>See how our AI companion can strengthen your relationship and maintain emotional connection</p>
862
- <button class="btn demo-btn">Try Free Demo</button>
863
  </div>
864
  </section>
865
 
@@ -872,32 +919,32 @@
872
  <i class="fas fa-heart"></i>
873
  <span>SoulSync AI</span>
874
  </div>
875
- <p>Helping couples maintain emotional connections through ethical AI technology.</p>
876
  <div class="social-links">
877
- <a href="#"><i class="fab fa-facebook-f"></i></a>
878
  <a href="#"><i class="fab fa-twitter"></i></a>
879
- <a href="#"><i class="fab fa-instagram"></i></a>
880
- <a href="#"><i class="fab fa-linkedin-in"></i></a>
881
  </div>
882
  </div>
883
  <div class="footer-col">
884
- <h3>Product</h3>
885
  <ul class="footer-links">
886
- <li><a href="#">Features</a></li>
887
- <li><a href="#">How It Works</a></li>
888
- <li><a href="#">Use Cases</a></li>
889
- <li><a href="#">Pricing</a></li>
890
- <li><a href="#">Demo</a></li>
891
  </ul>
892
  </div>
893
  <div class="footer-col">
894
  <h3>Resources</h3>
895
  <ul class="footer-links">
896
- <li><a href="#">Blog</a></li>
897
- <li><a href="#">Relationship Tips</a></li>
898
- <li><a href="#">Privacy Policy</a></li>
899
  <li><a href="#">Ethical Guidelines</a></li>
900
- <li><a href="#">Research</a></li>
 
901
  </ul>
902
  </div>
903
  <div class="footer-col">
@@ -906,55 +953,120 @@
906
  <li><a href="#">About Us</a></li>
907
  <li><a href="#">Careers</a></li>
908
  <li><a href="#">Contact</a></li>
909
- <li><a href="#">Partners</a></li>
910
- <li><a href="#">Press</a></li>
911
  </ul>
912
  </div>
913
  </div>
914
  <div class="copyright">
915
- <p>&copy; 2023 SoulSync AI. All rights reserved. Designed with ❤️ for stronger relationships.</p>
916
  </div>
917
  </div>
918
  </footer>
919
 
920
  <script>
921
- // Smooth scrolling for navigation links
922
- document.querySelectorAll('a[href^="#"]').forEach(anchor => {
923
- anchor.addEventListener('click', function (e) {
924
- e.preventDefault();
925
- document.querySelector(this.getAttribute('href')).scrollIntoView({
926
- behavior: 'smooth'
927
- });
928
- });
929
  });
930
-
931
- // Simple animation for feature cards
932
- const featureCards = document.querySelectorAll('.feature-card');
933
-
934
- const observer = new IntersectionObserver((entries) => {
935
- entries.forEach(entry => {
936
- if (entry.isIntersecting) {
937
- entry.target.style.opacity = 1;
938
- entry.target.style.transform = 'translateY(0)';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
939
  }
940
  });
941
- }, { threshold: 0.1 });
942
-
943
- featureCards.forEach(card => {
944
- card.style.opacity = 0;
945
- card.style.transform = 'translateY(20px)';
946
- card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
947
- observer.observe(card);
948
- });
949
-
950
- // Demo button animation
951
- const demoBtn = document.querySelector('.demo-btn');
952
- demoBtn.addEventListener('mouseenter', () => {
953
- demoBtn.style.transform = 'translateY(-5px)';
954
- });
955
-
956
- demoBtn.addEventListener('mouseleave', () => {
957
- demoBtn.style.transform = 'translateY(0)';
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
958
  });
959
  </script>
960
  </body>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>SoulSync AI - Emotional Connection Technology</title>
7
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
8
  <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">
9
+ <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
10
+ <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/mermaid.min.js"></script>
11
  <style>
12
  :root {
13
  --primary: #8a4fff;
 
32
  background: linear-gradient(135deg, #f8f9ff 0%, #e6e9ff 100%);
33
  color: var(--dark);
34
  line-height: 1.6;
35
+ overflow-x: hidden;
36
  }
37
 
38
  .container {
 
160
  flex: 1;
161
  display: flex;
162
  justify-content: center;
163
+ position: relative;
164
  }
165
 
166
  .hero-image img {
167
  max-width: 100%;
168
  border-radius: 20px;
169
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.15);
170
+ z-index: 2;
171
+ }
172
+
173
+ .hero-image::before {
174
+ content: '';
175
+ position: absolute;
176
+ width: 100%;
177
+ height: 100%;
178
+ background: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
179
+ border-radius: 20px;
180
+ transform: rotate(-5deg);
181
+ z-index: 1;
182
  }
183
 
184
  /* Features Section */
 
331
  margin-bottom: 15px;
332
  }
333
 
334
+ /* Architecture Section */
335
+ .architecture {
 
 
 
 
 
 
336
  background: white;
337
+ position: relative;
338
+ overflow: hidden;
 
339
  }
340
 
341
+ .architecture::before {
342
+ content: '';
343
+ position: absolute;
344
+ top: 0;
345
+ left: 0;
346
+ width: 100%;
347
+ height: 100%;
348
+ 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>');
349
+ background-size: cover;
350
+ z-index: 1;
351
  }
352
 
353
+ .architecture-content {
354
+ position: relative;
355
+ z-index: 2;
 
 
 
 
 
 
 
 
356
  }
357
 
358
+ .architecture-diagram {
359
+ background: white;
360
+ border-radius: 20px;
361
+ padding: 30px;
362
+ box-shadow: 0 15px 50px rgba(0, 0, 0, 0.1);
363
+ margin-top: 40px;
364
+ overflow: auto;
365
  }
366
 
367
+ .mermaid {
368
+ min-width: 800px;
369
+ text-align: center;
370
+ padding: 20px;
371
  }
372
 
373
+ /* Model Dashboard */
374
+ .model-dashboard {
375
+ background: linear-gradient(135deg, #f0f2ff 0%, #e6e9ff 100%);
376
+ border-radius: 20px;
377
+ padding: 30px;
378
+ margin-top: 40px;
379
+ box-shadow: 0 10px 30px rgba(0, 0, 0, 0.05);
380
  }
381
 
382
+ .dashboard-grid {
 
383
  display: grid;
384
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
385
+ gap: 20px;
386
+ margin-top: 20px;
387
  }
388
 
389
+ .dashboard-card {
390
  background: white;
391
+ border-radius: 15px;
392
+ padding: 20px;
393
+ box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
 
 
 
 
394
  }
395
 
396
+ .dashboard-card h3 {
397
+ margin-bottom: 15px;
398
+ color: var(--primary);
399
+ display: flex;
400
+ align-items: center;
401
+ gap: 10px;
402
  }
403
 
404
+ .code-block {
405
+ background: #2a2a4a;
406
+ color: #f0f0f0;
407
+ border-radius: 10px;
408
+ padding: 20px;
409
+ font-family: monospace;
410
+ overflow-x: auto;
411
+ margin-top: 20px;
412
+ font-size: 14px;
413
+ line-height: 1.5;
 
414
  }
415
 
416
+ .code-header {
417
+ display: flex;
418
+ justify-content: space-between;
419
+ align-items: center;
420
  margin-bottom: 15px;
421
+ color: #aaa;
422
+ font-size: 0.9rem;
423
  }
424
 
425
+ .code-keyword {
426
+ color: #ff79c6;
 
 
 
427
  }
428
 
429
+ .code-function {
430
+ color: #50fa7b;
 
431
  }
432
 
433
+ .code-comment {
434
+ color: #6272a4;
 
435
  }
436
 
437
+ .code-string {
438
+ color: #f1fa8c;
 
439
  }
440
 
441
  /* Demo Section */
 
445
  text-align: center;
446
  padding: 100px 0;
447
  border-radius: 0 0 40px 40px;
448
+ position: relative;
449
+ overflow: hidden;
450
+ }
451
+
452
+ .demo-section::before {
453
+ content: '';
454
+ position: absolute;
455
+ top: 0;
456
+ left: 0;
457
+ width: 100%;
458
+ height: 100%;
459
+ 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>');
460
+ background-size: cover;
461
  }
462
 
463
  .demo-section h2 {
464
  font-size: 2.5rem;
465
  margin-bottom: 20px;
466
  font-family: 'Playfair Display', serif;
467
+ position: relative;
468
+ z-index: 2;
469
  }
470
 
471
  .demo-section p {
472
  font-size: 1.2rem;
473
  max-width: 700px;
474
  margin: 0 auto 30px;
475
+ position: relative;
476
+ z-index: 2;
477
  }
478
 
479
  .demo-btn {
 
482
  font-weight: 600;
483
  padding: 15px 40px;
484
  font-size: 1.1rem;
485
+ position: relative;
486
+ z-index: 2;
487
  }
488
 
489
  .demo-btn:hover {
 
620
  </div>
621
  <div class="nav-links">
622
  <a href="#features">Features</a>
623
+ <a href="#architecture">Architecture</a>
624
+ <a href="#models">AI Models</a>
625
+ <a href="#dashboard">Dashboard</a>
 
626
  </div>
627
  <div class="auth-buttons">
628
+ <button class="btn btn-secondary">API Docs</button>
629
+ <button class="btn btn-primary">Try Demo</button>
630
  </div>
631
  </div>
632
  </div>
 
636
  <section class="hero">
637
  <div class="container">
638
  <div class="hero-content">
639
+ <h1>AI-Powered Emotional Connection for Partners</h1>
640
+ <p>SoulSync creates personalized AI companions that mirror your partner's personality, voice, and communication style using cutting-edge transformer models.</p>
641
  <div class="hero-buttons">
642
  <button class="btn btn-primary">Start Free Trial</button>
643
+ <button class="btn btn-secondary">Model Architecture</button>
644
  </div>
645
  </div>
646
  <div class="hero-image">
647
+ <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">
648
  </div>
649
  </div>
650
  </section>
651
 
652
+ <!-- Architecture Section -->
653
+ <section id="architecture" class="section architecture">
654
+ <div class="container architecture-content">
655
  <div class="section-title">
656
+ <h2>System Architecture</h2>
657
+ <p>Secure, scalable infrastructure for personalized AI companionship</p>
658
  </div>
659
+
660
+ <div class="architecture-diagram">
661
+ <div class="mermaid">
662
+ graph TD
663
+ A[Frontend] --> B[API Gateway]
664
+ B --> C[Auth Service]
665
+ C --> D[Consent Middleware]
666
+ D --> E[Inference Service]
667
+ E --> F[Text Personality Mirror]
668
+ E --> G[Voice Cloning TTS]
669
+ E --> H[Avatar Generation]
670
+ D --> I[Batch Trainer]
671
+ I --> J[Model Store]
672
+ J --> F
673
+ J --> G
674
+ J --> H
675
+ F --> K[Vector DB]
676
+ G --> K
677
+ H --> K
678
  </div>
679
+ </div>
680
+
681
+ <div class="features-grid">
682
  <div class="feature-card">
683
  <div class="feature-icon">
684
+ <i class="fas fa-server"></i>
685
  </div>
686
+ <h3>Distributed Inference</h3>
687
+ <p>vLLM serving with tensor parallelism for low-latency responses</p>
688
  </div>
689
  <div class="feature-card">
690
  <div class="feature-icon">
691
+ <i class="fas fa-lock"></i>
692
  </div>
693
+ <h3>Consent Layer</h3>
694
+ <p>Granular permission controls with immutable audit logs</p>
695
  </div>
696
  <div class="feature-card">
697
  <div class="feature-icon">
698
  <i class="fas fa-sync-alt"></i>
699
  </div>
700
+ <h3>Continual Learning</h3>
701
+ <p>Nightly fine-tuning with LoRA adapters for personality evolution</p>
 
 
 
 
 
 
 
702
  </div>
703
  </div>
704
  </div>
705
  </section>
706
 
707
+ <!-- Model Section -->
708
+ <section id="models" class="section">
709
  <div class="container">
710
  <div class="section-title">
711
+ <h2>AI Model Suite</h2>
712
+ <p>Specialized transformer models for emotional presence and personality mirroring</p>
713
  </div>
714
+
715
+ <div class="features-grid">
716
+ <div class="feature-card">
717
+ <div class="feature-icon">
718
+ <i class="fas fa-comments"></i>
719
+ </div>
720
+ <h3>Text Personality Mirror</h3>
721
+ <p>Fine-tuned Mistral-7B with LoRA adapters for personalized responses</p>
722
+ <div class="code-block">
723
+ <div class="code-header">
724
+ <span>personality_mirror.py</span>
725
+ <span>Transformer Model</span>
726
+ </div>
727
+ <pre><span class="code-keyword">class</span> <span class="code-function">PersonalityMirror</span>(nn.Module):
728
+ <span class="code-keyword">def</span> <span class="code-function">__init__</span>(self, base_model, lora_weights):
729
+ <span class="code-keyword">super</span>().__init__()
730
+ self.base_model = AutoModelForCausalLM.from_pretrained(base_model)
731
+ self.lora = PeftModel.from_pretrained(self.base_model, lora_weights)
732
+
733
+ <span class="code-keyword">def</span> <span class="code-function">forward</span>(self, input_ids, attention_mask):
734
+ outputs = self.lora(input_ids, attention_mask=attention_mask)
735
+ <span class="code-keyword">return</span> outputs.logits
736
+
737
+ <span class="code-keyword">def</span> <span class="code-function">generate</span>(self, input_ids, **kwargs):
738
+ <span class="code-comment"># Apply personality-specific generation parameters</span>
739
+ kwargs.setdefault(<span class="code-string">'temperature'</span>, 0.7)
740
+ kwargs.setdefault(<span class="code-string">'top_p'</span>, 0.9)
741
+ <span class="code-keyword">return</span> self.lora.generate(input_ids, **kwargs)</pre>
742
+ </div>
743
  </div>
744
+
745
+ <div class="feature-card">
746
+ <div class="feature-icon">
747
+ <i class="fas fa-microphone"></i>
748
+ </div>
749
+ <h3>Voice Cloning</h3>
750
+ <p>FastSpeech2 + HiFi-GAN with speaker embeddings</p>
751
+ <div class="code-block">
752
+ <div class="code-header">
753
+ <span>voice_cloning.py</span>
754
+ <span>Speech Synthesis</span>
755
+ </div>
756
+ <pre><span class="code-keyword">def</span> <span class="code-function">clone_voice</span>(text, speaker_embedding):
757
+ <span class="code-comment"># Text normalization and phonemization</span>
758
+ cleaned_text = clean_text(text)
759
+ phonemes = phonemize(cleaned_text)
760
+
761
+ <span class="code-comment"># Generate mel-spectrogram with FastSpeech2</span>
762
+ mel = fastspeech2(phonemes, speaker_embedding)
763
+
764
+ <span class="code-comment"># Convert to waveform with HiFi-GAN</span>
765
+ audio = hifigan(mel)
766
+
767
+ <span class="code-keyword">return</span> audio
768
 
769
+ <span class="code-keyword">def</span> <span class="code-function">extract_speaker_embedding</span>(audio_sample):
770
+ <span class="code-comment"># Process 30s of audio to create speaker embedding</span>
771
+ preprocessed = preprocess_audio(audio_sample)
772
+ embedding = speaker_encoder(preprocessed)
773
+ <span class="code-keyword">return</span> embedding</pre>
774
+ </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
775
  </div>
776
+
777
+ <div class="feature-card">
778
+ <div class="feature-icon">
779
+ <i class="fas fa-user"></i>
780
+ </div>
781
+ <h3>Avatar Generation</h3>
782
+ <p>NeRF-based avatar rendering with audio-driven animation</p>
783
+ <div class="code-block">
784
+ <div class="code-header">
785
+ <span>avatar_generator.py</span>
786
+ <span>3D Rendering</span>
787
+ </div>
788
+ <pre><span class="code-keyword">class</span> <span class="code-function">NeRFAvatar</span>:
789
+ <span class="code-keyword">def</span> <span class="code-function">__init__</span>(self, model_path):
790
+ self.model = load_nerf_model(model_path)
791
+ self.animator = VisemeAnimator()
792
+
793
+ <span class="code-keyword">def</span> <span class="code-function">generate_frame</span>(self, audio_frame, expression):
794
+ <span class="code-comment"># Extract viseme parameters from audio</span>
795
+ visemes = self.animator.get_visemes(audio_frame)
796
+
797
+ <span class="code-comment"># Combine with emotional expression</span>
798
+ params = combine_parameters(visemes, expression)
799
+
800
+ <span class="code-comment"># Render NeRF frame</span>
801
+ frame = self.model.render(params)
802
+ <span class="code-keyword">return</span> frame
803
+
804
+ <span class="code-keyword">def</span> <span class="code-function">generate_video</span>(self, audio_frames, expressions):
805
+ frames = []
806
+ <span class="code-keyword">for</span> i <span class="code-keyword">in</span> range(len(audio_frames)):
807
+ frame = self.generate_frame(audio_frames[i], expressions[i])
808
+ frames.append(frame)
809
+ <span class="code-keyword">return</span> encode_video(frames)</pre>
810
+ </div>
811
  </div>
812
  </div>
813
  </div>
814
  </section>
815
 
816
+ <!-- Dashboard Section -->
817
+ <section id="dashboard" class="section">
818
  <div class="container">
819
  <div class="section-title">
820
+ <h2>Model Dashboard</h2>
821
+ <p>Real-time monitoring and configuration of AI models</p>
822
  </div>
823
+
824
+ <div class="model-dashboard">
825
+ <div class="dashboard-grid">
826
+ <div class="dashboard-card">
827
+ <h3><i class="fas fa-brain"></i> Personality Mirror</h3>
828
+ <canvas id="personalityChart" height="200"></canvas>
829
+ <div class="code-block" style="margin-top: 20px;">
830
+ <div class="code-header">
831
+ <span>Current Configuration</span>
832
+ </div>
833
+ <pre>{
834
+ <span class="code-string">"base_model"</span>: <span class="code-string">"mistralai/Mistral-7B"</span>,
835
+ <span class="code-string">"lora_rank"</span>: 16,
836
+ <span class="code-string">"temperature"</span>: 0.7,
837
+ <span class="code-string">"top_p"</span>: 0.9,
838
+ <span class="code-string">"training_data"</span>: <span class="code-string">"12,584 messages"</span>,
839
+ <span class="code-string">"last_trained"</span>: <span class="code-string">"2025-08-14 03:45:21"</span>
840
+ }</pre>
841
  </div>
842
  </div>
843
+
844
+ <div class="dashboard-card">
845
+ <h3><i class="fas fa-wave-square"></i> Voice Cloning</h3>
846
+ <canvas id="voiceChart" height="200"></canvas>
847
+ <div class="code-block" style="margin-top: 20px;">
848
+ <div class="code-header">
849
+ <span>API Endpoint</span>
850
+ </div>
851
+ <pre>POST /v1/tts
852
+ Content-Type: application/json
853
+ Authorization: Bearer &lt;token&gt;
854
+
855
+ {
856
+ <span class="code-string">"partner_id"</span>: <span class="code-string">"usr_abcd1234"</span>,
857
+ <span class="code-string">"text"</span>: <span class="code-string">"Good morning! How did you sleep?"</span>,
858
+ <span class="code-string">"style"</span>: <span class="code-string">"warm"</span>,
859
+ <span class="code-string">"pitch"</span>: 0.2,
860
+ <span class="code-string">"speed"</span>: 1.0
861
+ }</pre>
862
  </div>
863
  </div>
 
 
 
 
 
 
 
 
864
  </div>
865
+
866
+ <div class="dashboard-card" style="margin-top: 30px; grid-column: 1 / -1;">
867
+ <h3><i class="fas fa-shield-alt"></i> Consent & Privacy</h3>
868
+ <div class="code-block">
869
+ <div class="code-header">
870
+ <span>consent_manager.py</span>
871
+ <span>Privacy Layer</span>
872
  </div>
873
+ <pre><span class="code-keyword">class</span> <span class="code-function">ConsentManager</span>:
874
+ <span class="code-keyword">def</span> <span class="code-function">__init__</span>(self, db):
875
+ self.db = db
876
+
877
+ <span class="code-keyword">def</span> <span class="code-function">check_consent</span>(self, user_id, action):
878
+ consent = self.db.get_consent(user_id)
879
+ <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:
880
+ <span class="code-keyword">raise</span> ConsentError(<span class="code-string">"Voice cloning not permitted"</span>)
881
+ <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:
882
+ <span class="code-keyword">raise</span> ConsentError(<span class="code-string">"Avatar generation not permitted"</span>)
883
+ <span class="code-keyword">return</span> True
884
+
885
+ <span class="code-keyword">def</span> <span class="code-function">update_consent</span>(self, user_id, new_consent):
886
+ <span class="code-comment"># Validate consent structure</span>
887
+ validate_consent_schema(new_consent)
888
+
889
+ <span class="code-comment"># Update database</span>
890
+ self.db.update_consent(user_id, new_consent)
891
+
892
+ <span class="code-comment"># If voice consent revoked, delete voice model</span>
893
+ <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:
894
+ delete_voice_model(user_id)
895
+
896
+ <span class="code-comment"># Log consent change</span>
897
+ audit_log(user_id, <span class="code-string">"consent_update"</span>, new_consent)</pre>
898
  </div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
899
  </div>
900
  </div>
901
  </div>
 
904
  <!-- Demo Section -->
905
  <section class="demo-section">
906
  <div class="container">
907
+ <h2>Experience SoulSync AI</h2>
908
+ <p>See how our ethical AI companionship can strengthen your relationship</p>
909
+ <button class="btn demo-btn">Try Live Demo</button>
910
  </div>
911
  </section>
912
 
 
919
  <i class="fas fa-heart"></i>
920
  <span>SoulSync AI</span>
921
  </div>
922
+ <p>Ethical AI companionship for stronger emotional connections</p>
923
  <div class="social-links">
924
+ <a href="#"><i class="fab fa-github"></i></a>
925
  <a href="#"><i class="fab fa-twitter"></i></a>
926
+ <a href="#"><i class="fab fa-linkedin"></i></a>
927
+ <a href="#"><i class="fab fa-discord"></i></a>
928
  </div>
929
  </div>
930
  <div class="footer-col">
931
+ <h3>Technology</h3>
932
  <ul class="footer-links">
933
+ <li><a href="#">Transformer Models</a></li>
934
+ <li><a href="#">LoRA Fine-tuning</a></li>
935
+ <li><a href="#">Voice Cloning</a></li>
936
+ <li><a href="#">NeRF Avatars</a></li>
937
+ <li><a href="#">Privacy Engineering</a></li>
938
  </ul>
939
  </div>
940
  <div class="footer-col">
941
  <h3>Resources</h3>
942
  <ul class="footer-links">
943
+ <li><a href="#">Research Papers</a></li>
944
+ <li><a href="#">API Documentation</a></li>
 
945
  <li><a href="#">Ethical Guidelines</a></li>
946
+ <li><a href="#">Model Cards</a></li>
947
+ <li><a href="#">Case Studies</a></li>
948
  </ul>
949
  </div>
950
  <div class="footer-col">
 
953
  <li><a href="#">About Us</a></li>
954
  <li><a href="#">Careers</a></li>
955
  <li><a href="#">Contact</a></li>
956
+ <li><a href="#">Blog</a></li>
957
+ <li><a href="#">Press Kit</a></li>
958
  </ul>
959
  </div>
960
  </div>
961
  <div class="copyright">
962
+ <p>&copy; 2025 SoulSync AI. All rights reserved. Designed with ❤️ for stronger relationships.</p>
963
  </div>
964
  </div>
965
  </footer>
966
 
967
  <script>
968
+ // Initialize Mermaid diagrams
969
+ mermaid.initialize({
970
+ startOnLoad: true,
971
+ theme: 'default',
972
+ securityLevel: 'loose'
 
 
 
973
  });
974
+
975
+ // Initialize charts
976
+ document.addEventListener('DOMContentLoaded', function() {
977
+ // Personality Mirror Metrics
978
+ const personalityCtx = document.getElementById('personalityChart').getContext('2d');
979
+ new Chart(personalityCtx, {
980
+ type: 'radar',
981
+ data: {
982
+ labels: ['Empathy', 'Accuracy', 'Humor', 'Consistency', 'Response Time'],
983
+ datasets: [{
984
+ label: 'Personality Mirror Metrics',
985
+ data: [92, 87, 78, 85, 95],
986
+ fill: true,
987
+ backgroundColor: 'rgba(138, 79, 255, 0.2)',
988
+ borderColor: 'rgb(138, 79, 255)',
989
+ pointBackgroundColor: 'rgb(138, 79, 255)',
990
+ pointBorderColor: '#fff',
991
+ pointHoverBackgroundColor: '#fff',
992
+ pointHoverBorderColor: 'rgb(138, 79, 255)'
993
+ }]
994
+ },
995
+ options: {
996
+ scales: {
997
+ r: {
998
+ angleLines: {
999
+ display: true
1000
+ },
1001
+ suggestedMin: 0,
1002
+ suggestedMax: 100
1003
+ }
1004
+ }
1005
  }
1006
  });
1007
+
1008
+ // Voice Cloning Metrics
1009
+ const voiceCtx = document.getElementById('voiceChart').getContext('2d');
1010
+ new Chart(voiceCtx, {
1011
+ type: 'bar',
1012
+ data: {
1013
+ labels: ['Similarity', 'Naturalness', 'Emotion', 'Latency', 'Stability'],
1014
+ datasets: [{
1015
+ label: 'Voice Cloning Metrics',
1016
+ data: [94, 88, 85, 96, 91],
1017
+ backgroundColor: 'rgba(255, 107, 139, 0.7)',
1018
+ borderColor: 'rgba(255, 107, 139, 1)',
1019
+ borderWidth: 1
1020
+ }]
1021
+ },
1022
+ options: {
1023
+ scales: {
1024
+ y: {
1025
+ beginAtZero: true,
1026
+ max: 100
1027
+ }
1028
+ }
1029
+ }
1030
+ });
1031
+
1032
+ // Smooth scrolling for navigation links
1033
+ document.querySelectorAll('a[href^="#"]').forEach(anchor => {
1034
+ anchor.addEventListener('click', function (e) {
1035
+ e.preventDefault();
1036
+ document.querySelector(this.getAttribute('href')).scrollIntoView({
1037
+ behavior: 'smooth'
1038
+ });
1039
+ });
1040
+ });
1041
+
1042
+ // Animation for feature cards
1043
+ const featureCards = document.querySelectorAll('.feature-card');
1044
+
1045
+ const observer = new IntersectionObserver((entries) => {
1046
+ entries.forEach(entry => {
1047
+ if (entry.isIntersecting) {
1048
+ entry.target.style.opacity = 1;
1049
+ entry.target.style.transform = 'translateY(0)';
1050
+ }
1051
+ });
1052
+ }, { threshold: 0.1 });
1053
+
1054
+ featureCards.forEach(card => {
1055
+ card.style.opacity = 0;
1056
+ card.style.transform = 'translateY(20px)';
1057
+ card.style.transition = 'opacity 0.5s ease, transform 0.5s ease';
1058
+ observer.observe(card);
1059
+ });
1060
+
1061
+ // Demo button animation
1062
+ const demoBtn = document.querySelector('.demo-btn');
1063
+ demoBtn.addEventListener('mouseenter', () => {
1064
+ demoBtn.style.transform = 'translateY(-5px)';
1065
+ });
1066
+
1067
+ demoBtn.addEventListener('mouseleave', () => {
1068
+ demoBtn.style.transform = 'translateY(0)';
1069
+ });
1070
  });
1071
  </script>
1072
  </body>