Upload static/deepseek_html_20260921_60b93d.html

static/deepseek_html_20260921_60b93d.html

@@ -0,0 +1,307 @@
+<!DOCTYPE html>
+<html lang="zh-CN">
+<head>
+  <meta charset="UTF-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <title>HF 存储桶极速上传下载</title>
+  <style>
+    * { box-sizing: border-box; margin: 0; padding: 0; }
+    body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; background: #0d1117; color: #c9d1d9; min-height: 100vh; display: flex; justify-content: center; padding: 30px 20px; }
+    .container { max-width: 680px; width: 100%; }
+    h1 { font-size: 1.4rem; margin-bottom: 6px; color: #f0f6fc; }
+    .subtitle { font-size: 0.85rem; color: #8b949e; margin-bottom: 20px; }
+    .card { background: #161b22; border: 1px solid #30363d; border-radius: 10px; padding: 20px; margin-bottom: 16px; }
+    .card h2 { font-size: 0.95rem; margin-bottom: 14px; color: #f0f6fc; border-bottom: 1px solid #21262d; padding-bottom: 8px; }
+    .field { margin-bottom: 12px; }
+    label { display: block; font-size: 0.78rem; color: #8b949e; margin-bottom: 4px; }
+    input[type="text"], input[type="password"] { width: 100%; padding: 8px 12px; background: #0d1117; border: 1px solid #30363d; border-radius: 6px; color: #c9d1d9; font-size: 0.85rem; outline: none; }
+    input:focus { border-color: #58a6ff; }
+    button { padding: 8px 16px; background: #238636; color: #fff; border: none; border-radius: 6px; font-size: 0.85rem; cursor: pointer; transition: background 0.2s; }
+    button:hover { background: #2ea043; }
+    button:disabled { background: #21262d; color: #484f58; cursor: not-allowed; }
+    button.secondary { background: #21262d; border: 1px solid #30363d; }
+    button.secondary:hover { background: #30363d; }
+    .row { display: flex; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
+    .row .field { flex: 1; margin-bottom: 0; }
+    .status { margin-top: 10px; padding: 8px 12px; border-radius: 6px; font-size: 0.8rem; display: none; word-break: break-all; }
+    .status.success { display: block; background: #0d2818; border: 1px solid #238636; color: #3fb950; }
+    .status.error { display: block; background: #2d0f0f; border: 1px solid #f85149; color: #f85149; }
+    .status.info { display: block; background: #0d1f2d; border: 1px solid #1f6feb; color: #58a6ff; }
+    .file-list { list-style: none; margin-top: 10px; max-height: 250px; overflow-y: auto; }
+    .file-list li { display: flex; justify-content: space-between; align-items: center; padding: 6px 8px; border-bottom: 1px solid #21262d; font-size: 0.8rem; }
+    .file-list li:last-child { border-bottom: none; }
+    .file-list button { padding: 3px 10px; font-size: 0.75rem; }
+    .warning { background: #2d1f00; border: 1px solid #9e6a03; border-radius: 6px; padding: 10px 14px; font-size: 0.78rem; color: #d29922; margin-bottom: 16px; line-height: 1.4; }
+  </style>
+</head>
+<body>
+  <div class="container">
+    <h1>🚀 Hugging Face 存储桶极速工具</h1>
+    <p class="subtitle">本地双击直接运行 · 无需 HTTP 服务器</p>
+
+    <div class="warning">
+      ⚠️ <strong>安全提示：</strong>你的密钥已预填在页面中，<strong>绝对不要将此 HTML 文件发给别人或上传到公网！</strong>仅供本地个人使用。
+    </div>
+
+    <!-- 配置卡片 -->
+    <div class="card">
+      <h2>🔑 连接配置</h2>
+      <button id="loadBtn" class="secondary" style="margin-bottom: 14px; width: 100%;">⚡ 一键加载你的密钥（已预填）</button>
+      <div class="field">
+        <label>AWS_ACCESS_KEY_ID</label>
+        <input type="text" id="accessKey" />
+      </div>
+      <div class="field">
+        <label>AWS_SECRET_ACCESS_KEY</label>
+        <input type="password" id="secretKey" />
+      </div>
+      <div class="field">
+        <label>端点 URL（Endpoint）</label>
+        <input type="text" id="endpoint" />
+      </div>
+      <div class="field">
+        <label>存储桶名称（Bucket，包含命名空间）</label>
+        <input type="text" id="bucketName" />
+      </div>
+      <button id="connectBtn" class="secondary" style="width: 100%;">🔗 初始化连接</button>
+      <div id="connectStatus" class="status"></div>
+    </div>
+
+    <!-- 上传卡片 -->
+    <div class="card">
+      <h2>📤 上传文件</h2>
+      <div class="field">
+        <input type="file" id="fileInput" multiple />
+      </div>
+      <button id="uploadBtn" disabled style="width: 100%;">上传到存储桶</button>
+      <div id="uploadStatus" class="status"></div>
+    </div>
+
+    <!-- 下载与列表卡片 -->
+    <div class="card">
+      <h2>📥 下载文件 / 文件列表</h2>
+      <div class="row">
+        <div class="field">
+          <label>文件路径（如 test.txt）</label>
+          <input type="text" id="downloadPath" placeholder="test.txt" />
+        </div>
+        <button id="downloadBtn" disabled>下载</button>
+      </div>
+      <div id="downloadStatus" class="status"></div>
+      <button id="listBtn" class="secondary" style="margin-top: 10px; width: 100%;" disabled>📋 列出存储桶中的所有文件</button>
+      <ul class="file-list" id="fileList"></ul>
+    </div>
+  </div>
+
+  <!-- 引入轻量级 AWS S3 签名库（更换了国内更稳定的 CDN） -->
+  <script src="https://unpkg.com/aws4fetch@1.0.20/dist/aws4fetch.min.js"></script>
+
+  <script>
+    // ── DOM 引用 ──
+    const loadBtn = document.getElementById('loadBtn');
+    const accessKeyInput = document.getElementById('accessKey');
+    const secretKeyInput = document.getElementById('secretKey');
+    const endpointInput = document.getElementById('endpoint');
+    const bucketInput = document.getElementById('bucketName');
+    const connectBtn = document.getElementById('connectBtn');
+    const connectStatus = document.getElementById('connectStatus');
+    
+    const fileInput = document.getElementById('fileInput');
+    const uploadBtn = document.getElementById('uploadBtn');
+    const uploadStatus = document.getElementById('uploadStatus');
+    
+    const downloadPath = document.getElementById('downloadPath');
+    const downloadBtn = document.getElementById('downloadBtn');
+    const downloadStatus = document.getElementById('downloadStatus');
+    
+    const listBtn = document.getElementById('listBtn');
+    const fileList = document.getElementById('fileList');
+
+    let awsClient = null;
+    let currentBucket = '';
+    let currentEndpoint = '';
+
+    // ── 工具函数 ──
+    function showStatus(el, msg, type = 'info') {
+      el.textContent = msg;
+      el.className = `status ${type}`;
+    }
+    function setButtonsEnabled(enabled) {
+      uploadBtn.disabled = !enabled;
+      downloadBtn.disabled = !enabled;
+      listBtn.disabled = !enabled;
+    }
+
+    // ── 一键加载预填密钥 ──
+    loadBtn.addEventListener('click', () => {
+      accessKeyInput.value = 'HFAK0z5hUE3yQ7h0lPHMMF4gITYxkMP';
+      secretKeyInput.value = '5a4d39a13b8fff06128fb4fa64c24258b1081b1437075ae16311de9f884b8271'; 
+      endpointInput.value = 'https://s3.hf.co';
+      bucketInput.value = 'WACATW/pan-storage';
+      showStatus(connectStatus, '✅ 密钥已全部加载！请点击“初始化连接”。', 'success');
+    });
+
+    // ── 初始化 S3 客户端 ──
+    connectBtn.addEventListener('click', () => {
+      const accessKey = accessKeyInput.value.trim();
+      const secretKey = secretKeyInput.value.trim();
+      let endpoint = endpointInput.value.trim();
+      const bucket = bucketInput.value.trim();
+
+      if (!accessKey || !secretKey || !endpoint || !bucket) {
+        showStatus(connectStatus, '请确保所有字段都已填写', 'error');
+        return;
+      }
+
+      // 检查 CDN 是否加载成功
+      if (typeof AwsClient === 'undefined') {
+        showStatus(connectStatus, '❌ 依赖库加载失败！请检查网络是否能访问 unpkg.com，或按下方说明下载本地库。', 'error');
+        return;
+      }
+
+      // 标准化端点 URL（去掉末尾斜杠）
+      endpoint = endpoint.replace(/\/+$/, '');
+      currentEndpoint = endpoint;
+      
+      try {
+        awsClient = new AwsClient({
+          accessKeyId: accessKey,
+          secretAccessKey: secretKey,
+          service: 's3',
+          region: 'us-east-1'
+        });
+        currentBucket = bucket;
+        
+        showStatus(connectStatus, `✅ 客户端初始化成功！存储桶: ${bucket}`, 'success');
+        setButtonsEnabled(true);
+      } catch (err) {
+        console.error(err);
+        showStatus(connectStatus, '❌ 初始化失败：' + err.message, 'error');
+        setButtonsEnabled(false);
+      }
+    });
+
+    // 组装完整的 URL
+    function buildUrl(path = '') {
+      let url = `${currentEndpoint}/${currentBucket}`;
+      if (path) url += `/${path}`;
+      return url;
+    }
+
+    // ── 上传文件 ──
+    uploadBtn.addEventListener('click', async () => {
+      const files = fileInput.files;
+      if (!files || files.length === 0) {
+        showStatus(uploadStatus, '请先选择文件', 'error');
+        return;
+      }
+      if (!awsClient) return;
+
+      uploadBtn.disabled = true;
+      let successCount = 0;
+      
+      for (let i = 0; i < files.length; i++) {
+        const file = files[i];
+        showStatus(uploadStatus, `正在上传 (${i+1}/${files.length}): ${file.name}...`, 'info');
+        try {
+          const response = await awsClient.fetch(buildUrl(file.name), {
+            method: 'PUT',
+            body: file
+          });
+          if (!response.ok) throw new Error(`HTTP ${response.status}`);
+          successCount++;
+        } catch (err) {
+          console.error(err);
+          showStatus(uploadStatus, `❌ 上传 ${file.name} 失败: ${err.message}`, 'error');
+          uploadBtn.disabled = false;
+          return;
+        }
+      }
+      
+      showStatus(uploadStatus, `✅ 成功上传 ${successCount} 个文件`, 'success');
+      fileInput.value = '';
+      uploadBtn.disabled = false;
+    });
+
+    // ── 下载文件 ──
+    downloadBtn.addEventListener('click', async () => {
+      const path = downloadPath.value.trim();
+      if (!path) {
+        showStatus(downloadStatus, '请输入文件路径', 'error');
+        return;
+      }
+      if (!awsClient) return;
+
+      downloadBtn.disabled = true;
+      showStatus(downloadStatus, `正在下载 ${path}...`, 'info');
+
+      try {
+        const response = await awsClient.fetch(buildUrl(path));
+        
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        
+        const blob = await response.blob();
+        const urlObj = URL.createObjectURL(blob);
+        const a = document.createElement('a');
+        a.href = urlObj;
+        a.download = path.split('/').pop();
+        document.body.appendChild(a);
+        a.click();
+        document.body.removeChild(a);
+        URL.revokeObjectURL(urlObj);
+        
+        showStatus(downloadStatus, `✅ 已下载 ${path}`, 'success');
+      } catch (err) {
+        console.error(err);
+        showStatus(downloadStatus, `❌ 下载失败: ${err.message}`, 'error');
+      } finally {
+        downloadBtn.disabled = false;
+      }
+    });
+
+    // ── 列出文件 ──
+    listBtn.addEventListener('click', async () => {
+      if (!awsClient) return;
+      listBtn.disabled = true;
+      fileList.innerHTML = '';
+      showStatus(downloadStatus, '正在获取文件列表...', 'info');
+
+      try {
+        const response = await awsClient.fetch(buildUrl() + '?list-type=2');
+        
+        if (!response.ok) throw new Error(`HTTP ${response.status}`);
+        
+        const text = await response.text();
+        const parser = new DOMParser();
+        const xmlDoc = parser.parseFromString(text, 'text/xml');
+        const contents = xmlDoc.getElementsByTagName('Contents');
+
+        if (contents.length === 0) {
+          fileList.innerHTML = '<li style="color:#8b949e;">存储桶为空</li>';
+        } else {
+          for (let i = 0; i < contents.length; i++) {
+            const key = contents[i].getElementsByTagName('Key')[0]?.textContent || '未知文件';
+            const li = document.createElement('li');
+            li.innerHTML = `<span>${key}</span>`;
+            const btn = document.createElement('button');
+            btn.textContent = '⬇️';
+            btn.title = '下载此文件';
+            btn.addEventListener('click', () => {
+              downloadPath.value = key;
+              downloadBtn.click();
+            });
+            li.appendChild(btn);
+            fileList.appendChild(li);
+          }
+        }
+        showStatus(downloadStatus, `✅ 共 ${contents.length} 个文件`, 'success');
+      } catch (err) {
+        console.error(err);
+        showStatus(downloadStatus, `❌ 获取列表失败: ${err.message}`, 'error');
+      } finally {
+        listBtn.disabled = false;
+      }
+    });
+  </script>
+</body>
+</html>