Spaces:

chb2026
/

image

Paused

App Files Files Community

chb2026 commited on Feb 23, 2025

Commit

22a0edd

verified ·

1 Parent(s): 70dd7dc

Update templates/index.html

Browse files

Files changed (1) hide show

templates/index.html +26 -78

templates/index.html CHANGED Viewed

@@ -1,12 +1,12 @@
 <!DOCTYPE html>
-<html lang="zh-CN">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>HF-PicBed - 图片上传服务</title>
     <style>
         body {
-            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             min-height: 100vh;
             margin: 0;
@@ -16,31 +16,28 @@
             padding: 20px;
         }
         .container {
-            background-color: rgba(255, 255, 255, 0.95);
-            border-radius: 12px;
             padding: 2rem;
-            box-shadow: 0 8px 30px rgba(0, 0, 0, 0.12);
             text-align: center;
             max-width: 500px;
             width: 100%;
         }
         h1 {
-            color: #1a202c;
-            margin-bottom: 1.5rem;
-            font-size: 1.875rem;
         }
         #drop-area {
             border: 2px dashed #4a5568;
-            border-radius: 12px;
             padding: 2rem;
-            margin-bottom: 1.5rem;
             cursor: pointer;
-            transition: all 0.3s ease;
-            background-color: rgba(74, 85, 104, 0.05);
         }
-        #drop-area:hover, #drop-area.drag-active {
             background-color: rgba(74, 85, 104, 0.1);
-            border-color: #2d3748;
         }
         #file-input {
             display: none;
@@ -49,49 +46,23 @@
             background-color: #4a5568;
             color: white;
             border: none;
-            padding: 0.75rem 1.5rem;
-            border-radius: 8px;
             cursor: pointer;
-            transition: all 0.3s ease;
-            font-size: 1rem;
-            font-weight: 500;
         }
         #upload-btn:hover {
             background-color: #2d3748;
-            transform: translateY(-1px);
-        }
-        #upload-btn:disabled {
-            background-color: #a0aec0;
-            cursor: not-allowed;
-            transform: none;
         }
         #result {
-            margin-top: 1.5rem;
             word-break: break-all;
-            color: #2d3748;
         }
         #preview {
             max-width: 100%;
             max-height: 300px;
-            margin: 1rem 0;
-            border-radius: 8px;
             display: none;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-        }
-        .success {
-            color: #2f855a;
-        }
-        .error {
-            color: #c53030;
-        }
-        a {
-            color: #4c51bf;
-            text-decoration: none;
-            transition: color 0.3s ease;
-        }
-        a:hover {
-            color: #434190;
-            text-decoration: underline;
         }
     </style>
 </head>
@@ -102,7 +73,7 @@
             <p>拖放图片到这里或点击选择文件</p>
             <input type="file" id="file-input" accept="image/*">
         </div>
-        <img id="preview" alt="图片预览" />
         <button id="upload-btn" disabled>上传图片</button>
         <div id="result"></div>
     </div>
@@ -114,13 +85,10 @@
         const result = document.getElementById('result');
         const preview = document.getElementById('preview');
-        // 点击上传区域触发文件选择
         dropArea.addEventListener('click', () => fileInput.click());
-        // 阻止默认拖放行为
         ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
             dropArea.addEventListener(eventName, preventDefaults, false);
-            document.body.addEventListener(eventName, preventDefaults, false);
         });
         function preventDefaults(e) {
@@ -128,7 +96,6 @@
             e.stopPropagation();
         }
-        // 拖放视觉反馈
         ['dragenter', 'dragover'].forEach(eventName => {
             dropArea.addEventListener(eventName, highlight, false);
         });
@@ -138,14 +105,13 @@
         });
         function highlight() {
-            dropArea.classList.add('drag-active');
         }
         function unhighlight() {
-            dropArea.classList.remove('drag-active');
         }
-        // 处理文件拖放
         dropArea.addEventListener('drop', handleDrop, false);
         function handleDrop(e) {
@@ -154,7 +120,6 @@
             handleFiles(files);
         }
-        // 处理文件选择
         fileInput.addEventListener('change', function() {
             handleFiles(this.files);
         });
@@ -162,17 +127,11 @@
         function handleFiles(files) {
             if (files.length > 0) {
                 const file = files[0];
-                if (file.type.startsWith('image/')) {
-                    previewFile(file);
-                    uploadBtn.disabled = false;
-                } else {
-                    alert('请选择图片文件');
-                    uploadBtn.disabled = true;
-                }
             }
         }
-        // 预览选择的图片
         function previewFile(file) {
             const reader = new FileReader();
             reader.readAsDataURL(file);
@@ -182,7 +141,6 @@
             }
         }
