Hugging Face's logo

Spaces:
bigbossmonster
/
streamtape
Sleeping

App Files Community
bigbossmonster commited on
Commit
a49b3a9
·
verified ·
1 Parent(s): 70dc04e

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +43 -44
templates/index.html CHANGED
@@ -1,98 +1,97 @@
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
- <title>Streamtape Downloader</title>
5
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
6
  <style>
7
- body { background-color: #f4f6f9; padding-top: 30px; }
8
- .container { max-width: 800px; background: white; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.1); }
 
 
9
 
10
- /* Terminal Log Styling */
11
  #log-window {
12
- background-color: #1e1e1e;
13
  color: #00ff00;
14
  font-family: 'Courier New', Courier, monospace;
15
- height: 300px;
16
  overflow-y: auto;
17
  padding: 15px;
18
  border-radius: 8px;
19
  margin-top: 20px;
20
- font-size: 0.9em;
21
  border: 1px solid #333;
22
  }
23
- .log-entry { margin-bottom: 5px; border-bottom: 1px solid #333; padding-bottom: 2px; }
24
  </style>
25
  </head>
26
  <body>
27
  <div class="container">
28
- <h2 class="text-center mb-4">Streamtape ➔ HF Storage</h2>
29
 
30
- <form action="/download" method="post" class="mb-4">
31
- <div class="row g-2">
32
- <div class="col-md-6">
33
- <input type="text" class="form-control" name="url" placeholder="Streamtape URL or ID" required>
34
- </div>
35
- <div class="col-md-6">
36
- <input type="text" class="form-control" name="filename" placeholder="Save as (e.g. video.mp4)" required>
37
- </div>
38
- <div class="col-md-6">
39
- <input type="password" class="form-control" name="hf_token" placeholder="HF Token (Optional)">
 
40
  </div>
41
- <div class="col-md-6">
42
- <input type="text" class="form-control" name="hf_repo" placeholder="Repo ID (Optional)">
 
43
  </div>
44
- <div class="col-12">
45
- <button type="submit" class="btn btn-primary w-100 mt-2">Start Process</button>
 
 
 
 
 
46
  </div>
47
  </div>
 
 
48
  </form>
49
 
50
- <h5>Live Logs</h5>
51
  <div id="log-window">
52
- <div class="text-muted">Waiting for tasks...</div>
53
  </div>
54
 
55
- <h5 class="mt-4">Stored Files (/data)</h5>
56
- <ul class="list-group">
 
 
 
57
  {% for file in files %}
58
- <li class="list-group-item d-flex justify-content-between align-items-center">
59
  {{ file }}
60
  <span class="badge bg-secondary">Stored</span>
61
  </li>
62
  {% else %}
63
- <li class="list-group-item text-muted">No files found.</li>
64
  {% endfor %}
65
  </ul>
66
- <div class="mt-2 text-end">
67
- <a href="/" class="btn btn-sm btn-outline-secondary">Refresh File List</a>
68
- </div>
69
  </div>
70
 
71
  <script>
72
  const logWindow = document.getElementById('log-window');
73
-
74
- // Connect to SSE Endpoint
75
  const evtSource = new EventSource("/stream-logs");
76
 
77
  evtSource.onmessage = function(event) {
78
- // Clear "Waiting..." text if it's the first log
79
- if (logWindow.innerHTML.includes('Waiting for tasks...')) {
80
  logWindow.innerHTML = '';
81
  }
82
-
83
- // Append new log
84
  const newLog = document.createElement("div");
85
  newLog.className = "log-entry";
86
  newLog.textContent = event.data;
87
  logWindow.appendChild(newLog);
88
-
89
- // Auto-scroll to bottom
90
  logWindow.scrollTop = logWindow.scrollHeight;
91
  };
92
-
93
- evtSource.onerror = function() {
94
- console.log("EventSource failed.");
95
- };
96
  </script>
97
  </body>
98
  </html>
 
1
  <!DOCTYPE html>
2
  <html>
3
  <head>
4
+ <title>Streamtape Batch Downloader</title>
5
  <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet">
6
  <style>
7
+ body { background-color: #121212; color: #e0e0e0; font-family: sans-serif; padding-top: 30px; }
8
+ .container { max-width: 800px; background: #1e1e1e; padding: 30px; border-radius: 12px; box-shadow: 0 4px 15px rgba(0,0,0,0.5); }
9
+ .form-control, .form-select { background-color: #2c2c2c; border: 1px solid #444; color: #fff; }
10
+ .form-control:focus { background-color: #2c2c2c; color: #fff; border-color: #0d6efd; box-shadow: none; }
11
 
 
12
  #log-window {
13
+ background-color: #000;
14
  color: #00ff00;
15
  font-family: 'Courier New', Courier, monospace;
16
+ height: 350px;
17
  overflow-y: auto;
18
  padding: 15px;
19
  border-radius: 8px;
20
  margin-top: 20px;
21
+ font-size: 0.85em;
22
  border: 1px solid #333;
23
  }
24
+ .log-entry { margin-bottom: 4px; border-bottom: 1px solid #222; padding-bottom: 2px; }
25
  </style>
26
  </head>
27
  <body>
28
  <div class="container">
29
+ <h3 class="text-center mb-4">Streamtape ➔ HF Batch Loader</h3>
30
 
31
+ <form action="/start_batch" method="post">
32
+
33
+ <div class="mb-3">
34
+ <label class="form-label text-warning">Streamtape Links (One per line)</label>
35
+ <textarea class="form-control" name="urls" rows="5" placeholder="https://streamtape.com/v/abcd123&#10;https://streamtape.com/v/xyz987" required></textarea>
36
+ </div>
37
+
38
+ <div class="row g-3">
39
+ <div class="col-md-5">
40
+ <label class="form-label small">HF Token (Write)</label>
41
+ <input type="password" class="form-control" name="hf_token" placeholder="hf_...">
42
  </div>
43
+ <div class="col-md-4">
44
+ <label class="form-label small">Repo ID</label>
45
+ <input type="text" class="form-control" name="hf_repo" placeholder="username/repo_name">
46
  </div>
47
+ <div class="col-md-3">
48
+ <label class="form-label small">Repo Type</label>
49
+ <select class="form-select" name="repo_type">
50
+ <option value="dataset" selected>Dataset</option>
51
+ <option value="model">Model</option>
52
+ <option value="space">Space</option>
53
+ </select>
54
  </div>
55
  </div>
56
+
57
+ <button type="submit" class="btn btn-primary w-100 mt-4 fw-bold">🚀 Start Batch Process</button>
58
  </form>
59
 
60
+ <h6 class="mt-4 text-muted">Process Logs</h6>
61
  <div id="log-window">
62
+ <div style="color: #666;">Waiting for input...</div>
63
  </div>
64
 
65
+ <div class="d-flex justify-content-between align-items-center mt-4">
66
+ <h6 class="m-0 text-muted">Current Storage (/data)</h6>
67
+ <a href="/" class="btn btn-sm btn-outline-secondary">Refresh</a>
68
+ </div>
69
+ <ul class="list-group mt-2">
70
  {% for file in files %}
71
+ <li class="list-group-item bg-dark text-light border-secondary d-flex justify-content-between">
72
  {{ file }}
73
  <span class="badge bg-secondary">Stored</span>
74
  </li>
75
  {% else %}
76
+ <li class="list-group-item bg-dark text-muted border-secondary">Storage is empty.</li>
77
  {% endfor %}
78
  </ul>
 
 
 
79
  </div>
80
 
81
  <script>
82
  const logWindow = document.getElementById('log-window');
 
 
83
  const evtSource = new EventSource("/stream-logs");
84
 
85
  evtSource.onmessage = function(event) {
86
+ if (logWindow.innerHTML.includes('Waiting for input...')) {
 
87
  logWindow.innerHTML = '';
88
  }
 
 
89
  const newLog = document.createElement("div");
90
  newLog.className = "log-entry";
91
  newLog.textContent = event.data;
92
  logWindow.appendChild(newLog);
 
 
93
  logWindow.scrollTop = logWindow.scrollHeight;
94
  };
 
 
 
 
95
  </script>
96
  </body>
97
  </html>