Video Overlay far enough -Moving Dot Space next

bundle.css

@@ -1 +1,2 @@
+#videoContainer.svelte-ufd3fo{border:2px solid red;position:relative;width:720px;height:480px}#videoCanvas.svelte-ufd3fo{border:2px solid black;width:99.5%;height:99.5%;object-fit:cover}#overlayText.svelte-ufd3fo{position:absolute;top:50%;right:50%;color:green;font-style:bold;font-size:15}
 main.svelte-1tky8bj{text-align:center;padding:1em;max-width:240px;margin:0 auto}h1.svelte-1tky8bj{color:#ff3e00;text-transform:uppercase;font-size:4em;font-weight:100}@media(min-width: 640px){main.svelte-1tky8bj{max-width:none}}

bundle.js

@@ -35,6 +35,12 @@ var app = (function () {
     function is_empty(obj) {
         return Object.keys(obj).length === 0;
     }
+
+    const globals = (typeof window !== 'undefined'
+        ? window
+        : typeof globalThis !== 'undefined'
+            ? globalThis
+            : global);
     function append(target, node) {
         target.appendChild(node);
     }
@@ -484,27 +490,29 @@ var app = (function () {
     }
 
     /* src\VideoGradioComponentBrainstorming.svelte generated by Svelte v3.59.2 */
+
+    const { console: console_1 } = globals;
     const file$2 = "src\\VideoGradioComponentBrainstorming.svelte";
 
     function get_each_context$1(ctx, list, i) {
     	const child_ctx = ctx.slice();
-    	child_ctx[4] = list[i];
+    	child_ctx[15] = list[i];
     	return child_ctx;
     }
 
-    // (39:4) {#each kitchenOptions as option}
+    // (85:4) {#each kitchenOptions as option}
     function create_each_block$1(ctx) {
     	let option;
-    	let t_value = /*option*/ ctx[4] + "";
+    	let t_value = /*option*/ ctx[15] + "";
     	let t;
 
     	const block = {
     		c: function create() {
     			option = element("option");
     			t = text(t_value);
-    			option.__value = /*option*/ ctx[4];
+    			option.__value = /*option*/ ctx[15];
     			option.value = option.__value;
-    			add_location(option, file$2, 39, 6, 1076);
+    			add_location(option, file$2, 85, 6, 2561);
     		},
     		m: function mount(target, anchor) {
     			insert_dev(target, option, anchor);
@@ -520,7 +528,7 @@ var app = (function () {
     		block,
     		id: create_each_block$1.name,
     		type: "each",
-    		source: "(39:4) {#each kitchenOptions as option}",
+    		source: "(85:4) {#each kitchenOptions as option}",
     		ctx
     	});
 
@@ -530,17 +538,26 @@ var app = (function () {
     function create_fragment$2(ctx) {
     	let h1;
     	let t1;
+    	let div1;
     	let video;
     	let track;
     	let track_src_value;
     	let t2;
-    	let div;
-    	let button;
+    	let div0;
+    	let t3;
     	let t4;
+    	let t5;
+    	let canvas_1;
+    	let t6;
+    	let input;
+    	let t7;
+    	let div2;
+    	let button;
+    	let t9;
     	let select;
     	let mounted;
     	let dispose;
-    	let each_value = /*kitchenOptions*/ ctx[1];
+    	let each_value = /*kitchenOptions*/ ctx[4];
     	validate_each_argument(each_value);
     	let each_blocks = [];
 
@@ -551,37 +568,58 @@ var app = (function () {
     	const block = {
     		c: function create() {
     			h1 = element("h1");
-    			h1.textContent = "AI Vision Assistant - Auto prompt HF agent + Cohere + Object detection";
+    			h1.textContent = "AI Vision Assistant - Auto prompt HF agent + Cohere + Object detection - Text write on screen test";
     			t1 = space();
+    			div1 = element("div");
     			video = element("video");
     			track = element("track");
     			t2 = space();
-    			div = element("div");
+    			div0 = element("div");
+    			t3 = text("Text Overlay Test and ");
+    			t4 = text(/*TestVerb*/ ctx[3]);
+    			t5 = space();
+    			canvas_1 = element("canvas");
+    			t6 = space();
+    			input = element("input");
+    			t7 = space();
+    			div2 = element("div");
     			button = element("button");
     			button.textContent = "Verb Test";
-    			t4 = space();
+    			t9 = space();
     			select = element("select");
 
     			for (let i = 0; i < each_blocks.length; i += 1) {
     				each_blocks[i].c();
     			}
 
-    			add_location(h1, file$2, 26, 0, 606);
+    			add_location(h1, file$2, 66, 0, 1800);
     			attr_dev(track, "kind", "captions");
     			if (!src_url_equal(track.src, track_src_value = "path/to/your/captions/file.vtt")) attr_dev(track, "src", track_src_value);
     			attr_dev(track, "srclang", "en");
     			attr_dev(track, "label", "English");
-    			add_location(track, file$2, 31, 4, 780);
+    			add_location(track, file$2, 72, 4, 2006);
     			attr_dev(video, "id", "videoCanvas");
-    			attr_dev(video, "width", "1080");
-    			attr_dev(video, "height", "1780");
     			video.autoplay = true;
-    			add_location(video, file$2, 29, 0, 712);
-    			add_location(button, file$2, 36, 2, 944);
-    			if (/*selectedOption*/ ctx[0] === void 0) add_render_callback(() => /*select_change_handler*/ ctx[2].call(select));
-    			add_location(select, file$2, 37, 2, 994);
-    			attr_dev(div, "id", "frameForButtons");
-    			add_location(div, file$2, 35, 0, 914);
+    			attr_dev(video, "class", "svelte-ufd3fo");
+    			add_location(video, file$2, 70, 2, 1965);
+    			attr_dev(div0, "id", "overlayText");
+    			attr_dev(div0, "class", "svelte-ufd3fo");
+    			add_location(div0, file$2, 74, 2, 2111);
+    			attr_dev(div1, "id", "videoContainer");
+    			attr_dev(div1, "class", "svelte-ufd3fo");
+    			add_location(div1, file$2, 68, 0, 1911);
+    			attr_dev(canvas_1, "id", "myCanvas");
+    			set_style(canvas_1, "border", "2px solid black");
+    			attr_dev(canvas_1, "width", "500");
+    			attr_dev(canvas_1, "height", "500");
+    			add_location(canvas_1, file$2, 77, 0, 2186);
+    			attr_dev(input, "type", "text");
+    			add_location(input, file$2, 78, 0, 2294);
+    			add_location(button, file$2, 82, 2, 2429);
+    			if (/*selectedOption*/ ctx[0] === void 0) add_render_callback(() => /*select_change_handler*/ ctx[9].call(select));
+    			add_location(select, file$2, 83, 2, 2479);
+    			attr_dev(div2, "id", "frameForButtons");
+    			add_location(div2, file$2, 81, 0, 2399);
     		},
     		l: function claim(nodes) {
     			throw new Error("options.hydrate only works if the component was compiled with the `hydratable: true` option");
@@ -589,13 +627,24 @@ var app = (function () {
     		m: function mount(target, anchor) {
     			insert_dev(target, h1, anchor);
     			insert_dev(target, t1, anchor);
-    			insert_dev(target, video, anchor);
+    			insert_dev(target, div1, anchor);
+    			append_dev(div1, video);
     			append_dev(video, track);
-    			insert_dev(target, t2, anchor);
-    			insert_dev(target, div, anchor);
-    			append_dev(div, button);
-    			append_dev(div, t4);
-    			append_dev(div, select);
+    			append_dev(div1, t2);
+    			append_dev(div1, div0);
+    			append_dev(div0, t3);
+    			append_dev(div0, t4);
+    			insert_dev(target, t5, anchor);
+    			insert_dev(target, canvas_1, anchor);
+    			/*canvas_1_binding*/ ctx[7](canvas_1);
+    			insert_dev(target, t6, anchor);
+    			insert_dev(target, input, anchor);
+    			set_input_value(input, /*textToDisplay*/ ctx[2]);
+    			insert_dev(target, t7, anchor);
+    			insert_dev(target, div2, anchor);
+    			append_dev(div2, button);
+    			append_dev(div2, t9);
+    			append_dev(div2, select);
 
     			for (let i = 0; i < each_blocks.length; i += 1) {
     				if (each_blocks[i]) {
@@ -607,16 +656,24 @@ var app = (function () {
 
     			if (!mounted) {
     				dispose = [
-    					listen_dev(button, "click", testText, false, false, false, false),
-    					listen_dev(select, "change", /*select_change_handler*/ ctx[2])
+    					listen_dev(input, "input", /*input_input_handler*/ ctx[8]),
+    					listen_dev(input, "input", /*updateText*/ ctx[6], false, false, false, false),
+    					listen_dev(button, "click", /*testText*/ ctx[5], false, false, false, false),
+    					listen_dev(select, "change", /*select_change_handler*/ ctx[9])
     				];
 
     				mounted = true;
     			}
     		},
     		p: function update(ctx, [dirty]) {
-    			if (dirty & /*kitchenOptions*/ 2) {
-    				each_value = /*kitchenOptions*/ ctx[1];
+    			if (dirty & /*TestVerb*/ 8) set_data_dev(t4, /*TestVerb*/ ctx[3]);
+
+    			if (dirty & /*textToDisplay*/ 4 && input.value !== /*textToDisplay*/ ctx[2]) {
+    				set_input_value(input, /*textToDisplay*/ ctx[2]);
+    			}
+
+    			if (dirty & /*kitchenOptions*/ 16) {
+    				each_value = /*kitchenOptions*/ ctx[4];
     				validate_each_argument(each_value);
     				let i;
 
@@ -639,7 +696,7 @@ var app = (function () {
     				each_blocks.length = each_value.length;
     			}
 
-    			if (dirty & /*selectedOption, kitchenOptions*/ 3) {
+    			if (dirty & /*selectedOption, kitchenOptions*/ 17) {
     				select_option(select, /*selectedOption*/ ctx[0]);
     			}
     		},
@@ -648,9 +705,14 @@ var app = (function () {
     		d: function destroy(detaching) {
     			if (detaching) detach_dev(h1);
     			if (detaching) detach_dev(t1);
-    			if (detaching) detach_dev(video);
-    			if (detaching) detach_dev(t2);
-    			if (detaching) detach_dev(div);
+    			if (detaching) detach_dev(div1);
+    			if (detaching) detach_dev(t5);
+    			if (detaching) detach_dev(canvas_1);
+    			/*canvas_1_binding*/ ctx[7](null);
+    			if (detaching) detach_dev(t6);
+    			if (detaching) detach_dev(input);
+    			if (detaching) detach_dev(t7);
+    			if (detaching) detach_dev(div2);
     			destroy_each(each_blocks, detaching);
     			mounted = false;
     			run_all(dispose);
@@ -668,10 +730,6 @@ var app = (function () {
     	return block;
     }
 
-    function testText() {
-    	
-    } // Logic for 'verb test' button
-
     function ocrTest() {
     	
     } // Logic for 'Test OCR' button
@@ -681,39 +739,110 @@ var app = (function () {
     	validate_slots('VideoGradioComponentBrainstorming', slots, []);
     	let selectedOption = 'Stove - lu'; // default value
     	let kitchenOptions = ['Stove - lu', 'Refrigerator - bingxiang', 'Spoon - shao']; /* ... other options ... */
+    	let canvas;
+    	let ctx;
+    	let textToDisplay = 'Initial Text';
+    	let counter = 0;
+    	let hud_text;
+    	let TestVerb = "|Test verb|";
+
+    	// Functions for button commands
+    	function testText() {
+    		// Logic for 'verb test' button
+    		const randomIndex = Math.floor(Math.random() * kitchenOptions.length);
+
+    		$$invalidate(3, TestVerb = kitchenOptions[randomIndex]);
+    	}
 
     	// Image source
     	let imageSrc = 'path_to_your_image/Blooms-Taxonomy-650x366.jpg';
 
     	// Video stream setup
     	onMount(() => {
-    		
-    	}); // Initialize video stream here
+    		// Initialize video stream here
+    		ctx = canvas.getContext('2d');
+
+    		setInterval(
+    			() => {
+    				drawText(textToDisplay);
+    			},
+    			1000
+    		); // Update every second
+    	});
+
+    	function drawText(hud_info) {
+    		if (ctx) {
+    			hud_text = "HUD Info Update: " + counter++ + " " + hud_info;
+    			ctx.clearRect(0, 0, canvas.width, canvas.height); // Clear the canvas
+    			ctx.font = '30px Arial';
+    			ctx.fillStyle = 'black';
+    			ctx.fillText(hud_text, 50, 50);
+    		}
+    	}
+
+    	function updateText(event) {
+    		$$invalidate(2, textToDisplay = event.target.value);
+    		drawText();
+    	}
+
+    	// Camera as Video Stream
+    	navigator.mediaDevices.getUserMedia({ video: true }).then(stream => {
+    		const video = document.getElementById('videoCanvas');
+    		video.srcObject = stream;
+    	}).catch(err => {
+    		console.error("Error accessing the camera: ", err);
+    	});
 
     	const writable_props = [];
 
     	Object.keys($$props).forEach(key => {
-    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console.warn(`<VideoGradioComponentBrainstorming> was created with unknown prop '${key}'`);
+    		if (!~writable_props.indexOf(key) && key.slice(0, 2) !== '$$' && key !== 'slot') console_1.warn(`<VideoGradioComponentBrainstorming> was created with unknown prop '${key}'`);
     	});
 
+    	function canvas_1_binding($$value) {
+    		binding_callbacks[$$value ? 'unshift' : 'push'](() => {
+    			canvas = $$value;
+    			$$invalidate(1, canvas);
+    		});
+    	}
+
+    	function input_input_handler() {
+    		textToDisplay = this.value;
+    		$$invalidate(2, textToDisplay);
+    	}
+
     	function select_change_handler() {
     		selectedOption = select_value(this);
     		$$invalidate(0, selectedOption);
-    		$$invalidate(1, kitchenOptions);
+    		$$invalidate(4, kitchenOptions);
     	}
 
     	$$self.$capture_state = () => ({
     		onMount,
     		selectedOption,
     		kitchenOptions,
+    		canvas,
+    		ctx,
+    		textToDisplay,
+    		counter,
+    		hud_text,
+    		TestVerb,
     		testText,
     		ocrTest,
-    		imageSrc
+    		imageSrc,
+    		drawText,
+    		updateText
     	});
 
     	$$self.$inject_state = $$props => {
     		if ('selectedOption' in $$props) $$invalidate(0, selectedOption = $$props.selectedOption);
-    		if ('kitchenOptions' in $$props) $$invalidate(1, kitchenOptions = $$props.kitchenOptions);
+    		if ('kitchenOptions' in $$props) $$invalidate(4, kitchenOptions = $$props.kitchenOptions);
+    		if ('canvas' in $$props) $$invalidate(1, canvas = $$props.canvas);
+    		if ('ctx' in $$props) ctx = $$props.ctx;
+    		if ('textToDisplay' in $$props) $$invalidate(2, textToDisplay = $$props.textToDisplay);
+    		if ('counter' in $$props) counter = $$props.counter;
+    		if ('hud_text' in $$props) hud_text = $$props.hud_text;
+    		if ('TestVerb' in $$props) $$invalidate(3, TestVerb = $$props.TestVerb);
     		if ('imageSrc' in $$props) imageSrc = $$props.imageSrc;
     	};
 
@@ -721,7 +850,18 @@ var app = (function () {
     		$$self.$inject_state($$props.$$inject);
     	}
 
-    	return [selectedOption, kitchenOptions, select_change_handler];
+    	return [
+    		selectedOption,
+    		canvas,
+    		textToDisplay,
+    		TestVerb,
+    		kitchenOptions,
+    		testText,
+    		updateText,
+    		canvas_1_binding,
+    		input_input_handler,
+    		select_change_handler
+    	];
     }
 
     class VideoGradioComponentBrainstorming extends SvelteComponentDev {
@@ -890,28 +1030,24 @@ var app = (function () {
 
     // (30:16) {#each comment.items as item}
     function create_each_block_1(ctx) {
-    	let div;
     	let t0_value = /*item*/ ctx[9].title + "";
     	let t0;
     	let t1;
 
     	const block = {
     		c: function create() {
-    			div = element("div");
     			t0 = text(t0_value);
-    			t1 = space();
-    			add_location(div, file$1, 30, 20, 1088);
+    			t1 = text(" | \r\n                    ");
     		},
     		m: function mount(target, anchor) {
-    			insert_dev(target, div, anchor);
-    			append_dev(div, t0);
+    			insert_dev(target, t0, anchor);
     			insert_dev(target, t1, anchor);
     		},
     		p: function update(ctx, dirty) {
     			if (dirty & /*comments*/ 1 && t0_value !== (t0_value = /*item*/ ctx[9].title + "")) set_data_dev(t0, t0_value);
     		},
     		d: function destroy(detaching) {
-    			if (detaching) detach_dev(div);
+    			if (detaching) detach_dev(t0);
     			if (detaching) detach_dev(t1);
     		}
     	};