Spaces:

testdeep123
/

cronjob

Running

File size: 29,507 Bytes

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 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>
    :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: #111827;
      --bg-darker: #0d1117;
      --bg-card: rgba(31, 41, 55, 0.5);
      --bg-modal: #1f2937;
      --border-light: rgba(255, 255, 255, 0.1);
      --text-light: #e5e7eb;
      --text-lighter: #f9fafb;
      --text-muted: #9ca3af;
      --shadow-primary: 0 8px 32px rgba(102, 126, 234, 0.3);
      --shadow-large: 0 20px 60px rgba(0, 0, 0, 0.5);
      --radius-lg: 16px;
      --radius-md: 12px;
      --radius-sm: 8px;
      --transition-speed: 0.3s;
    }

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    body {
      background-color: var(--bg-darker);
      background-image: radial-gradient(circle at 1px 1px, rgba(255,255,255,0.05) 1px, transparent 0);
      background-size: 25px 25px;
      color: var(--text-light);
      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
      min-height: 100vh;
      line-height: 1.5;
    }

    .container {
      max-width: 1280px;
      margin: 0 auto;
      padding: 40px 24px;
    }

    .header {
      background: var(--bg-card);
      backdrop-filter: blur(10px);
      border-radius: var(--radius-lg);
      padding: 24px;
      margin-bottom: 32px;
      border: 1px solid var(--border-light);
      box-shadow: var(--shadow-large);
    }

    .title {
      font-size: 2.25rem;
      font-weight: 700;
      margin-bottom: 16px;
      background: var(--primary-gradient);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
      display: flex;
      align-items: center;
      gap: 12px;
    }

    .breadcrumb {
      display: flex;
      align-items: center;
      gap: 8px;
      margin-bottom: 24px;
      flex-wrap: wrap;
    }

    .breadcrumb-item {
      background: rgba(255, 255, 255, 0.05);
      color: var(--text-muted);
      padding: 6px 12px;
      border-radius: var(--radius-sm);
      font-size: 0.875rem;
      cursor: pointer;
      transition: all var(--transition-speed) ease;
      border: 1px solid transparent;
      white-space: nowrap;
      max-width: 200px;
      overflow: hidden;
      text-overflow: ellipsis;
      display: flex;
      align-items: center;
      gap: 6px;
    }

    .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;
      font-weight: 600;
      border-color: rgba(255,255,255,0.2);
    }

    .breadcrumb-separator {
      color: var(--text-muted);
    }

    .actions {
      display: flex;
      gap: 12px;
      flex-wrap: wrap;
    }

    .btn {
      background: var(--primary-gradient);
      color: white;
      border: none;
      padding: 12px 20px;
      border-radius: var(--radius-md);
      cursor: pointer;
      font-weight: 600;
      font-size: 0.9rem;
      transition: all var(--transition-speed) ease;
      box-shadow: 0 4px 15px rgba(0,0,0,0.2);
      border: 1px solid var(--border-light);
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
    }

    .btn:hover {
      transform: translateY(-2px);
      box-shadow: var(--shadow-primary);
    }

    .btn:disabled {
        opacity: 0.6;
        cursor: not-allowed;
        transform: translateY(0);
        box-shadow: none;
    }

    .btn-secondary {
      background: rgba(255, 255, 255, 0.1);
      color: var(--text-lighter);
    }

    .btn-secondary:hover {
      background: rgba(255, 255, 255, 0.15);
      box-shadow: 0 8px 25px rgba(0, 0, 0, 0.3);
    }
    
    .btn-danger {
      background: var(--danger-gradient);
    }
    .btn-danger:hover {
        box-shadow: 0 8px 25px rgba(239, 68, 68, 0.4);
    }

    .file-input-wrapper {
        position: relative;
        overflow: hidden;
        display: inline-block;
    }

    .file-input {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        opacity: 0;
        cursor: pointer;
    }

    .file-grid {
      display: grid;
      gap: 24px;
      grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    }

    .file-item {
      background: var(--bg-card);
      backdrop-filter: blur(10px);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-lg);
      transition: all var(--transition-speed) ease;
      position: relative;
    }

    .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-item-clickable {
        display: block;
        padding: 16px;
        cursor: pointer;
        text-decoration: none;
    }

    .file-content {
      display: flex;
      align-items: center;
      justify-content: space-between;
      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-md);
      background: rgba(255, 255, 255, 0.1);
      color: var(--text-lighter);
      flex-shrink: 0;
    }
    
    .folder-icon {
      background: var(--warning-gradient);
    }

    .file-name {
      font-weight: 500;
      color: var(--text-lighter);
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
    }

    .dropdown {
      position: absolute;
      top: 12px;
      right: 12px;
    }
    
    .dropdown-toggle {
      background: rgba(255, 255, 255, 0.1);
      border: 1px solid transparent;
      color: var(--text-muted);
      border-radius: var(--radius-md);
      cursor: pointer;
      transition: all var(--transition-speed) ease;
      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);
      border-color: var(--border-light);
    }

    .dropdown-menu {
      position: absolute;
      top: calc(100% + 8px);
      right: 0;
      background: var(--bg-modal);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-md);
      padding: 8px;
      min-width: 180px;
      opacity: 0;
      visibility: hidden;
      transform: translateY(-10px);
      transition: all var(--transition-speed) 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: 10px;
      padding: 10px 12px;
      border-radius: var(--radius-sm);
      cursor: pointer;
      transition: background-color 0.2s ease, color 0.2s ease;
      font-size: 0.875rem;
      font-weight: 500;
      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 var(--transition-speed) ease;
    }

    .modal-overlay.active {
      opacity: 1;
      visibility: visible;
    }

    .modal {
      background: var(--bg-modal);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-lg);
      padding: 24px;
      max-width: 450px;
      width: 90%;
      transform: scale(0.95);
      transition: all var(--transition-speed) 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.05);
      border: 1px solid var(--border-light);
      border-radius: var(--radius-md);
      padding: 12px 16px;
      color: var(--text-lighter);
      font-size: 1rem;
      transition: all var(--transition-speed) ease;
    }

    .modal-input:focus {
      outline: none;
      border-color: #667eea;
      box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.2);
    }

    .modal-actions {
      display: flex;
      gap: 12px;
      justify-content: flex-end;
    }
    
    /* Utility & Helper Classes */
    .icon {
        width: 1.25em;
        height: 1.25em;
    }
    .loading-spinner {
      display: inline-block;
      width: 20px;
      height: 20px;
      border: 3px solid rgba(255, 255, 255, 0.3);
      border-radius: 50%;
      border-top-color: #fff;
      animation: spin 1s ease-in-out infinite;
    }
    .btn .loading-spinner {
        border-top-color: #fff;
    }

    @keyframes spin {
      to { transform: rotate(360deg); }
    }

    .upload-overlay {
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        height: 100%;
        background: rgba(0, 0, 0, 0.8);
        backdrop-filter: blur(8px);
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        z-index: 9999;
        color: var(--text-lighter);
        gap: 16px;
        opacity: 0;
        visibility: hidden;
        transition: all var(--transition-speed) ease;
    }
    .upload-overlay.active {
        opacity: 1;
        visibility: visible;
    }
    .upload-overlay .loading-spinner {
        width: 48px;
        height: 48px;
        border-width: 4px;
    }
    .upload-overlay-text {
        font-size: 1.25rem;
        font-weight: 500;
    }

    /* Responsive Design */
    @media (max-width: 768px) {
      .container {
        padding: 24px 16px;
      }
      .title {
        font-size: 1.75rem;
      }
      .file-grid {
        grid-template-columns: 1fr;
        gap: 16px;
      }
      .actions {
        flex-direction: column;
        align-items: stretch;
      }
      .btn {
          width: 100%;
      }
      .breadcrumb {
        gap: 6px;
      }
      .breadcrumb-separator {
        display: none;
      }
      .modal-actions {
        flex-direction: column-reverse;
      }
      .modal-actions .btn {
          width: 100%;
      }
    }
  </style>
