Update app.py

app.py

@@ -74,6 +74,65 @@ def generate_html_from_text(text, temperature=1.0, layout_type="standard"):
 - 小さめのアイコンサイズを使用（標準の75%）
 - フォントサイズを10%小さく設定
 - テキスト量が多い場合は自動的に複数列に分割表示
+"""
+
+        # レイアウト崩れ防止のための追加指示
+        layout_improvements = """
+## 重要なレイアウト指示（必ず守ってください）
+- カード要素は必ずdisplay: gridまたはflexboxで配置してください
+- カードの配置は絶対位置(position: absolute)を使わず、フロー配置を使ってください
+- 各カードには以下のスタイルを必ず適用してください:
+  ```css
+  .card {
+    position: relative;
+    clear: both;
+    display: flex;
+    flex-direction: column;
+    margin: 1.5rem 0;
+    padding: 1.2rem;
+    height: auto;
+    overflow: visible;
+    box-sizing: border-box;
+  }
+  ```
+
+- 兄弟要素間のマージンは必ず以下のように設定してください:
+  ```css
+  .card + .card, 
+  .section + .section, 
+  .info-box + .info-box,
+  .row + .row {
+    margin-top: 2rem;
+  }
+  ```
+
+- コンテナの高さは自動的に調整されるようにしてください:
+  ```css
+  .container, .row, .column {
+    height: auto;
+    overflow: hidden;
+    display: flex;
+    flex-direction: column;
+  }
+  ```
+
+- グリッドレイアウトを使用する場合は明示的な行の高さを設定してください:
+  ```css
+  .grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
+    grid-gap: 2rem;
+    grid-auto-rows: minmax(min-content, auto);
+  }
+  ```
+
+- すべてのテキスト要素に余白を設定してください:
+  ```css
+  p, h1, h2, h3, h4, h5, h6, li {
+    margin-bottom: 1rem;
+    line-height: 1.6;
+  }
+  ```
 """
         
         # システムプロンプト（強化版）
@@ -137,6 +196,8 @@ def generate_html_from_text(text, temperature=1.0, layout_type="standard"):
 - 横幅は100%
 - 重要な要素は中央寄り、補足情報は周辺部に配置
 
+{layout_improvements}
+
 ## レイアウト崩れ防止のための追加設定
 - テキストが重ならないようにカードやセクション間に十分なマージンを設定（最低25px）
 - テキスト量に応じて自動的に要素の高さが伸びるフレックスレイアウトを採用
@@ -305,66 +366,191 @@ document.addEventListener('DOMContentLoaded', function() {{
 
 # HTMLを後処理してレイアウト崩れを防止する関数
 def enhance_html_for_layout(html_code):
-    """HTMLを後処理してレイアウト崩れを防止するための調整を行う"""
+    """HTMLを後処理してレイアウト崩れを防止するための調整を行う（強化版）"""
     try:
-        # テキスト重なり防止のためのスタイルが含まれているか確認
-        if "<style>" in html_code and ".card-content" not in html_code:
-            # スタイルタグを見つけてレイアウト崩れ防止用のCSSを追加
+        # 基本的なスタイルとスクリプトが含まれているか確認
+        base_styles_needed = True
+        base_scripts_needed = True
+        
+        if "<style>" in html_code:
             style_pos = html_code.find("</style>")
             if style_pos != -1:
-                # レイアウト崩れ防止用のCSS
-                layout_css = """
-/* レイアウト崩れ防止用スタイル */
+                # カード要素のスタイルが含まれているか確認
+                if ".card" in html_code[:style_pos] and "flex-direction: column" in html_code[:style_pos]:
+                    base_styles_needed = False
+                
+                # レイアウト崩れ防止用の強化CSSを追加
+                enhanced_css = """
+/* --- レイアウト崩れ防止強化スタイル --- */
 .card, .section, .info-box {
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-  margin-bottom: 1.5rem !important;
-  min-height: fit-content;
-  padding: 1rem !important;
+  position: relative !important;
+  display: flex !important;
+  flex-direction: column !important;
+  margin: 1.5rem 0 !important;
+  padding: 1.2rem !important;
+  height: auto !important;
+  min-height: fit-content !important;
+  overflow: visible !important;
+  box-sizing: border-box !important;
+  z-index: 1 !important;
+  clear: both !important;
 }
-.card-content {
-  flex: 1;
-  display: flex;
-  flex-direction: column;
+
+/* フローティング要素のクリア */
+.clearfix::after {
+  content: "" !important;
+  display: table !important;
+  clear: both !important;
 }
-.card-title {
-  font-weight: bold;
-  margin-bottom: 0.75rem !important;
-  line-height: 1.4;
+
+/* コンテナ要素の高さ自動調整 */
+.container, .row, .column {
+  height: auto !important;
+  overflow: hidden !important;
+  position: relative !important;
 }
-.card-text {
-  line-height: 1.6;
-  margin-bottom: 0.5rem !important;
+
+/* グリッドレイア���トの調整 */
+.grid {
+  display: grid !important;
+  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)) !important;
+  grid-gap: 2rem !important;
+  grid-auto-rows: minmax(min-content, auto) !important;
 }
-.info-item {
-  margin-bottom: 0.75rem !important;
-  line-height: 1.5;
+
+/* マージンとパディングの強制 */
+p, h1, h2, h3, h4, h5, h6, li {
+  margin-bottom: 1rem !important;
+  line-height: 1.6 !important;
 }
-li {
-  margin-bottom: 0.5rem !important;
-  line-height: 1.5;
+
+/* 重なり解消のための特別なスタイル */
+body {
+  overflow-x: hidden !important;
 }
-p {
-  margin-bottom: 0.75rem !important;
-  line-height: 1.5;
+
+.card + .card, .section + .section, .info-box + .info-box {
+  margin-top: 2rem !important;
+}
+
+/* モバイル表示の改善 */
+@media (max-width: 768px) {
+  .card, .section, .info-box {
+    width: 100% !important;
+    margin-left: 0 !important;
+    margin-right: 0 !important;
+  }
 }
 """
                 # スタイルタグの閉じ直前に挿入
