More fixes (gradio-app#788)

* frontend fixes

* format fix

* first commit

* more fixes

* fixes

* updated PyPi version to 2.8.8

* changes

Co-authored-by: Ali Abid <aliabid94@gmail.com>

gradio.egg-info/PKG-INFO

@@ -1,6 +1,6 @@
 Metadata-Version: 2.1
 Name: gradio
-Version: 2.8.7
+Version: 2.8.8
 Summary: Python library for easily interacting with trained machine learning models
 Home-page: https://github.com/gradio-app/gradio-UI
 Author: Abubakar Abid, Ali Abid, Ali Abdalla, Dawood Khan, Ahsen Khaliq

gradio/version.txt

@@ -1 +1 @@
-2.8.7
+2.8.8

setup.py

@@ -5,7 +5,7 @@
 
 setup(
     name="gradio",
-    version="2.8.7",
+    version="2.8.8",
     include_package_data=True,
     description="Python library for easily interacting with trained machine learning models",
     author="Abubakar Abid, Ali Abid, Ali Abdalla, Dawood Khan, Ahsen Khaliq",

ui/packages/app/src/components/input/Image/Image.svelte

@@ -66,7 +66,11 @@
 					{$_("interface.click_to_upload")}
 				</Upload>
 			{:else if source === "webcam"}
-				<Webcam on:capture={({ detail }) => setValue(detail)} {static_src} />
+				<Webcam
+					mode="image"
+					on:capture={({ detail }) => setValue(detail)}
+					{static_src}
+				/>
 			{/if}
 		{:else if tool === "select"}
 			<Cropper image={value} on:crop={({ detail }) => setValue(detail)} />

ui/packages/app/src/components/input/Video/Video.svelte

@@ -2,6 +2,7 @@
 	import Upload from "../../utils/Upload.svelte";
 	import ModifyUpload from "../../utils/ModifyUpload.svelte";
 	import { prettyBytes, playable } from "../../utils/helpers";
+	import Webcam from "../../utils/Webcam.svelte";
 	import { _ } from "svelte-i18n";
 
 	interface Data {
@@ -44,6 +45,14 @@
 				<br />- {$_("interface.or")} -<br />
 				{$_("interface.click_to_upload")}
 			</Upload>
+		{:else if source === "webcam"}
+			<Webcam
+				mode="video"
+				on:capture={({ detail }) => {
+					setValue(detail);
+				}}
+				{static_src}
+			/>
 		{/if}
 	{:else}
 		<ModifyUpload clear={() => setValue(null)} {theme} {static_src} />

ui/packages/app/src/components/utils/Webcam.svelte

@@ -2,6 +2,13 @@
 	import { createEventDispatcher, onMount } from "svelte";
 
 	export let static_src: string;
+	export let mode: "video" | "image";
+
+	let recording = false;
+	let recorded_blobs: BlobPart[] = [];
+	let stream: MediaStream;
+	let mimeType: string;
+	let media_recorder: MediaRecorder;
 
 	let video_source: HTMLVideoElement;
 	let canvas: HTMLCanvasElement;
@@ -10,9 +17,9 @@
 
 	onMount(() => (canvas = document.createElement("canvas")));
 
-	async function access_webcam() {
+	async function accessWebcam() {
 		try {
-			const stream = await navigator.mediaDevices.getUserMedia({
+			stream = await navigator.mediaDevices.getUserMedia({
 				video: true
 			});
 			video_source.srcObject = stream;
@@ -22,13 +29,7 @@
 		}
 	}
 
-	function clearphoto() {
-		var context = canvas.getContext("2d")!;
-		context.fillStyle = "#AAA";
-		context.fillRect(0, 0, canvas.width, canvas.height);
-	}
-
-	function takepicture() {
+	function takePicture() {
 		var context = canvas.getContext("2d")!;
 
 		if (video_source.videoWidth && video_source.videoHeight) {
@@ -47,22 +48,72 @@
 		}
 	}
 
-	access_webcam();
+	function takeRecording() {
+		if (recording) {
+			media_recorder.stop();
+			let video_blob = new Blob(recorded_blobs, { type: mimeType });
+			let ReaderObj = new FileReader();
+			ReaderObj.onload = function (e) {
+				if (e.target) {
+					dispatch("capture", {
+						data: e.target.result,
+						name: "sample." + mimeType.substring(6),
+						is_example: false
+					});
+				}
+			};
+			ReaderObj.readAsDataURL(video_blob);
+		} else {
+			recorded_blobs = [];
+			let validMimeTypes = ["video/webm", "video/mp4"];
+			for (let validMimeType of validMimeTypes) {
+				if (MediaRecorder.isTypeSupported(validMimeType)) {
+					mimeType = validMimeType;
+					break;
+				}
+			}
+			if (mimeType === null) {
+				console.error("No supported MediaRecorder mimeType");
+				return;
+			}
+			media_recorder = new MediaRecorder(stream, {
+				mimeType: mimeType
+			});
+			media_recorder.addEventListener("dataavailable", function (e) {
+				recorded_blobs.push(e.data);
+			});
+			media_recorder.start(200);
+		}
+		recording = !recording;
+	}
+
+	accessWebcam();
 </script>
 
 <div class="h-full w-full relative">
 	<!-- svelte-ignore a11y-media-has-caption -->
 	<video bind:this={video_source} class=" h-full w-full" />
 	<button
-		on:click={takepicture}
-		style="background-color: #333;"
+		on:click={mode === "image" ? takePicture : takeRecording}
 		class="rounded-full w-10 h-10 flex justify-center items-center absolute inset-x-0 bottom-2 m-auto drop-shadow-lg"
+		class:recording
 	>
-		<img
-			style="color: white"
-			src="{static_src}/static/img/camera.svg"
-			alt="take a screenshot"
-			class="w-2/4 h-2/4"
-		/>
+		{#if !recording}
+			<img
+				style="color: white"
+				src="{static_src}/static/img/camera.svg"
+				alt="take a screenshot"
+				class="w-2/4 h-2/4"
+			/>
+		{/if}
 	</button>
 </div>
+
+<style lang="postcss">
+	button {
+		@apply bg-gray-700;
+	}
+	button.recording {
+		@apply bg-red-700 border-4 border-red-600;
+	}
+</style>

ui/packages/app/src/main.ts

@@ -51,6 +51,7 @@ interface Config {
 	space?: string;
 	detail: string;
 	dark: boolean;
+	auth_required: boolean;
 }
 
 window.launchGradio = (config: Config, element_query: string) => {
@@ -77,7 +78,7 @@ window.launchGradio = (config: Config, element_query: string) => {
 		style.innerHTML = config.css;
 		document.head.appendChild(style);
 	}
-	if (config.detail === "Not authenticated") {
+	if (config.detail === "Not authenticated" || config.auth_required) {
 		new Login({
 			target: target,
 			props: config