Hugging Face's logo

Spaces:
abeea
/
Screenshot
Running

App Files Community
abeea commited on
Commit
1b4ea06
·
verified ·
1 Parent(s): 741b0bb

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +203 -19
index.html CHANGED
@@ -1,19 +1,203 @@
1
- <!doctype html>
2
- <html>
3
- <head>
4
- <meta charset="utf-8" />
5
- <meta name="viewport" content="width=device-width" />
6
- <title>My static Space</title>
7
- <link rel="stylesheet" href="style.css" />
8
- </head>
9
- <body>
10
- <div class="card">
11
- <h1>Welcome to your static Space!</h1>
12
- <p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
13
- <p>
14
- Also don't forget to check the
15
- <a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
16
- </p>
17
- </div>
18
- </body>
19
- </html>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <title>Bulk Screenshot Tool (ZIP Download)</title>
6
+
7
+ <style>
8
+ body {
9
+ font-family: Arial, sans-serif;
10
+ max-width: 1000px;
11
+ margin: 30px auto;
12
+ padding: 20px;
13
+ background: #f4f6f8;
14
+ }
15
+
16
+ h1 {
17
+ text-align: center;
18
+ }
19
+
20
+ input, button {
21
+ padding: 10px;
22
+ margin-top: 10px;
23
+ font-size: 15px;
24
+ }
25
+
26
+ button {
27
+ cursor: pointer;
28
+ }
29
+
30
+ #status {
31
+ margin-top: 15px;
32
+ font-weight: bold;
33
+ }
34
+
35
+ #screenshots {
36
+ margin-top: 25px;
37
+ display: grid;
38
+ grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
39
+ gap: 15px;
40
+ }
41
+
42
+ .card {
43
+ background: #fff;
44
+ padding: 10px;
45
+ border-radius: 6px;
46
+ box-shadow: 0 2px 6px rgba(0,0,0,.1);
47
+ }
48
+
49
+ .card img {
50
+ width: 100%;
51
+ border-radius: 4px;
52
+ }
53
+
54
+ .url {
55
+ font-size: 12px;
56
+ margin-top: 5px;
57
+ word-break: break-all;
58
+ }
59
+
60
+ #downloadZip {
61
+ display: none;
62
+ margin-top: 20px;
63
+ background: #0a7cff;
64
+ color: #fff;
65
+ border: none;
66
+ border-radius: 4px;
67
+ }
68
+ </style>
69
+ </head>
70
+
71
+ <body>
72
+
73
+ <h1>Bulk Screenshot Tool</h1>
74
+
75
+ <p>Upload a <strong>.txt</strong> file (one URL per line)</p>
76
+
77
+ <input type="file" id="fileInput" accept=".txt"><br>
78
+ <button id="startBtn">Capture Screenshots</button>
79
+
80
+ <div id="status"></div>
81
+
82
+ <button id="downloadZip">⬇ Download ZIP</button>
83
+
84
+ <div id="screenshots"></div>
85
+
86
+ <!-- JSZip CDN -->
87
+ <script src="https://cdnjs.cloudflare.com/ajax/libs/jszip/3.10.1/jszip.min.js"></script>
88
+
89
+ <script>
90
+ const ACCESS_KEY = "BiY4yQ0EnzeZ5A"; // 🔴 Replace this
91
+
92
+ let screenshotData = [];
93
+
94
+ document.getElementById("startBtn").addEventListener("click", async () => {
95
+ const fileInput = document.getElementById("fileInput");
96
+ const status = document.getElementById("status");
97
+ const container = document.getElementById("screenshots");
98
+
99
+ if (!fileInput.files.length) {
100
+ alert("Upload a .txt file");
101
+ return;
102
+ }
103
+
104
+ const text = await fileInput.files[0].text();
105
+ const urls = text.split(/\r?\n/).map(u => u.trim()).filter(Boolean);
106
+
107
+ if (!urls.length) {
108
+ alert("No URLs found");
109
+ return;
110
+ }
111
+
112
+ status.textContent = `Capturing ${urls.length} screenshots...`;
113
+ container.innerHTML = "";
114
+ screenshotData = [];
115
+
116
+ const payload = {
117
+ access_key: ACCESS_KEY,
118
+ execute: true,
119
+ optimize: false,
120
+ options: {
121
+ viewport_width: 1280,
122
+ viewport_height: 1024,
123
+ full_page: true,
124
+ block_ads: true,
125
+ block_cookie_banners: true
126
+ },
127
+ requests: urls.map(url => ({ url }))
128
+ };
129
+
130
+ try {
131
+ const res = await fetch("https://api.screenshotone.com/bulk", {
132
+ method: "POST",
133
+ headers: { "Content-Type": "application/json" },
134
+ body: JSON.stringify(payload)
135
+ });
136
+
137
+ const data = await res.json();
138
+
139
+ if (!data.responses) throw new Error("Invalid API response");
140
+
141
+ data.responses.forEach((item, i) => {
142
+ screenshotData.push({
143
+ url: urls[i],
144
+ image: item.url
145
+ });
146
+
147
+ const card = document.createElement("div");
148
+ card.className = "card";
149
+
150
+ const img = document.createElement("img");
151
+ img.src = item.url;
152
+ img.loading = "lazy";
153
+
154
+ const label = document.createElement("div");
155
+ label.className = "url";
156
+ label.textContent = urls[i];
157
+
158
+ card.appendChild(img);
159
+ card.appendChild(label);
160
+ container.appendChild(card);
161
+ });
162
+
163
+ status.textContent = "Screenshots ready ✔";
164
+ document.getElementById("downloadZip").style.display = "inline-block";
165
+
166
+ } catch (err) {
167
+ console.error(err);
168
+ status.textContent = "❌ Error capturing screenshots";
169
+ }
170
+ });
171
+
172
+ document.getElementById("downloadZip").addEventListener("click", async () => {
173
+ const zip = new JSZip();
174
+ const status = document.getElementById("status");
175
+
176
+ status.textContent = "Creating ZIP file...";
177
+
178
+ for (let i = 0; i < screenshotData.length; i++) {
179
+ const { url, image } = screenshotData[i];
180
+
181
+ const res = await fetch(image);
182
+ const blob = await res.blob();
183
+
184
+ const filename = url
185
+ .replace(/^https?:\/\//, "")
186
+ .replace(/[\/:?<>|"]/g, "_") + ".png";
187
+
188
+ zip.file(filename, blob);
189
+ }
190
+
191
+ const zipBlob = await zip.generateAsync({ type: "blob" });
192
+ const link = document.createElement("a");
193
+
194
+ link.href = URL.createObjectURL(zipBlob);
195
+ link.download = "screenshots.zip";
196
+ link.click();
197
+
198
+ status.textContent = "ZIP downloaded ��";
199
+ });
200
+ </script>
201
+
202
+ </body>
203
+ </html>