復元＋JS

app.py

@@ -225,21 +225,48 @@ with gr.Blocks(css=css, theme=gr.themes.Default(font=[gr.themes.GoogleFont("maki
         )
         gr.HTML(
             """
-            <script>
-            window.addEventListener('load', () => {
-              const loaderEl = document.getElementById('custom-loader');
-              const mo = new MutationObserver((mutations) => {
-                const svg = document.querySelector('svg.svelte-zyxd38');
-                if (!svg || !loaderEl) return;
-                // loader が SVG 内にない場合は再アタッチ
-                if (!svg.contains(loaderEl)) {
-                  svg.appendChild(loaderEl);
-                }
-              });
-              // childList: 子の追加/削除、subtree: 再描画で中身クリア→追加されるのを検知
-              mo.observe(document.body, { childList: true, subtree: true });
-            });
-            </script>
+<script>
+window.addEventListener('load', () => {
+  const observer = new MutationObserver(() => {
+    const svg = document.querySelector('svg.svelte-zyxd38');
+    if (!svg) return;
+    // 一度挿入したら再挿入しない
+    if (svg.querySelector('foreignObject#custom-loader-fo')) return;
+
+    const SVG_NS = 'http://www.w3.org/2000/svg';
+    // foreignObject を作成
+    const fo = document.createElementNS(SVG_NS, 'foreignObject');
+    fo.setAttribute('id', 'custom-loader-fo');
+    fo.setAttribute('width', '100%');   // SVG 内の表示エリア幅に合わせて調整
+    fo.setAttribute('height', '100%');  // SVG 内の表示エリア高さに合わせて調整
+    fo.setAttribute('x', '0');
+    fo.setAttribute('y', '0');
+
+    // HTML 部分を innerHTML で一発挿入
+    fo.innerHTML = `
+      <div id="custom-loader" xmlns="http://www.w3.org/1999/xhtml">
+        <div class="loading-text">
+          <span style="animation-delay:0s">i</span>
+          <span style="animation-delay:0.1s">n</span>
+          <span style="animation-delay:0.2s"> </span>
+          <span style="animation-delay:0.3s">p</span>
+          <span style="animation-delay:0.4s">r</span>
+          <span style="animation-delay:0.5s">o</span>
+          <span style="animation-delay:0.6s">g</span>
+          <span style="animation-delay:0.7s">r</span>
+          <span style="animation-delay:0.8s">e</span>
+          <span style="animation-delay:0.9s">s</span>
+          <span style="animation-delay:1.0s">s</span>
+        </div>
+        <img src="icon.png" alt="loading icon" />
+      </div>
+    `;
+
+    svg.appendChild(fo);
+  });
+  observer.observe(document.body, { childList: true, subtree: true });
+});
+</script>
             """
         )
         img_out = gr.Image()