Spaces:

testdeep123
/

cronjob

Running

App Files Files Community

testdeep123 commited on Jul 26

Commit

b0a1492

verified ·

1 Parent(s): 62c5efa

Update app.py

Browse files

Files changed (1) hide show

app.py +498 -679

app.py CHANGED Viewed

@@ -1,169 +1,123 @@
-import os
-import tempfile
-import requests
-from urllib.parse import urlparse, unquote
-from flask import Flask, render_template_string, request, redirect, send_file, jsonify
-from huggingface_hub import HfApi, hf_hub_download, upload_file, delete_file
-# Environment
-REPO_ID = os.getenv("REPO_ID")
-HF_TOKEN = os.getenv("HF_TOKEN")
-app = Flask(__name__)
-api = HfApi()
-TEMPLATE = """
 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>HuggingFace Drive - {{ path or 'Root' }}</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
-  <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=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
  <style>
-   /*
-   =================================
-   ---  REDESIGNED CSS (v2.0)    ---
-   ---  Author: AI Assistant     ---
-   ---  Theme: Aurora Glass     ---
-   =================================
-   */
-   /* --- 1. Root Variables & Base Styles --- */
-:root {
-  --bg-color: #0d1117;
-  --glass-bg: rgba(22, 27, 34, 0.6);
-  --border-color: rgba(255, 255, 255, 0.1);
-  --border-color-hover: rgba(56, 189, 248, 0.4);
-  --text-primary: #e6edf3;
-  --text-secondary: #7d8590;
-  --accent-primary: #38bdf8; /* Light Sky Blue */
-  --accent-primary-hover: #7dd3fc;
-  --accent-success: #2dd4bf; /* Teal */
-  --accent-danger: #f87171; /* Light Red */
-  --shadow-color: rgba(0, 0, 0, 0.2);
-  --glow-color: rgba(56, 189, 248, 0.2);
-  --font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
-  --radius-md: 10px;
-  --radius-sm: 6px;
-  --transition-fast: all 0.2s cubic-bezier(0.25, 0.8, 0.25, 1);
-  --transition-slow: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
-}
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
 }
-@keyframes aurora {
-  0% { background-position: 0% 50%; }
-  50% { background-position: 100% 50%; }
-  100% { background-position: 0% 50%; }
 }
 body {
-  background-color: var(--bg-color);
-  background-image: radial-gradient(at 20% 10%, hsla(212,80%,30%,0.3) 0px, transparent 50%),
-                    radial-gradient(at 80% 20%, hsla(280,70%,40%,0.2) 0px, transparent 50%),
-                    radial-gradient(at 50% 80%, hsla(180,80%,35%,0.3) 0px, transparent 50%);
-  background-attachment: fixed;
-  background-size: 200% 200%;
-  animation: aurora 15s ease infinite;
-  color: var(--text-primary);
-  font-family: var(--font-family);
-  line-height: 1.6;
   min-height: 100vh;
   overflow-x: hidden;
 }
-/* --- 2. Main Layout & Header --- */
 .container {
-  max-width: 1600px;
   margin: 0 auto;
-  padding: 2rem;
 }
 .header {
-  background: var(--glass-bg);
-  backdrop-filter: blur(20px);
-  -webkit-backdrop-filter: blur(20px);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  padding: 1.5rem;
-  margin-bottom: 2.5rem;
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
-  gap: 1.5rem;
-  box-shadow: 0 8px 32px 0 var(--shadow-color);
 }
 .title {
   display: flex;
   align-items: center;
   gap: 0.75rem;
-  font-size: 1.5rem;
   font-weight: 700;
-  color: var(--text-primary);
 }
 .title-icon {
   width: 28px;
   height: 28px;
-  color: var(--accent-primary);
-  transition: var(--transition-fast);
 }
 .title:hover .title-icon {
-  transform: rotate(-10deg) scale(1.1);
 }
-/* --- 3. Breadcrumb Navigation --- */
 .breadcrumb {
   display: flex;
-  align-items: center;
   flex-wrap: wrap;
-  gap: 0.25rem;
-  background: rgba(0,0,0,0.2);
-  padding: 0.5rem;
-  border-radius: var(--radius-sm);
 }
 .breadcrumb-item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
-  padding: 0.4rem 0.8rem;
-  border-radius: 4px;
   cursor: pointer;
-  color: var(--text-secondary);
-  transition: var(--transition-fast);
-  font-size: 0.9rem;
-  font-weight: 500;
 }
 .breadcrumb-item:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--text-primary);
 }
 .breadcrumb-item.active {
-  color: var(--accent-primary);
-  background: rgba(56, 189, 248, 0.1);
 }
 .breadcrumb-separator {
-  color: var(--text-secondary);
   user-select: none;
-  font-size: 1rem;
-  opacity: 0.5;
 }
-/* --- 4. Action Buttons --- */
 .actions {
   display: flex;
   flex-wrap: wrap;
@@ -173,159 +127,178 @@ body {
 .btn {
   display: inline-flex;
   align-items: center;
-  justify-content: center;
   gap: 0.5rem;
-  padding: 0.7rem 1.25rem;
-  border: 1px solid transparent;
-  border-radius: var(--radius-sm);
-  font-size: 0.9rem;
-  font-weight: 600;
   cursor: pointer;
-  transition: var(--transition-fast);
   text-decoration: none;
-  white-space: nowrap;
 }
-.btn .icon {
-  width: 16px;
-  height: 16px;
 }
-.btn:hover {
-  transform: translateY(-2px);
 }
 .btn-primary {
-  background: var(--accent-primary);
-  color: var(--bg-color);
-  border-color: var(--accent-primary);
 }
 .btn-primary:hover {
-  background: var(--accent-primary-hover);
-  border-color: var(--accent-primary-hover);
-  box-shadow: 0 4px 15px rgba(56, 189, 248, 0.2);
 }
 .btn-secondary {
-  background: var(--glass-bg);
-  color: var(--text-primary);
-  border: 1px solid var(--border-color);
 }
 .btn-secondary:hover {
-  background: rgba(255, 255, 255, 0.1);
-  border-color: var(--border-color-hover);
 }
 .btn-success {
-  background: var(--accent-success);
-  color: var(--bg-color);
-  border-color: var(--accent-success);
 }
 .btn-success:hover {
-  filter: brightness(1.1);
-  box-shadow: 0 4px 15px rgba(45, 212, 191, 0.2);
 }
 .btn-danger {
-  background: var(--accent-danger);
-  color: var(--bg-color);
-  border-color: var(--accent-danger);
 }
 .btn-danger:hover {
-  filter: brightness(1.1);
-  box-shadow: 0 4px 15px rgba(248, 113, 113, 0.2);
 }
 .file-input-wrapper {
   position: relative;
   display: inline-block;
 }
 .file-input {
   position: absolute;
   left: -9999px;
   opacity: 0;
 }
-/* --- 5. File Grid & Items --- */
-@keyframes fadeInGrid {
-  from { opacity: 0; transform: translateY(20px); }
-  to { opacity: 1; transform: translateY(0); }
 }
 .file-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-  gap: 1.5rem;
-  animation: fadeInGrid 0.5s ease-out forwards;
 }
 .file-item {
-  background: var(--glass-bg);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  transition: var(--transition-fast);
   position: relative;
 }
 .file-item:hover {
-  transform: translateY(-5px) scale(1.02);
-  border-color: var(--border-color-hover);
-  box-shadow: 0 0 20px 0 var(--glow-color);
-  z-index: 10;
 }
 .file-item-content {
-  padding: 1rem;
   display: flex;
   align-items: center;
   gap: 1rem;
   cursor: pointer;
-  height: 100%;
 }
-.file-icon-wrapper {
-  flex-shrink: 0;
   width: 48px;
   height: 48px;
-  border-radius: var(--radius-sm);
-  display: grid;
-  place-items: center;
-  transition: var(--transition-fast);
-}
-.file-icon-wrapper .icon {
-  width: 24px;
-  height: 24px;
 }
-.file-icon-wrapper.dir {
-  background: rgba(56, 189, 248, 0.1);
-  color: var(--accent-primary);
 }
-.file-icon-wrapper.file {
-  background: rgba(45, 212, 191, 0.1);
-  color: var(--accent-success);
 }
-.file-item:hover .file-icon-wrapper {
   transform: scale(1.1);
 }
 .file-details {
-  overflow: hidden;
 }
 .file-name {
   font-weight: 500;
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  color: var(--text-primary);
 }
 .file-meta {
-  font-size: 0.875rem;
-  color: var(--text-secondary);
 }
-/* --- 6. Dropdown Menu --- */
 .dropdown {
   position: absolute;
   top: 0.5rem;
@@ -335,89 +308,103 @@ body {
 .dropdown-toggle {
   background: none;
   border: none;
-  color: var(--text-secondary);
   cursor: pointer;
-  width: 32px;
-  height: 32px;
-  border-radius: 50%;
-  display: grid;
-  place-items: center;
-  transition: var(--transition-fast);
 }
-.dropdown-toggle .icon { width: 18px; height: 18px; }
 .dropdown-toggle:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--text-primary);
 }
 .dropdown-menu {
   position: absolute;
-  top: calc(100% + 5px);
   right: 0;
-  background: var(--glass-bg);
-  backdrop-filter: blur(10px);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  box-shadow: 0 4px 12px var(--shadow-color);
   min-width: 180px;
   z-index: 1000;
   opacity: 0;
   visibility: hidden;
-  transform: translateY(-10px) scale(0.95);
-  transform-origin: top right;
-  transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s;
-  padding: 0.5rem;
 }
 .dropdown.active .dropdown-menu {
   opacity: 1;
   visibility: visible;
-  transform: translateY(0) scale(1);
 }
 .dropdown-item {
   display: flex;
   align-items: center;
-  gap: 0.75rem;
   width: 100%;
-  padding: 0.6rem 0.8rem;
   border: none;
   background: none;
-  color: var(--text-primary);
   font-size: 0.9rem;
-  font-weight: 500;
   cursor: pointer;
-  transition: var(--transition-fast);
   text-align: left;
-  border-radius: 4px;
 }
-.dropdown-item .icon { width: 16px; height: 16px; color: var(--text-secondary); }
 .dropdown-item:hover {
-  background: rgba(255, 255, 255, 0.1);
-  color: var(--text-primary);
 }
-.dropdown-item:hover .icon {
-  color: var(--text-primary);
 }
-.dropdown-item.danger { color: var(--accent-danger); }
-.dropdown-item.danger:hover { background: rgba(248, 113, 113, 0.1); }
-.dropdown-item.danger .icon { color: var(--accent-danger); }
-/* --- 7. Modals & Overlays --- */
 .modal-overlay {
   position: fixed;
-  inset: 0;
-  background: rgba(13, 17, 23, 0.7);
-  display: grid;
-  place-items: center;
   z-index: 2000;
   opacity: 0;
   visibility: hidden;
-  transition: var(--transition-fast);
-  backdrop-filter: blur(8px);
 }
 .modal-overlay.active {
@@ -426,16 +413,16 @@ body {
 }
 .modal {
-  background: var(--glass-bg);
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-md);
-  box-shadow: 0 16px 60px 0 var(--shadow-color);
   width: 90%;
   max-width: 450px;
   max-height: 90vh;
   overflow-y: auto;
   transform: scale(0.95);
-  transition: var(--transition-slow);
 }
 .modal-overlay.active .modal {
@@ -443,10 +430,9 @@ body {
 }
 .modal-title {
-  padding: 1.5rem 1.5rem 0.5rem;
-  font-size: 1.25rem;
   font-weight: 600;
-  border-bottom: 1px solid var(--border-color);
 }
 .modal-body {
@@ -455,19 +441,19 @@ body {
 .modal-input {
   width: 100%;
-  padding: 0.75rem 1rem;
-  border: 1px solid var(--border-color);
-  border-radius: var(--radius-sm);
-  background: rgba(0,0,0,0.2);
-  color: var(--text-primary);
-  font-size: 1rem;
-  transition: var(--transition-fast);
-  font-family: var(--font-family);
 }
 .modal-input:focus {
   outline: none;
-  border-color: var(--accent-primary);
-  box-shadow: 0 0 0 3px rgba(56, 189, 248, 0.2);
 }
 .modal-actions {
@@ -477,11 +463,14 @@ body {
   justify-content: flex-end;
 }
-/* --- 8. Loading & Empty States --- */
 .upload-overlay {
   position: fixed;
-  inset: 0;
-  background: rgba(13, 17, 23, 0.85);
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -489,96 +478,171 @@ body {
   z-index: 3000;
   opacity: 0;
   visibility: hidden;
-  transition: var(--transition-fast);
-  backdrop-filter: blur(10px);
 }
 .upload-overlay.active {
   opacity: 1;
   visibility: visible;
 }
-@keyframes spin {
-  to { transform: rotate(360deg); }
-}
 .loading-spinner {
-  width: 40px;
-  height: 40px;
-  border: 4px solid var(--border-color);
-  border-top-color: var(--accent-primary);
   border-radius: 50%;
-  animation: spin 0.8s linear infinite;
 }
 .upload-text {
-  margin-top: 1.5rem;
-  font-size: 1.1rem;
-  font-weight: 500;
-  color: var(--text-secondary);
 }
 .btn .loading-spinner {
-  width: 18px;
-  height: 18px;
   border-width: 3px;
   margin: 0;
 }
-.empty-state {
-  text-align: center;
-  padding: 4rem 1rem;
-  color: var(--text-secondary);
-  border: 2px dashed var(--border-color);
-  border-radius: var(--radius-md);
-  margin-top: 2rem;
 }
-.empty-state .icon {
-  width: 64px;
-  height: 64px;
-  margin: 0 auto 1.5rem;
-  opacity: 0.4;
 }
-.empty-state h3 {
-  color: var(--text-primary);
-  font-size: 1.5rem;
-  margin-bottom: 0.5rem;
 }
-/* --- 9. Scrollbar & Responsive Design --- */
-::-webkit-scrollbar { width: 12px; }
-::-webkit-scrollbar-track { background: var(--bg-color); }
 ::-webkit-scrollbar-thumb {
-  background-color: var(--border-color);
-  border-radius: 10px;
-  border: 3px solid var(--bg-color);
 }
-::-webkit-scrollbar-thumb:hover { background-color: var(--text-secondary); }
 @media (max-width: 1024px) {
-  .container { padding: 1.5rem; }
-  .header { flex-direction: column; align-items: stretch; }
-  .file-grid { grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
 }
 @media (max-width: 768px) {
-  body { animation: none; } /* Disable heavy animation on mobile */
-  .container { padding: 1rem; }
-  .header { padding: 1rem; }
-  .breadcrumb { justify-content: flex-start; }
-  .actions { flex-direction: column; }
-  .btn { width: 100%; }
-  .file-grid { grid-template-columns: 1fr; gap: 1rem; }
-  .modal { width: 95%; }
-  .modal-actions { flex-direction: column-reverse; }
 }
 @media (prefers-reduced-motion: reduce) {
   * {
     animation-duration: 0.01ms !important;
-    animation-iteration-count: 1 !important;
     transition-duration: 0.01ms !important;
-    scroll-behavior: auto !important;
   }
 }
- </style>
 </head>
 <body>
   <!-- Upload Overlay -->
@@ -590,8 +654,9 @@ body {
   <div class="container">
     <header class="header">
       <h1 class="title">
-        <svg class="title-icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-          <path d="M20 18H4V9.252a1 1 0 01.382-.78l1.698-1.357A2 2 0 017.152 7H9V5a2 2 0 012-2h2a2 2 0 012 2v2h1.848a2 2 0 011.072.315l1.698 1.357A1 1 0 0120 9.252V18zM18 9.873l-1.41-1.127a1 1 0 00-.536-.158H7.946a1 1 0 00-.536.158L6 9.873V16h12V9.873zM13 5h-2V4a1 1 0 011-1h0a1 1 0 011 1v1z"/>
         </svg>
         HuggingFace Drive
       </h1>
@@ -599,7 +664,7 @@ body {
       <!-- Breadcrumb -->
       <nav class="breadcrumb">
         <span class="breadcrumb-item {{ 'active' if not path else '' }}" onclick="nav('')">
-          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
             <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
           </svg>
           Home
@@ -607,10 +672,13 @@ body {
         {% if path %}
           {% set parts = path.split('/') %}
           {% for i in range(parts|length) %}
-            <span class="breadcrumb-separator">/</span>
             {% set current_path = parts[:i+1]|join('/') %}
-            <span class="breadcrumb-item {{ 'active' if current_path == path else '' }}"
                   onclick="nav('{{ current_path }}')">
               {{ parts[i] }}
             </span>
           {% endfor %}
@@ -622,8 +690,8 @@ body {
         <form action="/upload" method="post" enctype="multipart/form-data" id="uploadForm">
           <div class="file-input-wrapper">
             <label for="fileInput" class="btn btn-primary">
-              <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                <path d="M10 3a1 1 0 011 1v5h5a1 1 0 110 2h-5v5a1 1 0 11-2 0v-5H4a1 1 0 110-2h5V4a1 1 0 011-1z"/>
               </svg>
               Upload File
             </label>
@@ -633,15 +701,15 @@ body {
         </form>
         <button class="btn btn-secondary" onclick="showFolderModal('{{ path }}')">
-          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-            <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
           </svg>
           New Folder
         </button>
-        <button class="btn btn-secondary" onclick="showUrlDownloadModal('{{ path }}')">
-          <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-            <path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zM6.293 6.707a1 1 0 010-1.414l3-3a1 1 0 011.414 0l3 3a1 1 0 01-1.414 1.414L11 5.414V13a1 1 0 11-2 0V5.414L6.293 6.707z" clip-rule="evenodd" />
           </svg>
           Download from URL
         </button>
@@ -655,42 +723,50 @@ body {
           {% for item in items %}
             <div class="file-item">
               <div class="file-item-content" onclick="{% if item.type=='dir' %}nav('{{ item.path }}'){% else %}download('{{ item.path }}'){% endif %}">
-                  <div class="file-icon-wrapper {{ item.type }}">
                     {% if item.type == 'dir' %}
-                      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                         <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
                       </svg>
                     {% else %}
-                      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
-                        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4zm2 6a1 1 0 011-1h6a1 1 0 110 2H7a1 1 0 01-1-1zm1 3a1 1 0 100 2h6a1 1 0 100-2H7z" clip-rule="evenodd"/>
                       </svg>
                     {% endif %}
                   </div>
                   <div class="file-details">
-                    <div class="file-name" title="{{ item.name }}">{{ item.name }}</div>
                     <div class="file-meta">{{ item.type|title }}</div>
                   </div>
               </div>
               <div class="dropdown">
                 <button class="dropdown-toggle" onclick="toggleDropdown(event, this)">
-                  <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor">
                     <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"/>
                   </svg>
                 </button>
                 <div class="dropdown-menu">
                   {% if item.type == 'file' %}
                     <button class="dropdown-item" onclick="download('{{ item.path }}')">
-                      <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M3 17a1 1 0 011-1h12a1 1 0 110 2H4a1 1 0 01-1-1zm3.293-7.707a1 1 0 011.414 0L9 10.586V3a1 1 0 112 0v7.586l1.293-1.293a1 1 0 111.414 1.414l-3 3a1 1 0 01-1.414 0l-3-3a1 1 0 010-1.414z" clip-rule="evenodd" /></svg>
                       Download
                     </button>
                   {% endif %}
                   <button class="dropdown-item" onclick="showRenameModal('{{ item.path }}', '{{ item.name }}')">
-                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path d="M17.414 2.586a2 2 0 00-2.828 0L7 10.172V13h2.828l7.586-7.586a2 2 0 000-2.828z" /><path fill-rule="evenodd" d="M2 6a2 2 0 012-2h4a1 1 0 010 2H4v10h10v-4a1 1 0 112 0v4a2 2 0 01-2 2H4a2 2 0 01-2-2V6z" clip-rule="evenodd" /></svg>
                     Rename
                   </button>
                   <button class="dropdown-item danger" onclick="showDeleteModal('{{ item.path }}', '{{ item.name }}')">
-                    <svg class="icon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 20 20" fill="currentColor"><path fill-rule="evenodd" d="M9 2a1 1 0 00-.894.553L7.382 4H4a1 1 0 000 2v10a2 2 0 002 2h8a2 2 0 002-2V6a1 1 0 100-2h-3.382l-.724-1.447A1 1 0 0011 2H9zM7 8a1 1 0 012 0v6a1 1 0 11-2 0V8zm4 0a1 1 0 012 0v6a1 1 0 11-2 0V8z" clip-rule="evenodd" /></svg>
                     Delete
                   </button>
                 </div>
@@ -700,11 +776,11 @@ body {
         </div>
       {% else %}
         <div class="empty-state">
-          <svg class="icon" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor">
-            <path stroke-linecap="round" stroke-linejoin="round" d="M2.25 12.75V12A2.25 2.25 0 014.5 9.75h15A2.25 2.25 0 0121.75 12v.75m-8.69-6.44l-2.12-2.12a1.5 1.5 0 00-1.061-.44H4.5A2.25 2.25 0 002.25 6v12a2.25 2.25 0 002.25 2.25h15A2.25 2.25 0 0021.75 18V9a2.25 2.25 0 00-2.25-2.25h-5.379a1.5 1.5 0 01-1.06-.44z" />
           </svg>
-          <h3>This folder is empty</h3>
-          <p>Upload a file or create a new folder to get started.</p>
         </div>
       {% endif %}
     </main>
@@ -733,7 +809,7 @@ body {
     <div class="modal">
       <h3 class="modal-title">Confirm Deletion</h3>
       <div class="modal-body">
-        <p>Are you sure you want to delete <strong id="deleteItemName" style="color: var(--accent-danger);"></strong>? This action cannot be undone.</p>
       </div>
       <div class="modal-actions">
         <button class="btn btn-secondary" onclick="closeModal('deleteModal')">Cancel</button>
@@ -769,8 +845,8 @@ body {
       <div class="modal-body">
         <input type="text" class="modal-input" id="urlInput" placeholder="https://example.com/file.pdf" style="margin-bottom: 1rem;">
         <input type="text" class="modal-input" id="filenameInput" placeholder="Custom filename (optional)">
-        <p style="font-size: 0.875rem; color: var(--text-secondary); margin-top: 0.75rem;">
-          The file will be downloaded directly to the current directory in your repository.
         </p>
       </div>
       <div class="modal-actions">
@@ -804,11 +880,11 @@ body {
     function toggleDropdown(event, button) {
       event.stopPropagation();
       const dropdown = button.closest('.dropdown');
       if (activeDropdown && activeDropdown !== dropdown) {
         activeDropdown.classList.remove('active');
       }
       dropdown.classList.toggle('active');
       activeDropdown = dropdown.classList.contains('active') ? dropdown : null;
     }
@@ -825,7 +901,7 @@ body {
       const btn = document.getElementById(btnId);
       const text = document.getElementById(textId);
       const spinner = document.getElementById(spinnerId);
       btn.disabled = true;
       text.style.display = 'none';
       spinner.style.display = 'inline-block';
@@ -835,7 +911,7 @@ body {
       const btn = document.getElementById(btnId);
       const text = document.getElementById(textId);
       const spinner = document.getElementById(spinnerId);
       btn.disabled = false;
       text.style.display = 'inline-block';
       spinner.style.display = 'none';
@@ -846,7 +922,8 @@ body {
       const modal = document.getElementById(modalId);
       modal.classList.add('active');
       document.body.style.overflow = 'hidden';
       const firstInput = modal.querySelector('.modal-input');
       if (firstInput) {
         setTimeout(() => {
@@ -866,17 +943,17 @@ body {
     // Modal show functions
     function showRenameModal(path, currentName) {
-      closeAllDropdowns();
       currentRenamePath = path;
       document.getElementById('renameInput').value = currentName;
       showModal('renameModal');
     }
     function showDeleteModal(path, name) {
-      closeAllDropdowns();
       currentDeletePath = path;
       document.getElementById('deleteItemName').textContent = name;
       showModal('deleteModal');
     }
     function showFolderModal(path) {
@@ -893,30 +970,33 @@ body {
     }
     // Generic action performer
-    async function performAction(url, body, btnId, textId, spinnerId, modalToClose) {
       showSpinner(btnId, textId, spinnerId);
       try {
         const response = await fetch(url, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify(body)
         });
         const result = await response.json();
         if (response.ok) {
           if (modalToClose) closeModal(modalToClose);
-          showUploadOverlay(result.message || 'Operation successful!');
-          setTimeout(() => {
-            window.location.reload();
-          }, 1200);
         } else {
           throw new Error(result.error || 'Operation failed');
         }
       } catch (error) {
         console.error('Action failed:', error);
         alert(`Operation failed: ${error.message}`);
         hideSpinner(btnId, textId, spinnerId);
       }
     }
@@ -928,44 +1008,83 @@ body {
         alert('Please enter a valid name');
         return;
       }
-      performAction('/rename', { old_path: currentRenamePath, new_path: newName }, 'renameConfirmBtn', 'renameBtnText', 'renameBtnSpinner', 'renameModal');
     }
     function confirmDelete() {
-      performAction('/delete', { path: currentDeletePath }, 'deleteConfirmBtn', 'deleteBtnText', 'deleteBtnSpinner', 'deleteModal');
     }
     function confirmCreateFolder() {
       const folderName = document.getElementById('folderInput').value.trim();
-      if (!folderName || folderName.includes('/')) {
-        alert('Please enter a valid folder name without slashes.');
         return;
       }
       const folderPath = currentFolderPath ? `${currentFolderPath}/${folderName}` : folderName;
-      performAction('/create_folder', { path: folderPath }, 'folderConfirmBtn', 'folderBtnText', 'folderBtnSpinner', 'folderModal');
     }
     function confirmUrlDownload() {
       const url = document.getElementById('urlInput').value.trim();
       const customFilename = document.getElementById('filenameInput').value.trim();
       if (!url) {
         alert('Please enter a valid URL');
         return;
       }
-      try { new URL(url); }
-      catch(e) {
-        alert('Please enter a valid URL format.');
         return;
       }
-      performAction('/download_url', { url: url, path: currentUrlDownloadPath, filename: customFilename || null }, 'urlDownloadConfirmBtn', 'urlDownloadBtnText', 'urlDownloadBtnSpinner', 'urlDownloadModal');
     }
     // Upload overlay management
     function showUploadOverlay(message = 'Processing...') {
       const overlay = document.getElementById('uploadOverlay');
-      overlay.querySelector('.upload-text').textContent = message;
       overlay.classList.add('active');
     }
@@ -975,35 +1094,46 @@ body {
     // Event listeners
     document.addEventListener('DOMContentLoaded', function() {
       document.getElementById('fileInput').addEventListener('change', function(e) {
         if (this.files.length > 0) {
-          showUploadOverlay(`Uploading ${this.files[0].name}...`);
           document.getElementById('uploadForm').submit();
         }
       });
-      const setupModalKeyListener = (modalId, confirmFunction) => {
-        document.getElementById(modalId).addEventListener('keypress', (e) => {
-          if (e.key === 'Enter' && e.target.tagName === 'INPUT') {
-            e.preventDefault();
-            confirmFunction();
-          }
-        });
       };
-      setupModalKeyListener('renameModal', confirmRename);
-      setupModalKeyListener('folderModal', confirmCreateFolder);
-      setupModalKeyListener('urlDownloadModal', confirmUrlDownload);
       document.addEventListener('click', (e) => {
         if (!e.target.closest('.dropdown')) {
           closeAllDropdowns();
         }
         if (e.target.classList.contains('modal-overlay')) {
           closeModal(e.target.id);
         }
       });
       document.addEventListener('keydown', (e) => {
         if (e.key === 'Escape') {
           const openModal = document.querySelector('.modal-overlay.active');
@@ -1015,327 +1145,16 @@ body {
         }
       });
     });
   </script>
 </body>
-</html>
-"""
-def list_folder(path=""):
-    """List files and folders in the given path"""
-    prefix = path.strip("/") + ("/" if path else "")
-    try:
-        all_files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
-    except Exception as e:
-        print(f"Error listing files: {e}")
-        return []
-    seen = set()
-    items = []
-    for f in all_files:
-        if not f.startswith(prefix):
-            continue
-        rest = f[len(prefix):]
-        if "/" in rest:
-            # This is a subdirectory
-            dir_name = rest.split("/")[0]
-            dir_path = (prefix + dir_name).strip("/")
-            if dir_path not in seen:
-                seen.add(dir_path)
-                items.append({
-                    "type": "dir",
-                    "name": dir_name,
-                    "path": dir_path
-                })
-        else:
-            # This is a file
-            if rest:  # Skip empty filenames
-                items.append({
-                    "type": "file",
-                    "name": rest,
-                    "path": (prefix + rest).strip("/")
-                })
-    # Sort directories first, then files, both alphabetically
-    items.sort(key=lambda x: (x["type"] != "dir", x["name"].lower()))
-    return items
-def get_filename_from_url(url, custom_filename=None):
-    """Extract filename from URL or use custom filename"""
-    if custom_filename:
-        return custom_filename
-    # Parse URL and get the path
-    parsed_url = urlparse(url)
-    path = unquote(parsed_url.path)
-    # Get filename from path
-    filename = os.path.basename(path)
-    # If no filename found, generate one
-    if not filename or '.' not in filename:
-        filename = f"downloaded_file_{int(time.time())}"
-    return filename
-@app.route("/", methods=["GET"])
-def index():
-    """Main page - file browser"""
-    path = request.args.get("path", "").strip("/")
-    items = list_folder(path)
-    return render_template_string(TEMPLATE, items=items, path=path)
-@app.route("/download", methods=["GET"])
-def download():
-    """Download a file from the repository"""
-    file_path = request.args.get("path", "")
-    if not file_path:
-        return "No file path provided", 400
-    try:
-        # Download file to temporary location
-        local_path = hf_hub_download(
-            repo_id=REPO_ID,
-            filename=file_path,
-            repo_type="dataset",
-            token=HF_TOKEN,
-            cache_dir=tempfile.gettempdir()
-        )
-        # Send file to user
-        return send_file(
-            local_path,
-            as_attachment=True,
-            download_name=os.path.basename(file_path)
-        )
-    except Exception as e:
-        return f"Error downloading file: {str(e)}", 500
-@app.route("/upload", methods=["POST"])
-def upload():
-    """Upload a file to the repository"""
-    if 'file' not in request.files:
-        return "No file provided", 400
-    file = request.files["file"]
-    if file.filename == '':
-        return "No file selected", 400
-    path = request.form.get("path", "").strip("/")
-    # Create destination path
-    dest_path = f"{path}/{file.filename}".strip("/")
-    # Save file to temporary location
-    with tempfile.NamedTemporaryFile(delete=False) as tmp_file:
-        file.save(tmp_file.name)
-        try:
-            # Upload to HuggingFace
-            upload_file(
-                path_or_fileobj=tmp_file.name,
-                path_in_repo=dest_path,
-                repo_id=REPO_ID,
-                repo_type="dataset",
-                token=HF_TOKEN
-            )
-        except Exception as e:
-            os.unlink(tmp_file.name)
-            return f"Error uploading file: {str(e)}", 500
-        finally:
-            # Clean up temporary file
-            try:
-                os.unlink(tmp_file.name)
-            except:
-                pass
-    return redirect(f"/?path={path}")
-@app.route("/download_url", methods=["POST"])
-def download_url():
-    """Download a file from URL and upload to repository"""
-    data = request.get_json()
-    url = data.get("url", "").strip()
-    path = data.get("path", "").strip("/")
-    custom_filename = data.get("filename", "").strip()
-    if not url:
-        return jsonify({"error": "No URL provided"}), 400
-    if not url.startswith(('http://', 'https://')):
-        return jsonify({"error": "Invalid URL. Must start with http:// or https://"}), 400
-    try:
-        # Get filename
-        filename = get_filename_from_url(url, custom_filename)
-        dest_path = f"{path}/{filename}".strip("/")
-        # Download file from URL
-        response = requests.get(url, stream=True, timeout=30)
-        response.raise_for_status()
-        # Check if content-length is reasonable (max 500MB)
-        content_length = response.headers.get('content-length')
-        if content_length and int(content_length) > 500 * 1024 * 1024:
-            return jsonify({"error": "File too large. Maximum size is 500MB"}), 400
-        # Save to temporary file
-        with tempfile.NamedTemporaryFile(delete=False) as tmp_file:
-            # Download in chunks
-            for chunk in response.iter_content(chunk_size=8192):
-                tmp_file.write(chunk)
-            tmp_file.flush()
-            # Upload to HuggingFace
-            upload_file(
-                path_or_fileobj=tmp_file.name,
-                path_in_repo=dest_path,
-                repo_id=REPO_ID,
-                repo_type="dataset",
-                token=HF_TOKEN
-            )
-            # Clean up
-            os.unlink(tmp_file.name)
-        return jsonify({"status": "success", "message": "File downloaded and uploaded successfully"})
-    except requests.exceptions.RequestException as e:
-        return jsonify({"error": f"Failed to download from URL: {str(e)}"}), 400
-    except Exception as e:
-        return jsonify({"error": f"Upload failed: {str(e)}"}), 500
-@app.route("/delete", methods=["POST"])
-def delete():
-    """Delete a file or folder from the repository"""
-    data = request.get_json()
-    delete_path = data.get("path", "").strip("/")
-    if not delete_path:
-        return jsonify({"error": "No path provided"}), 400
-    try:
-        all_files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
-        deleted_count = 0
-        for file_path in all_files:
-            # Delete exact match or files within the folder
-            if file_path == delete_path or file_path.startswith(delete_path.rstrip("/") + "/"):
-                delete_file(
-                    repo_id=REPO_ID,
-                    path_in_repo=file_path,
-                    repo_type="dataset",
-                    token=HF_TOKEN
-                )
-                deleted_count += 1
-        if deleted_count == 0:
-            return jsonify({"error": "No files found to delete"}), 404
-        return jsonify({"status": "success", "message": f"Deleted {deleted_count} file(s)"})
-    except Exception as e:
-        return jsonify({"error": f"Delete failed: {str(e)}"}), 500
-@app.route("/create_folder", methods=["POST"])
-def create_folder():
-    """Create a new folder by uploading a .keep file"""
-    data = request.get_json()
-    folder_path = data.get("path", "").strip("/")
-    if not folder_path:
-        return jsonify({"error": "No folder path provided"}), 400
-    # Create .keep file path
-    keep_file_path = f"{folder_path}/.keep"
-    try:
-        # Create temporary empty file
-        with tempfile.NamedTemporaryFile(delete=False) as tmp_file:
-            tmp_file.write(b"# This file keeps the folder in git\n")
-            tmp_file.flush()
-            # Upload .keep file
-            upload_file(
-                path_or_fileobj=tmp_file.name,
-                path_in_repo=keep_file_path,
-                repo_id=REPO_ID,
-                repo_type="dataset",
-                token=HF_TOKEN
-            )
-            # Clean up
-            os.unlink(tmp_file.name)
-        return jsonify({"status": "success", "message": "Folder created successfully"})
-    except Exception as e:
-        return jsonify({"error": f"Failed to create folder: {str(e)}"}), 500
-@app.route("/rename", methods=["POST"])
-def rename():
-    """Rename a file or folder"""
-    data = request.get_json()
-    old_path = data.get("old_path", "").strip("/")
-    new_name = data.get("new_path", "").strip()
-    if not old_path or not new_name:
-        return jsonify({"error": "Missing old path or new name"}), 400
-    try:
-        # Get parent directory
-        parent_dir = "/".join(old_path.split("/")[:-1]) if "/" in old_path else ""
-        new_path = f"{parent_dir}/{new_name}".strip("/")
-        all_files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
-        renamed_count = 0
-        for file_path in all_files:
-            if file_path == old_path or file_path.startswith(old_path + "/"):
-                # Calculate new file path
-                relative_path = file_path[len(old_path):].lstrip("/")
-                new_file_path = (new_path + "/" + relative_path).strip("/")
-                # Download original file
-                local_path = hf_hub_download(
-                    repo_id=REPO_ID,
-                    filename=file_path,
-                    repo_type="dataset",
-                    token=HF_TOKEN,
-                    cache_dir=tempfile.gettempdir()
-                )
-                # Upload with new name
-                upload_file(
-                    path_or_fileobj=local_path,
-                    path_in_repo=new_file_path,
-                    repo_id=REPO_ID,
-                    repo_type="dataset",
-                    token=HF_TOKEN
-                )
-                # Delete original file
-                delete_file(
-                    repo_id=REPO_ID,
-                    path_in_repo=file_path,
-                    repo_type="dataset",
-                    token=HF_TOKEN
-                )
-                renamed_count += 1
-        if renamed_count == 0:
-            return jsonify({"error": "No files found to rename"}), 404
-        return jsonify({"status": "success", "message": f"Renamed {renamed_count} file(s)"})
-    except Exception as e:
-        return jsonify({"error": f"Rename failed: {str(e)}"}), 500
-if __name__ == "__main__":
-    # Add missing import
-    import time
-    app.run(debug=True, host="0.0.0.0", port=7860)

 <!DOCTYPE html>
 <html lang="en">
 <head>
   <meta charset="UTF-8">
   <title>HuggingFace Drive - {{ path or 'Root' }}</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <style>
