Spaces:

testdeep123
/

cronjob

Running

App Files Files Community

testdeep123 commited on about 1 month ago

Commit

4709525

verified ·

1 Parent(s): 5e61cf8

Update app.py

Browse files

Files changed (1) hide show

app.py +826 -136

app.py CHANGED Viewed

@@ -10,149 +10,826 @@ HF_TOKEN = os.getenv("HF_TOKEN")
 app = Flask(__name__)
 api = HfApi()
-# HTML template with responsive layout and custom modals
 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>
-    /* Global Reset */
-    * { margin: 0; padding: 0; box-sizing: border-box; }
-    body { background: #1a1a2e; color: #e2e8f0; font-family: sans-serif; overflow-x: hidden; }
-    .container { max-width: 1200px; margin: auto; padding: 20px; }
-    .header { background: rgba(255,255,255,0.05); padding: 20px; border-radius: 12px; margin-bottom: 20px; }
-    .title { font-size: 2rem; background: linear-gradient(135deg,#667eea,#764ba2); -webkit-background-clip: text; color: transparent; }
-    .breadcrumb { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
-    .breadcrumb-item { background: rgba(255,255,255,0.1); padding: 6px 12px; border-radius: 16px; font-size: 0.9rem; cursor: pointer; }
-    .breadcrumb-item.active { background: linear-gradient(135deg,#667eea,#764ba2); color: #fff; }
-    .actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 16px; }
-    .btn { padding: 10px 20px; border: none; border-radius: 8px; cursor: pointer; font-size: 0.9rem; }
-    .btn-primary { background: linear-gradient(135deg,#667eea,#764ba2); color: #fff; }
-    .btn-secondary { background: rgba(255,255,255,0.1); color: #e2e8f0; }
-    .file-grid { display: grid; grid-template-columns: repeat(auto-fill,minmax(200px,1fr)); gap: 16px; }
-    .file-item { background: rgba(255,255,255,0.05); padding: 16px; border-radius: 12px; position: relative; overflow: hidden; }
-    .file-info { display: flex; align-items: center; gap: 8px; cursor: pointer; }
-    .file-icon { width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; border-radius: 6px; background: rgba(255,255,255,0.1); }
-    .dropdown { position: absolute; top: 10px; right: 10px; }
-    .dropdown-menu { display: none; position: absolute; top: 100%; right: 0; background: rgba(15,15,35,0.95); border-radius: 8px; padding: 8px; margin-top: 4px; }
-    .dropdown.active .dropdown-menu { display: block; }
-    .dropdown-item { padding: 6px 10px; border-radius: 6px; cursor: pointer; font-size: 0.9rem; }
-    .dropdown-item:hover { background: rgba(255,255,255,0.1); }
-    .dropdown-item.danger { color: #f87171; }
-    /* Modals */
-    .modal-overlay { position: fixed; inset: 0; background: rgba(0,0,0,0.7); display: none; align-items: center; justify-content: center; }
-    .modal-overlay.active { display: flex; }
-    .modal { background: rgba(15,15,35,0.95); padding: 24px; border-radius: 12px; width: 90%; max-width: 400px; }
-    .modal h3 { margin-bottom: 12px; font-size: 1.2rem; }
-    .modal input { width: 100%; padding: 10px; border: 1px solid rgba(255,255,255,0.2); border-radius: 6px; margin-bottom: 16px; background: rgba(255,255,255,0.1); color: #e2e8f0; }
-    .modal-actions { display: flex; justify-content: flex-end; gap: 10px; }
-    @media(max-width:768px) { .file-grid { grid-template-columns: 1fr; } }
   </style>
 </head>
 <body>
   <div class="container">
     <div class="header">
-      <div class="title">HuggingFace Drive</div>
       <div class="breadcrumb">
-        <div class="breadcrumb-item" onclick="nav('')">Home</div>
         {% if path %}
-          {% set parts=path.split('/') %}
           {% for i in range(parts|length) %}
-            <div class="breadcrumb-item{% if parts[:i+1]|join('/')==path %} active{% endif %}" onclick="nav('{{ parts[:i+1]|join('/') }}')">{{ parts[i] }}</div>
           {% endfor %}
         {% endif %}
       </div>
       <div class="actions">
-        <form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
-          <input type="file" name="file" id="fileInput" style="display:none;" onchange="document.getElementById('uploadForm').submit()">
           <input type="hidden" name="path" value="{{ path }}">
-          <button type="button" class="btn btn-primary" onclick="document.getElementById('fileInput').click()">Upload File</button>
         </form>
-        <button class="btn btn-secondary" onclick="openCreateModal()">New Folder</button>
       </div>
     </div>
     <div class="file-grid">
       {% for item in items %}
-      <div class="file-item">
-        <div class="file-info" onclick="{% if item.type=='dir' %}nav('{{ item.path }}'){% endif %}">
-          <div class="file-icon">{{ '📁' if item.type=='dir' else '📄' }}</div>
-          <div>{{ item.name }}</div>
-        </div>
-        <div class="dropdown">
-          <button 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="openRenameModal('{{ item.path }}','{{ item.name }}')">Rename</div>
-            <div class="dropdown-item danger" onclick="openDeleteModal('{{ item.path }}')">Delete</div>
           </div>
         </div>
-      </div>
       {% endfor %}
     </div>
   </div>
-  <!-- Modals -->
-  <div class="modal-overlay" id="createModal">
     <div class="modal">
-      <h3>Create New Folder</h3>
-      <input type="text" id="createName" placeholder="Folder name">
       <div class="modal-actions">
-        <button class="btn btn-secondary" onclick="closeModal('createModal')">Cancel</button>
-        <button class="btn btn-primary" onclick="confirmCreate()">Create</button>
       </div>
     </div>
   </div>
-  <div class="modal-overlay" id="renameModal">
     <div class="modal">
-      <h3>Rename Item</h3>
-      <input type="text" id="renameInput">
       <div class="modal-actions">
-        <button class="btn btn-secondary" onclick="closeModal('renameModal')">Cancel</button>
-        <button class="btn btn-primary" onclick="confirmRename()">Rename</button>
       </div>
     </div>
   </div>
-  <div class="modal-overlay" id="deleteModal">
     <div class="modal">
-      <h3>Confirm Deletion</h3>
-      <p>Are you sure you want to delete this item?</p>
       <div class="modal-actions">
-        <button class="btn btn-secondary" onclick="closeModal('deleteModal')">Cancel</button>
-        <button class="btn btn-primary danger" onclick="confirmDelete()">Delete</button>
       </div>
     </div>
   </div>
   <script>
-    let currentPath = '';
-    function nav(p) { window.location = '/?path='+encodeURIComponent(p); }
-    function download(p) { window.open('/download?path='+encodeURIComponent(p)); }
-    function toggleDropdown(btn) {
-      const d = btn.parentElement; d.classList.toggle('active');
-    }
-    function openCreateModal() { document.getElementById('createModal').classList.add('active'); }
-    function openRenameModal(path,name) { currentPath=path; document.getElementById('renameInput').value=name; document.getElementById('renameModal').classList.add('active'); }
-    function openDeleteModal(path) { currentPath=path; document.getElementById('deleteModal').classList.add('active'); }
-    function closeModal(id) { document.getElementById(id).classList.remove('active'); }
-    function confirmCreate() {
-      const name = document.getElementById('createName').value.trim(); if(!name) return;
-      fetch('/create_folder',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({path: name})})
-        .then(r=>{closeModal('createModal');window.location.reload();});
-    }
-    function confirmRename() {
-      const newName = document.getElementById('renameInput').value.trim(); if(!newName) return;
-      fetch('/rename',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({old_path:currentPath,new_path:newName})})
-        .then(r=>{closeModal('renameModal');window.location.reload();});
-    }
-    function confirmDelete() {
-      fetch('/delete',{method:'POST',headers:{'Content-Type':'application/json'},body:JSON.stringify({path:currentPath})})
-        .then(r=>{closeModal('deleteModal');window.location.reload();});
-    }
-    // Close modals on overlay click
-    document.querySelectorAll('.modal-overlay').forEach(o=>o.addEventListener('click',e=>{if(e.target===o)o.classList.remove('active');}));
   </script>
 </body>
 </html>
@@ -161,65 +838,78 @@ TEMPLATE = """
 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("/")})
-    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','')
-    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']
-    for f in api.list_repo_files(repo_id=REPO_ID,repo_type='dataset',token=HF_TOKEN):
-        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('/')
-    for f in api.list_repo_files(repo_id=REPO_ID,repo_type='dataset',token=HF_TOKEN):
-        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(host='0.0.0.0',port=7860,debug=True)

 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>
+    :root {
+      --primary-gradient: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+      --danger-gradient: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
+      --warning-gradient: linear-gradient(135deg, #fbbf24 0%, #f59e0b 100%);
+      --bg-dark: #0f0f23;
+      --bg-darker: #0a0a18;
+      --border-light: rgba(255, 255, 255, 0.1);
+      --text-light: #e2e8f0;
+      --text-lighter: #f1f5f9;
+      --text-muted: #94a3b8;
+      --shadow-primary: 0 8px 32px rgba(102, 126, 234, 0.3);
+      --shadow-danger: 0 8px 32px rgba(239, 68, 68, 0.3);
+      --shadow-large: 0 20px 60px rgba(0, 0, 0, 0.6);
+      --radius-lg: 16px;
+      --radius-md: 12px;
+      --radius-sm: 8px;
+    }
+    * {
+      margin: 0;
+      padding: 0;
+      box-sizing: border-box;
+    }
+    body {
+      background: linear-gradient(135deg, var(--bg-dark) 0%, var(--bg-darker) 100%);
+      color: var(--text-light);
+      font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
+      min-height: 100vh;
+      line-height: 1.5;
+    }
+    .container {
+      max-width: 1200px;
+      margin: 0 auto;
+      padding: 20px;
+    }
+    .header {
+      background: rgba(255, 255, 255, 0.05);
+      backdrop-filter: blur(10px);
+      border-radius: var(--radius-lg);
+      padding: 24px;
+      margin-bottom: 24px;
+      border: 1px solid var(--border-light);
+      box-shadow: var(--shadow-large);
+    }
+    .title {
+      font-size: 2rem;
+      font-weight: 700;
+      margin-bottom: 16px;
+      background: var(--primary-gradient);
+      -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: var(--text-muted);
+      padding: 6px 12px;
+      border-radius: 20px;
+      font-size: 0.875rem;
+      cursor: pointer;
+      transition: all 0.3s ease;
+      border: 1px solid var(--border-light);
+      white-space: nowrap;
+      max-width: 200px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .breadcrumb-item:hover {
+      background: rgba(102, 126, 234, 0.2);
+      color: var(--text-lighter);
+      transform: translateY(-1px);
+    }
+    .breadcrumb-item.active {
+      background: var(--primary-gradient);
+      color: white;
+    }
+    .breadcrumb-separator {
+      color: var(--text-muted);
+      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: var(--primary-gradient);
+      color: white;
+      border: none;
+      padding: 12px 24px;
+      border-radius: var(--radius-md);
+      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 var(--border-light);
+      display: inline-flex;
+      align-items: center;
+      gap: 8px;
+    }
+    .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: var(--text-lighter);
+      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(280px, 1fr));
+    }
+    .file-item {
+      background: rgba(255, 255, 255, 0.05);
+      backdrop-filter: blur(10px);
+      border: 1px solid var(--border-light);
+      border-radius: var(--radius-lg);
+      padding: 16px;
+      transition: all 0.3s ease;
+      cursor: pointer;
+      position: relative;
+      overflow: hidden;
+    }
+    .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;
+      gap: 12px;
+    }
+    .file-info {
+      display: flex;
+      align-items: center;
+      gap: 12px;
+      flex: 1;
+      min-width: 0;
+    }
+    .file-icon {
+      font-size: 1.5rem;
+      width: 40px;
+      height: 40px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      border-radius: var(--radius-sm);
+      background: rgba(255, 255, 255, 0.1);
+      flex-shrink: 0;
+    }
+    .folder-icon {
+      background: var(--warning-gradient);
+    }
+    .file-name {
+      font-weight: 500;
+      font-size: 0.95rem;
+      color: var(--text-lighter);
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+    }
+    .dropdown {
+      position: relative;
+      flex-shrink: 0;
+    }
+    .dropdown-toggle {
+      background: rgba(255, 255, 255, 0.1);
+      border: none;
+      color: var(--text-muted);
+      padding: 8px;
+      border-radius: var(--radius-sm);
+      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: var(--text-lighter);
+    }
+    .dropdown-menu {
+      position: absolute;
+      top: 100%;
+      right: 0;
+      background: rgba(15, 15, 35, 0.98);
+      backdrop-filter: blur(20px);
+      border: 1px solid var(--border-light);
+      border-radius: var(--radius-md);
+      padding: 8px;
+      min-width: 160px;
+      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: var(--radius-sm);
+      cursor: pointer;
+      transition: all 0.2s ease;
+      font-size: 0.875rem;
+      color: var(--text-muted);
+    }
+    .dropdown-item:hover {
+      background: rgba(255, 255, 255, 0.1);
+      color: var(--text-lighter);
+    }
+    .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.98);
+      backdrop-filter: blur(20px);
+      border: 1px solid var(--border-light);
+      border-radius: var(--radius-lg);
+      padding: 24px;
+      max-width: 450px;
+      width: 90%;
+      transform: scale(0.9);
+      transition: all 0.3s ease;
+      box-shadow: var(--shadow-large);
+    }
+    .modal-overlay.active .modal {
+      transform: scale(1);
+    }
+    .modal-title {
+      font-size: 1.25rem;
+      font-weight: 600;
+      margin-bottom: 16px;
+      color: var(--text-lighter);
+    }
+    .modal-body {
+      margin-bottom: 24px;
+      color: var(--text-muted);
+    }
+    .modal-input {
+      width: 100%;
+      background: rgba(255, 255, 255, 0.1);
+      border: 1px solid rgba(255, 255, 255, 0.2);
+      border-radius: var(--radius-md);
+      padding: 12px 16px;
+      color: var(--text-lighter);
+      font-size: 1rem;
+      margin-bottom: 20px;
+      transition: all 0.3s ease;
+    }
+    .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: var(--danger-gradient);
+      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);
+    }
+    /* New Folder Modal */
+    #folderModal .modal {
+      max-width: 400px;
+    }
+    /* Loading Animation */
+    .loading {
+      display: inline-block;
+      width: 20px;
+      height: 20px;
+      border: 3px 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;
+        align-items: flex-start;
+      }
+      .breadcrumb {
+        gap: 6px;
+      }
+      .breadcrumb-separator {
+        display: none;
+      }
+      .breadcrumb-item {
+        max-width: 150px;
+      }
+      .modal {
+        padding: 20px;
+      }
+      .modal-actions {
+        flex-direction: column-reverse;
+        gap: 8px;
+      }
+      .modal-actions .btn {
+        width: 100%;
+      }
+    }
+    /* Custom Scrollbar */
+    ::-webkit-scrollbar {
+      width: 8px;
+      height: 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="showFolderModal('{{ 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 }}'){% else %}download('{{ item.path }}'){% endif %}">
+              <div class="file-icon {{ 'folder-icon' if item.type=='dir' else '' }}">
+                {{ '📁' if item.type=='dir' else '📄' }}
+              </div>
+              <div class="file-name" title="{{ item.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 }}', '{{ item.name }}')">
+                  🗑️ 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>
+      <div class="modal-body">
+        <input type="text" class="modal-input" id="renameInput" placeholder="Enter new name" autocomplete="off">
+      </div>
       <div class="modal-actions">
+        <button class="btn btn-secondary" onclick="closeModal('renameModal')">Cancel</button>
+        <button class="btn" onclick="confirmRename()" id="renameConfirmBtn">
+          <span id="renameBtnText">Rename</span>
+          <span id="renameBtnSpinner" class="loading" style="display: none;"></span>
+        </button>
       </div>
     </div>
   </div>
+  <!-- Delete Confirmation Modal -->
+  <div class="modal-overlay" id="deleteModal">
     <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>
+        <button class="btn btn-danger" onclick="confirmDelete()" id="deleteConfirmBtn">
+          <span id="deleteBtnText">Delete</span>
+          <span id="deleteBtnSpinner" class="loading" style="display: none;"></span>
+        </button>
       </div>
     </div>
   </div>
+  <!-- New Folder Modal -->
+  <div class="modal-overlay" id="folderModal">
     <div class="modal">
+      <h3 class="modal-title">Create New Folder</h3>
+      <div class="modal-body">
+        <input type="text" class="modal-input" id="folderInput" placeholder="Enter folder name" autocomplete="off">
+      </div>
       <div class="modal-actions">
+        <button class="btn btn-secondary" onclick="closeModal('folderModal')">Cancel</button>
+        <button class="btn" onclick="confirmCreateFolder()" id="folderConfirmBtn">
+          <span id="folderBtnText">Create</span>
+          <span id="folderBtnSpinner" class="loading" style="display: none;"></span>
+        </button>
       </div>
     </div>
   </div>
   <script>
+    let currentRenamePath = '';
+    let currentDeletePath = '';
+    let currentFolderPath = '';
+    let activeDropdown = null;
+    // Navigation
+    function nav(p) {
+      location.href = '/?path=' + encodeURIComponent(p);
+    }
+    // File download
+    function download(path) {
+      window.open('/download?path=' + encodeURIComponent(path), '_blank');
+    }
+    // Dropdown toggle
+    function toggleDropdown(button) {
+      event.stopPropagation();
+      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;
+    }
+    // Show rename modal
+    function showRenameModal(path, currentName) {
+      currentRenamePath = path;
+      document.getElementById('renameInput').value = currentName;
+      showModal('renameModal');
+      setTimeout(() => {
+        document.getElementById('renameInput').focus();
+        document.getElementById('renameInput').select();
+      }, 100);
+      closeAllDropdowns();
+    }
+    // Show delete modal
+    function showDeleteModal(path, name) {
+      currentDeletePath = path;
+      document.getElementById('deleteItemName').textContent = name;
+      showModal('deleteModal');
+      closeAllDropdowns();
+    }
+    // Show folder creation modal
+    function showFolderModal(path) {
+      currentFolderPath = path;
+      document.getElementById('folderInput').value = '';
+      showModal('folderModal');
+      setTimeout(() => document.getElementById('folderInput').focus(), 100);
+    }
+    // Show modal
+    function showModal(modalId) {
+      document.getElementById(modalId).classList.add('active');
+      document.body.style.overflow = 'hidden';
+    }
+    // Close modal
+    function closeModal(modalId) {
+      document.getElementById(modalId).classList.remove('active');
+      document.body.style.overflow = '';
+    }
+    // Close all dropdowns
+    function closeAllDropdowns() {
+      document.querySelectorAll('.dropdown.active').forEach(dropdown => {
+        dropdown.classList.remove('active');
+      });
+      activeDropdown = null;
+    }
+    // Confirm rename action
+    async function confirmRename() {
+      const newName = document.getElementById('renameInput').value.trim();
+      if (!newName) {
+        alert('Please enter a valid name');
+        return;
+      }
+      const btn = document.getElementById('renameConfirmBtn');
+      const btnText = document.getElementById('renameBtnText');
+      const spinner = document.getElementById('renameBtnSpinner');
+      btn.disabled = true;
+      btnText.style.display = 'none';
+      spinner.style.display = 'inline-block';
+      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();
+        } else {
+          alert('Failed to rename item');
+        }
+      } catch (error) {
+        console.error('Rename failed:', error);
+        alert('An error occurred while renaming');
+      } finally {
+        btn.disabled = false;
+        btnText.style.display = 'inline-block';
+        spinner.style.display = 'none';
+      }
+    }
+    // Confirm delete action
+    async function confirmDelete() {
+      const btn = document.getElementById('deleteConfirmBtn');
+      const btnText = document.getElementById('deleteBtnText');
+      const spinner = document.getElementById('deleteBtnSpinner');
+      btn.disabled = true;
+      btnText.style.display = 'none';
+      spinner.style.display = 'inline-block';
+      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();
+        } else {
+          alert('Failed to delete item');
+        }
+      } catch (error) {
+        console.error('Delete failed:', error);
+        alert('An error occurred while deleting');
+      } finally {
+        btn.disabled = false;
+        btnText.style.display = 'inline-block';
+        spinner.style.display = 'none';
+      }
+    }
+    // Confirm folder creation
+    async function confirmCreateFolder() {
+      const folderName = document.getElementById('folderInput').value.trim();
+      if (!folderName) {
+        alert('Please enter a folder name');
+        return;
+      }
+      const btn = document.getElementById('folderConfirmBtn');
+      const btnText = document.getElementById('folderBtnText');
+      const spinner = document.getElementById('folderBtnSpinner');
+      btn.disabled = true;
+      btnText.style.display = 'none';
+      spinner.style.display = 'inline-block';
+      try {
+        const folderPath = currentFolderPath ? `${currentFolderPath}/${folderName}` : folderName;
+        const response = await fetch('/create_folder', {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ path: folderPath })
+        });
+        if (response.ok) {
+          closeModal('folderModal');
+          location.reload();
+        } else {
+          alert('Failed to create folder');
+        }
+      } catch (error) {
+        console.error('Create folder failed:', error);
+        alert('An error occurred while creating folder');
+      } finally {
+        btn.disabled = false;
+        btnText.style.display = 'inline-block';
+        spinner.style.display = 'none';
+      }
+    }
+    // Close dropdowns when clicking outside
+    document.addEventListener('click', function(e) {
+      if (!e.target.closest('.dropdown')) {
+        closeAllDropdowns();
+      }
+      // Close modals when clicking on overlay
+      if (e.target.classList.contains('modal-overlay')) {
+        closeModal(e.target.id);
+      }
+    });
+    // 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 Enter key in modals
+    document.getElementById('renameInput').addEventListener('keypress', function(e) {
+      if (e.key === 'Enter') {
+        confirmRename();
+      }
+    });
+    document.getElementById('folderInput').addEventListener('keypress', function(e) {
+      if (e.key === 'Enter') {
+        confirmCreateFolder();
+      }
+    });
+    // Focus management for accessibility
+    document.addEventListener('keydown', function(e) {
+      if (e.key === 'Escape') {
+        const openModal = document.querySelector('.modal-overlay.active');
+        if (openModal) {
+          closeModal(openModal.id);
+        } else {
+          closeAllDropdowns();
+        }
+      }
+    });
   </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)