add image size on left corner

lama_cleaner/app/src/components/ImageSize/ImageSize.scss

@@ -0,0 +1,5 @@
+.imageSize {
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+  padding: 8px 8px;
+}

lama_cleaner/app/src/components/ImageSize/ImageSize.tsx

@@ -0,0 +1,20 @@
+import React from 'react'
+import { useRecoilValue } from 'recoil'
+import { imageHeightState, imageWidthState } from '../../store/Atoms'
+
+const ImageSize = () => {
+  const imageWidth = useRecoilValue(imageWidthState)
+  const imageHeight = useRecoilValue(imageHeightState)
+
+  if (!imageWidth || !imageHeight) {
+    return null
+  }
+
+  return (
+    <div className="imageSize">
+      {imageWidth}x{imageHeight}
+    </div>
+  )
+}
+
+export default ImageSize

lama_cleaner/app/src/components/Plugins/Plugins.scss

@@ -1,9 +1,9 @@
 @use '../../styles/Mixins/' as *;
 
 .plugins {
-  position: absolute;
+  // position: absolute;
-  top: 68px;
+  // top: 68px;
-  left: 24px;
+  // left: 24px;
   z-index: 4;
   border: 1px solid var(--border-color);
   border-radius: 8px;

lama_cleaner/app/src/components/Workspace.tsx

@@ -25,6 +25,8 @@ import PESidePanel from './SidePanel/PESidePanel'
 import FileManager from './FileManager/FileManager'
 import P2PSidePanel from './SidePanel/P2PSidePanel'
 import Plugins from './Plugins/Plugins'
+import Flex from './shared/Layout'
+import ImageSize from './ImageSize/ImageSize'
 
 const Workspace = () => {
   const setFile = useSetRecoilState(fileState)
@@ -103,7 +105,10 @@ const Workspace = () => {
       {isSD ? <SidePanel /> : <></>}
       {isPaintByExample ? <PESidePanel /> : <></>}
       {isPix2Pix ? <P2PSidePanel /> : <></>}
-      <Plugins />
+      <Flex style={{ position: 'absolute', top: 68, left: 24, gap: 12 }}>
+        <Plugins />
+        <ImageSize />
+      </Flex>
       <FileManager
         photoWidth={256}
         show={showFileManager}

lama_cleaner/app/src/styles/_index.scss

@@ -10,6 +10,7 @@
 @use '../components/FileManager/FileManager';
 @use '../components/LandingPage/LandingPage';
 @use '../components/Header/Header';
+@use '../components/ImageSize/ImageSize.scss';
 @use '../components/Header/PromptInput';
 @use '../components/Header/ThemeChanger';
 @use '../components/Shortcuts/Shortcuts';