Update app.py

app.py

@@ -15,6 +15,7 @@ import tempfile
 import time
 import os
 import logging
+import re
 
 # 正しいGemini関連のインポート
 import google.generativeai as genai
@@ -30,6 +31,7 @@ class GeminiRequest(BaseModel):
     extension_percentage: float = 6.0  # デフォルト値6%
     temperature: float = 1.0  # デフォルト値1.0の温度パラメータ
     trim_whitespace: bool = True  # 余白トリミングオプション（デフォルト有効）
+    layout_type: str = "standard"  # レイアウトタイプ（standard, spaced, compact）
 
 class ScreenshotRequest(BaseModel):
     """スクリーンショットリクエストモデル"""
@@ -37,7 +39,7 @@ class ScreenshotRequest(BaseModel):
     extension_percentage: float = 6.0  # デフォルト値6%
     trim_whitespace: bool = True  # 余白トリミングオプション（デフォルト有効）
 
-def generate_html_from_text(text, temperature=1.0):
+def generate_html_from_text(text, temperature=1.0, layout_type="standard"):
     """テキストからHTMLを生成する"""
     try:
         # APIキーの取得と設定
@@ -53,8 +55,29 @@ def generate_html_from_text(text, temperature=1.0):
         # Gemini APIの設定
         genai.configure(api_key=api_key)
         
-        # システムプロンプト（リクエスト例と同じものを使用）
-        system_instruction = """# グラフィックレコーディング風インフォグラフィック変換プロンプト V2
+        # レイアウトタイプに応じた追加設定
+        layout_adjustments = ""
+        if layout_type == "spaced":
+            layout_adjustments = """
+## 特別なスタイル設定
+- 全てのテキスト要素には最低2rem以上の行間と要素間マージンを設定する
+- 各カードのパディングを1.5倍に増やす
+- 箇条書きリストのアイテム間は1.5emの間隔を確保する
+- すべての文字サイズを15%大きくする
+- 内容量に応じて自動的にグリッドやフレックスレイアウトを調整する
+- テキストが重ならないように要素間に十分なスペースを強制的に設ける
+"""
+        elif layout_type == "compact":
+            layout_adjustments = """
+## 特別なスタイル設定
+- レイアウトをよりコンパクトに配置
+- 小さめのアイコンサイズを使用（標準の75%）
+- フォントサイズを10%小さく設定
+- テキスト量が多い場合は自動的に複数列に分割表示
+"""
+        
+        # システムプロンプト（強化版）
+        system_instruction = f"""# グラフィックレコーディング風インフォグラフィック変換プロンプト V3
 ## 目的
 以下の内容を、超一流デザイナーが作成したような、日本語で完璧なグラフィックレコーディング風のHTMLインフォグラフィックに変換してください。情報設計とビジュアルデザインの両面で最高水準を目指します。
 手書き風の図形やFont Awesomeアイコンを大きく活用して内容を視覚的かつ直感的に表現します。
