Spaces:

awesome-panel
/

video_stream

Running

App Files Files Community

MarcSkovMadsen commited on Jan 7

Commit

0be8eeb

•

1 Parent(s): edbef60

Upload 4 files

Browse files

Files changed (4) hide show

README.md +19 -4
index.html +299 -18
index.js +524 -0
index.py +421 -0

README.md CHANGED Viewed

@@ -1,11 +1,26 @@
 ---
 title: Video Stream
-emoji: 📈
-colorFrom: purple
-colorTo: gray
 sdk: static
 pinned: false
 license: mit
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
 title: Video Stream
+emoji: 📷
+colorFrom: indigo
+colorTo: pink
 sdk: static
 pinned: false
 license: mit
 ---
+See [video_stream](https://awesome-panel.org/resources/video_stream/) by [awesome-panel.org](https://awesome-panel.org) for more info.
+## Serve
+```python
+panel serve index.py --autoreload
+```
+## Convert to Pyodide
+```bash
+panel convert index.py --to pyodide-worker
+```
+Please note you will currently have to manually remove `PIL` and change `skimage` to `scikit-image`
+in the `index.js` file ([Issue #6170](https://github.com/holoviz/panel/issues/6170)).

index.html CHANGED Viewed

@@ -1,19 +1,300 @@
 <!DOCTYPE html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

 <!DOCTYPE html>
+<html lang="en" >
+  <head>
+    <meta charset="utf-8">
+    <title>VideoStream with ScikitImage</title>
+    <link rel="apple-touch-icon" sizes="180x180" href="https://cdn.holoviz.org/panel/1.3.6/dist/images/apple-touch-icon.png">
+    <link rel="icon" href="https://cdn.holoviz.org/panel/1.3.6/dist/images/favicon.ico" type="">
+    <meta name="name" content="VideoStream with ScikitImage">
+    <style>
+      html, body {
+	display: flow-root;
+        box-sizing: border-box;
+        height: 100%;
+        margin: 0;
+        padding: 0;
+      }
+    </style>
+    <style>
+.mdc-drawer {background: var(--light-bg-color) !important;}
+    </style>
+<style type="text/css">
+:host(.pn-loading),
+.pn-loading {
+  overflow: hidden;
+}
+:host(.pn-loading):before,
+.pn-loading:before {
+  position: absolute;
+  height: 100%;
+  width: 100%;
+  content: '';
+  z-index: 1000;
+  background-color: rgb(255, 255, 255, 0.5);
+  border-color: lightgray;
+  background-repeat: no-repeat;
+  background-position: center;
+  background-size: auto 50%;
+  border-width: 1px;
+  cursor: progress;
+}
+:host(.pn-loading) .pn-loading-msg,
+.pn-loading .pn-loading-msg {
+  position: absolute;
+  top: 72%;
+  font-size: 2em;
+  color: black;
+  width: 100%;
+  text-align: center;
+}
+:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=");
+  background-size: auto calc(min(50%, 400px));
+}
+</style><script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-3.3.2.min.js"></script>
+<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-gl-3.3.2.min.js"></script>
+<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-widgets-3.3.2.min.js"></script>
+<script type="text/javascript" src="https://cdn.bokeh.org/bokeh/release/bokeh-tables-3.3.2.min.js"></script>
+<script type="text/javascript" src="https://cdn.holoviz.org/panel/1.3.6/dist/panel.min.js"></script>
+<script type="text/javascript">
+  Bokeh.set_log_level("info");
+</script>
+    <!-- Template CSS -->
+    <link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/material-components-web@7.0.0/dist/material-components-web.min.css">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Roboto:300,400,500">
+    <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Material+Icons&display=block">
+    <link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/theme/default.css">
+    <link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/theme/material_variables.css">
+    <link rel="stylesheet" href="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/materialtemplate/material.css">
+    <style type="text/css">
+:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {
+  background-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=");
+  background-size: auto calc(min(50%, 400px));
+}
+    </style>
+    <style>
+      :root {
+	  --header-background: var(--design-primary-color, var(--panel-primary-color));
+	  --header-color: var(--design-primary-text-color, var(--panel-on-primary-color));
+	  --sidebar-width: 370px;
+      }
+      #header {
+          --mdc-theme-background: var(--header-background);
+          --mdc-theme-on-background: var(--header-color);
+	  background-color: var(--header-background);
+	  color: var(--header-color);
+      }
+      .mdc-drawer {
+	  width: var(--sidebar-width) !important;
+      }
+      .mdc-drawer.mdc-drawer--open:not(.mdc-drawer--closing)+.mdc-drawer-app-content {
+	  margin-left: var(--sidebar-width) !important;
+      }
+    </style>
+    <!-- Template JS -->
+    <script src="https://cdn.holoviz.org/panel/1.3.6/dist/bundled/material-components-web@7.0.0/dist/material-components-web.min.js"></script>
+  </head>
+  <body class="pn-loading pn-arc">
+<div class="mdc-typography" id="container">
+  <header class="mdc-top-app-bar app-bar mdc-top-app-bar--fixed" id="header">
+    <div class="mdc-top-app-bar__row">
+      <section class="mdc-top-app-bar__section mdc-top-app-bar__section--align-start">
+	<button class="material-icons mdc-top-app-bar__navigation-icon mdc-icon-button">menu</button>
+	<div class="title-bar">
+          <span class="mdc-top-app-bar__title app-header">
+<a class="title" href="/" >&nbsp;Awesome Panel</a><span class="title">&nbsp;-</span><a class="title" href="" >&nbsp;VideoStream with ScikitImage</a>          </span>
+          <div id="header-items">
+          </div>
+        </div>
+      </section>
+      <div class="pn-busy-container">
+	<div id="c489da48-6f7a-4f64-bb54-4971c884670a" data-root-id="p1016" style="display: contents;"></div>
+      </div>
+    </div>
+  </header>
+  <aside class="mdc-drawer mdc-top-app-bar--fixed-adjust mdc-drawer--dismissible mdc-drawer--open" id="sidebar">
+    <div class="mdc-drawer__content">
+      <div class="mdc-list">
+	<div id="c5ca8963-30c7-446b-9af0-4a5fb9a34bfc" data-root-id="p1028" style="display: contents;"></div>
+      </div>
+    </div>
+  </aside>
+  <div class="mdc-drawer-app-content mdc-top-app-bar--fixed-adjust">
+    <main class="main-content" id="main">
+      <div id="b7e25cf5-128e-499f-ac93-6fb5a5859569" data-root-id="p1017" style="display: contents;"></div>
+    </main>
+    <div id="pn-Modal" class="mdc-dialog">
+      <div class="mdc-dialog__container">
+	<div class="mdc-dialog__surface" role="alertdialog" aria-modal="true">
+	  <div class="mdc-dialog__content" id="my-dialog-content">
+	  </div>
+	</div>
+      </div>
+    </div>
+  </div>
+  <script type="text/javascript">
+    var drawer = mdc.drawer.MDCDrawer.attachTo(document.querySelector('.mdc-drawer'));
+    var topAppBar = mdc.topAppBar.MDCTopAppBar.attachTo(document.getElementById('header'));
+    topAppBar.setScrollTarget(document.getElementById('main'));
+    topAppBar.listen('MDCTopAppBar:nav', function() {
+      drawer.open = !drawer.open;
+    });
+    var modal_el = document.getElementById("pn-Modal");
+    var modal = new mdc.dialog.MDCDialog(modal_el);
+    window.onclick = function(event) {
+      if (event.target == modal_el) {
+	modal.close();
+      }
+    }
+  </script>
+  <div id="b6ab6366-6c22-4f7f-b812-f2e1a390e026" data-root-id="p1009" style="display: contents;"></div>
+  <div id="bf2a4026-7554-4e87-bfde-2673dedfcd49" data-root-id="p1012" style="display: contents;"></div>
+  <div id="c861e5fb-b514-4e68-8b16-9174f1ba9a9c" data-root-id="p1002" style="display: contents;"></div>
+  <div id="ade4f51b-e294-42a9-a3e7-478d065f730b" data-root-id="p1013" style="display: contents;"></div>
+</div>
+    <script type="text/javascript">
+      const pyodideWorker = new Worker("./index.js");
+      pyodideWorker.busy = false
+      pyodideWorker.queue = []
+      function send_change(jsdoc, event) {
+        if (event.setter_id != null && event.setter_id == 'py') {
+          return
+        } else if (pyodideWorker.busy && event.model && event.attr) {
+          let events = []
+          for (const old_event of pyodideWorker.queue) {
+            if (!(old_event.model === event.model && old_event.attr === event.attr)) {
+              events.push(old_event)
+            }
+          }
+          events.push(event)
+          pyodideWorker.queue = events
+          return
+        }
+        const patch = jsdoc.create_json_patch([event])
+        pyodideWorker.busy = true
+        pyodideWorker.postMessage({type: 'patch', patch: patch})
+      }
+      pyodideWorker.onmessage = async (event) => {
+        const msg = event.data
+        const body = document.getElementsByTagName('body')[0]
+        const loading_msgs = document.getElementsByClassName('pn-loading-msg')
+        if (msg.type === 'idle') {
+          if (pyodideWorker.queue.length) {
+            const patch = pyodideWorker.jsdoc.create_json_patch(pyodideWorker.queue)
+            pyodideWorker.busy = true
+            pyodideWorker.queue = []
+            pyodideWorker.postMessage({type: 'patch', patch: patch})
+          } else {
+            pyodideWorker.busy = false
+          }
+        } else if (msg.type === 'status') {
+          let loading_msg
+          if (loading_msgs.length) {
+            loading_msg = loading_msgs[0]
+          } else if (body.classList.contains('pn-loading')) {
+            loading_msg = document.createElement('div')
+            loading_msg.classList.add('pn-loading-msg')
+            body.appendChild(loading_msg)
+          }
+          if (loading_msg != null) {
+            loading_msg.innerHTML = msg.msg
+          }
+        } else if (msg.type === 'render') {
+          const docs_json = JSON.parse(msg.docs_json)
+          const render_items = JSON.parse(msg.render_items)
+          const root_ids = JSON.parse(msg.root_ids)
+          // Remap roots in message to element IDs
+          const root_els = document.querySelectorAll('[data-root-id]')
+          const data_roots = []
+          for (const el of root_els) {
+             el.innerHTML = ''
+             data_roots.push([el.getAttribute('data-root-id'), el.id])
+          }
+          data_roots.sort((a, b) => a[0]<b[0] ? -1: 1)
+          const roots = {}
+          for (let i=0; i<data_roots.length; i++) {
+            roots[root_ids[i]] = data_roots[i][1]
+          }
+          render_items[0]['roots'] = roots
+          render_items[0]['root_ids'] = root_ids
+          // Embed content
+          const [views] = await Bokeh.embed.embed_items(docs_json, render_items)
+          // Remove loading spinner and message
+          body.classList.remove("pn-loading", "arc")
+          for (const loading_msg of loading_msgs) {
+            loading_msg.remove()
+          }
+          // Setup bi-directional syncing
+          pyodideWorker.jsdoc = jsdoc = [...views.roots.values()][0].model.document
+          jsdoc.on_change(send_change.bind(null, jsdoc), false)
+          pyodideWorker.postMessage({'type': 'rendered'})
+          pyodideWorker.postMessage({'type': 'location', location: JSON.stringify(window.location)})
+        } else if (msg.type === 'patch') {
+          pyodideWorker.jsdoc.apply_json_patch(msg.patch, msg.buffers, setter_id='py')
+        }
+      };
+    </script>
+    <script type="application/json" id="p1167">
+      {"3c834f99-af01-4f86-b149-44983f2412fc":{"version":"3.3.2","title":"VideoStream with ScikitImage","roots":[{"type":"object","name":"panel.models.location.Location","id":"p1002","attributes":{"name":"location","reload":false}},{"type":"object","name":"panel.models.markup.HTML","id":"p1009","attributes":{"name":"js_area","stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1079","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"type":"object","name":"ImportedStyleSheet","id":"p1076","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/bundled/theme/material.css"}}],"width":0,"height":0,"margin":0,"sizing_mode":"fixed","align":"start","disable_math":true}},{"type":"object","name":"panel.models.reactive_html.ReactiveHTML","id":"p1012","attributes":{"name":"actions","subscribed_events":{"type":"set","entries":["dom_event"]},"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1080","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"id":"p1076"}],"margin":0,"align":"start","data":{"type":"object","name":"MaterialTemplateActions1","id":"p1010","attributes":{"name":"MaterialTemplateActions00194"}},"scripts":{"type":"map","entries":[["open_modal",["modal.open();\nsetTimeout(function() {{\n  window.dispatchEvent(new Event(&amp;#x27;resize&amp;#x27;));\n}}, 200);"]],["close_modal",["modal.close()"]]]}}},{"type":"object","name":"panel.models.browser.BrowserInfo","id":"p1013","attributes":{"name":"browser_info"}},{"type":"object","name":"panel.models.markup.HTML","id":"p1016","attributes":{"name":"busy_indicator","css_classes":["loader","light"],"stylesheets":[":host { --loading-spinner-size: 20px; }","\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1081","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"type":"object","name":"ImportedStyleSheet","id":"p1082","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loadingspinner.css"}},{"id":"p1076"}],"min_width":20,"min_height":20,"margin":[5,10],"align":"start"}},{"type":"object","name":"Row","id":"p1017","attributes":{"name":"main-139994947403408","tags":["main"],"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1083","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"type":"object","name":"ImportedStyleSheet","id":"p1084","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/listpanel.css"}},{"id":"p1076"}],"min_width":600,"margin":0,"sizing_mode":"stretch_width","align":"center","children":[{"type":"object","name":"panel.models.widgets.VideoStream","id":"p1019","attributes":{"visible":false,"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1085","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"id":"p1076"}],"width":0,"height":0,"margin":[5,10],"sizing_mode":"fixed","align":"start","format":"jpeg","timeout":500,"value":""}},{"type":"object","name":"Spacer","id":"p1021","attributes":{"name":"HSpacer00182","stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1086","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"id":"p1076"}],"margin":0,"sizing_mode":"stretch_width","align":"start"}},{"type":"object","name":"panel.models.markup.HTML","id":"p1023","attributes":{"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1087","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"id":"p1076"}],"width":600,"height":600,"margin":[5,10],"sizing_mode":"fixed","align":"start","text":"&lt;img&gt;&lt;/img&gt;"}},{"type":"object","name":"Spacer","id":"p1025","attributes":{"name":"HSpacer00183","stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1088","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"id":"p1076"}],"margin":0,"sizing_mode":"stretch_width","align":"start"}}]}},{"type":"object","name":"panel.models.layout.Column","id":"p1028","attributes":{"name":"nav-139994947264208","tags":["nav"],"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1089","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"type":"object","name":"ImportedStyleSheet","id":"p1090","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/listpanel.css"}},{"id":"p1076"}],"margin":0,"sizing_mode":"stretch_width","align":"start","children":[{"type":"object","name":"panel.models.layout.Column","id":"p1029","attributes":{"name":"Video Stream","stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1137","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"type":"object","name":"ImportedStyleSheet","id":"p1138","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/listpanel.css"}},{"id":"p1076"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","children":[{"type":"object","name":"Div","id":"p1031","attributes":{"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1094","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"id":"p1076"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","text":"&lt;b&gt;Video Stream&lt;/b&gt;"}},{"type":"object","name":"Checkbox","id":"p1033","attributes":{"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1095","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"id":"p1076"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","label":"Paused"}},{"type":"object","name":"Slider","id":"p1035","attributes":{"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1096","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"id":"p1076"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","title":"Timeout","start":10,"end":2000,"value":500,"step":10}}]}},{"type":"object","name":"panel.models.layout.Column","id":"p1038","attributes":{"name":"Column00175","stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1143","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"type":"object","name":"ImportedStyleSheet","id":"p1144","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/listpanel.css"}},{"id":"p1076"}],"margin":0,"sizing_mode":"stretch_width","align":"start","children":[{"type":"object","name":"Row","id":"p1039","attributes":{"name":"Row00148","stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1100","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"type":"object","name":"ImportedStyleSheet","id":"p1101","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/listpanel.css"}},{"id":"p1076"}],"margin":0,"sizing_mode":"stretch_width","align":"start"}}]}},{"type":"object","name":"panel.models.layout.Column","id":"p1044","attributes":{"name":"Image","stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1148","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"type":"object","name":"ImportedStyleSheet","id":"p1149","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/listpanel.css"}},{"id":"p1076"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","children":[{"type":"object","name":"Div","id":"p1046","attributes":{"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1105","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"id":"p1076"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","text":"&lt;b&gt;Image&lt;/b&gt;"}},{"type":"object","name":"Slider","id":"p1048","attributes":{"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1106","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"id":"p1076"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","title":"Height","start":10,"end":2000,"value":600,"step":10}},{"type":"object","name":"Slider","id":"p1050","attributes":{"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1107","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"id":"p1076"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","title":"Width","start":10,"end":2000,"value":600,"step":10}}]}},{"type":"object","name":"panel.models.layout.Column","id":"p1053","attributes":{"name":"Model","stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1154","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"type":"object","name":"ImportedStyleSheet","id":"p1155","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/listpanel.css"}},{"id":"p1076"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","children":[{"type":"object","name":"Div","id":"p1055","attributes":{"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1111","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"id":"p1076"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","text":"&lt;b&gt;Model&lt;/b&gt;"}},{"type":"object","name":"panel.models.widgets.RadioButtonGroup","id":"p1059","attributes":{"button_type":"primary","css_classes":["outline"],"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1112","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"type":"object","name":"ImportedStyleSheet","id":"p1113","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/button.css"}},{"id":"p1076"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","labels":["GaussianBlur","Grayscale","Sobel","FaceDetection"],"orientation":"vertical","active":0,"tooltip":{"type":"object","name":"Tooltip","id":"p1056","attributes":{"position":"right","content":"The currently selected model"}}}}]}},{"type":"object","name":"panel.models.layout.Column","id":"p1062","attributes":{"name":"Column00180","stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1160","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"type":"object","name":"ImportedStyleSheet","id":"p1161","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/listpanel.css"}},{"id":"p1076"}],"margin":0,"sizing_mode":"stretch_width","align":"start","children":[{"type":"object","name":"panel.models.layout.Column","id":"p1063","attributes":{"name":"GaussianBlur","stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1163","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"type":"object","name":"ImportedStyleSheet","id":"p1164","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/listpanel.css"}},{"id":"p1076"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","children":[{"type":"object","name":"Div","id":"p1065","attributes":{"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1120","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"id":"p1076"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","text":"&lt;b&gt;GaussianBlur&lt;/b&gt;"}},{"type":"object","name":"Slider","id":"p1067","attributes":{"stylesheets":["\n:host(.pn-loading.pn-arc):before, .pn-loading.pn-arc:before {\n  background-image: url(\"data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHN0eWxlPSJtYXJnaW46IGF1dG87IGJhY2tncm91bmQ6IG5vbmU7IGRpc3BsYXk6IGJsb2NrOyBzaGFwZS1yZW5kZXJpbmc6IGF1dG87IiB2aWV3Qm94PSIwIDAgMTAwIDEwMCIgcHJlc2VydmVBc3BlY3RSYXRpbz0ieE1pZFlNaWQiPiAgPGNpcmNsZSBjeD0iNTAiIGN5PSI1MCIgZmlsbD0ibm9uZSIgc3Ryb2tlPSIjYzNjM2MzIiBzdHJva2Utd2lkdGg9IjEwIiByPSIzNSIgc3Ryb2tlLWRhc2hhcnJheT0iMTY0LjkzMzYxNDMxMzQ2NDE1IDU2Ljk3Nzg3MTQzNzgyMTM4Ij4gICAgPGFuaW1hdGVUcmFuc2Zvcm0gYXR0cmlidXRlTmFtZT0idHJhbnNmb3JtIiB0eXBlPSJyb3RhdGUiIHJlcGVhdENvdW50PSJpbmRlZmluaXRlIiBkdXI9IjFzIiB2YWx1ZXM9IjAgNTAgNTA7MzYwIDUwIDUwIiBrZXlUaW1lcz0iMDsxIj48L2FuaW1hdGVUcmFuc2Zvcm0+ICA8L2NpcmNsZT48L3N2Zz4=\");\n  background-size: auto calc(min(50%, 400px));\n}",{"type":"object","name":"ImportedStyleSheet","id":"p1121","attributes":{"url":"https://cdn.holoviz.org/panel/1.3.6/dist/css/loading.css"}},"\n.mdc-drawer {background: var(--light-bg-color) !important;}",{"id":"p1076"}],"margin":[5,10],"sizing_mode":"stretch_width","align":"start","title":"Radius","start":0,"end":10,"value":2}}]}}]}}]}}],"defs":[{"type":"model","name":"ReactiveHTML1"},{"type":"model","name":"FlexBox1","properties":[{"name":"align_content","kind":"Any","default":"flex-start"},{"name":"align_items","kind":"Any","default":"flex-start"},{"name":"flex_direction","kind":"Any","default":"row"},{"name":"flex_wrap","kind":"Any","default":"wrap"},{"name":"justify_content","kind":"Any","default":"flex-start"}]},{"type":"model","name":"FloatPanel1","properties":[{"name":"config","kind":"Any","default":{"type":"map"}},{"name":"contained","kind":"Any","default":true},{"name":"position","kind":"Any","default":"right-top"},{"name":"offsetx","kind":"Any","default":null},{"name":"offsety","kind":"Any","default":null},{"name":"theme","kind":"Any","default":"primary"},{"name":"status","kind":"Any","default":"normalized"}]},{"type":"model","name":"GridStack1","properties":[{"name":"mode","kind":"Any","default":"warn"},{"name":"ncols","kind":"Any","default":null},{"name":"nrows","kind":"Any","default":null},{"name":"allow_resize","kind":"Any","default":true},{"name":"allow_drag","kind":"Any","default":true},{"name":"state","kind":"Any","default":[]}]},{"type":"model","name":"drag1","properties":[{"name":"slider_width","kind":"Any","default":5},{"name":"slider_color","kind":"Any","default":"black"},{"name":"value","kind":"Any","default":50}]},{"type":"model","name":"click1","properties":[{"name":"terminal_output","kind":"Any","default":""},{"name":"debug_name","kind":"Any","default":""},{"name":"clears","kind":"Any","default":0}]},{"type":"model","name":"copy_to_clipboard1","properties":[{"name":"fill","kind":"Any","default":"none"},{"name":"value","kind":"Any","default":null}]},{"type":"model","name":"FastWrapper1","properties":[{"name":"object","kind":"Any","default":null},{"name":"style","kind":"Any","default":null}]},{"type":"model","name":"NotificationAreaBase1","properties":[{"name":"js_events","kind":"Any","default":{"type":"map"}},{"name":"position","kind":"Any","default":"bottom-right"},{"name":"_clear","kind":"Any","default":0}]},{"type":"model","name":"NotificationArea1","properties":[{"name":"js_events","kind":"Any","default":{"type":"map"}},{"name":"notifications","kind":"Any","default":[]},{"name":"position","kind":"Any","default":"bottom-right"},{"name":"_clear","kind":"Any","default":0},{"name":"types","kind":"Any","default":[{"type":"map","entries":[["type","warning"],["background","#ffc107"],["icon",{"type":"map","entries":[["className","fas fa-exclamation-triangle"],["tagName","i"],["color","white"]]}]]},{"type":"map","entries":[["type","info"],["background","#007bff"],["icon",{"type":"map","entries":[["className","fas fa-info-circle"],["tagName","i"],["color","white"]]}]]}]}]},{"type":"model","name":"Notification","properties":[{"name":"background","kind":"Any","default":null},{"name":"duration","kind":"Any","default":3000},{"name":"icon","kind":"Any","default":null},{"name":"message","kind":"Any","default":""},{"name":"notification_type","kind":"Any","default":null},{"name":"_destroyed","kind":"Any","default":false}]},{"type":"model","name":"TemplateActions1","properties":[{"name":"open_modal","kind":"Any","default":0},{"name":"close_modal","kind":"Any","default":0}]},{"type":"model","name":"BootstrapTemplateActions1","properties":[{"name":"open_modal","kind":"Any","default":0},{"name":"close_modal","kind":"Any","default":0}]},{"type":"model","name":"MaterialTemplateActions1","properties":[{"name":"open_modal","kind":"Any","default":0},{"name":"close_modal","kind":"Any","default":0}]}]}}
+    </script>
+    <script type="text/javascript">
+      (function() {
+        const fn = function() {
+          Bokeh.safely(function() {
+            (function(root) {
+              function embed_document(root) {
+              const docs_json = document.getElementById('p1167').textContent;
+              const render_items = [{"docid":"3c834f99-af01-4f86-b149-44983f2412fc","roots":{"p1002":"c861e5fb-b514-4e68-8b16-9174f1ba9a9c","p1009":"b6ab6366-6c22-4f7f-b812-f2e1a390e026","p1012":"bf2a4026-7554-4e87-bfde-2673dedfcd49","p1013":"ade4f51b-e294-42a9-a3e7-478d065f730b","p1016":"c489da48-6f7a-4f64-bb54-4971c884670a","p1017":"b7e25cf5-128e-499f-ac93-6fb5a5859569","p1028":"c5ca8963-30c7-446b-9af0-4a5fb9a34bfc"},"root_ids":["p1002","p1009","p1012","p1013","p1016","p1017","p1028"]}];
+              root.Bokeh.embed.embed_items(docs_json, render_items);
+              }
+              if (root.Bokeh !== undefined) {
+                embed_document(root);
+              } else {
+                let attempts = 0;
+                const timer = setInterval(function(root) {
+                  if (root.Bokeh !== undefined) {
+                    clearInterval(timer);
+                    embed_document(root);
+                  } else {
+                    attempts++;
+                    if (attempts > 100) {
+                      clearInterval(timer);
+                      console.log("Bokeh: ERROR: Unable to run BokehJS code because BokehJS library is missing");
+                    }
+                  }
+                }, 10, root)
+              }
+            })(window);
+          });
+        };
+        if (document.readyState != "loading") fn();
+        else document.addEventListener("DOMContentLoaded", fn);
+      })();
+    </script>
+  </body>
+</html>

