Hugging Face's logo

Spaces:
AiDeveloper1
/
RCS
Sleeping

App Files Community
AiDeveloper1 commited on
Commit
1fb4f8b
·
verified ·
1 Parent(s): b7db1d2

Update templates/index.html

Browse files
Files changed (1) hide show
  1. templates/index.html +65 -69
templates/index.html CHANGED
@@ -1,70 +1,66 @@
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>Web Scraper</title>
7
- <script src="https://cdn.tailwindcss.com"></script>
8
- <link rel="stylesheet" href="/static/styles.css">
9
- </head>
10
- <body class="min-h-screen bg-gray-100 flex flex-col items-center p-4">
11
- <div class="w-full bg-white rounded-lg shadow-md p-6">
12
- <h1 class="text-2xl font-bold text-gray-800 mb-4">Web Scraper</h1>
13
- <form id="scrapeForm" class="flex flex-col space-y-4">
14
- <input
15
- type="url"
16
- id="urlInput"
17
- name="url"
18
- placeholder="Enter URL to scrape (e.g., https://example.com)"
19
- class="w-full p-2 border rounded focus:outline-none focus:ring-2 focus:ring-blue-500"
20
- required
21
- />
22
- <button
23
- type="submit"
24
- id="scrapeButton"
25
- class="w-full bg-blue-500 text-white p-2 rounded hover:bg-blue-600 disabled:bg-blue-300"
26
- >
27
- Scrape Website
28
- </button>
29
- </form>
30
- <div id="error" class="hidden mt-4 p-2 bg-red-100 text-red-700 rounded"></div>
31
- <div id="result" class="hidden mt-4 p-4 bg-gray-50 rounded border">
32
- <h2 class="text-lg font-semibold text-gray-700">Scraped Data</h2>
33
- <textarea id="jsonOutput" class="mt-2 text-sm text-gray-600" readonly></textarea>
34
- </div>
35
- </div>
36
-
37
- <script>
38
- document.getElementById('scrapeForm').addEventListener('submit', async (e) => {
39
- e.preventDefault();
40
- const url = document.getElementById('urlInput').value;
41
- const errorDiv = document.getElementById('error');
42
- const resultDiv = document.getElementById('result');
43
- const jsonOutput = document.getElementById('jsonOutput');
44
- const button = document.getElementById('scrapeButton');
45
-
46
- // Reset UI
47
- errorDiv.classList.add('hidden');
48
- resultDiv.classList.add('hidden');
49
- button.disabled = true;
50
- button.textContent = 'Scraping...';
51
-
52
- try {
53
- const response = await fetch(`/scrape?url=${encodeURIComponent(url)}`);
54
- if (!response.ok) {
55
- throw new Error(`HTTP error! Status: ${response.status}`);
56
- }
57
- const data = await response.json();
58
- jsonOutput.value = JSON.stringify(data, null, 2);
59
- resultDiv.classList.remove('hidden');
60
- } catch (err) {
61
- errorDiv.textContent = `Error: ${err.message}`;
62
- errorDiv.classList.remove('hidden');
63
- } finally {
64
- button.disabled = false;
65
- button.textContent = 'Scrape Website';
66
- }
67
- });
68
- </script>
69
- </body>
70
  </html>
 
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>Web Scraper</title>
7
+ <link rel="stylesheet" href="/static/styles.css">
8
+ </head>
9
+ <body>
10
+ <div class="container">
11
+ <h1>Web Scraper</h1>
12
+ <form id="scrapeForm">
13
+ <div class="form-group">
14
+ <label for="url">Website URL:</label>
15
+ <input type="url" id="url" name="url" placeholder="https://example.com" required>
16
+ </div>
17
+ <div class="form-group">
18
+ <label for="bot_name">Bot Name:</label>
19
+ <input type="text" id="bot_name" name="bot_name" placeholder="MyDemoBot">
20
+ </div>
21
+ <div class="form-group">
22
+ <label for="nativemsg_token">NativeMSG API Token:</label>
23
+ <input type="password" id="nativemsg_token" name="nativemsg_token" placeholder="Enter your token">
24
+ </div>
25
+ <button type="submit">Scrape Website</button>
26
+ </form>
27
+
28
+ <h2>Scraped Data</h2>
29
+ <textarea id="response" readonly></textarea>
30
+ </div>
31
+
32
+ <script>
33
+ document.getElementById('scrapeForm').addEventListener('submit', async (event) => {
34
+ event.preventDefault();
35
+
36
+ const url = document.getElementById('url').value;
37
+ const bot_name = document.getElementById('bot_name').value || undefined;
38
+ const nativemsg_token = document.getElementById('nativemsg_token').value || undefined;
39
+ const responseArea = document.getElementById('response');
40
+
41
+ responseArea.value = 'Loading...';
42
+
43
+ try {
44
+ const queryParams = new URLSearchParams({ url, use_sample: false });
45
+ if (bot_name) queryParams.append('bot_name', bot_name);
46
+ if (nativemsg_token) queryParams.append('nativemsg_token', nativemsg_token);
47
+
48
+ const response = await fetch(`/scrape?${queryParams.toString()}`, {
49
+ method: 'GET',
50
+ headers: { 'Content-Type': 'application/json' }
51
+ });
52
+
53
+ if (!response.ok) {
54
+ throw new Error(`HTTP error! Status: ${response.status}`);
55
+ }
56
+
57
+ const data = await response.json();
58
+ responseArea.value = JSON.stringify(data, null, 2);
59
+ } catch (error) {
60
+ console.error('Error:', error);
61
+ responseArea.value = `Error: ${error.message}`;
62
+ }
63
+ });
64
+ </script>
65
+ </body>
 
 
 
 
66
  </html>