@@ -101,8 +124,8 @@ def generate_html_from_text(text, temperature=1.0):
 - フォント指定：
 ```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');
+@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. レイアウト
@@ -113,6 +136,81 @@ def generate_html_from_text(text, temperature=1.0):
 - 適切にグラスモーフィズムを活用（背後にぼかしたFont Awesomeアイコンを配置）
 - 横幅は100%
 - 重要な要素は中央寄り、補足情報は周辺部に配置
+
+## レイアウト崩れ防止のための追加設定
+- テキストが重ならないようにカードやセクション間に十分なマージンを設定（最低25px）
+- テキスト量に応じて自動的に要素の高さが伸びるフレックスレイアウトを採用
+- テキストが多い場合は自動的にフォントサイズを調整する機能を実装
+- スマートスペーシング：内容量に応じて自動的に間隔を調整
+- 以下のCSSを必ず追加して、テキストの重なりを防止する：
+```css
+.card, .section, .info-box {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1.5rem;
+  min-height: fit-content;
+}
+.card-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.card-title {
+  font-weight: bold;
+  margin-bottom: 0.75rem;
+  line-height: 1.4;
+}
+.card-text {
+  line-height: 1.6;
+  margin-bottom: 0.5rem;
+}
+.info-item {
+  margin-bottom: 0.75rem;
+  line-height: 1.5;
+}
+li {
+  margin-bottom: 0.5rem;
+  line-height: 1.5;
+}
+p {
+  margin-bottom: 0.75rem;
+  line-height: 1.5;
+}
+```
+
+## 自動テキスト調整機能
+以下のJavaScriptを必ず追加して、テキスト量に応じたフォントサイズの自動調整を行う：
+```html
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // カード内のテキスト量に基づいてフォントサイズを調整
+  const cards = document.querySelectorAll('.card, .section, .info-box');
+  cards.forEach(card => {
+    const cardContent = card.querySelector('.card-content') || card;
+    const textLength = cardContent.textContent.length;
+    
+    // テキスト量に応じてフォントサイズを調整
+    if (textLength > 200) {
+      card.style.fontSize = '0.9em';
+    }
+    if (textLength > 300) {
+      card.style.fontSize = '0.85em';
+    }
+    
+    // カード内の要素間の余白を確保
+    const elements = card.querySelectorAll('p, h3, h4, ul, ol, .info-item');
+    elements.forEach(el => {
+      el.style.marginBottom = '0.75rem';
+      el.style.lineHeight = '1.5';
+    });
+  });
+});
+</script>
+```
+
+{layout_adjustments}
+
 ## グラフィックレコーディング表現技法
 - テキストと視覚要素のバランスを重視（文字情報の50%以上をFont Awesomeアイコンで視覚的に補完）
 - キーワードを囲み線や色で強調し、関連するFont Awesomeアイコンを必ず添える
@@ -152,7 +250,7 @@ def generate_html_from_text(text, temperature=1.0):
 ーーー＜ユーザーが入力（または添付）＞ーーー"""
         
         # モデルを初期化して処理
-        logger.info(f"Gemini APIにリクエストを送信: テキスト長さ = {len(text)}, 温度 = {temperature}")
+        logger.info(f"Gemini APIにリクエストを送信: テキスト長さ = {len(text)}, 温度 = {temperature}, レイアウトタイプ = {layout_type}")
         
         # モデル初期化とフォールバック処理
         try:
@@ -191,6 +289,10 @@ def generate_html_from_text(text, temperature=1.0):
             html_start += 7  # "```html" の長さ分進める
             html_code = raw_response[html_start:html_end].strip()
             logger.info(f"HTMLの生成に成功: 長さ = {len(html_code)}")
+            
+            # HTML後処理：テキスト重なり防止のためのクラス・スタイル追加
+            html_code = enhance_html_for_layout(html_code)
+            
             return html_code
         else:
             # HTMLタグが見つからない場合、レスポンス全体を返す
@@ -201,6 +303,100 @@ def generate_html_from_text(text, temperature=1.0):
         logger.error(f"HTML生成中にエラーが発生: {e}", exc_info=True)
         raise Exception(f"Gemini APIでのHTML生成に失敗しました: {e}")
 
