Support sanitized HTML Reader assets and local resources

app.py

@@ -118,7 +118,7 @@ def decode_reader_assets(raw: bytes) -> dict:
         if entry.get("s") == 2:
             path = entry.get("p")
             mode = entry.get("m")
-            if mode not in ("p", "e", "d") or not isinstance(path, str) or not re.fullmatch(r"objects/[0-9a-f]{2}/[0-9a-f]{64}/(?:[a-z0-9-]+/)?(?:document\.pdf|book\.epub|document\.docx)", path):
+            if mode not in ("p", "e", "d", "h") or not isinstance(path, str) or not re.fullmatch(r"objects/[0-9a-f]{2}/[0-9a-f]{64}/(?:[a-z0-9-]+/)?(?:document\.pdf|book\.epub|document\.docx|document\.html)", path):
                 continue
             clean[key] = {"s": 2, "m": mode, "p": path}
         else:
@@ -391,7 +391,7 @@ def validate_voiceofml_source_url(url: str) -> str:
 
 
 READER_ASSET_SOURCE_RE = re.compile(
-    r"^/datasets/vomebook/Reader-Assets/resolve/main/objects/[0-9a-f]{2}/[0-9a-f]{64}/(?:[a-z0-9-]+/)?(?:document\.pdf|book\.epub|document\.docx)$"
+    r"^/datasets/vomebook/Reader-Assets/resolve/main/objects/[0-9a-f]{2}/[0-9a-f]{64}/(?:[a-z0-9-]+/)?(?:document\.pdf|book\.epub|document\.docx|document\.html)$"
 )
 VOICEOFML_READER_SOURCE_RE = re.compile(r"^/datasets/VoiceOfML/[A-Za-z0-9._-]+/(?:resolve|raw)/main/.+$")
 
@@ -1419,7 +1419,7 @@ async def api_random_reader(repo: Optional[str] = Query(default=None)):
     asset = converted.get(index)
     if asset:
         rec["ReaderLink"] = f"https://huggingface.co/datasets/vomebook/Reader-Assets/resolve/main/{asset['p']}"
-        rec["ReaderExtension"] = {"p": "pdf", "e": "epub", "d": "docx"}[asset["m"]]
+        rec["ReaderExtension"] = {"p": "pdf", "e": "epub", "d": "docx", "h": "html"}[asset["m"]]
         rec["DownloadLink"] = rec["Link"]
     return JSONResponse(rec)
 

static/app.js

