Upload folder using huggingface_hub

app.py

@@ -1,14 +1,19 @@
 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
 
-pn.extension(design="bootstrap", sizing_mode="stretch_width")
+# 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",
@@ -17,15 +22,61 @@ ICON_URLS = {
     "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)
 
-async def random_url(_):
-    pet = random.choice(["cat", "dog"])
-    api_url = f"https://api.the{pet}api.com/v1/images/search"
-    async with aiohttp.ClientSession() as session:
-        async with session.get(api_url) as resp:
-            return (await resp.json())[0]["url"]
-
+df_data = generate_sample_data()
 
+# --- 2. CLIP ML CLASSIFIER MODEL CACHING ---
 @pn.cache
 def load_processor_model(
     processor_name: str, model_name: str
@@ -34,13 +85,13 @@ def load_processor_model(
     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"
@@ -48,100 +99,471 @@ def get_similarity_scores(class_items: List[str], image: Image) -> List[float]:
     inputs = processor(
         text=class_items,
         images=[image],
-        return_tensors="pt",  # pytorch tensors
+        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 ---
 
-async def process_inputs(class_names: List[str], image_url: str):
-    """
-    High level function that takes in the user inputs and returns the
-    classification results as panel objects.
-    """
+# 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:
-        main.disabled = True
-        if not image_url:
-            yield "##### ⚠️ Provide an image URL"
-            return
+        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"""
+        <div style="
+            background: rgba(128, 128, 128, 0.08);
+            border-left: 5px solid {color};
+            border-radius: 8px;
+            padding: 15px 20px;
+            box-shadow: 0 4px 10px rgba(0,0,0,0.05);
+            display: flex;
+            align-items: center;
+            justify-content: space-between;
+            min-width: 180px;
+            flex: 1;
+        ">
+            <div>
+                <span style="font-size: 13px; opacity: 0.7; text-transform: uppercase; font-weight: 600; display: block; margin-bottom: 5px;">{title}</span>
+                <span style="font-size: 22px; font-weight: bold; color: var(--neutral-foreground-rest);">{value}</span>
+            </div>
+            <span style="font-size: 28px; line-height: 1;">{icon}</span>
+        </div>
+    """, sizing_mode="stretch_width")
+
+# Overview Greeting Card
+def greeting_card(name, color, size):
+    style_content = f"""
+        <div style="
+            background: linear-gradient(135deg, {color}, #2c3e50);
+            padding: 30px;
+            border-radius: 12px;
+            text-align: center;
+            color: white;
+            box-shadow: 0 10px 25px rgba(0,0,0,0.15);
+            font-size: {size}px;
+            transition: all 0.3s ease;
+            margin-top: 10px;
+        ">
+            <h3 style="margin: 0; color: white;">Welcome to Panel, {name if name else "Developer"}! 🚀</h3>
+            <p style="font-size: 14px; opacity: 0.85; margin: 12px 0 0 0;">
+                This card is updating in real time using Panel reactive bindings.
+            </p>
+        </div>
+    """
+    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()
     
-        yield "##### ⚙ Fetching image and running model..."
-        try:
-            pil_img = await open_image_url(image_url)
-            img = pn.pane.Image(pil_img, height=400, align="center")
-        except Exception as e:
-            yield f"##### 😔 Something went wrong, please try a different URL!"
-            return
+    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", "📦")
     
-        class_items = class_names.split(",")
-        class_likelihoods = get_similarity_scores(class_items, pil_img)
+    kpis = pn.Row(kpi1, kpi2, kpi3, kpi4, sizing_mode="stretch_width", margin=(0, 0, 20, 0))
     
-        # build the results column
-        results = pn.Column("##### 🎉 Here are the results!", img)
+    # 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()
     
-        for class_item, class_likelihood in zip(class_items, class_likelihoods):
-            row_label = pn.widgets.StaticText(
-                name=class_item.strip(), value=f"{class_likelihood:.2%}", align="center"
-            )
-            row_bar = pn.indicators.Progress(
-                value=int(class_likelihood * 100),
+    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="secondary",
-                margin=(0, 10),
-                design=pn.theme.Material,
+                bar_color="success" if score > 0.5 else "info",
+                height=15
             )
-            results.append(pn.Column(row_label, row_bar))
-        yield results
-    finally:
-        main.disabled = False
-
+            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)}"
 
-# create widgets
-randomize_url = pn.widgets.Button(name="Randomize URL", align="end")
+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))
 
-image_url = pn.widgets.TextInput(
-    name="Image URL to classify",
-    value=pn.bind(random_url, randomize_url),
-)
-class_names = pn.widgets.TextInput(
-    name="Comma separated class names",
-    placeholder="Enter possible class names, e.g. cat, dog",
-    value="cat, dog, parrot",
+classification_output_area = pn.panel(
+    pn.bind(run_classification_on_click, clicks=classify_btn),
+    sizing_mode="stretch_width"
 )
 
-input_widgets = pn.Column(
-    "##### 😊 Click randomize or paste a URL to start classifying!",
-    pn.Row(image_url, randomize_url),
-    class_names,
-)
+# Reset output when inputs change
+def reset_clicks(event):
+    classify_btn.clicks = 0
 
-# add interactivity
-interactive_result = pn.panel(
-    pn.bind(process_inputs, image_url=image_url, class_names=class_names),
-    height=600,
-)
+image_selector.param.watch(reset_clicks, 'value')
+custom_url_input.param.watch(reset_clicks, 'value')
+class_names_input.param.watch(reset_clicks, 'value')
 
-# add footer
+# --- 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=35, height=35)
+    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())
 
-# create dashboard
-main = pn.WidgetBox(
-    input_widgets,
-    interactive_result,
-    footer_row,
+# --- 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
 )
 
-title = "Panel Demo - Image Classification"
-pn.template.BootstrapTemplate(
-    title=title,
-    main=main,
-    main_max_width="min(50%, 698px)",
-    header_background="#F08080",
-).servable(title=title)
+template.servable()

requirements.txt

@@ -1,6 +1,8 @@
 panel
-jupyter
-transformers
+pandas
+plotly
 numpy
+transformers
 torch
-aiohttp
+aiohttp
+pillow