Upload 2 files

index.html

@@ -137,14 +137,14 @@
         </section>
 
         <!-- Demo Video Section -->
-        <section class="demo-video" id="demo">
+        <section class="intro-video" id="demo">
             <div class="container">
                 <h2 class="section-title">See It In Action</h2>
                 <h3 class="section-subtitle">Experience the speed and quality</h3>
 
                 <div class="video-container">
                     <iframe
-                        src="https://www.youtube.com/embed/aN0Y7XaOB2Q?si=-Cmiqd_NokJlpj8C"
+                        src="https://www.youtube.com/embed/USdrptxgSnI"
                         title="YouTube video player"
                         frameborder="0"
                         allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
@@ -153,6 +153,38 @@
                     </iframe>
                 </div>
 
+                <div class="demo-videos-grid">
+                    <div class="demo-video-item">
+                        <div class="video-container">
+                            <iframe
+                                src="https://www.youtube.com/embed/EbHrtSmfoiE"
+                                title="YouTube video player"
+                                frameborder="0"
+                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                                referrerpolicy="strict-origin-when-cross-origin"
+                                allowfullscreen>
+                            </iframe>
+                        </div>
+                        <h3>Raspberry Pi</h3>
+                        <p>Watch Supertonic running on a Raspberry Pi, demonstrating on-device, real-time text-to-speech synthesis</p>
+                    </div>
+
+                    <div class="demo-video-item">
+                        <div class="video-container">
+                            <iframe
+                                src="https://www.youtube.com/embed/tP_ceNiPc7g"
+                                title="YouTube video player"
+                                frameborder="0"
+                                allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share"
+                                referrerpolicy="strict-origin-when-cross-origin"
+                                allowfullscreen>
+                            </iframe>
+                        </div>
+                        <h3>E-Reader</h3>
+                        <p>Experience Supertonic on an Onyx Boox Go 6 e-reader in airplane mode, achieving an average RTF of 0.3× with zero network dependency</p>
+                    </div>
+                </div>
+
             </div>
         </section>
 
@@ -335,6 +367,20 @@
 
                     <div id="demoError" class="demo-error"></div>
                 </div>
+
+                <div class="transformers-container">
+                    <img src="img/hugging_supertonic.svg" alt="Hugging Face Supertonic" class="transformers-logo">
+                    <p>
+                        Supertonic is now fully supported in <a href="https://huggingface.co/docs/transformers.js/en/index" target="_blank" rel="noopener noreferrer">Transformers.js</a> 🤗!<br>
+                        It uses a quantized ONNX version of Supertonic for faster inference.
+                    </p>
+                    <div class="transformers-buttons">
+                        <a href="https://huggingface.co/spaces/webml-community/Supertonic-TTS-WebGPU" class="btn btn-secondary" target="_blank" rel="noopener noreferrer">
+                            <span class="btn-label">Try it out</span>
+                            <span class="arrow">↗</span>
+                        </a>
+                    </div>
+                </div>
             </div>
         </section>
 

styles.css

@@ -831,7 +831,7 @@ section {
 }
 
 /* Demo Video Section */
-.demo-video {
+.intro-video {
     padding: 5rem 0;
 }
 
@@ -857,6 +857,48 @@ section {
     outline: none;
 }
 
+.demo-videos-grid {
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    gap: 2rem;
+    margin-top: 5rem;
+}
+
+.demo-video-item {
+    display: flex;
+    flex-direction: column;
+}
+
+.demo-video-item .video-container {
+    width: 100%;
+    margin: 0 0 1.5rem 0;
+    position: relative;
+    padding-bottom: 56.25%; /* 16:9 aspect ratio (9/16 * 100 = 56.25%) */
+    height: 0;
+    border-radius: 12px;
+    overflow: hidden;
+    background: var(--light);
+}
+
+.demo-video-item h3 {
+    font-size: 1.5rem;
+    margin: 0 0 0.75rem 0;
+    color: var(--text);
+}
+
+.demo-video-item p {
+    margin: 0;
+    line-height: 1.6;
+    color: var(--text-secondary);
+}
+
+@media (max-width: 768px) {
+    .demo-videos-grid {
+        grid-template-columns: 1fr;
+        gap: 2rem;
+    }
+}
+
 .demo-note {
     text-align: center;
     color: #A8B3C1;
@@ -879,6 +921,45 @@ section {
     box-shadow: none;
 }
 
+.transformers-container {
+    margin: 1rem auto 0;
+    border-radius: 12px;
+    box-shadow: none;
+    text-align: center;
+}
+
+.transformers-logo {
+    width: 100px;
+    display: block;
+    margin-left: auto;
+    margin-right: auto;
+}
+
+.transformers-container p {
+    margin: 0;
+    line-height: 1.6;
+    color: black;
+}
+
+.transformers-container a {
+    color: inherit;
+    text-decoration: underline;
+}
+
+.transformers-container .btn,
+.transformers-container .transformers-buttons a {
+    text-decoration: none;
+}
+
+.transformers-buttons {
+    display: flex;
+    gap: 1.5rem;
+    justify-content: center;
+    flex-wrap: wrap;
+    width: 100%;
+    margin-top: 2rem;
+}
+
 .demo-status-box {
     display: flex;
     justify-content: space-between;