+   /* Reset and Base Styles */
 * {
   margin: 0;
   padding: 0;
   box-sizing: border-box;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
 }
+:root {
+  --bg: #0f172a;
+  --bg-secondary: #1e293b;
+  --bg-tertiary: #334155;
+  --text: #f1f5f9;
+  --text-muted: #94a3b8;
+  --primary: #3b82f6;
+  --primary-hover: #2563eb;
+  --success: #10b981;
+  --success-hover: #059669;
+  --danger: #ef4444;
+  --danger-hover: #dc2626;
+  --border: #475569;
+  --shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+  --radius: 8px;
+  --transition: all 0.2s ease;
 }
 body {
+  background: var(--bg);
+  color: var(--text);
+  line-height: 1.5;
   min-height: 100vh;
   overflow-x: hidden;
 }
+/* Container */
 .container {
+  max-width: 1400px;
   margin: 0 auto;
+  padding: 1.5rem;
 }
+/* Header */
 .header {
   display: flex;
   flex-wrap: wrap;
   align-items: center;
   justify-content: space-between;
+  gap: 1rem;
+  padding: 1.25rem;
+  background: var(--bg-secondary);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
+  margin-bottom: 2rem;
+  backdrop-filter: blur(10px);
 }
 .title {
   display: flex;
   align-items: center;
   gap: 0.75rem;
+  font-size: 1.75rem;
   font-weight: 700;
+  color: var(--primary);
 }
 .title-icon {
   width: 28px;
   height: 28px;
+  transition: var(--transition);
 }
 .title:hover .title-icon {
+  transform: rotate(15deg) scale(1.15);
 }
