Spaces:

testdeep123
/

cronjob

Running

App Files Files Community

testdeep123 commited on Jul 25

Commit

65096b4

verified ·

1 Parent(s): 15f5037

Update app.py

Browse files

Files changed (1) hide show

app.py +506 -620

app.py CHANGED Viewed

@@ -1,745 +1,631 @@
 import os
 import tempfile
 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>
 <head>
   <meta charset="UTF-8">
-  <title>HuggingFace Drive - {{ path or 'Root' }}</title>
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
   <style>
-    * {
-      margin: 0;
-      padding: 0;
-      box-sizing: border-box;
     }
     body {
-      background: linear-gradient(135deg, #0f0f23 0%, #1a1a2e 100%);
-      color: #e2e8f0;
-      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-      min-height: 100vh;
-      overflow-x: hidden;
     }
     .container {
-      max-width: 1200px;
       margin: 0 auto;
-      padding: 20px;
     }
-    .header {
-      background: rgba(255, 255, 255, 0.05);
-      backdrop-filter: blur(10px);
-      border-radius: 16px;
-      padding: 24px;
-      margin-bottom: 24px;
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      box-shadow: 0 8px 32px rgba(0, 0, 0, 0.3);
     }
-    .title {
-      font-size: 2rem;
-      font-weight: 700;
-      margin-bottom: 16px;
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
     }
-    .breadcrumb {
-      display: flex;
-      align-items: center;
-      gap: 8px;
       margin-bottom: 20px;
-      flex-wrap: wrap;
-    }
-    .breadcrumb-item {
-      background: rgba(255, 255, 255, 0.1);
-      color: #94a3b8;
-      padding: 6px 12px;
-      border-radius: 20px;
-      font-size: 0.875rem;
-      cursor: pointer;
-      transition: all 0.3s ease;
-      border: 1px solid rgba(255, 255, 255, 0.1);
     }
-    .breadcrumb-item:hover {
-      background: rgba(102, 126, 234, 0.2);
-      color: #e2e8f0;
-      transform: translateY(-1px);
     }
-    .breadcrumb-item.active {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      color: white;
     }
-    .breadcrumb-separator {
-      color: #64748b;
-      font-size: 0.875rem;
-    }
     .actions {
-      display: flex;
-      gap: 12px;
-      margin-bottom: 24px;
-      flex-wrap: wrap;
-    }
-    .upload-container {
-      position: relative;
-      overflow: hidden;
-      display: inline-block;
-    }
-    .file-input {
-      position: absolute;
-      left: -9999px;
-      opacity: 0;
-    }
-    .btn {
-      background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-      color: white;
-      border: none;
-      padding: 12px 24px;
-      border-radius: 12px;
-      cursor: pointer;
-      font-weight: 600;
-      font-size: 0.875rem;
-      transition: all 0.3s ease;
-      box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-    }
-    .btn:hover {
-      transform: translateY(-2px);
-      box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
-    }
-    .btn-secondary {
-      background: rgba(255, 255, 255, 0.1);
-      color: #e2e8f0;
-      box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
-    }
-    .btn-secondary:hover {
-      background: rgba(255, 255, 255, 0.15);
-      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
-    }
-    .file-grid {
-      display: grid;
-      gap: 16px;
-      grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
-    }
-    .file-item {
-      background: rgba(255, 255, 255, 0.05);
-      backdrop-filter: blur(10px);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      border-radius: 16px;
-      padding: 20px;
-      transition: all 0.3s ease;
-      cursor: pointer;
-      position: relative;
-      overflow: hidden;
-    }
-    .file-item::before {
-      content: '';
-      position: absolute;
-      top: 0;
-      left: -100%;
-      width: 100%;
-      height: 100%;
-      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.1), transparent);
-      transition: left 0.5s ease;
-    }
-    .file-item:hover::before {
-      left: 100%;
-    }
-    .file-item:hover {
-      transform: translateY(-4px);
-      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.3);
-      border-color: rgba(102, 126, 234, 0.3);
-    }
-    .file-content {
-      display: flex;
-      align-items: center;
-      justify-content: space-between;
-      position: relative;
-      z-index: 2;
-    }
-    .file-info {
       display: flex;
       align-items: center;
-      gap: 12px;
-      flex: 1;
-    }
-    .file-icon {
-      font-size: 1.5rem;
-      width: 40px;
-      height: 40px;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      border-radius: 10px;
-      background: rgba(255, 255, 255, 0.1);
-    }
-    .folder-icon {
-      background: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
-    }
-    .file-name {
-      font-weight: 500;
-      font-size: 1rem;
-      color: #f1f5f9;
-    }
-    .dropdown {
-      position: relative;
     }
-    .dropdown-toggle {
-      background: rgba(255, 255, 255, 0.1);
-      border: none;
-      color: #94a3b8;
-      padding: 8px;
-      border-radius: 8px;
       cursor: pointer;
-      transition: all 0.3s ease;
-      font-size: 1.25rem;
-      width: 36px;
-      height: 36px;
       display: flex;
       align-items: center;
-      justify-content: center;
     }
