Merge changes from main branch and build client

nerfstudio-project · Jul 5, 2023 · ec1ee85 · ec1ee85
2 parents 4412699 + 3b3f420
commit ec1ee85
Show file tree

Hide file tree

Showing 7 changed files with 378 additions and 335 deletions.
diff --git a/examples/13_theming.py b/examples/13_theming.py
@@ -28,7 +28,8 @@
     ),
 )
 image = TitlebarImage(
-    image_url="https://docs.nerf.studio/en/latest/_static/imgs/logo.png",
+    image_url_light="https://docs.nerf.studio/en/latest/_static/imgs/logo.png",
+    image_url_dark="https://docs.nerf.studio/en/latest/_static/imgs/logo-dark.png",
     image_alt="NerfStudio Logo",
     href="https://docs.nerf.studio/",
 )

diff --git a/viser/client/build/assets/index-9d7c6d5e.js → viser/client/build/assets/index-730c9cfb.js b/viser/client/build/assets/index-9d7c6d5e.js → viser/client/build/assets/index-730c9cfb.js
diff --git a/viser/client/build/index.html b/viser/client/build/index.html
@@ -16,12 +16,12 @@
     -->
     <link rel="manifest" href="/manifest.json" />
     <title>Viser</title>
-    <script type="module" crossorigin src="/assets/index-9d7c6d5e.js"></script>
+    <script type="module" crossorigin src="/assets/index-730c9cfb.js"></script>
     <link rel="stylesheet" href="/assets/index-a02dfc21.css">
   </head>
   <body>
     <noscript>You need to enable JavaScript to run this app.</noscript>
     <div id="root"></div>
-    
+
   </body>
 </html>
diff --git a/viser/client/src/ControlPanel/Server.tsx b/viser/client/src/ControlPanel/Server.tsx
@@ -36,32 +36,57 @@ export default function ServerControls() {
         />
         <Button
           onClick={async () => {
-            viewer.canvasRef.current?.toBlob(async (blob) => {
-              if (blob === null) {
-                console.error("Render failed!");
-                return;
-              }
+            const supportsFileSystemAccess =
+              "showSaveFilePicker" in window &&
+              (() => {
+                try {
+                  return window.self === window.top;
+                } catch {
+                  return false;
+                }
+              })();
 
-              let handle = null;
-              try {
-                handle = await showSaveFilePicker({
-                  suggestedName: "render.png",
-                  types: [
-                    {
-                      accept: { "image/png": [".png"] },
-                    },
-                  ],
-                });
-              } catch (e) {
-                console.log(e);
-              }
+            if (supportsFileSystemAccess) {
+              // File System Access API is supported. (eg Chrome)
+              const fileHandlePromise = window.showSaveFilePicker({
+                suggestedName: "render.png",
+                types: [
+                  {
+                    accept: { "image/png": [".png"] },
+                  },
+                ],
+              });
+              viewer.canvasRef.current?.toBlob(async (blob) => {
+                if (blob === null) {
+                  console.error("Export failed");
+                  return;
+                }
 
-              if (handle) {
+                const handle = await fileHandlePromise;
                 const writableStream = await handle.createWritable();
                 await writableStream.write(blob);
                 await writableStream.close();
-              }
-            });
+              });
+            } else {
+              // File System Access API is not supported. (eg Firefox)
+              viewer.canvasRef.current?.toBlob((blob) => {
+                if (blob === null) {
+                  console.error("Export failed");
+                  return;
+                }
+                const href = URL.createObjectURL(blob);
+
+                // Download a file by creating a link and then clicking it.
+                const link = document.createElement("a");
+                link.href = href;
+                const filename = "render.png";
+                link.download = filename;
+                document.body.appendChild(link);
+                link.click();
+                document.body.removeChild(link);
+                URL.revokeObjectURL(href);
+              });
+            }
           }}
           fullWidth
           leftIcon={<IconPhoto size="1rem" />}

diff --git a/viser/client/src/Titlebar.tsx b/viser/client/src/Titlebar.tsx
@@ -1,6 +1,6 @@
 import { ViewerContext } from ".";
 import { ThemeConfigurationMessage } from "./WebsocketMessages";
-import { Burger, Button, Container, Group, Header, Paper } from "@mantine/core";
+import { Burger, Button, Container, Group, Header, Paper, MantineTheme, useMantineTheme } from "@mantine/core";
 import {
   IconBrandGithub,
   IconFileDescription,
@@ -85,17 +85,27 @@ export function MobileTitlebarButton(
   );
 }
 
-export function TitlebarImage(props: NoNull<TitlebarContent["image"]>) {
+export function TitlebarImage(
+  props: NoNull<TitlebarContent["image"]>,
+  theme: MantineTheme
+) {
+  let imageSource: string;
+  if (props.image_url_dark == null || theme.colorScheme == "light") {
+    imageSource = props.image_url_light;
+  } else {
+    imageSource = props.image_url_dark;
+  }
   const image = (
     <img
-      src={props.image_url}
+      src={imageSource}
       alt={props.image_alt}
       style={{
         height: "1.8em",
         margin: "0 0.5em",
       }}
     />
   );
+
   if (props.href == null) {
     return image;
   }
@@ -105,6 +115,7 @@ export function TitlebarImage(props: NoNull<TitlebarContent["image"]>) {
 export function Titlebar() {
   const viewer = useContext(ViewerContext)!;
   const content = viewer.useGui((state) => state.theme.titlebar_content);
+  const theme = useMantineTheme();
 
   const [burgerOpen, burgerHandlers] = useDisclosure(false);
 
@@ -129,7 +140,7 @@ export function Titlebar() {
         alignItems: "center"
       })}>
         <Group sx={() => ({ marginRight: "auto" })}>
-          {imageData !== null ? TitlebarImage(imageData) : null}
+          {imageData !== null ? TitlebarImage(imageData, theme) : null}
         </Group>
         <Group sx={() => ({
           flexWrap: 'nowrap',

diff --git a/viser/client/src/WebsocketMessages.tsx b/viser/client/src/WebsocketMessages.tsx
@@ -298,7 +298,12 @@ export interface ThemeConfigurationMessage {
           href: string | null;
         }[]
       | null;
-    image: { image_url: string; image_alt: string; href: string | null } | null;
+    image: {
+      image_url_light: string;
+      image_url_dark: string | null;
+      image_alt: string;
+      href: string | null;
+    } | null;
   } | null;
   fixed_sidebar: boolean;
 }

diff --git a/viser/theme/_titlebar.py b/viser/theme/_titlebar.py
@@ -12,7 +12,8 @@ class TitlebarButton(TypedDict):
 class TitlebarImage(TypedDict):
     """An image that appears on the titlebar."""
 
-    image_url: str
+    image_url_light: str
+    image_url_dark: Optional[str]
     image_alt: str
     href: Optional[str]