Added image options

renderer/components/ImageOptions.tsx

@@ -3,15 +3,13 @@ import React, { useEffect } from "react";
 const ImageOptions = ({
   zoomAmount,
   setZoomAmount,
-  leftImageRef,
-  rightImageRef,
   resetImagePaths,
+  hideZoomOptions,
 }: {
   zoomAmount: string;
   setZoomAmount: (arg: any) => void;
-  leftImageRef: React.RefObject<HTMLImageElement>;
-  rightImageRef: React.RefObject<HTMLImageElement>;
   resetImagePaths: () => void;
+  hideZoomOptions?: boolean;
 }) => {
   useEffect(() => {
     if (!localStorage.getItem("zoomAmount")) {
@@ -22,7 +20,7 @@ const ImageOptions = ({
   }, []);
 
   return (
-    <div className="animate rounded-btn collapse absolute top-0 z-50 m-2 opacity-25 hover:opacity-100">
+    <div className="animate rounded-btn collapse absolute top-1 z-50 m-2 opacity-25 hover:opacity-100">
       <input type="checkbox" className="peer" />
       <div className="collapse-title bg-base-100 text-center text-sm font-semibold uppercase text-primary-content peer-checked:bg-base-300 peer-checked:text-base-content">
         Show/Hide Image Settings
@@ -33,6 +31,7 @@ const ImageOptions = ({
           <button className="btn-primary btn" onClick={resetImagePaths}>
             Reset Image
           </button>
+          {!hideZoomOptions && (
             <div className="flex flex-row items-center gap-2">
               <p className="w-20">Zoom:</p>
               <button
@@ -86,6 +85,7 @@ const ImageOptions = ({
                 200%
               </button>
             </div>
+          )}
         </div>
       </div>
     </div>

renderer/components/LeftPaneImageSteps.tsx

@@ -24,7 +24,6 @@ interface IProps {
   setSaveImageAs: (arg: string) => void;
   gpuId: string;
   setGpuId: (arg: string) => void;
-  leftImageRef: any;
   dimensions: {
     width: number | null;
     height: number | null;
@@ -230,7 +229,8 @@ function LeftPaneImageSteps({
             </span>{" "}
             to{" "}
             <span className="font-bold">
-              {dimensions.width * 4}x{dimensions.height * 4}
+              {doubleUpscayl ? dimensions.width * 8 : dimensions.width * 4}x
+              {doubleUpscayl ? dimensions.height * 8 : dimensions.height * 4}
             </span>
           </p>
         )}

renderer/pages/index.tsx

@@ -499,8 +499,14 @@ const Home = () => {
           !isVideo &&
           upscaledImagePath.length === 0 &&
           imagePath.length > 0 && (
+            <>
+              <ImageOptions
+                zoomAmount={zoomAmount}
+                setZoomAmount={setZoomAmount}
+                resetImagePaths={resetImagePaths}
+                hideZoomOptions={true}
+              />
               <img
-              className="h-full w-full object-contain"
                 src={
                   "file://" +
                   `${upscaledImagePath ? upscaledImagePath : imagePath}`
@@ -513,7 +519,9 @@ const Home = () => {
                 }}
                 draggable="false"
                 alt=""
+                className={`h-full w-full bg-[#1d1c23] object-contain`}
               />
+            </>
           )}
 
         {/* BATCH UPSCALE SHOW SELECTED FOLDER */}
@@ -562,9 +570,10 @@ const Home = () => {
                     <img
                       src={"file://" + imagePath}
                       alt="Original"
+                      onMouseMove={handleMouseMove}
                       style={{
                         objectFit: "contain",
-                        backgroundPosition: "0% 10%",
+                        backgroundPosition: "0% 0%",
                         transformOrigin: backgroundPosition,
                       }}
                       className={`h-full w-full bg-[#1d1c23] transition-transform group-hover:scale-[${zoomAmount}]`}
@@ -581,7 +590,7 @@ const Home = () => {
                       alt="Upscayl"
                       style={{
                         objectFit: "contain",
-                        backgroundPosition: "0% 10%",
+                        backgroundPosition: "0% 0%",
                         transformOrigin: backgroundPosition,
                       }}
                       onMouseMove={handleMouseMove}