Upload 5 files

__init__.py

@@ -0,0 +1,3 @@
+from .index import app
+
+

index.py

@@ -0,0 +1,42 @@
+from .my_dashboard import dashboard as my_dashboard
+from typing import Dict, Callable
+
+
+app_routes = {
+    "/": main_layout,
+    "/my_dashboard": my_dashboard,
+}
+
+def app() -> Dict[str, Callable]:
+    return app_routes
+
+
+pn.extension(sizing_mode="stretch_width")
+
+nav_markdown = """
+# Navigation
+- [My Dashboard](/my_dashboard)
+"""
+
+navigation = pn.Markdown(nav_markdown)
+
+main_layout = pn.Column(
+    navigation,
+    # other components and layouts
+)
+
+INTRO = """
+# Awesome Panel on Hugging Face Spaces
+... (rest of the content)
+"""
+
+some_component = pn.panel(INTRO)
+
+
+
+template = pn.template.FastListTemplate(
+    site="Awesome Panel 🤗", title="Hello Hugging Face World", main=[some_component],
+    favicon="https://sharing.awesome-panel.org/favicon.ico", accent="#fef3c7", header_color="#4b5563"
+)
+
+app = pn.serve({'/': template, '/my_dashboard': my_dashboard_app}, return_views=True)

my_dashboard.py

