From 185e184f4d1acaf95cba9a68612209a2e083876b Mon Sep 17 00:00:00 2001 From: aliabid94 Date: Tue, 8 Mar 2022 00:18:04 -0600 Subject: [PATCH] More fixes (#788) * frontend fixes * format fix * first commit * more fixes * fixes * updated PyPi version to 2.8.8 * changes Co-authored-by: Ali Abid --- gradio.egg-info/PKG-INFO | 2 +- gradio/version.txt | 2 +- setup.py | 2 +- .../src/components/input/Image/Image.svelte | 6 +- .../src/components/input/Video/Video.svelte | 9 ++ .../app/src/components/utils/Webcam.svelte | 87 +++++++++++++++---- ui/packages/app/src/main.ts | 3 +- 7 files changed, 88 insertions(+), 23 deletions(-) diff --git a/gradio.egg-info/PKG-INFO b/gradio.egg-info/PKG-INFO index f378a4da8b704..1653834058408 100644 --- a/gradio.egg-info/PKG-INFO +++ b/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 diff --git a/gradio/version.txt b/gradio/version.txt index d45e55c217915..c3e2bd4cc136f 100644 --- a/gradio/version.txt +++ b/gradio/version.txt @@ -1 +1 @@ -2.8.7 \ No newline at end of file +2.8.8 \ No newline at end of file diff --git a/setup.py b/setup.py index 3594c99f5befc..f7e95a95a88c4 100644 --- a/setup.py +++ b/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", diff --git a/ui/packages/app/src/components/input/Image/Image.svelte b/ui/packages/app/src/components/input/Image/Image.svelte index 0d361796c7e4c..7b2d02f8b3a23 100644 --- a/ui/packages/app/src/components/input/Image/Image.svelte +++ b/ui/packages/app/src/components/input/Image/Image.svelte @@ -66,7 +66,11 @@ {$_("interface.click_to_upload")} {:else if source === "webcam"} - setValue(detail)} {static_src} /> + setValue(detail)} + {static_src} + /> {/if} {:else if tool === "select"} setValue(detail)} /> diff --git a/ui/packages/app/src/components/input/Video/Video.svelte b/ui/packages/app/src/components/input/Video/Video.svelte index 319c71a1fc17d..5f591d0149a30 100644 --- a/ui/packages/app/src/components/input/Video/Video.svelte +++ b/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 @@
- {$_("interface.or")} -
{$_("interface.click_to_upload")} + {:else if source === "webcam"} + { + setValue(detail); + }} + {static_src} + /> {/if} {:else} setValue(null)} {theme} {static_src} /> diff --git a/ui/packages/app/src/components/utils/Webcam.svelte b/ui/packages/app/src/components/utils/Webcam.svelte index 17410dde49ff8..197d4d2b37c2b 100644 --- a/ui/packages/app/src/components/utils/Webcam.svelte +++ b/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();
+ + diff --git a/ui/packages/app/src/main.ts b/ui/packages/app/src/main.ts index c51de8d57afd0..4ce22b66effc3 100644 --- a/ui/packages/app/src/main.ts +++ b/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