Spaces:

tomo2chin2
/

HTMLviewer

Paused

App Files Files Community

tomo2chin2 commited on Mar 24, 2025

Commit

1119dd0

verified ·

1 Parent(s): 90ce6d3

Update app.py

Browse files

Files changed (1) hide show

app.py +208 -102

app.py CHANGED Viewed

@@ -1,161 +1,267 @@
 import gradio as gr
 import re
 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;
 }
-.app-header {
     margin-bottom: 1.5rem !important;
-    padding-bottom: 0.8rem !important;
-    border-bottom: 1px solid rgba(0, 0, 0, 0.05) !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;
 }
-.app-header p {
-    color: #64748b !important;
     margin-top: 0.5rem !important;
-    font-size: 0.95rem !important;
 }
-.button-row {
-    display: flex !important;
-    gap: 10px !important;
-    margin-top: 1rem !important;
-    margin-bottom: 1.5rem !important;
 }
-.output-container {
-    background-color: #fcfcfc !important;
     border: 1px solid #e2e8f0 !important;
-    border-radius: 8px !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;
 }
-.empty-preview {
-    color: #94a3b8;
-    text-align: center;
-    padding: 5rem 1rem;
-    font-style: italic;
 }
 .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) {
-    .gradio-container {
-        padding: 1rem !important;
-        border-radius: 8px !important;
-    }
-    .output-container {
-        min-height: 200px !important;
     }
-    .app-header h1 {
-        font-size: 1.5rem !important;
     }
 }
 """
 # 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")
-        # Input section
-        html_input = gr.Textbox(
-            label="HTML Code",
-            placeholder="Enter your HTML code here...",
-            lines=8,
-            max_lines=15,
-        )
-        # 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"]
-        )
-        # 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__":

 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__":