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";
    });
}