index.js ADDED Viewed

	@@ -0,0 +1,524 @@

+importScripts("https://cdn.jsdelivr.net/pyodide/v0.24.1/full/pyodide.js");
+function sendPatch(patch, buffers, msg_id) {
+  self.postMessage({
+    type: 'patch',
+    patch: patch,
+    buffers: buffers
+  })
+}
+async function startApplication() {
+  console.log("Loading pyodide!");
+  self.postMessage({type: 'status', msg: 'Loading pyodide'})
+  self.pyodide = await loadPyodide();
+  self.pyodide.globals.set("sendPatch", sendPatch);
+  console.log("Loaded!");
+  await self.pyodide.loadPackage("micropip");
+  const env_spec = ['https://cdn.holoviz.org/panel/wheels/bokeh-3.3.2-py3-none-any.whl', 'https://cdn.holoviz.org/panel/1.3.6/dist/wheels/panel-1.3.6-py3-none-any.whl', 'pyodide-http==0.2.1', 'numpy', 'param', 'scikit-image']
+  for (const pkg of env_spec) {
+    let pkg_name;
+    if (pkg.endsWith('.whl')) {
+      pkg_name = pkg.split('/').slice(-1)[0].split('-')[0]
+    } else {
+      pkg_name = pkg
+    }
+    self.postMessage({type: 'status', msg: `Installing ${pkg_name}`})
+    try {
+      await self.pyodide.runPythonAsync(`
+        import micropip
+        await micropip.install('${pkg}');
+      `);
+    } catch(e) {
+      console.log(e)
+      self.postMessage({
+	type: 'status',
+	msg: `Error while installing ${pkg_name}`
+      });
+    }
+  }
+  console.log("Packages loaded!");
+  self.postMessage({type: 'status', msg: 'Executing code'})
+  const code = `
+import asyncio
+from panel.io.pyodide import init_doc, write_doc
+init_doc()
+import base64
+import io
+import time
+import numpy as np
+import param
+import PIL
+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
+import panel as pn
+import sys
+HEIGHT = 600 # pixels
+WIDTH = 600 # pixels
+TIMEOUT = 500 # milliseconds
+if sys.platform == 'emscripten':
+    HEIGHT = 800 # pixels
+    WIDTH = 800 # pixels
+    TIMEOUT=100
+CSS="""
+.mdc-drawer {background: var(--light-bg-color) !important;}"""
+pn.extension(raw_css=[CSS], sizing_mode="stretch_width")
+class ImageModel(pn.viewable.Viewer):
+    """Base class for image models."""
+    def __init__(self, **params):
+        super().__init__(**params)
+        with param.edit_constant(self):
+            self.name = self.__class__.name.replace("Model", "")
+        self.view = self.create_view()
+    def __panel__(self):
+        return self.view
+    def apply(self, image: str, height: int = HEIGHT, width: int = WIDTH) -> str:
+        """Transforms a 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 PILImageModel(ImageModel):
+    """Base class for PIL image models"""
+    @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 apply(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 NumpyImageModel(ImageModel):
+    """Base class for np.ndarray image models"""
+    @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 = PILImageModel.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 PILImageModel.from_pil_img(pil_img)
+    def apply(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 np.array image"""
+        raise NotImplementedError()
+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(
+                name=name,
+                data={"x": [1], "y": [duration]},
+                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)
+    @param.depends("_trends")
+    def _panel(self):
+        self._layout[:] = list(self._trends.values())
+        return self._layout
+    def __panel__(self):
+        return pn.panel(self._panel)
+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 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", allow_refs=False,
+    )
+    height = param.Integer(
+        default=HEIGHT,
+        bounds=(10, 2000),
+        step=10,
+        doc="""The height of the image converted and shown""",
+    )
+    width = param.Integer(
+        default=WIDTH,
+        bounds=(10, 2000),
+        step=10,
+        doc="""The width of the image converted and shown""",
+    )
+    model = param.Selector(doc="The currently selected model")
+    def __init__(
+        self,
+        models,
+        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
+        models = [to_instance(model) for model in models]
+        self.param.model.objects = models
+        self.model = models[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=["model"],
+                expand_button=False,
+                expand=False,
+                widgets={
+                    "model": {
+                        "widget_type": pn.widgets.RadioButtonGroup,
+                        "orientation": "vertical",
+                        "button_type": "primary",
+                        "button_style": "outline"
+                    }
+                },
+                name="Model",
+            ),
+            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",
+        )
+    @param.depends("height", "width", watch=True)
+    def _update_height_width(self):
+        self.image.height = self.height
+        self.image.width = self.width
+    @param.depends("model")
+    def _get_transform(self):
+        # Hack: returning self.transform stops working after browsing the transforms for a while
+        return self.model.view
+    def __panel__(self):
+        return self._panel
+    @param.depends("video_stream.value", watch=True)
+    def _handle_stream(self):
+        if self._updating:
+            return
+        self._updating = True
+        if self.model and self.video_stream.value:
+            value = self.video_stream.value
+            try:
+                image = self.timer.time_it(
+                    name="Model",
+                    func=self.model.apply,
+                    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
+class GaussianBlurModel(PILImageModel):
+    """Gaussian Blur Model
+    https://pillow.readthedocs.io/en/stable/reference/ImageFilter.html#PIL.ImageFilter.GaussianBlur
+    """
+    radius = param.Integer(default=0, bounds=(0, 10))
+    def transform(self, image: Image):
+        return image.filter(ImageFilter.GaussianBlur(radius=self.radius))
+class GrayscaleModel(NumpyImageModel):
+    """GrayScale Model
+    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 SobelModel(NumpyImageModel):
+    """Sobel Model
+    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 FaceDetectionModel(NumpyImageModel):
+    """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(default=1.4, bounds=(1.0, 2.0), step=0.1)
+    step_ratio = param.Integer(default=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(
+    models=[
+        GaussianBlurModel,
+        GrayscaleModel,
+        SobelModel,
+        FaceDetectionModel,
+    ]
+)
+pn.Row(pn.Row(component.settings, max_width=400), component)
+pn.template.MaterialTemplate(
+    site="Awesome Panel",
+    title="VideoStream with ScikitImage",
+    sidebar=[component.settings],
+    main=[component],
+).servable(); # We add ; to not show the template in the notebook as it does not display well.
+await write_doc()
+  `
+  try {
+    const [docs_json, render_items, root_ids] = await self.pyodide.runPythonAsync(code)
+    self.postMessage({
+      type: 'render',
+      docs_json: docs_json,
+      render_items: render_items,
+      root_ids: root_ids
+    })
+  } catch(e) {
+    const traceback = `${e}`
+    const tblines = traceback.split('\n')
+    self.postMessage({
+      type: 'status',
+      msg: tblines[tblines.length-2]
+    });
+    throw e
+  }
+}
+self.onmessage = async (event) => {
+  const msg = event.data
+  if (msg.type === 'rendered') {
+    self.pyodide.runPythonAsync(`
+    from panel.io.state import state
+    from panel.io.pyodide import _link_docs_worker
+    _link_docs_worker(state.curdoc, sendPatch, setter='js')
+    `)
+  } else if (msg.type === 'patch') {
+    self.pyodide.globals.set('patch', msg.patch)
+    self.pyodide.runPythonAsync(`
+    state.curdoc.apply_json_patch(patch.to_py(), setter='js')
+    `)
+    self.postMessage({type: 'idle'})
+  } else if (msg.type === 'location') {
+    self.pyodide.globals.set('location', msg.location)
+    self.pyodide.runPythonAsync(`
+    import json
+    from panel.io.state import state
+    from panel.util import edit_readonly
+    if state.location:
+        loc_data = json.loads(location)
+        with edit_readonly(state.location):
+            state.location.param.update({
+                k: v for k, v in loc_data.items() if k in state.location.param
+            })
+    `)
+  }
+}
+startApplication()

