Spaces:

0xarchit
/

ml-assignment

Sleeping

App Files Files Community

0xarchit commited on 13 days ago

Commit

199cee1

1 Parent(s): 22032c4

feat(inference): fix ui and shap

Browse files

Files changed (3) hide show

inference/template/index.html +8 -3
inference/template/script.js +12 -8
inference/template/styles.css +50 -16

inference/template/index.html CHANGED Viewed

@@ -1,15 +1,19 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Inference Studio | Neural Network Visualizer</title>
     <link rel="stylesheet" href="/static/styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;700&family=JetBrains+Mono:wght@300;500&display=swap" rel="stylesheet">
 </head>
 <body>
     <div class="app-container">
         <header>
@@ -86,4 +90,5 @@
     </div>
     <script src="/static/script.js"></script>
 </body>
-</html>

 <!DOCTYPE html>
 <html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Inference Studio | Machine Learning Assignment</title>
     <link rel="stylesheet" href="/static/styles.css">
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <link rel="preconnect" href="https://fonts.googleapis.com">
     <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link
+        href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300;400;700&family=JetBrains+Mono:wght@300;500&display=swap"
+        rel="stylesheet">
 </head>
 <body>
     <div class="app-container">
         <header>
     </div>
     <script src="/static/script.js"></script>
 </body>
+</html>

inference/template/script.js CHANGED Viewed

@@ -153,7 +153,7 @@ elements.inferenceForm.onsubmit = async (e) => {
 function renderResult(data) {
     const scores = Object.entries(data.scores).sort((a, b) => b[1] - a[1]);
     const shap = Object.entries(data.shap || {});
-    const maxShap = Math.max(...shap.map(s => Math.abs(s[1])), 1);
     elements.resultDisplay.innerHTML = `
         <div class="result-view">
@@ -176,14 +176,15 @@ function renderResult(data) {
             </div>
             <div class="shap-chart">
-                <span style="font-size: 0.65rem; color: var(--text-dim); letter-spacing: 4px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;">Top Decision Drivers</span>
                 ${shap.map(([feat, val]) => `
                     <div class="shap-row">
-                        <span class="score-label" style="width: 120px;" title="${feat}">${feat}</span>
-                        <div class="shap-bar-container">
-                            <div class="shap-bar-fill ${val >= 0 ? 'positive' : 'negative'}" style="width: 0%"></div>
                         </div>
-                        <span class="score-label" style="text-align: right; width: 40px;">${val >= 0 ? '+' : '-'}${Math.abs(val).toFixed(2)}</span>
                     </div>
                 `).join('')}
             </div>
@@ -194,8 +195,11 @@ function renderResult(data) {
         const fills = elements.resultDisplay.querySelectorAll('.bar-fill');
         scores.forEach((s, i) => fills[i].style.width = `${s[1] * 100}%`);
-        const shapFills = elements.resultDisplay.querySelectorAll('.shap-bar-fill');
-        shap.forEach((s, i) => shapFills[i].style.width = `${(Math.abs(s[1]) / maxShap) * 100}%`);
     }, 100);
 }

 function renderResult(data) {
     const scores = Object.entries(data.scores).sort((a, b) => b[1] - a[1]);
     const shap = Object.entries(data.shap || {});
+    const maxShap = Math.max(...shap.map(s => Math.abs(s[1])), 0.001);
     elements.resultDisplay.innerHTML = `
         <div class="result-view">
             </div>
             <div class="shap-chart">
+                <span style="font-size: 0.65rem; color: var(--text-dim); letter-spacing: 4px; font-weight: 700; text-transform: uppercase; margin-bottom: 10px;">SHAP Decision Drivers</span>
                 ${shap.map(([feat, val]) => `
                     <div class="shap-row">
+                        <span class="score-label" style="font-size: 0.75rem; overflow: hidden; text-overflow: ellipsis;" title="${feat}">${feat}</span>
+                        <div class="shap-viz">
+                            <div class="shap-axis"></div>
+                            <div class="shap-bar ${val >= 0 ? 'positive' : 'negative'}" style="width: 0%"></div>
                         </div>
+                        <span class="score-label" style="text-align: right; font-weight: 700; color: ${val >= 0 ? '#10b981' : '#ef4444'}">${val >= 0 ? '+' : ''}${val.toFixed(2)}</span>
                     </div>
                 `).join('')}
             </div>
         const fills = elements.resultDisplay.querySelectorAll('.bar-fill');
         scores.forEach((s, i) => fills[i].style.width = `${s[1] * 100}%`);
+        const shapBars = elements.resultDisplay.querySelectorAll('.shap-bar');
+        shap.forEach((s, i) => {
+            const width = (Math.abs(s[1]) / maxShap) * 50; // Max 50% from center
+            shapBars[i].style.width = `${width}%`;
+        });
     }, 100);
 }