-    .dropdown-toggle:hover {
-      background: rgba(255, 255, 255, 0.2);
-      color: #e2e8f0;
     }
-    .dropdown-menu {
       position: absolute;
-      top: 100%;
       right: 0;
-      background: rgba(15, 15, 35, 0.95);
-      backdrop-filter: blur(20px);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      border-radius: 12px;
-      padding: 8px;
-      min-width: 150px;
-      opacity: 0;
-      visibility: hidden;
-      transform: translateY(-10px);
-      transition: all 0.3s ease;
-      z-index: 1000;
-      box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
-    }
-    .dropdown.active .dropdown-menu {
-      opacity: 1;
-      visibility: visible;
-      transform: translateY(0);
-    }
-    .dropdown-item {
-      display: flex;
-      align-items: center;
-      gap: 8px;
-      padding: 10px 12px;
-      border-radius: 8px;
       cursor: pointer;
-      transition: all 0.2s ease;
-      font-size: 0.875rem;
-      color: #cbd5e1;
-    }
-    .dropdown-item:hover {
-      background: rgba(255, 255, 255, 0.1);
-      color: #f1f5f9;
-    }
-    .dropdown-item.danger:hover {
-      background: rgba(239, 68, 68, 0.2);
-      color: #fca5a5;
     }
-    /* Modal Styles */
-    .modal-overlay {
       position: fixed;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      background: rgba(0, 0, 0, 0.7);
-      backdrop-filter: blur(5px);
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      z-index: 2000;
       opacity: 0;
-      visibility: hidden;
-      transition: all 0.3s ease;
     }
-    .modal-overlay.active {
       opacity: 1;
-      visibility: visible;
     }
     .modal {
-      background: rgba(15, 15, 35, 0.95);
-      backdrop-filter: blur(20px);
-      border: 1px solid rgba(255, 255, 255, 0.1);
-      border-radius: 20px;
-      padding: 32px;
-      max-width: 400px;
-      width: 90%;
-      transform: scale(0.8);
-      transition: all 0.3s ease;
-      box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6);
-    }
-    .modal-overlay.active .modal {
-      transform: scale(1);
-    }
-    .modal-title {
-      font-size: 1.25rem;
-      font-weight: 600;
-      margin-bottom: 16px;
-      color: #f1f5f9;
-    }
-    .modal-input {
-      width: 100%;
-      background: rgba(255, 255, 255, 0.1);
-      border: 1px solid rgba(255, 255, 255, 0.2);
       border-radius: 12px;
-      padding: 12px 16px;
-      color: #f1f5f9;
-      font-size: 1rem;
-      margin-bottom: 20px;
-    }
-    .modal-input:focus {
-      outline: none;
-      border-color: #667eea;
-      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
-    }
-    .modal-actions {
-      display: flex;
-      gap: 12px;
-      justify-content: flex-end;
-    }
-    .btn-danger {
-      background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
-      box-shadow: 0 4px 15px rgba(239, 68, 68, 0.3);
-    }
-    .btn-danger:hover {
-      box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
-    }
-    /* Loading Animation */
-    .loading {
-      display: inline-block;
-      width: 20px;
-      height: 20px;
-      border: 2px solid rgba(255, 255, 255, 0.3);
-      border-radius: 50%;
-      border-top-color: #667eea;
-      animation: spin 1s ease-in-out infinite;
-    }
-    @keyframes spin {
-      to { transform: rotate(360deg); }
-    }
-    /* Responsive Design */
-    @media (max-width: 768px) {
-      .container {
-        padding: 16px;
-      }
-      .file-grid {
-        grid-template-columns: 1fr;
-      }
-      .actions {
-        flex-direction: column;
-      }
-      .breadcrumb {
-        flex-direction: column;
-        align-items: flex-start;
-      }
     }
-    /* Custom Scrollbar */
-    ::-webkit-scrollbar {
-      width: 8px;
-    }
-    ::-webkit-scrollbar-track {
-      background: rgba(255, 255, 255, 0.1);
-    }
-    ::-webkit-scrollbar-thumb {
-      background: rgba(102, 126, 234, 0.5);
-      border-radius: 4px;
-    }
-    ::-webkit-scrollbar-thumb:hover {
-      background: rgba(102, 126, 234, 0.7);
-    }
-  </style>
-</head>
-<body>
   <div class="container">
-    <div class="header">
-      <h1 class="title">🚀 HuggingFace Drive</h1>
-      <!-- Breadcrumb Navigation -->
-      <div class="breadcrumb">
-        <span class="breadcrumb-item {{ 'active' if not path else '' }}" onclick="nav('')">
-          🏠 Home
-        </span>
-        {% 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 %}
         {% endif %}
-      </div>
-      <!-- Actions -->
-      <div class="actions">
-        <form action="/upload" method="post" enctype="multipart/form-data" class="upload-container">
-          <input type="file" name="file" required class="file-input" id="fileInput">
-          <input type="hidden" name="path" value="{{ path }}">
-          <label for="fileInput" class="btn">
-            📤 Upload File
-          </label>
-        </form>
-        <button class="btn btn-secondary" onclick="createFolder('{{ path }}')">
-          📁 New Folder
-        </button>
-      </div>
     </div>
