filebed

Running

App Files Files Community

chatyou commited on Mar 21

Commit

ddc575f

verified ·

1 Parent(s): 29a42c5

Update app.py

Browse files

Files changed (1) hide show

app.py +476 -0

app.py CHANGED Viewed

@@ -287,6 +287,482 @@ HTML_CONTENT = """<!DOCTYPE html>
     </style>
 </head>
 <body>
 </body>
 </html>"""

     </style>
 </head>
 <body>
+<div class="container">
+    <h1 style="font-size: 2.5rem; margin-bottom: 2rem; color: #0f172a;">📦 HF Bucket 文件管理器 (目录导航)</h1>
+    <div class="grid">
+        <!-- 左侧：文件上传与浏览 -->
+        <!-- 右侧：API 测试面板 + 使用说明 -->
+        <div class="card">
+            <h2>🧪 API 测试</h2>
+            <div class="api-test">
+                <div class="api-section">
+                    <h3>📤 上传文件 (POST /upload) 支持目录</h3>
+                    <div class="api-row">
+                        <input type="file" id="apiFileInput" style="flex:1; padding:0.5rem;">
+                        <span style="color:#64748b;">(留空则使用左侧文件)</span>
+                    </div>
+                    <div class="api-row">
+                        <input type="text" id="apiUploadDir" class="api-input" placeholder="目标目录 (可选，如 images/)" value="">
+                        <button class="button secondary small" id="apiUploadBtn">上传测试</button>
+                    </div>
+                </div>
+                <div class="api-section">
+                    <h3>📋 列出文件 (GET /list?dir=...)</h3>
+                    <div class="api-row">
+                        <input type="text" id="apiListDir" class="api-input" placeholder="目录 (留空为根目录)" value="">
+                        <button class="button secondary small" id="apiListBtn">获取列表</button>
+                    </div>
+                </div>
+                <div class="api-section">
+                    <h3>📥 获取文件信息 (HEAD /file/&lt;filename&gt;)</h3>
+                    <div class="api-row">
+                        <input type="text" class="api-input" id="apiFilename" placeholder="输入文件名（可包含目录）">
+                        <button class="button secondary small" id="apiGetBtn">检查</button>
+                    </div>
+                </div>
+                <div class="api-section">
+                    <h3>🗑️ 删除文件 (DELETE /delete/&lt;filename&gt;)</h3>
+                    <div class="api-row">
+                        <input type="text" class="api-input" id="apiDeleteFilename" placeholder="要删除的文件名（可包含目录）">
+                        <button class="button danger small" id="apiDeleteBtn">删除</button>
+                    </div>
+                </div>
+                <div class="api-result" id="apiResult">点击按钮查看结果</div>
+                <div class="api-docs">
+    <h3>📚 API 使用说明 (JavaScript 示例)</h3>
+    <p style="color: #334155; margin-bottom: 1rem;">所有请求均需在 Hugging Face Space 内调用（同源），无需额外认证。</p>
+    <!-- 上传文件 -->
+    <div style="background: white; border-radius: 16px; padding: 1rem; margin-bottom: 1.5rem; border-left: 4px solid #3b82f6;">
+        <h4 style="margin: 0 0 0.5rem 0; color: #0f172a;">📤 上传文件</h4>
+        <p><code>POST /upload</code></p>
+        <p><strong>请求格式：</strong> <code>multipart/form-data</code></p>
+        <p><strong>参数：</strong></p>
+        <ul style="margin-left: 1.5rem; margin-bottom: 0.5rem;">
+            <li><code>file</code> (必填) - 要上传的文件</li>
+            <li><code>dir</code> (可选) - 目标目录路径，例如 <code>"images/"</code> 或 <code>"logs/2026/"</code>。留空则上传到根目录。</li>
+        </ul>
+        <p><strong>成功响应：</strong> <code>{"success": true, "filename": "远程完整路径"}</code></p>
+        <p><strong>失败响应：</strong> <code>{"error": "错误信息"}</code> (HTTP 4xx/5xx)</p>
+        <!-- 修改后的代码框样式 -->
+        <pre style="background: #000000; color: white; padding: 1rem; border-radius: 12px; overflow-x: auto; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.9rem; line-height: 1.5;"><code>// 使用 FormData 上传
+const fileInput = document.getElementById('fileInput'); // 文件选择 input
+const file = fileInput.files[0];
+const dir = "images/"; // 可选目录
+const formData = new FormData();
+formData.append('file', file);
+formData.append('dir', dir);
+fetch('/upload', {
+    method: 'POST',
+    body: formData
+})
+.then(res => res.json())
+.then(data => {
+    if (data.error) throw new Error(data.error);
+    console.log('上传成功:', data.filename);
+})
+.catch(err => console.error('上传失败:', err.message));</code></pre>
+    </div>
+    <!-- 列出文件 -->
+    <div style="background: white; border-radius: 16px; padding: 1rem; margin-bottom: 1.5rem; border-left: 4px solid #3b82f6;">
+        <h4 style="margin: 0 0 0.5rem 0; color: #0f172a;">📋 列出文件</h4>
+        <p><code>GET /list?dir=...</code></p>
+        <p><strong>查询参数：</strong></p>
+        <ul style="margin-left: 1.5rem; margin-bottom: 0.5rem;">
+            <li><code>dir</code> (可选) - 目录路径，��如 <code>"images/"</code>。留空则列出根目录下的第一层内容。</li>
+        </ul>
+        <p><strong>成功响应：</strong> 字符串数组，每个元素是文件或目录的完整路径（目录路径以 <code>/</code> 结尾）。例如：<code>["file.txt", "images/", "logs/"]</code></p>
+        <p><strong>失败响应：</strong> <code>{"error": "错误信息"}</code> (HTTP 5xx)</p>
+        <pre style="background: #000000; color: white; padding: 1rem; border-radius: 12px; overflow-x: auto; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.9rem; line-height: 1.5;"><code>// 列出根目录内容
+fetch('/list')
+    .then(res => res.json())
+    .then(files => {
+        files.forEach(path => {
+            if (path.endsWith('/')) {
+                console.log('目录:', path);
+            } else {
+                console.log('文件:', path);
+            }
+        });
+    });
+// 列出指定目录（如 images/）内容
+const dir = "images/";
+fetch(`/list?dir=${encodeURIComponent(dir)}`)
+    .then(res => res.json())
+    .then(files => console.log(files));</code></pre>
+    </div>
+    <!-- 下载文件 -->
+    <div style="background: white; border-radius: 16px; padding: 1rem; margin-bottom: 1.5rem; border-left: 4px solid #3b82f6;">
+        <h4 style="margin: 0 0 0.5rem 0; color: #0f172a;">📥 下载文件</h4>
+        <p><code>GET /file/&lt;filename&gt;</code></p>
+        <p><strong>路径参数：</strong></p>
+        <ul style="margin-left: 1.5rem; margin-bottom: 0.5rem;">
+            <li><code>filename</code> - 文件的完整路径（可包含目录），例如 <code>"images/avatar.png"</code>。</li>
+        </ul>
+        <p><strong>成功响应：</strong> 文件内容（作为附件下载）。</p>
+        <p><strong>失败响应：</strong> <code>{"error": "错误信息"}</code> (HTTP 4xx/5xx)</p>
+        <pre style="background: #000000; color: white; padding: 1rem; border-radius: 12px; overflow-x: auto; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.9rem; line-height: 1.5;"><code>// 触发浏览器下载
+const filename = "images/avatar.png";
+window.location.href = `/file/${encodeURIComponent(filename)}`;
+// 或者用 fetch 获取文件 Blob
+fetch(`/file/${encodeURIComponent(filename)}`)
+    .then(res => {
+        if (!res.ok) throw new Error('文件不存在');
+        return res.blob();
+    })
+    .then(blob => {
+        const url = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = url;
+        a.download = filename.split('/').pop(); // 提取文件名
+        a.click();
+    })
+    .catch(err => console.error('下载失败:', err.message));</code></pre>
+    </div>
+    <!-- 检查文件存在性 -->
+    <div style="background: white; border-radius: 16px; padding: 1rem; margin-bottom: 1.5rem; border-left: 4px solid #3b82f6;">
+        <h4 style="margin: 0 0 0.5rem 0; color: #0f172a;">🔍 检查文件是否存在</h4>
+        <p><code>HEAD /file/&lt;filename&gt;</code></p>
+        <p><strong>路径参数：</strong> 同下载接口的 <code>filename</code>。</p>
+        <p><strong>成功响应：</strong> HTTP 200，无响应体。</p>
+        <p><strong>失败响应：</strong> HTTP 404 并返回 JSON 错误信息。</p>
+        <pre style="background: #000000; color: white; padding: 1rem; border-radius: 12px; overflow-x: auto; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.9rem; line-height: 1.5;"><code>const filename = "config.json";
+fetch(`/file/${encodeURIComponent(filename)}`, { method: 'HEAD' })
+    .then(res => {
+        if (res.ok) {
+            console.log('文件存在');
+        } else {
+            return res.json().then(err => { throw new Error(err.error); });
+        }
+    })
+    .catch(err => console.error('检查失败:', err.message));</code></pre>
+    </div>
+    <!-- 删除文件 -->
+    <div style="background: white; border-radius: 16px; padding: 1rem; margin-bottom: 1.5rem; border-left: 4px solid #ef4444;">
+        <h4 style="margin: 0 0 0.5rem 0; color: #0f172a;">🗑️ 删除文件</h4>
+        <p><code>DELETE /delete/&lt;filename&gt;</code></p>
+        <p><strong>路径参数：</strong> 同下载接口的 <code>filename</code>。</p>
+        <p><strong>成功响应：</strong> <code>{"success": true}</code></p>
+        <p><strong>失败响应：</strong> <code>{"error": "错误信息"}</code> (HTTP 4xx/5xx)</p>
+        <pre style="background: #1e1e1e; color: white; padding: 1rem; border-radius: 12px; overflow-x: auto; font-family: 'JetBrains Mono', 'Fira Code', monospace; font-size: 0.9rem; line-height: 1.5;"><code>const filename = "temp.log";
+fetch(`/delete/${encodeURIComponent(filename)}`, { method: 'DELETE' })
+    .then(res => res.json())
+    .then(data => {
+        if (data.success) {
+            console.log('删除成功');
+        } else {
+            throw new Error(data.error);
+        }
+    })
+    .catch(err => console.error('删除失败:', err.message));</code></pre>
+    </div>
+</div>
+            </div>
+        </div>
+    </div>
+    <footer>Powered by Hugging Face Buckets · 支持多级目录导航</footer>
+</div>
+<script>
+    (function() {
+        // DOM 元素
+        const fileInput = document.getElementById('fileInput');
+        const uploadBtn = document.getElementById('uploadBtn');
+        const fileLabel = document.getElementById('fileLabel');
+        const uploadDir = document.getElementById('uploadDir');
+        const currentDir = document.getElementById('currentDir');
+        const listBtn = document.getElementById('listBtn');
+        const goUpBtn = document.getElementById('goUpBtn');
+        const logDiv = document.getElementById('log');
+        const fileListDiv = document.getElementById('fileList');
+        const apiResult = document.getElementById('apiResult');
+        const apiListBtn = document.getElementById('apiListBtn');
+        const apiListDir = document.getElementById('apiListDir');
+        const apiGetBtn = document.getElementById('apiGetBtn');
+        const apiDeleteBtn = document.getElementById('apiDeleteBtn');
+        const apiFilename = document.getElementById('apiFilename');
+        const apiDeleteFilename = document.getElementById('apiDeleteFilename');
+        const apiFileInput = document.getElementById('apiFileInput');
+        const apiUploadDir = document.getElementById('apiUploadDir');
+        const apiUploadBtn = document.getElementById('apiUploadBtn');
+        // 辅助函数：添加日志
+        function addLog(msg, isErr = false) {
+            const p = document.createElement('p');
+            const ts = new Date().toLocaleTimeString();
+            p.innerHTML = '<span class="timestamp">[' + ts + ']</span> ' + (isErr ? '❌ ' : '') + msg;
+            if (isErr) p.style.color = '#f87171';
+            logDiv.appendChild(p);
+            logDiv.scrollTop = logDiv.scrollHeight;
+        }
+        function clearLog() { logDiv.innerHTML = ''; }
+        // 显示 API 结果
+        function showApiResult(data, isError = false) {
+            if (typeof data === 'object') {
+                apiResult.textContent = JSON.stringify(data, null, 2);
+            } else {
+                apiResult.textContent = data;
+            }
+            if (isError) apiResult.style.color = '#f87171';
+            else apiResult.style.color = '#b9e6f0';
+        }
+        // 构建远程路径：目录 + 文件名
+        function buildRemotePath(dir, filename) {
+            dir = dir.trim();
+            if (!dir) return filename;
+            if (!dir.endsWith('/')) dir += '/';
+            if (dir.startsWith('/')) dir = dir.substring(1);
+            return dir + filename;
+        }
+        // 获取用于上传的文件
+        function getUploadFile() {
+            if (apiFileInput.files.length > 0) {
+                return apiFileInput.files[0];
+            } else if (fileInput.files.length > 0) {
+                return fileInput.files[0];
+            }
+            return null;
+        }
+        // 加载文件列表
+        async function loadList(dir) {
+            dir = dir || '';
+            currentDir.value = dir;  // 同步输入框
+            try {
+                fileListDiv.innerHTML = '<div class="empty-message">加载中...</div>';
+                let url = '/list';
+                if (dir) url += '?dir=' + encodeURIComponent(dir);
+                const res = await fetch(url);
+                if (!res.ok) {
+                    const err = await res.text();
+                    throw new Error(`HTTP ${res.status}: ${err}`);
+                }
+                const items = await res.json();  // 数组，每个元素是路径字符串
+                if (items.length === 0) {
+                    fileListDiv.innerHTML = '<div class="empty-message">📭 空目录</div>';
+                } else {
+                    // 根据路径是否以 / 结尾判断是目录还是文件
+                    const html = items.map(path => {
+                        const isDir = path.endsWith('/');
+                        if (isDir) {
+                            const dirName = path.slice(0, -1); // 去掉末尾斜杠，用于显示
+                            return `
+                                <div class="file-item">
+                                    <span class="directory-link" onclick="navigateTo('${path}')">
+                                        📁 ${dirName}
+                                    </span>
+                                    <!-- 目录暂不提供删除按钮，可后续扩展 -->
+                                </div>
+                            `;
+                        } else {
+                            // 文件：显示下载链接和删除按钮
+                            return `
+                                <div class="file-item">
+                                    <a href="/file/${encodeURIComponent(path)}" target="_blank" class="file-link">
+                                        📄 ${path}
+                                    </a>
+                                    <button class="button danger small" onclick="deleteFile('${path.replace(/'/g, "\\\\'")}')">删除</button>
+                                </div>
+                            `;
+                        }
+                    }).join('');
+                    fileListDiv.innerHTML = html;
+                }
+            } catch (err) {
+                fileListDiv.innerHTML = '<div class="empty-message">❌ 加载失败</div>';
+                addLog('列表加载错误: ' + err.message, true);
+            }
+        }
+        // 导航到目录
+        window.navigateTo = function(dirPath) {
+            // dirPath 以 / 结尾，例如 "subdir/"
+            const dir = dirPath; // 直接使用，loadList 会处理
+            loadList(dir);
+        };
+        // 删除文件
+        window.deleteFile = async function(filename) {
+            if (!confirm(`确定删除 ${filename} 吗？`)) return;
+            try {
+                addLog('正在删除: ' + filename);
+                const res = await fetch('/delete/' + encodeURIComponent(filename), { method: 'DELETE' });
+                const text = await res.text();
+                if (!res.ok) throw new Error(`删除失败 (${res.status}): ${text}`);
+                addLog('✅ 删除成功: ' + filename);
+                // 刷新当前目录
+                loadList(currentDir.value);
+            } catch (err) {
+                addLog(err.message, true);
+            }
+        };
+        // 返回上级目录
+        function goUp() {
+            let dir = currentDir.value.trim();
+            if (!dir) return; // 已在根目录
+            // 移除末尾的 /
+            dir = dir.endsWith('/') ? dir.slice(0, -1) : dir;
+            const parts = dir.split('/');
+            parts.pop(); // 去掉最后一级
+            const parent = parts.length ? parts.join('/') + '/' : '';
+            loadList(parent);
+        }
+        // 左侧文件选择显示
+        fileInput.addEventListener('change', function() {
+            if (fileInput.files.length > 0) {
+                fileLabel.textContent = '📄 ' + fileInput.files[0].name;
+            } else {
+                fileLabel.textContent = '📎 选择文件';
+            }
+        });
+        // 左侧上传按钮
+        uploadBtn.addEventListener('click', async () => {
+            const file = fileInput.files[0];
+            if (!file) { alert('请选择文件'); return; }
+            const dir = uploadDir.value;
+            const remotePath = buildRemotePath(dir, file.name);
+            clearLog();
+            addLog('开始上传到: ' + remotePath);
+            uploadBtn.disabled = true;
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('dir', dir);
+            try {
+                const res = await fetch('/upload', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+                addLog('✅ 上传成功！路径: ' + data.filename);
+                fileInput.value = '';
+                fileLabel.textContent = '📎 选择文件';
+                uploadDir.value = '';
+                // 上传后刷新当前目录
+                loadList(currentDir.value);
+            } catch (err) {
+                addLog('❌ ' + err.message, true);
+            } finally {
+                uploadBtn.disabled = false;
+            }
+        });
+        // 列出文件按钮
+        listBtn.addEventListener('click', () => {
+            loadList(currentDir.value.trim());
+        });
+        // 返回上级按钮
+        goUpBtn.addEventListener('click', goUp);
+        // API 测试：上传文件
+        apiUploadBtn.addEventListener('click', async () => {
+            const file = getUploadFile();
+            if (!file) {
+                alert('请选择文件（在左侧或右侧上传区域选择）');
+                return;
+            }
+            const dir = apiUploadDir.value;
+            const remotePath = buildRemotePath(dir, file.name);
+            const formData = new FormData();
+            formData.append('file', file);
+            formData.append('dir', dir);
+            try {
+                showApiResult('正在上传到 ' + remotePath + ' ...');
+                const res = await fetch('/upload', { method: 'POST', body: formData });
+                const data = await res.json();
+                if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+                showApiResult(data);
+                loadList(currentDir.value);
+            } catch (err) {
+                showApiResult(err.message, true);
+            }
+        });
+        // API 测试：列出文件
+        apiListBtn.addEventListener('click', async () => {
+            const dir = apiListDir.value.trim();
+            try {
+                showApiResult('正在请求 /list?dir=' + dir + ' ...');
+                let url = '/list';
+                if (dir) url += '?dir=' + encodeURIComponent(dir);
+                const res = await fetch(url);
+                const data = await res.json();
+                if (!res.ok) throw new Error(data.error || `HTTP ${res.status}`);
+                showApiResult(data);
+                // 同时更新左侧浏览目录为相同目录并刷新
+                loadList(dir);
+            } catch (err) {
+                showApiResult(err.message, true);
+            }
+        });
+        // API 测试：获取文件信息
+        apiGetBtn.addEventListener('click', async () => {
+            const filename = apiFilename.value.trim();
+            if (!filename) { alert('请输入文件名'); return; }
+            try {
+                showApiResult('正在检查 /file/' + filename + ' ...');
+                const res = await fetch('/file/' + encodeURIComponent(filename), { method: 'HEAD' });
+                if (res.ok) {
+                    showApiResult({ status: 'OK', message: '文件存在，可下载' });
+                } else {
+                    const text = await res.text();
+                    throw new Error(`HTTP ${res.status}: ${text}`);
+                }
+            } catch (err) {
+                showApiResult(err.message, true);
+            }
+        });
+        // API 测试：删除文件
+        apiDeleteBtn.addEventListener('click', async () => {
+            const filename = apiDeleteFilename.value.trim();
+            if (!filename) { alert('请输入文件名'); return; }
+            if (!confirm(`确定通过 API 删除 ${filename} 吗？`)) return;
+            try {
+                showApiResult('正在删除 ' + filename + ' ...');
+                const res = await fetch('/delete/' + encodeURIComponent(filename), { method: 'DELETE' });
+                const text = await res.text();
+                if (!res.ok) throw new Error(`HTTP ${res.status}: ${text}`);
+                showApiResult({ success: true, message: '文件已删除' });
+                loadList(currentDir.value);
+            } catch (err) {
+                showApiResult(err.message, true);
+            }
+        });
+        // 初始化：加载根目录
+        loadList('');
+    })();
+</script>
 </body>
 </html>"""