Completion Page

2023-05-24 21:27:23 +08:00
parent bcb38d991a
commit c7ed4b07c2
8 changed files with 405 additions and 49 deletions
--- a/frontend/src/pages/Chat.tsx
+++ b/frontend/src/pages/Chat.tsx
@@ -1,11 +1,8 @@
 import React, { FC, useEffect, useRef, useState } from 'react';
 import { useTranslation } from 'react-i18next';
-import { RunButton } from '../components/RunButton';
-import { Avatar, Divider, PresenceBadge, Text, Textarea } from '@fluentui/react-components';
+import { Avatar, PresenceBadge, Textarea } from '@fluentui/react-components';
 import commonStore, { ModelStatus } from '../stores/commonStore';
 import { observer } from 'mobx-react-lite';
-import { PresenceBadgeStatus } from '@fluentui/react-badge';
-import { ConfigSelector } from '../components/ConfigSelector';
 import { v4 as uuid } from 'uuid';
 import classnames from 'classnames';
 import { fetchEventSource } from '@microsoft/fetch-event-source';
@@ -17,6 +14,7 @@ import { ArrowCircleUp28Regular, Delete28Regular, RecordStop28Regular } from '@f
 import { CopyButton } from '../components/CopyButton';
 import { ReadButton } from '../components/ReadButton';
 import { toast } from 'react-toastify';
+import { WorkHeader } from '../components/WorkHeader';

 export const userName = 'M E';
 export const botName = 'A I';
@@ -293,40 +291,10 @@ const ChatPanel: FC = observer(() => {
  );
 });