-                html_code = html_code[:style_pos] + layout_css + html_code[style_pos:]
+                html_code = html_code[:style_pos] + enhanced_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 = """
+        # スタイルが存在しない場合は新たに追加
+        if base_styles_needed and "<style>" not in html_code:
+            head_end_pos = html_code.find("</head>")
+            if head_end_pos != -1:
+                base_styles = """
+<style>
+/* ベーススタイル - レイアウト崩れ防止 */
+.card, .section, .info-box {
+  position: relative !important;
+  display: flex !important;
+  flex-direction: column !important;
+  margin: 1.5rem 0 !important;
+  padding: 1.2rem !important;
+  height: auto !important;
+  min-height: fit-content !important;
+  overflow: visible !important;
+  box-sizing: border-box !important;
+  z-index: 1 !important;
+  clear: both !important;
+}
+
+.card-content {
+  flex: 1 !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+.container, .row, .column {
+  height: auto !important;
+  overflow: hidden !important;
+  position: relative !important;
+}
+
+p, h1, h2, h3, h4, h5, h6, li {
+  margin-bottom: 1rem !important;
+  line-height: 1.6 !important;
+}
+
+/* 重なり解消のための特別なスタイル */
+body {
+  overflow-x: hidden !important;
+}
+
+.card + .card, .section + .section, .info-box + .info-box {
+  margin-top: 2rem !important;
+}
+</style>
+"""
+                html_code = html_code[:head_end_pos] + base_styles + html_code[head_end_pos:]
+        
+        # 自動レイアウト修正用のスクリプトを強化
+        if "</body>" in html_code:
+            has_stabilize_script = "stabilizeLayout" in html_code
+            
+            if not has_stabilize_script:
+                body_end_pos = html_code.find("</body>")
+                if body_end_pos != -1:
+                    enhanced_script = """
 <script>
-document.addEventListener('DOMContentLoaded', function() {
-  // カード内のテキスト量に基づいてフォントサイズを調整
-  const cards = document.querySelectorAll('.card, .section, .info-box');
-  cards.forEach(card => {
+// レイアウト安定化のための強化スクリプト
+function stabilizeLayout() {
+  // カードの重なりを解消
+  document.querySelectorAll('.card, .section, .info-box').forEach(card => {
+    // 位置を相対指定に強制
+    card.style.position = 'relative';
+    
+    // z-indexをカード間で競合しないよう設定
+    card.style.zIndex = '1';
+    
+    // マージンを強制的に設定
+    card.style.marginBottom = '2rem';
+    card.style.marginTop = '1rem';
+    
+    // 浮動要素のクリア
+    let clearDiv = document.createElement('div');
+    clearDiv.style.clear = 'both';
+    clearDiv.style.height = '1px';
+    card.parentNode.insertBefore(clearDiv, card.nextSibling);
+    
+    // クリアフィックスクラスを追加
+    card.classList.add('clearfix');
+  });
+  
+  // 親要素の高さを適切に設定
+  document.querySelectorAll('.row, .container, .column').forEach(container => {
+    container.style.overflow = 'hidden';
+    container.style.height = 'auto';
+    container.classList.add('clearfix');
+    
+    // 子要素の合計高さを取得して設定
+    let totalHeight = 0;
+    Array.from(container.children).forEach(child => {
+      if (child.offsetHeight) {
+        totalHeight += child.offsetHeight + 
+                       parseInt(getComputedStyle(child).marginTop || 0) + 
+                       parseInt(getComputedStyle(child).marginBottom || 0);
+      }
+    });
+    
+    if (totalHeight > 0) {
+      container.style.minHeight = (totalHeight + 50) + 'px';
+    }
+  });
+  
+  // テキスト量に基づいてフォントサイズを調整
+  document.querySelectorAll('.card, .section, .info-box').forEach(card => {
     const cardContent = card.querySelector('.card-content') || card;
     const textLength = cardContent.textContent.length;
     
@@ -383,14 +569,26 @@ document.addEventListener('DOMContentLoaded', function() {
       el.style.lineHeight = '1.5';
     });
   });
-});
+}
+
+// DOMContentLoadedイベントで実行
+document.addEventListener('DOMContentLoaded', stabilizeLayout);
+
+// 安全のためにウィンドウロード時にも実行
+window.addEventListener('load', stabilizeLayout);
+
+// 1秒後に再度実行して安定化を確実にする
+setTimeout(stabilizeLayout, 1000);
 </script>
 """
-                # ボディタグの閉じ直前に挿入
-                html_code = html_code[:body_end_pos] + auto_adjust_script + html_code[body_end_pos:]
+                    html_code = html_code[:body_end_pos] + enhanced_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)
+        # カードコンテナのクラス追加
+        html_code = re.sub(r'<div class="([^"]*)"([^>]*)>', lambda m: f'<div class="{m.group(1)} card clearfix"{m.group(2)}>', html_code)
+        
+        # ボディタグにクラス追加
+        if "<body" in html_code and "clearfix" not in html_code:
+            html_code = html_code.replace("<body", '<body class="clearfix"')
         
         return html_code
     except Exception as e:
@@ -512,8 +710,8 @@ def render_fullpage_screenshot(html_code: str, extension_percentage: float = 6.0
         )
         logger.info("Body element found. Waiting for potential resource loading...")
         
-        # リソース読み込みの待機時間（増加：5→8秒）
-        time.sleep(8)  # 十分な待機時間
+        # リソース読み込みの待機時間（増加：8→10秒）
+        time.sleep(10)  # 十分な待機時間
         
         # 5) Hide scrollbars via CSS
         try:
@@ -592,8 +790,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...")
         
-        # レイアウト安定化のための待機（増加：4→6秒）
-        time.sleep(6)  # 統一した待機時間
+        # レイアウト安定化のための待機（増加：6→8秒）
+        time.sleep(8)  # 統一した待機時間
 
         # 外部リソースの読み込み状態を確認
         try:
@@ -615,10 +813,49 @@ def render_fullpage_screenshot(html_code: str, extension_percentage: float = 6.0
 
         # レイアウト崩れ修正のためのJavaScriptを実行
         try:
-            fix_layout_script = """
-            // カード内のテキスト量に基づいてフォントサイズを調整
-            const cards = document.querySelectorAll('.card, .section, .info-box');
-            cards.forEach(card => {
+            # レイアウト安定化のための強化JavaScriptを実行
+            stabilize_script = """
+            // カードの重なりを解消するための修正
+            document.querySelectorAll('.card, .section, .info-box').forEach(card => {
+              // 位置を相対指定に強制
+              card.style.position = 'relative';
+              
+              // z-indexをカード間で競合しないよう設定
+              card.style.zIndex = '1';
+              
+              // マージンを強制的に設定
+              card.style.marginBottom = '2rem';
+              card.style.marginTop = '1rem';
+              
+              // 浮動要素のクリア
+              let clearDiv = document.createElement('div');
+              clearDiv.style.clear = 'both';
+              clearDiv.style.height = '1px';
+              card.parentNode.insertBefore(clearDiv, card.nextSibling);
+            });
+
+            // 親要素の高さを適切に設定
+            document.querySelectorAll('.row, .container, .column').forEach(container => {
+              container.style.overflow = 'hidden';
+              container.style.height = 'auto';
+              
+              // 子要素の合計高さを取得して設定
+              let totalHeight = 0;
+              Array.from(container.children).forEach(child => {
+                if (child.offsetHeight) {
+                  totalHeight += child.offsetHeight + 
+                                 parseInt(getComputedStyle(child).marginTop || 0) + 
+                                 parseInt(getComputedStyle(child).marginBottom || 0);
+                }
+              });
+              
+              if (totalHeight > 0) {
+                container.style.minHeight = (totalHeight + 50) + 'px';
+              }
+            });
+
+            // テキスト量に基づいてフォントサイズを調整
+            document.querySelectorAll('.card, .section, .info-box').forEach(card => {
               const cardContent = card.querySelector('.card-content') || card;
               const textLength = cardContent.textContent.length;
               
@@ -637,12 +874,16 @@ def render_fullpage_screenshot(html_code: str, extension_percentage: float = 6.0
                 el.style.lineHeight = '1.5';
               });
             });
+
+            // 完了通知
+            return "Layout stabilization completed";
             """
-            driver.execute_script(fix_layout_script)
-            logger.info("Executed layout fix JavaScript")
             
-            # 追加の待機時間
-            time.sleep(1)
+            stabilize_result = driver.execute_script(stabilize_script)
+            logger.info(f"Layout stabilization: {stabilize_result}")
+            
+            # 安定化後の追加待機
+            time.sleep(2)
         except Exception as e:
             logger.warning(f"Failed to execute layout fix script: {e}")
 
@@ -915,9 +1156,10 @@ with gr.Blocks(title="Full Page Screenshot (テキスト変換対応)", theme=gr
     gemini_model = os.environ.get("GEMINI_MODEL", "gemini-1.5-pro")
     gr.Markdown(f"""
     ## 更新情報
-    - テキスト重なり自動修正機能を追加
+    - テキスト重なり自動修正機能を強化
     - レイアウトタイプ選択機能を追加（テキストモード時）
     - フォントサイズ自動調整機能を追加
+    - レンダリング待機時間の最適化
     
     ## APIエンドポイント
     - `/api/screenshot` - HTMLコードからスクリーンショットを生成