Upload folder using huggingface_hub

index.html

@@ -19,7 +19,8 @@
     }
 
     * {
-      box-sizing: box-sizing;
+      /* FIXED: box-sizing typo corrected to border-box for consistent sizing */
+      box-sizing: border-box;
       scrollbar-width: thin;
       scrollbar-color: var(--neon-cyan) var(--bg-dark);
     }
@@ -27,14 +28,14 @@
     body {
       background-color: var(--bg-dark);
       color: var(--text-main);
-      font-family: 'Courier New', 'Consolas', monospace; /* Monospace fits the theme better */
+      font-family: 'Courier New', 'Consolas', monospace;
       margin: 0;
       padding: 0;
       height: 100vh;
       overflow: hidden;
       display: flex;
       flex-direction: column;
-      background-image: 
+      background-image:
         linear-gradient(rgba(0, 0, 0, 0.8), rgba(0, 0, 0, 0.8)),
         repeating-linear-gradient(rgba(0, 246, 255, 0.03) 1px, transparent 1px),
         repeating-linear-gradient(90deg, rgba(0, 246, 255, 0.03) 1px, transparent 1px);
@@ -75,7 +76,7 @@
     /* --- Main Layout --- */
     main {
       display: grid;
-      grid-template-columns: 1fr 2fr 1fr; /* Responsive Grid */
+      grid-template-columns: 1fr 2fr 1fr;
       flex: 1;
       padding: 20px;
       gap: 20px;
@@ -127,7 +128,7 @@
 
     /* Left Panel: Input */
     #input-panel {
-      min-width: 0; /* Flex fix */
+      min-width: 0;
     }
 
     .drop-zone {
@@ -142,6 +143,8 @@
       margin-bottom: 10px;
       position: relative;
       overflow: hidden;
+      /* Ensure pointer events work */
+      pointer-events: auto;
     }
 
     .drop-zone:hover,
@@ -204,9 +207,20 @@
       padding-left: 5px;
     }
 
-    .log-entry.error { color: var(--neon-magenta); border-left-color: var(--neon-magenta); }
-    .log-entry.success { color: var(--neon-green); border-left-color: var(--neon-green); }
-    .log-entry.info { color: var(--neon-cyan); border-left-color: var(--neon-cyan); }
+    .log-entry.error {
+      color: var(--neon-magenta);
+      border-left-color: var(--neon-magenta);
+    }
+
+    .log-entry.success {
+      color: var(--neon-green);
+      border-left-color: var(--neon-green);
+    }
+
+    .log-entry.info {
+      color: var(--neon-cyan);
+      border-left-color: var(--neon-cyan);
+    }
 
     .ascii-tree {
       background: #000;
@@ -236,8 +250,10 @@
     .metric-box::after {
       content: '';
       position: absolute;
-      top: -1px; left: -1px;
-      width: 5px; height: 5px;
+      top: -1px;
+      left: -1px;
+      width: 5px;
+      height: 5px;
       background: var(--neon-cyan);
     }
 
@@ -253,9 +269,17 @@
       font-size: 10px;
     }
 
-    .trinary-hot { color: #ff2b2b; }
-    .trinary-idle { color: #ffd700; }
-    .trinary-inhibited { color: #555; }
+    .trinary-hot {
+      color: #ff2b2b;
+    }
+
+    .trinary-idle {
+      color: #ffd700;
+    }
+
+    .trinary-inhibited {
+      color: #555;
+    }
 
     /* Footer Actions */
     footer {
@@ -357,15 +381,31 @@
     }
 
     @keyframes pulse {
-      0% { opacity: 1; }
-      50% { opacity: 0.5; }
-      100% { opacity: 1; }
+      0% {
+        opacity: 1;
+      }
+
+      50% {
+        opacity: 0.5;
+      }
+
+      100% {
+        opacity: 1;
+      }
     }
 
     /* Scrollbar styling */
-    ::-webkit-scrollbar { width: 8px; }
-    ::-webkit-scrollbar-track { background: #000; }
-    ::-webkit-scrollbar-thumb { background: var(--neon-cyan); }
+    ::-webkit-scrollbar {
+      width: 8px;
+    }
+
+    ::-webkit-scrollbar-track {
+      background: #000;
+    }
+
+    ::-webkit-scrollbar-thumb {
+      background: var(--neon-cyan);
+    }
   </style>
 </head>
 
@@ -379,7 +419,8 @@
     <div class="status-bar">SYSTEM ONLINE // WAITING FOR INPUT</div>
     <!-- Required Link -->
     <div style="font-size: 10px; opacity: 0.5;">
-      <a href="https://huggingface.co/spaces/akhaliq/anycoder" style="color: var(--text-dim); text-decoration: none;">Built with anycoder</a>
+      <a href="https://huggingface.co/spaces/akhaliq/anycoder"
+        style="color: var(--text-dim); text-decoration: none;">Built with anycoder</a>
     </div>
   </header>
 
@@ -387,7 +428,7 @@
     <!-- INPUT PANEL -->
     <div class="panel" id="input-panel">
       <div class="panel-title">INPUT / FILE TREE</div>
-      
+
       <!-- Fixed Drop Zone -->
       <div class="drop-zone" id="drop-zone">
         <div style="text-align: center;">
@@ -397,7 +438,7 @@
         <!-- Hidden Input for Click Trigger -->
         <input type="file" id="file-input" multiple style="display: none;">
       </div>
-      
+
       <div class="file-list" id="file-list">
         <div style="padding:10px; text-align:center; color:#555;">-- NO FILES SELECTED --</div>
       </div>
@@ -488,8 +529,11 @@
     const fileInput = document.getElementById('file-input');
 
     // 1. Handle Click (Trigger Hidden Input)
-    dropZone.addEventListener('click', () => {
-        fileInput.click();
+    dropZone.addEventListener('click', (e) => {
+        // Ensure we don't trigger if clicking something inside the dropzone that shouldn't trigger it
+        if (e.target !== fileInput) {
+            fileInput.click();
+        }
     });
 
     // 2. Handle Input Change (File Selection)
@@ -505,6 +549,11 @@
         dropZone.classList.add('active');
     });
 
+    dropZone.addEventListener('dragenter', (e) => {
+        e.preventDefault();
+        dropZone.classList.add('active');
+    });
+
     dropZone.addEventListener('dragleave', (e) => {
         // Only remove active class if we are leaving the dropZone itself
         if (e.target === dropZone) {