+# HTMLを後処理してレイアウト崩れを防止する関数
+def enhance_html_for_layout(html_code):
+    """HTMLを後処理してレイアウト崩れを防止するための調整を行う"""
+    try:
+        # テキスト重なり防止のためのスタイルが含まれているか確認
+        if "<style>" in html_code and ".card-content" not in html_code:
+            # スタイルタグを見つけてレイアウト崩れ防止用のCSSを追加
+            style_pos = html_code.find("</style>")
+            if style_pos != -1:
+                # レイアウト崩れ防止用のCSS
+                layout_css = """
+/* レイアウト崩れ防止用スタイル */
+.card, .section, .info-box {
+  overflow: hidden;
+  display: flex;
+  flex-direction: column;
+  margin-bottom: 1.5rem !important;
+  min-height: fit-content;
+  padding: 1rem !important;
+}
+.card-content {
+  flex: 1;
+  display: flex;
+  flex-direction: column;
+}
+.card-title {
+  font-weight: bold;
+  margin-bottom: 0.75rem !important;
+  line-height: 1.4;
+}
+.card-text {
+  line-height: 1.6;
+  margin-bottom: 0.5rem !important;
+}
+.info-item {
+  margin-bottom: 0.75rem !important;
+  line-height: 1.5;
+}
+li {
+  margin-bottom: 0.5rem !important;
+  line-height: 1.5;
+}
+p {
+  margin-bottom: 0.75rem !important;
+  line-height: 1.5;
+}
+"""
+                # スタイルタグの閉じ直前に挿入
+                html_code = html_code[:style_pos] + layout_css + html_code[style_pos:]
+                
+        # テキスト自動調整用のスクリプトが含まれていなければ追加
+        if "</body>" in html_code and "document.addEventListener('DOMContentLoaded'" not in html_code:
+            # ボディタグの閉じ直前にスクリプトを追加
+            body_end_pos = html_code.find("</body>")
+            if body_end_pos != -1:
+                # テキスト自動調整用のスクリプト
+                auto_adjust_script = """
+<script>
+document.addEventListener('DOMContentLoaded', function() {
+  // カード内のテキスト量に基づいてフォントサイズを調整
+  const cards = document.querySelectorAll('.card, .section, .info-box');
+  cards.forEach(card => {
+    const cardContent = card.querySelector('.card-content') || card;
+    const textLength = cardContent.textContent.length;
+    
+    // テキスト量に応じてフォントサイズを調整
+    if (textLength > 200) {
+      card.style.fontSize = '0.9em';
+    }
+    if (textLength > 300) {
+      card.style.fontSize = '0.85em';
+    }
+    
+    // カード内の要素間の余白を確保
+    const elements = card.querySelectorAll('p, h3, h4, ul, ol, .info-item');
+    elements.forEach(el => {
+      el.style.marginBottom = '0.75rem';
+      el.style.lineHeight = '1.5';
+    });
+  });
+});
+</script>
+"""
+                # ボディタグの閉じ直前に挿入
+                html_code = html_code[:body_end_pos] + auto_adjust_script + html_code[body_end_pos:]
+        
+        # カード要素にクラス追加
+        html_code = re.sub(r'<div class="([^"]*)"([^>]*)>', lambda m: f'<div class="{m.group(1)} card"{m.group(2)}>', html_code)
+        
+        return html_code
+    except Exception as e:
+        logger.warning(f"HTMLの後処理中にエラーが発生しました: {e}")
+        return html_code  # エラー時は元のHTMLを返す
+
 # 画像から余分な空白領域をトリミングする関数
 def trim_image_whitespace(image, threshold=250, padding=10):
     """
@@ -291,6 +487,10 @@ def render_fullpage_screenshot(html_code: str, extension_percentage: float = 6.0
     # Font Awesomeが読み込まれない場合があるため、読み込み待機時間を長く設定
     options.add_argument("--disable-features=NetworkService")
     options.add_argument("--dns-prefetch-disable")
+    
+    # 新規追加：CORSエラー防止のためのフラグ
+    options.add_argument("--disable-web-security")
+    options.add_argument("--allow-file-access-from-files")
 
     try:
         logger.info("Initializing WebDriver...")
@@ -312,8 +512,8 @@ def render_fullpage_screenshot(html_code: str, extension_percentage: float = 6.0
         )
         logger.info("Body element found. Waiting for potential resource loading...")
         
-        # リソース読み込みの待機時間（コンテンツの種類に関わらず同じ待機時間）
-        time.sleep(5)  # 十分な待機時間
+        # リソース読み込みの待機時間（増加：5→8秒）
+        time.sleep(8)  # 十分な待機時間
         
         # 5) Hide scrollbars via CSS
         try:
@@ -392,8 +592,8 @@ def render_fullpage_screenshot(html_code: str, extension_percentage: float = 6.0
         driver.set_window_size(adjusted_width, adjusted_height)
         logger.info("Waiting for layout stabilization after resize...")
         
-        # レイアウト安定化のための待機
-        time.sleep(4)  # 統一した待機時間
+        # レイアウト安定化のための待機（増加：4→6秒）
+        time.sleep(6)  # 統一した待機時間
 
         # 外部リソースの読み込み状態を確認
         try:
@@ -409,10 +609,43 @@ def render_fullpage_screenshot(html_code: str, extension_percentage: float = 6.0
             # ドキュメントの読み込みが完了していない場合、追加で待機
             if resource_state['readyState'] != 'complete':
                 logger.info("Document still loading, waiting additional time...")
-                time.sleep(2)
+                time.sleep(3)  # 待機時間増加：2→3秒
         except Exception as e:
             logger.warning(f"Error checking resource state: {e}")
 
+        # レイアウト崩れ修正のためのJavaScriptを実行
+        try:
+            fix_layout_script = """
+            // カード内のテキスト量に基づいてフォントサイズを調整
+            const cards = document.querySelectorAll('.card, .section, .info-box');
+            cards.forEach(card => {
+              const cardContent = card.querySelector('.card-content') || card;
+              const textLength = cardContent.textContent.length;
+              
+              // テキスト量に応じてフォントサイズを調整
+              if (textLength > 200) {
+                card.style.fontSize = '0.9em';
+              }
+              if (textLength > 300) {
+                card.style.fontSize = '0.85em';
+              }
+              
+              // カード内の要素間の余白を確保
+              const elements = card.querySelectorAll('p, h3, h4, ul, ol, .info-item');
+              elements.forEach(el => {
+                el.style.marginBottom = '0.75rem';
+                el.style.lineHeight = '1.5';
+              });
+            });
+            """
+            driver.execute_script(fix_layout_script)
+            logger.info("Executed layout fix JavaScript")
+            
+            # 追加の待機時間
+            time.sleep(1)
+        except Exception as e:
+            logger.warning(f"Failed to execute layout fix script: {e}")
+
         # Scroll to top just in case
         try:
             driver.execute_script("window.scrollTo(0, 0)")
@@ -459,11 +692,12 @@ def render_fullpage_screenshot(html_code: str, extension_percentage: float = 6.0
                 logger.error(f"Error removing temporary file {tmp_path}: {e}")
 
 # --- Geminiを使った新しい関数 ---
-def text_to_screenshot(text: str, extension_percentage: float, temperature: float = 1.0, trim_whitespace: bool = True) -> Image.Image:
+def text_to_screenshot(text: str, extension_percentage: float, temperature: float = 1.0, 
+                       trim_whitespace: bool = True, layout_type: str = "standard") -> Image.Image:
     """テキストをGemini APIでHTMLに変換し、スクリーンショットを生成する統合関数"""
     try:
-        # 1. テキストからHTMLを生成（温度パラメータも渡す）
-        html_code = generate_html_from_text(text, temperature)
+        # 1. テキストからHTMLを生成（温度パラメータとレイアウトタイプも渡す）
+        html_code = generate_html_from_text(text, temperature, layout_type)
         
         # 2. HTMLからスクリーンショットを生成
         return render_fullpage_screenshot(html_code, extension_percentage, trim_whitespace)
@@ -560,14 +794,15 @@ async def api_text_to_screenshot(request: GeminiRequest):
     テキストからHTMLインフォグラフィックを生成してスクリーンショットを返すAPIエンドポイント
     """
     try:
