Update app.py

app.py

@@ -11,70 +11,65 @@ import time
 import os
 
 def render_fullpage_screenshot(html_code):
-    """
-    ページを少しずつスクロールしながら複数回のスクリーンショットを撮影し、
-    それらを縦方向に結合して1枚の長い画像にする。
-    """
-
-    # 1) HTMLコードを一時ファイルに保存
     tmp_file = tempfile.NamedTemporaryFile(suffix=".html", delete=False)
     tmp_path = tmp_file.name
     tmp_file.write(html_code.encode('utf-8'))
     tmp_file.close()
 
-    # 2) ヘッドレスChrome(Chromium)起動オプション設定
     options = Options()
-    options.add_argument("--headless")               # ヘッドレスモード
-    options.add_argument("--no-sandbox")             # コンテナ環境でのサンドボックス無効化
-    options.add_argument("--disable-dev-shm-usage")  # /dev/shmを使わない
-    options.add_argument("--force-device-scale-factor=1")  # DPI/スケール固定
+    options.add_argument("--headless")
+    options.add_argument("--no-sandbox")
+    options.add_argument("--disable-dev-shm-usage")
+    options.add_argument("--force-device-scale-factor=1")
 
     try:
         driver = webdriver.Chrome(options=options)
-        # 適当な初期ウィンドウサイズに設定してページを読み込む
         driver.set_window_size(1200, 800)
         driver.get("file://" + tmp_path)
 
-        # 3) ページロード完了を待機
+        # ページロード待機
         WebDriverWait(driver, 10).until(
             EC.presence_of_element_located((By.TAG_NAME, "body"))
         )
-        # さらにフォントや外部リソースを読み込み終わるまで少し待つ
         time.sleep(2)
 
-        # ---- スクロールバーを非表示にしたい場合 ----
-        # （ただし一部ページでレイアウトが変化する可能性があるので要注意）
+        # 固定要素を強制的に「static」にして、重複しにくくする
         driver.execute_script(
-            "document.documentElement.style.overflow = 'hidden';"
-            "document.body.style.overflow = 'hidden';"
+            """
+            const elems = document.querySelectorAll('*');
+            for (const e of elems) {
+                const style = window.getComputedStyle(e);
+                if (style.position === 'fixed' || style.position === 'sticky') {
+                    e.style.position = 'static';
+                }
+            }
+            """
         )
         time.sleep(1)
 
-        # 4) 画面のビューポート高・ページ全体の高さを取得
+        # ページ高さを取得
         viewport_height = driver.execute_script("return window.innerHeight")
         scroll_height = driver.execute_script("return document.body.scrollHeight")
 
-        # スクロール＋キャプチャを繰り返す
         images = []
         current_position = 0
 
         while True:
-            # 現在の画面をスクリーンショット
+            # スクリーンショット
             png = driver.get_screenshot_as_png()
             img = Image.open(BytesIO(png))
             images.append(img)
 
-            # もし次のスクロールでページ末尾を超えるなら、ループを抜ける
+            # 最下部まで行ったら終了
             if current_position + viewport_height >= scroll_height:
                 break
 
             # 次のスクロール位置へ移動
             current_position += viewport_height
             driver.execute_script(f"window.scrollTo(0, {current_position})")
-            # スクロール後の描画待ち
             time.sleep(1)
 
-        # 5) 取得した複数画像を縦方向に結合
+        # 縦方向に結合
         total_width = max(img.width for img in images)
         total_height = sum(img.height for img in images)
         full_screenshot = Image.new('RGB', (total_width, total_height))
@@ -85,7 +80,6 @@ def render_fullpage_screenshot(html_code):
             current_y += img.height
 
     except Exception as e:
-        # 何らかのエラーが発生した場合、1x1の黒画像を返す
         return Image.new('RGB', (1, 1), color=(0, 0, 0))
 
     finally:
@@ -95,16 +89,12 @@ def render_fullpage_screenshot(html_code):
 
     return full_screenshot
 
-# Gradioインターフェース
 iface = gr.Interface(
     fn=render_fullpage_screenshot,
     inputs=gr.Textbox(lines=15, label="HTMLコード入力"),
     outputs=gr.Image(type="pil", label="フルページスクリーンショット"),
-    title="Full Page Screenshot with Scrolling",
-    description=(
-        "ページを少しずつスクロールしながら複数回キャプチャを撮影し、"
-        "最終的に縦に結合して1枚の長い画像を生成します。"
-    )
+    title="Scrolling Screenshot (Remove Fixed Elements)",
+    description="固定要素をstaticに変更して、重複を防ぎつつページ全体をキャプチャします。"
 )
 
 if __name__ == "__main__":