add maskPreview

lama_cleaner/app/src/components/Header/Header.scss

@@ -32,3 +32,12 @@ header {
   gap: 6px;
   justify-self: end;
 }
+
+.mask-preview {
+  max-height: 400px;
+  max-width: 400px;
+  margin-top: 30px;
+  margin-left: 20px;
+  border: 1px solid var(--border-color);
+  border-radius: 8px;
+}

lama_cleaner/app/src/components/Header/Header.tsx

@@ -2,12 +2,13 @@ import { ArrowUpTrayIcon } from '@heroicons/react/24/outline'
 import { PlayIcon } from '@radix-ui/react-icons'
 import React, { useState } from 'react'
 import { useRecoilState, useRecoilValue } from 'recoil'
+import * as PopoverPrimitive from '@radix-ui/react-popover'
 import {
   fileState,
-  interactiveSegClicksState,
   isInpaintingState,
   isSDState,
   maskState,
+  runManuallyState,
 } from '../../store/Atoms'
 import Button from '../shared/Button'
 import Shortcuts from '../Shortcuts/Shortcuts'
@@ -16,14 +17,18 @@ import SettingIcon from '../Settings/SettingIcon'
 import PromptInput from './PromptInput'
 import CoffeeIcon from '../CoffeeIcon/CoffeeIcon'
 import emitter, { EVENT_CUSTOM_MASK } from '../../event'
+import { useImage } from '../../utils'
 
 const Header = () => {
   const isInpainting = useRecoilValue(isInpaintingState)
   const [file, setFile] = useRecoilState(fileState)
   const [mask, setMask] = useRecoilState(maskState)
+  const [maskImage, maskImageLoaded] = useImage(mask)
   const [uploadElemId] = useState(`file-upload-${Math.random().toString()}`)
   const [maskUploadElemId] = useState(`mask-upload-${Math.random().toString()}`)
   const isSD = useRecoilValue(isSDState)
+  const runManually = useRecoilValue(runManuallyState)
+  const [openMaskPopover, setOpenMaskPopover] = useState(false)
 
   const renderHeader = () => {
     return (
@@ -88,10 +93,11 @@ const Header = () => {
                   onChange={ev => {
                     const newFile = ev.currentTarget.files?.[0]
                     if (newFile) {
-                      // TODO: check mask size
-                      console.info('Send custom mask')
-                      emitter.emit(EVENT_CUSTOM_MASK, { mask: newFile })
                       setMask(newFile)
+                      console.info('Send custom mask')
+                      if (!runManually) {
+                        emitter.emit(EVENT_CUSTOM_MASK, { mask: newFile })
+                      }
                     }
                   }}
                   accept="image/png, image/jpeg"
@@ -99,17 +105,42 @@ const Header = () => {
                 Mask
               </Button>
             </label>
-            <Button
+
-              style={{
+            <PopoverPrimitive.Root open={openMaskPopover}>
-                visibility: mask ? 'visible' : 'hidden',
+              <PopoverPrimitive.Trigger
-              }}
+                className="btn-primary side-panel-trigger"
-              icon={<PlayIcon />}
+                onMouseEnter={() => setOpenMaskPopover(true)}
-              onClick={() => {
+                onMouseLeave={() => setOpenMaskPopover(false)}
-                if (mask) {
+                style={{
-                  emitter.emit(EVENT_CUSTOM_MASK, { mask })
+                  visibility: mask ? 'visible' : 'hidden',
-                }
+                  outline: 'none',
-              }}
+                }}
-            />
+                onClick={() => {
+                  if (mask) {
+                    emitter.emit(EVENT_CUSTOM_MASK, { mask })
+                  }
+                }}
+              >
+                <PlayIcon />
+              </PopoverPrimitive.Trigger>
+              <PopoverPrimitive.Portal>
+                <PopoverPrimitive.Content
+                  style={{
+                    outline: 'none',
+                  }}
+                >
+                  {maskImageLoaded ? (
+                    <img
+                      src={maskImage.src}
+                      alt="mask"
+                      className="mask-preview"
+                    />
+                  ) : (
+                    <></>
+                  )}
+                </PopoverPrimitive.Content>
+              </PopoverPrimitive.Portal>
+            </PopoverPrimitive.Root>
           </div>
         </div>