-const statusText = {
-  [ModelStatus.Offline]: 'Offline',
-  [ModelStatus.Starting]: 'Starting',
-  [ModelStatus.Loading]: 'Loading',
-  [ModelStatus.Working]: 'Working'
-};
-
-const badgeStatus: { [modelStatus: number]: PresenceBadgeStatus } = {
-  [ModelStatus.Offline]: 'unknown',
-  [ModelStatus.Starting]: 'away',
-  [ModelStatus.Loading]: 'away',
-  [ModelStatus.Working]: 'available'
-};
-
 export const Chat: FC = observer(() => {
-  const { t } = useTranslation();
-  const port = commonStore.getCurrentModelConfig().apiParameters.apiPort;
-
  return (
    <div className="flex flex-col gap-1 p-2 h-full overflow-hidden">
-      <div className="flex justify-between items-center">
-        <div className="flex items-center gap-2">
-          <PresenceBadge status={badgeStatus[commonStore.status.modelStatus]} />
-          <Text size={100}>{t('Model Status') + ': ' + t(statusText[commonStore.status.modelStatus])}</Text>
-        </div>
-        <div className="flex items-center gap-2">
-          <ConfigSelector size="small" />
-          <RunButton iconMode />
-        </div>
-      </div>
-      <Text size={100}>
-        {t('This tool\'s API is compatible with OpenAI API. It can be used with any ChatGPT tool you like. Go to the settings of some ChatGPT tool, replace the \'https://api.openai.com\' part in the API address with \'') + `http://127.0.0.1:${port}` + '\'.'}
-      </Text>
-      <Divider style={{ flexGrow: 0 }} />
+      <WorkHeader />
      <ChatPanel />
    </div>
  );
--- a/frontend/src/pages/Completion.tsx
+++ b/frontend/src/pages/Completion.tsx
@@ -0,0 +1,302 @@
+import React, { FC, useEffect, useRef } from 'react';
+import { observer } from 'mobx-react-lite';
+import { WorkHeader } from '../components/WorkHeader';
+import { Button, Dropdown, Input, Option, Textarea } from '@fluentui/react-components';
+import { Labeled } from '../components/Labeled';
+import { ValuedSlider } from '../components/ValuedSlider';
+import { useTranslation } from 'react-i18next';
+import { ApiParameters } from './Configs';
+import commonStore, { ModelStatus } from '../stores/commonStore';
+import { fetchEventSource } from '@microsoft/fetch-event-source';
+import { toast } from 'react-toastify';
+
+export type CompletionParams = Omit<ApiParameters, 'apiPort'> & { stop: string }
+
+export type CompletionPreset = {
+  name: string,
+  prompt: string,
+  params: CompletionParams
+}
+
+export const defaultPresets: CompletionPreset[] = [{
+  name: 'Writer',
+  prompt: '以下是不朽的科幻史诗巨著，描写细腻，刻画了宏大的星际文明战争。\n第一章\n',
+  params: {
+    maxResponseToken: 4100,
+    temperature: 1,
+    topP: 0.5,
+    presencePenalty: 0.4,
+    frequencyPenalty: 0.4,
+    stop: ''
+  }
+}, {
+  name: 'Translator',
+  prompt: '',
+  params: {
+    maxResponseToken: 4100,
+    temperature: 1,
+    topP: 0.5,
+    presencePenalty: 0.4,
+    frequencyPenalty: 0.4,
+    stop: ''
+  }
+}, {
+  name: 'Catgirl',
+  prompt: '',
+  params: {
+    maxResponseToken: 4100,
+    temperature: 1,
+    topP: 0.5,
+    presencePenalty: 0.4,
+    frequencyPenalty: 0.4,
+    stop: ''
+  }
+}, {
+  name: 'Explain Code',
+  prompt: '',
+  params: {
+    maxResponseToken: 4100,
+    temperature: 1,
+    topP: 0.5,
+    presencePenalty: 0.4,
+    frequencyPenalty: 0.4,
+    stop: ''
+  }
+}, {
+  name: 'Werewolf',
+  prompt: '',
+  params: {
+    maxResponseToken: 4100,
+    temperature: 1,
+    topP: 0.5,
+    presencePenalty: 0.4,
+    frequencyPenalty: 0.4,
+    stop: ''
+  }
+}, {
+  name: 'Blank',
+  prompt: '',
+  params: {
+    maxResponseToken: 4100,
+    temperature: 1,
+    topP: 0.5,
+    presencePenalty: 0.4,
+    frequencyPenalty: 0.4,
+    stop: ''
+  }
+}];
+
+const CompletionPanel: FC = observer(() => {
+  const { t } = useTranslation();
+  const inputRef = useRef<HTMLTextAreaElement>(null);
+  const port = commonStore.getCurrentModelConfig().apiParameters.apiPort;
+  const sseControllerRef = useRef<AbortController | null>(null);
+
+  const scrollToBottom = () => {
+    if (inputRef.current)
+      inputRef.current.scrollTop = inputRef.current.scrollHeight;
+  };
+
+  useEffect(() => {
+    if (inputRef.current)
+      inputRef.current.style.height = '100%';
+    scrollToBottom();
+  }, []);
+
+  if (!commonStore.completionPreset)
+    commonStore.setCompletionPreset(defaultPresets[0]);
+
+  const name = commonStore.completionPreset!.name;
+
+  const prompt = commonStore.completionPreset!.prompt;
+  const setPrompt = (prompt: string) => {
+    commonStore.setCompletionPreset({
+      ...commonStore.completionPreset!,
+      prompt
+    });
+  };
+
+  const params = commonStore.completionPreset!.params;
+  const setParams = (newParams: Partial<CompletionParams>) => {
+    commonStore.setCompletionPreset({
+      ...commonStore.completionPreset!,
+      params: {
+        ...commonStore.completionPreset!.params,
+        ...newParams
+      }
+    });
+  };
+
+  const onSubmit = (prompt: string) => {
+    if (commonStore.status.modelStatus === ModelStatus.Offline) {
+      toast(t('Please click the button in the top right corner to start the model'), { type: 'warning' });
+      return;
+    }
+
+    let answer = '';
+    sseControllerRef.current = new AbortController();
+    fetchEventSource(`http://127.0.0.1:${port}/completions`, // https://api.openai.com/v1/completions || http://127.0.0.1:${port}/completions
+      {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+          Authorization: `Bearer sk-`
+        },
+        body: JSON.stringify({
+          prompt,
+          stream: true,
+          model: 'text-davinci-003',
+          max_tokens: params.maxResponseToken,
+          temperature: params.temperature,
+          top_p: params.topP,
+          presence_penalty: params.presencePenalty,
+          frequency_penalty: params.frequencyPenalty,
+          stop: params.stop || undefined
+        }),
+        signal: sseControllerRef.current?.signal,
+        onmessage(e) {
+          console.log('sse message', e);
+          scrollToBottom();
+          if (e.data === '[DONE]') {
+            commonStore.setCompletionGenerating(false);
+            return;
+          }
+          let data;
+          try {
+            data = JSON.parse(e.data);
+          } catch (error) {
+            console.debug('json error', error);
+            return;
+          }
+          if (data.choices && Array.isArray(data.choices) && data.choices.length > 0) {
+            answer += data.choices[0].text;
+            setPrompt(prompt + answer);
+          }
+        },
+        onclose() {
+          console.log('Connection closed');
+        },
+        onerror(err) {
+          commonStore.setCompletionGenerating(false);
+          throw err;
+        }
+      });
+  };
+
+  return (
+    <div className="flex flex-col sm:flex-row gap-2 overflow-hidden grow">
+      <Textarea
+        ref={inputRef}
+        className="grow"
+        value={prompt}
+        onChange={(e) => setPrompt(e.target.value)}
+      />
+      <div className="flex flex-col gap-1 max-h-48 sm:max-w-sm sm:max-h-full">
+        <Dropdown style={{ minWidth: 0 }}
+          value={t(commonStore.completionPreset!.name)!}
+          selectedOptions={[commonStore.completionPreset!.name]}
+          onOptionSelect={(_, data) => {
+            if (data.optionValue) {
+              commonStore.setCompletionPreset(defaultPresets.find((preset) => preset.name === data.optionValue)!);
+            }
+          }}>
+          {
+            defaultPresets.map((preset) =>
+              <Option key={preset.name} value={preset.name}>{t(preset.name)!}</Option>)
+          }
+        </Dropdown>
+        <div className="flex flex-col gap-1 overflow-x-hidden overflow-y-auto">
+          <Labeled flex breakline label={t('Max Response Token')}
+            desc={t('By default, the maximum number of tokens that can be answered in a single response, it can be changed by the user by specifying API parameters.')}
+            content={
+              <ValuedSlider value={params.maxResponseToken} min={100} max={8100}
+                step={400}
+                input
+                onChange={(e, data) => {
+                  setParams({
+                    maxResponseToken: data.value
+                  });
+                }} />
+            } />
+          <Labeled flex breakline label={t('Temperature')}
+            desc={t('Sampling temperature, the higher the stronger the randomness and creativity, while the lower, the more focused and deterministic it will be.')}
+            content={
+              <ValuedSlider value={params.temperature} min={0} max={2} step={0.1}
+                input
+                onChange={(e, data) => {
+                  setParams({
+                    temperature: data.value
+                  });
+                }} />
+            } />
+          <Labeled flex breakline label={t('Top_P')}
+            desc={t('Consider the results of the top n% probability mass, 0.1 considers the top 10%, with higher quality but more conservative, 1 considers all results, with lower quality but more diverse.')}
+            content={
+              <ValuedSlider value={params.topP} min={0} max={1} step={0.1} input
+                onChange={(e, data) => {
+                  setParams({
+                    topP: data.value
+                  });
+                }} />
+            } />
+          <Labeled flex breakline label={t('Presence Penalty')}
+            desc={t('Positive values penalize new tokens based on whether they appear in the text so far, increasing the model\'s likelihood to talk about new topics.')}
+            content={
+              <ValuedSlider value={params.presencePenalty} min={-2} max={2}
+                step={0.1} input
+                onChange={(e, data) => {
+                  setParams({
+                    presencePenalty: data.value
+                  });
+                }} />
+            } />
+          <Labeled flex breakline label={t('Frequency Penalty')}
+            desc={t('Positive values penalize new tokens based on their existing frequency in the text so far, decreasing the model\'s likelihood to repeat the same line verbatim.')}
+            content={
+              <ValuedSlider value={params.frequencyPenalty} min={-2} max={2}
+                step={0.1} input
+                onChange={(e, data) => {
+                  setParams({
+                    frequencyPenalty: data.value
+                  });
+                }} />
+            } />
+          <Labeled flex breakline label={t('Stop Sequences')}
+            desc={t('When this content appears in the response result, the generation will end.')}
+            content={
+              <Input value={params.stop}
+                onChange={(e, data) => {
+                  setParams({
+                    stop: data.value
+                  });
+                }} />
+            } />
+        </div>
+        <div className="grow" />
+        <div className="flex justify-between gap-2">
+          <Button className="grow" onClick={() => {
+            commonStore.setCompletionPreset(defaultPresets.find((preset) => preset.name === name)!);
+          }}>{t('Reset')}</Button>
+          <Button className="grow" appearance="primary" onClick={() => {
+            if (commonStore.completionGenerating) {
+              sseControllerRef.current?.abort();
+              commonStore.setCompletionGenerating(false);
+            } else {
+              commonStore.setCompletionGenerating(true);
+              onSubmit(prompt);
+            }
+          }}>{!commonStore.completionGenerating ? t('Generate') : t('Stop')}</Button>
+        </div>
+      </div>
+    </div>
+  );
+});
+
+export const Completion: FC = observer(() => {
+  return (
+    <div className="flex flex-col gap-1 p-2 h-full overflow-hidden">
+      <WorkHeader />
+      <CompletionPanel />
+    </div>
+  );
+});
--- a/frontend/src/pages/Configs.tsx
+++ b/frontend/src/pages/Configs.tsx
@@ -643,7 +643,7 @@ export const Configs: FC = observer(() => {
                        });
                      }} />
                  } />