@@ -0,0 +1,313 @@
+import altair as alt
+import pandas as pd
+import panel as pn
+
+# Load the Panel extension
+
+pn.extension('vega')
+
+
+# Load the dataset
+data = pd.read_csv("/Users/kenzabaddou/Downloads/archive/marketing_campaign.csv", sep=";")
+
+# Data cleaning
+data = data.rename(columns=lambda x: x.strip())  # Remove leading and trailing spaces from column names
+data = data.dropna(subset=['Income'])
+mean_income = data['Income'].mean()
+data['Income'] = data['Income'].fillna(mean_income)
+data['total_spent'] = data[['MntWines', 'MntFruits', 'MntMeatProducts', 'MntFishProducts', 'MntSweetProducts', 'MntGoldProds']].sum(axis=1)
+
+# Define widgets
+education_dropdown = alt.binding_select(options=sorted(data['Education'].unique()), name='Education Level:')
+education_select = alt.selection_single(fields=['Education'], bind=education_dropdown, name='Select')
+
+# New widget: marital status dropdown
+marital_status_dropdown = alt.binding_select(options=sorted(data['Marital_Status'].unique()), name='Marital Status:')
+marital_status_select = alt.selection_single(fields=['Marital_Status'], bind=marital_status_dropdown, name='Select')
+
+# New widget: range slider for number of web visits
+num_web_visits_slider = alt.binding_range(min=0, max=data['NumWebVisitsMonth'].max(), step=1, name='Web Visits per Month:')
+num_web_visits_select = alt.selection_single(fields=['NumWebVisitsMonth'], bind=num_web_visits_slider, name='Select')
+
+# Add new widgets for product selection
+products = ['MntWines', 'MntFruits', 'MntMeatProducts', 'MntFishProducts', 'MntSweetProducts', 'MntGoldProds']
+product_x_dropdown = alt.binding_select(options=products, name='Product X:')
+product_x_select = alt.selection_single(fields=['x_product'], bind=product_x_dropdown, init={'x_product': 'MntWines'})
+product_y_dropdown = alt.binding_select(options=products, name='Product Y:')
+product_y_select = alt.selection_single(fields=['y_product'], bind=product_y_dropdown, init={'y_product': 'MntMeatProducts'})
+
+
+# Define views
+
+# View 1: Bar chart of customer distribution by education level
+education_chart = alt.Chart(data).mark_bar().encode(
+    x=alt.X('Education:N', title='Education Level'),
+    y=alt.Y('count():Q', title='Number of Customers'),
+    color='Education:N'
+).properties(title='Customer Distribution by Education Level')
+
+
+# Define widgets
+education_dropdown = alt.binding_select(options=sorted(data['Education'].unique()), name='Education Level:')
+education_select = alt.selection_single(fields=['Education'], bind=education_dropdown, name='Select')
+income_slider = alt.binding_range(min=0, max=data['Income'].max(), step=1000, name='Annual Income:')
+income_select = alt.selection_single(fields=['Income'], bind=income_slider, name='Select')
+
+# View 2: Scatter plot of customer annual income and total amount spent on products (with interaction)
+scatter_chart = alt.Chart(data).mark_circle().encode(
+    x=alt.X('Income:Q', title='Annual Income'),
+    y=alt.Y('total_spent:Q', title='Total Amount Spent on Products'),
+    color='Education:N',
+    tooltip=[
+        alt.Tooltip('Education'),
+        alt.Tooltip('Marital_Status'),
+        alt.Tooltip('Income', format='$,.0f'),
+        alt.Tooltip('total_spent', format='$,.0f')
+    ]
+).properties(title='Customer Annual Income vs Amount Spent on Products').add_selection(
+    education_select, income_select, marital_status_select, num_web_visits_select
+).transform_filter(
+    education_select
+).transform_filter(
+    income_select
+).transform_filter(
+    marital_status_select
+).transform_filter(
+    num_web_visits_select
+)
+
+
+# Define linked selection
+brush = alt.selection(type='interval')
+
+# View 5: Bar chart - Average Total Spending per Education Level (linked to scatter chart)
+avg_spending_by_education = alt.Chart(data).mark_bar().encode(
+    x=alt.X('Education:N', title='Education Level'),
+    y=alt.Y('mean(total_spent):Q', title='Average Total Spending'),
+    tooltip=['Education', 'mean(total_spent):Q']
+).properties(title='Average Total Spending per Education Level').add_selection(
+    brush
+).transform_filter(
+    education_select
+)
+
+# View 6: Yearly Total Amount Spent on Products (linked to enrollment chart)
+yearly_total_spent_chart = alt.Chart(data).mark_line().encode(
+    x=alt.X('year(Dt_Customer):O', title='Year'),
+    y=alt.Y('sum(total_spent):Q', title='Total Amount Spent'),
+    tooltip=['year(Dt_Customer):O', 'sum(total_spent):Q']
+).transform_filter(
+    education_select
+)
+
+# View 3: Timeline chart of new customer enrollments (with linked highlighting)
+enrollment_chart = alt.Chart(data).mark_line().encode(
+    x=alt.X('year(Dt_Customer):T', title='Year of Enrollment'),
+    y=alt.Y('count():Q', title='Number of New Enrollments'),
+    color='Marital_Status:N').properties(title='New Customer Enrollments Over Time').add_selection(
+    brush, education_select, income_select, marital_status_select, num_web_visits_select).transform_filter(
+    education_select).transform_filter(income_select).transform_filter(marital_status_select).transform_filter(
+    num_web_visits_select)
+
+# New View: Average spending per marital status (with linked highlighting)
+
+avg_spending_by_marital_status = alt.Chart(data).mark_bar().encode(
+x=alt.X('Marital_Status:N', title='Marital Status'),
+y=alt.Y('mean(total_spent):Q', title='Average Total Spending'),
+color='Marital_Status:N',
+tooltip=['Marital_Status', 'mean(total_spent):Q']).properties(title='Average Total Spending per Marital Status').add_selection(brush)
+
+import pandas as pd
+import altair as alt
+
+
+# Convert the 'Dt_Customer' column to datetime format
+data['Dt_Customer'] = pd.to_datetime(data['Dt_Customer'])
+
+# Create 'total_spent' column by summing up spending in different product categories
+data['total_spent'] = data[['MntWines', 'MntFruits', 'MntMeatProducts', 'MntFishProducts', 'MntSweetProducts', 'MntGoldProds']].sum(axis=1)
+
+# Calculate the average spending for each combination of Teenhome, Kidhome, and Marital_Status
+avg_spending = data.groupby(['Teenhome', 'Kidhome', 'Marital_Status'])['total_spent'].mean().reset_index()
+
+# Create a hover selection
+hover = alt.selection_single(on='mouseover', nearest=True, empty='none')
+
+# Create a selection for the dropdown
+marital_status_dropdown = alt.binding_select(options=sorted(data['Marital_Status'].unique()), name='Marital Status:')
+marital_status_select = alt.selection_single(fields=['Marital_Status'], bind=marital_status_dropdown, init={'Marital_Status': 'Married'})
+
+# Create a grouped bar chart for kids
+chart_kids = alt.Chart(avg_spending).mark_bar().encode(
+    x=alt.X('Kidhome:O', title='Number of Kids at Home'),
+    y=alt.Y('total_spent:Q', title='Average Spending'),
+    color=alt.condition(hover, 'Kidhome:O', alt.value('lightgray'), legend=alt.Legend(title='Number of Kids at Home')),
+    tooltip=['Teenhome', 'Kidhome', 'total_spent', 'Marital_Status']
+).properties(title='Average Spending by Number of Kids at Home (Filtered by Marital Status)').add_selection(
+    hover
+)
+
+# Create a grouped bar chart for teens
+chart_teens = alt.Chart(avg_spending).mark_bar().encode(
+    x=alt.X('Teenhome:O', title='Number of Teens at Home'),
+    y=alt.Y('total_spent:Q', title='Average Spending'),
+    color=alt.condition(hover, 'Teenhome:O', alt.value('lightgray'), legend=alt.Legend(title='Number of Teens at Home')),
+    tooltip=['Teenhome', 'Kidhome', 'total_spent', 'Marital_Status']
+).properties(title='Average Spending by Number of Teens at Home (Filtered by Marital Status)').add_selection(
+    hover
+)
+
+# Combine the charts
+concat_chart = alt.hconcat(chart_kids, chart_teens).add_selection(
+    marital_status_select
+).transform_filter(
+    marital_status_select
+)
+
+
+"""scatter_plot = alt.Chart(data).mark_circle().encode(
+    x=alt.X('NumWebVisitsMonth:Q', title='Number of Web Visits per Month'),
+    y=alt.Y('NumWebPurchases:Q', title='Number of Web Purchases'),
+    size=alt.Size('count():Q', scale=alt.Scale(range=[50, 500]), legend=alt.Legend(title='Number of Customers')),
+    color=alt.Color('count():Q', scale=alt.Scale(scheme='viridis'), legend=None),
+    tooltip=['NumWebVisitsMonth', 'NumWebPurchases', 'count()']
+).properties(title='Scatter Plot of Web Visits per Month vs. Web Purchases')
+
+scatter_plot.interactive()"""
+
+# Define dropdown selection for marital status
+marital_status_dropdown = alt.binding_select(options=data['Marital_Status'].unique().tolist(), name='Marital Status: ')
+marital_status_selection = alt.selection_single(fields=['Marital_Status'], bind=marital_status_dropdown, name='Marital_Status', init={'Marital_Status': data['Marital_Status'].iloc[0]})
+
+# Add a scatter plot and filter by marital status
+scatter_plot_filtered = alt.Chart(data).mark_circle().encode(
+    x=alt.X('NumWebVisitsMonth:Q', title='Number of Web Visits per Month'),
+    y=alt.Y('NumWebPurchases:Q', title='Number of Web Purchases'),
+    size=alt.Size('count():Q', scale=alt.Scale(range=[50, 500]), legend=alt.Legend(title='Number of Customers')),
+    color=alt.Color('count():Q', scale=alt.Scale(scheme='viridis'), legend=None),
+    tooltip=['NumWebVisitsMonth', 'NumWebPurchases', 'count()']
+).properties(title='Scatter Plot of Web Visits per Month vs. Web Purchases Filtered by Marital Status').transform_filter(
+    marital_status_selection
+)
+
+# Add interactivity and the marital status selection to the scatter plot
+interactive_scatter_plot_filtered = scatter_plot_filtered.interactive().add_selection(marital_status_selection)
+interactive_scatter_plot_filtered
+
+
+# Group by 'Dt_Customer' and calculate average spending for new and returning customers
+new_customers = data[data['NumWebPurchases'] == 0].groupby('Dt_Customer')['total_spent'].mean().reset_index()
+returning_customers = data[data['NumWebPurchases'] > 0].groupby('Dt_Customer')['total_spent'].mean().reset_index()
+
+
+# new_customers and returning_customers DataFrames
+# Create line charts for new and returning customers without filtering
+new_line = alt.Chart(new_customers).mark_line().encode(
+    x=alt.X('Dt_Customer:T', title='Date'),
+    y=alt.Y('total_spent:Q', title='Average Spending'),
+    color=alt.value('blue'),
+    tooltip=['Dt_Customer', 'total_spent']
+).properties(title='New Customers')
+
+returning_line = alt.Chart(returning_customers).mark_line().encode(
+    x=alt.X('Dt_Customer:T', title='Date'),
+    y=alt.Y('total_spent:Q', title='Average Spending'),
+    color=alt.value('green'),
+    tooltip=['Dt_Customer', 'total_spent']
+).properties(title='Returning Customers')
+
+# Display the charts side by side
+combined_chart = alt.hconcat(new_line, returning_line)
+combined_chart
+
+# Merge Marital_Status to new_customers and returning_customers DataFrames
+
+new_customers = new_customers.merge(data[['Dt_Customer', 'Marital_Status']], on='Dt_Customer', how='left')
+returning_customers = returning_customers.merge(data[['Dt_Customer', 'Marital_Status']], on='Dt_Customer', how='left')
+
+# Filter data by marital status using transform_filter within the charts
+new_line_filtered = alt.Chart(new_customers).mark_line().encode(
+    x=alt.X('Dt_Customer:T', title='Date'),
+    y=alt.Y('total_spent:Q', title='Average Spending'),
+    color=alt.value('blue'),
+    tooltip=['Dt_Customer', 'total_spent']
+).properties(title='New Customers').transform_filter(
+    marital_status_selection
+)
+
+returning_line_filtered = alt.Chart(returning_customers).mark_line().encode(
+    x=alt.X('Dt_Customer:T', title='Date'),
+    y=alt.Y('total_spent:Q', title='Average Spending'),
+    color=alt.value('green'),
+    tooltip=['Dt_Customer', 'total_spent']
+).properties(title='Returning Customers').transform_filter(
+    marital_status_selection
+)
+
+# Add interactivity for panning and zooming
+interactive_chart_filtered = alt.layer(new_line_filtered, returning_line_filtered).resolve_scale(y='shared').interactive().add_selection(marital_status_selection)
+
+# Combine the interactive chart, the legend, and the marital status selection
+# Create legend
+legend = alt.Chart(pd.DataFrame({'legend': ['New Customers', 'Returning Customers'], 'color': ['blue', 'green']})).mark_point().encode(
+    x=alt.value(20),
+    y=alt.Y('legend', title=None),
+    color=alt.Color('color', scale=None),
+    tooltip=['legend']
+)
+
+# Combine the interactive chart, the legend, and the marital status selection
+final_chart_filtered = alt.hconcat(interactive_chart_filtered, legend).properties(title='Average Spending of New vs Returning Customers by Marital Status')
+final_chart_filtered
+
+import panel as pn
+pn.extension('vega')
+
+
+# Define dashboard layout
+dashboard = pn.Column(
+    pn.Row(
+        pn.Column(
+            education_chart,
+            avg_spending_by_education,
+            avg_spending_by_marital_status,
+            width=350
+        ),
+        pn.Column(
+            scatter_chart,
+            enrollment_chart,
+            width=700
+        ),
+    ),
+    pn.Row(
+        concat_chart,
+        width=1000
+    ),
+    pn.Row(
+        final_chart_filtered,
+        width=1000
+    ),
+)
+
+
+# Display dashboard
+dashboard.servable()
+
+app = pn.serve(dashboard, return_views=True)
+
+
+dashboard = pn.Column(
+    pn.Row(
+        pn.Column(education_chart, avg_spending_by_education, interactive_scatter_plot_filtered, width=350),
+        scatter_chart, width=700
+    ),
+
+    pn.Row(
+        avg_spending_by_marital_status, concat_chart, width=1000
+    ),
+
+    pn.Row(
+        enrollment_chart, final_chart_filtered, width=1000
+    )
+)
+

