Update app.py

app.py

@@ -10,42 +10,52 @@ import tempfile
 import time
 import os
 
-def render_html_to_image(html_code):
+def render_fullpage_screenshot(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()
 
-    # ヘッドレスChrome(Chromium)起動オプションを設定
+    # ヘッドレスChrome起動オプション
     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")  # スケールファクター固定
+    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)
 
-        # ローカルHTMLを開く
+        # まずは適当なウィンドウサイズでページを読み込む
+        driver.set_window_size(1200, 800)
         driver.get("file://" + tmp_path)
 
-        # ---- 待機処理 (1) 明示的待機で「body」タグの読み込み完了を待つ ----
+        # ページロード完了を待つ
         WebDriverWait(driver, 10).until(
             EC.presence_of_element_located((By.TAG_NAME, "body"))
         )
+        # さらにフォントや外部リソース読み込みの安定化のため少し待機
+        time.sleep(2)
+
+        # ---- スクロールバーを非表示にする（必要なら）----
+        driver.execute_script(
+            "document.documentElement.style.overflow = 'hidden';"
+            "document.body.style.overflow = 'hidden';"
+        )
+
+        # ---- ページ全体の高さと幅を取得してウィンドウサイズを再設定 ----
+        scroll_width = driver.execute_script("return document.body.scrollWidth")
+        scroll_height = driver.execute_script("return document.body.scrollHeight")
 
-        # ---- 待機処理 (2) 追加のスリープでフォント等の読み込みをさらに確実化 ----
+        driver.set_window_size(scroll_width, scroll_height)
+        # レイアウトが変わる可能性があるので再度待機
         time.sleep(2)
 
-        # スクリーンショットをPNGバイナリとして取得
+        # 最終的にページ全体をスクリーンショット
         png = driver.get_screenshot_as_png()
 
     except Exception as e:
-        # 何らかのエラーが発生した場合は1x1ピクセルの黒画像を返すなどのfallback
         return Image.new('RGB', (1, 1), color=(0, 0, 0))
 
     finally:
@@ -53,16 +63,15 @@ def render_html_to_image(html_code):
         if os.path.exists(tmp_path):
             os.remove(tmp_path)
 
-    # PNGバイナリをPIL.Imageに変換して返す
     return Image.open(BytesIO(png))
 
-# Gradioインターフェースの定義
+# Gradioインターフェース
 iface = gr.Interface(
-    fn=render_html_to_image,
+    fn=render_fullpage_screenshot,
     inputs=gr.Textbox(lines=15, label="HTMLコード入力"),
-    outputs=gr.Image(type="pil", label="レンダリング結果のスクリーンショット"),
-    title="HTMLレンダリング Screenshot アプリ",
-    description="入力したHTMLをヘッドレスブラウザでレンダリングしてスクリーンショットを表示します。"
+    outputs=gr.Image(type="pil", label="ページ全体のスクリーンショット"),
+    title="Full Page Screenshot App",
+    description="HTMLをヘッドレスブラウザでレンダリングし、ページ全体を1枚の画像として取得します。"
 )
 
 if __name__ == "__main__":