-                <Labeled label={t('Max Response Token *')}
+                <Labeled label={t('Max Response Token') + ' *'}
                  desc={t('By default, the maximum number of tokens that can be answered in a single response, it can be changed by the user by specifying API parameters.')}
                  content={
                    <ValuedSlider value={selectedConfig.apiParameters.maxResponseToken} min={100} max={8100}
@@ -655,7 +655,7 @@ export const Configs: FC = observer(() => {
                        });
                      }} />
                  } />
-                <Labeled label={t('Temperature *')}
+                <Labeled label={t('Temperature') + ' *'}
                  desc={t('Sampling temperature, the higher the stronger the randomness and creativity, while the lower, the more focused and deterministic it will be.')}
                  content={
                    <ValuedSlider value={selectedConfig.apiParameters.temperature} min={0} max={2} step={0.1}
@@ -666,7 +666,7 @@ export const Configs: FC = observer(() => {
                        });
                      }} />
                  } />
-                <Labeled label={t('Top_P *')}
+                <Labeled label={t('Top_P') + ' *'}
                  desc={t('Consider the results of the top n% probability mass, 0.1 considers the top 10%, with higher quality but more conservative, 1 considers all results, with lower quality but more diverse.')}
                  content={
                    <ValuedSlider value={selectedConfig.apiParameters.topP} min={0} max={1} step={0.1} input
@@ -676,7 +676,7 @@ export const Configs: FC = observer(() => {
                        });
                      }} />
                  } />
