Spaces:
Paused
Paused
| # -*- coding: utf-8 -*- | |
| 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 | |
| # TimeoutException と JavascriptException をインポート | |
| from selenium.common.exceptions import TimeoutException, JavascriptException | |
| from PIL import Image | |
| from io import BytesIO | |
| import tempfile | |
| import time | |
| import os | |
| import logging | |
| # 正しいGemini関連のインポート | |
| import google.generativeai as genai | |
| # ロギング設定 | |
| logging.basicConfig(level=logging.INFO) | |
| logger = logging.getLogger(__name__) | |
| # --- Gemini統合 --- | |
| class GeminiRequest(BaseModel): | |
| """Geminiへのリクエストデータモデル""" | |
| text: str | |
| extension_percentage: float = 6.0 # デフォルト値6% | |
| temperature: float = 0.3 # デフォルト値を0.3に下げて創造性を抑制 | |
| trim_whitespace: bool = True # 余白トリミングオプション（デフォルト有効） | |
| class ScreenshotRequest(BaseModel): | |
| """スクリーンショットリクエストモデル""" | |
| html_code: str | |
| extension_percentage: float = 6.0 # デフォルト値6% | |
| trim_whitespace: bool = True # 余白トリミングオプション（デフォルト有効） | |
| # HTMLのFont Awesomeレイアウトを改善する関数 | |
| def enhance_font_awesome_layout(html_code): | |
| """Font Awesomeレイアウトを改善するCSSを追加""" | |
| # CSSを追加 | |
| fa_fix_css = """ | |
| <style> | |
| /* Font Awesomeアイコンのレイアウト修正 */ | |
| [class*="fa-"] { | |
| display: inline-block !important; | |
| margin-right: 8px !important; | |
| vertical-align: middle !important; | |
| } | |
| /* テキスト内のアイコン位置調整 */ | |
| h1 [class*="fa-"], h2 [class*="fa-"], h3 [class*="fa-"], | |
| h4 [class*="fa-"], h5 [class*="fa-"], h6 [class*="fa-"] { | |
| vertical-align: middle !important; | |
| margin-right: 10px !important; | |
| } | |
| /* 特定パターンの修正 */ | |
| .fa + span, .fas + span, .far + span, .fab + span, | |
| span + .fa, span + .fas, span + .far, span + .fab { | |
| display: inline-block !important; | |
| margin-left: 5px !important; | |
| } | |
| /* カード内アイコン修正 */ | |
| .card [class*="fa-"], .card-body [class*="fa-"] { | |
| float: none !important; | |
| clear: none !important; | |
| position: relative !important; | |
| } | |
| /* アイコンと文字が重なる場合の調整 */ | |
| li [class*="fa-"], p [class*="fa-"] { | |
| margin-right: 10px !important; | |
| } | |
| /* インラインアイコンのスペーシング */ | |
| .inline-icon { | |
| display: inline-flex !important; | |
| align-items: center !important; | |
| justify-content: flex-start !important; | |
| } | |
| /* アイコン後のテキスト */ | |
| [class*="fa-"] + span { | |
| display: inline-block !important; | |
| vertical-align: middle !important; | |
| } | |
| </style> | |
| """ | |
| # headタグがある場合はその中に追加 | |
| if '<head>' in html_code: | |
| return html_code.replace('</head>', f'{fa_fix_css}</head>') | |
| # HTMLタグがある場合はその後に追加 | |
| elif '<html' in html_code: | |
| head_end = html_code.find('</head>') | |
| if head_end > 0: | |
| return html_code[:head_end] + fa_fix_css + html_code[head_end:] | |
| else: | |
| body_start = html_code.find('<body') | |
| if body_start > 0: | |
| return html_code[:body_start] + f'<head>{fa_fix_css}</head>' + html_code[body_start:] | |
| # どちらもない場合は先頭に追加 | |
| return f'<html><head>{fa_fix_css}</head>' + html_code + '</html>' | |
| def generate_html_from_text(text, temperature=0.3): | |
| """テキストからHTMLを生成する""" | |
| try: | |
| # APIキーの取得と設定 | |
| api_key = os.environ.get("GEMINI_API_KEY") | |
| if not api_key: | |
| logger.error("GEMINI_API_KEY 環境変数が設定されていません") | |
| raise ValueError("GEMINI_API_KEY 環境変数が設定されていません") | |
| # モデル名の取得（環境変数から、なければデフォルト値） | |
| model_name = os.environ.get("GEMINI_MODEL", "gemini-1.5-pro") | |
| logger.info(f"使用するGeminiモデル: {model_name}") | |
| # Gemini APIの設定 | |
| genai.configure(api_key=api_key) | |
| # システムプロンプト（変更なし） | |
| system_instruction = """# グラフィックレコーディング風インフォグラフィック変換プロンプト V2 | |
| ## 目的 | |
| 以下の内容を、超一流デザイナーが作成したような、日本語で完璧なグラフィックレコーディング風のHTMLインフォグラフィックに変換してください。情報設計とビジュアルデザインの両面で最高水準を目指します。 | |
| 手書き風の図形やFont Awesomeアイコンを大きく活用して内容を視覚的かつ直感的に表現します。 | |
| ## デザイン仕様 | |
| ### 1. カラースキーム | |
| ``` | |
| <palette> | |
| <color name='MysticLibrary-1' rgb='2E578C' r='46' g='87' b='140' /> | |
| <color name='MysticLibrary-2' rgb='182D40' r='24' g='45' b='64' /> | |
| <color name='MysticLibrary-3' rgb='BF807A' r='191' g='128' b='122' /> | |
| <color name='MysticLibrary-4' rgb='592A2A' r='89' g='42' b='42' /> | |
| <color name='MysticLibrary-5' rgb='F2F2F2' r='242' g='242' b='242' /> | |
| </palette> | |
| ``` | |
| ### 2. グラフィックレコーディング要素 | |
| - 左上から右へ、上から下へと情報を順次配置 | |
| - 日本語の手書き風フォントの使用（Yomogi, Zen Kurenaido, Kaisei Decol） | |
| - 手描き風の囲み線、矢印、バナー、吹き出し | |
| - テキストと視覚要素（Font Awesomeアイコン、シンプルな図形）の組み合わせ | |
| - Font Awesomeアイコンは各セクションの内容を表現するものを大きく（2x〜3x）表示 | |
| - キーワードごとに関連するFont Awesomeアイコンを隣接配置 | |
| - キーワードの強調（色付き下線、マーカー効果、Font Awesomeによる装飾） | |
| - 関連する概念を線や矢印で接続し、接続部にもFont Awesomeアイコン（fa-arrow-right, fa-connection等）を挿入 | |
| - Font Awesomeアニメーション効果（fa-beat, fa-bounce, fa-fade, fa-flip, fa-shake, fa-spin）を適切に活用 | |
| - 重要なポイントには「fa-circle-exclamation」や「fa-lightbulb」などのアイコンを目立つ大きさで配置 | |
| - 数値やデータには「fa-chart-line」や「fa-percent」などの関連アイコンを添える | |
| - 感情や状態を表すには表情アイコン（fa-face-smile, fa-face-frown等）を活用 | |
| - アイコンにホバー効果（色変化、サイズ変化）を付与 | |
| - 背景にはFont Awesomeの薄いパターンを配置（fa-shapes等を透過度を下げて配置） | |
| ### 3. アニメーション効果 | |
| - Font Awesomeアイコンに連動するアニメーション（fa-beat, fa-bounce, fa-fade等） | |
| - 重要キーワード出現時のハイライト効果（グラデーション変化） | |
| - 接続線や矢印の流れるようなアニメーション | |
| - アイコンの回転・拡大縮小アニメーション（特に注目させたい箇所） | |
| - 背景グラデーションの緩やかな変化 | |
| - スクロールに連動した要素の出現効果 | |
| - クリック/タップでアイコンが反応する効果 | |
| ### 4. タイポグラフィ | |
| - タイトル：32px、グラデーション効果、太字、Font Awesomeアイコンを左右に配置 | |
| - サブタイトル：16px、#475569、関連するFont Awesomeアイコンを添える | |
| - セクション見出し：18px、# 1e40af、左側にFont Awesomeアイコンを必ず配置し、アイコンにはアニメーション効果 | |
| - 本文：14px、#334155、行間1.4、重要キーワードには関連するFont Awesomeアイコンを小さく添える | |
| - フォント指定： | |
| ```html | |
| <style> | |
| @ import url('https ://fonts.googleapis.com/css2?family=Kaisei+Decol&family=Yomogi&family=Zen+Kurenaido&display=swap'); | |
| @ import url('https ://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css'); | |
| </style> | |
| ``` | |
| ### 5. レイアウト | |
| - ヘッダー：左揃えタイトル（大きなFont Awesomeアイコンを添える）＋右揃え日付/出典 | |
| - 2カラム構成：左側50%、右側50% | |
| - カード型コンポーネント：白背景、角丸12px、微細シャドウ、右上にFont Awesomeアイコンを配置 | |
| - セクション間の適切な余白と階層構造（階層を示すFont Awesomeアイコンを活用） | |
| - 適切にグラスモーフィズムを活用（背後にぼかしたFont Awesomeアイコンを配置） | |
| - 横幅は100% | |
| - 重要な要素は中央寄り、補足情報は周辺部に配置 | |
| ### 重要なレイアウト注意事項 | |
| - Font Awesomeアイコンと文字が重ならないよう適切なマージンを設定する | |
| - アイコンには必ず`margin-right: 10px;`や`margin-left: 10px;`などの余白を設定する | |
| - アイコンと文字列は必ず`display: inline-block;`または`display: inline-flex;`で配置し、`align-items: center;`を使用する | |
| - 複数のアイコンを配置する場合は十分な余白を確保する | |
| - レイアウト崩れを防ぐために、親要素には`overflow: hidden;`を適用する | |
| - アイコンの配置はコンテンツフローを妨げないよう注意する | |
| - カード内でのアイコン配置は、絶対位置指定ではなく相対位置で設定する | |
| - モバイル表示も考慮し、レスポンシブ対応を徹底する | |
| ## グラフィックレコーディング表現技法 | |
| - テキストと視覚要素のバランスを重視（文字情報の50%以上をFont Awesomeアイコンで視覚的に補完） | |
| - キーワードを囲み線や色で強調し、関連するFont Awesomeアイコンを必ず添える | |
| - 概念ごとに最適なFont Awesomeアイコンを選定（抽象的な概念には複数の関連アイコンを組み合わせて表現） | |
| - 数値データは簡潔なグラフや図表で表現し、データ種類に応じたFont Awesomeアイコン（fa-chart-pie, fa-chart-column等）を配置 | |
| - 接続線や矢印で情報間の関係性を明示し、関係性の種類に応じたアイコン（fa-link, fa-code-branch等）を添える | |
| - 余白を効果的に活用して視認性を確保（余白にも薄いFont Awesomeパターンを配置可） | |
| - コントラストと色の使い分けでメリハリを付け、カラースキームに沿ったアイコン色を活用 | |
| ## Font Awesomeアイコン活用ガイドライン | |
| - 概念カテゴリー別の推奨アイコン： | |
| - 時間・順序：fa-clock, fa-hourglass, fa-calendar, fa-timeline | |
| - 場所・位置：fa-location-dot, fa-map, fa-compass, fa-globe | |
| - 人物・組織：fa-user, fa-users, fa-building, fa-sitemap | |
| - 行動・活動：fa-person-running, fa-gears, fa-hammer, fa-rocket | |
| - 思考・アイデア：fa-brain, fa-lightbulb, fa-thought-bubble, fa-comments | |
| - 感情・状態：fa-face-smile, fa-face-sad-tear, fa-heart, fa-temperature-half | |
| - 成長・変化：fa-seedling, fa-arrow-trend-up, fa-chart-line, fa-diagram-project | |
| - 問題・課題：fa-triangle-exclamation, fa-circle-question, fa-bug, fa-ban | |
| - 解決・成功：fa-check, fa-trophy, fa-handshake, fa-key | |
| - アイコンサイズの使い分け： | |
| - 主要概念：3x（fa-3x） | |
| - 重要キーワード：2x（fa-2x） | |
| - 補足情報：1x（標準サイズ） | |
| - 装飾的要素：lg（fa-lg） | |
| - アニメーション効果の適切な使い分け： | |
| - 注目喚起：fa-beat, fa-shake | |
| - 継続的プロセス：fa-spin, fa-pulse | |
| - 状態変化：fa-flip, fa-fade | |
| - 新規情報：fa-bounce | |
| ## 全体的な指針 | |
| - 読み手が自然に視線を移動できる配置（Font Awesomeアイコンで視線誘導） | |
| - 情報の階層と関連性を視覚的に明確化（階層ごとにアイコンのサイズや色を変える） | |
| - 手書き風の要素とFont Awesomeアイコンを組み合わせて親しみやすさとプロフェッショナル感を両立 | |
| - 大きなFont Awesomeアイコンを活用した視覚的な記憶に残るデザイン（各セクションに象徴的なアイコンを配置） | |
| - フッターに出典情報と関連するFont Awesomeアイコン（fa-book, fa-citation等）を明記 | |
| ## 変換する文章/記事 | |
| ーーー＜ユーザーが入力（または添付）＞ーーー""" | |
| # モデルを初期化して処理 | |
| logger.info(f"Gemini APIにリクエストを送信: テキスト長さ = {len(text)}, 温度 = {temperature}") | |
| # モデル初期化とフォールバック処理 | |
| try: | |
| model = genai.GenerativeModel(model_name) | |
| except Exception as e: | |
| fallback_model = "gemini-pro" | |
| logger.warning(f"{model_name}が利用できません: {e}, フォールバックモデル{fallback_model}を使用します") | |
| model = genai.GenerativeModel(fallback_model) | |
| # 生成設定 (変更なし) | |
| generation_config = { | |
| "temperature": temperature, | |
| "top_p": 0.7, | |
| "top_k": 20, | |
| "max_output_tokens": 8192, | |
| "candidate_count": 1 | |
| } | |
| # 安全設定 (変更なし) | |
| safety_settings = [ | |
| {"category": "HARM_CATEGORY_HARASSMENT", "threshold": "BLOCK_MEDIUM_AND_ABOVE"}, | |
| {"category": "HARM_CATEGORY_HATE_SPEECH", "threshold": "BLOCK_MEDIUM_AND_ABOVE"}, | |
| {"category": "HARM_CATEGORY_SEXUALLY_EXPLICIT", "threshold": "BLOCK_MEDIUM_AND_ABOVE"}, | |
| {"category": "HARM_CATEGORY_DANGEROUS_CONTENT", "threshold": "BLOCK_MEDIUM_AND_ABOVE"} | |
| ] | |
| # プロンプト構築 | |
| prompt = f"{system_instruction}\n\n{text}" | |
| # コンテンツ生成 | |
| response = model.generate_content( | |
| prompt, | |
| generation_config=generation_config, | |
| safety_settings=safety_settings | |
| ) | |
| # レスポンスからHTMLを抽出 (変更なし) | |
| raw_response = response.text | |
| html_start = raw_response.find("```html") | |
| html_end = raw_response.rfind("```") | |
| if html_start != -1 and html_end != -1 and html_start < html_end: | |
| html_start += 7 | |
| html_code = raw_response[html_start:html_end].strip() | |
| logger.info(f"HTMLの生成に成功: 長さ = {len(html_code)}") | |
| html_code = enhance_font_awesome_layout(html_code) | |
| logger.info("Font Awesomeレイアウトの最適化を適用しました") | |
| return html_code | |
| else: | |
| logger.warning("レスポンスから```html```タグが見つかりませんでした。全テキストを返します。") | |
| return raw_response | |
| except Exception as e: | |
| logger.error(f"HTML生成中にエラーが発生: {e}", exc_info=True) | |
| raise Exception(f"Gemini APIでのHTML生成に失敗しました: {e}") | |
| # 画像から余分な空白領域をトリミングする関数 (変更なし) | |
| def trim_image_whitespace(image, threshold=250, padding=10): | |
| gray = image.convert('L') | |
| data = gray.getdata() | |
| width, height = gray.size | |
| min_x, min_y = width, height | |
| max_x = max_y = 0 | |
| pixels = list(data) | |
| pixels = [pixels[i * width:(i + 1) * width] for i in range(height)] | |
| for y in range(height): | |
| for x in range(width): | |
| if pixels[y][x] < threshold: | |
| min_x = min(min_x, x) | |
| min_y = min(min_y, y) | |
| max_x = max(max_x, x) | |
| max_y = max(max_y, y) | |
| if min_x > max_x or min_y > max_y: | |
| logger.warning("トリミング領域が見つかりません。元の画像を返します。") | |
| return image | |
| min_x = max(0, min_x - padding) | |
| min_y = max(0, min_y - padding) | |
| max_x = min(width - 1, max_x + padding) | |
| max_y = min(height - 1, max_y + padding) | |
| trimmed = image.crop((min_x, min_y, max_x + 1, max_y + 1)) | |
| logger.info(f"画像をトリミングしました: 元サイズ {width}x{height} → トリミング後 {trimmed.width}x{trimmed.height}") | |
| return trimmed | |
| # --- Core Screenshot Logic --- | |
| def render_fullpage_screenshot(html_code: str, extension_percentage: float = 6.0, | |
| trim_whitespace: bool = True) -> Image.Image: | |
| """ | |
| Renders HTML code to a full-page screenshot using Selenium. | |
| """ | |
| 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 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") | |
| options.add_argument("--disable-features=NetworkService") | |
| options.add_argument("--dns-prefetch-disable") | |
| try: | |
| logger.info("Initializing WebDriver...") | |
| driver = webdriver.Chrome(options=options) | |
| logger.info("WebDriver initialized.") | |
| # 3) Initial window size and navigation (変更なし) | |
| initial_width = 1200 | |
| initial_height = 1000 | |
| driver.set_window_size(initial_width, initial_height) | |
| file_url = "file://" + tmp_path | |
| logger.info(f"Navigating to {file_url}") | |
| driver.get(file_url) | |
| # 4) Wait for body (変更なし) | |
| 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) | |
| # 5) Font Awesome and resource check (修正: 即時実行関数 + コメント削除) | |
| try: | |
| resource_check_script = """ | |
| return (function() { | |
| return new Promise((resolve) => { | |
| const checkFontAwesome = () => { | |
| const icons = document.querySelectorAll('.fa, .fas, .far, .fab, [class*="fa-"]'); | |
| if (icons.length > 0) { | |
| document.fonts.ready.then(() => { | |
| setTimeout(resolve, 1000); | |
| }); | |
| } else { | |
| document.fonts.ready.then(() => setTimeout(resolve, 500)); | |
| } | |
| }; | |
| if (document.readyState === 'complete') { | |
| checkFontAwesome(); | |
| } else { | |
| window.addEventListener('load', checkFontAwesome); | |
| } | |
| }); | |
| })(); | |
| """ | |
| logger.info("Waiting for Font Awesome and other resources to load...") | |
| driver.set_script_timeout(15) | |
| # execute_async_script に渡す前に文字列として結合 | |
| full_script = f"const callback = arguments[arguments.length - 1]; ({resource_check_script}).then(callback);" | |
| driver.execute_async_script(full_script) | |
| logger.info("Resources loaded successfully") | |
| except (TimeoutException, JavascriptException) as e: # JavascriptExceptionも捕捉 | |
| logger.warning(f"Resource loading check failed: {e}. Using fallback wait.") | |
| time.sleep(8) | |
| except Exception as e: # その他の予期せぬエラー | |
| logger.error(f"Unexpected error during resource check: {e}", exc_info=True) | |
| time.sleep(8) | |
| # 6) Ensure content rendering by scrolling (修正: 即時実行関数 + コメント削除 + ロジック微調整) | |
| try: | |
| scroll_script = """ | |
| return (function() { | |
| return new Promise(resolve => { | |
| const pageHeight = Math.max( | |
| document.documentElement.scrollHeight || 0, | |
| document.body ? document.body.scrollHeight || 0 : 0 | |
| ); | |
| const viewportHeight = window.innerHeight || document.documentElement.clientHeight || 800; | |
| const scrollStep = Math.floor(viewportHeight * 0.8); | |
| let currentPos = 0; | |
| const scrollDown = () => { | |
| if (!document.body || pageHeight <= 0) { | |
| window.scrollTo(0, 0); | |
| setTimeout(resolve, 300); | |
| return; | |
| } | |
| if (currentPos < pageHeight) { | |
| window.scrollTo(0, currentPos); | |
| currentPos += scrollStep; | |
| if (currentPos >= pageHeight || scrollStep <= 0) { | |
| window.scrollTo(0, pageHeight); | |
| setTimeout(() => { | |
| window.scrollTo(0, 0); | |
| setTimeout(resolve, 300); | |
| }, 150); | |
| } else { | |
| setTimeout(scrollDown, 100); | |
| } | |
| } else { | |
| window.scrollTo(0, 0); | |
| setTimeout(resolve, 300); | |
| } | |
| }; | |
| setTimeout(scrollDown, 100); | |
| }); | |
| })(); | |
| """ | |
| logger.info("Ensuring all content is rendered...") | |
| driver.set_script_timeout(20) # スクロール用にタイムアウトを少し長く | |
| # execute_async_script に渡す前に文字列として結合 | |
| full_script = f"const callback = arguments[arguments.length - 1]; ({scroll_script}).then(callback);" | |
| driver.execute_async_script(full_script) | |
| logger.info("Content rendering scroll finished.") | |
| except (TimeoutException, JavascriptException) as e: # JavascriptExceptionも捕捉 | |
| logger.warning(f"Content rendering check failed: {e}. Scrolling to top and waiting.") | |
| try: | |
| driver.execute_script("window.scrollTo(0, 0);") | |
| except Exception as scroll_err: | |
| logger.error(f"Could not scroll to top after render check failure: {scroll_err}") | |
| time.sleep(3) # フォールバック待機 | |
| except Exception as e: # その他の予期せぬエラー | |
| logger.error(f"Unexpected error during content rendering scroll: {e}", exc_info=True) | |
| time.sleep(3) | |
| # 7) Hide scrollbars (変更なし) | |
| 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}") | |
| # 8) Get full page dimensions (変更なし) | |
| try: | |
| dimensions_script = """ | |
| return { | |
| width: Math.max( | |
| document.documentElement.scrollWidth || 0, | |
| document.documentElement.offsetWidth || 0, | |
| document.documentElement.clientWidth || 0, | |
| document.body ? document.body.scrollWidth || 0 : 0, | |
| document.body ? document.body.offsetWidth || 0 : 0, | |
| document.body ? document.body.clientWidth || 0 : 0 | |
| ), | |
| height: Math.max( | |
| document.documentElement.scrollHeight || 0, | |
| document.documentElement.offsetHeight || 0, | |
| document.documentElement.clientHeight || 0, | |
| document.body ? document.body.scrollHeight || 0 : 0, | |
| document.body ? document.body.offsetHeight || 0 : 0, | |
| document.body ? document.body.clientHeight || 0 : 0 | |
| ) | |
| }; | |
| """ | |
| dimensions = driver.execute_script(dimensions_script) | |
| scroll_width = dimensions['width'] | |
| scroll_height = dimensions['height'] | |
| logger.info(f"Detected dimensions: width={scroll_width}, height={scroll_height}") | |
| # スクロール検証 (エラーハンドリング追加) | |
| try: | |
| driver.execute_script("window.scrollTo(0, document.body.scrollHeight);") | |
| time.sleep(1) | |
| driver.execute_script("window.scrollTo(0, 0);") | |
| time.sleep(1) | |
| dimensions_after_scroll = driver.execute_script(dimensions_script) | |
| scroll_height = max(scroll_height, dimensions_after_scroll['height']) | |
| logger.info(f"After scroll check, height={scroll_height}") | |
| except Exception as scroll_e: | |
| logger.warning(f"Error during dimension scroll check: {scroll_e}") | |
| scroll_width = max(scroll_width, 100) | |
| scroll_height = max(scroll_height, 100) | |
| scroll_width = min(scroll_width, 2000) | |
| scroll_height = min(scroll_height, 4000) | |
| except Exception as e: | |
| logger.error(f"Error getting page dimensions: {e}") | |
| scroll_width = 1200 | |
| scroll_height = 1000 | |
| logger.warning(f"Falling back to dimensions: width={scroll_width}, height={scroll_height}") | |
| # 9) Layout stability check (修正: 即時実行関数 + コメント削除 + JavascriptException捕捉) | |
| try: | |
| stability_script = """ | |
| return (function() { | |
| return new Promise((resolve, reject) => { | |
| let lastHeight = 0; | |
| let lastWidth = 0; | |
| let stableCount = 0; | |
| const maxChecks = 15; | |
| let checkCount = 0; | |
| const checkStability = () => { | |
| checkCount++; | |
| if (checkCount > maxChecks) { | |
| console.warn('Layout stability check reached max attempts.'); | |
| resolve(false); | |
| return; | |
| } | |
| const bodyExists = document.body && typeof document.body.offsetHeight === 'number' && typeof document.body.offsetWidth === 'number'; | |
| if (!bodyExists) { | |
| console.warn('Document body not fully available yet for stability check.'); | |
| setTimeout(checkStability, 250); | |
| return; | |
| } | |
| const currentHeight = document.body.offsetHeight; | |
| const currentWidth = document.body.offsetWidth; | |
| if (currentHeight === 0 || currentWidth === 0) { | |
| stableCount = 0; | |
| lastHeight = 0; | |
| lastWidth = 0; | |
| console.warn('Body dimensions are zero, waiting...'); | |
| setTimeout(checkStability, 250); | |
| return; | |
| } | |
| if (currentHeight === lastHeight && currentWidth === lastWidth) { | |
| stableCount++; | |
| if (stableCount >= 3) { | |
| console.log('Layout deemed stable.'); | |
| resolve(true); | |
| return; | |
| } | |
| } else { | |
| stableCount = 0; | |
| lastHeight = currentHeight; | |
| lastWidth = currentWidth; | |
| console.log(`Layout changed: ${lastWidth}x${lastHeight}. Resetting stability count.`); | |
| } | |
| setTimeout(checkStability, 200); | |
| }; | |
| setTimeout(checkStability, 100); | |
| }); | |
| })(); | |
| """ | |
| logger.info("Checking layout stability...") | |
| driver.set_script_timeout(20) | |
| # execute_async_script に渡す前に文字列として結合 | |
| full_script = f"const callback = arguments[arguments.length - 1]; ({stability_script}).then(callback);" | |
| stable = driver.execute_async_script(full_script) | |
| if stable: | |
| logger.info("Layout is stable") | |
| else: | |
| logger.warning("Layout did not stabilize within the expected time. Proceeding anyway.") | |
| time.sleep(2) | |
| except TimeoutException: | |
| logger.warning("Layout stability check timed out. Proceeding anyway.") | |
| time.sleep(2) | |
| except JavascriptException as e: # JavascriptExceptionを捕捉 | |
| logger.error(f"Javascript error during layout stability check: {e}", exc_info=True) | |
| time.sleep(2) | |
| except Exception as e: | |
| logger.error(f"Unexpected error during layout stability check: {e}", exc_info=True) | |
| time.sleep(2) | |
| # 10) Calculate adjusted height (変更なし) | |
| adjusted_height = int(scroll_height * (1 + extension_percentage / 100.0)) | |
| adjusted_height = max(adjusted_height, scroll_height, 100) | |
| logger.info(f"Adjusted height calculated: {adjusted_height} (extension: {extension_percentage}%)") | |
| # 11) Set window size and wait (変更なし) | |
| adjusted_width = scroll_width | |
| logger.info(f"Resizing window to: width={adjusted_width}, height={adjusted_height}") | |
| driver.set_window_size(adjusted_width, adjusted_height) | |
| logger.info("Waiting for layout stabilization after resize...") | |
| time.sleep(4) | |
| # Resource state check (変更なし, エラーハンドリングは元々あり) | |
| try: | |
| resource_state = driver.execute_script(""" | |
| return { | |
| readyState: document.readyState, | |
| resourcesComplete: !document.querySelector('img:not([complete])') && | |
| !document.querySelector('link[rel="stylesheet"]:not([loaded])') | |
| }; | |
| """) | |
| logger.info(f"Resource state: {resource_state}") | |
| if resource_state['readyState'] != 'complete': | |
| logger.info("Document still loading, waiting additional time...") | |
| time.sleep(2) | |
| except Exception as e: | |
| logger.warning(f"Error checking resource state: {e}") | |
| # Scroll to top (変更なし, エラーハンドリングは元々あり) | |
| 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}") | |
| # 12) Take screenshot (変更なし) | |
| logger.info("Taking screenshot...") | |
| png = driver.get_screenshot_as_png() | |
| logger.info("Screenshot taken successfully.") | |
| img = Image.open(BytesIO(png)) | |
| logger.info(f"Screenshot dimensions: {img.width}x{img.height}") | |
| if trim_whitespace: | |
| img = trim_image_whitespace(img, threshold=248, padding=20) | |
| logger.info(f"Trimmed dimensions: {img.width}x{img.height}") | |
| 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)) | |
| 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}") | |
| # --- Geminiを使った新しい関数 --- (変更なし) | |
| def text_to_screenshot(text: str, extension_percentage: float, temperature: float = 0.3, trim_whitespace: bool = True) -> Image.Image: | |
| try: | |
| html_code = generate_html_from_text(text, temperature) | |
| return render_fullpage_screenshot(html_code, extension_percentage, trim_whitespace) | |
| except Exception as e: | |
| logger.error(f"テキストからスクリーンショット生成中にエラーが発生: {e}", exc_info=True) | |
| return Image.new('RGB', (1, 1), color=(0, 0, 0)) | |
| # --- FastAPI Setup --- (変更なし) | |
| app = FastAPI() | |
| app.add_middleware( | |
| CORSMiddleware, | |
| allow_origins=["*"], | |
| allow_credentials=True, | |
| allow_methods=["*"], | |
| allow_headers=["*"], | |
| ) | |
| 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_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_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_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") | |
| # API Endpoint for screenshot generation (変更なし) | |
| async def api_render_screenshot(request: ScreenshotRequest): | |
| try: | |
| logger.info(f"API request received. Extension: {request.extension_percentage}%") | |
| pil_image = render_fullpage_screenshot( | |
| request.html_code, | |
| request.extension_percentage, | |
| request.trim_whitespace | |
| ) | |
| if pil_image.size == (1, 1): | |
| logger.error("Screenshot generation failed, returning 1x1 image.") | |
| img_byte_arr = BytesIO() | |
| pil_image.save(img_byte_arr, format='PNG') | |
| img_byte_arr.seek(0) | |
| 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}") | |
| # Gemini API連携エンドポイント (変更なし) | |
| async def api_text_to_screenshot(request: GeminiRequest): | |
| try: | |
| logger.info(f"テキスト→スクリーンショットAPIリクエスト受信。テキスト長さ: {len(request.text)}, 拡張率: {request.extension_percentage}%, 温度: {request.temperature}") | |
| pil_image = text_to_screenshot( | |
| request.text, | |
| request.extension_percentage, | |
| request.temperature, | |
| request.trim_whitespace | |
| ) | |
| if pil_image.size == (1, 1): | |
| logger.error("スクリーンショット生成に失敗しました。1x1画像を返します。") | |
| img_byte_arr = BytesIO() | |
| pil_image.save(img_byte_arr, format='PNG') | |
| img_byte_arr.seek(0) | |
| logger.info("スクリーンショットをPNGストリームとして返します。") | |
| 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 --- (変更なし) | |
| def process_input(input_mode, input_text, extension_percentage, temperature, trim_whitespace): | |
| if input_mode == "HTML入力": | |
| return render_fullpage_screenshot(input_text, extension_percentage, trim_whitespace) | |
| else: | |
| return text_to_screenshot(input_text, extension_percentage, temperature, trim_whitespace) | |
| with gr.Blocks(title="Full Page Screenshot (テキスト変換対応)", theme=gr.themes.Base()) as iface: | |
| gr.Markdown("# HTMLビューア & テキスト→インフォグラフィック変換") | |
| gr.Markdown("HTMLコードをレンダリングするか、テキストをGemini APIでインフォグラフィックに変換して画像として取得します。") | |
| with gr.Row(): | |
| input_mode = gr.Radio(["HTML入力", "テキスト入力"], label="入力モード", value="HTML入力") | |
| input_text = gr.Textbox(lines=15, label="入力", placeholder="HTMLコードまたはテキストを入力してください。入力モードに応じて処理されます。") | |
| with gr.Row(): | |
| extension_percentage = gr.Slider(minimum=0, maximum=30, step=1.0, value=6, label="上下高さ拡張率（%）") | |
| temperature = gr.Slider(minimum=0.0, maximum=1.0, step=0.1, value=0.3, label="生成時の温度（低い=一貫性高、高い=創造性高）", visible=False) | |
| trim_whitespace = gr.Checkbox(label="余白を自動トリミング", value=True, info="生成される画像から余分な空白領域を自動的に削除します") | |
| submit_btn = gr.Button("生成") | |
| output_image = gr.Image(type="pil", label="ページ全体のスクリーンショット") | |
| def update_temperature_visibility(mode): | |
| return {"visible": mode == "テキスト入力", "__type__": "update"} | |
| input_mode.change(fn=update_temperature_visibility, inputs=input_mode, outputs=temperature) | |
| submit_btn.click(fn=process_input, inputs=[input_mode, input_text, extension_percentage, temperature, trim_whitespace], outputs=output_image) | |
| gemini_model = os.environ.get("GEMINI_MODEL", "gemini-1.5-pro") | |
| gr.Markdown(f""" | |
| ## APIエンドポイント | |
| - `/api/screenshot` - HTMLコードからスクリーンショットを生成 | |
| - `/api/text-to-screenshot` - テキストからインフォグラフィックスクリーンショットを生成 | |
| ## 設定情報 | |
| - 使用モデル: {gemini_model} (環境変数 GEMINI_MODEL で変更可能) | |
| """) | |
| # --- 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) | |