Spaces:

WACATW
/

user-file

Sleeping

Rename ures to ures.html

0f61bdb verified 4 months ago

2.48 kB

<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<title>HF云网盘</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
</head>
<body class="bg-gray-100 p-6 max-w-5xl mx-auto">
    <h1 class="text-2xl font-bold mb-4"><i class="fa fa-cloud"></i> HuggingFace 简易网盘</h1>
    <!-- 本地选择文件 -->
    <label class="bg-blue-500 text-white px-4 py-2 rounded cursor-pointer inline-block mb-4">
        <i class="fa fa-upload"></i> 选择本地文件
        <input type="file" id="fileInput" multiple class="hidden">
    </label>
    <button id="uploadBtn" class="bg-green-500 text-white px-4 py-2 rounded ml-2">上传到HF云端</button>
    <button id="refreshBtn" class="bg-gray-600 text-white px-4 py-2 rounded ml-2">刷新云端文件</button>

    <!-- 云端文件列表 -->
    <div class="mt-6 bg-white p-4 rounded shadow">
        <h3 class="font-bold mb-2">云端文件列表</h3>
        <div id="fileList" class="space-y-2"></div>
    </div>

<script>
// 本地缓存选中文件
let selectFiles = [];
const fileInput = document.getElementById('fileInput');
const fileList = document.getElementById('fileList');
// 选中本地文件
fileInput.onchange = e => {
    selectFiles = Array.from(e.target.files);
    alert(`已选中${selectFiles.length}个文件，点击上传按钮推送至HF`);
}
// 上传按钮（前端仅提示，实际上传运行下面python脚本）
document.getElementById('uploadBtn').onclick = () => {
    if(selectFiles.length === 0) return alert("请先选择文件");
    alert("请运行 upload_hf.py 脚本完成云端上传");
}
// 刷新按钮提示
document.getElementById('refreshBtn').onclick = () => {
    alert("运行 get_filelist.py 读取云端文件并刷新页面");
}
// 渲染云端文件
function renderFiles(files) {
    fileList.innerHTML = "";
    files.forEach(item => {
        let div = document.createElement("div");
        div.className = "flex justify-between items-center border p-2 rounded";
        div.innerHTML = `
            <span><i class="fa fa-file"></i> ${item}</span>
            <button onclick="downloadFile('${item}')" class="text-blue-600">下载</button>
        `;
        fileList.appendChild(div);
    })
}
// 下载提示
function downloadFile(filename) {
    alert(`运行 download_hf.py ${filename} 下载文件到本地`);
}
</script>
</body>
</html>

	<!DOCTYPE html>
	<html lang="zh-CN">
	<head>
	<meta charset="UTF-8">
	<title>HF云网盘</title>
	<script src="https://cdn.tailwindcss.com"></script>
	<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css">
	</head>
	<body class="bg-gray-100 p-6 max-w-5xl mx-auto">
	<h1 class="text-2xl font-bold mb-4"><i class="fa fa-cloud"></i> HuggingFace 简易网盘</h1>
	<!-- 本地选择文件 -->
	<label class="bg-blue-500 text-white px-4 py-2 rounded cursor-pointer inline-block mb-4">
	<i class="fa fa-upload"></i> 选择本地文件
	<input type="file" id="fileInput" multiple class="hidden">
	</label>
	<button id="uploadBtn" class="bg-green-500 text-white px-4 py-2 rounded ml-2">上传到HF云端</button>
	<button id="refreshBtn" class="bg-gray-600 text-white px-4 py-2 rounded ml-2">刷新云端文件</button>

	<!-- 云端文件列表 -->
	<div class="mt-6 bg-white p-4 rounded shadow">
	<h3 class="font-bold mb-2">云端文件列表</h3>
	<div id="fileList" class="space-y-2"></div>
	</div>

	<script>
	// 本地缓存选中文件
	let selectFiles = [];
	const fileInput = document.getElementById('fileInput');
	const fileList = document.getElementById('fileList');

	// 选中本地文件
	fileInput.onchange = e => {
	selectFiles = Array.from(e.target.files);
	alert(`已选中${selectFiles.length}个文件，点击上传按钮推送至HF`);
	}

	// 上传按钮（前端仅提示，实际上传运行下面python脚本）
	document.getElementById('uploadBtn').onclick = () => {
	if(selectFiles.length === 0) return alert("请先选择文件");
	alert("请运行 upload_hf.py 脚本完成云端上传");
	}

	// 刷新按钮提示
	document.getElementById('refreshBtn').onclick = () => {
	alert("运行 get_filelist.py 读取云端文件并刷新页面");
	}

	// 渲染云端文件
	function renderFiles(files) {
	fileList.innerHTML = "";
	files.forEach(item => {
	let div = document.createElement("div");
	div.className = "flex justify-between items-center border p-2 rounded";
	div.innerHTML = `
	<span><i class="fa fa-file"></i> ${item}</span>
	<button onclick="downloadFile('${item}')" class="text-blue-600">下载</button>
	`;
	fileList.appendChild(div);
	})
	}

	// 下载提示
	function downloadFile(filename) {
	alert(`运行 download_hf.py ${filename} 下载文件到本地`);
	}
	</script>
	</body>
	</html>