-    <!-- File Grid -->
-    <div class="file-grid">
       {% for item in items %}
-        <div class="file-item">
-          <div class="file-content">
-            <div class="file-info" onclick="{% if item.type=='dir' %}nav('{{ item.path }}'){% endif %}">
-              <div class="file-icon {{ 'folder-icon' if item.type=='dir' else '' }}">
-                {{ '📁' if item.type=='dir' else '📄' }}
-              </div>
-              <div class="file-name">{{ item.name }}</div>
-            </div>
-            <div class="dropdown">
-              <button class="dropdown-toggle" onclick="toggleDropdown(this)">⋮</button>
-              <div class="dropdown-menu">
-                {% if item.type == 'file' %}
-                  <div class="dropdown-item" onclick="download('{{ item.path }}')">
-                    📥 Download
-                  </div>
-                {% endif %}
-                <div class="dropdown-item" onclick="showRenameModal('{{ item.path }}', '{{ item.name }}')">
-                  ✏️ Rename
-                </div>
-                <div class="dropdown-item danger" onclick="showDeleteModal('{{ item.path }}')">
-                  🗑️ Delete
-                </div>
-              </div>
             </div>
           </div>
         </div>
       {% endfor %}
-    </div>
-  </div>
-  <!-- Rename Modal -->
-  <div class="modal-overlay" id="renameModal">
-    <div class="modal">
-      <h3 class="modal-title">Rename Item</h3>
-      <input type="text" class="modal-input" id="renameInput" placeholder="Enter new name">
-      <div class="modal-actions">
-        <button class="btn btn-secondary" onclick="closeModal('renameModal')">Cancel</button>
-        <button class="btn" onclick="confirmRename()">Rename</button>
-      </div>
-    </div>
-  </div>
-  <!-- Delete Confirmation Modal -->
-  <div class="modal-overlay" id="deleteModal">
-    <div class="modal">
-      <h3 class="modal-title">Confirm Deletion</h3>
-      <p style="margin-bottom: 20px; color: #cbd5e1;">Are you sure you want to delete this item? This action cannot be undone.</p>
-      <div class="modal-actions">
-        <button class="btn btn-secondary" onclick="closeModal('deleteModal')">Cancel</button>
-        <button class="btn btn-danger" onclick="confirmDelete()">Delete</button>
-      </div>
     </div>
   </div>
   <script>
-    let currentRenamePath = '';
-    let currentDeletePath = '';
-    let activeDropdown = null;
-    function nav(p) {
-      location.href = '/?path=' + encodeURIComponent(p);
     }
-    function download(path) {
-      window.open('/download?path=' + encodeURIComponent(path), '_blank');
     }
-    function toggleDropdown(button) {
-      const dropdown = button.closest('.dropdown');
-      // Close other dropdowns
-      if (activeDropdown && activeDropdown !== dropdown) {
-        activeDropdown.classList.remove('active');
-      }
-      dropdown.classList.toggle('active');
-      activeDropdown = dropdown.classList.contains('active') ? dropdown : null;
     }
-    function showRenameModal(path, currentName) {
-      currentRenamePath = path;
-      document.getElementById('renameInput').value = currentName;
-      showModal('renameModal');
-      setTimeout(() => document.getElementById('renameInput').focus(), 100);
-      closeAllDropdowns();
-    }
-    function showDeleteModal(path) {
-      currentDeletePath = path;
-      showModal('deleteModal');
-      closeAllDropdowns();
     }
     function showModal(modalId) {
-      document.getElementById(modalId).classList.add('active');
     }
-    function closeModal(modalId) {
-      document.getElementById(modalId).classList.remove('active');
     }
-    function closeAllDropdowns() {
-      document.querySelectorAll('.dropdown.active').forEach(dropdown => {
-        dropdown.classList.remove('active');
       });
-      activeDropdown = null;
     }
-    async function confirmRename() {
       const newName = document.getElementById('renameInput').value.trim();
-      if (!newName) return;
-      try {
-        const response = await fetch('/rename', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({
-            old_path: currentRenamePath,
-            new_path: newName
-          })
-        });
-        if (response.ok) {
-          closeModal('renameModal');
-          location.reload();
-        }
-      } catch (error) {
-        console.error('Rename failed:', error);
       }
     }
-    async function confirmDelete() {
-      try {
-        const response = await fetch('/delete', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ path: currentDeletePath })
-        });
-        if (response.ok) {
-          closeModal('deleteModal');
-          location.reload();
-        }
-      } catch (error) {
-        console.error('Delete failed:', error);
-      }
     }
