HTMLviewer2_API / app.py
tomo2chin2's picture
Update app.py
e864d35 verified
raw
history blame
11 kB
import gradio as gr
from fastapi import FastAPI, HTTPException, Body
from fastapi.responses import StreamingResponse
from fastapi.staticfiles import StaticFiles
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from PIL import Image
from io import BytesIO
import tempfile
import time
import os
import logging
# ロギング設定
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
# --- Core Screenshot Logic ---
def render_fullpage_screenshot(html_code: str, extension_percentage: float) -> Image.Image:
"""
Renders HTML code to a full-page screenshot using Selenium.
Args:
html_code: The HTML source code string.
extension_percentage: Percentage of extra space to add vertically (e.g., 4 means 4% total).
Returns:
A PIL Image object of the screenshot. Returns a 1x1 black image on error.
"""
tmp_path = None # 初期化
driver = None # 初期化
# 1) Save HTML code to a temporary file
try:
with tempfile.NamedTemporaryFile(suffix=".html", delete=False, mode='w', encoding='utf-8') as tmp_file:
tmp_path = tmp_file.name
tmp_file.write(html_code)
logger.info(f"HTML saved to temporary file: {tmp_path}")
except Exception as e:
logger.error(f"Error writing temporary HTML file: {e}")
return Image.new('RGB', (1, 1), color=(0, 0, 0)) # エラー時は黒画像
# 2) Headless Chrome(Chromium) options
options = Options()
options.add_argument("--headless")
options.add_argument("--no-sandbox")
options.add_argument("--disable-dev-shm-usage")
options.add_argument("--force-device-scale-factor=1")
# Increase logging verbosity for debugging if needed
# options.add_argument("--enable-logging")
# options.add_argument("--v=1")
try:
logger.info("Initializing WebDriver...")
driver = webdriver.Chrome(options=options)
logger.info("WebDriver initialized.")
# 3) Load page with initial window size
driver.set_window_size(1200, 800)
file_url = "file://" + tmp_path
logger.info(f"Navigating to {file_url}")
driver.get(file_url)
# 4) Wait for page load
logger.info("Waiting for body element...")
WebDriverWait(driver, 15).until( # タイムアウトを少し延長
EC.presence_of_element_located((By.TAG_NAME, "body"))
)
logger.info("Body element found. Waiting for potential resource loading...")
time.sleep(3) # Wait a bit longer for external resources/scripts
# 5) Hide scrollbars via CSS
try:
driver.execute_script(
"document.documentElement.style.overflow = 'hidden';"
"document.body.style.overflow = 'hidden';"
)
logger.info("Scrollbars hidden via JS.")
except Exception as e:
logger.warning(f"Could not hide scrollbars via JS: {e}")
# 6) Get full page dimensions accurately
try:
scroll_width = driver.execute_script(
"return Math.max(document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.offsetWidth)"
)
scroll_height = driver.execute_script(
"return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight)"
)
logger.info(f"Detected dimensions: width={scroll_width}, height={scroll_height}")
# Ensure minimum dimensions to avoid errors
scroll_width = max(scroll_width, 100) # 最小幅を設定
scroll_height = max(scroll_height, 100) # 最小高さを設定
except Exception as e:
logger.error(f"Error getting page dimensions: {e}")
# フォールバックとしてデフォルト値を設定
scroll_width = 1200
scroll_height = 800
logger.warning(f"Falling back to dimensions: width={scroll_width}, height={scroll_height}")
# 7) Calculate adjusted height with user-specified margin
adjusted_height = int(scroll_height * (1 + extension_percentage / 100.0))
# Ensure adjusted height is not excessively large or small
adjusted_height = max(adjusted_height, scroll_height, 100) # 最小高さを確保
logger.info(f"Adjusted height calculated: {adjusted_height} (extension: {extension_percentage}%)")
# 8) Set window size to full page dimensions (width) and adjusted height
logger.info(f"Resizing window to: width={scroll_width}, height={adjusted_height}")
driver.set_window_size(scroll_width, adjusted_height)
logger.info("Waiting for layout stabilization after resize...")
time.sleep(3) # Wait longer for layout stabilization
# Scroll to top just in case
try:
driver.execute_script("window.scrollTo(0, 0)")
time.sleep(1)
logger.info("Scrolled to top.")
except Exception as e:
logger.warning(f"Could not scroll to top: {e}")
# 9) Take screenshot
logger.info("Taking screenshot...")
png = driver.get_screenshot_as_png()
logger.info("Screenshot taken successfully.")
# Convert to PIL Image
img = Image.open(BytesIO(png))
return img
except Exception as e:
logger.error(f"An error occurred during screenshot generation: {e}", exc_info=True)
return Image.new('RGB', (1, 1), color=(0, 0, 0)) # Return black 1x1 image on error
finally:
logger.info("Cleaning up...")
if driver:
try:
driver.quit()
logger.info("WebDriver quit successfully.")
except Exception as e:
logger.error(f"Error quitting WebDriver: {e}")
if tmp_path and os.path.exists(tmp_path):
try:
os.remove(tmp_path)
logger.info(f"Temporary file {tmp_path} removed.")
except Exception as e:
logger.error(f"Error removing temporary file {tmp_path}: {e}")
# --- FastAPI Setup ---
app = FastAPI()
# CORS設定を追加
app.add_middleware(
CORSMiddleware,
allow_origins=["*"],
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
# 静的ファイルのサービング設定
# Gradioのディレクトリを探索してアセットを見つける
gradio_dir = os.path.dirname(gr.__file__)
logger.info(f"Gradio version: {gr.__version__}")
logger.info(f"Gradio directory: {gradio_dir}")
# 基本的な静的ファイルディレクトリをマウント
static_dir = os.path.join(gradio_dir, "templates", "frontend", "static")
if os.path.exists(static_dir):
logger.info(f"Mounting static directory: {static_dir}")
app.mount("/static", StaticFiles(directory=static_dir), name="static")
# _appディレクトリを探す(新しいSvelteKitベースのフロントエンド用)
app_dir = os.path.join(gradio_dir, "templates", "frontend", "_app")
if os.path.exists(app_dir):
logger.info(f"Mounting _app directory: {app_dir}")
app.mount("/_app", StaticFiles(directory=app_dir), name="_app")
# assetsディレクトリを探す
assets_dir = os.path.join(gradio_dir, "templates", "frontend", "assets")
if os.path.exists(assets_dir):
logger.info(f"Mounting assets directory: {assets_dir}")
app.mount("/assets", StaticFiles(directory=assets_dir), name="assets")
# cdnディレクトリがあれば追加
cdn_dir = os.path.join(gradio_dir, "templates", "cdn")
if os.path.exists(cdn_dir):
logger.info(f"Mounting cdn directory: {cdn_dir}")
app.mount("/cdn", StaticFiles(directory=cdn_dir), name="cdn")
# Pydantic model for API request body validation
class ScreenshotRequest(BaseModel):
html_code: str
extension_percentage: float = 8.0 # Default value same as Gradio slider
# API Endpoint for screenshot generation
@app.post("/api/screenshot",
response_class=StreamingResponse,
tags=["Screenshot"],
summary="Render HTML to Full Page Screenshot",
description="Takes HTML code and an optional vertical extension percentage, renders it using a headless browser, and returns the full-page screenshot as a PNG image.")
async def api_render_screenshot(request: ScreenshotRequest):
"""
API endpoint to render HTML and return a screenshot.
"""
try:
logger.info(f"API request received. Extension: {request.extension_percentage}%")
# Run the blocking Selenium code in a separate thread (FastAPI handles this)
pil_image = render_fullpage_screenshot(
request.html_code,
request.extension_percentage
)
if pil_image.size == (1, 1):
logger.error("Screenshot generation failed, returning 1x1 image.")
# Optionally return a proper error response instead of 1x1 image
# raise HTTPException(status_code=500, detail="Failed to generate screenshot")
# Convert PIL Image to PNG bytes
img_byte_arr = BytesIO()
pil_image.save(img_byte_arr, format='PNG')
img_byte_arr.seek(0) # Go to the start of the BytesIO buffer
logger.info("Returning screenshot as PNG stream.")
return StreamingResponse(img_byte_arr, media_type="image/png")
except Exception as e:
logger.error(f"API Error: {e}", exc_info=True)
raise HTTPException(status_code=500, detail=f"Internal Server Error: {e}")
# --- Gradio Interface Definition ---
iface = gr.Interface(
fn=render_fullpage_screenshot,
inputs=[
gr.Textbox(lines=15, label="HTMLコード入力"),
gr.Slider(minimum=0, maximum=20, step=1.0, value=8, label="上下高さ拡張率(%)")
],
outputs=gr.Image(type="pil", label="ページ全体のスクリーンショット"),
title="Full Page Screenshot (高さ拡張調整可能)",
description="HTMLをヘッドレスブラウザでレンダリングし、ページ全体を1枚の画像として取得します。上下のみユーザー指定の余裕(%)を追加します。APIエンドポイントは /api/screenshot で利用可能です。",
allow_flagging="never",
theme=gr.themes.Base() # 明示的にテーマを指定
)
# --- Mount Gradio App onto FastAPI ---
app = gr.mount_gradio_app(app, iface, path="/")
# --- Run with Uvicorn (for local testing) ---
if __name__ == "__main__":
import uvicorn
logger.info("Starting Uvicorn server for local development...")
uvicorn.run(app, host="0.0.0.0", port=7860)