Update app.py

app.py

@@ -1,233 +1,162 @@
 import gradio as gr
-import json
-import html
+import re
 
-# カスタムCSS定義
-custom_css = """
-:root {
-    --primary-color: #4BB5C1;
-    --secondary-color: #7CCBBD;
-    --accent-color: #EAC435;
-    --bg-color: #F7F9F9;
-    --text-color: #345995;
-    --shadow-color: rgba(0, 0, 0, 0.1);
-}
-
-body {
-    background-color: var(--bg-color);
-    color: var(--text-color);
-    font-family: 'Avenir Next', 'Segoe UI', Roboto, sans-serif;
-}
-
-.container {
-    border-radius: 12px;
-    box-shadow: 0 8px 24px var(--shadow-color);
-    background: linear-gradient(135deg, #ffffff, #f0f8ff);
-    padding: 0;
-    overflow: hidden;
-}
-
-.header {
-    background: linear-gradient(90deg, var(--primary-color), var(--secondary-color));
-    color: white;
-    padding: 1.5rem;
-    border-radius: 12px 12px 0 0;
-    text-align: center;
-    font-weight: 300;
-    letter-spacing: 1px;
-    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
-}
-
-.header h1 {
-    margin: 0;
-    font-size: 2rem;
-    font-weight: 400;
+def sanitize_html(html_code):
+    """Sanitize HTML input to prevent security issues and horizontal scrolling"""
+    # Basic sanitization
+    html_code = re.sub(r'<script.*?>.*?</script>', '', html_code, flags=re.DOTALL)
+    
+    # Wrap in container to prevent horizontal scrolling
+    sanitized_html = f"""
+    <div style="width:100%; overflow-x: hidden; overflow-y: auto; word-wrap: break-word;">
+        {html_code}
+    </div>
+    <style>
+        /* Ensure all content respects container boundaries */
+        img, video, table, pre, div {{
+            max-width: 100% !important;
+            height: auto !important;
+            overflow-x: hidden !important;
+        }}
+    </style>
+    """
+    return sanitized_html
+
+def display_html(html_code):
+    """Process HTML input for display"""
+    if not html_code.strip():
+        return "<div class='empty-preview'>Enter HTML code and click 'Display HTML'</div>"
+    return sanitize_html(html_code)
+
+# Create custom theme inspired by Intercontinental Hotel Ishigaki's white, refreshing Club Lounge
+theme = gr.themes.Soft(
+    primary_hue="blue",
+    secondary_hue="slate",
+    neutral_hue="slate",
+    font=gr.themes.GoogleFont("Inter"),
+    font_mono=gr.themes.GoogleFont("IBM Plex Mono"),
+)
+
+# Custom CSS for enhancing the UI
+css = """
+.gradio-container {
+    max-width: 900px !important;
+    margin: 0 auto !important;
+    padding: 1.5rem !important;
+    background-color: #ffffff !important;
+    box-shadow: 0 4px 20px rgba(0, 20, 60, 0.05) !important;
+    border-radius: 12px !important;
 }
 
