index.html

<!doctype html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="color-scheme" content="light dark">
    <title>ChinaTravel Online Evaluator</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@gradio/lite@4.43.2/dist/lite.css"
    >
    <script>
      const nativeBlob = window.Blob;
      const assetRoot = new URL("./", window.location.href);
      const localLiteWorker = new URL(
        "gradio-lite-worker.js?v=8",
        assetRoot,
      ).href;

      window.Blob = class extends nativeBlob {
        constructor(parts = [], options) {
          const patchedParts = parts.map((part) => {
            if (typeof part !== "string" || !part.includes("webworker-Er6yXxw8.js")) {
              return part;
            }
            return `self.CHINATRAVEL_ASSET_BASE=${JSON.stringify(assetRoot.href)};importScripts("${localLiteWorker}");`;
          });
          super(patchedParts, options);
        }
      };

      const replaceLiteWorker = (WorkerClass) => class extends WorkerClass {
        constructor(url, options) {
          const source = String(url);
          const workerUrl = source.includes("webworker-Er6yXxw8.js")
            ? new URL("./gradio-lite-worker.js", window.location.href)
            : url;
          super(workerUrl, options);
        }
      };

      window.Worker = replaceLiteWorker(window.Worker);
      if (window.SharedWorker) {
        window.SharedWorker = replaceLiteWorker(window.SharedWorker);
      }
    </script>
    <script
      type="module"
      crossorigin
      src="https://cdn.jsdelivr.net/npm/@gradio/lite@4.43.2/dist/lite.js"
    ></script>
    <style>
      html,
      body {
        width: 100%;
        min-width: 320px;
        min-height: 100%;
        margin: 0;
        background: #f7f7f8;
      }

      gradio-lite {
        display: block;
        min-height: 100dvh;
      }

      #boot-error {
        margin: 24px;
        padding: 16px;
        border: 1px solid #b91c1c;
        border-radius: 4px;
        background: #fef2f2;
        color: #7f1d1d;
        font: 14px/1.5 ui-sans-serif, system-ui, sans-serif;
      }

      @media (prefers-color-scheme: dark) {
        html,
        body {
          background: #111827;
        }

        #boot-error {
          border-color: #ef4444;
          background: #450a0a;
          color: #fee2e2;
        }
      }
    </style>
  </head>
  <body>
    <div id="boot-error" role="alert" hidden></div>
    <gradio-lite eager control-page-title initial-height="100vh">
      <gradio-requirements>
jsonschema>=4.21,<5
tqdm>=4.66,<5
geopy>=2.4,<3
      </gradio-requirements>
      <gradio-file
        name="lite_runtime.zip"
        url="lite_runtime.zip?v=2"
      ></gradio-file>
      <gradio-file
        name="lite_app.py"
        url="lite_app.py?v=2"
        entrypoint
      ></gradio-file>
    </gradio-lite>
    <script>
      for (const file of document.querySelectorAll("gradio-file[url]")) {
        file.setAttribute("url", new URL(file.getAttribute("url"), assetRoot).href);
      }

      const app = document.querySelector("gradio-lite");
      const errorBox = document.querySelector("#boot-error");
      const showError = (event) => {
        const detail = event.detail?.message || event.detail || "Unknown startup error";
        errorBox.textContent = `Evaluator initialization failed: ${detail}`;
        errorBox.hidden = false;
      };

      app.addEventListener("initialization-error", showError);
      app.addEventListener("init-file-run-error", showError);
      app.addEventListener("python-error", showError);
    </script>
  </body>
</html>