add interactive seg remove/replace modal

lama_cleaner/app/src/components/CoffeeIcon/CoffeeIcon.tsx

@@ -1,7 +1,5 @@
 import React, { useState } from 'react'
-import { useRecoilState } from 'recoil'
 import { Coffee } from 'react-feather'
-import { settingState } from '../../store/Atoms'
 import Button from '../shared/Button'
 import Modal from '../shared/Modal'
 

lama_cleaner/app/src/components/Editor/Editor.tsx

@@ -57,6 +57,7 @@ import emitter, {
 import FileSelect from '../FileSelect/FileSelect'
 import InteractiveSeg from '../InteractiveSeg/InteractiveSeg'
 import InteractiveSegConfirmActions from '../InteractiveSeg/ConfirmActions'
+import InteractiveSegReplaceModal from '../InteractiveSeg/ReplaceModal'
 
 const TOOLBAR_SIZE = 200
 const MIN_BRUSH_SIZE = 10
@@ -114,6 +115,7 @@ export default function Editor() {
     isInteractiveSegRunningState
   )
 
+  const [showInteractiveSegModal, setShowInteractiveSegModal] = useState(false)
   const [interactiveSegMask, setInteractiveSegMask] =
     useState<HTMLImageElement | null>(null)
   // only used while interactive segmentation is on
@@ -573,6 +575,7 @@ export default function Editor() {
 
     if (isInteractiveSeg) {
       onInteractiveCancel()
+      return
     }
 
     if (isDraging || isMultiStrokeKeyPressed) {
@@ -1036,9 +1039,13 @@ export default function Editor() {
     () => {
       if (!isInteractiveSeg) {
         setIsInteractiveSeg(true)
+        if (interactiveSegMask !== null) {
+          setShowInteractiveSegModal(true)
+        }
       }
     },
-    isInteractiveSeg
+    {},
+    [isInteractiveSeg, interactiveSegMask]
   )
 
   // Standard Hotkeys for Brush Size
@@ -1173,6 +1180,7 @@ export default function Editor() {
         style={{
           left: `${x}px`,
           top: `${y}px`,
+          // transform: 'translate(-50%, -50%)',
         }}
       >
         <CursorArrowRaysIcon />
@@ -1359,7 +1367,12 @@ export default function Editor() {
             tooltipPosition="top"
             icon={<CursorArrowRaysIcon />}
             disabled={isInteractiveSeg || isInpainting}
-            onClick={() => setIsInteractiveSeg(true)}
+            onClick={() => {
+              setIsInteractiveSeg(true)
+              if (interactiveSegMask !== null) {
+                setShowInteractiveSegModal(true)
+              }
+            }}
           />
           <Button
             toolTip="Reset Zoom & Pan"
@@ -1469,6 +1482,21 @@ export default function Editor() {
           )}
         </div>
       </div>
+      <InteractiveSegReplaceModal
+        show={showInteractiveSegModal}
+        onClose={() => {
+          onInteractiveCancel()
+          setShowInteractiveSegModal(false)
+        }}
+        onCleanClick={() => {
+          onInteractiveCancel()
+          setInteractiveSegMask(null)
+        }}
+        onReplaceClick={() => {
+          setShowInteractiveSegModal(false)
+          setIsInteractiveSeg(true)
+        }}
+      />
     </div>
   )
 }

lama_cleaner/app/src/components/InteractiveSeg/InteractiveSeg.scss

@@ -63,7 +63,6 @@ $negativeOutline: 6px solid rgba(255, 89, 95, 0.31);
   border-radius: 50%;
   background-color: $positiveBackgroundColor;
   // outline: $positiveOutline;
-  transform: 'translate(-50%, -50%)';
   box-shadow: 0 0 0 0 rgba(21, 215, 121, 0.936);
   animation: pulse 1.5s infinite cubic-bezier(0.66, 0, 0, 1);
 }

lama_cleaner/app/src/components/InteractiveSeg/ReplaceModal.tsx

@@ -0,0 +1,51 @@
+import React, { useEffect, useState } from 'react'
+import Button from '../shared/Button'
+import Modal from '../shared/Modal'
+
+interface Props {
+  show: boolean
+  onClose: () => void
+  onCleanClick: () => void
+  onReplaceClick: () => void
+}
+
+const InteractiveSegReplaceModal = (props: Props) => {
+  const { show, onClose, onCleanClick, onReplaceClick } = props
+
+  return (
+    <Modal
+      onClose={onClose}
+      title="Mask exists"
+      className="modal-setting"
+      show={show}
+      showCloseIcon
+    >
+      <h4 style={{ lineHeight: '24px' }}>
+        Do you want to remove it or create a new one?
+      </h4>
+      <div
+        style={{
+          display: 'flex',
+          width: '100%',
+          justifyContent: 'flex-end',
+          alignItems: 'center',
+          gap: '12px',
+        }}
+      >
+        <Button
+          onClick={() => {
+            onClose()
+            onCleanClick()
+          }}
+        >
+          Remove
+        </Button>
+        <Button onClick={onReplaceClick} border>
+          Create a new one
+        </Button>
+      </div>
+    </Modal>
+  )
+}
+
+export default InteractiveSegReplaceModal

lama_cleaner/interactive_seg.py

@@ -154,7 +154,7 @@ class ISPredictor(object):
 
 INTERACTIVE_SEG_MODEL_URL = os.environ.get(
     "INTERACTIVE_SEG_MODEL_URL",
-    "/Users/qing/code/github/ClickSEG/clickseg_pplnet.pt",
+    "https://github.com/Sanster/models/releases/download/clickseg_pplnet/clickseg_pplnet.pt",
 )