add generate gif button

lama_cleaner/app/src/components/Editor/Editor.scss

@@ -95,10 +95,8 @@
 }
 
 .editor-toolkit-btns {
-  grid-area: toolkit-btns;
-  display: grid;
-  grid-auto-flow: column;
-  column-gap: 1rem;
+  display: flex;
+  gap: 12px;
 }
 
 .brush-shape {

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

@@ -16,10 +16,11 @@ import {
   TransformComponent,
   TransformWrapper,
 } from 'react-zoom-pan-pinch'
-import { useRecoilState, useRecoilValue } from 'recoil'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
 import { useWindowSize, useKey, useKeyPressEvent } from 'react-use'
 import inpaint, {
   downloadToOutput,
+  makeGif,
   postInteractiveSeg,
 } from '../../adapters/inpainting'
 import Button from '../shared/Button'
@@ -40,6 +41,7 @@ import {
   croperState,
   enableFileManagerState,
   fileState,
+  gifImageState,
   imageHeightState,
   imageWidthState,
   interactiveSegClicksState,
@@ -66,6 +68,7 @@ import FileSelect from '../FileSelect/FileSelect'
 import InteractiveSeg from '../InteractiveSeg/InteractiveSeg'
 import InteractiveSegConfirmActions from '../InteractiveSeg/ConfirmActions'
 import InteractiveSegReplaceModal from '../InteractiveSeg/ReplaceModal'
+import MakeGIF from './MakeGIF'
 
 const TOOLBAR_SIZE = 200
 const MIN_BRUSH_SIZE = 10
@@ -112,7 +115,7 @@ export default function Editor() {
   const settings = useRecoilValue(settingState)
   const [seedVal, setSeed] = useRecoilState(seedState)
   const croperRect = useRecoilValue(croperState)
-  const [toastVal, setToastState] = useRecoilState(toastState)
+  const setToastState = useSetRecoilState(toastState)
   const [isInpainting, setIsInpainting] = useRecoilState(isInpaintingState)
   const runMannually = useRecoilValue(runManuallyState)
   const isSD = useRecoilValue(isSDState)
@@ -181,8 +184,8 @@ export default function Editor() {
   const [redoLineGroups, setRedoLineGroups] = useState<LineGroup[]>([])
   const enableFileManager = useRecoilValue(enableFileManagerState)
 
-  const [imageWidth, setImageWidth] = useRecoilState(imageWidthState)
-  const [imageHeight, setImageHeight] = useRecoilState(imageHeightState)
+  const setImageWidth = useSetRecoilState(imageWidthState)
+  const setImageHeight = useSetRecoilState(imageHeightState)
   const app = useRecoilValue(appState)
 
   const draw = useCallback(
@@ -1534,6 +1537,7 @@ export default function Editor() {
             }}
             disabled={renders.length === 0}
           />
+          <MakeGIF renders={renders} />
           <Button
             toolTip="Save Image"
             icon={<ArrowDownTrayIcon />}

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

@@ -0,0 +1,114 @@
+import React, { useState } from 'react'
+import { GifIcon } from '@heroicons/react/24/outline'
+import { useRecoilState, useRecoilValue, useSetRecoilState } from 'recoil'
+import Button from '../shared/Button'
+import { fileState, gifImageState, toastState } from '../../store/Atoms'
+import { makeGif } from '../../adapters/inpainting'
+import Modal from '../shared/Modal'
+import { LoadingIcon } from '../shared/Toast'
+import { downloadImage } from '../../utils'
+
+interface Props {
+  renders: HTMLImageElement[]
+}
+
+const MakeGIF = (props: Props) => {
+  const { renders } = props
+  const [gifImg, setGifImg] = useRecoilState(gifImageState)
+  const file = useRecoilValue(fileState)
+  const setToastState = useSetRecoilState(toastState)
+  const [show, setShow] = useState(false)
+
+  const handleOnClose = () => {
+    setShow(false)
+  }
+
+  const handleDownload = () => {
+    if (gifImg) {
+      const name = file.name.replace(/\.[^/.]+$/, '.gif')
+      downloadImage(gifImg.src, name)
+    }
+  }
+
+  return (
+    <div>
+      <Button
+        toolTip="Make Gif"
+        icon={<GifIcon />}
+        disabled={!renders.length}
+        onClick={async () => {
+          setShow(true)
+          setGifImg(null)
+          try {
+            const gif = await makeGif(
+              file,
+              renders[renders.length - 1],
+              file.name,
+              file.type
+            )
+            if (gif) {
+              setGifImg(gif)
+            }
+          } catch (e: any) {
+            setToastState({
+              open: true,
+              desc: e.message ? e.message : e.toString(),
+              state: 'error',
+              duration: 2000,
+            })
+          }
+        }}
+      />
+      <Modal
+        onClose={handleOnClose}
+        title="GIF"
+        className="modal-setting"
+        show={show}
+      >
+        <div
+          style={{
+            display: 'flex',
+            alignItems: 'center',
+            justifyContent: 'center',
+            flexDirection: 'column',
+            gap: 16,
+          }}
+        >
+          {gifImg ? (
+            <img src={gifImg.src} style={{ borderRadius: 8 }} alt="gif" />
+          ) : (
+            <div
+              style={{
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                gap: 8,
+              }}
+            >
+              <LoadingIcon />
+              Generating GIF...
+            </div>
+          )}
+
+          {gifImg && (
+            <div
+              style={{
+                display: 'flex',
+                width: '100%',
+                justifyContent: 'flex-end',
+                alignItems: 'center',
+                gap: '12px',
+              }}
+            >
+              <Button onClick={handleDownload} border>
+                Download
+              </Button>
+            </div>
+          )}
+        </div>
+      </Modal>
+    </div>
+  )
+}
+
+export default MakeGIF