Add the teaser and minor changes

index.html

@@ -131,6 +131,22 @@ <h1 class="title is-1 publication-title">MTL-Split: Multi-Task Learning for Edge
             </div>
         </section>
 
+        <!-- Teaser. -->
+        <section class="hero teaser">
+            <div class="container is-max-desktop">
+                <div class="hero-body has-text-centered">
+                    <img src="./static/images/teaser.png" alt="I-SPLIT abstract" type="image/png" style="width: 80%; height: 80%;">
+                    <h6 class="subtitle is-6 has-text-centered">
+                        The proposed architecture for handling complex inference tasks on edge devices by integrating Split Computing (SC) and Multi-Task Learning (MTL).
+                        This architecture consists of two components: <i>i)</i> a shared <i>backbone</i> deployed on the edge device, and <i>ii)</i>  a series of <i>task-solving heads</i> on a single or multiple remote devices.
+                        Orange trapezoids are DNN models, while their parameters are enclosed in red boxes.
+                        The green components on the right-hand are the loss functions used to update the learnable parameters.
+                        A communication network separates edge and remote devices.
+                    </h6>
+                </div>
+            </div>
+        </section>
+
         <!-- Abstract. -->
         <section class="section">
             <div class="container is-max-desktop">
@@ -155,11 +171,8 @@ <h2 class="title is-3">Abstract</h2>
         <section class="section" id="BibTeX">
             <div class="container is-max-desktop content">
                 <h2 class="title">BibTeX</h2>
-                <pre>
-                    <code>
-                        TBA.
-                    </code>
-              </pre>
+<pre><code>TBA.
+</code></pre>
             </div>
         </section>