Addded image dimensions

renderer/components/LeftPaneImageSteps.tsx

@@ -24,6 +24,11 @@ interface IProps {
   setSaveImageAs: (arg: string) => void;
   gpuId: string;
   setGpuId: (arg: string) => void;
+  leftImageRef: any;
+  dimensions: {
+    width: number | null;
+    height: number | null;
+  };
 }
 
 function LeftPaneImageSteps({
@@ -47,6 +52,7 @@ function LeftPaneImageSteps({
   setGpuId,
   saveImageAs,
   setSaveImageAs,
+  dimensions,
 }: IProps) {
   useEffect(() => {
     themeChange(false);
@@ -130,6 +136,8 @@ function LeftPaneImageSteps({
     { label: "winter", value: "winter" },
   ];
 
+  useEffect(() => {}, [imagePath]);
+
   return (
     <div className="animate-step-in animate flex h-screen flex-col gap-7 overflow-y-auto p-5 overflow-x-hidden">
       {/* BATCH OPTION */}
@@ -214,6 +222,18 @@ function LeftPaneImageSteps({
       {/* STEP 4 */}
       <div className="animate-step-in">
         <p className="step-heading">Step 4</p>
+        {dimensions.width && dimensions.height && (
+          <p className="mb-2 text-sm">
+            Upscale from{" "}
+            <span className="font-bold">
+              {dimensions.width}x{dimensions.height}
+            </span>{" "}
+            to{" "}
+            <span className="font-bold">
+              {dimensions.width * 4}x{dimensions.height * 4}
+            </span>
+          </p>
+        )}
         <button
           className="btn-accent btn"
           onClick={upscaylHandler}
@@ -228,7 +248,7 @@ function LeftPaneImageSteps({
           <div className="collapse-content flex flex-col gap-4 bg-neutral text-neutral-content peer-checked:bg-base-300 peer-checked:py-4 peer-checked:text-base-content">
             <div className="flex flex-col gap-2">
               <p>Save Image As:</p>
-              <div className="flex gap-2">
+              <div className="flex flex-wrap gap-2">
                 <button
                   className={`btn-primary btn ${
                     saveImageAs === "png" && "btn-accent"

renderer/pages/index.tsx

@@ -18,7 +18,7 @@ const Home = () => {
   const [outputPath, setOutputPath] = useState("");
   const [scaleFactor, setScaleFactor] = useState(4);
   const [progress, setProgress] = useState("");
-  const [model, setModel] = useState("remacri");
+  const [model, setModel] = useState("realesrgan-x4plus");
   const [loaded, setLoaded] = useState(false);
   const [version, setVersion] = useState("");
   const [batchMode, setBatchMode] = useState(false);
@@ -33,6 +33,10 @@ const Home = () => {
   const [saveImageAs, setSaveImageAs] = useState("png");
   const [zoomAmount, setZoomAmount] = useState("200%");
   const [backgroundPosition, setBackgroundPosition] = useState("0% 0%");
+  const [dimensions, setDimensions] = useState({
+    width: null,
+    height: null,
+  });
 
   // REFS
   const leftImageRef = useRef();
@@ -174,6 +178,10 @@ const Home = () => {
   }, [imagePath, videoPath]);
 
   const resetImagePaths = () => {
+    setDimensions({
+      width: null,
+      height: null,
+    });
     setProgress("");
 
     SetImagePath("");
@@ -229,6 +237,13 @@ const Home = () => {
     }
   };
 
+  const imageLoadHandler = ({ target: img }) => {
+    const image = img;
+    console.log("imageLoadHandler", {
+      image,
+    });
+  };
+
   const handleModelChange = (e) => {
     setModel(e.value);
     if (e.value === "models-DF2K") {
@@ -436,6 +451,7 @@ const Home = () => {
             setGpuId={setGpuId}
             saveImageAs={saveImageAs}
             setSaveImageAs={setSaveImageAs}
+            dimensions={dimensions}
           />
         )}
         <Footer />
@@ -489,6 +505,12 @@ const Home = () => {
                 "file://" +
                 `${upscaledImagePath ? upscaledImagePath : imagePath}`
               }
+              onLoad={(e: any) => {
+                setDimensions({
+                  width: e.target.naturalWidth,
+                  height: e.target.naturalHeight,
+                });
+              }}
               draggable="false"
               alt=""
             />
@@ -545,8 +567,6 @@ const Home = () => {
                         backgroundPosition: "0% 10%",
                         transformOrigin: backgroundPosition,
                       }}
-                      onMouseMove={handleMouseMove}
-                      ref={leftImageRef}
                       className={`h-full w-full bg-[#1d1c23] transition-transform group-hover:scale-[${zoomAmount}]`}
                     />
                   </>