Spaces:

tomo2chin2
/

HTMLviewer

Paused

App Files Files Community

tomo2chin2 commited on Mar 24, 2025

Commit

b688ee9

verified ·

1 Parent(s): 1119dd0

Update app.py

Browse files

Files changed (1) hide show

app.py +63 -247

app.py CHANGED Viewed

@@ -1,268 +1,84 @@
 import gradio as gr
-import re
-import html
-from bs4 import BeautifulSoup
-def sanitize_html(html_code):
-    """Sanitize HTML input for security and formatting"""
-    # Basic sanitization
-    try:
-        soup = BeautifulSoup(html_code, 'html.parser')
-        # Remove potentially dangerous tags
-        for script in soup(["script", "iframe", "object", "embed"]):
-            script.decompose()
-        # Get sanitized HTML
-        sanitized = str(soup)
-    except:
-        # Fallback if BeautifulSoup fails
-        sanitized = html.escape(html_code)
-        sanitized = f"<pre>{sanitized}</pre>"
-    # Create full HTML document with styling to prevent horizontal scroll
     return f"""
-    <!DOCTYPE html>
-    <html>
-    <head>
-        <meta charset="UTF-8">
-        <meta name="viewport" content="width=device-width, initial-scale=1.0">
-        <style>
-            body {{
-                font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
-                margin: 0;
-                padding: 20px;
-                background-color: #f8fafc;
-                color: #334155;
-                line-height: 1.6;
-                overflow-x: hidden;
-                max-width: 100%;
-            }}
-            * {{
-                max-width: 100%;
-                box-sizing: border-box;
-            }}
-            img, video, table, pre, div {{
-                max-width: 100% !important;
-                height: auto !important;
-                overflow-x: hidden !important;
-            }}
-            table {{
-                border-collapse: collapse;
-                margin: 10px 0;
-            }}
-            pre {{
-                white-space: pre-wrap;
-                background-color: #f1f5f9;
-                padding: 10px;
-                border-radius: 5px;
-                overflow-x: hidden;
-            }}
-        </style>
-    </head>
-    <body>
-        {sanitized}
-    </body>
-    </html>
     """
-def update_iframe(html_code):
-    """Process HTML input for the iframe"""
-    if not html_code.strip():
-        return """
-        <!DOCTYPE html>
-        <html>
-        <head>
-            <style>
-                body {
-                    display: flex;
-                    justify-content: center;
-                    align-items: center;
-                    height: 100vh;
-                    margin: 0;
-                    font-family: 'Inter', sans-serif;
-                    color: #94a3b8;
-                    text-align: center;
-                    background-color: #f8fafc;
-                }
-            </style>
-        </head>
-        <body>
-            <div>Enter HTML code for preview</div>
-        </body>
-        </html>
-        """
-    return sanitize_html(html_code)
-# Create elegant theme inspired by Intercontinental Hotel Ishigaki
-theme = gr.themes.Soft(
-    primary_hue="indigo",
     secondary_hue="blue",
     neutral_hue="slate",
-    font=gr.themes.GoogleFont("Inter"),
-    font_mono=gr.themes.GoogleFont("IBM Plex Mono"),
-).set(
-    button_primary_background_fill="*primary_500",
-    button_primary_background_fill_hover="*primary_600",
-    button_primary_text_color="white",
-    button_secondary_background_fill="white",
-    button_secondary_background_fill_hover="*neutral_100",
-    button_secondary_text_color="*neutral_800",
-    block_title_text_color="*primary_700",
-    block_label_text_color="*neutral_600",
-    background_fill_primary="white",
-    block_background_fill="*neutral_50",
-    input_background_fill="white",
-)
-# Custom CSS for elegant styling
-css = """
-.gradio-container {
-    max-width: 1200px !important;
-    margin: 0 auto !important;
-    background-color: #ffffff !important;
-    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.03) !important;
-    border-radius: 16px !important;
-    overflow: hidden !important;
-}
-.header-container {
-    background: linear-gradient(135deg, #e0f2fe, #f0f9ff) !important;
-    padding: 2rem 1.5rem 1.5rem !important;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.03) !important;
-    margin-bottom: 1.5rem !important;
-}
-.header-title {
-    font-weight: 300 !important;
-    color: #1e40af !important;
-    font-size: 2rem !important;
-    margin: 0 !important;
-    letter-spacing: -0.02em !important;
-}
-.header-subtitle {
-    color: #475569 !important;
-    font-weight: 400 !important;
-    margin-top: 0.5rem !important;
-}
-.input-panel {
-    background-color: white !important;
-    border-radius: 10px !important;
-    padding: 0.5rem !important;
-    border: 1px solid #e2e8f0 !important;
-}
-.preview-container {
-    border: 1px solid #e2e8f0 !important;
-    border-radius: 10px !important;
-    overflow: hidden !important;
-}
-.preview-container iframe {
-    border: none !important;
-    background-color: white !important;
-}
-.footer {
-    text-align: center !important;
-    padding: 1.5rem !important;
-    color: #94a3b8 !important;
-    font-size: 0.8rem !important;
-    border-top: 1px solid #f1f5f9 !important;
-    margin-top: 2rem !important;
-}
-/* Responsive adjustments */
-@media (max-width: 768px) {
-    .header-title {
-        font-size: 1.5rem !important;
-    }
-    .two-column {
-        flex-direction: column !important;
-    }
-}
-"""
-# Create the Gradio interface
-with gr.Blocks(theme=theme, css=css) as demo:
-    # Header
-    with gr.Column(elem_classes=["header-container"]):
-        gr.Markdown("# HTML Previewer", elem_classes=["header-title"])
-        gr.Markdown("Elegant HTML visualization inspired by Intercontinental Ishigaki",
-                   elem_classes=["header-subtitle"])
-    # Main content with responsive layout
-    with gr.Row(equal_height=True, elem_classes=["two-column"]) as layout_row:
-        # Input panel
-        with gr.Column(scale=1, elem_classes=["input-panel"]):
-            html_input = gr.Code(
-                label="HTML Code",
-                language="html",
-                value="<!-- Enter your HTML here -->",
-                lines=15,
-                elem_id="html-input"
-            )
-            with gr.Row():
-                clear_btn = gr.Button("Clear", variant="secondary")
-                copy_btn = gr.Button("Copy HTML", variant="secondary")
-        # Preview panel
-        with gr.Column(scale=1, elem_classes=["preview-container"]):
-            html_preview = gr.HTML(label="Preview", elem_id="preview-container")
-    # Footer
-    with gr.Column(elem_classes=["footer"]):
-        gr.Markdown("*Designed with the elegant simplicity of Intercontinental Hotel Ishigaki's Club Lounge in mind*")
-    # Event handlers
-    html_input.change(
-        fn=update_iframe,
-        inputs=html_input,
-        outputs=html_preview,
-        api_name=False,
-        _js="""
-        function(html_code) {
-            // This is client-side handling of the preview
-            const iframe = document.createElement('iframe');
-            iframe.style.width = '100%';
-            iframe.style.height = '500px';
-            iframe.style.border = 'none';
-            iframe.style.borderRadius = '8px';
-            // Create preview element
-            const previewContainer = document.getElementById('preview-container');
-            previewContainer.innerHTML = '';
-            previewContainer.appendChild(iframe);
-            // Set content
-            const iframeDoc = iframe.contentWindow.document;
-            iframeDoc.open();
-            iframeDoc.write(html_code);
-            iframeDoc.close();
-            return html_code;
-        }
-        """
     )
