Merge pull request #423 from upscayl/suvojit/add-upscayl-cloud-modal

Add Upscayl Cloud alert and pop-up

.gitignore

@@ -6,6 +6,7 @@
 .pnp.js
 
 /main/*.js
+*.js
 
 # testing
 /coverage

package.json

@@ -177,6 +177,7 @@
     "electron-log": "^5.0.0-beta.16",
     "electron-next": "^3.1.5",
     "electron-updater": "^6.1.1",
+    "firebase": "^10.3.0",
     "jimp": "^0.22.8",
     "jotai": "^2.2.2",
     "react-compare-slider": "^2.2.0",

renderer/components/UpscaylCloudModal.tsx

@@ -0,0 +1,90 @@
+import { useState } from "react";
+import { waitlistCollection } from "../firebase";
+import { doc, setDoc } from "firebase/firestore";
+
+const nameRegex = /^[A-Za-z\s.'-]+$/;
+const emailRegex = /^[a-zA-Z0-9._%+-]+@[a-zA-Z0-9.-]+\.[a-zA-Z]{2,}$/;
+
+export const UpscaylCloudModal = ({ show, setShow }) => {
+  const [name, setName] = useState("");
+  const [email, setEmail] = useState("");
+
+  return (
+    <dialog className={`modal ${show && "modal-open"}`}>
+      <div className="modal-box flex flex-col text-center items-center gap-4">
+        <p className="badge badge-neutral text-xs">Coming soon!</p>
+        <p className="text-2xl font-semibold">Introducing Upscayl Cloud!</p>
+        <p className="w-9/12 font-medium text-lg">
+          No more errors, hardware issues, quality compromises or long loading
+          times!
+        </p>
+
+        <div className="flex flex-col gap-2 text-start">
+          <p>🌐 Upscayl anywhere, anytime, any device</p>
+          <p>☁️ No Graphics Card or hardware required</p>
+          <p>👩 Face Enhancement</p>
+          <p>🦋 10+ models to choose from</p>
+          <p>🏎 5x faster than Upscayl Desktop</p>
+          <p>🎞 Video Upscaling</p>
+          <p>💰 Commercial Usage</p>
+          <p>😴 Upscayl while you sleep</p>
+        </div>
+
+        <form
+          className="flex flex-col items-center gap-3"
+          onSubmit={async (e) => {
+            e.preventDefault();
+            if (
+              name &&
+              email &&
+              nameRegex.test(name) &&
+              emailRegex.test(email)
+            ) {
+              try {
+                await setDoc(doc(waitlistCollection, email), {
+                  name,
+                  email,
+                });
+              } catch (error) {
+                alert("Error joining the waitlist. Please try again...");
+                return;
+              }
+              setName("");
+              setEmail("");
+              alert(
+                "Thank you for joining the waitlist! We will notify you when Upscayl Cloud is ready for you."
+              );
+            } else {
+              alert("Please fill in all the fields correctly.");
+            }
+          }}>
+          <div className="gap-2 grid grid-cols-2">
+            <input
+              type="text"
+              className="input input-bordered"
+              placeholder="Name"
+              value={name}
+              onChange={(e) => setName(e.target.value)}
+            />
+            <input
+              type="email"
+              className="input input-bordered"
+              placeholder="Email"
+              value={email}
+              onChange={(e) => setEmail(e.target.value)}
+            />
+          </div>
+          <button
+            type="submit"
+            className="bg-success text-success-content rounded-2xl px-4 py-2">
+            Join the waitlist
+          </button>
+        </form>
+      </div>
+
+      <form method="dialog" className="modal-backdrop">
+        <button onClick={() => setShow(false)}>close</button>
+      </form>
+    </dialog>
+  );
+};

renderer/components/settings-tab/ThemeSelect.tsx

@@ -37,7 +37,7 @@ export function ThemeSelect() {
     <div className="flex flex-col gap-2">
       <p className="text-sm font-medium">UPSCAYL THEME</p>
       <select data-choose-theme className="select-primary select">
-        <option value="dark">Default</option>
+        <option value="upscayl">Default</option>
         {availableThemes.map((theme) => {
           return (
             <option value={theme.value} key={theme.value}>

renderer/components/upscayl-tab/config/LeftPaneImageSteps.tsx

@@ -1,10 +1,11 @@
 import { useAtomValue } from "jotai";
-import React, { useEffect, useState } from "react";
+import React, { useCallback, useEffect, useMemo, useState } from "react";
 import Select from "react-select";
 import { Tooltip } from "react-tooltip";
 import { themeChange } from "theme-change";
 import { modelsListAtom } from "../../../atoms/modelsListAtom";
 import useLog from "../../hooks/useLog";
+import { scaleAtom } from "../../../atoms/userSettingsAtom";
 
 interface IProps {
   progress: string;
@@ -55,6 +56,7 @@ function LeftPaneImageSteps({
   });
 
   const modelOptions = useAtomValue(modelsListAtom);
+  const scale = useAtomValue(scaleAtom);
 
   const { logit } = useLog();
 
@@ -104,30 +106,33 @@ function LeftPaneImageSteps({
     logit("🔀 Setting model to", currentModel.value);
   }, [currentModel]);
 
-  const getUpscaleResolution = () => {
+  const getUpscaleResolution = useCallback(() => {
+    console.log("running");
     const newDimensions = {
       width: dimensions.width,
       height: dimensions.height,
     };
-    if (doubleUpscayl) {
-      newDimensions.width = dimensions.width * 16;
-      newDimensions.height = dimensions.height * 16;
-    } else {
-      newDimensions.width = dimensions.width * 4;
-      newDimensions.height = dimensions.height * 4;
-    }
 
-    if (newDimensions.width > 32768) {
-      logit("🚫 Upscale width is too large, setting to a maximum of 32768px");
-      newDimensions.width = 32384;
-    }
-    if (newDimensions.height > 32768) {
-      logit("🚫 Upscale height is too large, setting to a maximum of 32768px");
-      newDimensions.height = 32384;
+    const doubleScale = parseInt(scale) * parseInt(scale);
+    const singleScale = parseInt(scale);
+
+    if (doubleUpscayl) {
+      const newWidth = dimensions.width * doubleScale;
+      const newHeight = dimensions.height * doubleScale;
+      if (newWidth < 32768 || newHeight < 32768) {
+        newDimensions.width = newWidth;
+        newDimensions.height = newHeight;
+      } else {
+        newDimensions.width = 32384;
+        newDimensions.height = 32384;
+      }
+    } else {
+      newDimensions.width = dimensions.width * singleScale;
+      newDimensions.height = dimensions.height * singleScale;
     }
 
     return newDimensions;
-  };
+  }, [dimensions.width, dimensions.height, doubleUpscayl, scale]);
 
   return (
     <div

renderer/firebase.ts

@@ -0,0 +1,32 @@
+// Import the functions you need from the SDKs you need
+import { initializeApp } from "firebase/app";
+import {
+  getFirestore,
+  type DocumentData,
+  CollectionReference,
+  collection,
+} from "firebase/firestore";
+
+// Your web app's Firebase configuration
+const firebaseConfig = {
+  apiKey: "AIzaSyBwD3AM0XKRsHnA0YU-CKTSSD4xcfDu9wU",
+  authDomain: "upscayl.firebaseapp.com",
+  projectId: "upscayl",
+  storageBucket: "upscayl.appspot.com",
+  messagingSenderId: "1096660154086",
+  appId: "1:1096660154086:web:ec1872e9ceb11dad686d27",
+};
+
+// Initialize Firebase
+const app = initializeApp(firebaseConfig);
+export const db = getFirestore(app);
+console.log("🚀 => file: firebase.ts:23 => db:", db);
+
+const createCollection = <T = DocumentData>(collectionName: string) => {
+  return collection(db, collectionName) as CollectionReference<T>;
+};
+
+export const waitlistCollection = createCollection<{
+  name: string;
+  email: string;
+}>("waitlist");

renderer/pages/_app.tsx

@@ -11,7 +11,7 @@ const MyApp = ({ Component, pageProps }: AppProps) => {
         <title>Upscayl</title>
       </Head>
       <Provider>
-        <Component {...pageProps} data-theme="dark" />
+        <Component {...pageProps} data-theme="upscayl" />
       </Provider>
     </>
   );

renderer/pages/index.tsx

@@ -14,6 +14,7 @@ import { logAtom } from "../atoms/logAtom";
 import { modelsListAtom } from "../atoms/modelsListAtom";
 import { batchModeAtom, scaleAtom } from "../atoms/userSettingsAtom";
 import useLog from "../components/hooks/useLog";
+import { UpscaylCloudModal } from "../components/UpscaylCloudModal";
 
 const Home = () => {
   // STATES
@@ -46,6 +47,8 @@ const Home = () => {
   const [modelOptions, setModelOptions] = useAtom(modelsListAtom);
   const [scale] = useAtom(scaleAtom);
 
+  const [showCloudModal, setShowCloudModal] = useState(true);
+
   const { logit } = useLog();
 
   // EFFECTS
@@ -449,11 +452,19 @@ const Home = () => {
   return (
     <div className="flex h-screen w-screen flex-row overflow-hidden bg-base-300">
       <div className={`flex h-screen w-128 flex-col bg-base-100`}>
+        <UpscaylCloudModal show={showCloudModal} setShow={setShowCloudModal} />
         {window.electron.platform === "mac" && (
           <div className="pt-8 mac-titlebar"></div>
         )}
         {/* HEADER */}
         <Header version={version} />