+/* Breadcrumb */
 .breadcrumb {
   display: flex;
   flex-wrap: wrap;
+  align-items: center;
+  gap: 0.5rem;
+  font-size: 0.95rem;
 }
 .breadcrumb-item {
   display: flex;
   align-items: center;
   gap: 0.5rem;
+  padding: 0.5rem 1rem;
+  border-radius: 6px;
   cursor: pointer;
+  color: var(--text-muted);
+  transition: var(--transition);
 }
 .breadcrumb-item:hover {
+  background: var(--bg-tertiary);
+  color: var(--text);
+  transform: translateY(-2px);
 }
 .breadcrumb-item.active {
+  color: var(--primary);
+  background: rgba(59, 130, 246, 0.15);
 }
 .breadcrumb-separator {
+  color: var(--text-muted);
   user-select: none;
 }
+/* Actions */
 .actions {
   display: flex;
   flex-wrap: wrap;
 .btn {
   display: inline-flex;
   align-items: center;
   gap: 0.5rem;
+  padding: 0.75rem 1.5rem;
+  border: none;
+  border-radius: var(--radius);
+  font-size: 0.95rem;
+  font-weight: 500;
   cursor: pointer;
+  transition: var(--transition);
   text-decoration: none;
+  position: relative;
+  overflow: hidden;
 }
+.btn::before {
+  content: '';
+  position: absolute;
+  top: 0;
+  left: -100%;
+  width: 100%;
+  height: 100%;
+  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+  transition: left 0.4s ease;
 }
+.btn:hover::before {
+  left: 100%;
 }
 .btn-primary {
+  background: var(--primary);
+  color: #fff;
 }
 .btn-primary:hover {
+  background: var(--primary-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(59, 130, 246, 0.3);
 }
 .btn-secondary {
+  background: var(--bg-tertiary);
+  color: var(--text);
+  border: 1px solid var(--border);
 }
 .btn-secondary:hover {
+  background: var(--bg-secondary);
+  border-color: var(--primary);
+  transform: translateY(-2px);
 }
 .btn-success {
+  background: var(--success);
+  color: #fff;
 }
 .btn-success:hover {
+  background: var(--success-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(16, 185, 129, 0.3);
 }
 .btn-danger {
+  background: var(--danger);
+  color: #fff;
 }
 .btn-danger:hover {
+  background: var(--danger-hover);
+  transform: translateY(-2px);
+  box-shadow: 0 4px 16px rgba(239, 68, 68, 0.3);
 }
 .file-input-wrapper {
   position: relative;
+  overflow: hidden;
   display: inline-block;
 }
 .file-input {
   position: absolute;
   left: -9999px;
   opacity: 0;
 }
+.icon {
+  width: 18px;
+  height: 18px;
+  flex-shrink: 0;
 }
+/* File Grid */
 .file-grid {
   display: grid;
   grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
+  gap: 1.25rem;
+  animation: fadeIn 0.5s ease;
 }
 .file-item {
+  background: var(--bg-secondary);
+  border-radius: var(--radius);
+  border: 1px solid var(--border);
+  transition: var(--transition);
   position: relative;
+  overflow: visible;
 }
 .file-item:hover {
+  transform: translateY(-4px);
+  box-shadow: var(--shadow);
+  border-color: var(--primary);
+  overflow: visible;
 }
 .file-item-content {
+  padding: 1.25rem;
   display: flex;
   align-items: center;
   gap: 1rem;
   cursor: pointer;
+  overflow: visible;
 }
+.file-info {
+  display: flex;
+  align-items: center;
+  gap: 1rem;
+  flex: 1;
+}
+.file-icon {
   width: 48px;
   height: 48px;
+  border-radius: 8px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: var(--transition);
 }
+.file-icon.dir {
+  background: rgba(59, 130, 246, 0.1);
+  color: var(--primary);
 }
+.file-icon.file {
+  background: rgba(16, 185, 129, 0.1);
+  color: var(--success);
 }
+.file-item:hover .file-icon {
   transform: scale(1.1);
 }
 .file-details {
+  flex: 1;
 }
 .file-name {
   font-weight: 500;
+  margin-bottom: 0.25rem;
+  word-break: break-word;
+  font-size: 1rem;
 }
 .file-meta {
+  font-size: 0.85rem;
+  color: var(--text-muted);
 }
+/* Dropdown */
 .dropdown {
   position: absolute;
   top: 0.5rem;
 .dropdown-toggle {
   background: none;
   border: none;
+  color: var(--text-muted);
   cursor: pointer;
+  padding: 0.5rem;
+  border-radius: 6px;
+  transition: var(--transition);
 }
 .dropdown-toggle:hover {
+  background: var(--bg-tertiary);
+  color: var(--text);
 }
 .dropdown-menu {
   position: absolute;
+  top: 100%;
   right: 0;
+  background: var(--bg-secondary);
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
   min-width: 180px;
   z-index: 1000;
   opacity: 0;
   visibility: hidden;
+  transform: translateY(-10px);
+  transition: var(--transition);
 }
 .dropdown.active .dropdown-menu {
   opacity: 1;
   visibility: visible;
+  transform: translateY(0);
 }
 .dropdown-item {
   display: flex;
   align-items: center;
+  gap: 0.5rem;
   width: 100%;
+  padding: 0.75rem 1rem;
   border: none;
   background: none;
+  color: var(--text);
   font-size: 0.9rem;
   cursor: pointer;
+  transition: var(--transition);
   text-align: left;
 }
 .dropdown-item:hover {
+  background: var(--bg-tertiary);
 }
+.dropdown-item.danger {
+  color: var(--danger);
 }
+.dropdown-item.danger:hover {
+  background: rgba(239, 68, 68, 0.1);
+}
+/* Empty State */
+.empty-state {
+  text-align: center;
+  padding: 3rem 1rem;
+  color: var(--text-muted);
+}
+.empty-state .icon {
+  width: 72px;
+  height: 72px;
+  margin: 0 auto 1rem;
+  opacity: 0.6;
+}
+.empty-state h3 {
+  margin-bottom: 0.5rem;
+  color: var(--text);
+  font-size: 1.25rem;
+}
+/* Modals */
 .modal-overlay {
   position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.75);
+  display: flex;
+  align-items: center;
+  justify-content: center;
   z-index: 2000;
   opacity: 0;
   visibility: hidden;
+  transition: var(--transition);
+  backdrop-filter: blur(5px);
 }
 .modal-overlay.active {
 }
 .modal {
+  background: var(--bg-secondary);
+  border-radius: var(--radius);
+  box-shadow: var(--shadow);
   width: 90%;
   max-width: 450px;
   max-height: 90vh;
   overflow-y: auto;
   transform: scale(0.95);
+  transition: var(--transition);
+  border: 1px solid var(--border);
 }
 .modal-overlay.active .modal {
 }
 .modal-title {
+  padding: 1.5rem 1.5rem 0;
+  font-size: 1.3rem;
   font-weight: 600;
 }
 .modal-body {
 .modal-input {
   width: 100%;
+  padding: 0.75rem;
+  border: 1px solid var(--border);
+  border-radius: var(--radius);
+  background: var(--bg-tertiary);
+  color: var(--text);
+  font-size: 0.95rem;
+  transition: var(--transition);
 }
 .modal-input:focus {
   outline: none;
+  border-color: var(--primary);
+  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
 }
 .modal-actions {
   justify-content: flex-end;
 }
+/* Upload Overlay */
 .upload-overlay {
   position: fixed;
+  top: 0;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  background: rgba(0, 0, 0, 0.85);
   display: flex;
   flex-direction: column;
   align-items: center;
   z-index: 3000;
   opacity: 0;
   visibility: hidden;
+  transition: var(--transition);
 }
 .upload-overlay.active {
   opacity: 1;
   visibility: visible;
 }
 .loading-spinner {
+  width: 48px;
+  height: 48px;
+  border: 4px solid var(--border);
+  border-top: 4px solid var(--primary);
   border-radius: 50%;
+  animation: spin 1s linear infinite;
+  margin-bottom: 1rem;
 }
 .upload-text {
+  font-size: 1.2rem;
+  color: var(--text);
 }
 .btn .loading-spinner {
+  width: 20px;
+  height: 20px;
   border-width: 3px;
   margin: 0;
 }
+/* Animations */
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
 }
+@keyframes fadeIn {
+  from {
+    opacity: 0;
+    transform: translateY(20px);
+  }
+  to {
+    opacity: 1;
+    transform: translateY(0);
+  }
 }
+/* Scrollbar */
+::-webkit-scrollbar {
+  width: 10px;
+}
+::-webkit-scrollbar-track {
+  background: var(--bg-tertiary);
 }
 ::-webkit-scrollbar-thumb {
+  background: var(--border);
+  border-radius: 5px;
 }
+::-webkit-scrollbar-thumb:hover {
+  background: var(--text-muted);
+}
+/* Responsive Design */
 @media (max-width: 1024px) {
+  .container {
+    padding: 1rem;
+  }
+  .header {
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 1.5rem;
+  }
+  .title {
+    justify-content: center;
+    width: 100%;
+  }
+  .breadcrumb {
+    justify-content: center;
+    width: 100%;
+  }
+  .actions {
+    justify-content: center;
+    width: 100%;
+  }
+  .file-grid {
+    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
+    gap: 1rem;
+  }
 }
 @media (max-width: 768px) {
+  .file-grid {
+    grid-template-columns: 1fr;
+  }
+  .file-item-content {
+    padding: 1rem;
+  }
+  .file-icon {
+    width: 40px;
+    height: 40px;
+  }
+  .file-name {
+    font-size: 0.95rem;
+  }
+  .modal {
+    width: 95%;
+    margin: 1rem;
+  }
+  .modal-actions {
+    flex-direction: column;
+  }
+  .btn {
+    width: 100%;
+    justify-content: center;
+  }
 }
+@media (max-width: 480px) {
+  .title {
+    font-size: 1.5rem;
+  }
+  .breadcrumb-item {
+    padding: 0.5rem 0.75rem;
+    font-size: 0.9rem;
+  }
+  .file-icon {
+    width: 36px;
+    height: 36px;
+  }
+  .file-name {
+    font-size: 0.9rem;
+  }
+  .actions {
+    flex-direction: column;
+  }
+}
+/* Reduced Motion */
 @media (prefers-reduced-motion: reduce) {
   * {
     animation-duration: 0.01ms !important;
     transition-duration: 0.01ms !important;
   }
 }
+   </style>
 </head>
 <body>
   <!-- Upload Overlay -->
   <div class="container">
     <header class="header">
       <h1 class="title">
+        <svg class="title-icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M3 7v10a2 2 0 002 2h14a2 2 0 002-2V9a2 2 0 00-2-2H5a2 2 0 00-2-2z"></path>
+          <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M8 5a2 2 0 012-2h4a2 2 0 012 2v0a2 2 0 01-2 2H10a2 2 0 01-2-2v0z"></path>
         </svg>
         HuggingFace Drive
       </h1>
       <!-- Breadcrumb -->
       <nav class="breadcrumb">
         <span class="breadcrumb-item {{ 'active' if not path else '' }}" onclick="nav('')">
+          <svg class="icon" fill="currentColor" viewBox="0 0 20 20">
             <path d="M10.707 2.293a1 1 0 00-1.414 0l-7 7a1 1 0 001.414 1.414L4 10.414V17a1 1 0 001 1h2a1 1 0 001-1v-2a1 1 0 011-1h2a1 1 0 011 1v2a1 1 0 001 1h2a1 1 0 001-1v-6.586l.293.293a1 1 0 001.414-1.414l-7-7z"/>
           </svg>
           Home
         {% if path %}
           {% set parts = path.split('/') %}
           {% for i in range(parts|length) %}
+            <span class="breadcrumb-separator">›</span>
             {% set current_path = parts[:i+1]|join('/') %}
+            <span class="breadcrumb-item {{ 'active' if current_path == path else '' }}"
                   onclick="nav('{{ current_path }}')">
+              <svg class="icon" fill="currentColor" viewBox="0 0 20 20">
+                <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
+              </svg>
               {{ parts[i] }}
             </span>
           {% endfor %}
         <form action="/upload" method="post" enctype="multipart/form-data" id="uploadForm">
           <div class="file-input-wrapper">
             <label for="fileInput" class="btn btn-primary">
+              <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M7 16a4 4 0 01-.88-7.903A5 5 0 1115.9 6L16 6a5 5 0 011 9.9M15 13l-3-3m0 0l-3 3m3-3v12"/>
               </svg>
               Upload File
             </label>
         </form>
         <button class="btn btn-secondary" onclick="showFolderModal('{{ path }}')">
+          <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6v6m0 0v6m0-6h6m-6 0H6"/>
           </svg>
           New Folder
         </button>
+        <button class="btn btn-success" onclick="showUrlDownloadModal('{{ path }}')">
+          <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
           </svg>
           Download from URL
         </button>
           {% for item in items %}
             <div class="file-item">
               <div class="file-item-content" onclick="{% if item.type=='dir' %}nav('{{ item.path }}'){% else %}download('{{ item.path }}'){% endif %}">
+                <div class="file-info">
+                  <div class="file-icon {{ item.type }}">
                     {% if item.type == 'dir' %}
+                      <svg class="icon" fill="currentColor" viewBox="0 0 20 20">
                         <path d="M2 6a2 2 0 012-2h5l2 2h5a2 2 0 012 2v6a2 2 0 01-2 2H4a2 2 0 01-2-2V6z"/>
                       </svg>
                     {% else %}
+                      <svg class="icon" fill="currentColor" viewBox="0 0 20 20">
+                        <path fill-rule="evenodd" d="M4 4a2 2 0 012-2h4.586A2 2 0 0112 2.586L15.414 6A2 2 0 0116 7.414V16a2 2 0 01-2 2H6a2 2 0 01-2-2V4z" clip-rule="evenodd"/>
                       </svg>
                     {% endif %}
                   </div>
                   <div class="file-details">
+                    <div class="file-name">{{ item.name }}</div>
                     <div class="file-meta">{{ item.type|title }}</div>
                   </div>
+                </div>
               </div>
               <div class="dropdown">
                 <button class="dropdown-toggle" onclick="toggleDropdown(event, this)">
+                  <svg class="icon" fill="currentColor" viewBox="0 0 20 20">
                     <path d="M10 6a2 2 0 110-4 2 2 0 010 4zM10 12a2 2 0 110-4 2 2 0 010 4zM10 18a2 2 0 110-4 2 2 0 010 4z"/>
                   </svg>
                 </button>
                 <div class="dropdown-menu">
                   {% if item.type == 'file' %}
                     <button class="dropdown-item" onclick="download('{{ item.path }}')">
+                      <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
+                      </svg>
                       Download
                     </button>
                   {% endif %}
                   <button class="dropdown-item" onclick="showRenameModal('{{ item.path }}', '{{ item.name }}')">
+                    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z"/>
+                    </svg>
                     Rename
                   </button>
                   <button class="dropdown-item danger" onclick="showDeleteModal('{{ item.path }}', '{{ item.name }}')">
+                    <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                      <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16"/>
+                    </svg>
                     Delete
                   </button>
                 </div>
         </div>
       {% else %}
         <div class="empty-state">
+          <svg class="icon" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z"/>
           </svg>
+          <h3>No files yet</h3>
+          <p>Upload your first file or create a folder to get started.</p>
         </div>
       {% endif %}
     </main>
     <div class="modal">
       <h3 class="modal-title">Confirm Deletion</h3>
       <div class="modal-body">
+        <p>Are you sure you want to delete <strong id="deleteItemName"></strong>? This action cannot be undone.</p>
       </div>
       <div class="modal-actions">
         <button class="btn btn-secondary" onclick="closeModal('deleteModal')">Cancel</button>
       <div class="modal-body">
         <input type="text" class="modal-input" id="urlInput" placeholder="https://example.com/file.pdf" style="margin-bottom: 1rem;">
         <input type="text" class="modal-input" id="filenameInput" placeholder="Custom filename (optional)">
+        <p style="font-size: 0.875rem; color: var(--text-muted); margin-top: 0.5rem;">
+          The file will be downloaded directly to your HuggingFace repository.
         </p>
       </div>
       <div class="modal-actions">
     function toggleDropdown(event, button) {
       event.stopPropagation();
       const dropdown = button.closest('.dropdown');
       if (activeDropdown && activeDropdown !== dropdown) {
         activeDropdown.classList.remove('active');
       }
       dropdown.classList.toggle('active');
       activeDropdown = dropdown.classList.contains('active') ? dropdown : null;
     }
       const btn = document.getElementById(btnId);
       const text = document.getElementById(textId);
       const spinner = document.getElementById(spinnerId);
       btn.disabled = true;
       text.style.display = 'none';
       spinner.style.display = 'inline-block';
       const btn = document.getElementById(btnId);
       const text = document.getElementById(textId);
       const spinner = document.getElementById(spinnerId);
       btn.disabled = false;
       text.style.display = 'inline-block';
       spinner.style.display = 'none';
       const modal = document.getElementById(modalId);
       modal.classList.add('active');
       document.body.style.overflow = 'hidden';
+      // Focus first input in modal
       const firstInput = modal.querySelector('.modal-input');
       if (firstInput) {
         setTimeout(() => {
     // Modal show functions
     function showRenameModal(path, currentName) {
       currentRenamePath = path;
       document.getElementById('renameInput').value = currentName;
       showModal('renameModal');
+      closeAllDropdowns();
     }
     function showDeleteModal(path, name) {
       currentDeletePath = path;
       document.getElementById('deleteItemName').textContent = name;
       showModal('deleteModal');
+      closeAllDropdowns();
     }
     function showFolderModal(path) {
     }
     // Generic action performer
+    async function performAction(url, body, btnId, textId, spinnerId, modalToClose, successMessage) {
       showSpinner(btnId, textId, spinnerId);
       try {
         const response = await fetch(url, {
           method: 'POST',
           headers: { 'Content-Type': 'application/json' },
           body: JSON.stringify(body)
         });
         const result = await response.json();
         if (response.ok) {
           if (modalToClose) closeModal(modalToClose);
+          if (successMessage) {
+            // Show brief success message
+            showUploadOverlay(successMessage);
+            setTimeout(() => hideUploadOverlay(), 1500);
+          }
+          setTimeout(() => window.location.reload(), successMessage ? 1500 : 0);
         } else {
           throw new Error(result.error || 'Operation failed');
         }
       } catch (error) {
         console.error('Action failed:', error);
         alert(`Operation failed: ${error.message}`);
+      } finally {
         hideSpinner(btnId, textId, spinnerId);
       }
     }
         alert('Please enter a valid name');
         return;
       }
+      performAction(
+        '/rename',
+        { old_path: currentRenamePath, new_path: newName },
+        'renameConfirmBtn',
+        'renameBtnText',
+        'renameBtnSpinner',
+        'renameModal',
+        'Item renamed successfully!'
+      );
     }
     function confirmDelete() {
+      performAction(
+        '/delete',
+        { path: currentDeletePath },
+        'deleteConfirmBtn',
+        'deleteBtnText',
+        'deleteBtnSpinner',
+        'deleteModal',
+        'Item deleted successfully!'
+      );
     }
     function confirmCreateFolder() {
       const folderName = document.getElementById('folderInput').value.trim();
+      if (!folderName) {
+        alert('Please enter a folder name');
         return;
       }
       const folderPath = currentFolderPath ? `${currentFolderPath}/${folderName}` : folderName;
+      performAction(
+        '/create_folder',
+        { path: folderPath },
+        'folderConfirmBtn',
+        'folderBtnText',
+        'folderBtnSpinner',
+        'folderModal',
+        'Folder created successfully!'
+      );
     }
     function confirmUrlDownload() {
       const url = document.getElementById('urlInput').value.trim();
       const customFilename = document.getElementById('filenameInput').value.trim();
       if (!url) {
         alert('Please enter a valid URL');
         return;
       }
+      if (!url.startsWith('http://') && !url.startsWith('https://')) {
+        alert('Please enter a valid HTTP/HTTPS URL');
         return;
       }
+      performAction(
+        '/download_url',
+        {
+          url: url,
+          path: currentUrlDownloadPath,
+          filename: customFilename || null
+        },
+        'urlDownloadConfirmBtn',
+        'urlDownloadBtnText',
+        'urlDownloadBtnSpinner',
+        'urlDownloadModal',
+        'File downloaded successfully!'
+      );
     }
     // Upload overlay management
     function showUploadOverlay(message = 'Processing...') {
       const overlay = document.getElementById('uploadOverlay');
+      const text = overlay.querySelector('.upload-text');
+      text.textContent = message;
       overlay.classList.add('active');
     }
     // Event listeners
     document.addEventListener('DOMContentLoaded', function() {
+      // File input change handler
       document.getElementById('fileInput').addEventListener('change', function(e) {
         if (this.files.length > 0) {
+          showUploadOverlay('Uploading file...');
           document.getElementById('uploadForm').submit();
         }
       });
+      // Modal keyboard handlers
+      const setupModalKeyListener = (inputId, confirmFunction) => {
+        const input = document.getElementById(inputId);
+        if (input) {
+          input.addEventListener('keypress', (e) => {
+            if (e.key === 'Enter') {
+              e.preventDefault();
+              confirmFunction();
+            }
+          });
+        }
       };
+      setupModalKeyListener('renameInput', confirmRename);
+      setupModalKeyListener('folderInput', confirmCreateFolder);
+      setupModalKeyListener('urlInput', confirmUrlDownload);
+      setupModalKeyListener('filenameInput', confirmUrlDownload);
+      // Global click handler
       document.addEventListener('click', (e) => {
+        // Close dropdowns when clicking outside
         if (!e.target.closest('.dropdown')) {
           closeAllDropdowns();
         }
+        // Close modal when clicking overlay
         if (e.target.classList.contains('modal-overlay')) {
           closeModal(e.target.id);
         }
       });
+      // Global keyboard handler
       document.addEventListener('keydown', (e) => {
         if (e.key === 'Escape') {
           const openModal = document.querySelector('.modal-overlay.active');
         }
       });
     });
+    // Prevent form submission on enter in modals (except for specific inputs)
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Enter' && e.target.closest('.modal') && e.target.tagName !== 'BUTTON') {
+        const modal = e.target.closest('.modal-overlay');
+        if (modal) {
+          e.preventDefault();
+        }
+      }
+    });
   </script>
 </body>
+</html>