Upload 4 files

index.html

@@ -32,6 +32,12 @@
             <svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 13v6a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h6"/><polyline points="15 3 21 3 21 9"/><line x1="10" y1="14" x2="21" y2="3"/></svg>
           </a>
         </div>
+
+        <div class="loader-heart-notice">
+          <a href="https://huggingface.co/utkucoban/NanoMaestro-Realtime" target="_blank" rel="noopener">
+            Don't forget to heart the model if you like it! ❤️
+          </a>
+        </div>
       </div>
     </div>
  
@@ -58,6 +64,11 @@
             <h5>About NanoMaestro</h5>
             <p>This model is a tiny, approximately 50 MB music-generation model with about 13 million parameters, designed to run continuously in real time on almost any consumer CPU.</p>
             <p>Inference runs entirely on your device through WebAssembly (WASM), allowing NanoMaestro to generate music directly on your device locally.</p>
+            <div class="heart-notice">
+              <a href="https://huggingface.co/utkucoban/NanoMaestro-Realtime" target="_blank" rel="noopener">
+                Don't forget to heart the model if you like it! ❤️
+              </a>
+            </div>
           </div>
           
           <div class="info-card">

styles.css

@@ -108,6 +108,53 @@ body {
   justify-content: center;
 }
 
+.loader-heart-notice {
+  margin-top: 16px;
+  width: 100%;
+  display: flex;
+  justify-content: center;
+}
+
+.loader-heart-notice a {
+  font-size: 0.72rem;
+  color: var(--color-accent-hover);
+  text-decoration: none;
+  font-weight: 500;
+  transition: all var(--transition-fast);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.loader-heart-notice a:hover {
+  color: var(--color-accent-active);
+  transform: translateY(-1px);
+}
+
+.heart-notice {
+  margin-top: 4px;
+  border-top: 1px solid var(--color-border);
+  padding-top: 12px;
+  display: flex;
+  justify-content: center;
+}
+
+.heart-notice a {
+  font-size: 0.72rem;
+  color: var(--color-accent-hover);
+  text-decoration: none;
+  font-weight: 500;
+  transition: all var(--transition-fast);
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.heart-notice a:hover {
+  color: var(--color-accent-active);
+  transform: translateY(-1px);
+}
+
 .progress-bar {
   width: 100%;
   height: 4px;