Spaces:

tomo2chin2
/

HTMLviewer

Paused

App Files Files Community

tomo2chin2 commited on Mar 24, 2025

Commit

b0d5ffc

verified ·

1 Parent(s): 3e66b8f

Update app.py

Browse files

Files changed (1) hide show

app.py +105 -113

app.py CHANGED Viewed

@@ -1,126 +1,118 @@
 import gradio as gr
-import os
-import tempfile
 from selenium import webdriver
 from selenium.webdriver.chrome.options import Options
-from selenium.common.exceptions import WebDriverException
 import time
 import base64
-from PIL import Image
-import io
-def setup_driver():
-    """ヘッドレスChromeドライバーをセットアップして返す"""
-    options = webdriver.ChromeOptions()
-    options.add_argument("--headless")
     options.add_argument("--no-sandbox")
     options.add_argument("--disable-dev-shm-usage")
-    # 一貫したスクリーンショットのためにウィンドウサイズを設定
-    options.add_argument("--window-size=1280,1024")
     try:
         driver = webdriver.Chrome(options=options)
-        return driver
-    except WebDriverException as e:
-        print(f"WebDriverの初期化に失敗しました: {e}")
-        return None
-def capture_screenshot(html_content, css_content=""):
-    """SeleniumでレンダリングされたHTMLコンテンツのスクリーンショットを撮影する"""
-    driver = setup_driver()
-    if not driver:
-        return None, "Chrome WebDriverの初期化に失敗しました"
-    try:
-        # 一時的なHTMLファイルを作成
-        with tempfile.NamedTemporaryFile(suffix='.html', delete=False) as f:
-            html_file = f.name
-            combined_html = f"""
-            <!DOCTYPE html>
-            <html>
-            <head>
-                <meta charset="UTF-8">
-                <style>
-                {css_content}
-                </style>
-            </head>
-            <body>
-            {html_content}
-            </body>
-            </html>
-            """
-            f.write(combined_html.encode('utf-8'))
-        # HTMLファイルに移動
-        driver.get(f"file://{html_file}")
-        time.sleep(1)  # レンダリングの時間を確保
-        # スクリーンショットを撮影
-        screenshot = tempfile.NamedTemporaryFile(suffix='.png', delete=False)
-        driver.save_screenshot(screenshot.name)
-        screenshot.close()
-        # 表示用に画像を読み込む
-        img = Image.open(screenshot.name)
-        # 後始末
-        os.unlink(html_file)
-        return img, None
     except Exception as e:
-        return None, f"スクリーンショットの撮影時にエラーが発生しました: {str(e)}"
-    finally:
         driver.quit()
-def render_html(html_code, css_code=""):
-    """HTMLコードをレンダリングしてスクリーンショットを撮影"""
-    # HTMLを画像に変換
-    image, error = capture_screenshot(html_code, css_code)
-    if error:
-        return None, gr.HTML(f"<div style='color: red;'>{error}</div>")
-    # Gradioの HTML コンポーネントでHTMLを表示
-    html_display = f"""
-    <div style="border: 1px solid #ddd; padding: 10px; margin-bottom: 20px;">
-        <h3>HTMLプレビュー:</h3>
-        <iframe srcdoc="{html_code.replace('"', '&quot;')}"
-                style="width: 100%; height: 300px; border: 1px solid #ddd;"></iframe>
-    </div>
-    """
-    return image, gr.HTML(html_display)
-# Gradioインターフェースを作成
-with gr.Blocks() as demo:
-    gr.Markdown("# HTMLレンダラー（スクリーンショット機能付き）")
-    gr.Markdown("以下にHTMLコードを入力して、ヘッドレスChromeでレンダリングしスクリーンショットを撮影します。")
-    with gr.Row():
-        with gr.Column():
-            html_input = gr.Textbox(
-                label="HTMLコード",
-                placeholder="ここにHTMLコードを入力...",
-                lines=10,
-                value="<h1>こんにちは、世界！</h1><p>これはSeleniumとヘッドレスChromeによるGradioのテストです。</p>"
-            )
-            css_input = gr.Textbox(
-                label="CSSコード（オプション）",
-                placeholder="ここにCSSコードを入力...",
-                lines=5,
-                value="body { font-family: 'Noto Sans JP', sans-serif; margin: 20px; } h1 { color: blue; }"
-            )
-            render_button = gr.Button("レンダリングしてスクリーンショットを撮影")
-        with gr.Column():
-            screenshot_output = gr.Image(label="スクリーンショット")
-            html_preview = gr.HTML(label="HTMLプレビュー")
-    render_button.click(
-        render_html,
-        inputs=[html_input, css_input],
-        outputs=[screenshot_output, html_preview]
-    )
-# アプリを起動
-demo.launch()

 import gradio as gr
 from selenium import webdriver
 from selenium.webdriver.chrome.options import Options