-    async function createFolder(currentPath) {
-      const name = prompt('Enter folder name:');
-      if (!name) return;
-      try {
-        const folderPath = currentPath ? `${currentPath}/${name}` : name;
-        const response = await fetch('/create_folder', {
-          method: 'POST',
-          headers: { 'Content-Type': 'application/json' },
-          body: JSON.stringify({ path: folderPath })
-        });
-        if (response.ok) {
-          location.reload();
-        }
-      } catch (error) {
-        console.error('Create folder failed:', error);
-      }
     }
-    // Close dropdowns when clicking outside
-    document.addEventListener('click', function(e) {
-      if (!e.target.closest('.dropdown')) {
-        closeAllDropdowns();
-      }
-    });
-    // Handle file input change for better UX
-    document.getElementById('fileInput').addEventListener('change', function(e) {
-      if (e.target.files.length > 0) {
-        e.target.closest('form').submit();
-      }
-    });
-    // Handle modal close on overlay click
-    document.querySelectorAll('.modal-overlay').forEach(overlay => {
-      overlay.addEventListener('click', function(e) {
-        if (e.target === overlay) {
-          overlay.classList.remove('active');
         }
-      });
     });
-    // Handle Enter key in rename modal
-    document.getElementById('renameInput').addEventListener('keypress', function(e) {
-      if (e.key === 'Enter') {
-        confirmRename();
-      }
-    });
   </script>
 </body>
 </html>
 """
 def list_folder(path=""):
-    prefix = path.strip("/") + ("/" if path else "")
-    all_files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
-    seen = set()
-    items = []
-    for f in all_files:
-        if not f.startswith(prefix): continue
-        rest = f[len(prefix):]
-        if "/" in rest:
-            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:
-            items.append({"type":"file","name":rest,"path":(prefix + rest).strip("/")})
-    # sort dirs then files
-    items.sort(key=lambda x: (x["type"]!="dir", x["name"].lower()))
-    return items
 @app.route("/", methods=["GET"])
 def index():
-    path = request.args.get("path","").strip("/")
-    return render_template_string(TEMPLATE, items=list_folder(path), path=path)
 @app.route("/download", methods=["GET"])
 def download():
-    p = request.args.get("path","")
-    # download via hf_hub_download into /tmp
-    local = hf_hub_download(repo_id=REPO_ID, filename=p, repo_type="dataset", token=HF_TOKEN, cache_dir=tempfile.gettempdir())
-    return send_file(local, as_attachment=True, download_name=os.path.basename(p))
 @app.route("/upload", methods=["POST"])
 def upload():
     file = request.files["file"]
-    path = request.form.get("path","").strip("/")
-    dest = f"{path}/{file.filename}".strip("/")
-    tmp = tempfile.NamedTemporaryFile(delete=False)
-    file.save(tmp.name)
-    upload_file(path_or_fileobj=tmp.name, path_in_repo=dest, repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
-    return redirect(f"/?path={path}")
 @app.route("/delete", methods=["POST"])
 def delete():
-    d = request.get_json()["path"]
-    all_files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
-    for f in all_files:
-        if f == d or f.startswith(d.rstrip("/")+"/"):
-            delete_file(repo_id=REPO_ID, path_in_repo=f, repo_type="dataset", token=HF_TOKEN)
     return jsonify(status="ok")
 @app.route("/create_folder", methods=["POST"])
 def create_folder():
-    folder = request.get_json()["path"].strip("/")
-    keep = f"{folder}/.keep"
-    tmp = tempfile.NamedTemporaryFile(delete=False)
-    tmp.write(b"")
-    tmp.flush()
-    upload_file(path_or_fileobj=tmp.name, path_in_repo=keep, repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
     return jsonify(status="ok")
 @app.route("/rename", methods=["POST"])
 def rename():
     data = request.get_json()
-    old, new = data["old_path"].strip("/"), data["new_path"].strip("/")
-    all_files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
-    for f in all_files:
-        if f == old or f.startswith(old+"/"):
-            rel = f[len(old):].lstrip("/")
-            newp = (new + "/" + rel).strip("/")
-            local = hf_hub_download(repo_id=REPO_ID, filename=f, repo_type="dataset",
-                                    token=HF_TOKEN, cache_dir=tempfile.gettempdir())
-            upload_file(path_or_fileobj=local, path_in_repo=newp, repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
-            delete_file(repo_id=REPO_ID, path_in_repo=f, repo_type="dataset", token=HF_TOKEN)
     return jsonify(status="ok")
 if __name__ == "__main__":
-    app.run(debug=True, host="0.0.0.0", port=7860)

 import os
 import tempfile
 from flask import Flask, render_template_string, request, redirect, send_file, jsonify
+from huggingface_hub import HfApi, hf_hub_download, upload_file, delete_file, HfFolder
+from urllib.parse import unquote
+# --- Environment Setup ---
+# IMPORTANT: Set these environment variables before running the script.
+# You can get a token from https://huggingface.co/settings/tokens
 REPO_ID = os.getenv("REPO_ID")
 HF_TOKEN = os.getenv("HF_TOKEN")
+# For local testing, you can uncomment and set them here:
+# REPO_ID = "YourUsername/YourDatasetRepoName"
+# HF_TOKEN = "hf_..."
+# Save the token for hf_hub library
+if HF_TOKEN:
+    HfFolder.save_token(HF_TOKEN)
 app = Flask(__name__)
 api = HfApi()
+# --- Combined HTML, CSS, and JS Template ---
 TEMPLATE = """
 <!DOCTYPE html>