-        // 上传文件
         uploadBtn.addEventListener('click', uploadFile);
         function uploadFile() {
@@ -197,31 +155,21 @@
             uploadBtn.disabled = true;
             uploadBtn.textContent = '上传中...';
-            result.innerHTML = '';
             fetch('/api/1/upload', {
                 method: 'POST',
                 body: formData
             })
-            .then(response => {
-                if (!response.ok) {
-                    throw new Error(`HTTP error! status: ${response.status}`);
-                }
-                return response.json();
-            })
             .then(data => {
                 if (data.status_code === 200) {
-                    result.innerHTML = `
-                        <p class="success">上传成功！</p>
-                        <p><a href="${data.image.url}" target="_blank">查看图片</a></p>
-                        <p>图片URL: <br>${data.image.url}</p>
-                    `;
                 } else {
-                    throw new Error(data.error?.message || '上传失败');
                 }
             })
             .catch(error => {
-                result.innerHTML = `<p class="error">上传失败: ${error.message}</p>`;
             })
             .finally(() => {
                 uploadBtn.disabled = false;

 <!DOCTYPE html>
+<html lang="en">
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>HF-PicBed - Beautiful Image Upload</title>
     <style>
         body {
+            font-family: Arial, sans-serif;
             background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
             min-height: 100vh;
             margin: 0;
             padding: 20px;
         }
         .container {
+            background-color: rgba(255, 255, 255, 0.9);
+            border-radius: 10px;
             padding: 2rem;
+            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
             text-align: center;
             max-width: 500px;
             width: 100%;
         }
         h1 {
+            color: #4a5568;
+            margin-bottom: 1rem;
         }
         #drop-area {
             border: 2px dashed #4a5568;
+            border-radius: 10px;
             padding: 2rem;
+            margin-bottom: 1rem;
             cursor: pointer;
+            transition: background-color 0.3s ease;
         }
+        #drop-area:hover {
             background-color: rgba(74, 85, 104, 0.1);
         }
         #file-input {
             display: none;
             background-color: #4a5568;
             color: white;
             border: none;
+            padding: 0.5rem 1rem;
+            border-radius: 5px;
             cursor: pointer;
+            transition: background-color 0.3s ease;
         }
         #upload-btn:hover {
             background-color: #2d3748;
         }
         #result {
+            margin-top: 1rem;
             word-break: break-all;
         }
         #preview {
             max-width: 100%;
             max-height: 300px;
+            margin-top: 1rem;
             display: none;
         }
     </style>
 </head>
             <p>拖放图片到这里或点击选择文件</p>
             <input type="file" id="file-input" accept="image/*">
         </div>
+        <img id="preview" alt="Image preview" />
         <button id="upload-btn" disabled>上传图片</button>
         <div id="result"></div>
     </div>
         const result = document.getElementById('result');
         const preview = document.getElementById('preview');
         dropArea.addEventListener('click', () => fileInput.click());
         ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
             dropArea.addEventListener(eventName, preventDefaults, false);
         });
         function preventDefaults(e) {
             e.stopPropagation();
         }
         ['dragenter', 'dragover'].forEach(eventName => {
             dropArea.addEventListener(eventName, highlight, false);
         });
         });
         function highlight() {
+            dropArea.style.backgroundColor = 'rgba(74, 85, 104, 0.1)';
         }
         function unhighlight() {
+            dropArea.style.backgroundColor = 'transparent';
         }
         dropArea.addEventListener('drop', handleDrop, false);
         function handleDrop(e) {
             handleFiles(files);
         }
         fileInput.addEventListener('change', function() {
             handleFiles(this.files);
         });
         function handleFiles(files) {
             if (files.length > 0) {
                 const file = files[0];
+                previewFile(file);
+                uploadBtn.disabled = false;
             }
         }
         function previewFile(file) {
             const reader = new FileReader();
             reader.readAsDataURL(file);
             }
         }
         uploadBtn.addEventListener('click', uploadFile);
         function uploadFile() {
             uploadBtn.disabled = true;
             uploadBtn.textContent = '上传中...';
             fetch('/api/1/upload', {
                 method: 'POST',
                 body: formData
             })
+            .then(response => response.json())
             .then(data => {
                 if (data.status_code === 200) {
+                    result.innerHTML = `<p>上传成功！</p><a href="${data.image.url}" target="_blank">查看图片</a>`;
                 } else {
+                    result.textContent = `上传失败: ${data.error.message}`;
                 }
             })
             .catch(error => {
+                result.textContent = `上传出错: ${error.message}`;
             })
             .finally(() => {
                 uploadBtn.disabled = false;