Spaces:

testdeep123
/

cronjob

Running

App Files Files Community

testdeep123 commited on 19 days ago

Commit

62c5efa

verified ·

1 Parent(s): a6ae3e4

Update app.py

Browse files

Files changed (1) hide show

app.py +1341 -0

app.py CHANGED Viewed

	@@ -0,0 +1,1341 @@

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