Spaces:

radames
/

Real-Time-Latent-Consistency-Model

Sleeping

App Files Files Community

radames commited on Jun 7, 2024

Commit

1ea3019

1 Parent(s): fe66ec6

toggle fullscreen input video

Browse files

Files changed (3) hide show

frontend/.gitignore +1 -0
frontend/src/lib/components/VideoInput.svelte +20 -1
frontend/src/lib/utils.ts +49 -38

frontend/.gitignore CHANGED Viewed

@@ -8,3 +8,4 @@ node_modules
 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*

 !.env.example
 vite.config.js.timestamp-*
 vite.config.ts.timestamp-*
+public

frontend/src/lib/components/VideoInput.svelte CHANGED Viewed

@@ -10,6 +10,8 @@
     mediaDevices
   } from '$lib/mediaStream';
   import MediaListSwitcher from './MediaListSwitcher.svelte';
   export let width = 512;
   export let height = 512;
@@ -74,13 +76,30 @@
   $: if ($mediaStreamStatus == MediaStreamStatusEnum.CONNECTED && videoIsReady) {
     videoFrameCallbackId = videoEl.requestVideoFrameCallback(onFrameChange);
   }
 </script>
 <div class="relative mx-auto max-w-lg overflow-hidden rounded-lg border border-slate-300">
   <div class="relative z-10 flex aspect-square w-full items-center justify-center object-cover">
     {#if $mediaDevices.length > 0}
-      <div class="absolute bottom-0 right-0 z-10 w-full bg-slate-400 bg-opacity-40">
         <MediaListSwitcher />
       </div>
     {/if}
     <video

     mediaDevices
   } from '$lib/mediaStream';
   import MediaListSwitcher from './MediaListSwitcher.svelte';
+  import Button from '$lib/components/Button.svelte';
+  import Expand from '$lib/icons/expand.svelte';
   export let width = 512;
   export let height = 512;
   $: if ($mediaStreamStatus == MediaStreamStatusEnum.CONNECTED && videoIsReady) {
     videoFrameCallbackId = videoEl.requestVideoFrameCallback(onFrameChange);
   }
+  function toggleFullscreen() {
+    if (videoIsReady) {
+      if (document.fullscreenElement) {
+        document.exitFullscreen();
+      } else {
+        videoEl.requestFullscreen();
+      }
+    }
+  }
 </script>
 <div class="relative mx-auto max-w-lg overflow-hidden rounded-lg border border-slate-300">
   <div class="relative z-10 flex aspect-square w-full items-center justify-center object-cover">
     {#if $mediaDevices.length > 0}
+      <div class="absolute bottom-0 right-0 z-10 flex bg-slate-400 bg-opacity-40">
         <MediaListSwitcher />
+        <Button
+          on:click={toggleFullscreen}
+          title={'Expand Fullscreen'}
+          classList={'text-sm ml-auto text-white p-1 shadow-lg rounded-lg opacity-50'}
+        >
+          <Expand classList={''} />
+        </Button>
       </div>
     {/if}
     <video

frontend/src/lib/utils.ts CHANGED Viewed

@@ -6,6 +6,10 @@ interface IImageInfo {
   seed?: number;
   guidance_scale?: number;
 }
 export function snapImage(imageEl: HTMLImageElement, info: IImageInfo) {
   try {
@@ -39,49 +43,56 @@ export function snapImage(imageEl: HTMLImageElement, info: IImageInfo) {
   }
 }
-export function expandWindow(streamURL: string): Window {
-  const html = `
-    <html>
-        <head>
-            <title>Real-Time Latent Consistency Model</title>
-            <style>
-                body {
-                    margin: 0;
-                    padding: 0;
-                    background-color: black;
-                }
-            </style>
-        </head>
-        <body>
-            <script>
-                let isFullscreen = false;
-                window.onkeydown = function(event) {
-                    switch (event.code) {
-                        case "Escape":
-                            window.close();
-                            break;
-                        case "Enter":
-                            if (isFullscreen) {
-                                document.exitFullscreen();
-                                isFullscreen = false;
-                            } else {
-                                document.documentElement.requestFullscreen();
-                                isFullscreen = true;
-                            }
-                            break;
-                    }
-                }
-            </script>
-            <img src="${streamURL}" style="width: 100%; height: 100%; object-fit: contain;" />
-        </body>
-    </html>
-    `;
   const newWindow = window.open(
     '',
     '_blank',
     'width=1024,height=1024,scrollbars=0,resizable=1,toolbar=0,menubar=0,location=0,directories=0,status=0'
   ) as Window;
   newWindow.document.write(html);
   return newWindow;
 }

   seed?: number;
   guidance_scale?: number;
 }
+export enum windowType {
+  image = 'image',
+  video = 'video'
+}
 export function snapImage(imageEl: HTMLImageElement, info: IImageInfo) {
   try {
   }
 }
+export function expandWindow(streamURL: string, type: windowType = windowType.image) {
   const newWindow = window.open(
     '',
     '_blank',
     'width=1024,height=1024,scrollbars=0,resizable=1,toolbar=0,menubar=0,location=0,directories=0,status=0'
   ) as Window;
+  const html = `
+      <html>
+          <head>
+              <title>Real-Time Latent Consistency Model</title>
+              <style>
+                  body {
+                      margin: 0;
+                      padding: 0;
+                      background-color: black;
+                  }
+              </style>
+          </head>
+          <body>
+              <script>
+                  let isFullscreen = false;
+                  window.onkeydown = function(event) {
+                      switch (event.code) {
+                          case "Escape":
+                              window.close();
+                              break;
+                          case "Enter":
+                              if (isFullscreen) {
+                                  document.exitFullscreen();
+                                  isFullscreen = false;
+                              } else {
+                                  document.documentElement.requestFullscreen();
+                                  isFullscreen = true;
+                              }
+                              break;
+                      }
+                  }
+              </script>
+          </body>
+      </html>
+      `;
   newWindow.document.write(html);
+  const img = newWindow.document.createElement('img');
+  img.src = streamURL;
+  img.style.width = '100%';
+  img.style.height = '100%';
+  img.style.objectFit = 'contain';
+  newWindow.document.body.appendChild(img);
   return newWindow;
 }