-    clear_btn.click(fn=lambda: "<!-- Enter your HTML here -->", inputs=None, outputs=html_input)
-    copy_btn.click(fn=None, inputs=None, outputs=None,
-                  _js="""
-                  function() {
-                      const code = document.getElementById('html-input').querySelector('textarea').value;
-                      navigator.clipboard.writeText(code);
-                      return null;
-                  }
-                  """)
-# Launch the app
 if __name__ == "__main__":
     demo.launch()

 import gradio as gr
+def display_html(html_code):
+    """
+    入力されたHTMLコードをgr.HTMLコンポーネントに表示する関数。
+    """
     return f"""
+        <div style='overflow-x: hidden; height: 80vh; width:100%;'>
+            {html_code}
+        </div>
     """
+# インターコンチネンタルホテル石垣島のクラブラウンジ風のテーマ設定。
+# 白基調で、少し青みがかったアクセントを加える。
+theme = gr.themes.Base(
+    primary_hue="slate", # 全体の基本色を少し青みがかったグレーに
     secondary_hue="blue",
     neutral_hue="slate",
+).set(
+    body_background_fill="#f8f9fa",  # 非常に薄いグレー
+    body_text_color="black",
+    button_primary_background_fill="#e0f2fe",   # ごく薄い水色
+    button_primary_background_fill_hover="#bae6fd",
+    button_primary_text_color="black",
+    border_color_primary="#d1d5db",  # やや濃いグレー
+    block_background_fill="white",
+    block_title_text_color="#3b82f6", #青色
+    block_label_text_color="#1d4ed8", #濃い青
+    block_border_color="white",
+)
+with gr.Blocks(theme=theme, title="HTML Viewer") as demo:  #themeを指定
+    gr.Markdown(
+    """
+    # HTML Viewer
+    入力されたHTMLコードを、プレビュー表示します。
+    * 横スクロール禁止、縦スクロール許可
+    * レスポンシブデザイン (Gradio デフォルト)
+    * スマホでの表示は、PC版を縮小したようなイメージ
+    * インターコンチネンタル石垣島のクラブラウンジ風の、白く爽やかな外観
+    """)
+    with gr.Row():
+        with gr.Column(scale=1):
+            input_textbox = gr.Textbox(
+                label="HTMLコードを入力",
+                placeholder="ここにHTMLコードを貼り付けてください...",
+                lines=10
+                )
+            submit_button = gr.Button("表示")
+        with gr.Column(scale=3):
+            output_html = gr.HTML(label="プレビュー",)
+    submit_button.click(
+        display_html,
+        inputs=input_textbox,
+        outputs=output_html
+    )
+    #サンプル
+    gr.Examples(
+        [["<h1>Hello world</h1>"],["""
+        <!DOCTYPE html>
+          <html>
+           <head>
+            <title>サンプルページ</title>
+           </head>
+          <body>
+            <h1 style='color:blue';>Hello world!</h1>
+            <p>サンプル</p>
+           </body>
+          </html>"""]],
+        inputs = input_textbox
     )
 if __name__ == "__main__":
     demo.launch()