+<html lang="en">
 <head>
   <meta charset="UTF-8">
   <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>HuggingFace Drive - {{ path or 'Root' }}</title>
   <style>
+    :root {
+      --bg-color: #121212;
+      --surface-color: #1e1e1e;
+      --surface-hover: #2a2a2a;
+      --primary-text: #e0e0e0;
+      --secondary-text: #a0a0a0;
+      --accent-color: #8ab4f8;
+      --danger-color: #f28b82;
+      --border-color: #383838;
+      --shadow-color: rgba(0,0,0,0.5);
     }
     body {
+      background-color: var(--bg-color);
+      color: var(--primary-text);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+      margin: 0;
+      padding: 20px;
     }
     .container {
+      max-width: 900px;
       margin: 0 auto;
     }
+    h2 {
+      margin-top: 0;
+      font-weight: 500;
+      border-bottom: 1px solid var(--border-color);
+      padding-bottom: 10px;
     }
+    a {
+      color: var(--accent-color);
+      text-decoration: none;
+      font-weight: 500;
     }
+    a:hover { text-decoration: underline; }
+    /* Breadcrumbs */
+    .breadcrumbs {
       margin-bottom: 20px;
+      font-size: 1.1em;
     }
+    .breadcrumbs a, .breadcrumbs span {
+      margin-right: 8px;
     }
+    .breadcrumbs span.separator {
+      color: var(--secondary-text);
     }
+    /* Main Actions */
     .actions {
       display: flex;
       align-items: center;
+      gap: 10px;
+      margin-bottom: 20px;
     }