videostream.py

@@ -0,0 +1,112 @@
+"""The VideoStreamInterface provides an easy way to apply transforms to a video stream"""
+import numpy as np
+import panel as pn
+import param
+import skimage
+from PIL import Image, ImageFilter
+from skimage import data, filters
+from skimage.color.adapt_rgb import adapt_rgb, each_channel
+from skimage.draw import rectangle
+from skimage.exposure import rescale_intensity
+from skimage.feature import Cascade
+from videostream_utils import PILImageTransform, NumpyImageTransform, VideoStreamInterface
+
+pn.extension("terminal", sizing_mode="stretch_width")
+
+ACCENT = "#fef3c7"
+
+
+class GaussianBlur(PILImageTransform):
+    """Gaussian Blur
+    https://pillow.readthedocs.io/en/stable/reference/ImageFilter.html#PIL.ImageFilter.GaussianBlur
+    """
+
+    radius = param.Integer(default=2, bounds=(0, 10))
+
+    def transform(self, image: Image):
+        return image.filter(ImageFilter.GaussianBlur(radius=self.radius))
+
+
+class GrayscaleTransform(NumpyImageTransform):
+    """GrayScale transform
+    https://scikit-image.org/docs/0.15.x/auto_examples/color_exposure/plot_rgb_to_gray.html
+    """
+
+    def transform(self, image: np.ndarray):
+        grayscale = skimage.color.rgb2gray(image[:, :, :3])
+        return skimage.color.gray2rgb(grayscale)
+
+
+class SobelTransform(NumpyImageTransform):
+    """Sobel Transform
+    https://scikit-image.org/docs/0.15.x/auto_examples/color_exposure/plot_adapt_rgb.html
+    """
+
+    def transform(self, image):
+        @adapt_rgb(each_channel)
+        def sobel_each(image):
+            return filters.sobel(image)
+
+        return rescale_intensity(1 - sobel_each(image))
+
+
+@pn.cache()
+def get_detector():
+    """Returns the Cascade detector"""
+    trained_file = data.lbp_frontal_face_cascade_filename()
+    return Cascade(trained_file)
+
+class FaceDetectionTransform(NumpyImageTransform):
+    """Face detection using a cascade classifier.
+    https://scikit-image.org/docs/0.15.x/auto_examples/applications/plot_face_detection.html
+    """
+
+    scale_factor = param.Number(1.4, bounds=(1.0, 2.0), step=0.1)
+    step_ratio = param.Integer(1, bounds=(1, 10))
+    size_x = param.Range(default=(60, 322), bounds=(10, 500))
+    size_y = param.Range(default=(60, 322), bounds=(10, 500))
+
+    def transform(self, image):
+        detector = get_detector()
+        detected = detector.detect_multi_scale(
+            img=image,
+            scale_factor=self.scale_factor,
+            step_ratio=self.step_ratio,
+            min_size=(self.size_x[0], self.size_y[0]),
+            max_size=(self.size_x[1], self.size_y[1]),
+        )
+
+        for patch in detected:
+            rrr, ccc = rectangle(
+                start=(patch["r"], patch["c"]),
+                extent=(patch["height"], patch["width"]),
+                shape=image.shape[:2],
+            )
+            image[rrr, ccc, 0] = 200
+
+        return image
+
+
+component = VideoStreamInterface(
+    transforms=[
+        GaussianBlur,
+        GrayscaleTransform,
+        SobelTransform,
+        FaceDetectionTransform,
+    ]
+)
+
+component.video_stream.timeout=1000
+component.video_stream.param.timeout.bounds=(250, 2000)
+
+pn.template.FastListTemplate(
+    site="Awesome Panel 🤗",
+    title="VideoStream with transforms",
+    sidebar=[component.settings],
+    main=[
+        """Try a much, much faster version <a href="https://sharing.awesome-panel.org/MarcSkovMadsen/videostream-interface/app.html" target="_blank">here</a> powered by Webassembly.""",
+        component],
+    favicon="https://sharing.awesome-panel.org/favicon.ico",
+    accent=ACCENT,
+    header_color="#4b5563"
+).servable()