inference/template/styles.css CHANGED Viewed

@@ -80,10 +80,11 @@ header {
 .tabs {
     display: flex;
     gap: 12px;
-    justify-content: center;
     overflow-x: auto;
     padding: 10px;
     scrollbar-width: none;
 }
 .tabs::-webkit-scrollbar { display: none; }
@@ -300,41 +301,55 @@ option { background: #0f172a; color: #fff; }
 .shap-chart {
     display: flex;
     flex-direction: column;
-    gap: 15px;
     margin-top: 40px;
     padding-top: 40px;
     border-top: 1px solid var(--border);
 }
 .shap-row {
-    display: flex;
     align-items: center;
     gap: 15px;
 }
-.shap-bar-container {
-    flex: 1;
-    height: 8px;
-    background: rgba(255, 255, 255, 0.03);
-    border-radius: 100px;
     position: relative;
-    overflow: hidden;
 }
-.shap-bar-fill {
     height: 100%;
-    border-radius: 100px;
-    transition: width 1s ease-out;
 }
-.shap-bar-fill.positive {
     background: #10b981;
-    box-shadow: 0 0 10px rgba(16, 185, 129, 0.3);
 }
-.shap-bar-fill.negative {
     background: #ef4444;
-    box-shadow: 0 0 10px rgba(239, 68, 68, 0.3);
 }
 #modal-overlay {
@@ -420,7 +435,26 @@ option { background: #0f172a; color: #fff; }
     header { flex-direction: row; justify-content: space-between; align-items: center; }
     .logo { align-items: flex-start; }
     .btn-group { flex-direction: row; }
 }
 @keyframes slide-reveal { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
 @keyframes modal-enter { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }

 .tabs {
     display: flex;
     gap: 12px;
     overflow-x: auto;
     padding: 10px;
     scrollbar-width: none;
+    flex-wrap: nowrap;
+    -webkit-overflow-scrolling: touch;
 }
 .tabs::-webkit-scrollbar { display: none; }
 .shap-chart {
     display: flex;
     flex-direction: column;
+    gap: 12px;
     margin-top: 40px;
     padding-top: 40px;
     border-top: 1px solid var(--border);
 }
 .shap-row {
+    display: grid;
+    grid-template-columns: 100px 1fr 40px;
     align-items: center;
     gap: 15px;
 }
+.shap-viz {
+    height: 12px;
+    background: rgba(255, 255, 255, 0.02);
+    border-radius: 4px;
     position: relative;
+    display: flex;
+    align-items: center;
+}
+.shap-axis {
+    position: absolute;
+    left: 50%;
+    top: -5px;
+    bottom: -5px;
+    width: 1px;
+    background: rgba(255, 255, 255, 0.2);
+    z-index: 1;
 }
+.shap-bar {
     height: 100%;
+    position: absolute;
+    transition: all 1s cubic-bezier(0.34, 1.56, 0.64, 1);
+    border-radius: 2px;
 }
+.shap-bar.positive {
+    left: 50%;
     background: #10b981;
+    box-shadow: 0 0 15px rgba(16, 185, 129, 0.4);
 }
+.shap-bar.negative {
+    right: 50%;
     background: #ef4444;
+    box-shadow: 0 0 15px rgba(239, 68, 68, 0.4);
 }
 #modal-overlay {
     header { flex-direction: row; justify-content: space-between; align-items: center; }
     .logo { align-items: flex-start; }
     .btn-group { flex-direction: row; }
+    .tabs { justify-content: center; }
 }
 @keyframes slide-reveal { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
 @keyframes modal-enter { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
+@media (max-width: 1024px) {
+    .main-layout { grid-template-columns: 1fr; }
+    .hero { padding: 80px 0 40px; }
+}
+@media (max-width: 640px) {
+    body { padding: 15px; }
+    .hero h1 { font-size: 2.5rem; }
+    .spec-grid { grid-template-columns: 1fr; }
+    .modal { width: 95%; margin: 10px; }
+    .modal-header, .modal-content { padding: 20px; }
+    .prediction-box { padding: 30px; }
+    .label-val { font-size: 2.5rem; }
+    .shap-row { flex-direction: column; align-items: flex-start; gap: 5px; }
+    .shap-row .score-label { width: 100% !important; text-align: left !important; }
+    .tab-btn { padding: 10px 20px; font-size: 0.85rem; }
+}