Upload 3 files

index.html

@@ -14,7 +14,7 @@
     <div id="loadingOverlay" class="loading-overlay">
       <div class="loader-card">
         <h1 class="loader-title">NanoMaestro Realtime</h1>
-        <p class="loader-subtitle">Real-time Transformer Music Model</p>
+        <p class="loader-subtitle">Real-time Lightweight Music Model</p>
         
         <div class="progress-container">
           <div class="progress-bar">
@@ -41,8 +41,14 @@
       </header>
  
       <div class="dashboard-content">
-        <!-- Spacer to balance sidebar and center the visualizer on desktop -->
-        <div class="sidebar-spacer"></div>
+        <!-- Left Sidebar / Info Panel -->
+        <aside class="sidebar-spacer info-sidebar">
+          <div class="info-card">
+            <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>
+        </aside>
         
         <!-- Left Column: Visualizer and bottom controls -->
         <div class="main-column">

styles.css

@@ -322,8 +322,32 @@ body {
   min-width: 0;
 }
 
-.sidebar-spacer {
-  pointer-events: none;
+.info-card {
+  background-color: var(--color-panel);
+  border: 1px dashed var(--color-border);
+  border-radius: 12px;
+  padding: 16px;
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.info-card h5 {
+  font-family: var(--font-display);
+  font-size: 0.78rem;
+  font-weight: 600;
+  text-transform: uppercase;
+  letter-spacing: 0.08em;
+  color: var(--color-text-muted);
+  border-bottom: 1px solid var(--color-border);
+  padding-bottom: 6px;
+  margin-bottom: 4px;
+}
+
+.info-card p {
+  font-size: 0.75rem;
+  line-height: 1.5;
+  color: var(--color-text-muted);
 }
 
 /* Controls Panel Bottom */
@@ -668,8 +692,16 @@ select:focus {
     gap: 16px;
   }
   
+  .main-column {
+    order: 1;
+  }
+
+  .sidebar-column {
+    order: 2;
+  }
+
   .sidebar-spacer {
-    display: none;
+    order: 3;
   }
   
   .dashboard-content {