-        logger.info(f"テキスト→スクリーンショットAPIリクエスト受信。テキスト長さ: {len(request.text)}, 拡張率: {request.extension_percentage}%, 温度: {request.temperature}")
+        logger.info(f"テキスト→スクリーンショットAPIリクエスト受信。テキスト長さ: {len(request.text)}, 拡張率: {request.extension_percentage}%, 温度: {request.temperature}, レイアウト: {request.layout_type}")
         
-        # テキストからHTMLを生成してスクリーンショットを作成（温度パラメータも渡す）
+        # テキストからHTMLを生成してスクリーンショットを作成（温度パラメータとレイアウトタイプも渡す）
         pil_image = text_to_screenshot(
             request.text,
             request.extension_percentage,
             request.temperature,
-            request.trim_whitespace
+            request.trim_whitespace,
+            request.layout_type
         )
 
         if pil_image.size == (1, 1):
@@ -588,14 +823,14 @@ async def api_text_to_screenshot(request: GeminiRequest):
 
 # --- Gradio Interface Definition ---
 # 入力モードの選択用Radioコンポーネント
-def process_input(input_mode, input_text, extension_percentage, temperature, trim_whitespace):
+def process_input(input_mode, input_text, extension_percentage, temperature, trim_whitespace, layout_type):
     """入力モードに応じて適切な処理を行う"""
     if input_mode == "HTML入力":
         # HTMLモードの場合は既存の処理
         return render_fullpage_screenshot(input_text, extension_percentage, trim_whitespace)
     else:
         # テキスト入力モードの場合はGemini APIを使用
