Spaces:

testdeep123
/

cronjob

Running

App Files Files Community

testdeep123 commited on Jul 25

Commit

4a69f98

verified ·

1 Parent(s): b1c4e38

Update app.py

Browse files

Files changed (1) hide show

app.py +699 -627

app.py CHANGED Viewed

@@ -1,681 +1,753 @@
 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, quote
-# --- FIX FOR PERMISSION ERROR ---
-# In restricted environments (like some containers), the default Hugging Face cache
-# directory (~/.cache/huggingface) might not be writable. We override this by setting
-# the HF_HOME environment variable to a writable directory.
-# This must be done BEFORE any huggingface_hub functions are called.
-HF_CACHE_DIR = os.path.join(tempfile.gettempdir(), "hf_home")
-os.makedirs(HF_CACHE_DIR, exist_ok=True)
-os.environ["HF_HOME"] = HF_CACHE_DIR
-# --------------------------------
-# --- 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_..."
-# Ensure the hf_hub library uses the token. This will now write to the writable HF_HOME dir.
-if HF_TOKEN:
-    HfFolder.save_token(HF_TOKEN)
 app = Flask(__name__)
 api = HfApi()
-# --- THE ALL-IN-ONE TEMPLATE (HTML, CSS, JS) ---
 TEMPLATE = """
 <!DOCTYPE html>
-<html lang="en">
 <head>
-    <meta charset="UTF-8">
-    <title>HuggingFace Drive - {{ path or 'Root' }}</title>
-    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <link rel="preconnect" href="https://fonts.googleapis.com">
-    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
-    <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
-    <style>
-        :root {
-            --bg-deep-space: #0D0C22;
-            --bg-surface: #1A1936;
-            --bg-surface-hover: #212042;
-            --primary-accent: #8A2BE2;
-            --primary-accent-glow: rgba(138, 43, 226, 0.5);
-            --secondary-accent: #4D4DFF;
-            --text-primary: #F0F0F0;
-            --text-secondary: #A0A0B0;
-            --border-color: #2A294A;
-            --danger-color: #FF5577;
-            --danger-glow: rgba(255, 85, 119, 0.4);
-            --font-family: 'Inter', sans-serif;
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-        }
-        body {
-            background-color: var(--bg-deep-space);
-            color: var(--text-primary);
-            font-family: var(--font-family);
-            min-height: 100vh;
-            overflow-x: hidden;
-        }
-        .container {
-            max-width: 1200px;
-            margin: 0 auto;
-            padding: 32px;
-        }
-        /* Header Panel */
-        .header-panel {
-            background: var(--bg-surface);
-            border: 1px solid var(--border-color);
-            border-radius: 20px;
-            padding: 24px;
-            margin-bottom: 32px;
-            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
-        }
-        .title-bar {
-            display: flex;
-            align-items: center;
-            gap: 12px;
-            margin-bottom: 20px;
-        }
-        .title {
-            font-size: 2.25rem;
-            font-weight: 700;
-            background: linear-gradient(90deg, var(--primary-accent), var(--secondary-accent));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-        }
-        /* Breadcrumbs */
-        .breadcrumb {
-            display: flex;
-            align-items: center;
-            gap: 6px;
-            flex-wrap: wrap;
-            margin-bottom: 24px;
-        }
-        .breadcrumb-item {
-            color: var(--text-secondary);
-            font-size: 0.9rem;
-            cursor: pointer;
-            transition: color 0.2s ease;
-        }
-        .breadcrumb-item:hover { color: var(--text-primary); }
-        .breadcrumb-item.active { color: var(--text-primary); font-weight: 500; cursor: default; }
-        .breadcrumb-separator { color: var(--text-secondary); }
-        /* Actions */
-        .actions {
-            display: flex;
-            gap: 12px;
-            flex-wrap: wrap;
-        }
-        .btn {
-            background: linear-gradient(90deg, var(--primary-accent), var(--secondary-accent));
-            color: white;
-            border: none;
-            padding: 10px 20px;
-            border-radius: 10px;
-            cursor: pointer;
-            font-weight: 600;
-            font-size: 0.9rem;
-            transition: all 0.3s ease;
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2), 0 0 20px var(--primary-accent-glow);
-            position: relative;
-            overflow: hidden;
-        }
-        .btn:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(0,0,0,0.3), 0 0 30px var(--primary-accent-glow);
-        }
-        .btn-secondary {
-            background: var(--bg-surface-hover);
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2);
-        }
-        #fileInput { display: none; }
-        /* File Grid */
-        .file-grid {
-            display: grid;
-            gap: 20px;
-            grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
-        }
-        .file-item {
-            background: var(--bg-surface);
-            border: 1px solid var(--border-color);
-            border-radius: 16px;
-            padding: 20px;
-            transition: all 0.3s ease;
-            cursor: pointer;
-            position: relative;
-            overflow: hidden;
-        }
-        /* --- The Magic Glow Effect --- */
-        .file-item::before {
-            content: "";
-            position: absolute;
-            left: var(--x, 50%);
-            top: var(--y, 50%);
-            transform: translate(-50%, -50%);
-            width: 0;
-            height: 0;
-            background: radial-gradient(circle closest-side, var(--primary-accent-glow), transparent);
-            border-radius: 50%;
-            opacity: 0;
-            transition: width 0.4s ease, height 0.4s ease, opacity 0.4s ease;
-        }
-        .file-item:hover::before {
-            width: 300px;
-            height: 300px;
-            opacity: 0.5;
-        }
-        .file-item:hover {
-            transform: translateY(-5px) scale(1.02);
-            border-color: var(--primary-accent);
-            box-shadow: 0 15px 30px rgba(0,0,0,0.4);
-        }
-        .file-content {
-            display: flex;
-            align-items: center;
-            justify-content: space-between;
-            position: relative; z-index: 2;
-        }
-        .file-info {
-            display: flex;
-            align-items: center;
-            gap: 16px;
-            flex-grow: 1;
-            min-width: 0; /* Prevents text overflow issues */
-        }
-        .file-icon { font-size: 1.8rem; }
-        .file-name {
-            font-weight: 500;
-            font-size: 1rem;
-            white-space: nowrap;
-            overflow: hidden;
-            text-overflow: ellipsis;
-        }
-        /* Dropdown Menu */
-        .dropdown { position: relative; }
-        .dropdown-toggle {
-            background: transparent; border: none; color: var(--text-secondary);
-            padding: 8px; border-radius: 50%; width: 36px; height: 36px;
-            cursor: pointer; transition: all 0.2s ease; font-size: 1.25rem;
-        }
-        .dropdown-toggle:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
-        .dropdown-menu {
-            position: absolute; top: 110%; right: 0;
-            background: #111028; backdrop-filter: blur(10px);
-            border: 1px solid var(--border-color); border-radius: 10px;
-            padding: 8px; min-width: 160px;
-            opacity: 0; visibility: hidden;
-            transform: translateY(10px) scale(0.95);
-            transition: all 0.2s ease; z-index: 100;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.5);
-        }
-        .dropdown.active .dropdown-menu {
-            opacity: 1; visibility: visible;
-            transform: translateY(0) scale(1);
-        }
-        .dropdown-item {
-            display: flex; align-items: center; gap: 10px;
-            padding: 10px 12px; border-radius: 6px; cursor: pointer;
-            transition: all 0.2s ease; font-size: 0.9rem;
-            color: var(--text-secondary);
-        }
-        .dropdown-item:hover { background: var(--bg-surface-hover); color: var(--text-primary); }
-        .dropdown-item.danger:hover {
-            background: rgba(255, 85, 119, 0.1);
-            color: var(--danger-color);
-        }
-        /* Modals */
-        .modal-overlay {
-            position: fixed; inset: 0; background: rgba(0,0,0,0.7);
-            backdrop-filter: blur(5px); z-index: 2000;
-            opacity: 0; visibility: hidden; transition: all 0.3s ease;
-        }
-        .modal-overlay.active { opacity: 1; visibility: visible; }
-        .modal {
-            position: fixed; top: 50%; left: 50%;
-            background: var(--bg-surface); border: 1px solid var(--border-color);
-            border-radius: 20px; padding: 32px;
-            max-width: 420px; width: 90%;
-            box-shadow: 0 20px 60px rgba(0,0,0,0.6);
-            opacity: 0; visibility: hidden;
-            transform: translate(-50%, -50%) scale(0.9);
-            transition: all 0.3s ease; z-index: 2001;
-        }
-        .modal-overlay.active .modal {
-            opacity: 1; visibility: visible; transform: translate(-50%, -50%) scale(1);
-        }
-        .modal-title { font-size: 1.5rem; font-weight: 600; margin-bottom: 16px; }
-        .modal-body p { margin-bottom: 20px; color: var(--text-secondary); line-height: 1.6; }
-        .modal-body strong { color: var(--primary-accent); font-weight: 500; }
-        .modal-input {
-            width: 100%; background: var(--bg-deep-space);
-            border: 1px solid var(--border-color); border-radius: 10px;
-            padding: 12px 16px; color: var(--text-primary);
-            font-size: 1rem; font-family: var(--font-family); margin-bottom: 24px;
-        }
-        .modal-input:focus {
-            outline: none; border-color: var(--primary-accent);
-            box-shadow: 0 0 0 3px var(--primary-accent-glow);
-        }
-        .modal-actions { display: flex; gap: 12px; justify-content: flex-end; }
-        .btn-danger {
-            background: var(--danger-color);
-            box-shadow: 0 4px 15px rgba(0,0,0,0.2), 0 0 20px var(--danger-glow);
-        }
-    </style>
 </head>
 <body>
-    <div class="container">
-        <div class="header-panel">
-            <div class="title-bar">
-                <span class="title">🚀 HuggingFace Drive</span>
-            </div>
-            <div class="breadcrumb">
-                {% for crumb in breadcrumbs %}
-                    <span class="breadcrumb-item {{ 'active' if loop.last else '' }}" onclick="nav('{{ crumb.path }}')">{{ crumb.name }}</span>
-                    {% if not loop.last %}<span class="breadcrumb-separator">/</span>{% endif %}
-                {% endfor %}
-            </div>
-            <div class="actions">
-                <form id="uploadForm" action="/upload" method="post" enctype="multipart/form-data">
-                    <input type="file" name="file" id="fileInput" onchange="this.form.submit()">
-                    <input type="hidden" name="path" value="{{ path }}">
-                    <label for="fileInput" class="btn">📤 Upload File</label>
-                </form>
-                <button class="btn btn-secondary" onclick="showCreateFolderModal('{{ path }}')">📁 New Folder</button>
-            </div>
-        </div>
-        <div class="file-grid">
-            {% for item in items %}
-            <div class="file-item" onmousemove="updateGlow(event, this)" onclick="handleItemClick(event, '{{ item.type }}', '{{ item.path }}')">
-                <div class="file-content">
-                    <div class="file-info">
-                        <div class="file-icon">{{ '📁' if item.type=='dir' else '📄' }}</div>
-                        <div class="file-name">{{ item.name }}</div>
-                    </div>
-                    <div class="dropdown" onclick="event.stopPropagation()">
-                        <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 %}
-            {% if not items %}
-            <p style="grid-column: 1 / -1; text-align: center; color: var(--text-secondary); padding: 40px;">This folder is empty.</p>
-            {% endif %}
         </div>
     </div>
-    <!-- Modals -->
-    <div class="modal-overlay" id="modalOverlay" onclick="hideAllModals()"></div>
-    <div class="modal" id="renameModal">
-        <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="hideAllModals()">Cancel</button>
-            <button class="btn" onclick="confirmRename()">Rename</button>
-        </div>
     </div>
-    <div class="modal" id="deleteModal">
-        <h3 class="modal-title">Confirm Deletion</h3>
-        <div class="modal-body">
-            <p>Are you sure you want to permanently delete <strong></strong>? This action cannot be undone.</p>
-        </div>
-        <div class="modal-actions">
-            <button class="btn btn-secondary" onclick="hideAllModals()">Cancel</button>
-            <button class="btn btn-danger" onclick="confirmDelete()">Delete</button>
-        </div>
     </div>
-    <div class="modal" id="createFolderModal">
-        <h3 class="modal-title">Create New Folder</h3>
-        <input type="text" class="modal-input" id="folderNameInput" placeholder="Enter folder name">
-        <div class="modal-actions">
-            <button class="btn btn-secondary" onclick="hideAllModals()">Cancel</button>
-            <button class="btn" onclick="confirmCreateFolder()">Create</button>
-        </div>
-    </div>
-    <script>
-        let currentActionContext = {};
-        let activeDropdown = null;
-        // --- Navigation & Actions ---
-        function nav(path) { location.href = '/?path=' + encodeURIComponent(path); }
-        function download(path) { window.open('/download?path=' + encodeURIComponent(path), '_blank'); }
-        function handleItemClick(event, type, path) {
-            // Only navigate if the click is not on the dropdown area
-            if (!event.target.closest('.dropdown')) {
-                if (type === 'dir') {
-                    nav(path);
-                }
-            }
-        }
-        // --- Dynamic Glow Effect ---
-        function updateGlow(event, element) {
-            const rect = element.getBoundingClientRect();
-            const x = event.clientX - rect.left;
-            const y = event.clientY - rect.top;
-            element.style.setProperty('--x', `${x}px`);
-            element.style.setProperty('--y', `${y}px`);
-        }
-        // --- Dropdown Logic ---
-        function toggleDropdown(button) {
-            const dropdown = button.closest('.dropdown');
-            if (activeDropdown && activeDropdown !== dropdown) {
-                activeDropdown.classList.remove('active');
-            }
-            dropdown.classList.toggle('active');
-            activeDropdown = dropdown.classList.contains('active') ? dropdown : null;
-        }
-        function closeAllDropdowns() {
-            document.querySelectorAll('.dropdown.active').forEach(d => d.classList.remove('active'));
-            activeDropdown = null;
-        }
-        // --- Modal Logic ---
-        function showModal(modalId) {
-            closeAllDropdowns();
-            document.getElementById('modalOverlay').classList.add('active');
-            const modal = document.getElementById(modalId);
-            modal.classList.add('active');
-            const input = modal.querySelector('.modal-input');
-            if (input) setTimeout(() => input.focus(), 150);
-        }
-        function hideAllModals() {
-            document.getElementById('modalOverlay').classList.remove('active');
-            document.querySelectorAll('.modal').forEach(m => m.classList.remove('active'));
-        }
-        function showRenameModal(path, name) {
-            currentActionContext = { path, name };
-            document.getElementById('renameInput').value = name;
-            showModal('renameModal');
-        }
-        function showDeleteModal(path, name) {
-            currentActionContext = { path };
-            document.querySelector('#deleteModal .modal-body strong').textContent = name;
-            showModal('deleteModal');
-        }
-        function showCreateFolderModal(parentPath) {
-            currentActionContext = { parentPath };
-            document.getElementById('folderNameInput').value = '';
-            showModal('createFolderModal');
-        }
-        // --- API Call Functions ---
-        async function apiPost(endpoint, body) {
-            try {
-                const response = await fetch(endpoint, {
-                    method: 'POST',
-                    headers: { 'Content-Type': 'application/json' },
-                    body: JSON.stringify(body)
-                });
-                if (response.ok) {
-                    hideAllModals();
-                    location.reload();
-                } else {
-                    alert('An error occurred. Please check the console.');
-                    console.error('API Error:', await response.text());
-                    hideAllModals();
-                }
-            } catch (error) {
-                alert('A network error occurred. Please check the console.');
-                console.error('Fetch Error:', error);
-                hideAllModals();
-            }
-        }
-        function confirmRename() {
-            const newName = document.getElementById('renameInput').value.trim();
-            if (newName && newName !== currentActionContext.name) {
-                apiPost('/rename', { old_path: currentActionContext.path, new_name: newName });
-            } else {
-                hideAllModals();
-            }
-        }
-        function confirmDelete() {
-            apiPost('/delete', { path: currentActionContext.path });
-        }
-        function confirmCreateFolder() {
-            const name = document.getElementById('folderNameInput').value.trim();
-            if (name) {
-                const folderPath = currentActionContext.parentPath ? `${currentActionContext.parentPath}/${name}` : name;
-                apiPost('/create_folder', { path: folderPath });
-            }
-        }
-        // --- Event Listeners ---
-        document.addEventListener('click', (e) => {
-            if (!e.target.closest('.dropdown')) closeAllDropdowns();
         });
-        document.addEventListener('keydown', (e) => {
-            if (e.key === 'Escape') hideAllModals();
         });
-        document.querySelectorAll('.modal-input').forEach(input => {
-            input.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter') {
-                    // Trigger the primary action of the modal
-                    const modal = e.target.closest('.modal');
-                    if (modal) {
-                       const primaryButton = modal.querySelector('.btn:not(.btn-secondary)');
-                       if (primaryButton) primaryButton.click();
-                    }
-                }
-            })
         });
-    </script>
 </body>
 </html>
 """