+    .button, button, input[type="submit"] {
+      background-color: var(--surface-hover);
+      color: var(--primary-text);
+      border: 1px solid var(--border-color);
+      padding: 8px 14px;
+      border-radius: 6px;
       cursor: pointer;
+      font-size: 0.9em;
+      transition: background-color 0.2s ease, transform 0.1s ease;
+    }
+    .button:hover, button:hover, input[type="submit"]:hover { background-color: #333; }
+    .button:active, button:active, input[type="submit"]:active { transform: scale(0.98); }
+    input[type="file"] {
+        font-size: 0.9em;
+    }
+    input[type="file"]::file-selector-button {
+        background-color: var(--surface-hover);
+        color: var(--primary-text);
+        border: 1px solid var(--border-color);
+        padding: 8px 14px;
+        border-radius: 6px;
+        cursor: pointer;
+        transition: background-color 0.2s ease;
+        margin-right: 10px;
+    }
+    input[type="file"]::file-selector-button:hover { background-color: #333; }
+    /* Item List */
+    .item {
       display: flex;
       align-items: center;
+      padding: 12px;
+      margin: 4px 0;
+      background-color: var(--surface-color);
+      border-radius: 8px;
+      transition: background-color 0.2s ease;
     }
+    .item:hover { background-color: var(--surface-hover); }
+    .item-name {
+      flex-grow: 1;
+      cursor: pointer;
+      font-size: 1.1em;
+    }
+    .item-icon { margin-right: 12px; font-size: 1.2em; }
+    /* Kebab Menu */
+    .item-actions { position: relative; }
+    .kebab-button {
+      background: none;
+      border: none;
+      font-size: 1.5em;
+      line-height: 1;
+      padding: 4px 8px;
+      border-radius: 50%;
     }
+    .kebab-menu {
+      display: none;
       position: absolute;
       right: 0;
+      top: 100%;
+      background-color: #333;
+      border: 1px solid var(--border-color);
+      border-radius: 6px;
+      padding: 5px 0;
+      z-index: 10;
+      min-width: 120px;
+      box-shadow: 0 4px 12px var(--shadow-color);
+    }
+    .kebab-menu.show { display: block; }
+    .kebab-menu-item {
+      display: block;
+      background: none;
+      border: none;
+      color: var(--primary-text);
+      padding: 8px 16px;
+      width: 100%;
+      text-align: left;
       cursor: pointer;
     }
+    .kebab-menu-item:hover { background-color: #444; }
+    .kebab-menu-item.danger { color: var(--danger-color); }
+    /* Modals */
+    .overlay {
       position: fixed;
+      top: 0; left: 0; right: 0; bottom: 0;
+      background-color: rgba(0,0,0,0.7);
+      z-index: 99;
       opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.3s ease;
     }
+    .overlay.show {
       opacity: 1;
+      pointer-events: all;
     }
     .modal {
+      position: fixed;
+      top: 50%; left: 50%;
+      transform: translate(-50%, -50%) scale(0.95);
+      background-color: var(--surface-color);
+      padding: 24px;
       border-radius: 12px;
+      z-index: 100;
+      width: 90%;
+      max-width: 400px;
+      box-shadow: 0 8px 24px var(--shadow-color);
+      opacity: 0;
+      pointer-events: none;
+      transition: opacity 0.3s ease, transform 0.3s ease;
     }
+    .modal.show {
+      opacity: 1;
+      transform: translate(-50%, -50%) scale(1);
+      pointer-events: all;
+    }
+    .modal-header { font-size: 1.2em; margin-bottom: 16px; font-weight: 500; }
+    .modal-body { margin-bottom: 20px; }
+    .modal-body p { margin: 0 0 10px; }
+    .modal-body p strong { color: var(--accent-color); }
+    .modal-footer { display: flex; justify-content: flex-end; gap: 10px; }
+    .form-input {
+        width: 100%;
+        padding: 10px;
+        background: var(--bg-color);
+        border: 1px solid var(--border-color);
+        border-radius: 6px;
+        color: var(--primary-text);
+        font-size: 1em;
+    }
+    .danger-button { background-color: var(--danger-color); color: #000; }
+    .danger-button:hover { background-color: #e57373; }
+  </style>
+</head>
+<body>
+  <!-- Overlay and Modals -->
+  <div id="overlay" onclick="hideModals()"></div>
+  <div id="renameModal" class="modal">
+    <div class="modal-header">Rename Item</div>
+    <div class="modal-body">
+      <input type="text" id="renameInput" class="form-input" placeholder="New name">
+    </div>
+    <div class="modal-footer">
+      <button onclick="hideModals()">Cancel</button>
+      <button class="button" onclick="submitRename()">Rename</button>
+    </div>
+  </div>
+  <div id="deleteModal" class="modal">
+    <div class="modal-header">Confirm Deletion</div>
+    <div class="modal-body">
+      <p>Are you sure you want to delete this item?</p>
+      <p><strong id="deleteItemName"></strong></p>
+      <p>This action cannot be undone.</p>
+    </div>
+    <div class="modal-footer">
+      <button onclick="hideModals()">Cancel</button>
+      <button class="danger-button" onclick="submitDelete()">Delete</button>
+    </div>
+  </div>
+  <div id="createFolderModal" class="modal">
+    <div class="modal-header">Create New Folder</div>
+    <div class="modal-body">
+      <input type="text" id="folderNameInput" class="form-input" placeholder="Folder name">
+    </div>
+    <div class="modal-footer">
+      <button onclick="hideModals()">Cancel</button>
+      <button class="button" onclick="submitCreateFolder()">Create</button>
+    </div>
+  </div>
   <div class="container">
+    <h2>📁 HuggingFace Drive</h2>
+    <!-- Breadcrumbs -->
+    <nav class="breadcrumbs">
+      {% for crumb in breadcrumbs %}
+        {% if not loop.last %}
+          <a href="#" onclick="nav('{{ crumb.path }}')">{{ crumb.name }}</a>
+          <span class="separator">></span>
+        {% else %}
+          <span>{{ crumb.name }}</span>
         {% endif %}
+      {% endfor %}
+    </nav>
+    <!-- Actions -->
+    <div class="actions">
+      <form action="/upload" method="post" enctype="multipart/form-data" style="display: contents;">
+        <input type="file" name="file" onchange="this.form.submit()" title="Select a file to upload">
+        <input type="hidden" name="path" value="{{ path }}">
+      </form>
+      <button onclick="showCreateFolderModal('{{ path }}')">New Folder</button>
     </div>
+    <!-- Item List -->
+    <div class="item-list">
       {% for item in items %}
+        <div class="item">
+          {% if item.type=='dir' %}
+            <span class="item-icon">📂</span>
+            <div class="item-name" onclick="nav('{{ item.path }}')">{{ item.name }}</div>
+          {% else %}
+            <span class="item-icon">📄</span>
+            <div class="item-name">{{ item.name }}</div>
+          {% endif %}
+          <div class="item-actions">
+            <button class="kebab-button" onclick="toggleKebabMenu(event, this)">⋮</button>
+            <div class="kebab-menu">
+              {% if item.type!='dir' %}
+                <a class="kebab-menu-item" href="/download?path={{ item.path | urlencode }}">Download</a>
+              {% endif %}
+              <button class="kebab-menu-item" onclick="showRenameModal('{{ item.path }}', '{{ item.name }}')">Rename</button>
+              <button class="kebab-menu-item danger" onclick="showDeleteModal('{{ item.path }}', '{{ item.name }}')">Delete</button>
             </div>
           </div>
         </div>
       {% endfor %}
+      {% if not items %}
+      <div style="color: var(--secondary-text); padding: 20px; text-align: center;">This folder is empty.</div>
+      {% endif %}
     </div>
   </div>
   <script>
+    // --- Global State ---
+    let renameContext = { oldPath: '', oldName: '' };
+    let deleteContext = { path: '' };
+    let createFolderContext = { parentPath: '' };
+    // --- Navigation ---
+    function nav(path) {
+      window.location.href = '/?path=' + encodeURIComponent(path);
     }
+    // --- Kebab Menu Logic ---
+    function toggleKebabMenu(event, button) {
+        event.stopPropagation();
+        closeAllKebabMenus(button);
+        const menu = button.nextElementSibling;
+        menu.classList.toggle('show');
     }
+    function closeAllKebabMenus(exceptButton = null) {
+        document.querySelectorAll('.kebab-menu.show').forEach(openMenu => {
+            if (!exceptButton || !openMenu.previousElementSibling.isSameNode(exceptButton)) {
+                openMenu.classList.remove('show');
+            }
+        });
     }
+    document.addEventListener('click', () => closeAllKebabMenus());
+    // --- Modal Handling ---
+    const overlay = document.getElementById('overlay');
+    const modals = document.querySelectorAll('.modal');
+    function hideModals() {
+      overlay.classList.remove('show');
+      modals.forEach(m => m.classList.remove('show'));
     }
     function showModal(modalId) {
+      closeAllKebabMenus();
+      hideModals(); // Hide any other open modal first
+      document.getElementById(modalId).classList.add('show');
+      overlay.classList.add('show');
     }
+    // --- Create Folder ---
+    function showCreateFolderModal(parentPath) {
+      createFolderContext.parentPath = parentPath;
+      document.getElementById('folderNameInput').value = '';
+      showModal('createFolderModal');
+      document.getElementById('folderNameInput').focus();
     }
+    async function submitCreateFolder() {
+      const folderName = document.getElementById('folderNameInput').value.trim();
+      if (!folderName) return;
+      const fullPath = createFolderContext.parentPath ? `${createFolderContext.parentPath}/${folderName}` : folderName;
+      await fetch('/create_folder', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: fullPath })
       });
+      location.reload();
     }
+    // --- Rename ---
+    function showRenameModal(oldPath, oldName) {
+      renameContext = { oldPath, oldName };
+      document.getElementById('renameInput').value = oldName;
+      showModal('renameModal');
+      document.getElementById('renameInput').focus();
+    }
+    async function submitRename() {
       const newName = document.getElementById('renameInput').value.trim();
+      if (!newName || newName === renameContext.oldName) {
+        hideModals();
+        return;
       }
+      const pathParts = renameContext.oldPath.split('/');
+      pathParts.pop(); // remove old name
+      const parentPath = pathParts.join('/');
+      const newPath = parentPath ? `${parentPath}/${newName}` : newName;
+      await fetch('/rename', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ old_path: renameContext.oldPath, new_path: newPath })
+      });
+      location.reload();
     }
