cronjob / app.py
testdeep123's picture
Update app.py
27fc0b7 verified
raw
history blame
21.9 kB
import os
import tempfile
import requests
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>
/* Reset and Base Styles */
* {
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
background-color: #0d1117;
color: #e5e7eb;
line-height: 1.5;
min-height: 100vh;
display: flex;
flex-direction: column;
}
.container {
max-width: 1200px;
margin: 0 auto;
padding: 2rem 1rem;
flex: 1;
}
/* Header */
.header {
background: rgba(31, 41, 55, 0.8);
border-radius: 1rem;
padding: 1.5rem;
margin-bottom: 2rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}
.title {
font-size: 2rem;
font-weight: bold;
margin-bottom: 1rem;
display: flex;
align-items: center;
gap: 0.5rem;
color: #667eea;
}
/* Breadcrumb */
.breadcrumb {
display: flex;
flex-wrap: wrap;
gap: 0.5rem;
margin-bottom: 1.5rem;
}
.breadcrumb-item {
background: rgba(255, 255, 255, 0.1);
padding: 0.5rem 1rem;
border-radius: 0.5rem;
cursor: pointer;
transition: background 0.3s;
display: flex;
align-items: center;
gap: 0.5rem;
}
.breadcrumb-item:hover {
background: rgba(102, 126, 234, 0.3);
}
.breadcrumb-item.active {
background: #667eea;
color: white;
}
.breadcrumb-separator {
color: #9ca3af;
}
/* Actions */
.actions {
display: flex;
gap: 1rem;
flex-wrap: wrap;
}
.btn {
padding: 0.75rem 1.25rem;
border-radius: 0.75rem;
cursor: pointer;
font-weight: 600;
transition: all 0.3s;
display: inline-flex;
align-items: center;
gap: 0.5rem;
border: none;
}
.btn-primary {
background: linear-gradient(135deg, #667eea, #764ba2);
color: white;
}
.btn-primary:hover {
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.5);
transform: translateY(-2px);
}
.btn-secondary {
background: rgba(255, 255, 255, 0.1);
color: #e5e7eb;
}
.btn-secondary:hover {
background: rgba(255, 255, 255, 0.2);
}
.btn-danger {
background: linear-gradient(135deg, #ef4444, #dc2626);
color: white;
}
.btn-danger:hover {
box-shadow: 0 4px 15px rgba(239, 68, 68, 0.5);
}
.btn:disabled {
opacity: 0.6;
cursor: not-allowed;
}
.file-input-wrapper {
position: relative;
}
.file-input {
position: absolute;
top: 0;
left: 0;
opacity: 0;
width: 100%;
height: 100%;
cursor: pointer;
}
/* File Grid */
.file-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
gap: 1.5rem;
}
.file-item {
background: rgba(31, 41, 55, 0.8);
border-radius: 1rem;
padding: 1rem;
transition: all 0.3s;
position: relative;
}
.file-item:hover {
transform: translateY(-4px);
box-shadow: 0 8px 25px rgba(0, 0, 0, 0.4);
}
.file-content {
display: flex;
align-items: center;
gap: 1rem;
}
.file-icon {
font-size: 2rem;
width: 3rem;
height: 3rem;
display: flex;
align-items: center;
justify-content: center;
border-radius: 0.5rem;
background: rgba(255, 255, 255, 0.1);
}
.folder-icon {
background: linear-gradient(135deg, #fbbf24, #f59e0b);
}
.file-name {
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* Dropdown */
.dropdown {
position: absolute;
top: 0.5rem;
right: 0.5rem;
}
.dropdown-toggle {
background: transparent;
border: none;
cursor: pointer;
padding: 0.5rem;
color: #9ca3af;
}
.dropdown-menu {
position: absolute;
right: 0;
background: #1f2937;
border-radius: 0.5rem;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.5);
min-width: 150px;
display: none;
}
.dropdown.active .dropdown-menu {
display: block;
}
.dropdown-item {
padding: 0.75rem 1rem;
cursor: pointer;
display: flex;
align-items: center;
gap: 0.5rem;
transition: background 0.3s;
}
.dropdown-item:hover {
background: rgba(255, 255, 255, 0.1);
}
.dropdown-item.danger:hover {
background: rgba(239, 68, 68, 0.2);
}
/* Modals */
.modal-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.7);
display: flex;
align-items: center;
justify-content: center;
z-index: 1000;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.modal-overlay.active {
opacity: 1;
visibility: visible;
}
.modal {
background: #1f2937;
border-radius: 1rem;
padding: 1.5rem;
max-width: 400px;
width: 90%;
transform: scale(0.9);
transition: transform 0.3s;
}
.modal-overlay.active .modal {
transform: scale(1);
}
.modal-title {
font-size: 1.25rem;
margin-bottom: 1rem;
}
.modal-body {
margin-bottom: 1.5rem;
}
.modal-input {
width: 100%;
padding: 0.75rem;
border-radius: 0.5rem;
background: rgba(255, 255, 255, 0.05);
border: 1px solid rgba(255, 255, 255, 0.1);
color: #e5e7eb;
}
.modal-actions {
display: flex;
gap: 1rem;
justify-content: flex-end;
}
/* Loading */
.loading-spinner {
border: 3px solid rgba(255, 255, 255, 0.3);
border-top-color: white;
border-radius: 50%;
width: 1.5rem;
height: 1.5rem;
animation: spin 1s linear infinite;
display: none;
}
@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);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
z-index: 2000;
opacity: 0;
visibility: hidden;
transition: all 0.3s;
}
.upload-overlay.active {
opacity: 1;
visibility: visible;
}
.upload-overlay-text {
margin-top: 1rem;
font-size: 1.25rem;
}
/* Responsive */
@media (max-width: 768px) {
.container {
padding: 1rem;
}
.title {
font-size: 1.5rem;
}
.actions {
flex-direction: column;
}
.btn {
width: 100%;
}
.file-grid {
grid-template-columns: 1fr;
}
.modal-actions {
flex-direction: column;
}
}
</style>
</head>
<body>
<!-- Upload Overlay -->
<div class="upload-overlay" id="uploadOverlay">
<div class="loading-spinner" style="display: block; width: 3rem; height: 3rem;"></div>
<p class="upload-overlay-text">Processing...</p>
</div>
<div class="container">
<header class="header">
<h1 class="title">
HuggingFace Drive
</h1>
<!-- Breadcrumb Navigation -->
<nav 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 %}
</nav>
<!-- Actions -->
<div class="actions">
<form action="/upload" method="post" enctype="multipart/form-data" id="uploadForm">
<div class="file-input-wrapper">
<button type="button" class="btn btn-primary">
Upload File
</button>
<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 }}')">
New Folder
</button>
<button class="btn btn-secondary" onclick="showDownloadUrlModal('{{ path }}')">
Download from URL
</button>
</div>
</header>
<!-- File Grid -->
<main class="file-grid">
{% for item in items %}
<div class="file-item">
<div class="file-content" onclick="{% if item.type=='dir' %}nav('{{ item.path }}'){% else %}download('{{ item.path }}'){% endif %}">
<div class="file-icon {{ 'folder-icon' if item.type=='dir' }}">
{% if item.type == 'dir' %}
Folder
{% else %}
File
{% endif %}
</div>
<div class="file-name" title="{{ item.name }}">{{ item.name }}</div>
</div>
<div class="dropdown">
<button class="dropdown-toggle" onclick="toggleDropdown(this)">
</button>
<div class="dropdown-menu">
{% if item.type == 'file' %}
<div class="dropdown-item" onclick="download('{{ item.path }}')">
Download
</div>
{% endif %}
<div class="dropdown-item" onclick="showRenameModal('{{ item.path }}', '{{ item.name }}')">
Rename
</div>
<div class="dropdown-item danger" onclick="showDeleteModal('{{ item.path }}', '{{ item.name }}')">
Delete
</div>
</div>
</div>
</div>
{% endfor %}
</main>
</div>
<!-- Modals -->
<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">
Rename
<span class="loading-spinner" id="renameBtnSpinner"></span>
</button>
</div>
</div>
</div>
<div class="modal-overlay" id="deleteModal">
<div class="modal">
<h3 class="modal-title">Confirm Deletion</h3>
<div class="modal-body">
<p>Are you sure you want to delete <strong id="deleteItemName"></strong>?</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">
Delete
<span class="loading-spinner" id="deleteBtnSpinner"></span>
</button>
</div>
</div>
</div>
<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">
Create
<span class="loading-spinner" id="folderBtnSpinner"></span>
</button>
</div>
</div>
</div>
<div class="modal-overlay" id="downloadUrlModal">
<div class="modal">
<h3 class="modal-title">Download from URL</h3>
<div class="modal-body">
<input type="text" class="modal-input" id="urlInput" placeholder="Enter URL">
<input type="text" class="modal-input" id="filenameInput" placeholder="Optional filename" style="margin-top: 1rem;">
</div>
<div class="modal-actions">
<button class="btn btn-secondary" onclick="closeModal('downloadUrlModal')">Cancel</button>
<button class="btn btn-primary" onclick="confirmDownloadUrl()" id="downloadUrlConfirmBtn">
Download
<span class="loading-spinner" id="downloadUrlBtnSpinner"></span>
</button>
</div>
</div>
</div>
<script>
let currentRenamePath = '';
let currentDeletePath = '';
let currentFolderPath = '';
let currentDownloadPath = '';
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');
if (activeDropdown && activeDropdown !== dropdown) {
activeDropdown.classList.remove('active');
}
dropdown.classList.toggle('active');
activeDropdown = dropdown.classList.contains('active') ? dropdown : null;
}
function showModal(modalId) {
document.getElementById(modalId).classList.add('active');
}
function closeModal(modalId) {
document.getElementById(modalId).classList.remove('active');
}
function showRenameModal(path, currentName) {
currentRenamePath = path;
document.getElementById('renameInput').value = currentName;
showModal('renameModal');
}
function showDeleteModal(path, name) {
currentDeletePath = path;
document.getElementById('deleteItemName').textContent = name;
showModal('deleteModal');
}
function showFolderModal(path) {
currentFolderPath = path;
showModal('folderModal');
}
function showDownloadUrlModal(path) {
currentDownloadPath = path;
document.getElementById('urlInput').value = '';
document.getElementById('filenameInput').value = '';
showModal('downloadUrlModal');
}
async function performAction(url, body, btnId, spinnerId, modalId) {
const btn = document.getElementById(btnId);
const spinner = document.getElementById(spinnerId);
btn.disabled = true;
spinner.style.display = 'block';
try {
const response = await fetch(url, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify(body)
});
if (response.ok) {
if (modalId) closeModal(modalId);
location.reload();
} else {
alert('Operation failed: ' + await response.text());
}
} catch (error) {
alert('Error: ' + error.message);
} finally {
btn.disabled = false;
spinner.style.display = 'none';
}
}
function confirmRename() {
const newName = document.getElementById('renameInput').value.trim();
if (!newName) return alert('Enter a name');
performAction('/rename', { old_path: currentRenamePath, new_path: newName }, 'renameConfirmBtn', 'renameBtnSpinner', 'renameModal');
}
function confirmDelete() {
performAction('/delete', { path: currentDeletePath }, 'deleteConfirmBtn', 'deleteBtnSpinner', 'deleteModal');
}
function confirmCreateFolder() {
const name = document.getElementById('folderInput').value.trim();
if (!name) return alert('Enter a name');
const path = currentFolderPath ? currentFolderPath + '/' + name : name;
performAction('/create_folder', { path }, 'folderConfirmBtn', 'folderBtnSpinner', 'folderModal');
}
function confirmDownloadUrl() {
const url = document.getElementById('urlInput').value.trim();
const filename = document.getElementById('filenameInput').value.trim();
if (!url) return alert('Enter a URL');
const body = { url, filename, path: currentDownloadPath };
document.getElementById('uploadOverlay').classList.add('active');
performAction('/download_url', body, 'downloadUrlConfirmBtn', 'downloadUrlBtnSpinner', 'downloadUrlModal');
}
document.addEventListener('click', (e) => {
if (!e.target.closest('.dropdown')) {
if (activeDropdown) activeDropdown.classList.remove('active');
}
if (e.target.classList.contains('modal-overlay')) closeModal(e.target.id);
});
document.getElementById('fileInput').addEventListener('change', () => {
if (document.getElementById('fileInput').files.length) {
document.getElementById('uploadOverlay').classList.add('active');
document.getElementById('uploadForm').submit();
}
});
</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("/")})
items.sort(key=lambda x: (x["type"]!="dir", x["name"].lower()))
return items
@app.route("/", methods=["GET"])
def index():
path = request.args.get("path","").strip("/")
return render_template_string(TEMPLATE, items=list_folder(path), path=path)
@app.route("/download", methods=["GET"])
def download():
p = request.args.get("path","")
local = hf_hub_download(repo_id=REPO_ID, filename=p, repo_type="dataset", token=HF_TOKEN, cache_dir=tempfile.gettempdir())
return send_file(local, as_attachment=True, download_name=os.path.basename(p))
@app.route("/upload", methods=["POST"])
def upload():
file = request.files["file"]
path = request.form.get("path","").strip("/")
dest = f"{path}/{file.filename}".strip("/")
tmp = tempfile.NamedTemporaryFile(delete=False)
file.save(tmp.name)
upload_file(path_or_fileobj=tmp.name, path_in_repo=dest, repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
return redirect(f"/?path={path}")
@app.route("/delete", methods=["POST"])
def delete():
d = request.get_json()["path"]
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")
@app.route("/download_url", methods=["POST"])
def download_url():
data = request.get_json()
url = data["url"]
filename = data.get("filename")
path = data.get("path", "").strip("/")
try:
response = requests.get(url, stream=True)
response.raise_for_status()
if not filename:
from urllib.parse import urlparse
filename = os.path.basename(urlparse(url).path) or "downloaded_file"
dest = f"{path}/{filename}".strip("/")
with tempfile.NamedTemporaryFile(delete=False) as tmp:
for chunk in response.iter_content(chunk_size=8192):
tmp.write(chunk)
upload_file(path_or_fileobj=tmp.name, path_in_repo=dest, repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN)
os.unlink(tmp.name)
return jsonify(status="ok")
except Exception as e:
return str(e), 400
if __name__ == "__main__":
app.run(debug=True, host="0.0.0.0", port=7860)