Hugging Face's logo

Spaces:
albumup
/
file
Sleeping

App Files Community
albumup commited on
Commit
e401e54
·
verified ·
1 Parent(s): 1b459b7

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +137 -57
app.py CHANGED
@@ -66,7 +66,7 @@ def is_allowed_file_type(filename):
66
 
67
  @app.get("/", response_class=HTMLResponse)
68
  async def index():
69
- return """
70
  <!DOCTYPE html>
71
  <html lang="en">
72
  <head>
@@ -74,76 +74,156 @@ async def index():
74
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
75
  <title>File Upload</title>
76
  <style>
77
- .progress-bar {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
78
  width: 100%;
79
- background-color: #f3f3f3;
80
  border-radius: 5px;
81
- margin-top: 10px;
82
- }
83
- .progress-bar-inner {
84
  width: 0%;
85
- height: 30px;
86
- background-color: #4caf50;
87
- border-radius: 5px;
88
- text-align: center;
89
- line-height: 30px;
90
- color: white;
91
  transition: width 0.3s ease;
92
- }
93
- .button {
 
 
 
 
 
94
  display: inline-block;
95
  padding: 10px 20px;
96
  background-color: #007bff;
97
- color: white;
98
  text-decoration: none;
99
  border-radius: 5px;
100
- margin: 5px;
101
- }
102
- .button:hover {
 
103
  background-color: #0056b3;
104
- }
105
- .private-checkbox {
106
- margin: 10px 0;
107
- }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
108
  </style>
109
  </head>
110
  <body>
111
- <h1>File Upload & Album Management</h1>
112
- <form action="/album/create" method="post" enctype="multipart/form-data" onsubmit="showProgressBar()">
113
- <input type="text" name="album_name" placeholder="Album Name" required><br><br>
114
- <input type="file" name="files" accept="*/*" multiple required><br><br>
115
- <label class="private-checkbox">
116
- <input type="checkbox" name="is_private"> Make this album private (exclude from search)
117
- </label><br><br>
118
- <div class="progress-bar">
119
- <div class="progress-bar-inner" id="progressBar">0%</div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
120
  </div>
121
- <button type="submit">Create Album</button>
122
- </form>
123
- <h2>Single File Upload</h2>
124
- <a href="https://albumup-up1.hf.space/" class="button">Upload Single File</a>
125
- <h2>Search Albums</h2>
126
- <form action="/search" method="get">
127
- <input type="text" name="query" placeholder="Search by album name..." required>
128
- <button type="submit">Search</button>
129
- </form>
130
- <script>
131
- function showProgressBar() {
132
- const progressBar = document.getElementById('progressBar');
133
- progressBar.style.width = '0%';
134
- progressBar.textContent = '0%';
135
- const interval = setInterval(() => {
136
- const width = parseFloat(progressBar.style.width);
137
- if (width < 90) {
138
- const newWidth = width + 1;
139
- progressBar.style.width = newWidth + '%';
140
- progressBar.textContent = Math.round(newWidth) + '%';
141
- } else {
142
- clearInterval(interval);
143
- }
144
- }, 30); // Update every 30ms for smoother progress
145
- }
146
- </script>
147
  </body>
148
  </html>
149
  """
 
66
 
67
  @app.get("/", response_class=HTMLResponse)
68
  async def index():
