diff --git a/demo.ipynb b/demo.ipynb
index cc480292a..2016e5bfc 100644
--- a/demo.ipynb
+++ b/demo.ipynb
@@ -111,8 +111,8 @@
"\tcolor: lightgray;\n",
"\tfont-size: 72px;\n",
"}\n",
- ".output_text {\n",
- "\tdisplay: none !important;\n",
+ "div.stream {\n",
+ "\tdisplay: none;\n",
"}\n",
".title {\n",
"\tfont-size: 20px;\n",
@@ -199,6 +199,19 @@
".loading-label {\n",
"\tcolor: gray;\n",
"}\n",
+ ".comparison-widget {\n",
+ "\twidth: 256px;\n",
+ "\theight: 256px;\n",
+ "\tborder: 1px solid gray;\n",
+ "\tmargin-left: 2px;\n",
+ "}\n",
+ ".comparison-label {\n",
+ "\tcolor: gray;\n",
+ "\tfont-size: 14px;\n",
+ "\ttext-align: center;\n",
+ "\tposition: relative;\n",
+ "\tbottom: 3px;\n",
+ "}\n",
"@keyframes spin {\n",
"\tfrom { transform: rotate(0deg); }\n",
"\tto { transform: rotate(360deg); }\n",
@@ -338,7 +351,15 @@
"back = ipywidgets.Button(description='Back', button_style='primary')\n",
"back.add_class('output-button')\n",
"back.on_click(back_to_main)\n",
- "complete = ipywidgets.VBox([output_widget, download, convert, back])\n",
+ "\n",
+ "comparison_widget = ipywidgets.Output()\n",
+ "comparison_widget.add_class('comparison-widget')\n",
+ "comparison_label = ipywidgets.Label('Comparison')\n",
+ "comparison_label.add_class('comparison-label')\n",
+ "complete = ipywidgets.HBox([\n",
+ "\tipywidgets.VBox([output_widget, download, convert, back]),\n",
+ "\tipywidgets.VBox([comparison_widget, comparison_label])\n",
+ "])\n",
"\n",
"display(ipywidgets.VBox([main, loading, complete]))\n",
"display(Javascript(\"\"\"\n",
@@ -420,7 +441,7 @@
"\tfor name, file_info in upload_input_video_button.value.items():\n",
"\t\tcontent = file_info['content']\n",
"\tif content is not None:\n",
- "\t\tselected_video = io.BytesIO(content)\n",
+ "\t\tselected_video = content\n",
"\t\tpreview = resize(PIL.Image.fromarray(thumbnail(selected_video)).convert(\"RGB\"))\n",
"\t\tinput_video_widget.clear_output(wait=True)\n",
"\t\twith input_video_widget:\n",
@@ -466,7 +487,23 @@
"\tloading.layout.display = 'none'\n",
"\tcomplete.layout.display = ''\n",
"\twith output_widget:\n",
- "\t\tdisplay(HTML('' % b64encode(open('output.mp4', 'rb').read()).decode()))\n",
+ "\t\tdisplay(HTML('' % b64encode(open('output.mp4', 'rb').read()).decode()))\n",
+ "\twith comparison_widget:\n",
+ "\t\tdisplay(HTML('' % b64encode(open(selected_video, 'rb').read() if type(selected_video) is str else selected_video).decode()))\n",
+ "\tdisplay(Javascript(\"\"\"\n",
+ "\t(function(left, right) {\n",
+ "\t\tleft.addEventListener(\"play\", function() {\n",
+ "\t\t\tright.play();\n",
+ "\t\t});\n",
+ "\t\tleft.addEventListener(\"pause\", function() {\n",
+ "\t\t\tright.pause();\n",
+ "\t\t});\n",
+ "\t\tleft.addEventListener(\"seeking\", function() {\n",
+ "\t\t\tright.currentTime = left.currentTime;\n",
+ "\t\t});\n",
+ "\t})(document.getElementById(\"left\"), document.getElementById(\"right\"));\n",
+ "\t\"\"\"))\n",
+ "\t\n",
"generate_button.on_click(generate)\n",
"\n",
"loading.layout.display = 'none'\n",