add strategy guides

frontend/src/components/Labeled.tsx

@@ -5,17 +5,23 @@ import classnames from 'classnames';
 export const Labeled: FC<{
   label: string;
   desc?: string | null,
+  descComponent?: ReactElement,
   content: ReactElement,
   flex?: boolean,
   spaceBetween?: boolean,
-  breakline?: boolean
+  breakline?: boolean,
+  onMouseEnter?: () => void
+  onMouseLeave?: () => void
 }> = ({
   label,
   desc,
+  descComponent,
   content,
   flex,
   spaceBetween,
-  breakline
+  breakline,
+  onMouseEnter,
+  onMouseLeave
 }) => {
   return (
     <div className={classnames(
@@ -24,11 +30,11 @@ export const Labeled: FC<{
       breakline ? 'flex-col' : '',
       spaceBetween && 'justify-between')
     }>
-      {desc ?
+      {(desc || descComponent) ?
-        <Tooltip content={desc} showDelay={0} hideDelay={0} relationship="description">
+        <Tooltip content={descComponent ? descComponent : desc!} showDelay={0} hideDelay={0} relationship="description">
-          <Label>{label}</Label>
+          <Label onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>{label}</Label>
         </Tooltip> :
-        <Label>{label}</Label>
+        <Label onMouseEnter={onMouseEnter} onMouseLeave={onMouseLeave}>{label}</Label>
       }
       {content}
     </div>

frontend/src/pages/Chat.tsx

@@ -7,7 +7,7 @@ import { v4 as uuid } from 'uuid';
 import classnames from 'classnames';
 import { fetchEventSource } from '@microsoft/fetch-event-source';
 import { ConversationPair, getConversationPairs, Record } from '../utils/get-conversation-pairs';
-import logo from '../../../build/appicon.jpg';
+import logo from '../assets/images/logo.jpg';
 import MarkdownRender from '../components/MarkdownRender';
 import { ToolTipButton } from '../components/ToolTipButton';
 import { ArrowCircleUp28Regular, Delete28Regular, RecordStop28Regular } from '@fluentui/react-icons';

frontend/src/pages/Configs.tsx

@@ -39,6 +39,8 @@ import { ConvertModel, FileExists } from '../../wailsjs/go/backend_golang/App';
 import { getStrategy, refreshLocalModels } from '../utils';
 import { useTranslation } from 'react-i18next';
 import { WindowShow } from '../../wailsjs/runtime/runtime';
+import strategyImg from '../assets/images/strategy.jpg';
+import strategyZhImg from '../assets/images/strategy_zh.jpg';
 
 export type ApiParameters = {
   apiPort: number
@@ -633,6 +635,7 @@ export const Configs: FC = observer(() => {
   const { t } = useTranslation();
   const [selectedIndex, setSelectedIndex] = React.useState(commonStore.currentModelConfigIndex);
   const [selectedConfig, setSelectedConfig] = React.useState(commonStore.modelConfigs[selectedIndex]);
+  const [displayStrategyImg, setDisplayStrategyImg] = React.useState(false);
   const navigate = useNavigate();
   const port = selectedConfig.apiParameters.apiPort;
 
@@ -928,9 +931,16 @@ export const Configs: FC = observer(() => {
                         }} />
                     } />
                 }
+                {
+                  displayStrategyImg &&
+                  <img style={{ width: '80vh', height: 'auto', zIndex: 100 }} className="fixed left-0 top-0"
+                    src={commonStore.settings.language === 'zh' ? strategyZhImg : strategyImg} />
+                }
                 {
                   selectedConfig.modelParameters.device == 'Custom' &&
-                  <Labeled label="Strategy" desc="https://github.com/BlinkDL/ChatRWKV/blob/main/ChatRWKV-strategy.png"
+                  <Labeled label="Strategy"
+                    onMouseEnter={() => setDisplayStrategyImg(true)}
+                    onMouseLeave={() => setDisplayStrategyImg(false)}
                     content={
                       <Input className="grow" placeholder="cuda:0 fp16 *20 -> cuda:1 fp16"
                         value={selectedConfig.modelParameters.customStrategy}