-        return text_to_screenshot(input_text, extension_percentage, temperature, trim_whitespace)
+        return text_to_screenshot(input_text, extension_percentage, temperature, trim_whitespace, layout_type)
 
 # Gradio UIの定義
 with gr.Blocks(title="Full Page Screenshot (テキスト変換対応)", theme=gr.themes.Base()) as iface:
@@ -617,61 +852,83 @@ with gr.Blocks(title="Full Page Screenshot (テキスト変換対応)", theme=gr
     )
     
     with gr.Row():
-        extension_percentage = gr.Slider(
-            minimum=0,
-            maximum=30,
-            step=1.0,
-            value=6,    # デフォルト値6%
-            label="上下高さ拡張率（%）"
-        )
+        with gr.Column(scale=1):
+            extension_percentage = gr.Slider(
+                minimum=0,
+                maximum=30,
+                step=1.0,
+                value=6,    # デフォルト値6%
+                label="上下高さ拡張率（%）"
+            )
+            
+            # 温度調整スライダー（テキストモード時のみ表示）
+            temperature = gr.Slider(
+                minimum=0.0,
+                maximum=1.4,
+                step=0.1,
+                value=1.0,    # デフォルト値1.0
+                label="生成時の温度（創造性）",
+                visible=False  # 最初は非表示
+            )
+            
+            # 余白トリミングオプション
+            trim_whitespace = gr.Checkbox(
+                label="余白を自動トリミング",
+                value=True,
+                info="生成される画像から余分な空白領域を自動的に削除します"
+            )
         
-        # 温度調整スライダー（テキストモード時のみ表示）
-        temperature = gr.Slider(
-            minimum=0.0,
-            maximum=1.4,
-            step=0.1,
-            value=1.0,    # デフォルト値1.0
-            label="生成時の温度（創造性）",
-            visible=False  # 最初は非表示
-        )
-    
-    # 余白トリミングオプション
-    trim_whitespace = gr.Checkbox(
-        label="余白を自動トリミング",
-        value=True,
-        info="生成される画像から余分な空白領域を自動的に削除します"
-    )
+        with gr.Column(scale=1):
+            # 新機能：レイアウトタイプの選択（テキストモード時のみ表示）
+            layout_type = gr.Radio(
+                ["standard", "spaced", "compact"],
+                label="レイアウトタイプ",
+                value="standard",
+                info="standard: 標準レイアウト, spaced: 広々レイアウト, compact: コンパクトレイアウト",
+                visible=False
+            )
     
-    submit_btn = gr.Button("生成")
+    submit_btn = gr.Button("生成", variant="primary")
     output_image = gr.Image(type="pil", label="ページ全体のスクリーンショット")
     
-    # 入力モード変更時のイベント処理（テキストモード時のみ温度スライダーを表示）
-    def update_temperature_visibility(mode):
-        # Gradio 4.x用のアップデート方法
-        return {"visible": mode == "テキスト入力", "__type__": "update"}
+    # 入力モード変更時のイベント処理（テキストモード時のみ温度スライダーとレイアウトタイプを表示）
+    def update_ui_visibility(mode):
+        return [
+            {"visible": mode == "テキスト入力", "__type__": "update"},  # temperature
+            {"visible": mode == "テキスト入力", "__type__": "update"}   # layout_type
+        ]
     
     input_mode.change(
-        fn=update_temperature_visibility,
+        fn=update_ui_visibility,
         inputs=input_mode,
-        outputs=temperature
+        outputs=[temperature, layout_type]
     )
     
     # 生成ボタンクリック時のイベント処理
     submit_btn.click(
         fn=process_input,
-        inputs=[input_mode, input_text, extension_percentage, temperature, trim_whitespace],
+        inputs=[input_mode, input_text, extension_percentage, temperature, trim_whitespace, layout_type],
         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 で変更可能)
+    - レイアウトタイプ:
+      - standard: 標準レイアウト
+      - spaced: 広々レイアウト（テキストが重なりやすい場合に推奨）
+      - compact: コンパクトレイアウト（テキストが少ない場合に推奨）
     """)
 
 # --- Mount Gradio App onto FastAPI ---