feat: add demo of GPT vision capabilities based on video stream

Author: chr-hertel

assets/app.js

@@ -4,4 +4,5 @@ import './styles/app.css';
 import './styles/audio.css';
 import './styles/blog.css';
 import './styles/youtube.css';
+import './styles/video.css';
 import './styles/wikipedia.css';

assets/controllers/video_controller.js

@@ -0,0 +1,43 @@
+import {Controller} from '@hotwired/stimulus';
+import {getComponent} from '@symfony/ux-live-component';
+
+export default class extends Controller {
+    async initialize() {
+        this.component = await getComponent(this.element);
+
+        this.video = document.getElementById('videoFeed');
+        this.canvas = document.getElementById('canvas');
+
+        const input = document.getElementById('chat-message');
+        input.addEventListener('keypress', (event) => {
+            if (event.key === 'Enter') {
+                this.submitMessage();
+            }
+        });
+        input.focus();
+
+        const submitButton = document.getElementById('chat-submit');
+        submitButton.addEventListener('click', (event) => {
+            this.submitMessage();
+        });
+
+        this.video.srcObject = await navigator.mediaDevices.getUserMedia({video: true, audio: false});
+    };
+
+    submitMessage() {
+        const input = document.getElementById('chat-message');
+        const instruction = input.value;
+        const image = this.captureImage();
+
+        this.component.action('submit', { instruction, image });
+        input.value = '';
+    }
+
+    captureImage() {
+        this.canvas.width = this.video.videoWidth;
+        this.canvas.height = this.video.videoHeight;
+        const context = this.canvas.getContext('2d');
+        context.drawImage(this.video, 0, 0, this.canvas.width, this.canvas.height);
+        return this.canvas.toDataURL('image/jpeg', 0.8);
+    }
+}

assets/icons/tabler/video-filled.svg

@@ -0,0 +1,27 @@
+.video {
+    body&, .card-img-top {
+        background: #26931e;
+        background: linear-gradient(0deg, #186361 0%, #26931e 100%);
+    }
+
+    .card-img-top {
+        color: #ffffff;
+    }
+
+    &.chat {
+        #chat-submit {
+            &:hover {
+                background: #186361;
+                border-color: #186361;
+            }
+        }
+    }
+
+    footer {
+        color: #ffffff;
+
+        a {
+            color: #ffffff;
+        }
+    }
+}

assets/styles/video.css

@@ -9,7 +9,7 @@
         "ext-iconv": "*",
         "codewithkyrian/chromadb-php": "^0.3.0",
         "league/commonmark": "^2.6",
-        "php-llm/llm-chain-bundle": "^0.19",
+        "php-llm/llm-chain-bundle": "^0.20",
         "runtime/frankenphp-symfony": "^0.2.0",
         "symfony/asset": "7.2.*",
         "symfony/asset-mapper": "7.2.*",