+        <button
+          className="mb-5 rounded-btn p-1 mx-5 bg-success shadow-lg shadow-success/40 text-slate-50 animate-pulse text-sm"
+          onClick={() => {
+            setShowCloudModal(true);
+          }}>
+          Introducing Upscayl Cloud
+        </button>
 
         <Tabs selectedTab={selectedTab} setSelectedTab={setSelectedTab} />
 

renderer/tsconfig.json

@@ -13,7 +13,11 @@
     "moduleResolution": "node",
     "resolveJsonModule": true,
     "isolatedModules": true,
-    "jsx": "preserve"
+    "jsx": "preserve",
+    "paths": {
+      "@/*": ["./src/*"],
+      "@common/*": ["../common/*"]
+    }
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx", "../app.module.ts"],
   "exclude": ["node_modules"]

tsconfig.json

@@ -26,7 +26,7 @@
 
     /* Modules */
     "module": "commonjs" /* Specify what module code is generated. */,
-    "rootDir": "./electron" /* Specify the root folder within your source files. */,
+    "rootDir": "./" /* Specify the root folder within your source files. */,
     // "moduleResolution": "node",                       /* Specify how TypeScript looks up a file from a given module specifier. */
     // "baseUrl": "./",                                  /* Specify the base directory to resolve non-relative module names. */
     // "paths": {},                                      /* Specify a set of entries that re-map imports to additional lookup locations. */