-# --- Helper & Backend Functions ---
 def list_folder(path=""):
-    """Lists files and directories in a given path of the repository."""
-    try:
-        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
-            relative_path = f[len(prefix):]
-            if "/" in relative_path:
-                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})
-            elif relative_path and relative_path != '.gitkeep' and relative_path != '.keep':
-                items.append({"type": "file", "name": relative_path, "path": f})
-        items.sort(key=lambda x: (x["type"] != "dir", x["name"].lower()))
-        return items
-    except Exception as e:
-        print(f"Error listing folder '{path}': {e}")
-        return []
 @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("/")
-    breadcrumbs = [{"name": "Home", "path": ""}]
-    if path:
-        current_path_agg = ""
-        for part in path.split("/"):
-            current_path_agg = f"{current_path_agg}/{part}".strip("/")
-            breadcrumbs.append({"name": part, "path": current_path_agg})
-    items = list_folder(path)
-    return render_template_string(TEMPLATE, items=items, path=path, breadcrumbs=breadcrumbs)
 @app.route("/download", methods=["GET"])
 def download():
-    path = unquote(request.args.get("path", ""))
-    try:
-        # The HF_HOME env var automatically handles the cache location
-        local_file = hf_hub_download(repo_id=REPO_ID, filename=path, repo_type="dataset")
-        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():
-    file = request.files.get("file")
-    if not file or not file.filename:
-        return redirect(request.referrer)
-    path_in_repo = request.form.get("path", "").strip("/")
-    dest_path = f"{path_in_repo}/{file.filename}".strip("/")
-    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=dest_path, repo_id=REPO_ID, repo_type="dataset", commit_message=f"Upload {file.filename}")
-    finally:
-        os.remove(tmp_path)
-    return redirect(f"/?path={quote(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")
-    # Check if the path is a file or a directory by looking for exact matches (file)
-    # vs. paths that start with the given path + "/" (directory)
-    is_file = any(f == path_to_delete for f in all_repo_files)
-    if is_file:
-        delete_file(repo_id=REPO_ID, path_in_repo=path_to_delete, repo_type="dataset", commit_message=f"Delete file {path_to_delete}")
-    else: # It's a folder
-        files_in_folder = [f for f in all_repo_files if f.startswith(path_to_delete + "/")]
-        for f in files_in_folder:
-             delete_file(repo_id=REPO_ID, path_in_repo=f, repo_type="dataset", commit_message=f"Delete file {f} from folder {path_to_delete}")
-        # Delete placeholder files if they exist to remove the empty folder
-        for placeholder in ['.gitkeep', '.keep']:
-            try:
-                delete_file(repo_id=REPO_ID, path_in_repo=f"{path_to_delete}/{placeholder}", repo_type="dataset", commit_message=f"Delete folder placeholder for {path_to_delete}", ignore_patterns=None)
-            except Exception:
-                pass # Placeholder did not exist, which is fine
     return jsonify(status="ok")
 @app.route("/create_folder", methods=["POST"])
 def create_folder():
