Spaces:
Sleeping
Sleeping
| import gradio as gr | |
| from pipeline import Pipeline | |
| import asyncio | |
| pipeline = Pipeline() | |
| # Define a light, pastel color theme inspired by modern web design | |
| theme = gr.themes.Soft( | |
| primary_hue=gr.themes.colors.blue, | |
| secondary_hue=gr.themes.colors.sky, | |
| neutral_hue=gr.themes.colors.slate, | |
| font=[gr.themes.GoogleFont("Poppins"), "ui-sans-serif", "system-ui", "sans-serif"], | |
| ).set( | |
| # Body and background colors | |
| body_background_fill="#f0f9ff", # A very light pastel blue | |
| body_background_fill_dark="#020617", | |
| # Card/Block styles | |
| block_background_fill="white", | |
| block_border_width="1px", | |
| block_shadow="*shadow_drop_lg", | |
| block_radius="*radius_xl", | |
| # Button styles | |
| button_primary_background_fill="*primary_500", | |
| button_primary_background_fill_hover="*primary_600", | |
| button_primary_text_color="white", | |
| ) | |
| # Custom CSS for finer control over the layout | |
| custom_css = """ | |
| /* Make the container wider for a better desktop experience */ | |
| .gradio-container { | |
| max-width: 90% !important; | |
| } | |
| /* Vertically align the button with the textbox */ | |
| .input-row { | |
| align-items: center; | |
| } | |
| /* Add spacing between status box and report preview */ | |
| .gr-block > .gr-row > *:not(:last-child) { | |
| margin-right: 2rem; | |
| } | |
| """ | |
| async def analyze(url: str): | |
| if not url: | |
| yield gr.update(value="❌ Please enter a URL."), gr.update(value="") | |
| return | |
| html_output = "" | |
| async for status, payload in pipeline.run(url): | |
| if payload and isinstance(payload, str) and payload.strip().startswith("<!DOCTYPE html>"): | |
| html_output = payload | |
| yield gr.update(value=status), gr.update(value=html_output) | |
| def launch_ui(): | |
| """ | |
| Launches the Gradio interface with the new pastel theme and improved layout. | |
| """ | |
| with gr.Blocks(theme=theme, css=custom_css, title="Website Analyzer") as demo: | |
| # Main Title and Subtitle | |
| gr.Markdown( | |
| """ | |
| <div style="text-align: center; padding: 2rem 0;"> | |
| <h1 style="font-size: 2.8rem; font-weight: 700; color: #2a49d2;">Website Intelligence Report</h1> | |
| <p style="color: #475569; font-size: 1.1rem;">Enter any URL to generate a comprehensive analysis of its performance, SEO, and layout.</p> | |
| </div> | |
| """ | |
| ) | |
| # Input Row: URL Textbox and Analyze Button | |
| with gr.Row(elem_classes="input-row"): | |
| url_in = gr.Textbox( | |
| label="Webpage URL", | |
| placeholder="e.g., https://www.example.com", | |
| scale=4, # Give more width to the textbox | |
| container=False # Remove the container for better alignment | |
| ) | |
| analyze_btn = gr.Button( | |
| "Analyze 🚀", | |
| variant="primary", | |
| scale=1, # Give less width to the button | |
| ) | |
| # Output Sections | |
| status_out = gr.Textbox( | |
| label="Analysis Progress", | |
| interactive=False, | |
| lines=1, | |
| scale=1, | |
| placeholder="Status updates will appear here...", | |
| ) | |
| html_preview = gr.HTML( | |
| label="Final Report Preview" | |
| # scale=3 | |
| ) | |
| gr.Markdown( | |
| "--- \n" | |
| "<p style='text-align:center; color: #6b7280;'>💡 After analysis, use the <strong>Print Report</strong> button inside the preview to save as a PDF.</p>" | |
| ) | |
| # Button Click Action | |
| analyze_btn.click( | |
| fn=analyze, | |
| inputs=[url_in], | |
| outputs=[status_out, html_preview], | |
| show_progress="full", | |
| concurrency_limit=1, | |
| ) | |
| demo.launch(share=True) | |
| if __name__ == "__main__": | |
| launch_ui() | |