Update app.py

app.py

@@ -10,14 +10,14 @@ import tempfile
 import time
 import os
 
-def render_fullpage_screenshot_with_margin(html_code):
+def render_fullpage_screenshot(html_code):
     # 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)起動オプションを設定
+    # 2) ヘッドレスChrome(Chromium)起動オプション
     options = Options()
     options.add_argument("--headless")
     options.add_argument("--no-sandbox")
@@ -27,54 +27,53 @@ def render_fullpage_screenshot_with_margin(html_code):
     try:
         driver = webdriver.Chrome(options=options)
 
-        # 3) 初期ウィンドウサイズを設定してページを読み込む
+        # 3) まずは適当なウィンドウサイズでページを開く
         driver.set_window_size(1200, 800)
         driver.get("file://" + tmp_path)
 
-        # 4) ページのロード完了を待機（bodyタグの存在）
+        # 4) ページのロードを待機
         WebDriverWait(driver, 10).until(
             EC.presence_of_element_located((By.TAG_NAME, "body"))
         )
-        time.sleep(2)  # 外部リソースの読み込みを待つ
+        # 外部リソース読み込み等の安定化のため余分に待機
+        time.sleep(2)
 
-        # 5) スクロールバー非表示と背景色の固定（マルチライン文字列で記述）
+        # 5) スクロールバーを写したくない場合はCSSで非表示にする
         driver.execute_script(
-            """
-            document.documentElement.style.overflow = 'hidden';
-            document.body.style.overflow = 'hidden';
-            document.documentElement.style.backgroundColor = 'white';
-            document.body.style.backgroundColor = 'white';
-            """
+            "document.documentElement.style.overflow = 'hidden';"
+            "document.body.style.overflow = 'hidden';"
         )
 
-        # 6) ページ全体の幅と高さを、bodyとdocumentElementから取得（大きい方を使用）
+        # 6) ページ全体の幅・高さを正確に取得
         scroll_width = driver.execute_script(
-            "return Math.max(document.body.scrollWidth, document.documentElement.scrollWidth);"
+            "return Math.max("
+            "document.body.scrollWidth, document.documentElement.scrollWidth)"
         )
         scroll_height = driver.execute_script(
-            "return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight);"
+            "return Math.max("
+            "document.body.scrollHeight, document.documentElement.scrollHeight)"
         )
 
-        # 7) 上下左右に5%余白を確保（合計10%拡大）
-        margin_factor = 0.05  # 5%
-        final_width = int(scroll_width * (1 + margin_factor * 2))
-        final_height = int(scroll_height * (1 + margin_factor * 2))
+        # 7) ウィンドウサイズに2%のマージンを加える
+        #    端が切れやすい場合に、余白をつけて確実に表示領域を広げる
+        margin_width = int(scroll_width * 0.02)   # 幅の2%
+        margin_height = int(scroll_height * 0.02) # 高さの2%
+
+        final_width = scroll_width + margin_width
+        final_height = scroll_height + margin_height
 
-        # 8) 余白込みのウィンドウサイズに再設定
         driver.set_window_size(final_width, final_height)
-        time.sleep(2)  # レイアウト変化の安定待ち
+        time.sleep(2)  # レイアウト再計算待ち
 
-        # 9) コンテンツを中央に配置するため、余白分だけスクロール
-        offset_x = int(scroll_width * margin_factor)
-        offset_y = int(scroll_height * margin_factor)
-        driver.execute_script(f"window.scrollTo({offset_x}, {offset_y});")
+        # 念のためページ最上部にスクロール
+        driver.execute_script("window.scrollTo(0, 0)")
         time.sleep(1)
 
-        # 10) スクリーンショットをPNGバイナリとして取得
+        # 8) スクリーンショットを取得
         png = driver.get_screenshot_as_png()
 
     except Exception as e:
-        # エラー発生時は1x1の黒画像を返す
+        # 失敗時は1x1の黒画像を返す
         return Image.new('RGB', (1, 1), color=(0, 0, 0))
 
     finally:
@@ -82,16 +81,16 @@ def render_fullpage_screenshot_with_margin(html_code):
         if os.path.exists(tmp_path):
             os.remove(tmp_path)
 
-    # 11) PNGバイナリをPIL.Imageに変換して返す
+    # 9) PNGバイナリをPIL.Imageに変換して返す
     return Image.open(BytesIO(png))
 
-# Gradioインターフェースの定義
+# Gradioインターフェース
 iface = gr.Interface(
-    fn=render_fullpage_screenshot_with_margin,
+    fn=render_fullpage_screenshot,
     inputs=gr.Textbox(lines=15, label="HTMLコード入力"),
-    outputs=gr.Image(type="pil", label="ページ全体 + 5%余白スクリーンショット"),
-    title="Full Page + Margin Screenshot App",
-    description="HTMLをヘッドレスブラウザでレンダリングし、上下左右に5%余白を含めて1枚の画像として取得します。"
+    outputs=gr.Image(type="pil", label="ページ全体のスクリーンショット"),
+    title="Full Page Screenshot App",
+    description="HTMLをヘッドレスブラウザでレンダリングし、ページ全体を1枚の画像として取得します（端に2%の余裕）。"
 )
 
 if __name__ == "__main__":