From 6146d910b4d2a66c1bdf3f2dd0b4444de02ad5d7 Mon Sep 17 00:00:00 2001
From: josc146 <josStorer@outlook.com>
Date: Fri, 24 Nov 2023 18:36:44 +0800
Subject: [PATCH] improve launch flow of webgpu mode

---
 frontend/src/components/RunButton.tsx |  5 +++-
 frontend/src/pages/Configs.tsx        | 36 ++---------------------
 frontend/src/utils/convert-to-st.ts   | 41 +++++++++++++++++++++++++++
 3 files changed, 48 insertions(+), 34 deletions(-)
 create mode 100644 frontend/src/utils/convert-to-st.ts

diff --git a/frontend/src/components/RunButton.tsx b/frontend/src/components/RunButton.tsx
index de5a7ac..209aa14 100644
--- a/frontend/src/components/RunButton.tsx
+++ b/frontend/src/components/RunButton.tsx
@@ -17,6 +17,7 @@ import { ToolTipButton } from './ToolTipButton';
 import { Play16Regular, Stop16Regular } from '@fluentui/react-icons';
 import { useNavigate } from 'react-router';
 import { WindowShow } from '../../wailsjs/runtime';
+import { convertToSt } from '../utils/convert-to-st';
 
 const mainButtonText = {
   [ModelStatus.Offline]: 'Run',
@@ -63,7 +64,9 @@ export const RunButton: FC<{ onClickRun?: MouseEventHandler, iconMode?: boolean
           if (await FileExists(stModelPath)) {
             modelPath = stModelPath;
           } else {
-            toast(t('Please convert model to safe tensors format first'), { type: 'error' });
+            toastWithButton(t('Please convert model to safe tensors format first'), t('Convert'), () => {
+              convertToSt(navigate, modelConfig);
+            });
             commonStore.setStatus({ status: ModelStatus.Offline });
             return;
           }
diff --git a/frontend/src/pages/Configs.tsx b/frontend/src/pages/Configs.tsx
index eba2ff4..51ef338 100644
--- a/frontend/src/pages/Configs.tsx
+++ b/frontend/src/pages/Configs.tsx
@@ -26,7 +26,7 @@ import { Page } from '../components/Page';
 import { useNavigate } from 'react-router';
 import { RunButton } from '../components/RunButton';
 import { updateConfig } from '../apis';
-import { ConvertModel, ConvertSafetensors, FileExists, GetPyError } from '../../wailsjs/go/backend_golang/App';
+import { ConvertModel, FileExists, GetPyError } from '../../wailsjs/go/backend_golang/App';
 import { checkDependencies, getStrategy } from '../utils';
 import { useTranslation } from 'react-i18next';
 import { WindowShow } from '../../wailsjs/runtime';
@@ -35,6 +35,7 @@ import strategyZhImg from '../assets/images/strategy_zh.jpg';
 import { ResetConfigsButton } from '../components/ResetConfigsButton';
 import { useMediaQuery } from 'usehooks-ts';
 import { ApiParameters, Device, ModelParameters, Precision } from '../types/configs';
+import { convertToSt } from '../utils/convert-to-st';
 
 const Configs: FC = observer(() => {
   const { t } = useTranslation();
@@ -272,38 +273,7 @@ const Configs: FC = observer(() => {
                       }} /> :
                     <ToolTipButton text={t('Convert To Safe Tensors Format')}
                       desc=""
-                      onClick={async () => {
-                        if (commonStore.platform === 'linux') {
-                          toast(t('Linux is not yet supported for performing this operation, please do it manually.') + ' (backend-python/convert_safetensors.py)', { type: 'info' });
-                          return;
-                        }
-
-                        const ok = await checkDependencies(navigate);
-                        if (!ok)
-                          return;
-
-                        const modelPath = `${commonStore.settings.customModelsPath}/${selectedConfig.modelParameters.modelName}`;
-                        if (await FileExists(modelPath)) {
-                          toast(t('Start Converting'), { autoClose: 1000, type: 'info' });
-                          const newModelPath = modelPath.replace(/\.pth$/, '.st');
-                          ConvertSafetensors(commonStore.settings.customPythonPath, modelPath, newModelPath).then(async () => {
-                            if (!await FileExists(newModelPath)) {
-                              toast(t('Convert Failed') + ' - ' + await GetPyError(), { type: 'error' });
-                            } else {
-                              toast(`${t('Convert Success')} - ${newModelPath}`, { type: 'success' });
-                            }
-                          }).catch(e => {
-                            const errMsg = e.message || e;
-                            if (errMsg.includes('path contains space'))
-                              toast(`${t('Convert Failed')} - ${t('File Path Cannot Contain Space')}`, { type: 'error' });
-                            else
-                              toast(`${t('Convert Failed')} - ${e.message || e}`, { type: 'error' });
-                          });
-                          setTimeout(WindowShow, 1000);
-                        } else {
-                          toast(`${t('Model Not Found')} - ${modelPath}`, { type: 'error' });
-                        }
-                      }} />
+                      onClick={() => convertToSt(navigate, selectedConfig)} />
                 }
                 <Labeled label={t('Strategy')} content={
                   <Dropdown style={{ minWidth: 0 }} className="grow" value={t(selectedConfig.modelParameters.device)!}
diff --git a/frontend/src/utils/convert-to-st.ts b/frontend/src/utils/convert-to-st.ts
new file mode 100644
index 0000000..6badb57
--- /dev/null
+++ b/frontend/src/utils/convert-to-st.ts
@@ -0,0 +1,41 @@
+import { toast } from 'react-toastify';
+import commonStore from '../stores/commonStore';
+import { t } from 'i18next';
+import { checkDependencies } from './index';
+import { ConvertSafetensors, FileExists, GetPyError } from '../../wailsjs/go/backend_golang/App';
+import { WindowShow } from '../../wailsjs/runtime';
+import { NavigateFunction } from 'react-router';
+import { ModelConfig } from '../types/configs';
+
+export const convertToSt = async (navigate: NavigateFunction, selectedConfig: ModelConfig) => {
+  if (commonStore.platform === 'linux') {
+    toast(t('Linux is not yet supported for performing this operation, please do it manually.') + ' (backend-python/convert_safetensors.py)', { type: 'info' });
+    return;
+  }
+
+  const ok = await checkDependencies(navigate);
+  if (!ok)
+    return;
+
+  const modelPath = `${commonStore.settings.customModelsPath}/${selectedConfig.modelParameters.modelName}`;
+  if (await FileExists(modelPath)) {
+    toast(t('Start Converting'), { autoClose: 1000, type: 'info' });
+    const newModelPath = modelPath.replace(/\.pth$/, '.st');
+    ConvertSafetensors(commonStore.settings.customPythonPath, modelPath, newModelPath).then(async () => {
+      if (!await FileExists(newModelPath)) {
+        toast(t('Convert Failed') + ' - ' + await GetPyError(), { type: 'error' });
+      } else {
+        toast(`${t('Convert Success')} - ${newModelPath}`, { type: 'success' });
+      }
+    }).catch(e => {
+      const errMsg = e.message || e;
+      if (errMsg.includes('path contains space'))
+        toast(`${t('Convert Failed')} - ${t('File Path Cannot Contain Space')}`, { type: 'error' });
+      else
+        toast(`${t('Convert Failed')} - ${e.message || e}`, { type: 'error' });
+    });
+    setTimeout(WindowShow, 1000);
+  } else {
+    toast(`${t('Model Not Found')} - ${modelPath}`, { type: 'error' });
+  }
+};
\ No newline at end of file