import io import random from typing import List, Tuple import aiohttp import panel as pn import pandas as pd import plotly.express as px import numpy as np from PIL import Image from transformers import CLIPModel, CLIPProcessor from datetime import datetime, timedelta # Enable panel extensions pn.extension(design="fast", sizing_mode="stretch_width") # Icons list ICON_URLS = { "brand-github": "https://github.com/holoviz/panel", "brand-twitter": "https://twitter.com/Panel_Org", "brand-linkedin": "https://www.linkedin.com/company/panel-org", "message-circle": "https://discourse.holoviz.org/", "brand-discord": "https://discord.gg/AXRHnJU6sP", } # --- 1. SAMPLE DATA GENERATION --- def generate_sample_data(): np.random.seed(42) start_date = datetime(2024, 1, 1) dates = [start_date + timedelta(days=i) for i in range(540)] # 1.5 years of daily data regions = ['North', 'East', 'South', 'West'] categories = ['Electronics', 'Furniture', 'Office Supplies'] subcategories = { 'Electronics': ['Phones', 'Laptops', 'Accessories'], 'Furniture': ['Chairs', 'Tables', 'Bookcases'], 'Office Supplies': ['Paper', 'Art', 'Binders'] } data = [] for date in dates: num_orders = np.random.randint(1, 5) for _ in range(num_orders): region = np.random.choice(regions) cat = np.random.choice(categories) subcat = np.random.choice(subcategories[cat]) if cat == 'Electronics': base_sales = np.random.uniform(200, 1500) profit_factor = np.random.uniform(0.1, 0.25) elif cat == 'Furniture': base_sales = np.random.uniform(100, 800) profit_factor = np.random.uniform(0.02, 0.15) else: base_sales = np.random.uniform(10, 150) profit_factor = np.random.uniform(0.2, 0.45) if date.month in [11, 12]: base_sales *= np.random.uniform(1.2, 1.5) sales = round(base_sales, 2) profit = round(sales * profit_factor, 2) quantity = np.random.randint(1, 8) data.append({ 'Date': date, 'Region': region, 'Category': cat, 'Sub-Category': subcat, 'Sales': sales, 'Profit': profit, 'Quantity': quantity, 'Year': date.year }) return pd.DataFrame(data) df_data = generate_sample_data() # --- 2. CLIP ML CLASSIFIER MODEL CACHING --- @pn.cache def load_processor_model( processor_name: str, model_name: str ) -> Tuple[CLIPProcessor, CLIPModel]: processor = CLIPProcessor.from_pretrained(processor_name) model = CLIPModel.from_pretrained(model_name) return processor, model async def open_image_url(image_url: str) -> Image: async with aiohttp.ClientSession() as session: async with session.get(image_url) as resp: if resp.status != 200: raise Exception(f"HTTP status {resp.status}") return Image.open(io.BytesIO(await resp.read())) def get_similarity_scores(class_items: List[str], image: Image) -> List[float]: processor, model = load_processor_model( "openai/clip-vit-base-patch32", "openai/clip-vit-base-patch32" ) inputs = processor( text=class_items, images=[image], return_tensors="pt", ) outputs = model(**inputs) logits_per_image = outputs.logits_per_image class_likelihoods = logits_per_image.softmax(dim=1).detach().numpy() return class_likelihoods[0] # --- 3. WIDGET DEFINITIONS --- # Global Sidebar Filters date_min = df_data['Date'].min().to_pydatetime() date_max = df_data['Date'].max().to_pydatetime() date_range_slider = pn.widgets.DateRangeSlider( name='Filter Date Range', start=date_min, end=date_max, value=(date_min, date_max), sizing_mode="stretch_width" ) regions_list = sorted(list(df_data['Region'].unique())) region_select = pn.widgets.MultiChoice( name='Filter Regions', options=regions_list, value=regions_list, sizing_mode="stretch_width" ) categories_list = sorted(list(df_data['Category'].unique())) category_checkboxes = pn.widgets.CheckBoxGroup( name='Filter Categories', options=categories_list, value=categories_list, inline=False ) # Overview Tab Widgets name_input = pn.widgets.TextInput(name="Enter your name", value="Developer", placeholder="Type name here...", sizing_mode="stretch_width") color_picker = pn.widgets.ColorPicker(name="Choose card theme color", value="#20B2AA", sizing_mode="stretch_width") size_slider = pn.widgets.IntSlider(name="Font size adjustment", start=12, end=28, value=16, sizing_mode="stretch_width") # ML Tab Widgets image_selector = pn.widgets.Select( name="Select a sample image", options={ "Cat": "https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?q=80&w=600&auto=format&fit=crop", "Dog": "https://images.unsplash.com/photo-1543466835-00a7907e9de1?q=80&w=600&auto=format&fit=crop", "Parrot": "https://images.unsplash.com/photo-1552728089-57bdde30ebd3?q=80&w=600&auto=format&fit=crop", "Sports Car": "https://images.unsplash.com/photo-1503376780353-7e6692767b70?q=80&w=600&auto=format&fit=crop", "Mountain Landscape": "https://images.unsplash.com/photo-1464822759023-fed622ff2c3b?q=80&w=600&auto=format&fit=crop", "Custom URL (Enter below)": "custom" }, value="https://images.unsplash.com/photo-1514888286974-6c03e2ca1dba?q=80&w=600&auto=format&fit=crop", sizing_mode="stretch_width" ) custom_url_input = pn.widgets.TextInput( name="Custom Image URL", placeholder="Paste any public image URL here...", visible=False, sizing_mode="stretch_width" ) def update_custom_url_visibility(val): custom_url_input.visible = (val == "custom") image_selector.param.watch(lambda event: update_custom_url_visibility(event.new), 'value') class_names_input = pn.widgets.TextInput( name="Candidate Classes (comma-separated)", value="cat, dog, parrot, car, mountain", placeholder="e.g. cat, dog, parrot", sizing_mode="stretch_width" ) classify_btn = pn.widgets.Button(name="Run CLIP Inference", button_type="primary", sizing_mode="stretch_width") # Playground Tab Widgets latex_input = pn.widgets.TextInput( name="LaTeX Equation Editor", value=r"f(x) = \int_{-\infty}^{\infty} e^{-x^2} dx = \sqrt{\pi}" ) latex_pane = pn.pane.LaTeX( pn.bind(lambda eq: f"$$\\text{{Output: }} {eq}$$", latex_input), align="center" ) markdown_editor = pn.widgets.TextAreaInput( name="Markdown Editor", value="### Markdown Live Preview!\n- **Bold text**\n- *Italics*\n- [Link to Panel](https://panel.holoviz.org)", height=120 ) markdown_pane = pn.pane.Markdown(pn.bind(lambda val: val, markdown_editor)) file_input = pn.widgets.FileInput(name="Upload File (CSV/Text)", accept=".csv,.txt") def file_details(data): if data is None: return "*No file uploaded yet. Upload a .csv or .txt file to view details.*" try: file_len = len(data) text_preview = data[:150].decode('utf-8', errors='ignore') return f"**File Size**: {file_len} bytes\n\n**First 150 characters**:\n```\n{text_preview}\n```" except Exception as e: return f"Failed to parse file: {str(e)}" file_details_pane = pn.pane.Markdown(pn.bind(file_details, file_input)) video_widget = pn.widgets.Video( value="https://assets.mixkit.co/videos/preview/mixkit-forest-stream-in-the-sunlight-529-large.mp4", loop=True, autoplay=False, sizing_mode="stretch_width", height=200 ) # --- 4. REACTIVE FUNCTIONS & CARD GENERATORS --- # KPI Cards generator def make_kpi_card(title, value, color="#20B2AA", icon="💵"): return pn.pane.HTML(f"""
{title} {value}
{icon}
""", sizing_mode="stretch_width") # Overview Greeting Card def greeting_card(name, color, size): style_content = f"""