69
+ return f"""
70
  <!DOCTYPE html>
71
  <html lang="en">
72
  <head>
 
74
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
75
  <title>File Upload</title>
76
  <style>
77
+ body {{
78
+ background-color: #121212;
79
+ color: #e0e0e0;
80
+ font-family: 'Helvetica Neue', Arial, sans-serif;
81
+ margin: 0;
82
+ padding: 0;
83
+ }}
84
+ .container {{
85
+ max-width: 800px;
86
+ margin: 0 auto;
87
+ padding: 20px;
88
+ }}
89
+ h1 {{
90
+ text-align: center;
91
+ color: #fff;
92
+ }}
93
+ form {{
94
+ display: flex;
95
+ flex-direction: column;
96
+ align-items: center;
97
+ }}
98
+ input, button {{
99
+ margin: 10px 0;
100
+ padding: 10px;
101
+ border: none;
102
+ border-radius: 5px;
103
+ font-size: 16px;
104
+ outline: none;
105
+ }}
106
+ input[type="text"], input[type="file"] {{
107
+ background-color: #222;
108
+ color: #e0e0e0;
109
+ }}
110
+ input[type="checkbox"] {{
111
+ margin-right: 5px;
112
+ }}
113
+ button {{
114
+ background-color: #007bff;
115
+ color: #fff;
116
+ cursor: pointer;
117
+ transition: background-color 0.3s ease;
118
+ }}
119
+ button:hover {{
120
+ background-color: #0056b3;
121
+ }}
122
+ .progress-bar {{
123
  width: 100%;
124
+ background-color: #333;
125
  border-radius: 5px;
126
+ overflow: hidden;
127
+ }}
128
+ .progress-bar-inner {{
129
  width: 0%;
130
+ height: 20px;
131
+ background-color: #007bff;
 
 
 
 
132
  transition: width 0.3s ease;
133
+ }}
134
+ .private-checkbox {{
135
+ display: flex;
136
+ align-items: center;
137
+ margin: 20px 0;
138
+ }}
139
+ .button {{
140
  display: inline-block;
141
  padding: 10px 20px;
142
  background-color: #007bff;
143
+ color: #fff;
144
  text-decoration: none;
145
  border-radius: 5px;
146
+ margin: 10px;
147
+ transition: background-color 0.3s ease;
148
+ }}
149
+ .button:hover {{
150
  background-color: #0056b3;
151
+ }}
152
+ .search-form {{
153
+ display: flex;
154
+ margin-top: 20px;
155
+ }}
156
+ .search-form input {{
157
+ flex: 1;
158
+ margin-right: 10px;
159
+ }}
160
+ .search-results {{
161
+ margin-top: 20px;
162
+ }}
163
+ .album-item {{
164
+ background-color: #222;
165
+ padding: 20px;
166
+ border-radius: 5px;
167
+ margin-bottom: 20px;
168
+ }}
169
+ .album-item h3 {{
170
+ color: #fff;
171
+ margin: 0;
172
+ }}
173
+ .album-item p {{
174
+ color: #888;
175
+ margin: 5px 0;
176
+ }}
177
+ @media (max-width: 600px) {{
178
+ .container {{
179
+ padding: 10px;
180
+ }}
181
+ input, button {{
182
+ font-size: 14px;
183
+ }}
184
+ }}
185
  </style>
186
  </head>
187
  <body>
188
+ <div class="container">
189
+ <h1>File Upload & Album Management</h1>
190
+ <form action="/album/create" method="post" enctype="multipart/form-data" onsubmit="showProgressBar()">
191
+ <input type="text" name="album_name" placeholder="Album Name" required>
192
+ <input type="file" name="files" accept="*/*" multiple required>
193
+ <div class="private-checkbox">
194
+ <input type="checkbox" name="is_private">
195
+ <label>Make this album private (exclude from search)</label>
196
+ </div>
197
+ <div class="progress-bar">
198
+ <div class="progress-bar-inner" id="progressBar"></div>
199
+ </div>
200
+ <button type="submit">Create Album</button>
201
+ </form>
202
+ <h2>Single File Upload</h2>
203
+ <a href="https://albumup-up1.hf.space/" class="button">Upload Single File</a>
204
+ <h2>Search Albums</h2>
205
+ <form class="search-form" action="/search" method="get">
206
+ <input type="text" name="query" placeholder="Search by album name...">
207
+ <button type="submit">Search</button>
208
+ </form>
209
+ <div class="search-results">
210
+ <!-- Search results will be displayed here -->
211
  </div>
212
+ <script>
213
+ function showProgressBar() {{
214
+ const progressBar = document.getElementById('progressBar');
215
+ let width = 0;
216
+ const interval = setInterval(() => {{
217
+ if (width >= 100) {{
218
+ clearInterval(interval);
219
+ }} else {{
220
+ width += 1;
221
+ progressBar.style.width = width + '%';
222
+ }}
223
+ }}, 30);
224
+ }}
225
+ </script>
226
+ </div>
 
 
 
 
 
 
 
 
 
 
 
227
  </body>
228
  </html>
229
  """