+from selenium.common.exceptions import WebDriverException, TimeoutException
+import tempfile
+import os
+from PIL import Image
 import time
 import base64
+import validators  # URLバリデーション用
+def take_screenshot(url_or_html, wait_time=3, screenshot_type="url"):
+    """
+    URLまたはHTMLコードからフルページスクリーンショットを取得する関数。
+    Args:
+        url_or_html (str): スクリーンショットを取得するURLまたはHTMLコード。
+        wait_time (int): ページ読み込みの待機時間（秒）。
+        screenshot_type (str): "url" または "html" を指定。
+    Returns:
+        tuple: (PIL.Image.Image, str) スクリーンショット画像とメッセージのタプル。
+               エラーの場合は (None, str) を返す。
+    """
+    options = Options()
+    options.add_argument("--headless=new")  # 新しいヘッドレスモード
     options.add_argument("--no-sandbox")
     options.add_argument("--disable-dev-shm-usage")
+    options.add_argument("--disable-gpu")
+    options.add_argument("--window-position=-2400,-2400") # Windowsでのバグ回避
     try:
         driver = webdriver.Chrome(options=options)
+        if screenshot_type == "url":
+            # URLバリデーション
+            if not validators.url(url_or_html):
+                raise ValueError("無効なURLです。")
+            driver.get(url_or_html)
+        elif screenshot_type == "html":
+            # HTMLをbase64にエンコードしてdata URLとして読み込む
+            html_base64 = base64.b64encode(url_or_html.encode('utf-8')).decode('utf-8')
+            driver.get(f"data:text/html;base64,{html_base64}")
+        else:
+            raise ValueError("screenshot_typeは'url'または'html'を指定してください。")
+        time.sleep(wait_time)  # ページの読み込みを待機
+        # フルページサイズを取得 (JavaScript)
+        width = driver.execute_script(
+            "return Math.max(document.body.scrollWidth, document.body.offsetWidth, "
+            "document.documentElement.clientWidth, document.documentElement.scrollWidth, "
+            "document.documentElement.offsetWidth);"
+        )
+        height = driver.execute_script(
+            "return Math.max(document.body.scrollHeight, document.body.offsetHeight, "
+            "document.documentElement.clientHeight, document.documentElement.scrollHeight, "
+            "document.documentElement.offsetHeight);"
+        )
+        # ウィンドウサイズを設定（巨大なページに対する制限付き）
+        driver.set_window_size(min(width + 100, 1920), min(height + 100, 5000))  # 最大幅1920px, 最大高さ5000px
+        time.sleep(1) # レンダリング待機
+        # スクリーンショットを一時ファイルに保存
+        with tempfile.NamedTemporaryFile(suffix=".png", delete=False) as temp:
+            temp_filename = temp.name
+        driver.save_screenshot(temp_filename)
+        driver.quit()
+        # 画像を読み込んで返す
+        image = Image.open(temp_filename)
+        os.unlink(temp_filename)  # 一時ファイルを削除
+        return image, "スクリーンショットを取得しました。"
+    except (WebDriverException, TimeoutException, ValueError) as e:
+        driver.quit()
+        return None, f"エラー: {str(e)}"
     except Exception as e:
         driver.quit()
+        return None, f"予期しないエラー: {str(e)}"
+# Gradioインターフェース (URLとHTMLの両方に対応)
+with gr.Blocks(title="Web Screenshot Tool") as demo:
+    gr.Markdown("# ウェブページ & HTML スクリーンショットツール")
+    gr.Markdown("URLまたはHTMLコードを入力して、フルページのスクリーンショットを取得します。")
+    with gr.Tab("URLから取得"):
+        url_input = gr.Textbox(label="URL", placeholder="https://example.com")
+        url_wait_time = gr.Slider(minimum=1, maximum=10, value=3, step=1, label="待機時間 (秒)")
+        url_button = gr.Button("スクリーンショットを取得 (URL)")
+        url_image_out = gr.Image(label="スクリーンショット (URL)")
+        url_text_out = gr.Textbox(label="結果 (URL)")
+        url_button.click(
+            take_screenshot,
+            inputs=[url_input, url_wait_time, gr.State("url")],  # "url"を指定
+            outputs=[url_image_out, url_text_out]
+        )
+    with gr.Tab("HTMLから取得"):
+        html_input = gr.Textbox(label="HTMLコード", placeholder="<p>Hello, world!</p>", lines=5)
+        html_wait_time = gr.Slider(minimum=1, maximum=10, value=3, step=1, label="待機時間 (秒)")
+        html_button = gr.Button("スクリーンショットを取得 (HTML)")
+        html_image_out = gr.Image(label="スクリーンショット (HTML)")
+        html_text_out = gr.Textbox(label="結果 (HTML)")
+        html_button.click(
+            take_screenshot,
+            inputs=[html_input, html_wait_time, gr.State("html")],  # "html"を指定
+            outputs=[html_image_out, html_text_out]
+        )
+demo.launch()