Add base64 video encoding to comparison dashboard for Colab support

This commit is contained in:
Sarvesh 2026-06-09 17:35:29 +05:30
parent 2ae46f8908
commit 538ad2e1ee

View file

@ -780,6 +780,23 @@
"outputs": [],
"source": [
"from IPython.display import HTML, display\n",
"import base64\n",
"import os\n",
"\n",
"def get_video_base64(video_path):\n",
" \"\"\"\n",
" Reads a local video file and encodes it to a base64 data URI to play in sandboxed Colab iframes.\n",
" \"\"\"\n",
" if not os.path.exists(video_path):\n",
" return \"\"\n",
" try:\n",
" with open(video_path, \"rb\") as f:\n",
" data = f.read()\n",
" b64_str = base64.b64encode(data).decode(\"utf-8\")\n",
" return f\"data:video/mp4;base64,{b64_str}\"\n",
" except Exception as e:\n",
" print(f\"Warning: Failed to encode video {video_path} to base64: {e}\")\n",
" return \"\"\n",
"\n",
"def display_comparison(\n",
" video_path,\n",
@ -792,6 +809,13 @@
" \"\"\"\n",
" Renders a beautifully styled comparison board with local HTML5 video player.\n",
" \"\"\"\n",
" video_src = get_video_base64(video_path)\n",
" if not video_src:\n",
" if video_path.startswith((\"http://\", \"https://\")):\n",
" video_src = video_path\n",
" else:\n",
" video_src = f\"https://video2lora.github.io/{video_path}\"\n",
" \n",
" html_content = f\"\"\"\n",
" <div style=\"font-family: 'Segoe UI', Roboto, Helvetica, Arial, sans-serif; max-width: 900px; margin: 20px auto; color: #1e293b; background-color: #f8fafc; padding: 24px; border-radius: 16px; box-shadow: 0 4px 20px rgba(0,0,0,0.05);\">\n",
" \n",
@ -803,7 +827,7 @@
"\n",
" <!-- Local HTML5 Video Player -->\n",
" <div style=\"text-align: center; margin-bottom: 20px; background: #000; border-radius: 12px; overflow: hidden; box-shadow: 0 4px 12px rgba(0,0,0,0.15);\">\n",
" <video src=\"{video_path}\" controls loop muted autoplay style=\"width: 100%; max-height: 400px; object-fit: contain; display: block; margin: 0 auto;\"></video>\n",
" <video src=\"{video_src}\" controls loop muted autoplay style=\"width: 100%; max-height: 400px; object-fit: contain; display: block; margin: 0 auto;\"></video>\n",
" </div>\n",
" \n",
" <!-- Question Prompt Card -->\n",