refactor

2023-05-20 16:07:08 +08:00
parent 5883686003
commit ca33d75f19
8 changed files with 188 additions and 149 deletions
--- a/frontend/src/pages/Chat.tsx
+++ b/frontend/src/pages/Chat.tsx
@@ -18,19 +18,19 @@ import {CopyButton} from '../components/CopyButton';
 import {ReadButton} from '../components/ReadButton';
 import {toast} from 'react-toastify';

-const userName = 'M E';
-const botName = 'A I';
+export const userName = 'M E';
+export const botName = 'A I';

-enum MessageType {
+export enum MessageType {
  Normal,
  Error
 }

-type Side = 'left' | 'right'
+export type Side = 'left' | 'right'

-type Color = 'neutral' | 'brand' | 'colorful'
+export type Color = 'neutral' | 'brand' | 'colorful'

-type MessageItem = {
+export type MessageItem = {
  sender: string,
  type: MessageType,
  color: Color,
@@ -41,26 +41,13 @@ type MessageItem = {
  done: boolean
 }

-type Conversations = {
+export type Conversations = {
  [uuid: string]: MessageItem
 }

 const ChatPanel: FC = observer(() => {
  const {t} = useTranslation();
  const [message, setMessage] = useState('');
-  const [conversations, setConversations] = useState<Conversations>({
-    'welcome': {
-      sender: botName,
-      type: MessageType.Normal,
-      color: 'colorful',
-      avatarImg: logo,
-      time: new Date().toISOString(),
-      content: t('Hello! I\'m RWKV, an open-source and commercially available large language model.'),
-      side: 'left',
-      done: true
-    }
-  });
-  const [conversationsOrder, setConversationsOrder] = useState<string[]>(['welcome']);
  const bodyRef = useRef<HTMLDivElement>(null);
  const inputRef = useRef<HTMLTextAreaElement>(null);
  const port = commonStore.getCurrentModelConfig().apiParameters.apiPort;
@@ -68,9 +55,9 @@ const ChatPanel: FC = observer(() => {

  let lastMessageId: string;
  let generating: boolean = false;
-  if (conversationsOrder.length > 0) {
-    lastMessageId = conversationsOrder[conversationsOrder.length - 1];
-    const lastMessage = conversations[lastMessageId];
+  if (commonStore.conversationsOrder.length > 0) {
+    lastMessageId = commonStore.conversationsOrder[commonStore.conversationsOrder.length - 1];
+    const lastMessage = commonStore.conversations[lastMessageId];
    if (lastMessage.sender === botName)
      generating = !lastMessage.done;
  }
@@ -80,6 +67,24 @@ const ChatPanel: FC = observer(() => {
      inputRef.current.style.maxHeight = '16rem';
  }, []);

+  useEffect(() => {
+    if (commonStore.conversationsOrder.length === 0) {
+      commonStore.setConversationsOrder(['welcome']);
+      commonStore.setConversations({
+        'welcome': {
+          sender: botName,
+          type: MessageType.Normal,
+          color: 'colorful',
+          avatarImg: logo,
+          time: new Date().toISOString(),
+          content: t('Hello! I\'m RWKV, an open-source and commercially available large language model.'),
+          side: 'left',
+          done: true
+        }
+      });
+    }
+  }, []);
+
  const scrollToBottom = () => {
    if (bodyRef.current)
      bodyRef.current.scrollTop = bodyRef.current.scrollHeight;
@@ -101,7 +106,7 @@ const ChatPanel: FC = observer(() => {

  const onSubmit = (message: string) => {
    const newId = uuid();
-    conversations[newId] = {
+    commonStore.conversations[newId] = {
      sender: userName,
      type: MessageType.Normal,
      color: 'brand',
@@ -110,17 +115,17 @@ const ChatPanel: FC = observer(() => {
      side: 'right',
      done: true
    };
-    setConversations(conversations);
-    conversationsOrder.push(newId);
-    setConversationsOrder(conversationsOrder);
+    commonStore.setConversations(commonStore.conversations);
+    commonStore.conversationsOrder.push(newId);
+    commonStore.setConversationsOrder(commonStore.conversationsOrder);

    const records: Record[] = [];
-    conversationsOrder.forEach((uuid, index) => {
-      const conversation = conversations[uuid];
+    commonStore.conversationsOrder.forEach((uuid, index) => {
+      const conversation = commonStore.conversations[uuid];
      if (conversation.done && conversation.type === MessageType.Normal && conversation.sender === botName) {
        if (index > 0) {
-          const questionId = conversationsOrder[index - 1];
-          const question = conversations[questionId];
+          const questionId = commonStore.conversationsOrder[index - 1];
+          const question = commonStore.conversations[questionId];
          if (question.done && question.type === MessageType.Normal && question.sender === userName) {
            records.push({question: question.content, answer: conversation.content});
          }
@@ -131,7 +136,7 @@ const ChatPanel: FC = observer(() => {
    (messages as ConversationPair[]).push({role: 'user', content: message});

    const answerId = uuid();
-    conversations[answerId] = {
+    commonStore.conversations[answerId] = {
      sender: botName,
      type: MessageType.Normal,
      color: 'colorful',
@@ -141,9 +146,9 @@ const ChatPanel: FC = observer(() => {
      side: 'left',
      done: false
    };
-    setConversations(conversations);
-    conversationsOrder.push(answerId);
-    setConversationsOrder(conversationsOrder);
+    commonStore.setConversations(commonStore.conversations);
+    commonStore.conversationsOrder.push(answerId);
+    commonStore.setConversationsOrder(commonStore.conversationsOrder);
    setTimeout(scrollToBottom);
    let answer = '';
    sseControllerRef.current = new AbortController();
@@ -164,9 +169,9 @@ const ChatPanel: FC = observer(() => {
          console.log('sse message', e);
          scrollToBottom();
          if (e.data === '[DONE]') {
-            conversations[answerId].done = true;
-            setConversations(conversations);
-            setConversationsOrder([...conversationsOrder]);
+            commonStore.conversations[answerId].done = true;
+            commonStore.setConversations(commonStore.conversations);
+            commonStore.setConversationsOrder([...commonStore.conversationsOrder]);
            return;
          }
          let data;
@@ -178,19 +183,19 @@ const ChatPanel: FC = observer(() => {
          }
          if (data.choices && Array.isArray(data.choices) && data.choices.length > 0) {
            answer += data.choices[0]?.delta?.content || '';
-            conversations[answerId].content = answer;
-            setConversations(conversations);
-            setConversationsOrder([...conversationsOrder]);
+            commonStore.conversations[answerId].content = answer;
+            commonStore.setConversations(commonStore.conversations);
+            commonStore.setConversationsOrder([...commonStore.conversationsOrder]);
          }
        },
        onclose() {
          console.log('Connection closed');
        },
        onerror(err) {
-          conversations[answerId].type = MessageType.Error;
-          conversations[answerId].done = true;
-          setConversations(conversations);
-          setConversationsOrder([...conversationsOrder]);
+          commonStore.conversations[answerId].type = MessageType.Error;
+          commonStore.conversations[answerId].done = true;
+          commonStore.setConversations(commonStore.conversations);
+          commonStore.setConversationsOrder([...commonStore.conversationsOrder]);
          throw err;
        }
      });
@@ -199,8 +204,8 @@ const ChatPanel: FC = observer(() => {
  return (
    <div className="flex flex-col w-full grow gap-4 pt-4 overflow-hidden">
      <div ref={bodyRef} className="grow overflow-y-scroll overflow-x-hidden pr-2">
-        {conversationsOrder.map((uuid, index) => {
-          const conversation = conversations[uuid];
+        {commonStore.conversationsOrder.map((uuid, index) => {
+          const conversation = commonStore.conversations[uuid];
          return <div
            key={uuid}
            className={classnames(
@@ -250,8 +255,8 @@ const ChatPanel: FC = observer(() => {
                       icon={<Delete28Regular/>}
                       size="large" shape="circular" appearance="subtle"
                       onClick={(e) => {
-                         setConversations({});
-                         setConversationsOrder([]);
+                         commonStore.setConversations({});
+                         commonStore.setConversationsOrder([]);
                       }}
        />
        <Textarea
@@ -270,10 +275,10 @@ const ChatPanel: FC = observer(() => {
                         if (generating) {
                           sseControllerRef.current?.abort();
                           if (lastMessageId) {
-                             conversations[lastMessageId].type = MessageType.Error;
-                             conversations[lastMessageId].done = true;
-                             setConversations(conversations);
-                             setConversationsOrder([...conversationsOrder]);
+                             commonStore.conversations[lastMessageId].type = MessageType.Error;
+                             commonStore.conversations[lastMessageId].done = true;
+                             commonStore.setConversations(commonStore.conversations);
+                             commonStore.setConversationsOrder([...commonStore.conversationsOrder]);
                           }
                         } else {
                           handleKeyDownOrClick(e);
--- a/frontend/src/pages/Configs.tsx
+++ b/frontend/src/pages/Configs.tsx
@@ -4,7 +4,7 @@ import React, {FC} from 'react';
 import {Section} from '../components/Section';
 import {Labeled} from '../components/Labeled';
 import {ToolTipButton} from '../components/ToolTipButton';
-import commonStore, {ApiParameters, Device, ModelParameters, Precision} from '../stores/commonStore';
+import commonStore from '../stores/commonStore';
 import {observer} from 'mobx-react-lite';
 import {toast} from 'react-toastify';
 import {ValuedSlider} from '../components/ValuedSlider';
@@ -18,6 +18,57 @@ import manifest from '../../../manifest.json';
 import {getStrategy, refreshLocalModels} from '../utils';
 import {useTranslation} from 'react-i18next';

+export type ApiParameters = {
+  apiPort: number
+  maxResponseToken: number;
+  temperature: number;
+  topP: number;
+  presencePenalty: number;
+  frequencyPenalty: number;
+}
+
+export type Device = 'CPU' | 'CUDA';
+export type Precision = 'fp16' | 'int8' | 'fp32';
+
+export type ModelParameters = {
+  // different models can not have the same name
+  modelName: string;
+  device: Device;
+  precision: Precision;
+  storedLayers: number;
+  maxStoredLayers: number;
+  enableHighPrecisionForLastLayer: boolean;
+}
+
+export type ModelConfig = {
+  // different configs can have the same name
+  name: string;
+  apiParameters: ApiParameters
+  modelParameters: ModelParameters
+}
+
+export const defaultModelConfigs: ModelConfig[] = [
+  {
+    name: 'Default',
+    apiParameters: {
+      apiPort: 8000,
+      maxResponseToken: 4100,
+      temperature: 1,
+      topP: 1,
+      presencePenalty: 0,
+      frequencyPenalty: 0
+    },
+    modelParameters: {
+      modelName: 'RWKV-4-Raven-1B5-v11-Eng99%-Other1%-20230425-ctx4096.pth',
+      device: 'CUDA',
+      precision: 'fp16',
+      storedLayers: 25,
+      maxStoredLayers: 25,
+      enableHighPrecisionForLastLayer: false
+    }
+  }
+];
+
 export const Configs: FC = observer(() => {
  const {t} = useTranslation();
  const [selectedIndex, setSelectedIndex] = React.useState(commonStore.currentModelConfigIndex);
--- a/frontend/src/pages/Downloads.tsx
+++ b/frontend/src/pages/Downloads.tsx
@@ -9,6 +9,18 @@ import {ToolTipButton} from '../components/ToolTipButton';
 import {Folder20Regular, Pause20Regular, Play20Regular} from '@fluentui/react-icons';
 import {ContinueDownload, OpenFileFolder, PauseDownload} from '../../wailsjs/go/backend_golang/App';

+export type DownloadStatus = {
+  name: string;
+  path: string;
+  url: string;
+  transferred: number;
+  size: number;
+  speed: number;
+  progress: number;
+  downloading: boolean;
+  done: boolean;
+}
+
 export const Downloads: FC = observer(() => {
  const {t} = useTranslation();
  const finishedDownloads = commonStore.downloadList.filter((status) => status.done).length;
--- a/frontend/src/pages/Models.tsx
+++ b/frontend/src/pages/Models.tsx
@@ -15,7 +15,7 @@ import {
 import {ToolTipButton} from '../components/ToolTipButton';
 import {ArrowClockwise20Regular, ArrowDownload20Regular, Folder20Regular, Open20Regular} from '@fluentui/react-icons';
 import {observer} from 'mobx-react-lite';
-import commonStore, {ModelSourceItem} from '../stores/commonStore';
+import commonStore from '../stores/commonStore';
 import {BrowserOpenURL} from '../../wailsjs/runtime';
 import {AddToDownloadList, OpenFileFolder} from '../../wailsjs/go/backend_golang/App';
 import manifest from '../../../manifest.json';
@@ -24,6 +24,18 @@ import {bytesToGb, refreshModels, saveConfigs, toastWithButton} from '../utils';
 import {useTranslation} from 'react-i18next';
 import {useNavigate} from 'react-router';

+export type ModelSourceItem = {
+  name: string;
+  size: number;
+  lastUpdated: string;
+  desc?: { [lang: string]: string; };
+  SHA256?: string;
+  url?: string;
+  downloadUrl?: string;
+  isLocal?: boolean;
+  lastUpdatedMs?: number;
+};
+
 const columns: TableColumnDefinition<ModelSourceItem>[] = [
  createTableColumn<ModelSourceItem>({
    columnId: 'file',
--- a/frontend/src/pages/Settings.tsx
+++ b/frontend/src/pages/Settings.tsx
@@ -5,7 +5,20 @@ import {Labeled} from '../components/Labeled';
 import commonStore from '../stores/commonStore';
 import {observer} from 'mobx-react-lite';
 import {useTranslation} from 'react-i18next';
-import {checkUpdate, Language, Languages} from '../utils';
+import {checkUpdate} from '../utils';
+
+export const Languages = {
+  dev: 'English', // i18n default
+  zh: '简体中文'
+};
+
+export type Language = keyof typeof Languages;
+
+export type Settings = {
+  language: Language,
+  darkMode: boolean
+  autoUpdatesCheck: boolean
+}

 export const Settings: FC = observer(() => {
  const {t, i18n} = useTranslation();