Update app.py

app.py

@@ -10,12 +10,59 @@ import tempfile
 import time
 import os
 
+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を一時ファイルに保存
     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起動オプション
     options = Options()
     options.add_argument("--headless")
     options.add_argument("--no-sandbox")
@@ -24,16 +71,17 @@ 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)
 
-        # 固定要素を強制的に「static」にして、重複しにくくする
+        # 4) 固定要素をstaticに書き換えて重複の原因を減らす
         driver.execute_script(
             """
             const elems = document.querySelectorAll('*');
@@ -47,39 +95,55 @@ def render_fullpage_screenshot(html_code):
         )
         time.sleep(1)
 
-        # ページ高さを取得
+        # 5) ページの高さなどを取得
         viewport_height = driver.execute_script("return window.innerHeight")
         scroll_height = driver.execute_script("return document.body.scrollHeight")
 
-        images = []
+        # 6) スクロールしながら複数回キャプチャ
+        screenshots = []
         current_position = 0
 
         while True:
-            # スクリーンショット
+            # スクリーンショット取得
             png = driver.get_screenshot_as_png()
             img = Image.open(BytesIO(png))
-            images.append(img)
+            screenshots.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)
 
-        # 縦方向に結合
-        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))
+        # 7) スクリーンショットを縦方向に結合（重複行を検出して除去）
+        if not screenshots:
+            return Image.new('RGB', (1, 1), color=(0, 0, 0))  # 何も撮れてない場合
+
+        # 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]
+
+            # 新しい高さ分のキャンバスを作り、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))
+
+            merged = new_img
 
-        current_y = 0
-        for img in images:
-            full_screenshot.paste(img, (0, current_y))
-            current_y += img.height
+        final_image = merged
 
     except Exception as e:
+        # 例外時は1x1黒画像を返す
         return Image.new('RGB', (1, 1), color=(0, 0, 0))
 
     finally:
@@ -87,14 +151,18 @@ def render_fullpage_screenshot(html_code):
         if os.path.exists(tmp_path):
             os.remove(tmp_path)
 
-    return full_screenshot
+    return final_image
 
+# Gradioインターフェース
 iface = gr.Interface(
     fn=render_fullpage_screenshot,
     inputs=gr.Textbox(lines=15, label="HTMLコード入力"),
     outputs=gr.Image(type="pil", label="フルページスクリーンショット"),
-    title="Scrolling Screenshot (Remove Fixed Elements)",
-    description="固定要素をstaticに変更して、重複を防ぎつつページ全体をキャプチャします。"
+    title="Scrolling Screenshot (Static + Overlap Removal)",
+    description=(
+        "固定要素をstaticに書き換えたうえで、スクロール中に発生する"
+        "重複領域を画像解析で取り除いて縦方向に結合します。"
+    )
 )
 
 if __name__ == "__main__":