-    folder_path = request.get_json()["path"].strip("/")
-    keep_file_path = f"{folder_path}/.gitkeep"
-    with tempfile.NamedTemporaryFile(mode='w', delete=False, suffix=".tmp") as tmp:
-        tmp.write("") # Create an 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", commit_message=f"Create folder {folder_path}")
-    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_name = data["new_name"].strip("/")
-    parent_dir = os.path.dirname(old_path)
-    new_path = os.path.join(parent_dir, new_name).replace("\\", "/") if parent_dir else new_name
-    all_repo_files = api.list_repo_files(repo_id=REPO_ID, repo_type="dataset")
-    is_file = any(f == old_path for f in all_repo_files)
-    operations = []
-    if is_file:
-        operations.append((old_path, new_path))
-    else: # It's a folder
-        folder_prefix = old_path + "/"
-        for f in all_repo_files:
-            if f.startswith(folder_prefix):
-                new_file_path = new_path + f[len(old_path):]
-                operations.append((f, new_file_path))
-    for old_file, new_file in operations:
-        # This move is done server-side on the Hub, no local download needed
-        api.move_file(
-            from_path=old_file,
-            to_path=new_file,
-            repo_id=REPO_ID,
-            repo_type="dataset",
-        )
     return jsonify(status="ok")
 if __name__ == "__main__":
-    if not REPO_ID or not HF_TOKEN:
-        print("\n" + "="*50)
-        print("FATAL ERROR: Environment variables are not set.")
-        print("Please set REPO_ID (e.g., 'YourUser/YourDataset')")
-        print("and HF_TOKEN (your 'hf_...' access token).")
-        print("="*50 + "\n")
-    else:
-        print(f"\n✅ Server starting for repository: {REPO_ID}")
-        print(f"✅ Access the UI at http://127.0.0.1:7860")
-        app.run(debug=False, 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
+# 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)
+make the UI best of the best with UX and also grate animations and UI elements to make it great looking and user friendly. also add a custom pop up box fore rename and make sure popup for delete option
+now write me one py code with thml css js python all in one code like my original one
+rewrite all the css and designs and make it pro and award winning design