</head>
<body>
  
  <!-- Upload Overlay -->
  <div class="upload-overlay" id="uploadOverlay">
    <div class="loading-spinner"></div>
    <p class="upload-overlay-text">Uploading...</p>
  </div>
  
  <div class="container">
    <header class="header">
      <h1 class="title">
        <svg xmlns="http://www.w3.org/2000/svg" width="36" height="36" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M15.59 2.76a1 1 0 0 1 .45 1.08L14.5 11h-5l-1.54-7.16a1 1 0 0 1 .45-1.08l7-4.04a1 1 0 0 1 1.18.01z"></path><path d="M12 11v10"></path><path d="M12 21a2 2 0 1 0 0-4 2 2 0 0 0 0 4z"></path><path d="M6 11H2.5a1 1 0 0 0-1 .9l-1.45 7.1A1 1 0 0 0 1 21h4.05"></path><path d="M22.9 11.9a1 1 0 0 0-1-.9H18"></path><path d="M19.45 20.01A1 1 0 0 0 20 21h3a1 1 0 0 0 .9-1.1l-1.45-7.1z"></path></svg>
        <span>HuggingFace Drive</span>
      </h1>
      
      <!-- Breadcrumb Navigation -->
      <nav class="breadcrumb">
        <span class="breadcrumb-item {{ 'active' if not path else '' }}" onclick="nav('')">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" 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
        </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 }}')">
              <svg xmlns="http://www.w3.org/2000/svg" class="icon" 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>
              {{ parts[i] }}
            </span>
          {% endfor %}
        {% endif %}
      </nav>
      <!-- Actions -->
      <div class="actions">
        <form action="/upload" method="post" enctype="multipart/form-data" id="uploadForm">
          <div class="file-input-wrapper">
              <label for="fileInput" class="btn">
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" 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.414L7.707 6.707a1 1 0 01-1.414 0z" clip-rule="evenodd" /></svg>
                  Upload File
              </label>
              <input type="file" name="file" required class="file-input" id="fileInput">
              <input type="hidden" name="path" value="{{ path }}">
          </div>
        </form>
        <button class="btn btn-secondary" onclick="showFolderModal('{{ path }}')">
          <svg xmlns="http://www.w3.org/2000/svg" class="icon" 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>
      </div>
    </header>
    <!-- File Grid -->
    <main class="file-grid">
      {% for item in items %}
        <div class="file-item">
          <div class="file-item-clickable" onclick="{% if item.type=='dir' %}nav('{{ item.path }}'){% else %}download('{{ item.path }}'){% endif %}">
            <div class="file-content">
              <div class="file-info">
                <div class="file-icon {{ 'folder-icon' if item.type=='dir' }}">
                   {% if item.type == 'dir' %}
                    <svg xmlns="http://www.w3.org/2000/svg" class="icon" 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 xmlns="http://www.w3.org/2000/svg" class="icon" 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-name" title="{{ item.name }}">{{ item.name }}</div>
              </div>
            </div>
          </div>
          <div class="dropdown">
            <button class="dropdown-toggle" onclick="toggleDropdown(event, this)">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" 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' %}
                <div class="dropdown-item" onclick="download('{{ item.path }}')">
                  <svg xmlns="http://www.w3.org/2000/svg" class="icon" 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
                </div>
              {% endif %}
              <div class="dropdown-item" onclick="showRenameModal('{{ item.path }}', '{{ item.name }}')">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" viewBox="0 0 20 20" fill="currentColor"><path d="M13.586 3.586a2 2 0 112.828 2.828l-.793.793-2.828-2.828.793-.793zM11.379 5.793L3 14.172V17h2.828l8.38-8.379-2.83-2.828z" /></svg>
                Rename
              </div>
              <div class="dropdown-item danger" onclick="showDeleteModal('{{ item.path }}', '{{ item.name }}')">
                <svg xmlns="http://www.w3.org/2000/svg" class="icon" 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 0V8zm5-1a1 1 0 00-1 1v6a1 1 0 102 0V8a1 1 0 00-1-1z" clip-rule="evenodd" /></svg>
                Delete
              </div>
            </div>
          </div>
        </div>
      {% endfor %}
    </main>
  </div>
  <!-- Modals -->
  <div class="modal-overlay" id="renameModal">
    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="renameModalTitle">
      <h3 class="modal-title" id="renameModalTitle">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-spinner" style="display: none;"></span>
        </button>
      </div>
    </div>
  </div>
  <div class="modal-overlay" id="deleteModal">
    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="deleteModalTitle">
      <h3 class="modal-title" id="deleteModalTitle">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-spinner" style="display: none;"></span>
        </button>
      </div>
    </div>
  </div>
  <div class="modal-overlay" id="folderModal">
    <div class="modal" role="dialog" aria-modal="true" aria-labelledby="folderModalTitle">
      <h3 class="modal-title" id="folderModalTitle">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-spinner" style="display: none;"></span>
        </button>
      </div>
    </div>
  </div>

  <script>
    let currentRenamePath = '';
    let currentDeletePath = '';
    let currentFolderPath = '';
    let activeDropdown = null;

    function nav(p) {
      location.href = '/?path=' + encodeURIComponent(p);
    }
    
    function download(path) {
      window.open('/download?path=' + encodeURIComponent(path), '_blank');
    }

    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 showSpinner = (btnId, textId, spinnerId) => {
        document.getElementById(btnId).disabled = true;
        document.getElementById(textId).style.display = 'none';
        document.getElementById(spinnerId).style.display = 'inline-block';
    }

    const hideSpinner = (btnId, textId, spinnerId) => {
        document.getElementById(btnId).disabled = false;
        document.getElementById(textId).style.display = 'inline-block';
        document.getElementById(spinnerId).style.display = 'none';
    }

    function showModal(modalId) {
      document.getElementById(modalId).classList.add('active');
      document.body.style.overflow = 'hidden';
    }

    function closeModal(modalId) {
      document.getElementById(modalId).classList.remove('active');
      document.body.style.overflow = '';
    }

    function showRenameModal(path, currentName) {
      currentRenamePath = path;
      document.getElementById('renameInput').value = currentName;
      showModal('renameModal');
      setTimeout(() => {
        document.getElementById('renameInput').focus();
        document.getElementById('renameInput').select();
      }, 100);
      closeAllDropdowns();
    }

    function showDeleteModal(path, name) {
      currentDeletePath = path;
      document.getElementById('deleteItemName').textContent = name;
      showModal('deleteModal');
      closeAllDropdowns();
    }

    function showFolderModal(path) {
      currentFolderPath = path;
      document.getElementById('folderInput').value = '';
      showModal('folderModal');
      setTimeout(() => document.getElementById('folderInput').focus(), 100);
    }

    function closeAllDropdowns() {
      if (activeDropdown) {
        activeDropdown.classList.remove('active');
        activeDropdown = null;
      }
    }
    
    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)
            });
            if (response.ok) {
                if (modalToClose) closeModal(modalToClose);
                location.reload();
            } else {
                const error = await response.text();
                alert(`Operation failed: ${error}`);
            }
        } catch (error) {
            console.error('Action failed:', error);
            alert('An unexpected error occurred.');
        } finally {
            hideSpinner(btnId, textId, spinnerId);
        }
    }

    function confirmRename() {
      const newName = document.getElementById('renameInput').value.trim();
      if (!newName) {
        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) {
        alert('Please enter a folder name');
        return;
      }
      const folderPath = currentFolderPath ? `${currentFolderPath}/${folderName}` : folderName;
      performAction('/create_folder', { path: folderPath }, 'folderConfirmBtn', 'folderBtnText', 'folderBtnSpinner', 'folderModal');
    }

    // Event Listeners
    document.addEventListener('click', (e) => {
      if (!e.target.closest('.dropdown')) {
        closeAllDropdowns();
      }
      if (e.target.classList.contains('modal-overlay')) {
        closeModal(e.target.id);
      }
    });

    document.getElementById('fileInput').addEventListener('change', function(e) {
      if (this.files.length > 0) {
        document.getElementById('uploadOverlay').classList.add('active');
        document.getElementById('uploadForm').submit();
      }
    });
    
    const setupModalKeyListener = (inputId, confirmFunction) => {
        document.getElementById(inputId).addEventListener('keypress', (e) => {
            if (e.key === 'Enter') {
                e.preventDefault();
                confirmFunction();
            }
        });
    };

    setupModalKeyListener('renameInput', confirmRename);
    setupModalKeyListener('folderInput', confirmCreateFolder);

    document.addEventListener('keydown', (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)