fix: image generating flickering, #1415

src/components/seal-form/simple-select.tsx

@@ -53,7 +53,6 @@ const SimpleSelect: React.FC<SelectProps> = (props) => {
     checked: false,
     indeterminate: false
   });
-  const [searchValue, setSearchValue] = React.useState<string>('');
   const [optionsList, setOptionsList] = React.useState<any[]>(options || []);
   const selectRef = React.useRef<any>(null);
 
@@ -79,8 +78,6 @@ const SimpleSelect: React.FC<SelectProps> = (props) => {
     const isChecked = e.target.checked;
     const allValues = optionsList?.map((opt: any) => opt.value) || [];
 
-    console.log('isChecked', isChecked, allValues);
-
     setAllSelection({
       checked: isChecked,
       indeterminate: false
@@ -163,8 +160,6 @@ const SimpleSelect: React.FC<SelectProps> = (props) => {
       selectedValues.has(val)
     );
 
-    console.log('isAllSelected', isAllSelected, selectedValues, allValues);
-
     setAllSelection({
       checked: isAllSelected,
       indeterminate: isSomeSelected && !isAllSelected

src/global.less

@@ -758,7 +758,7 @@ body {
 
   &.scatter {
     display: grid;
-    grid-template-columns: repeat(2, minmax(0, 1fr));
+    grid-template-columns: repeat(auto-fit, minmax(48%, 1fr));
     gap: 8px;
   }
 

src/pages/playground/components/ground-embedding.tsx

@@ -29,6 +29,7 @@ import React, {
 } from 'react';
 import { EMBEDDING_API, handleEmbedding } from '../apis';
 import { extractErrorMessage } from '../config';
+import { embeddingSamples } from '../config/samples';
 import { LLM_METAKEYS } from '../hooks/config';
 import useEmbeddingWorker from '../hooks/use-embedding-worker';
 import { useInitLLmMeta } from '../hooks/use-init-meta';
@@ -49,7 +50,6 @@ interface MessageProps {
 
 const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
   const { modelList } = props;
-  const messageId = useRef<number>(0);
 
   const intl = useIntl();
   const { workerRef, createWorker, postMessage, terminateWorker } =
@@ -158,7 +158,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
   }, [textList, fileList]);
 
   const setMessageId = () => {
-    messageId.current = messageId.current + 1;
+    return inputListRef.current?.setMessageId?.();
   };
 
   const handleStopConversation = () => {
@@ -425,6 +425,22 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
     messageListLengthCache.current = textList.length + fileList.length;
   }, [textList.length, fileList.length]);
 
+  useEffect(() => {
+    if (intl.locale || 'en-US') {
+      const sample = embeddingSamples[intl.locale];
+
+      if (sample) {
+        setTextList(
+          sample.map((item: string, index: number) => ({
+            text: item,
+            uid: setMessageId(),
+            name: `Document ${index + 1}`
+          }))
+        );
+      }
+    }
+  }, []);
+
   return (
     <div className="ground-left-wrapper rerank">
       <div className="ground-left">

src/pages/playground/components/ground-reranker.tsx

@@ -34,6 +34,7 @@ import React, {
 import styled from 'styled-components';
 import { rerankerQuery } from '../apis';
 import { extractErrorMessage } from '../config';
+import { rerankerSamples } from '../config/samples';
 import { ParamsSchema } from '../config/types';
 import { LLM_METAKEYS } from '../hooks/config';
 import { useInitLLmMeta } from '../hooks/use-init-meta';
@@ -174,6 +175,30 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
     };
   });
 
+  const setMessageId = () => {
+    const uid = inputListRef.current?.setMessageId();
+    return uid;
+  };
+
+  useEffect(() => {
+    if (intl.locale || 'en-US') {
+      const sample = rerankerSamples[intl.locale];
+      if (sample) {
+        setTextList(
+          sample.documents.map((item: string, index: number) => ({
+            text: item,
+            uid: setMessageId(),
+            name: `Document ${index + 1}`,
+            percent: undefined,
+            score: undefined,
+            rank: undefined
+          }))
+        );
+        setQueryValue(sample.query);
+      }
+    }
+  }, []);
+
   const viewCodeContent = useMemo(() => {
     return generateRerankCode({
       api: '/v1/rerank',
@@ -234,11 +259,6 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
     );
   };
 
-  const setMessageId = () => {
-    const uid = inputListRef.current?.setMessageId();
-    return uid;
-  };
-
   const handleStopConversation = () => {
     requestToken.current?.cancel?.();
     setLoading(false);
@@ -460,6 +480,7 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
           <SearchInputWrapper>
             <Input.Search
               allowClear
+              value={queryValue}
               onSearch={handleSearch}
               onChange={handleQueryChange}
               enterButton={

src/pages/playground/components/image-edit.tsx

@@ -487,6 +487,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
                       <div
                         style={{
                           height: 125,
+                          width: 125,
                           maxHeight: 125
                         }}
                         key={item.uid}
@@ -494,6 +495,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
                         <SingleImage
                           {...item}
                           height={125}
+                          width={125}
                           maxHeight={125}
                           preview={item.preview}
                           loading={item.loading}

src/pages/playground/config/samples.ts

@@ -0,0 +1,71 @@
+export const embeddingSamples: Record<string, string[]> = {
+  'zh-CN': [
+    '最近哪家咖啡店评价最好？',
+    '附近有没有推荐的咖啡厅？',
+    '明天天气预报说会下雨。',
+    '北京是中国的首都。',
+    '我想找一个适合学习的地方。'
+  ],
+  'en-US': [
+    'What are the best cafes nearby?',
+    'Can you recommend a quiet coffee shop?',
+    'I’m planning a trip to Japan next month.',
+    'The capital of France is Paris.',
+    "I'm looking for a place to study."
+  ],
+  'ja-JP': [
+    '近くにおすすめのカフェはありますか？',
+    '静かな喫茶店を探しています。',
+    '明日の天気はどうですか？',
+    '富士山は日本で一番高い山です。',
+    '勉強に集中できる場所を知っていますか？'
+  ],
+  'ru-RU': [
+    'Где находится ближайшая аптека?',
+    'Можете подсказать, где купить лекарства?',
+    'Погода сегодня очень хорошая.',
+    'Я ищу кафе рядом с вокзалом.',
+    'Как добраться до аэропорта?'
+  ]
+};
+
+export const rerankerSamples: Record<
+  string,
+  {
+    query: string;
+    documents: string[];
+  }
+> = {
+  'zh-CN': {
+    query: '',
+    documents: [
+      '保持规律的作息时间，晚上避免使用电子产品。',
+      '参加更多社交活动有助于提高情绪。',
+      '多喝咖啡可以让你更有精神。'
+    ]
+  },
+  'en-US': {
+    query: 'What are the benefits of regular exercise?',
+    documents: [
+      'Regular physical activity helps improve cardiovascular health and mental well-being.',
+      'Eating too much sugar can lead to health issues.',
+      'Exercise is often done in gyms or outdoors.'
+    ]
+  },
+  'ja-JP': {
+    query: '効果的な英語の勉強法は？',
+    documents: [
+      '毎日少しずつでも英語に触れることが大切です。',
+      '睡眠時間を削ると集中力が低下します。',
+      '文法よりも単語を先に覚えましょう。'
+    ]
+  },
+  'ru-RU': {
+    query: 'Как улучшить концентрацию во время учёбы?',
+    documents: [
+      'Регулярные перерывы помогают поддерживать концентрацию.',
+      'Учёба ночью может быть неэффективной.',
+      'Прогулка на свежем воздухе улучшает работу мозга.'
+    ]
+  }
+};