From 21b63169963b1d906e6d042dedfe60fc205c1a52 Mon Sep 17 00:00:00 2001
From: Manav Rathi <manav@mrmr.io>
Date: Thu, 11 Jul 2024 20:19:01 +0530
Subject: [PATCH] Disable ML for everyone while it is WIP

Preparing for merge and the interim release
---
 .../components/Sidebar/AdvancedSettings.tsx   | 36 ++++++++++-
 .../new/photos/components/MLSettingsBeta.tsx  | 60 +++++++++++++++++++
 web/packages/new/photos/services/ml/index.ts  | 13 +++-
 3 files changed, 107 insertions(+), 2 deletions(-)
 create mode 100644 web/packages/new/photos/components/MLSettingsBeta.tsx

diff --git a/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx b/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx
index 5810834636..5dfd95b30c 100644
--- a/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx
+++ b/web/apps/photos/src/components/Sidebar/AdvancedSettings.tsx
@@ -1,15 +1,27 @@
+import { MLSettingsBeta } from "@/new/photos/components/MLSettingsBeta";
+import { canEnableML } from "@/new/photos/services/ml";
 import { EnteDrawer } from "@/new/shared/components/EnteDrawer";
 import { MenuItemGroup, MenuSectionTitle } from "@/new/shared/components/Menu";
 import { Titlebar } from "@/new/shared/components/Titlebar";
+import { isDesktop } from "@/next/app";
+import { pt } from "@/next/i18n";
 import { EnteMenuItem } from "@ente/shared/components/Menu/EnteMenuItem";
+import ChevronRight from "@mui/icons-material/ChevronRight";
+import ScienceIcon from "@mui/icons-material/Science";
 import { Box, DialogProps, Stack } from "@mui/material";
 import { t } from "i18next";
 import { AppContext } from "pages/_app";
-import { useContext } from "react";
+import { useContext, useEffect, useState } from "react";
 
 export default function AdvancedSettings({ open, onClose, onRootClose }) {
     const appContext = useContext(AppContext);
 
+    const [showMLSettings, setShowMLSettings] = useState(false);
+    const [openMLSettings, setOpenMLSettings] = useState(false);
+
+    useEffect(() => {
+        if (isDesktop) void canEnableML().then(setShowMLSettings);
+    }, []);
     const handleRootClose = () => {
         onClose();
         onRootClose();
@@ -59,8 +71,30 @@ export default function AdvancedSettings({ open, onClose, onRootClose }) {
                             />
                         </Box>
                     </Stack>
+
+                    {showMLSettings && (
+                        <Box>
+                            <MenuSectionTitle
+                                title={t("LABS")}
+                                icon={<ScienceIcon />}
+                            />
+                            <MenuItemGroup>
+                                <EnteMenuItem
+                                    endIcon={<ChevronRight />}
+                                    onClick={() => setOpenMLSettings(true)}
+                                    label={pt("ML search")}
+                                />
+                            </MenuItemGroup>
+                        </Box>
+                    )}
                 </Box>
             </Stack>
+
+            <MLSettingsBeta
+                open={openMLSettings}
+                onClose={() => setOpenMLSettings(false)}
+                onRootClose={handleRootClose}
+            />
         </EnteDrawer>
     );
 }
diff --git a/web/packages/new/photos/components/MLSettingsBeta.tsx b/web/packages/new/photos/components/MLSettingsBeta.tsx
new file mode 100644
index 0000000000..8e50a6119a
--- /dev/null
+++ b/web/packages/new/photos/components/MLSettingsBeta.tsx
@@ -0,0 +1,60 @@
+import { EnteDrawer } from "@/new/shared/components/EnteDrawer";
+import { Titlebar } from "@/new/shared/components/Titlebar";
+import { pt, ut } from "@/next/i18n";
+import { Box, Stack, Typography, type DialogProps } from "@mui/material";
+import React from "react";
+
+interface MLSettingsBetaProps {
+    /** If `true`, then this drawer page is shown. */
+    open: boolean;
+    /** Called when the user wants to go back from this drawer page. */
+    onClose: () => void;
+    /** Called when the user wants to close the entire stack of drawers. */
+    onRootClose: () => void;
+}
+
+export const MLSettingsBeta: React.FC<MLSettingsBetaProps> = ({
+    open,
+    onClose,
+    onRootClose,
+}) => {
+    const handleRootClose = () => {
+        onClose();
+        onRootClose();
+    };
+
+    const handleDrawerClose: DialogProps["onClose"] = (_, reason) => {
+        if (reason == "backdropClick") handleRootClose();
+        else onClose();
+    };
+
+    return (
+        <Box>
+            <EnteDrawer
+                anchor="left"
+                transitionDuration={0}
+                open={open}
+                onClose={handleDrawerClose}
+                BackdropProps={{
+                    sx: { "&&&": { backgroundColor: "transparent" } },
+                }}
+            >
+                <Stack spacing={"4px"} py={"12px"}>
+                    <Titlebar
+                        onClose={onClose}
+                        title={pt("ML search")}
+                        onRootClose={onRootClose}
+                    />
+
+                    <Box px="8px">
+                        <Typography color="text.muted">
+                            {ut(
+                                "We're putting finishing touches, coming back soon!",
+                            )}
+                        </Typography>
+                    </Box>
+                </Stack>
+            </EnteDrawer>
+        </Box>
+    );
+};
diff --git a/web/packages/new/photos/services/ml/index.ts b/web/packages/new/photos/services/ml/index.ts
index 54eaac31ae..64571f1de0 100644
--- a/web/packages/new/photos/services/ml/index.ts
+++ b/web/packages/new/photos/services/ml/index.ts
@@ -10,6 +10,7 @@ import { ensureElectron } from "@/next/electron";
 import log from "@/next/log";
 import { ComlinkWorker } from "@/next/worker/comlink-worker";
 import { proxy } from "comlink";
+import { isBetaUser, isInternalUser } from "../feature-flags";
 import { getRemoteFlag, updateRemoteFlag } from "../remote-store";
 import type { UploadItem } from "../upload/types";
 import { regenerateFaceCrops } from "./crop";
@@ -103,7 +104,17 @@ export const terminateMLWorker = () => {
  *
  * ML currently only works when we're running in our desktop app.
  */
-export const isMLSupported = isDesktop;
+// TODO-ML:
+export const isMLSupported =
+    isDesktop && process.env.NEXT_PUBLIC_ENTE_ENABLE_WIP_ML;
+
+/**
+ * Was this someone who might've enabled the beta ML? If so, show them the
+ * coming back soon banner while we finalize it.
+ * TODO-ML:
+ */
+export const canEnableML = async () =>
+    (await isInternalUser()) || (await isBetaUser());
 
 /**
  * Initialize the ML subsystem if the user has enabled it in preferences.