@@ -773,7 +773,7 @@ function warmReaderIntent(rawUrl) {
     ? ["/static/vendor/pdf.min.e0be3863c23c.mjs", "/static/pdf-worker-wrapper.mjs", "/static/vendor/pdf.worker.min.0613f41490dd.mjs"]
     : extension === "epub" ? ["/static/vendor/jszip.min.acc7e41455a8.js", "/static/vendor/epub.min.06eae1574510.js"]
     : extension === "docx" ? ["/static/vendor/jszip.min.acc7e41455a8.js", "/static/vendor/docx-preview.min.3573b8d99344.js"]
-    : ["md", "markdown"].includes(extension) ? ["/static/vendor/marked.min.eaccee2fb9fb.js", "/static/vendor/purify.min.c2f26ea4fc0d.js"] : [];
+     : ["md", "markdown", "html", "htm"].includes(extension) ? ["/static/vendor/marked.min.eaccee2fb9fb.js", "/static/vendor/purify.min.c2f26ea4fc0d.js"] : [];
   for (const href of shellAssets.concat(engineAssets)) {
     if (warmedReaderAssets.has(href)) continue;
     warmedReaderAssets.add(href);

static/reader.css

@@ -26,6 +26,12 @@ body { margin: 0; height: 100vh; height: 100dvh; overflow: hidden; display: flex
 .loading-status { display: none; color: #aeb5ba; font-size: 13px; text-align: center; padding: 12px; }
 .loading-status[hidden] { display: none; }
 .reader-content { --reader-zoom: 1; width: min(100%, 1100px); margin: 0 auto; padding: 20px; }
+.reader-loading-indicator { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #9ba3aa; font-size: 13px; }
+.reader-loading-spinner { width: 24px; height: 24px; border: 2px solid #3b4147; border-top-color: #8ab4f8; border-radius: 50%; animation: reader-loading-spin 800ms linear infinite; }
+@keyframes reader-loading-spin { to { transform: rotate(360deg); } }
+.reader-loading-indicator { min-height: 220px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; color: #9ba3aa; font-size: 13px; }
+.reader-loading-spinner { width: 24px; height: 24px; border: 2px solid #3b4147; border-top-color: #8ab4f8; border-radius: 50%; animation: reader-loading-spin 800ms linear infinite; }
+@keyframes reader-loading-spin { to { transform: rotate(360deg); } }
 .reader-page { position: relative; margin: 0 auto 18px; background: white; box-shadow: 0 2px 14px #0008; min-height: 160px; }
 .reader-content[data-mode="pdf"] .reader-page { width: calc(100% * var(--reader-zoom)); }
 .reader-page canvas { display: block; width: 100%; height: auto; }

static/reader.js

@@ -35,6 +35,11 @@ const downloadUrl = params.get("download") || sourceUrl;
 const extension = (params.get("ext") || "").toLowerCase();
 const capability = VoiceOfMLReader.capability(extension);
 const content = document.querySelector("#content");
+const loadingIndicator = document.createElement("div");
+loadingIndicator.className = "reader-loading-indicator";
+loadingIndicator.setAttribute("role", "status");
+loadingIndicator.innerHTML = '<span class="reader-loading-spinner" aria-hidden="true"></span><span>正在加载正文...</span>';
+content.appendChild(loadingIndicator);
 content.dataset.mode = capability.mode || "unsupported";
 const status = document.querySelector("#status");
 const loadingStatus = document.querySelector("#loading-status");
@@ -71,6 +76,13 @@ const viewport = document.querySelector("#viewport");
 const zoomInput = document.querySelector("#zoom");
 const pageInput = document.querySelector("#page-number");
 const readerPath = document.querySelector("#reader-path");
+const loadingObserver = new MutationObserver(() => {
+  if (content.querySelector(".reader-page, .reader-image, .reader-text, .reader-markdown, .html-frame, .epub-frame, .docx-body")) {
+    loadingIndicator.remove();
+    loadingObserver.disconnect();
+  }
+});
+loadingObserver.observe(content, { childList: true });
 document.querySelector(".page-controls").hidden = !["pdf", "epub"].includes(capability.mode);
 
 document.querySelector("#title").textContent = title;
@@ -193,7 +205,7 @@ function loadScript(url) {
     document.head.appendChild(script);
   });
 }
-function fail(message) { loadingStatus.hidden = true; content.innerHTML = `<div class="reader-error">${message}</div>`; status.textContent = "无法打开"; }
+function fail(message) { loadingStatus.hidden = true; loadingIndicator.remove(); content.innerHTML = `<div class="reader-error">${message}</div>`; status.textContent = "无法打开"; }
 
 async function renderPdf(prepared) {
   const pdf = await prepared;
@@ -327,10 +339,12 @@ async function renderHtml(prepared) {
   if (!response.ok) throw new Error(`HTTP ${response.status}`);
   const bytes = new Uint8Array(await response.arrayBuffer());
   const text = new TextDecoder(detectTextEncoding(bytes, title)).decode(bytes);
+  const offlineText = text.replace(/@import[^;]+;|url\s*\([^)]*\)/gi, "");
   await prepared.engine;
-  const clean = DOMPurify.sanitize(text, {
+  const clean = DOMPurify.sanitize(offlineText, {
     USE_PROFILES: { html: true },
-    FORBID_TAGS: ["base", "embed", "form", "iframe", "object", "script", "style"],
+    ADD_TAGS: ["style"],
+    FORBID_TAGS: ["base", "embed", "form", "iframe", "object", "script"],
     FORBID_ATTR: ["action", "formaction", "srcdoc"],
     ALLOWED_URI_REGEXP: /^data:image\/(?:gif|png|jpeg|webp);/i,
   });
@@ -462,6 +476,7 @@ async function start() {
     else if (capability.mode === "html") await renderHtml(prepared);
     else if (capability.mode === "epub") await renderEpub(prepared);
     else if (capability.mode === "docx") await renderDocx(prepared);
+    loadingIndicator.remove();
     loadingStatus.hidden = true;
     if (!pageCount && restoredEntry) viewport.scrollTop = restoredEntry.scrollTop || 0;
     scheduleSave();