Welcome to Panel, {name if name else "Developer"}! 🚀

This card is updating in real time using Panel reactive bindings.

""" return pn.pane.HTML(style_content, sizing_mode="stretch_width") overview_interactive_card = pn.bind(greeting_card, name=name_input, color=color_picker, size=size_slider) # Data Dashboard generator def get_dashboard_layout(df_filtered): if df_filtered.empty: return pn.pane.Markdown("### ⚠️ No data matches the selected filters. Please adjust them in the sidebar.") total_sales = df_filtered['Sales'].sum() total_profit = df_filtered['Profit'].sum() margin = (total_profit / total_sales) if total_sales > 0 else 0 total_qty = df_filtered['Quantity'].sum() kpi1 = make_kpi_card("Total Sales", f"${total_sales:,.2f}", "#20B2AA", "💰") kpi2 = make_kpi_card("Total Profit", f"${total_profit:,.2f}", "#4CAF50" if total_profit >= 0 else "#F44336", "📈") kpi3 = make_kpi_card("Profit Margin", f"{margin:.1%}", "#FF9800", "📊") kpi4 = make_kpi_card("Products Sold", f"{total_qty:,}", "#9C27B0", "📦") kpis = pn.Row(kpi1, kpi2, kpi3, kpi4, sizing_mode="stretch_width", margin=(0, 0, 20, 0)) # 1. Line chart: Monthly trend df_monthly = df_filtered.groupby(df_filtered['Date'].dt.to_period('M')).agg({'Sales': 'sum', 'Profit': 'sum'}).reset_index() df_monthly['Date'] = df_monthly['Date'].dt.to_timestamp() fig_line = px.line( df_monthly, x='Date', y='Sales', title="Monthly Sales Trend", labels={'Sales': 'Sales ($)', 'Date': 'Month'}, template="plotly_white" ) fig_line.update_traces(line_color="#20B2AA", line_width=3) fig_line.update_layout( margin=dict(l=40, r=40, t=40, b=40), paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor="rgba(0,0,0,0)", font=dict(color="gray") ) chart_line = pn.pane.Plotly(fig_line, sizing_mode="stretch_width", height=350) # 2. Bar chart: Category df_cat = df_filtered.groupby(['Category', 'Sub-Category']).agg({'Sales': 'sum'}).reset_index() fig_bar = px.bar( df_cat, x='Sub-Category', y='Sales', color='Category', title="Sales by Category & Sub-Category", labels={'Sales': 'Sales ($)', 'Sub-Category': 'Sub-Category'}, color_discrete_sequence=["#20B2AA", "#FF9800", "#9C27B0"], template="plotly_white" ) fig_bar.update_layout( margin=dict(l=40, r=40, t=40, b=40), paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor="rgba(0,0,0,0)", font=dict(color="gray") ) chart_bar = pn.pane.Plotly(fig_bar, sizing_mode="stretch_width", height=350) # 3. Scatter plot fig_scatter = px.scatter( df_filtered, x='Sales', y='Profit', color='Category', size='Quantity', hover_data=['Sub-Category', 'Date'], title="Transaction Profitability (Sales vs Profit)", color_discrete_sequence=["#20B2AA", "#FF9800", "#9C27B0"], opacity=0.7, template="plotly_white" ) fig_scatter.update_layout( margin=dict(l=40, r=40, t=40, b=40), paper_bgcolor="rgba(0,0,0,0)", plot_bgcolor="rgba(0,0,0,0)", font=dict(color="gray") ) chart_scatter = pn.pane.Plotly(fig_scatter, sizing_mode="stretch_width", height=350) layout = pn.Column( kpis, pn.Row(chart_line, chart_bar, sizing_mode="stretch_width", margin=(0, 0, 20, 0)), pn.Row(chart_scatter, sizing_mode="stretch_width"), sizing_mode="stretch_width" ) return layout def filter_and_render_dashboard(date_range, regions, categories): df_filtered = df_data.copy() start_dt, end_dt = date_range df_filtered = df_filtered[(df_filtered['Date'] >= start_dt) & (df_filtered['Date'] <= end_dt)] if regions: df_filtered = df_filtered[df_filtered['Region'].isin(regions)] else: df_filtered = df_filtered[df_filtered['Region'].isin([])] if categories: df_filtered = df_filtered[df_filtered['Category'].isin(categories)] else: df_filtered = df_filtered[df_filtered['Category'].isin([])] return get_dashboard_layout(df_filtered) interactive_dashboard = pn.panel( pn.bind(filter_and_render_dashboard, date_range=date_range_slider, regions=region_select, categories=category_checkboxes), sizing_mode="stretch_width" ) # ML Classification generator async def classify_image(url, classes_str): if not url or url == "custom": yield "##### ⚠️ Please provide a valid image URL." return try: yield "##### ⚙ Fetching image..." pil_img = await open_image_url(url) img_pane = pn.pane.Image(pil_img, height=280, align="center") except Exception as e: yield f"##### 😔 Failed to load image from URL: `{url}`. Error: {str(e)}" return yield "##### ⚙ Running CLIP Model (openai/clip-vit-base-patch32)..." try: class_items = [c.strip() for c in classes_str.split(",") if c.strip()] if not class_items: yield "##### ⚠️ Please specify at least one class name." return scores = get_similarity_scores(class_items, pil_img) results_col = pn.Column( "##### 🎉 Classification Results", img_pane, sizing_mode="stretch_width" ) for name, score in zip(class_items, scores): bar = pn.indicators.Progress( value=int(score * 100), sizing_mode="stretch_width", bar_color="success" if score > 0.5 else "info", height=15 ) label = pn.pane.Markdown(f"**{name}**: {score:.2%}", margin=(5, 0, 0, 0)) results_col.append(pn.Column(label, bar, margin=(5, 0))) yield results_col except Exception as e: yield f"##### 😔 Classification failed. Error: {str(e)}" def run_classification_on_click(clicks): url = image_selector.value if url == "custom": url = custom_url_input.value classes = class_names_input.value if clicks == 0: if url and url != "custom": try: img_pane = pn.pane.Image(url, height=280, align="center") return pn.Column("##### Image Preview", img_pane) except: pass return "##### 💡 Click 'Run CLIP Inference' to start classification." return pn.panel(classify_image(url, classes)) classification_output_area = pn.panel( pn.bind(run_classification_on_click, clicks=classify_btn), sizing_mode="stretch_width" ) # Reset output when inputs change def reset_clicks(event): classify_btn.clicks = 0 image_selector.param.watch(reset_clicks, 'value') custom_url_input.param.watch(reset_clicks, 'value') class_names_input.param.watch(reset_clicks, 'value') # --- 5. FOOTER SOCIAL LINKS --- footer_row = pn.Row(pn.Spacer(), align="center") for icon, url in ICON_URLS.items(): href_button = pn.widgets.Button(icon=icon, width=38, height=38, button_type="light") href_button.js_on_click(code=f"window.open('{url}')") footer_row.append(href_button) footer_row.append(pn.Spacer()) # --- 6. TEMPLATE ASSEMBLING --- template = pn.template.FastListTemplate( title="HoloViz Panel Interactive Showcase", sidebar=[ "## Dashboard Filters", "*(These filters apply to the **Data Analytics Dashboard** tab)*", date_range_slider, pn.Spacer(height=10), region_select, pn.Spacer(height=10), category_checkboxes, pn.Spacer(height=25), "### About HoloViz Panel", "Panel is a powerful Python library that lets you build high-performance interactive web applications, dashboards, and data portals entirely in Python.", "[Documentation](https://panel.holoviz.org)", "[GitHub Repository](https://github.com/holoviz/panel)" ], main=[ pn.Tabs( ("🚀 Overview & Basics", pn.Column( pn.pane.Markdown(""" # Welcome to the HoloViz Panel Showcase! 📈 This Space demonstrates how to build premium, fully interactive dashboards and web applications directly in Python using **Panel**. ### Why choose Panel? - **No HTML/CSS/JS required**: Build complex frontends completely in Python. - **Rich Ecosystem Integration**: Seamlessly connect Bokeh, Plotly, Altair, Matplotlib, PyTorch, and Hugging Face models. - **Reactive and Callback APIs**: Simple decorators or bindings to link widgets directly to code. - **Out-of-the-box templates**: Stunning themes like Fast, Material, and Bootstrap that support Dark/Light mode switching. """), pn.Spacer(height=15), pn.Row( pn.Column( "### 1. Interactive Greetings Widget", "Change the inputs below and watch the card update instantly.", name_input, color_picker, size_slider, margin=(0, 15) ), pn.Column( "### Live Preview", overview_interactive_card, margin=(0, 15) ), sizing_mode="stretch_width" ), pn.Spacer(height=20), pn.pane.Markdown(""" ### Check out other tabs: - **📊 Data Analytics Dashboard**: A full sales dashboard using Plotly Express linked dynamically to the sidebar filters. - **🤖 CLIP Image Classifier**: Real-time AI classification using an OpenAI CLIP model cached in memory. - **🛠 Widget Playground**: Live LaTeX editing, Markdown previewing, and file uploads. """) )), ("📊 Data Analytics Dashboard", pn.Column( "## Real-time Superstore Analytics", "Use the filters in the **left sidebar** to refine this dashboard in real-time.", pn.Spacer(height=10), interactive_dashboard )), ("🤖 CLIP Image Classifier", pn.Column( "## AI Image Classification with CLIP", "This tab runs **OpenAI CLIP (clip-vit-base-patch32)** to classify images based on natural language descriptors.", pn.Spacer(height=10), pn.Row( pn.Column( image_selector, custom_url_input, class_names_input, pn.Spacer(height=10), classify_btn, width=320, margin=(0, 15) ), pn.Column( classification_output_area, margin=(0, 15) ), sizing_mode="stretch_width" ) )), ("🛠 Widget Playground", pn.Column( "## Panel Interactive Playground", "Explore some of Panel's diverse widgets and dynamic rendering capabilities.", pn.Spacer(height=15), pn.Row( pn.Column( "### Live LaTeX Renderer", latex_input, latex_pane, margin=(0, 15) ), pn.Column( "### Live Markdown Editor", markdown_editor, markdown_pane, margin=(0, 15) ), sizing_mode="stretch_width" ), pn.Spacer(height=20), pn.Row( pn.Column( "### File Upload Inspector", file_input, file_details_pane, margin=(0, 15) ), pn.Column( "### Embedded Video Player", video_widget, margin=(0, 15) ), sizing_mode="stretch_width" ) )) ), pn.Spacer(height=40), footer_row ], accent_base_color="#20B2AA", header_background="#20B2AA", theme_toggle=True ) template.servable()