Update app.py

app.py

@@ -9,60 +9,16 @@ from io import BytesIO
 import tempfile
 import time
 import os
+import math
 
-def find_vertical_overlap(img_top: Image.Image, img_bottom: Image.Image) -> int:
-    """
-    2つの画像(img_topの下端 と img_bottomの上端)で、
-    連続して同じピクセルがどのくらいあるか(行数)を返す。
-    
-    前提:
-      - 画像の幅は同じと仮定
-      - 下端から上端へ向けて、どこまで連続して行が一致するかを判定する
-    """
-    width = min(img_top.width, img_bottom.width)
-    height_top = img_top.height
-    height_bottom = img_bottom.height
-
-    # ピクセルアクセス用
-    pix_top = img_top.load()
-    pix_bottom = img_bottom.load()
-
-    # 重複の最大可能行数
-    max_overlap = min(height_top, height_bottom)
-    
-    overlap_count = 0
-    # 下から上へ連続一致をチェック
-    for offset in range(max_overlap):
-        # img_topの bottom-(offset+1) 行と、img_bottomの offset 行を比較
-        row_matched = True
-        y_top = height_top - 1 - offset
-        y_bottom = offset
-        
-        for x in range(width):
-            if pix_top[x, y_top] != pix_bottom[x, y_bottom]:
-                row_matched = False
-                break
-        
-        if row_matched:
-            overlap_count += 1
-        else:
-            break
-    
-    return overlap_count
-
-def render_fullpage_screenshot(html_code):
-    """
-    (1) position: fixed / sticky 要素を無効化して、
-    (2) ページをビューポート単位で複数回スクロールしながらスクショ取得、
-    (3) 隣接する画像で重複行を検出し、切り詰めて縦方向に結合
-    """
-    # 1) HTMLを一時ファイルに保存
+def render_fullpage_by_scrolling(html_code):
+    # 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起動オプション
+    # ヘッドレスChrome(Chromium)起動オプション
     options = Options()
     options.add_argument("--headless")
     options.add_argument("--no-sandbox")
@@ -71,79 +27,87 @@ def render_fullpage_screenshot(html_code):
 
     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)
 
-        # 4) 固定要素をstaticに書き換えて重複の原因を減らす
-        driver.execute_script(
-            """
-            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)
+        # 必要に応じてスクロールバーを非表示にする（オプション）
+        driver.execute_script("""
+            document.documentElement.style.overflow = 'hidden';
+            document.body.style.overflow = 'hidden';
+        """)
 
-        # 5) ページの高さなどを取得
-        viewport_height = driver.execute_script("return window.innerHeight")
+        # ページ全体の高さ(スクロール量)と、ビューポートの高さを取得
         scroll_height = driver.execute_script("return document.body.scrollHeight")
+        viewport_height = driver.execute_script("return window.innerHeight")
+
+        # スクロール回数を計算
+        n_screens = math.ceil(scroll_height / viewport_height)
 
-        # 6) スクロールしながら複数回キャプチャ
+        # 各スクリーンショットを格納するリスト
         screenshots = []
-        current_position = 0
 
-        while True:
-            # スクリーンショット取得
+        # 最初に最上部へスクロール
+        driver.execute_script("window.scrollTo(0, 0)")
+        time.sleep(1)
+
+        for i in range(n_screens):
+            # 現在の位置でスクリーンショットを撮る
             png = driver.get_screenshot_as_png()
             img = Image.open(BytesIO(png))
             screenshots.append(img)
 
-            # 最下部まで来たらループ終了
-            if current_position + viewport_height >= scroll_height:
+            # 最終スクロールなら抜ける
+            if i == n_screens - 1:
                 break
 
-            current_position += viewport_height
-            driver.execute_script(f"window.scrollTo(0, {current_position})")
-            time.sleep(1)
+            # 次のスクロール位置へ移動
+            next_scroll = (i + 1) * viewport_height
+            driver.execute_script(f"window.scrollTo(0, {next_scroll})")
+            time.sleep(1)  # スクロール後の描画待ち
+
+        # -----------------------------------------
+        # 縦に結合するためのキャンバスを作成
+        # ページ全体の高さ: scroll_height
+        # 幅は最初の画像の幅を基準にする
+        # -----------------------------------------
+        total_width = screenshots[0].width
+        total_height = scroll_height
 
-        # 7) スクリーンショットを縦方向に結合（重複行を検出して除去）
-        if not screenshots:
-            return Image.new('RGB', (1, 1), color=(0, 0, 0))  # 何も撮れてない場合
+        # 出力先となる空の画像を作る
+        full_screenshot = Image.new('RGB', (total_width, total_height))
 
-        # merged に順次結合していく
-        merged = screenshots[0]
-        for i in range(1, len(screenshots)):
-            overlap = find_vertical_overlap(merged, screenshots[i])
-            # 重複行(overlap)だけを切り落とした領域を追加
-            if overlap > 0:
-                # overlap分だけ上から切り落とす
-                cropped = screenshots[i].crop((0, overlap, screenshots[i].width, screenshots[i].height))
-            else:
-                cropped = screenshots[i]
+        # 各画像を貼り付けていく
+        current_y = 0
+        for i, img in enumerate(screenshots):
+            # i番目の画像を貼り付ける位置 = i * viewport_height
+            # ただし最終画像は「残り高さ」分だけ貼り付ければOK
 
-            # 新しい高さ分のキャンバスを作り、mergedとcroppedを貼り付ける
-            new_height = merged.height + cropped.height
-            new_img = Image.new('RGB', (merged.width, new_height))
-            new_img.paste(merged, (0, 0))
-            new_img.paste(cropped, (0, merged.height))
+            paste_y = i * viewport_height
 
-            merged = new_img
+            # 残りの高さ (最後だけviewport_heightより小さい可能性)
+            leftover_height = total_height - paste_y
 
-        final_image = merged
+            if leftover_height < img.height:
+                # 画像の上から leftover_height 分だけ切り抜く
+                img = img.crop((0, 0, img.width, leftover_height))
+
+            full_screenshot.paste(img, (0, paste_y))
+            # paste_yを基準に上から順に貼り付ける
+
+        # 結合後のfull_screenshotが最終画像
+        return full_screenshot
 
     except Exception as e:
-        # 例外時は1x1黒画像を返す
+        # 何かあったときは最小限の画像を返す
         return Image.new('RGB', (1, 1), color=(0, 0, 0))
 
     finally:
@@ -151,17 +115,15 @@ def render_fullpage_screenshot(html_code):
         if os.path.exists(tmp_path):
             os.remove(tmp_path)
 
-    return final_image
-
 # Gradioインターフェース
 iface = gr.Interface(
-    fn=render_fullpage_screenshot,
+    fn=render_fullpage_by_scrolling,
     inputs=gr.Textbox(lines=15, label="HTMLコード入力"),
-    outputs=gr.Image(type="pil", label="フルページスクリーンショット"),
-    title="Scrolling Screenshot (Static + Overlap Removal)",
+    outputs=gr.Image(type="pil", label="ページ全体のスクリーンショット"),
+    title="Scrolling Screenshot App",
     description=(
-        "固定要素をstaticに書き換えたうえで、スクロール中に発生する"
-        "重複領域を画像解析で取り除いて縦方向に結合します。"
+        "HTMLをヘッドレスブラウザでレンダリングし、"
+        "スクロールしながら複数回キャプチャを撮って1枚に結合します。"
     )
 )