fix: image generating flickering, #1415

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}