chore: reduce re-render times for params in playground

src/layouts/index.tsx

@@ -359,18 +359,18 @@ export default (props: any) => {
   };
 
   useEffect(() => {
-    // 先清除旧的性能标记
+    // clear previous marks and measures
     performance.clearMarks();
     performance.clearMeasures();
 
-    // 记录开始时间
+    // record start time
     performance.mark('route-start');
 
     requestAnimationFrame(() => {
-      // 记录结束时间
+      // record end time
       performance.mark('route-end');
 
-      // 确保 `route-start` 存在后再测量
+      // make sure `route-start` exists
       if (performance.getEntriesByName('route-start').length > 0) {
         performance.measure('route-change', 'route-start', 'route-end');
 
@@ -379,7 +379,7 @@ export default (props: any) => {
           `[Performance] Route change to ${location.pathname} took ${measure.duration.toFixed(2)}ms`
         );
 
-        // 清理标记
+        // clear marks and measures
         performance.clearMarks();
         performance.clearMeasures();
       } else {

src/pages/llmodels/config/llama-config.ts

@@ -588,6 +588,10 @@ const options = [
   {
     label: '--jinja',
     value: '--jinja'
+  },
+  {
+    label: '--context-shift',
+    value: '--context-shift'
   }
 ];
 

src/pages/playground/components/dynamic-params.tsx

@@ -24,7 +24,8 @@ type ParamsSettingsProps = {
   paramsConfig?: ParamsSchema[];
   initialValues?: Record<string, any>; // for initial values when switch model, aviod update values from setParams
   extra?: React.ReactNode;
-  watchFields?: any[];
+  watchFields?: string[];
+  formFields?: string;
 };
 
 const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
@@ -36,7 +37,8 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
       initialValues,
       paramsConfig,
       modelList,
-      watchFields = [],
+      watchFields,
+      formFields,
       showModelSelector = true,
       extra
     },
@@ -86,7 +88,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
     );
 
     const renderFields = useMemo(() => {
-      if (!paramsConfig) {
+      if (!paramsConfig?.length) {
         return null;
       }
       console.log('renderFields---------');
@@ -123,7 +125,7 @@ const ParamsSettings: React.FC<ParamsSettingsProps> = forwardRef(
           </Form.Item>
         );
       });
-    }, [paramsConfig, intl, watchFields]);
+    }, [formFields, intl, watchFields]);
 
     return (
       <Form

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

@@ -444,7 +444,7 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
         handleOnValuesChange(changeValues, allValues);
       }
     },
-    [handleOnValuesChange]
+    []
   );
 
   useHotkeys(

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

@@ -50,6 +50,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     setParams,
     form,
     watchFields,
+    formFields,
     paramsConfig,
     initialValues,
     parameters,
@@ -298,6 +299,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
           <DynamicParams
             ref={form}
             watchFields={watchFields}
+            formFields={formFields}
             parametersTitle={
               <div className="flex-between flex-center">
                 <span>

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

@@ -431,16 +431,13 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
     setIsEmptyText(false);
   };
 
-  const onValuesChange = useCallback(
-    (changedValues: any, allValues: any) => {
-      if (changedValues.model) {
-        setTokenResult(null);
-      } else {
-        handleOnValuesChange(changedValues, allValues);
-      }
-    },
-    [handleOnValuesChange]
-  );
+  const onValuesChange = useCallback((changedValues: any, allValues: any) => {
+    if (changedValues.model) {
+      setTokenResult(null);
+    } else {
+      handleOnValuesChange(changedValues, allValues);
+    }
+  }, []);
 
   useHotkeys(
     HotKeys.SUBMIT,

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

@@ -75,6 +75,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     setParamsConfig,
     form,
     watchFields,
+    formFields,
     paramsConfig,
     initialValues,
     parameters,
@@ -527,6 +528,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
             <DynamicParams
               ref={form}
               watchFields={watchFields}
+              formFields={formFields}
               parametersTitle={
                 <div className="flex-between flex-center">
                   <span>

src/pages/playground/hooks/use-init-meta.ts

@@ -366,6 +366,11 @@ export const useInitImageMeta = (props: MessageProps) => {
     });
   };
 
+  const formFields = useMemo(() => {
+    const fields = paramsConfig?.map((item) => item.name);
+    return fields?.join(',');
+  }, [paramsConfig]);
+
   const handleOnModelChange = useCallback(
     (val: string) => {
       if (!val || val === parameters.model) return;
@@ -461,6 +466,7 @@ export const useInitImageMeta = (props: MessageProps) => {
     updateParamsConfig,
     setParamsConfig,
     form,
+    formFields,
     watchFields,
     paramsConfig,
     initialValues,