fix: image generating flickering, #1415

2025-07-02 19:33:33 +08:00
parent 993f01a301
commit 6c2da264db
6 changed files with 118 additions and 13 deletions
@@ -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
@@ -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;
  }

@@ -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">
@@ -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={
@@ -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}
@@ -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: [
+      'Регулярные перерывы помогают поддерживать концентрацию.',
+      'Учёба ночью может быть неэффективной.',
+      'Прогулка на свежем воздухе улучшает работу мозга.'
+    ]
+  }
+};