From 57820902d8068f8320e50c87250e9cd171025e9e Mon Sep 17 00:00:00 2001
From: Nikhil Pillai <135812081+TechSwimmer@users.noreply.github.com>
Date: Wed, 27 May 2026 01:31:23 +0530
Subject: [PATCH] feat: add keyboard shortcuts and shortcut help modal

---
 frontend/index.html | 49 ++++++++++++++++++++++++++++++++++++++++++++-
 frontend/js/app.js  | 35 ++++++++++++++++++++++++++++++++
 2 files changed, 83 insertions(+), 1 deletion(-)

diff --git a/frontend/index.html b/frontend/index.html
index 4313922..2d040e4 100644
--- a/frontend/index.html
+++ b/frontend/index.html
@@ -96,9 +96,13 @@ <h2>📈 Scikit-Learner</h2>
                     <i class="bi bi-download"></i> Export Model
                 </button>
             </div>
-            <div class="ms-auto">
+            
+            <div class="ms-auto d-flex align-items-center gap-2">
+                <button class="btn btn-outline-secondary btn-sm" onclick="showShortcutHelp()" title="Keyboard shortcuts">?</button>
                 <span class="badge bg-secondary" id="dataStatus">No data loaded</span>
             </div>
+            
+            
         </div>
     </div>
 
@@ -442,6 +446,49 @@ <h5 class="modal-title d-flex align-items-center gap-2">
         </div>
     </div>
 
+    <!-- Shortcut Help Modal -->
+    <div class="modal fade" id="shortcutHelpModal" tabindex="-1">
+        <div class="modal-dialog modal-dialog-centered">
+            <div class="modal-content">
+                <div class="modal-header border-0 pb-0">
+                    <h5 class="modal-title d-flex align-items-center gap-2">
+                        <i class="bi bi-keyboard-fill text-primary"></i> Keyboard Shortcuts
+                    </h5>
+                    <button type="button" class="btn-close" data-bs-dismiss="modal"></button>
+                </div>
+                <div class="modal-body pt-2">
+                    <p class="text-muted small mb-3">Use these shortcuts anywhere outside text fields.</p>
+                    <div class="table-responsive">
+                        <table class="table table-borderless table-sm mb-0">
+                            <tbody>
+                                <tr>
+                                    <td><strong>Alt + T</strong></td>
+                                    <td>Train Selected</td>
+                                </tr>
+                                
+                                <tr>
+                                    <td><strong>Alt + E</strong></td>
+                                    <td>Export Model</td>
+                                </tr>
+                                <tr>
+                                    <td><strong>Alt + U</strong></td>
+                                    <td>Upload CSV</td>
+                                </tr>
+                                <tr>
+                                    <td><strong>?</strong></td>
+                                    <td>Show this help</td>
+                                </tr>
+                            </tbody>
+                        </table>
+                    </div>
+                    <p class="text-muted small mt-3 mb-0">Shortcuts are ignored while typing inside inputs or text areas.</p>
+                </div>
+                <div class="modal-footer border-0 pt-0">
+                    <button type="button" class="btn btn-secondary btn-sm" data-bs-dismiss="modal">Close</button>
+                </div>
+            </div>
+        </div>
+    </div>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js"></script>
     <script src="js/pyodide-bridge.js"></script>
     <script src="js/app.js"></script>
diff --git a/frontend/js/app.js b/frontend/js/app.js
index 0641d05..a287146 100644
--- a/frontend/js/app.js
+++ b/frontend/js/app.js
@@ -66,6 +66,41 @@ function setupEventListeners() {
             setTimeout(updatePlots, 100);
         });
     });
+
+    // Keyboard shortcuts
+    window.addEventListener('keydown', handleGlobalShortcut, true);    
+}
+
+// Handle keyboard shortcuts globally
+function handleGlobalShortcut(event) {
+    const activeTag = document.activeElement?.tagName;
+    if(activeTag === 'INPUT' || activeTag === 'TEXTAREA'){
+        return;
+    }
+
+    const isMod = event.altKey || event.metaKey;
+    const key = event.key.toLowerCase();
+    if (isMod && key === 't'){
+        
+        event.preventDefault();
+        trainSelectedModels();
+    
+    }else if (isMod && key === 'e'){
+        event.preventDefault();
+        exportSelectedModel();
+    }else if (isMod && key === 'u'){
+        event.preventDefault();
+        openFileUpload();
+    }else if (event.key === '?'){
+        event.preventDefault();
+        showShortcutHelp();
+    }
+
+}
+
+function showShortcutHelp() {
+    const modal = new bootstrap.Modal(document.getElementById('shortcutHelpModal'));
+    modal.show();
 }
 
 // Render datasets on home view