Hugging Face's logo

Spaces:
testdeep123
/
cronjob
Running

App Files Community
cronjob / app.py
testdeep123's picture
testdeep123
Update app.py
a88b84c verified
raw
history blame
29.5 kB
 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)