separate javascript for scrape page

web/static/scrape.js

@@ -0,0 +1,44 @@
+function startScrape() {
+  const output = document.getElementById("output");
+  const startButton = document.getElementById("start-scrape");
+
+  output.textContent = "Starting scrape...\n";
+  startButton.disabled = true;
+  startButton.textContent = "Scraping...";
+
+  fetch("/scrape")
+    .then((response) => {
+      const reader = response.body.getReader();
+      const decoder = new TextDecoder();
+
+      function readStream() {
+        reader
+          .read()
+          .then(({ done, value }) => {
+            if (done) {
+              output.textContent += "\nScraping completed!";
+              startButton.disabled = false;
+              startButton.textContent = "Start Scraping";
+              return;
+            }
+
+            const chunk = decoder.decode(value, { stream: true });
+            output.textContent += chunk;
+            output.scrollTop = output.scrollHeight;
+            readStream();
+          })
+          .catch((error) => {
+            output.textContent += `\nError: ${error.message}`;
+            startButton.disabled = false;
+            startButton.textContent = "Start Scraping";
+          });
+      }
+
+      readStream();
+    })
+    .catch((error) => {
+      output.textContent = `Error starting scrape: ${error.message}`;
+      startButton.disabled = false;
+      startButton.textContent = "Start Scraping";
+    });
+}

web/templates/scrape.html

@@ -18,50 +18,5 @@ content %}
   ></div>
 </div>
 {% endblock %} {% block scripts %}
-<script>
-  function startScrape() {
-    const output = document.getElementById("output");
-    const startButton = document.getElementById("start-scrape");
-
-    output.textContent = "Starting scrape...\n";
-    startButton.disabled = true;
-    startButton.textContent = "Scraping...";
-
-    fetch("/scrape")
-      .then((response) => {
-        const reader = response.body.getReader();
-        const decoder = new TextDecoder();
-
-        function readStream() {
-          reader
-            .read()
-            .then(({ done, value }) => {
-              if (done) {
-                output.textContent += "\nScraping completed!";
-                startButton.disabled = false;
-                startButton.textContent = "Start Scraping";
-                return;
-              }
-
-              const chunk = decoder.decode(value, { stream: true });
-              output.textContent += chunk;
-              output.scrollTop = output.scrollHeight;
-              readStream();
-            })
-            .catch((error) => {
-              output.textContent += `\nError: ${error.message}`;
-              startButton.disabled = false;
-              startButton.textContent = "Start Scraping";
-            });
-        }
-
-        readStream();
-      })
-      .catch((error) => {
-        output.textContent = `Error starting scrape: ${error.message}`;
-        startButton.disabled = false;
-        startButton.textContent = "Start Scraping";
-      });
-  }
-</script>
+<script src="{{ url_for('static', filename='scrape.js') }}"></script>
 {% endblock %}