Update app.py

app.py

@@ -1,12 +1,208 @@
-# ページのスクリーンショット取得機能を改善した関数
-def render_fullpage_screenshot(html_code: str, extension_percentage: float, is_gemini_generated: bool = False) -> Image.Image:
+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
+
+# 正しい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 = 8.0  # Default value same as Gradio slider
+
+def generate_html_from_text(text):
+    """テキストから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 環境変数が設定されていません")
+        
+        # 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アイコンを添える）＋右揃え日付/出典
+- 3カラム構成：左側33%、中央33%、右側33%
+- カード型コンポーネント：白背景、角丸12px、微細シャドウ、右上にFont Awesomeアイコンを配置
+- セクション間の適切な余白と階層構造（階層を示すFont Awesomeアイコンを活用）
+- 適切にグラスモーフィズムを活用（背後にぼかしたFont Awesomeアイコンを配置）
+- 横幅は100%
+- 重要な要素は中央寄り、補足情報は周辺部に配置
+## グラフィックレコーディング表現技法
+- テキストと視覚要素のバランスを重視（文字情報の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)}")
+        
+        # 利用可能なモデルの確認
+        try:
+            models = genai.list_models()
+            logger.info(f"利用可能なモデル: {[m.name for m in models if 'gemini' in m.name]}")
+        except Exception as e:
+            logger.warning(f"モデル一覧取得エラー: {e}")
+        
+        # モデル選択
+        try:
+            model = genai.GenerativeModel('gemini-1.5-pro')
+        except Exception as e:
+            logger.warning(f"gemini-1.5-proモデル利用不可: {e}, gemini-proを試します")
+            model = genai.GenerativeModel('gemini-pro')
+            
+        # 生成設定
+        generation_config = {
+            "temperature": 0.7,
+            "top_p": 0.95,
+            "top_k": 64,
+            "max_output_tokens": 8192,
+        }
+        
+        # プロンプト構築
+        prompt = f"{system_instruction}\n\n{text}"
+        
+        # コンテンツ生成
+        response = model.generate_content(
+            prompt,
+            generation_config=generation_config
+        )
+        
+        # レスポンスからHTMLを抽出
+        raw_response = response.text
+        
+        # HTMLタグ部分だけを抽出（```html と ``` の間）
+        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" の長さ分進める
+            html_code = raw_response[html_start:html_end].strip()
+            logger.info(f"HTMLの生成に成功: 長さ = {len(html_code)}")
+            return html_code
+        else:
+            # HTMLタグが見つからない場合、レスポンス全体を返す
+            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}")
+
+# --- Core Screenshot Logic ---
+def render_fullpage_screenshot(html_code: str, extension_percentage: float, is_gemini_content: bool = False) -> 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).
-        is_gemini_generated: Geminiによって生成されたHTMLかどうか（特別な処理を適用）
+        is_gemini_content: True if the HTML was generated by Gemini API (requires special handling).
 
     Returns:
         A PIL Image object of the screenshot. Returns a 1x1 black image on error.
@@ -14,9 +210,11 @@ def render_fullpage_screenshot(html_code: str, extension_percentage: float, is_g
     tmp_path = None # 初期化
     driver = None # 初期化
 
-    # Gemini生成HTMLの場合は余白を多めに取る
-    if is_gemini_generated:
-        extension_percentage = max(extension_percentage, 15.0)  # 少なくとも15%の余白を確保
+    # Gemini生成コンテンツの場合、拡張率を調整
+    if is_gemini_content:
+        # 最低でも20%の拡張を確保
+        extension_percentage = max(extension_percentage, 20.0)
+        logger.info(f"Gemini生成コンテンツ用に拡張率を調整: {extension_percentage}%")
 
     # 1) Save HTML code to a temporary file
     try:
@@ -34,10 +232,9 @@ def render_fullpage_screenshot(html_code: str, extension_percentage: float, is_g
     options.add_argument("--no-sandbox")
     options.add_argument("--disable-dev-shm-usage")
     options.add_argument("--force-device-scale-factor=1")
-    # Geminiが生成したHTMLの場合、ウィンドウサイズを大きく設定
-    if is_gemini_generated:
-        options.add_argument("--window-size=1600,2400")  # 初期サイズを大きく
-    
+    # Font Awesomeが読み込まれない場合があるため、読み込み待機時間を長く設定
+    options.add_argument("--disable-features=NetworkService")
+    options.add_argument("--dns-prefetch-disable")
     # Increase logging verbosity for debugging if needed
     # options.add_argument("--enable-logging")
     # options.add_argument("--v=1")
@@ -47,32 +244,25 @@ def render_fullpage_screenshot(html_code: str, extension_percentage: float, is_g
         driver = webdriver.Chrome(options=options)
         logger.info("WebDriver initialized.")
 
-        # 3) Load page with initial window size
-        if is_gemini_generated:
-            driver.set_window_size(1600, 2400)  # Gemini生成HTMLには大きなサイズを使用
-        else:
-            driver.set_window_size(1200, 800)  # 通常のHTML用の標準サイズ
-            
+        # 3) Load page with initial large window size (Geminiコンテンツ用に高さを増やす)
+        initial_width = 1800
+        initial_height = 2000 if is_gemini_content else 1200
+        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 page load - Gemini生成HTMLは読み込みに時間がかかるので長めに待機
+        # 4) Wait for page load with extended timeout
         logger.info("Waiting for body element...")
-        wait_timeout = 30 if is_gemini_generated else 15
-        WebDriverWait(driver, wait_timeout).until(
+        WebDriverWait(driver, 15).until( # タイムアウトを少し延長
             EC.presence_of_element_located((By.TAG_NAME, "body"))
         )
+        logger.info("Body element found. Waiting for potential resource loading...")
+        
+        # Gemini生成コンテンツの場合、リソース読み込みに余裕を持たせる
+        wait_time = 6 if is_gemini_content else 3
+        time.sleep(wait_time)  # Wait longer for external resources/scripts
         
-        # Font Awesomeとカスタムフォントの読み込み待機（Gemini生成HTMLの場合）
-        if is_gemini_generated:
-            logger.info("Waiting for potential external resources (Font Awesome, custom fonts)...")
-            # Font Awesomeの読み込みを待機（アイコンが表示される）
-            time.sleep(5)  # Gemini生成HTMLには長めの待機時間
-        else:
-            logger.info("Waiting for potential resource loading...")
-            time.sleep(3)  # 通常のHTMLには標準の待機時間
-
         # 5) Hide scrollbars via CSS
         try:
             driver.execute_script(
@@ -83,58 +273,47 @@ def render_fullpage_screenshot(html_code: str, extension_percentage: float, is_g
         except Exception as e:
             logger.warning(f"Could not hide scrollbars via JS: {e}")
 
-        # 6) Get full page dimensions accurately - Gemini HTMLには追加のJS実行
+        # 6) Get full page dimensions accurately with improved script
         try:
-            if is_gemini_generated:
-                # Gemini生成HTMLの場合、より慎重にコンテンツサイズを計算
-                # すべての子要素の合計高さを確認するJSを実行
-                scroll_width = driver.execute_script("""
-                    return Math.max(
-                        document.body.scrollWidth,
-                        document.documentElement.scrollWidth,
-                        document.body.offsetWidth,
-                        document.documentElement.offsetWidth,
-                        document.body.clientWidth,
-                        document.documentElement.clientWidth
-                    );
-                """)
-                
-                scroll_height = driver.execute_script("""
-                    // ドキュメント全体の高さを取得
-                    var docHeight = Math.max(
-                        document.body.scrollHeight,
-                        document.documentElement.scrollHeight,
-                        document.body.offsetHeight,
-                        document.documentElement.offsetHeight,
-                        document.body.clientHeight,
-                        document.documentElement.clientHeight
-                    );
-                    
-                    // すべての要素をチェックして最大のY位置を見つける
-                    var allElements = document.getElementsByTagName('*');
-                    var maxBottom = 0;
-                    
-                    for (var i = 0; i < allElements.length; i++) {
-                        var rect = allElements[i].getBoundingClientRect();
-                        var bottom = rect.bottom + window.scrollY;
-                        if (bottom > maxBottom) {
-                            maxBottom = bottom;
-                        }
-                    }
-                    
-                    // 最大のY位置とドキュメント高さの大きい方を返す
-                    return Math.max(docHeight, maxBottom);
-                """)
-            else:
-                # 通常のHTML用の標準の計算
-                scroll_width = driver.execute_script(
-                    "return Math.max(document.body.scrollWidth, document.documentElement.scrollWidth, document.body.offsetWidth, document.documentElement.offsetWidth)"
+            # より正確なページ寸法を取得するためのJavaScriptコード
+            dimensions_script = """
+            return {
+                width: Math.max(
+                    document.documentElement.scrollWidth,
+                    document.documentElement.offsetWidth,
+                    document.documentElement.clientWidth,
+                    document.body ? document.body.scrollWidth : 0,
+                    document.body ? document.body.offsetWidth : 0,
+                    document.body ? document.body.clientWidth : 0
+                ),
+                height: Math.max(
+                    document.documentElement.scrollHeight,
+                    document.documentElement.offsetHeight,
+                    document.documentElement.clientHeight,
+                    document.body ? document.body.scrollHeight : 0,
+                    document.body ? document.body.offsetHeight : 0,
+                    document.body ? document.body.clientHeight : 0
                 )
-                scroll_height = driver.execute_script(
-                    "return Math.max(document.body.scrollHeight, document.documentElement.scrollHeight, document.body.offsetHeight, document.documentElement.offsetHeight)"
-                )
-                
+            };
+            """
+            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}")
+            
+            # スクロールして確認する追加の検証
+            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}")
+            
             # Ensure minimum dimensions to avoid errors
             scroll_width = max(scroll_width, 100) # 最小幅を設定
             scroll_height = max(scroll_height, 100) # 最小高さを設定
@@ -142,12 +321,8 @@ def render_fullpage_screenshot(html_code: str, extension_percentage: float, is_g
         except Exception as e:
             logger.error(f"Error getting page dimensions: {e}")
             # フォールバックとしてデフォルト値を設定
-            if is_gemini_generated:
-                scroll_width = 1600
-                scroll_height = 2400
-            else:
-                scroll_width = 1200
-                scroll_height = 800
+            scroll_width = 1800
+            scroll_height = 2000 if is_gemini_content else 1200
             logger.warning(f"Falling back to dimensions: width={scroll_width}, height={scroll_height}")
 
         # 7) Calculate adjusted height with user-specified margin
@@ -157,11 +332,32 @@ def render_fullpage_screenshot(html_code: str, extension_percentage: float, is_g
         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)
+        adjusted_width = max(scroll_width, initial_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...")
-        wait_time = 5 if is_gemini_generated else 3  # Gemini生成HTMLには長めの待機時間
-        time.sleep(wait_time)
+        
+        # Gemini生成コンテンツの場合はさらに長く待機
+        stabilization_time = 5 if is_gemini_content else 3
+        time.sleep(stabilization_time)  # Wait longer for layout stabilization
+
+        # 外部リソースの読み込み状態を確認
+        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 just in case
         try:
@@ -173,17 +369,15 @@ def render_fullpage_screenshot(html_code: str, extension_percentage: float, is_g
 
         # 9) Take screenshot
         logger.info("Taking screenshot...")
-        # Gemini生成HTMLの場合、完全なスクリーンショットを取得するための特別な処理
-        if is_gemini_generated:
-            # スクロールしながら複数の部分スクリーンショットを撮り、それらを結合する方法もあります
-            # ここではシンプルに全体のスクリーンショットを取得します
-            time.sleep(1)  # 最終的な安定化のための短い待機
-            
         png = driver.get_screenshot_as_png()
         logger.info("Screenshot taken successfully.")
 
         # Convert to PIL Image
         img = Image.open(BytesIO(png))
+        
+        # 画像サイズの確認とログ
+        logger.info(f"Screenshot dimensions: {img.width}x{img.height}")
+        
         return img
 
     except Exception as e:
@@ -211,8 +405,195 @@ def text_to_screenshot(text: str, extension_percentage: float) -> Image.Image:
         # 1. テキストからHTMLを生成
         html_code = generate_html_from_text(text)
         
-        # 2. HTMLからスクリーンショットを生成（Gemini生成フラグをTrue）
-        return render_fullpage_screenshot(html_code, extension_percentage, is_gemini_generated=True)
+        # 2. HTMLからスクリーンショットを生成（Gemini生成コンテンツとしてフラグをオン）
+        return render_fullpage_screenshot(html_code, extension_percentage, is_gemini_content=True)
     except Exception as e:
         logger.error(f"テキストからスクリーンショット生成中にエラーが発生: {e}", exc_info=True)
-        return Image.new('RGB', (1, 1), color=(0, 0, 0))  # エラー時は黒画像
+        return Image.new('RGB', (1, 1), color=(0, 0, 0))  # エラー時は黒画像
+
+# --- 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}")
+
+# --- 新しいGemini API連携エンドポイント ---
+@app.post("/api/text-to-screenshot",
+          response_class=StreamingResponse,
+          tags=["Screenshot", "Gemini"],
+          summary="テキストからインフォグラフィックを生成",
+          description="テキストをGemini APIを使ってHTMLインフォグラフィックに変換し、スクリーンショットとして返します。")
+async def api_text_to_screenshot(request: GeminiRequest):
+    """
+    テキストからHTMLインフォグラフィックを生成してスクリーンショットを返すAPIエンドポイント
+    """
+    try:
+        logger.info(f"テキスト→スクリーンショットAPIリクエスト受信。テキスト長さ: {len(request.text)}, 拡張率: {request.extension_percentage}%")
+        
+        # テキストからHTMLを生成してスクリーンショットを作成
+        pil_image = text_to_screenshot(
+            request.text,
+            request.extension_percentage
+        )
+
+        if pil_image.size == (1, 1):
+            logger.error("スクリーンショット生成に失敗しました。1x1画像を返します。")
+            # raise HTTPException(status_code=500, detail="スクリーンショット��成に失敗しました")
+
+        # PIL画像をPNGバイトに変換
+        img_byte_arr = BytesIO()
+        pil_image.save(img_byte_arr, format='PNG')
+        img_byte_arr.seek(0)  # BytesIOバッファの先頭に戻る
+
+        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 ---
+# 入力モードの選択用Radioコンポーネント
+def process_input(input_mode, html_input, text_input, extension_percentage):
+    """入力モードに応じて適切な処理を行う"""
+    if input_mode == "HTML入力":
+        # HTMLモードの場合は既存の処理
+        return render_fullpage_screenshot(html_input, extension_percentage)
+    else:
+        # テキスト入力モードの場合はGemini APIを使用
+        return text_to_screenshot(text_input, extension_percentage)
+
+# Gradio UIの定義
+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入力"
+        )
+    
+    with gr.Tabs():
+        with gr.TabItem("HTML入力"):
+            html_input = gr.Textbox(
+                lines=15,
+                label="HTMLコード入力",
+                placeholder="<!DOCTYPE html>\n<html>\n<head>\n  <title>Example</title>\n</head>\n<body>\n  <h1>Hello World</h1>\n</body>\n</html>"
+            )
+        
+        with gr.TabItem("テキスト入力"):
+            text_input = gr.Textbox(
+                lines=15,
+                label="テキスト入力 (Geminiで変換)",
+                placeholder="ここにテキストを入力すると、Gemini APIによってグラフィカルなHTMLに変換されます。"
+            )
+    
+    extension_percentage = gr.Slider(
+        minimum=0,
+        maximum=30,  # より高い値を許可
+        step=1.0,
+        value=15,    # デフォルト値を増加
+        label="上下高さ拡張率（%）"
+    )
+    
+    submit_btn = gr.Button("生成")
+    output_image = gr.Image(type="pil", label="ページ全体のスクリーンショット")
+    
+    submit_btn.click(
+        fn=process_input,
+        inputs=[input_mode, html_input, text_input, extension_percentage],
+        outputs=output_image
+    )
+    
+    gr.Markdown("""
+    ## APIエンドポイント
+    - `/api/screenshot` - HTMLコードからスクリーンショットを生成 
+    - `/api/text-to-screenshot` - テキストからインフォグラフィックスクリーンショットを生成
+    """)
+
+# --- 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)