-                <Labeled label={t('Presence Penalty *')}
+                <Labeled label={t('Presence Penalty') + ' *'}
                  desc={t('Positive values penalize new tokens based on whether they appear in the text so far, increasing the model\'s likelihood to talk about new topics.')}
                  content={
                    <ValuedSlider value={selectedConfig.apiParameters.presencePenalty} min={-2} max={2}
@@ -687,7 +687,7 @@ export const Configs: FC = observer(() => {
                        });
                      }} />
                  } />
-                <Labeled label={t('Frequency Penalty *')}
+                <Labeled label={t('Frequency Penalty') + ' *'}
                  desc={t('Positive values penalize new tokens based on their existing frequency in the text so far, decreasing the model\'s likelihood to repeat the same line verbatim.')}
                  content={
                    <ValuedSlider value={selectedConfig.apiParameters.frequencyPenalty} min={-2} max={2}
--- a/frontend/src/pages/index.tsx
+++ b/frontend/src/pages/index.tsx
@@ -3,6 +3,7 @@ import { Configs } from './Configs';
 import {
  ArrowDownload20Regular,
  Chat20Regular,
+  ClipboardEdit20Regular,
  DataUsageSettings20Regular,
  DocumentSettings20Regular,
  Home20Regular,
@@ -17,6 +18,7 @@ import { Train } from './Train';
 import { Settings } from './Settings';
 import { About } from './About';
 import { Downloads } from './Downloads';
+import { Completion } from './Completion';

 type NavigationItem = {
  label: string;
@@ -41,6 +43,13 @@ export const pages: NavigationItem[] = [
    element: <Chat />,
    top: true
  },
+  {
+    label: 'Completion',
+    path: '/completion',
+    icon: <ClipboardEdit20Regular />,
+    element: <Completion />,
+    top: true
+  },
  {
    label: 'Configs',
    path: '/configs',