Hugging Face's logo

Spaces:
chb2026
/
image
Paused

App Files Community
chb2026 commited on
Commit
8063f93
·
verified ·
1 Parent(s): 60e3c7f

Create templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +153 -0
templates/index.html ADDED
@@ -0,0 +1,153 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>HF-PicBed - Beautiful Image Upload</title>
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
11
+ height: 100vh;
12
+ margin: 0;
13
+ display: flex;
14
+ justify-content: center;
15
+ align-items: center;
16
+ }
17
+ .container {
18
+ background-color: rgba(255, 255, 255, 0.9);
19
+ border-radius: 10px;
20
+ padding: 2rem;
21
+ box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
22
+ text-align: center;
23
+ }
24
+ h1 {
25
+ color: #4a5568;
26
+ margin-bottom: 1rem;
27
+ }
28
+ #drop-area {
29
+ border: 2px dashed #4a5568;
30
+ border-radius: 10px;
31
+ padding: 2rem;
32
+ margin-bottom: 1rem;
33
+ cursor: pointer;
34
+ transition: background-color 0.3s ease;
35
+ }
36
+ #drop-area:hover {
37
+ background-color: rgba(74, 85, 104, 0.1);
38
+ }
39
+ #file-input {
40
+ display: none;
41
+ }
42
+ #upload-btn {
43
+ background-color: #4a5568;
44
+ color: white;
45
+ border: none;
46
+ padding: 0.5rem 1rem;
47
+ border-radius: 5px;
48
+ cursor: pointer;
49
+ transition: background-color 0.3s ease;
50
+ }
51
+ #upload-btn:hover {
52
+ background-color: #2d3748;
53
+ }
54
+ #result {
55
+ margin-top: 1rem;
56
+ word-break: break-all;
57
+ }
58
+ </style>
59
+ </head>
60
+ <body>
61
+ <div class="container">
62
+ <h1>HF-PicBed</h1>
63
+ <div id="drop-area">
64
+ <p>拖放图片到这里或点击选择文件</p>
65
+ <input type="file" id="file-input" accept="image/*">
66
+ </div>
67
+ <button id="upload-btn">上传图片</button>
68
+ <div id="result"></div>
69
+ </div>
70
+
71
+ <script>
72
+ const dropArea = document.getElementById('drop-area');
73
+ const fileInput = document.getElementById('file-input');
74
+ const uploadBtn = document.getElementById('upload-btn');
75
+ const result = document.getElementById('result');
76
+
77
+ dropArea.addEventListener('click', () => fileInput.click());
78
+
79
+ ['dragenter', 'dragover', 'dragleave', 'drop'].forEach(eventName => {
80
+ dropArea.addEventListener(eventName, preventDefaults, false);
81
+ });
82
+
83
+ function preventDefaults(e) {
84
+ e.preventDefault();
85
+ e.stopPropagation();
86
+ }
87
+
88
+ ['dragenter', 'dragover'].forEach(eventName => {
89
+ dropArea.addEventListener(eventName, highlight, false);
90
+ });
91
+
92
+ ['dragleave', 'drop'].forEach(eventName => {
93
+ dropArea.addEventListener(eventName, unhighlight, false);
94
+ });
95
+
96
+ function highlight() {
97
+ dropArea.style.backgroundColor = 'rgba(74, 85, 104, 0.1)';
98
+ }
99
+
100
+ function unhighlight() {
101
+ dropArea.style.backgroundColor = 'transparent';
102
+ }
103
+
104
+ dropArea.addEventListener('drop', handleDrop, false);
105
+
106
+ function handleDrop(e) {
107
+ const dt = e.dataTransfer;
108
+ const files = dt.files;
109
+ handleFiles(files);
110
+ }
111
+
112
+ fileInput.addEventListener('change', function() {
113
+ handleFiles(this.files);
114
+ });
115
+
116
+ function handleFiles(files) {
117
+ if (files.length > 0) {
118
+ uploadBtn.disabled = false;
119
+ }
120
+ }
121
+
122
+ uploadBtn.addEventListener('click', uploadFile);
123
+
124
+ function uploadFile() {
125
+ const file = fileInput.files[0];
126
+ if (!file) {
127
+ alert('请选择一个文件');
128
+ return;
129
+ }
130
+
131
+ const formData = new FormData();
132
+ formData.append('source', file);
133
+
134
+ fetch('/api/1/upload', {
135
+ method: 'POST',
136
+ body: formData
137
+ })
138
+ .then(response => response.json())
139
+ .then(data => {
140
+ if (data.status_code === 200) {
141
+ result.innerHTML = `<p>上传成功！</p><img src="${data.image.url}" alt="Uploaded Image" style="max-width: 100%; max-height: 300px;">`;
142
+ } else {
143
+ result.textContent = `上传失败: ${data.error.message}`;
144
+ }
145
+ })
146
+ .catch(error => {
147
+ result.textContent = `上传出错: ${error.message}`;
148
+ });
149
+ }
150
+ </script>
151
+ </body>
152
+ </html>
153
+