Spaces:

testdeep123
/

drive

No application file

App Files Files Community

drive / app.py

testdeep123

Create app.py

ae9572b verified 15 days ago

raw

history blame contribute delete

41.2 kB

	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
	import time

	app = Flask(__name__)
	app.secret_key = os.urandom(24)

	REPO_ID = None
	HF_TOKEN = None

	api = HfApi()

	TEMPLATE = """
	<!DOCTYPE html>
	<html lang="en">
	<head>
	<meta charset="UTF-8">
	<title>SUS 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-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;
	--accent-primary-hover: #7dd3fc;
	--accent-success: #2dd4bf;
	--accent-danger: #f87171;
	--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.42, 0.13, 0.76, 0.28);
	--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;
	}
	.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.05);
	}
	.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;
	}
	.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;
	}
	@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лад: 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);
	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%;
	text-decoration: none;
	color: inherit;
	}
	.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.05);
	}
	.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);
	}
	.storage-usage {
	margin-top: 1rem;
	font-size: 0.9rem;
	color: var(--text-secondary);
	}
	.progress-bar {
	background: var(--border-color);
	border-radius: var(--radius-sm);
	height: 8px;
	overflow: hidden;
	}
	.progress {
	background: var(--accent-primary);
	height: 100%;
	transition: width 0.3s ease;
	}
	.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); }
	.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;
	}
	.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;
	}
	::-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; }
	.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>
	<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>
	SUS Drive
	</h1>
	<div class="storage-usage">
	<p>Storage Used: {{ usage_percentage\|round(2) }}% of 100GB</p>
	<div class="progress-bar">
	<div class="progress" style="width: {{ usage_percentage }}%;"></div>
	</div>
	</div>
	<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>
	<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>
	<main>
	{% if items %}
	<div class="file-grid">
	{% for item in items %}
	<div class="file-item">
	{% if item.type == 'dir' %}
	<a href="/?path={{ item.path }}" class="file-item-content">
	{% else %}
	<a href="/download?path={{ item.path }}" class="file-item-content" download="{{ item.name }}">
	{% 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">
	{% if item.type == 'dir' %}
	Directory
	{% else %}
	File • {{ item.size_str }}
	{% endif %}
	</div>
	</div>
	</a>
	<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="window.location.href='/download?path={{ 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>
	<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>
	<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>
	<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>
	<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>
	let currentRenamePath = '';
	let currentDeletePath = '';
	let currentFolderPath = '';
	let currentUrlDownloadPath = '';
	let activeDropdown = null;
	function nav(path) {
	window.location.href = '/?path=' + encodeURIComponent(path);
	}
	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;
	}
	}
	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';
	}
	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 = '';
	}
	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');
	}
	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);
	}
	}
	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');
	}
	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');
	}
	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 format_size(size):
	if size is None:
	return "Directory"
	for unit in ['B', 'KB', 'MB', 'GB', 'TB']:
	if size < 1024:
	return f"{size:.2f} {unit}"
	size /= 1024
	return f"{size:.2f} PB"
	def list_folder(path=""):
	if not REPO_ID or not HF_TOKEN:
	return []
	prefix = path.strip("/") + ("/" if path else "")
	try:
	files_info = api.get_paths_info(repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN, path=prefix, recursive=False)
	except Exception as e:
	print(f"Error listing files: {e}")
	return []
	items = []
	seen_dirs = set()
	for file_info in files_info:
	rel_path = file_info.path[len(prefix):] if prefix else file_info.path
	if not rel_path:
	continue
	if "/" in rel_path:
	dir_name = rel_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,
	"size": None,
	"size_str": "Directory"
	})
	else:
	items.append({
	"type": "file",
	"name": rel_path,
	"path": file_info.path,
	"size": file_info.size,
	"size_str": format_size(file_info.size)
	})
	items.sort(key=lambda x: (x["type"] != "dir", x["name"].lower()))
	return items
	def get_total_size():
	if not REPO_ID or not HF_TOKEN:
	return 0
	try:
	all_files_info = api.get_paths_info(repo_id=REPO_ID, repo_type="dataset", token=HF_TOKEN, path="/", recursive=True)
	total_size = sum(file_info.size for file_info in all_files_info if file_info.type == "file")
	return total_size
	except Exception as e:
	print(f"Error getting total size: {e}")
	return 0
	@app.route("/set_credentials", methods=["GET", "POST"])
	def set_credentials():
	global REPO_ID, HF_TOKEN
	if request.method == "POST":
	REPO_ID = request.form.get("repo_id")
	HF_TOKEN = request.form.get("hf_token")
	if not REPO_ID or not HF_TOKEN:
	return "Missing repo_id or hf_token", 400
	return redirect("/")
	return """
	<form method="post">
	<label for="repo_id">Dataset ID (e.g., username/datasetname):</label>
	<input type="text" id="repo_id" name="repo_id" required><br>
	<label for="hf_token">Hugging Face Token:</label>
	<input type="password" id="hf_token" name="hf_token" required><br>
	<input type="submit" value="Set Credentials">
	</form>
	"""
	@app.route("/", methods=["GET"])
	def index():
	if not REPO_ID or not HF_TOKEN:
	return redirect("/set_credentials")
	path = request.args.get("path", "").strip("/")
	items = list_folder(path)
	total_used = get_total_size()
	total_available = 100 * 1024 * 1024 * 1024
	usage_percentage = (total_used / total_available) * 100 if total_available > 0 else 0
	return render_template_string(TEMPLATE, items=items, path=path, usage_percentage=usage_percentage)
	@app.route("/download", methods=["GET"])
	def download():
	if not REPO_ID or not HF_TOKEN:
	return "Credentials not set", 403
	file_path = request.args.get("path", "")
	if not file_path:
	return "No file path provided", 400
	try:
	local_path = hf_hub_download(
	repo_id=REPO_ID,
	filename=file_path,
	repo_type="dataset",
	token=HF_TOKEN,
	cache_dir=tempfile.gettempdir()
	)
	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():
	if not REPO_ID or not HF_TOKEN:
	return "Credentials not set", 403
	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("/")
	dest_path = f"{path}/{file.filename}".strip("/")
	with tempfile.NamedTemporaryFile(delete=False) as tmp_file:
	file.save(tmp_file.name)
	try:
	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:
	try:
	os.unlink(tmp_file.name)
	except:
	pass
	return redirect(f"/?path={path}")
	@app.route("/download_url", methods=["POST"])
	def download_url():
	if not REPO_ID or not HF_TOKEN:
	return jsonify({"error": "Credentials not set"}), 403
	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:
	filename = get_filename_from_url(url, custom_filename)
	dest_path = f"{path}/{filename}".strip("/")
	response = requests.get(url, stream=True, timeout=30)
	response.raise_for_status()
	content_length = response.headers.get('content-length')
	if content_length and int(content_length) > 5 * 1024 * 1024 * 1024:
	return jsonify({"error": "File too large. Maximum size is 5GB"}), 400
	with tempfile.NamedTemporaryFile(delete=False) as tmp_file:
	for chunk in response.iter_content(chunk_size=8192):
	tmp_file.write(chunk)
	tmp_file.flush()
	upload_file(
	path_or_fileobj=tmp_file.name,
	path_in_repo=dest_path,
	repo_id=REPO_ID,
	repo_type="dataset",
	token=HF_TOKEN
	)
	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():
	if not REPO_ID or not HF_TOKEN:
	return jsonify({"error": "Credentials not set"}), 403
	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:
	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():
	if not REPO_ID or not HF_TOKEN:
	return jsonify({"error": "Credentials not set"}), 403
	data = request.get_json()
	folder_path = data.get("path", "").strip("/")
	if not folder_path:
	return jsonify({"error": "No folder path provided"}), 400
	keep_file_path = f"{folder_path}/.keep"
	try:
	with tempfile.NamedTemporaryFile(delete=False) as tmp_file:
	tmp_file.write(b"# This file keeps the folder in git\n")
	tmp_file.flush()
	upload_file(
	path_or_fileobj=tmp_file.name,
	path_in_repo=keep_file_path,
	repo_id=REPO_ID,
	repo_type="dataset",
	token=HF_TOKEN
	)
	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():
	if not REPO_ID or not HF_TOKEN:
	return jsonify({"error": "Credentials not set"}), 403
	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:
	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 + "/"):
	relative_path = file_path[len(old_path):].lstrip("/")
	new_file_path = (new_path + "/" + relative_path).strip("/")
	local_path = hf_hub_download(
	repo_id=REPO_ID,
	filename=file_path,
	repo_type="dataset",
	token=HF_TOKEN,
	cache_dir=tempfile.gettempdir()
	)
	upload_file(
	path_or_fileobj=local_path,
	path_in_repo=new_file_path,
	repo_id=REPO_ID,
	repo_type="dataset",
	token=HF_TOKEN
	)
	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
	def get_filename_from_url(url, custom_filename=None):
	if custom_filename:
	return custom_filename
	parsed_url = urlparse(url)
	path = unquote(parsed_url.path)
	filename = os.path.basename(path)
	if not filename or '.' not in filename:
	filename = f"downloaded_file_{int(time.time())}"
	return filename
	if __name__ == "__main__":
	app.run(debug=True, host="0.0.0.0")