-.content {
-    padding: 1.5rem;
-    background-color: rgba(255, 255, 255, 0.9);
+.app-header {
+    margin-bottom: 1.5rem !important;
+    padding-bottom: 0.8rem !important;
+    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !important;
 }
 
-/* テキストエリアのカスタマイズ */
-textarea {
-    border-radius: 8px !important;
-    border: 1px solid var(--secondary-color) !important;
-    box-shadow: inset 0 2px 4px rgba(0,0,0,0.05) !important;
-    transition: all 0.3s ease !important;
+.app-header h1 {
+    font-family: 'Inter', sans-serif !important;
+    font-weight: 300 !important;
+    color: #0058a3 !important;
+    font-size: 1.8rem !important;
+    margin: 0 !important;
 }
 
-textarea:focus {
-    border-color: var(--primary-color) !important;
-    box-shadow: 0 0 0 3px rgba(75, 181, 193, 0.25) !important;
+.app-header p {
+    color: #64748b !important;
+    margin-top: 0.5rem !important;
+    font-size: 0.95rem !important;
 }
 
-/* HTML出力エリアのカスタマイズ */
-.html-output {
-    background-color: white;
-    border-radius: 8px;
-    border: 1px solid #e0e0e0;
-    padding: 16px;
-    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+.button-row {
+    display: flex !important;
+    gap: 10px !important;
+    margin-top: 1rem !important;
+    margin-bottom: 1.5rem !important;
 }
 
-/* ボタンのカスタマイズ */
-.preview-btn {
-    background: var(--accent-color) !important;
-    color: #333 !important;
-    border: none !important;
+.output-container {
+    background-color: #fcfcfc !important;
+    border: 1px solid #e2e8f0 !important;
     border-radius: 8px !important;
-    font-weight: 500 !important;
-    box-shadow: 0 4px 12px rgba(234, 196, 53, 0.4) !important;
-    transition: all 0.3s ease !important;
+    min-height: 300px !important;
+    max-height: 600px !important;
+    overflow-y: auto !important;
+    overflow-x: hidden !important;
+    padding: 1.2rem !important;
+    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.02) !important;
 }
 
-.preview-btn:hover {
-    transform: translateY(-2px) !important;
-    box-shadow: 0 6px 16px rgba(234, 196, 53, 0.5) !important;
+.empty-preview {
+    color: #94a3b8;
+    text-align: center;
+    padding: 5rem 1rem;
+    font-style: italic;
 }
 
-/* HTML表示エリアのカスタマイズ */
-.html-container {
-    border-radius: 8px;
-    border: none;
-    overflow: hidden;
-    background: transparent;
-    box-shadow: none;
-    padding: 0;
+.footer {
+    margin-top: 2rem !important;
+    text-align: center !important;
+    font-size: 0.85rem !important;
+    color: #94a3b8 !important;
+    font-style: italic !important;
 }
 
-/* レスポンシブ対応 */
+/* Responsive design */
 @media (max-width: 768px) {
-    .header h1 {
-        font-size: 1.5rem;
+    .gradio-container {
+        padding: 1rem !important;
+        border-radius: 8px !important;
+    }
+    
+    .output-container {
+        min-height: 200px !important;
     }
     
-    .content {
-        padding: 1rem;
+    .app-header h1 {
+        font-size: 1.5rem !important;
     }
 }
 """
 
-def preview_html(html_code):
-    """HTMLコードをプレビューとして表示する関数"""
-    # HTMLエスケープを防ぐためJavaScriptコメントをエスケープ
-    safe_html_code = html.escape(html_code).replace('`', '\\`')
-    
-    # ブラウザ風UIを実装したHTML
-    browser_html = f"""
-    <div style="border-radius: 10px; overflow: hidden; box-shadow: 0 8px 30px rgba(0,0,0,0.15); width: 100%; margin: 0 auto; font-family: sans-serif;">
-        <!-- ブラウザヘッダー部分 -->
-        <div style="background: linear-gradient(to bottom, #f0f0f0, #e0e0e0); padding: 10px 15px; border-bottom: 1px solid #ccc; display: flex; align-items: center;">
-            <div style="display: flex; gap: 6px; margin-right: 12px;">
-                <div style="width: 12px; height: 12px; border-radius: 50%; background-color: #ff5f57;"></div>
-                <div style="width: 12px; height: 12px; border-radius: 50%; background-color: #febc2e;"></div>
-                <div style="width: 12px; height: 12px; border-radius: 50%; background-color: #28c840;"></div>
-            </div>
-            <div style="flex-grow: 1; background-color: #f9f9f9; border-radius: 4px; padding: 5px 10px; font-size: 13px; color: #555; display: flex; align-items: center; justify-content: center;">
-                <svg style="width: 14px; height: 14px; margin-right: 6px; fill: #888;" viewBox="0 0 24 24">
-                    <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z"/>
-                </svg>
-                <span>HTML Preview</span>
-            </div>
-        </div>
+# Create the Gradio interface
+with gr.Blocks(theme=theme, css=css) as demo:
+    with gr.Column():
+        # Header
+        with gr.Column(elem_classes=["app-header"]):
+            gr.Markdown("# HTML Viewer")
+            gr.Markdown("Paste your HTML code and preview it instantly")
         
-        <!-- レスポンシブデザインのツールバー -->
-        <div style="background-color: #f8f8f8; padding: 8px 15px; border-bottom: 1px solid #ddd; display: flex; justify-content: center; gap: 15px;">
-            <div style="display: flex; align-items: center; padding: 5px 10px; border-radius: 4px; background-color: white; border: 1px solid #ddd; font-size: 12px; color: #555;">
-                <svg style="width: 14px; height: 14px; margin-right: 5px; fill: #666;" viewBox="0 0 24 24">
-                    <path d="M18 4H6c-1.1 0-2 .9-2 2v12c0 1.1.9 2 2 2h12c1.1 0 2-.9 2-2V6c0-1.1-.9-2-2-2zm0 14H6V6h12v12z"/>
-                </svg>
-                デスクトップ
-            </div>
-            <div style="display: flex; align-items: center; padding: 5px 10px; border-radius: 4px; font-size: 12px; color: #888;">
-                <svg style="width: 12px; height: 12px; margin-right: 5px; fill: #888;" viewBox="0 0 24 24">
-                    <path d="M15.5 1h-8C6.12 1 5 2.12 5 3.5v17C5 21.88 6.12 23 7.5 23h8c1.38 0 2.5-1.12 2.5-2.5v-17C18 2.12 16.88 1 15.5 1zm-4 21c-.83 0-1.5-.67-1.5-1.5s.67-1.5 1.5-1.5 1.5.67 1.5 1.5-.67 1.5-1.5 1.5zm4.5-4H7V4h9v14z"/>
-                </svg>
-                モバイル
-            </div>
-        </div>
+        # Input section
+        html_input = gr.Textbox(
+            label="HTML Code",
+            placeholder="Enter your HTML code here...",
+            lines=8,
+            max_lines=15,
+        )
         
-        <!-- コンテンツエリア - 実際のHTMLコードを表示 -->
-        <div id="preview-content" style="background-color: white; width: 100%; height: 450px; overflow-y: auto; overflow-x: hidden; position: relative;">
-            {html_code}
-        </div>
-    </div>
-    """
-    return browser_html
-
-# アプリケーションの構築
-with gr.Blocks(css=custom_css, theme=gr.themes.Soft(primary_hue="cyan")) as demo:
-    with gr.Column(elem_classes="container"):
-        gr.HTML(
-            """<div class="header">
-                <h1>✨ HTML Preview App</h1>
-                <p>石垣島の爽やかな風を感じるHTMLプレビューアー</p>
-            </div>""",
-            elem_id="app-header"
+        # Buttons
+        with gr.Row(elem_classes=["button-row"]):
+            display_button = gr.Button("Display HTML", variant="primary")
+            clear_button = gr.Button("Clear", variant="secondary")
+        
+        # Output preview
+        html_output = gr.HTML(
+            label="Preview",
+            value="<div class='empty-preview'>Enter HTML code and click 'Display HTML'</div>",
+            elem_classes=["output-container"]
         )
         
-        with gr.Column(elem_classes="content"):
-            gr.Markdown(
-                """
-                ### HTMLコードを入力してプレビューしましょう
-                テキストボックスにHTMLコードを入力し、「プレビュー」ボタンをクリックしてください。
-                """
-            )
-            
-            # 入力部分
-            html_input = gr.Textbox(
-                placeholder="ここにHTMLコードを入力...",
-                label="HTMLコード",
-                lines=10,
-                elem_id="html-input"
-            )
-            
-            # プレビューボタン
-            preview_button = gr.Button("プレビュー", elem_classes="preview-btn")
-            
-            # 結果表示部分
-            gr.Markdown("### プレビュー結果")
-            with gr.Column(elem_classes="html-container"):
-                html_output = gr.HTML(elem_id="html-output", height=550)
-            
-            # イベント設定
-            preview_button.click(
-                fn=preview_html,
-                inputs=html_input,
-                outputs=html_output
-            )
-            
-            # サンプルの例
-            gr.Examples(
-                [
-                    "<h1 style='color: #4BB5C1;'>こんにちは世界！</h1><p>これはHTMLプレビューアプリです。</p>",
-                    "<div style='background: linear-gradient(135deg, #4BB5C1, #7CCBBD); padding: 20px; color: white; border-radius: 8px;'><h2>石垣島の青い海</h2><p>透明度の高い海と白い砂浜が魅力です。</p></div>",
-                    "<ul style='list-style-type: none; padding: 0;'><li style='padding: 10px; margin-bottom: 5px; background-color: #f0f8ff; border-left: 4px solid #4BB5C1;'>アイテム 1</li><li style='padding: 10px; margin-bottom: 5px; background-color: #f0f8ff; border-left: 4px solid #7CCBBD;'>アイテム 2</li><li style='padding: 10px; margin-bottom: 5px; background-color: #f0f8ff; border-left: 4px solid #EAC435;'>アイテム 3</li></ul>"
-                ],
-                inputs=html_input,
-                label="サンプル例"
-            )
-            
-            gr.Markdown(
-                """
-                ---
-                ### 使い方のヒント
-                - HTMLタグを使って自由にデザインできます
-                - スタイルは`style`属性で指定可能です
-                - 画像などの外部リソースも表示できます (src属性でURL指定)
-                """
-            )
-
-    # フッター
-    gr.HTML(
-        """
-        <footer style="text-align: center; margin-top: 20px; padding: 10px; color: #666; font-size: 0.9rem;">
-            <p>Created with 💙 using Gradio 5.22.0</p>
-        </footer>
-        """
-    )
+        # Footer
+        gr.Markdown(
+            "*Inspired by the elegant white ambiance of Intercontinental Hotel Ishigaki's Club Lounge*",
+            elem_classes=["footer"]
+        )
+    
+    # Event handlers
+    display_button.click(fn=display_html, inputs=html_input, outputs=html_output)
+    clear_button.click(fn=lambda: "", inputs=None, outputs=html_input)
 
-# 起動設定
+# Launch the app
 if __name__ == "__main__":
     demo.launch()