Add optional moeflow-companion service

.dockerignore

@@ -15,10 +15,6 @@
 
 # misc
 **/.DS_Store
-**/.env.local
-**/.env.development.local
-**/.env.test.local
-**/.env.production.local
 
 **/npm-debug.log*
 **/yarn-debug.log*

.gitignore

@@ -28,3 +28,4 @@ yarn-error.log*
 .vscode/*
 .idea
 stats.html
+/public/moeflow-runtime-config.json

package.json

@@ -8,7 +8,7 @@
     "@fortawesome/free-regular-svg-icons": "^5.15.4",
     "@fortawesome/free-solid-svg-icons": "^5.15.4",
     "@fortawesome/react-fontawesome": "^0.1.19",
-    "@gradio/client": "1.14.0",
+    "@gradio/client": "^1.14.0",
     "@jokester/ts-commonutil": "^0.6.1",
     "@reduxjs/toolkit": "^1.9.7",
     "@zip.js/zip.js": "^2.7.60",

public/moeflow-runtime-config.sample.json

@@ -0,0 +1,6 @@
+{
+  "comment": "Runtime configuration overrides. See src/configs.tsx",
+  "moeflowCompanion": {
+    "gradioUrl": "http://localhost:7860"
+  }
+}

src/apis/index.ts

@@ -9,7 +9,7 @@ import axios, {
 import qs from 'qs';
 import { createElement } from 'react';
 import { Icon } from '../components';
-import { configs, runtimeConfig } from '@/configs';
+import { runtimeConfig } from '@/configs';
 import { createDebugLogger } from '@/utils/debug-logger';
 import { getIntl } from '@/locales';
 import store from '../store';

src/components/FileList.tsx

@@ -3,14 +3,13 @@ import { Button as AntdButton, Drawer, message, Modal, Spin } from 'antd';
 import { CancelToken } from 'axios';
 import loadImage from 'blueimp-load-image';
 import classNames from 'classnames';
-import React, { useEffect, useRef, useState } from 'react';
+import { useRef, useState } from 'react';
 import { FilePond } from 'react-filepond';
 import { useIntl } from 'react-intl';
 import { useDispatch, useSelector } from 'react-redux';
 import { useHistory } from 'react-router-dom';
 import { Button, EmptyTip, FileItem, List, OutputList } from '.';
 import { api, resultTypes } from '../apis';
-import { runtimeConfig } from '@/configs';
 import {
   FILE_NOT_EXIST_REASON,
   FILE_SAFE_STATUS,
@@ -25,7 +24,7 @@ import { setFilesState } from '@/store/file/slice';
 import style from '../style';
 import { toLowerCamelCase } from '@/utils';
 import { can } from '@/utils/user';
-import { usePromised } from '@jokester/ts-commonutil/lib/react/hook/use-promised';
+import { routes } from '@/pages/routes';
 
 /** 文件列表的属性接口 */
 interface FileListProps {
@@ -49,10 +48,8 @@ export const FileList: FC<FileListProps> = ({
   const [loading, setLoading] = useState(true);
   const [listMode] = useState<'image' | 'text'>('image');
   const [total, setTotal] = useState(0); // 元素总个数
-  const runtimeConfigLoaded = usePromised(runtimeConfig);
-  const uploadAPI =
-    runtimeConfigLoaded.fulfilled &&
-    `${runtimeConfigLoaded.value.baseURL}/v1/projects/${project.id}/files`;
+  const runtimeConfig = useSelector((state: AppState) => state.site.runtimeConfig);
+  const uploadAPI = `${runtimeConfig.baseURL}/v1/projects/${project.id}/files`;
   const token = useSelector((state: AppState) => state.user.token);
   const platform = useSelector((state: AppState) => state.site.platform);
   const isMobile = platform === 'mobile';
@@ -64,9 +61,6 @@ export const FileList: FC<FileListProps> = ({
   const [spinningIDs, setSpinningIDs] = useState<string[]>([]); // 删除请求中
   const filePondRef = useRef<FilePond | null>();
 
-  const [team, setTeam] = useState<Team>();
-  const currentTeam = useSelector((state: AppState) => state.team.currentTeam);
-
   const defaultPage = useSelector(
     (state: AppState) => state.file.filesState.page,
   );
@@ -80,20 +74,8 @@ export const FileList: FC<FileListProps> = ({
     (state: AppState) => state.file.filesState.selectedFileIds,
   );
 
-  useEffect(() => {
-    if (!currentTeam) {
-      api.project.getProject({ id: project.id }).then((result) => {
-        const data = toLowerCamelCase(result.data);
-        setTeam(data.team);
-      });
-    } else {
-      setTeam(currentTeam);
-    }
-    // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [project.id]);
-
   const toTranslator = (file: File) => {
-    history.push(`/image-translator/${file.id}-${target?.id}`);
+    history.push(routes.imageTranslator.build(file.id, target.id));
   };
 
   const deleteFile = (file: File) => {
@@ -123,7 +105,7 @@ export const FileList: FC<FileListProps> = ({
             setSpinningIDs((ids) => ids.filter((id) => id !== file.id));
           });
       },
-      onCancel: () => {},
+      onCancel: () => { },
       okText: formatMessage({ id: 'form.ok' }),
       cancelText: formatMessage({ id: 'form.cancel' }),
     });

src/configs.tsx

@@ -1,8 +1,12 @@
 import { lazyThenable } from '@jokester/ts-commonutil/lib/concurrency/lazy-thenable';
 
-interface RuntimeConfig {
+export interface RuntimeConfig {
   // base URL for API requests
   baseURL: string;
+
+  moeflowCompanion?: {
+    gradioUrl?: string;
+  };
 }
 
 /**
@@ -16,7 +20,7 @@ export const runtimeConfig = lazyThenable<RuntimeConfig>(async () => {
   const overriden: RuntimeConfig = await fetch('/moeflow-runtime-config.json')
     .then((res) => res.json())
     .catch(() => null);
-  const merged = {
+  const merged: RuntimeConfig = {
     ...{
       // defaults
       baseURL: process.env.REACT_APP_BASE_URL || '/api/',

src/index.tsx

@@ -11,17 +11,20 @@ import App from './App';
 import './fontAwesome'; // Font Awesome
 import './index.css';
 import store from './store';
-import { setOSName, setPlatform } from './store/site/slice';
+import { setOSName, setPlatform, setRuntimeConfig } from './store/site/slice';
 import { setUserToken } from './store/user/slice';
 import { getToken } from './utils/cookie';
 import { OSName, Platform } from './interfaces';
+import { runtimeConfig } from './configs';
 import {
   getDefaultHotKey,
   hotKeyInitialState,
   HotKeyState,
   setHotKey,
 } from './store/hotKey/slice';
 import { loadHotKey } from './utils/storage';
+import { createDebugLogger } from './utils/debug-logger';
+const debugLogger = createDebugLogger('app');
 
 // 时间插件
 if (false && process.env.NODE_ENV === 'development') {
@@ -55,8 +58,10 @@ for (const hotKeyName in hotKeyInitialState) {
 }
 
 async function mountApp() {
+  store.dispatch(setRuntimeConfig(await runtimeConfig));
   const { intlMessages, locale, antdLocale, antdValidateMessages } =
     await initI18n;
+  debugLogger('initial state', store.getState());
   /**
    * Set user token from cookie
    */

src/services/moeflow_companion/TranslateCompanion.tsx

@@ -7,7 +7,7 @@ import { createMoeflowProjectZip, LPFile } from '../labelplus_packager';
 import { FailureResults } from '@/apis';
 import { measureImgSize } from '@jokester/ts-commonutil/lib/web/measure-img';
 import { clamp } from 'lodash-es';
-import { BBox, mitPreprocess, TextQuad } from '@/apis/mit_preprocess';
+import { BBox, mitPreprocess, TextQuad } from './mit_preprocess';
 import { ResourcePool } from '@jokester/ts-commonutil/lib/concurrency/resource-pool';
 
 const MAX_FILE_COUNT = 30;
@@ -248,10 +248,10 @@ export const DemoOcrFiles: FC<{}> = (props) => {
           setWorking((s) =>
             s?.nonce === initState.nonce
               ? {
-                  ...s,
-                  finished: Math.max(s.finished, finished),
-                  numPages: total,
-                }
+                ...s,
+                finished: Math.max(s.finished, finished),
+                numPages: total,
+              }
               : s,
           ),
         ),

src/apis/mit_preprocess.ts → src/services/moeflow_companion/mit_preprocess.ts

@@ -1,5 +1,5 @@
-import { request } from '.';
-import { uploadRequest } from './_request';
+import { request } from '../../apis';
+import { uploadRequest } from '../../apis/_request';
 import { wait } from '@jokester/ts-commonutil/lib/concurrency/timing';
 
 const mitApiPrefix = `/v1/mit`;

src/services/moeflow_companion/use_moeflow_companion.ts

@@ -0,0 +1,49 @@
+import { useState, useRef } from 'react';
+import { Client } from '@gradio/client';
+import { useAsyncEffect } from '@jokester/ts-commonutil/lib/react/hook/use-async-effect';
+import { useSelector } from 'react-redux';
+import { AppState } from '@/store';
+import { createDebugLogger } from '@/utils/debug-logger';
+
+export const moeflowCompanionServiceState = {
+  disabled: 'disabled',
+  connecting: 'connecting',
+  connected: 'connected',
+  disconnected: 'disconnected',
+} as const;
+
+const logger = createDebugLogger('service:moeflow_companion');
+
+export function useMoeflowCompanion() {
+  const clientRef = useRef<Client | null>(null);
+  const [clientState, setClientState] = useState<string>(
+    moeflowCompanionServiceState.disabled,
+  );
+  const serviceConf = useSelector(
+    (s: AppState) => s.site.runtimeConfig.moeflowCompanion,
+  );
+
+  useAsyncEffect(
+    async (_, released) => {
+      if (!serviceConf?.gradioUrl) {
+        clientRef.current = null;
+        setClientState(moeflowCompanionServiceState.disabled);
+        return;
+      }
+      try {
+        const client = await Client.connect(serviceConf.gradioUrl);
+        clientRef.current = client;
+        setClientState(moeflowCompanionServiceState.connected);
+        released.then(() => client.close());
+      } catch (e) {
+        logger('error connecting', e, serviceConf.gradioUrl);
+        clientRef.current = null;
+        setClientState(moeflowCompanionServiceState.disconnected);
+      }
+    },
+    [serviceConf],
+  );
+  return [clientState, clientRef.current] as const;
+}
+
+export async function x(client: Client) {}

src/store/project/sagas.ts

@@ -34,7 +34,7 @@ function* setCurrentProjectWorker(
         configs: { cancelToken },
       });
       yield put(setCurrentProject(toLowerCamelCase(result.data)));
-    } catch (error) {
+    } catch (error: any) {
       error.default();
     } finally {
       if (yield cancelled()) {

src/store/projectSet/sagas.ts

@@ -16,7 +16,7 @@ function* setCurrentProjectSetWorker(
 ) {
   // 清空当前 projectSet
   yield put(clearCurrentProjectSet());
-  const projectSets = yield select(
+  const projectSets: UserProjectSet[] = yield select(
     (state: AppState) => state.projectSet.projectSets,
   );
   const projectSet = projectSets.find(
@@ -35,7 +35,7 @@ function* setCurrentProjectSetWorker(
           configs: { cancelToken },
         });
       yield put(setCurrentProjectSet(toLowerCamelCase(result.data)));
-    } catch (error) {
+    } catch (error: any) {
       error.default();
     } finally {
       if (yield cancelled()) {