Spaces:

tomo2chin2
/

HTMLviewer

Paused

App Files Files Community

tomo2chin2 commited on Mar 24, 2025

Commit

b975c56

verified ·

1 Parent(s): 0774b51

Update app.py

Browse files

Files changed (1) hide show

app.py +114 -56

app.py CHANGED Viewed

@@ -1,68 +1,126 @@
 import gradio as gr
-import helium
 from selenium import webdriver
 from selenium.webdriver.chrome.options import Options
-from selenium.webdriver.chrome.service import Service  # Import Service
-from io import BytesIO
 from PIL import Image
-import os
-def capture_screenshot(url):
-    """
-    指定された URL のスクリーンショットを撮り、PIL Image オブジェクトとして返す。
-    """
     try:
-        # Chrome options for headless browsing
-        chrome_options = Options()
-        chrome_options.add_argument("--headless")  # Headless mode
-        chrome_options.add_argument("--no-sandbox")  # For security reasons on some platforms
-        chrome_options.add_argument("--disable-dev-shm-usage")  # Fixes /dev/shm out-of-memory issues
-        chrome_options.add_argument("--window-size=1024,768")  # Set a reasonable window size
-        # chrome_options.binary_location = '/usr/bin/google-chrome' # これは不要 or 間違い
-        # Use Service object (explicitly specify chromedriver path if needed)
-        # Hugging Face Spaces should handle chromedriver automatically,
-        # so we usually don't need to specify the path. But if it still fails,
-        # we can try to find it and specify.
-        # service = Service(executable_path="/path/to/chromedriver") # 通常は不要
-        service = Service() # これで動くはず
-        # Start the browser with helium (using the options and service)
-        driver = helium.start_chrome(options=chrome_options, service=service)
-        helium.go_to(url)
-        # Get screenshot as bytes
-        png_bytes = driver.get_screenshot_as_png()
-        # Convert bytes to PIL Image
-        image = Image.open(BytesIO(png_bytes))
-        return image
     except Exception as e:
-        # Handle errors gracefully.
-        return f"Error: {e}"  # Return the error message
     finally:
-        try:
-            helium.kill_browser()  # Always kill the browser
-        except:
-            pass
-# Gradio Interface
-if __name__ == '__main__':
-    iface = gr.Interface(
-        fn=capture_screenshot,
-        inputs=gr.Textbox(label="Enter URL", placeholder="https://www.example.com"),
-        outputs=gr.Image(type="pil", label="Screenshot"),
-        title="HTML Screenshot Capture",
-        description="Enter a URL to capture a screenshot of the webpage.",
-        examples=[
-            ["https://www.google.com"],
-            ["https://www.wikipedia.org"],
-            ["https://www.github.com"]
-        ],
     )
-    # Disable caching (to avoid potential caching-related errors during development)
-    iface.launch(server_name="0.0.0.0", server_port=7860, cache_examples=False)

 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()