Spaces:

testdeep123
/

drive

No application file

App Files Files Community

drive / app.py

testdeep123

Create app.py

ae9572b verified 8 months 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")