index.py ADDED Viewed

	@@ -0,0 +1,421 @@

+import base64
+import io
+import time
+import numpy as np
+import param
+import PIL
+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
+import panel as pn
+import sys
+HEIGHT = 600 # pixels
+WIDTH = 600 # pixels
+TIMEOUT = 500 # milliseconds
+if sys.platform == 'emscripten':
+    # Performance is higher when no round trip to server
+    HEIGHT = 800
+    WIDTH = 800
+    TIMEOUT=100
+CSS="""
+.mdc-drawer {background: var(--light-bg-color) !important;}"""
+pn.extension(raw_css=[CSS], sizing_mode="stretch_width")
+class ImageModel(pn.viewable.Viewer):
+    """Base class for image models."""
+    def __init__(self, **params):
+        super().__init__(**params)
+        with param.edit_constant(self):
+            self.name = self.__class__.name.replace("Model", "")
+        self.view = self.create_view()
+    def __panel__(self):
+        return self.view
+    def apply(self, image: str, height: int = HEIGHT, width: int = WIDTH) -> str:
+        """Transforms a 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 PILImageModel(ImageModel):
+    """Base class for PIL image models"""
+    @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 apply(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 NumpyImageModel(ImageModel):
+    """Base class for np.ndarray image models"""
+    @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 = PILImageModel.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 PILImageModel.from_pil_img(pil_img)
+    def apply(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 np.array image"""
+        raise NotImplementedError()
+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(
+                name=name,
+                data={"x": [1], "y": [duration]},
+                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)
+    @param.depends("_trends")
+    def _panel(self):
+        self._layout[:] = list(self._trends.values())
+        return self._layout
+    def __panel__(self):
+        return pn.panel(self._panel)
+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 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", allow_refs=False,
+    )
+    height = param.Integer(
+        default=HEIGHT,
+        bounds=(10, 2000),
+        step=10,
+        doc="""The height of the image converted and shown""",
+    )
+    width = param.Integer(
+        default=WIDTH,
+        bounds=(10, 2000),
+        step=10,
+        doc="""The width of the image converted and shown""",
+    )
+    model = param.Selector(doc="The currently selected model")
+    def __init__(
+        self,
+        models,
+        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
+        models = [to_instance(model) for model in models]
+        self.param.model.objects = models
+        self.model = models[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=["model"],
+                expand_button=False,
+                expand=False,
+                widgets={
+                    "model": {
+                        "widget_type": pn.widgets.RadioButtonGroup,
+                        "orientation": "vertical",
+                        "button_type": "primary",
+                        "button_style": "outline"
+                    }
+                },
+                name="Model",
+            ),
+            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",
+        )
+    @param.depends("height", "width", watch=True)
+    def _update_height_width(self):
+        self.image.height = self.height
+        self.image.width = self.width
+    @param.depends("model")
+    def _get_transform(self):
+        # Hack: returning self.transform stops working after browsing the transforms for a while
+        return self.model.view
+    def __panel__(self):
+        return self._panel
+    @param.depends("video_stream.value", watch=True)
+    def _handle_stream(self):
+        if self._updating:
+            return
+        self._updating = True
+        if self.model and self.video_stream.value:
+            value = self.video_stream.value
+            try:
+                image = self.timer.time_it(
+                    name="Model",
+                    func=self.model.apply,
+                    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
+class GaussianBlurModel(PILImageModel):
+    """Gaussian Blur Model
+    https://pillow.readthedocs.io/en/stable/reference/ImageFilter.html#PIL.ImageFilter.GaussianBlur
+    """
+    radius = param.Integer(default=0, bounds=(0, 10))
+    def transform(self, image: Image):
+        return image.filter(ImageFilter.GaussianBlur(radius=self.radius))
+class GrayscaleModel(NumpyImageModel):
+    """GrayScale Model
+    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 SobelModel(NumpyImageModel):
+    """Sobel Model
+    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 FaceDetectionModel(NumpyImageModel):
+    """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(default=1.4, bounds=(1.0, 2.0), step=0.1)
+    step_ratio = param.Integer(default=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(
+    models=[
+        GaussianBlurModel,
+        GrayscaleModel,
+        SobelModel,
+        FaceDetectionModel,
+    ]
+)
+pn.Row(pn.Row(component.settings, max_width=400), component)
+pn.template.MaterialTemplate(
+    site="Awesome Panel",
+    title="VideoStream with ScikitImage",
+    sidebar=[component.settings],
+    main=[component],
+).servable(); # We add ; to not show the template in the notebook as it does not display well.