videostream_utils.py

@@ -0,0 +1,303 @@
+"""The VideoStreamInterface provides an easy way to apply transforms to a video stream"""
+import base64
+import io
+import time
+
+import numpy as np
+import panel as pn
+import param
+import PIL
+from PIL import Image
+
+HEIGHT = 400
+WIDTH = 400
+TIMEOUT = 250
+ACCENT = "#fef3c7"
+
+
+def to_instance(value, **params):
+    """Converts the value to an instance
+    Args:
+        value: A param.Parameterized class or instance
+    Returns:
+        An instance of the param.Parameterized class
+    """
+    if isinstance(value, param.Parameterized):
+        value.param.update(**params)
+        return value
+    return value(**params)
+
+
+class Timer(pn.viewable.Viewer):
+    """Helper Component used to show duration trends"""
+
+    _trends = param.Dict()
+
+    def __init__(self, **params):
+        super().__init__()
+
+        self.last_updates = {}
+        self._trends = {}
+
+        self._layout = pn.Row(**params)
+
+    def time_it(self, name, func, *args, **kwargs):
+        """Measures the duration of the execution of the func function and reports it under the
+        name specified"""
+        start = time.time()
+        result = func(*args, **kwargs)
+        end = time.time()
+        duration = round(end - start, 2)
+        self._report(name=name, duration=duration)
+        return result
+
+    def inc_it(self, name):
+        """Measures the duration since the last time `inc_it` was called and reports it under the
+        specified name"""
+        start = self.last_updates.get(name, time.time())
+        end = time.time()
+        duration = round(end - start, 2)
+        self._report(name=name, duration=duration)
+        self.last_updates[name] = end
+
+    def _report(self, name, duration):
+        if not name in self._trends:
+            self._trends[name] = pn.indicators.Trend(
+                title=name,
+                data={"x": [1], "y": [duration]},
+                plot_color=ACCENT,
+                height=100,
+                width=150,
+                sizing_mode="fixed",
+            )
+            self.param.trigger("_trends")
+        else:
+            trend = self._trends[name]
+            next_x = max(trend.data["x"]) + 1
+            trend.stream({"x": [next_x], "y": [duration]}, rollover=10)
+
+    @pn.depends("_trends")
+    def _panel(self):
+        self._layout[:] = list(self._trends.values())
+        return self._layout
+
+    def __panel__(self):
+        return self._panel
+
+
+class ImageTransform(pn.viewable.Viewer):
+    """Base class for image transforms."""
+
+    def __init__(self, **params):
+        super().__init__(**params)
+
+        with param.edit_constant(self):
+            self.name = self.__class__.name.replace("Transform", "")
+        self.view = self.create_view()
+
+    def __panel__(self):
+        return self.view
+
+    def run(self, image: str, height: int = HEIGHT, width: int = WIDTH) -> str:
+        """Transforms the base64 encoded jpg image to a base64 encoded jpg BytesIO object"""
+        raise NotImplementedError()
+
+    def create_view(self):
+        """Creates a view of the parameters of the transform to enable the user to configure them"""
+        return pn.Param(self, name=self.name)
+
+    def transform(self, image):
+        """Transforms the image"""
+        raise NotImplementedError()
+
+
+class PILImageTransform(ImageTransform):
+    """Base class for PIL image transforms"""
+
+    @staticmethod
+    def to_pil_img(value: str, height=HEIGHT, width=WIDTH):
+        """Converts a base64 jpeg image string to a PIL.Image"""
+        encoded_data = value.split(",")[1]
+        base64_decoded = base64.b64decode(encoded_data)
+        image = Image.open(io.BytesIO(base64_decoded))
+        image.draft("RGB", (height, width))
+        return image
+
+    @staticmethod
+    def from_pil_img(image: Image):
+        """Converts a PIL.Image to a base64 encoded JPG BytesIO object"""
+        buff = io.BytesIO()
+        image.save(buff, format="JPEG")
+        return buff
+
+    def run(self, image: str, height: int = HEIGHT, width: int = WIDTH) -> io.BytesIO:
+        pil_img = self.to_pil_img(image, height=height, width=width)
+
+        transformed_image = self.transform(pil_img)
+
+        return self.from_pil_img(transformed_image)
+
+    def transform(self, image: PIL.Image) -> PIL.Image:
+        """Transforms the PIL.Image image"""
+        raise NotImplementedError()
+
+
+class NumpyImageTransform(ImageTransform):
+    """Base class for np.ndarray image transforms"""
+
+    @staticmethod
+    def to_np_ndarray(image: str, height=HEIGHT, width=WIDTH) -> np.ndarray:
+        """Converts a base64 encoded jpeg string to a np.ndarray"""
+        pil_img = PILImageTransform.to_pil_img(image, height=height, width=width)
+        return np.array(pil_img)
+
+    @staticmethod
+    def from_np_ndarray(image: np.ndarray) -> io.BytesIO:
+        """Converts np.ndarray jpeg image to a jpeg BytesIO instance"""
+        if image.dtype == np.dtype("float64"):
+            image = (image * 255).astype(np.uint8)
+        pil_img = PIL.Image.fromarray(image)
+        return PILImageTransform.from_pil_img(pil_img)
+
+    def run(self, image: str, height: int = HEIGHT, width: int = WIDTH) -> io.BytesIO:
+        np_array = self.to_np_ndarray(image, height=height, width=width)
+
+        transformed_image = self.transform(np_array)
+
+        return self.from_np_ndarray(transformed_image)
+
+    def transform(self, image: np.ndarray) -> np.ndarray:
+        """Transforms the nd.array image"""
+        raise NotImplementedError()
+
+
+class VideoStreamInterface(pn.viewable.Viewer):
+    """An easy to use interface for a VideoStream and a set of transforms"""
+
+    video_stream = param.ClassSelector(
+        class_=pn.widgets.VideoStream, constant=True, doc="The source VideoStream"
+    )
+
+    height = param.Integer(
+        HEIGHT,
+        bounds=(10, 2000),
+        step=10,
+        doc="""The height of the image converted and shown""",
+    )
+    width = param.Integer(
+        WIDTH,
+        bounds=(10, 2000),
+        step=10,
+        doc="""The width of the image converted and shown""",
+    )
+
+    transform = param.Selector(doc="The currently selected transform")
+
+    def __init__(
+        self,
+        transforms,
+        timeout=TIMEOUT,
+        paused=False,
+        **params,
+    ):
+        super().__init__(
+            video_stream=pn.widgets.VideoStream(
+                name="Video Stream",
+                timeout=timeout,
+                paused=paused,
+                height=0,
+                width=0,
+                visible=False,
+                format="jpeg",
+            ),
+            **params,
+        )
+        self.image = pn.pane.JPG(
+            height=self.height, width=self.width, sizing_mode="fixed"
+        )
+        self._updating = False
+        transforms = [to_instance(transform) for transform in transforms]
+        self.param.transform.objects = transforms
+        self.transform = transforms[0]
+        self.timer = Timer(sizing_mode="stretch_width")
+        self.settings = self._create_settings()
+        self._panel = self._create_panel()
+
+    def _create_settings(self):
+        return pn.Column(
+            pn.Param(
+                self.video_stream,
+                parameters=["timeout", "paused"],
+                widgets={
+                    "timeout": {
+                        "widget_type": pn.widgets.IntSlider,
+                        "start": 10,
+                        "end": 2000,
+                        "step": 10,
+                    }
+                },
+            ),
+            self.timer,
+            pn.Param(self, parameters=["height", "width"], name="Image"),
+            pn.Param(
+                self,
+                parameters=["transform"],
+                expand_button=False,
+                expand=False,
+                widgets={
+                    "transform": {
+                        "widget_type": pn.widgets.RadioButtonGroup,
+                        "orientation": "vertical",
+                        "button_type": "success",
+                    }
+                },
+                name="Transform",
+            ),
+            self._get_transform,
+        )
+
+    def _create_panel(self):
+        return pn.Row(
+            self.video_stream,
+            pn.layout.HSpacer(),
+            self.image,
+            pn.layout.HSpacer(),
+            sizing_mode="stretch_width",
+            align="center",
+        )
+
+    @pn.depends("height", "width", watch=True)
+    def _update_height_width(self):
+        self.image.height = self.height
+        self.image.width = self.width
+
+    @pn.depends("transform")
+    def _get_transform(self):
+        # Hack: returning self.transform stops working after browsing the transforms for a while
+        return self.transform.view
+
+    def __panel__(self):
+        return self._panel
+
+    @pn.depends("video_stream.value", watch=True)
+    def _handle_stream(self):
+        if self._updating:
+            return
+
+        self._updating = True
+        if self.transform and self.video_stream.value:
+            value = self.video_stream.value
+            try:
+                image = self.timer.time_it(
+                    name="Transform",
+                    func=self.transform.run,
+                    image=value,
+                    height=self.height,
+                    width=self.width,
+                )
+                self.image.object = image
+            except PIL.UnidentifiedImageError:
+                print("unidentified image")
+
+            self.timer.inc_it("last update")
+        self._updating = False