make model switch work with toast

lama_cleaner/app/src/components/Settings/SettingsModal.tsx

@@ -1,26 +1,28 @@
 import React from 'react'
 
 import { useRecoilState } from 'recoil'
-import { switchModel } from '../../adapters/inpainting'
 import { settingState } from '../../store/Atoms'
 import Modal from '../shared/Modal'
 import HDSettingBlock from './HDSettingBlock'
 import ModelSettingBlock from './ModelSettingBlock'
 
-export default function SettingModal() {
+interface SettingModalProps {
+  onClose: () => void
+}
+export default function SettingModal(props: SettingModalProps) {
+  const { onClose } = props
   const [setting, setSettingState] = useRecoilState(settingState)
 
-  const onClose = () => {
+  const handleOnClose = () => {
     setSettingState(old => {
       return { ...old, show: false }
     })
-
-    switchModel(setting.model)
+    onClose()
   }
 
   return (
     <Modal
-      onClose={onClose}
+      onClose={handleOnClose}
       title="Settings"
       className="modal-setting"
       show={setting.show}

lama_cleaner/app/src/components/Workspace.tsx

@@ -1,18 +1,99 @@
-import React from 'react'
+import React, { useEffect } from 'react'
+import { useRecoilState } from 'recoil'
 import Editor from './Editor/Editor'
 import ShortcutsModal from './Shortcuts/ShortcutsModal'
 import SettingModal from './Settings/SettingsModal'
+import Toast from './shared/Toast'
+import { Settings, settingState, toastState } from '../store/Atoms'
+import {
+  currentModel,
+  modelDownloaded,
+  switchModel,
+} from '../adapters/inpainting'
+import { AIModel } from './Settings/ModelSettingBlock'
 
 interface WorkspaceProps {
   file: File
 }
 
 const Workspace = ({ file }: WorkspaceProps) => {
+  const [settings, setSettingState] = useRecoilState(settingState)
+  const [toastVal, setToastState] = useRecoilState(toastState)
+
+  const onSettingClose = async () => {
+    const curModel = await currentModel().then(res => res.text())
+    if (curModel === settings.model) {
+      return
+    }
+    const downloaded = await modelDownloaded(settings.model).then(res =>
+      res.text()
+    )
+
+    const { model } = settings
+
+    let loadingMessage = `Switching to ${model} model`
+    let loadingDuration = 3000
+    if (downloaded === 'False') {
+      loadingMessage = `Downloading ${model} model, this may take a while`
+      loadingDuration = 9999999999
+    }
+
+    setToastState({
+      open: true,
+      desc: loadingMessage,
+      state: 'loading',
+      duration: loadingDuration,
+    })
+
+    switchModel(model)
+      .then(res => {
+        if (res.ok) {
+          setToastState({
+            open: true,
+            desc: `Switch to ${model} model success`,
+            state: 'success',
+            duration: 3000,
+          })
+        } else {
+          throw new Error('Server error')
+        }
+      })
+      .catch(() => {
+        setToastState({
+          open: true,
+          desc: `Switch to ${model} model failed`,
+          state: 'error',
+          duration: 3000,
+        })
+        setSettingState(old => {
+          return { ...old, model: curModel as AIModel }
+        })
+      })
+  }
+
+  useEffect(() => {
+    currentModel()
+      .then(res => res.text())
+      .then(model => {
+        setSettingState(old => {
+          return { ...old, model: model as AIModel }
+        })
+      })
+  }, [])
+
   return (
     <>
       <Editor file={file} />
-      <SettingModal />
+      <SettingModal onClose={onSettingClose} />
       <ShortcutsModal />
+      <Toast
+        {...toastVal}
+        onOpenChange={(open: boolean) => {
+          setToastState(old => {
+            return { ...old, open }
+          })
+        }}
+      />
     </>
   )
 }

lama_cleaner/app/src/components/shared/Toast.scss

@@ -0,0 +1,83 @@
+.toast-viewpoint {
+  position: fixed;
+  top: 48px;
+  right: 0;
+  display: flex;
+  flex-direction: row;
+  padding: 25px;
+  gap: 10px;
+  max-width: 100vw;
+  margin: 0;
+  z-index: 999999;
+
+  &:focus-visible {
+    outline: none;
+  }
+}
+
+.toast-root {
+  border: 1px solid var(--border-color-light);
+  background-color: var(--page-bg);
+  border-radius: 0.6rem;
+  padding: 15px;
+  display: flex;
+  align-items: center;
+
+  gap: 12px;
+
+  &[data-state='open'] {
+    animation: slideIn 150ms cubic-bezier(0.16, 1, 0.3, 1);
+  }
+
+  &[data-state='close'] {
+    animation: opacityReveal 100ms ease-in forwards;
+  }
+
+  &[data-state='cancel'] {
+    transform: translateX(0);
+    animation: transform 100ms ease-out;
+  }
+
+  &.error {
+    border: 1px solid var(--error-color);
+  }
+
+  &.success {
+    border: 1px solid var(--success-color);
+  }
+}
+
+.error-icon {
+  height: 24px;
+  width: 24px;
+  color: var(--error-color);
+}
+
+.success-icon {
+  height: 24px;
+  width: 24px;
+  color: var(--success-color);
+}
+
+.loading-icon {
+  display: flex;
+  align-items: center;
+  animation-name: spin;
+  animation-duration: 1500ms;
+  animation-iteration-count: infinite;
+  transform-origin: center center;
+  animation-timing-function: linear;
+}
+
+.toast-icon {
+  display: flex;
+  align-items: center;
+}
+
+.toast-desc {
+  display: flex;
+  align-items: center;
+  margin: 0;
+  color: var(--text-color);
+  min-width: 240px;
+}

lama_cleaner/app/src/components/shared/Toast.tsx

@@ -0,0 +1,81 @@
+import * as React from 'react'
+import * as ToastPrimitive from '@radix-ui/react-toast'
+import { ToastProps } from '@radix-ui/react-toast'
+import { CheckIcon, ExclamationCircleIcon } from '@heroicons/react/outline'
+
+const LoadingIcon = () => {
+  return (
+    <span className="loading-icon">
+      <svg
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        strokeWidth="2"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      >
+        <line x1="12" y1="2" x2="12" y2="6" />
+        <line x1="12" y1="18" x2="12" y2="22" />
+        <line x1="4.93" y1="4.93" x2="7.76" y2="7.76" />
+        <line x1="16.24" y1="16.24" x2="19.07" y2="19.07" />
+        <line x1="2" y1="12" x2="6" y2="12" />
+        <line x1="18" y1="12" x2="22" y2="12" />
+        <line x1="4.93" y1="19.07" x2="7.76" y2="16.24" />
+        <line x1="16.24" y1="7.76" x2="19.07" y2="4.93" />
+      </svg>
+    </span>
+  )
+}
+
+export type ToastState = 'default' | 'error' | 'loading' | 'success'
+
+interface MyToastProps extends ToastProps {
+  desc: string
+  state?: ToastState
+}
+
+const Toast = React.forwardRef<
+  React.ElementRef<typeof ToastPrimitive.Root>,
+  MyToastProps
+>((props, forwardedRef) => {
+  const { state, desc, ...itemProps } = props
+
+  const getIcon = () => {
+    switch (state) {
+      case 'error':
+        return <ExclamationCircleIcon className="error-icon" />
+      case 'success':
+        return <CheckIcon className="success-icon" />
+      case 'loading':
+        return <LoadingIcon />
+      default:
+        return <></>
+    }
+  }
+
+  return (
+    <ToastPrimitive.Provider>
+      <ToastPrimitive.Root
+        {...itemProps}
+        ref={forwardedRef}
+        className={`toast-root ${state}`}
+      >
+        <div className="toast-icon">{getIcon()}</div>
+        <ToastPrimitive.Description className="toast-desc">
+          {desc}
+        </ToastPrimitive.Description>
+      </ToastPrimitive.Root>
+      <ToastPrimitive.Viewport className="toast-viewpoint" />
+    </ToastPrimitive.Provider>
+  )
+})
+
+Toast.defaultProps = {
+  desc: '',
+  state: 'loading',
+}
+
+export default Toast