update

frontend/src/components/ConfigSelector.tsx

@@ -0,0 +1,18 @@
+import {FC} from 'react';
+import {observer} from 'mobx-react-lite';
+import {Dropdown, Option} from '@fluentui/react-components';
+import commonStore from '../stores/commonStore';
+
+export const ConfigSelector: FC<{ size?: 'small' | 'medium' | 'large' }> = observer(({size}) => {
+  return <Dropdown size={size} style={{minWidth: 0}} listbox={{style: {minWidth: 0}}}
+                   value={commonStore.getCurrentModelConfig().name}
+                   selectedOptions={[commonStore.currentModelConfigIndex.toString()]}
+                   onOptionSelect={(_, data) => {
+                     if (data.optionValue)
+                       commonStore.setCurrentConfigIndex(Number(data.optionValue));
+                   }}>
+    {commonStore.modelConfigs.map((config, index) =>
+      <Option key={index} value={index.toString()}>{config.name}</Option>
+    )}
+  </Dropdown>;
+});

frontend/src/components/RunButton.tsx

@@ -1,4 +1,4 @@
-import React, {FC, MouseEventHandler} from 'react';
+import React, {FC, MouseEventHandler, ReactElement} from 'react';
 import commonStore, {ModelStatus} from '../stores/commonStore';
 import {StartServer} from '../../wailsjs/go/backend_golang/App';
 import {Button} from '@fluentui/react-components';
@@ -9,6 +9,8 @@ import manifest from '../../../manifest.json';
 import {getStrategy} from '../utils';
 import {useTranslation} from 'react-i18next';
 import {t} from 'i18next';
+import {ToolTipButton} from './ToolTipButton';
+import {Play16Regular, Stop16Regular} from '@fluentui/react-icons';
 
 const mainButtonText = {
   [ModelStatus.Offline]: 'Run',
@@ -17,6 +19,13 @@ const mainButtonText = {
   [ModelStatus.Working]: 'Stop'
 };
 
+const iconModeButtonIcon: { [modelStatus: number]: ReactElement } = {
+  [ModelStatus.Offline]: <Play16Regular/>,
+  [ModelStatus.Starting]: <Stop16Regular/>,
+  [ModelStatus.Loading]: <Stop16Regular/>,
+  [ModelStatus.Working]: <Stop16Regular/>
+};
+
 const onClickMainButton = async () => {
   const modelConfig = commonStore.getCurrentModelConfig();
   const port = modelConfig.apiParameters.apiPort;
@@ -74,17 +83,28 @@ const onClickMainButton = async () => {
   }
 };
 
-export const RunButton: FC<{ onClickRun?: MouseEventHandler }> = observer(({onClickRun}) => {
+export const RunButton: FC<{ onClickRun?: MouseEventHandler, iconMode?: boolean }>
+  = observer(({
+                onClickRun,
+                iconMode
+              }) => {
   const {t} = useTranslation();
 
-  return (
-    <Button disabled={commonStore.modelStatus === ModelStatus.Starting} appearance="primary" size="large"
-            onClick={async (e) => {
-              if (commonStore.modelStatus === ModelStatus.Offline)
-                await onClickRun?.(e);
-              await onClickMainButton();
-            }}>
-      {t(mainButtonText[commonStore.modelStatus])}
-    </Button>
+  const onClick = async (e: any) => {
+    if (commonStore.modelStatus === ModelStatus.Offline)
+      await onClickRun?.(e);
+    await onClickMainButton();
+  };
+
+  return (iconMode ?
+      <ToolTipButton disabled={commonStore.modelStatus === ModelStatus.Starting}
+                     icon={iconModeButtonIcon[commonStore.modelStatus]}
+                     desc={t(mainButtonText[commonStore.modelStatus])}
+                     size="small" onClick={onClick}/>
+      :
+      <Button disabled={commonStore.modelStatus === ModelStatus.Starting} appearance="primary" size="large"
+              onClick={onClick}>
+        {t(mainButtonText[commonStore.modelStatus])}
+      </Button>
   );
 });

frontend/src/components/ToolTipButton.tsx

@@ -2,16 +2,23 @@ import React, {FC, MouseEventHandler, ReactElement} from 'react';
 import {Button, Tooltip} from '@fluentui/react-components';
 
 export const ToolTipButton: FC<{
-  text?: string | null, desc: string, icon?: ReactElement, onClick?: MouseEventHandler
+  text?: string | null,
+  desc: string,
+  icon?: ReactElement,
+  size?: 'small' | 'medium' | 'large',
+  disabled?: boolean,
+  onClick?: MouseEventHandler
 }> = ({
         text,
         desc,
         icon,
+        size,
+        disabled,
         onClick
       }) => {
   return (
     <Tooltip content={desc} showDelay={0} hideDelay={0} relationship="label">
-      <Button icon={icon} onClick={onClick}>{text}</Button>
+      <Button disabled={disabled} icon={icon} onClick={onClick} size={size}>{text}</Button>
     </Tooltip>
   );
 };