+    // --- Delete ---
+    function showDeleteModal(path, name) {
+      deleteContext.path = path;
+      document.getElementById('deleteItemName').textContent = name;
+      showModal('deleteModal');
     }
+    async function submitDelete() {
+      await fetch('/delete', {
+        method: 'POST',
+        headers: { 'Content-Type': 'application/json' },
+        body: JSON.stringify({ path: deleteContext.path })
+      });
+      location.reload();
     }
+    // Add keyboard shortcuts for modals
+    document.addEventListener('keydown', (e) => {
+        if (e.key === 'Escape') {
+            hideModals();
         }
     });
   </script>
 </body>
 </html>
 """
+# --- Helper Functions ---
 def list_folder(path=""):
+    """Lists files and directories in a given path of the repository."""
+    try:
+        # Normalize path to not have leading/trailing slashes, and add a trailing slash if not root
+        prefix = path.strip("/") + ("/" if path else "")
+        all_files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset")
+        seen_dirs = set()
+        items = []
+        for f in all_files:
+            if not f.startswith(prefix):
+                continue
+            # Get the part of the path relative to the current directory
+            relative_path = f[len(prefix):]
+            if "/" in relative_path:
+                # It's in a subdirectory
+                dir_name = relative_path.split("/")[0]
+                dir_path = (prefix + dir_name).strip("/")
+                if dir_path not in seen_dirs:
+                    seen_dirs.add(dir_path)
+                    items.append({"type": "dir", "name": dir_name, "path": dir_path})
+            else:
+                # It's a file in the current directory
+                if relative_path: # Exclude the .keep file placeholder if it's the only thing
+                    items.append({"type": "file", "name": relative_path, "path": f})
+        # Sort directories first, then files, all alphabetically
+        items.sort(key=lambda x: (x["type"] != "dir", x["name"].lower()))
+        return items
+    except Exception as e:
+        print(f"Error listing folder: {e}")
+        return []
+# --- Flask Routes ---
 @app.route("/", methods=["GET"])
 def index():
+    if not REPO_ID or not HF_TOKEN:
+        return "<h1>Configuration Error</h1><p>Please set REPO_ID and HF_TOKEN environment variables.</p>", 500
+    path = unquote(request.args.get("path", "")).strip("/")
+    # Build breadcrumbs
+    breadcrumbs = [{"name": "Root", "path": ""}]
+    if path:
+        current_path = ""
+        for part in path.split("/"):
+            current_path = f"{current_path}/{part}".strip("/")
+            breadcrumbs.append({"name": part, "path": current_path})
+    items = list_folder(path)
+    return render_template_string(TEMPLATE, items=items, path=path, breadcrumbs=breadcrumbs)
 @app.route("/download", methods=["GET"])
 def download():
+    path = request.args.get("path", "")
+    if not path:
+        return "File path is required.", 400
+    try:
+        local_file = hf_hub_download(
+            repo_id=REPO_ID,
+            filename=path,
+            repo_type="dataset",
+            cache_dir=tempfile.gettempdir()
+        )
+        return send_file(local_file, as_attachment=True, download_name=os.path.basename(path))
+    except Exception as e:
+        return f"Error downloading file: {e}", 500
 @app.route("/upload", methods=["POST"])
 def upload():
+    if 'file' not in request.files:
+        return redirect(request.referrer)
     file = request.files["file"]
+    if file.filename == '':
+        return redirect(request.referrer)
+    path_in_repo = request.form.get("path", "").strip("/")
+    destination_path = f"{path_in_repo}/{file.filename}".strip("/")
+    # Use a temporary file to handle the upload
+    with tempfile.NamedTemporaryFile(delete=False) as tmp:
+        file.save(tmp.name)
+        tmp_path = tmp.name
+    try:
+        upload_file(
+            path_or_fileobj=tmp_path,
+            path_in_repo=destination_path,
+            repo_id=REPO_ID,
+            repo_type="dataset"
+        )
+    finally:
+        os.remove(tmp_path)
+    return redirect(f"/?path={path_in_repo}")
 @app.route("/delete", methods=["POST"])
 def delete():
+    path_to_delete = request.get_json()["path"].strip("/")
+    all_repo_files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset")
+    # This will be a list of operations for a single commit
+    operations = []
+    is_folder = not any(f['path'] == path_to_delete for f in list_folder('/'.join(path_to_delete.split('/')[:-1])))
+    if is_folder: # It's a directory
+        files_to_delete = [f for f in all_repo_files if f == path_to_delete or f.startswith(path_to_delete + "/")]
+        for f in files_to_delete:
+            delete_file(repo_id=REPO_ID, path_in_repo=f, repo_type="dataset")
+    else: # It's a single file
+        delete_file(repo_id=REPO_ID, path_in_repo=path_to_delete, repo_type="dataset")
     return jsonify(status="ok")
 @app.route("/create_folder", methods=["POST"])
 def create_folder():
+    folder_path = request.get_json()["path"].strip("/")
+    # Create a .keep file to make the directory exist in the repo
+    keep_file_path = f"{folder_path}/.gitkeep"
+    with tempfile.NamedTemporaryFile(mode='w', delete=False) as tmp:
+        tmp.write("") # empty file
+        tmp_path = tmp.name
+    try:
+        upload_file(
+            path_or_fileobj=tmp_path,
+            path_in_repo=keep_file_path,
+            repo_id=REPO_ID,
+            repo_type="dataset"
+        )
+    finally:
+        os.remove(tmp_path)
     return jsonify(status="ok")
 @app.route("/rename", methods=["POST"])
 def rename():
     data = request.get_json()
+    old_path = data["old_path"].strip("/")
+    new_path = data["new_path"].strip("/")
+    all_repo_files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset")
+    is_folder = not any(f == old_path for f in all_repo_files)
+    files_to_move = []
+    if is_folder:
+        files_to_move = [f for f in all_repo_files if f.startswith(old_path + "/")]
+        if not files_to_move: # Empty folder, might have a .gitkeep
+            try:
+                # Check if a .gitkeep file exists and move it
+                keep_file = f"{old_path}/.gitkeep"
+                hf_hub_download(repo_id=REPO_ID, filename=keep_file, repo_type="dataset", token=HF_TOKEN, cache_dir=tempfile.gettempdir())
+                files_to_move.append(keep_file)
+            except Exception: # Not found, it's ok
+                 pass
+    else:
+        files_to_move.append(old_path)
+    for f_path in files_to_move:
+        # Download file to a temporary location
+        local_file = hf_hub_download(repo_id=REPO_ID, filename=f_path, repo_type="dataset", cache_dir=tempfile.gettempdir())
+        # Calculate new path in repo
+        relative_path = os.path.relpath(f_path, old_path) if is_folder else ''
+        new_file_path = os.path.join(new_path, relative_path).replace("\\", "/")
+        # Upload to new location
+        upload_file(path_or_fileobj=local_file, path_in_repo=new_file_path, repo_id=REPO_ID, repo_type="dataset")
+        # Delete old file
+        delete_file(repo_id=REPO_ID, path_in_repo=f_path, repo_type="dataset")
     return jsonify(status="ok")
 if __name__ == "__main__":
+    if not REPO_ID or not HF_TOKEN:
+        print("FATAL: REPO_ID and HF_TOKEN environment variables must be set.")
+    else:
+        print(f"✅ Server starting for repository: {REPO_ID}")
+        print("✅ Access the UI at http://127.0.0.1:7860")
+        app.run(debug=False, host="0.0.0.0", port=7860)