Fix scale issue

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) {
+    const doubleScale = parseInt(scale) * parseInt(scale);
-      logit("🚫 Upscale width is too large, setting to a maximum of 32768px");
+    const singleScale = parseInt(scale);
-      newDimensions.width = 32384;
+
-    }
+    if (doubleUpscayl) {
-    if (newDimensions.height > 32768) {
+      const newWidth = dimensions.width * doubleScale;
-      logit("🚫 Upscale height is too large, setting to a maximum of 32768px");
+      const newHeight = dimensions.height * doubleScale;
-      newDimensions.height = 32384;
+      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/pages/index.tsx

@@ -451,20 +451,23 @@ const Home = () => {
 
   return (
     <div className="flex h-screen w-screen flex-row overflow-hidden bg-base-300">
-<<<<<<< HEAD
-      <div className="flex h-screen w-128 flex-col rounded-r-3xl bg-base-100">
-        <UpscaylCloudModal show={showCloudModal} setShow={setShowCloudModal} />
-=======
       <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>
         )}
->>>>>>> origin/main
         {/* HEADER */}
         <div className="flex flex-row items-center">
           <Header version={version} />
-          <button className="rounded-full bg-violet-500 font-bold text-slate-200 animate-pulse duration-75 w-8 h-8" onClick={() => {setShowCloudModal(true)}}>U</button>
         </div>
+        <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} />
 
         {selectedTab === 0 && (