fix: tts show error message

src/components/seal-form/components/label-info.less

@@ -2,9 +2,13 @@
   display: flex;
   justify-content: flex-start;
   align-items: center;
+  color: rgba(0, 0, 0, 45%);
+  font-size: var(--font-size-base);
+
   .note-info {
     margin-left: 4px;
   }
+
   .star {
     position: relative;
     top: 2px;

src/components/seal-form/field-component.tsx

@@ -1,8 +1,8 @@
 import { ParamsSchema } from '@/pages/playground/config/types';
 import { useIntl } from '@umijs/max';
 import React, { useCallback, useMemo } from 'react';
+import LabelInfo from './components/label-info';
 import componentsMap from './config/components';
-
 const FieldComponent: React.FC<ParamsSchema> = (props) => {
   const intl = useIntl();
   const { type, label, attrs, style, value, ...rest } = props;
@@ -10,7 +10,16 @@ const FieldComponent: React.FC<ParamsSchema> = (props) => {
     (type: string) => {
       switch (type) {
         case 'Checkbox':
-          return <span>{intl.formatMessage({ id: label.text })}</span>;
+          return (
+            <LabelInfo
+              required={props.required}
+              label={
+                label.isLocalized
+                  ? intl.formatMessage({ id: label.text })
+                  : label.text
+              }
+            ></LabelInfo>
+          );
         default:
           return null;
       }

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

@@ -360,7 +360,12 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
     const formValues = form.current?.form?.getFieldsValue();
     return ImageAdvancedParamsConfig.map((item: ParamsSchema) => {
       return (
-        <Form.Item name={item.name} rules={item.rules} key={item.name}>
+        <Form.Item
+          name={item.name}
+          rules={item.rules}
+          key={item.name}
+          noStyle={item.name === 'random_seed'}
+        >
           <FieldComponent
             disabled={
               item.disabledConfig

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

@@ -60,7 +60,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   const [parameters, setParams] = useState<any>({});
   const [show, setShow] = useState(false);
   const [loading, setLoading] = useState(false);
-  const [tokenResult, setTokenResult] = useState<any>(null);
+  const [tokenResult, setTokenResult] = useState<any>();
   const [collapse, setCollapse] = useState(false);
   const controllerRef = useRef<any>(null);
   const scroller = useRef<any>(null);
@@ -96,7 +96,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
   };
 
   const submitMessage = async (current?: { role: string; content: string }) => {
-    // await formRef.current?.form.validateFields();
+    await formRef.current?.form.validateFields();
     if (!parameters.model) return;
     try {
       setLoading(true);
@@ -174,12 +174,26 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
         const res = await queryModelVoices({
           model: value
         });
+        console.log('res:', res);
+        if (res.error) {
+          setTokenResult({
+            error: true,
+            errorMessage:
+              res?.data?.error?.message ||
+              res?.data?.error ||
+              res.error?.detail ||
+              ''
+          });
+          setVoiceList([]);
+          return;
+        }
         const voiceList = _.map(res.voices || [], (item: any) => {
           return {
             label: item,
             value: item
           };
         });
+
         setVoiceList(voiceList);
         setParams((pre: any) => {
           return {
@@ -188,7 +202,16 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
           };
         });
         formRef.current?.form.setFieldValue('voice', voiceList[0]?.value);
-      } catch (error) {
+      } catch (error: any) {
+        const res = error?.response?.data;
+        if (res.error) {
+          setTokenResult({
+            error: true,
+            errorMessage:
+              res?.error?.message || res?.data?.error || res.error?.detail || ''
+          });
+        }
+        console.log('error:', error);
         setVoiceList([]);
         formRef.current?.form.setFieldValue('voice', '');
         setParams((pre: any) => {

src/pages/playground/config/params-config.ts

@@ -322,19 +322,6 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
       }
     ]
   },
-  {
-    type: 'Checkbox',
-    name: 'random_seed',
-    label: {
-      text: 'playground.image.params.randomseed',
-      isLocalized: true
-    },
-    rules: [
-      {
-        required: false
-      }
-    ]
-  },
   {
     type: 'InputNumber',
     name: 'seed',
@@ -354,5 +341,18 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
         required: false
       }
     ]
+  },
+  {
+    type: 'Checkbox',
+    name: 'random_seed',
+    label: {
+      text: 'playground.image.params.randomseed',
+      isLocalized: true
+    },
+    rules: [
+      {
+        required: false
+      }
+    ]
   }
 ];

src/pages/playground/config/types.ts

@@ -1,3 +1,5 @@
+import React from 'react';
+
 export interface ModelSelectionItem extends Global.BaseOption<string> {
   uid: number;
   instanceId: symbol;
@@ -43,8 +45,9 @@ export interface ParamsSchema {
     when: (values: Record<string, any>) => boolean;
   };
   defaultValue?: string | number | boolean;
+  required?: boolean;
   rules: { required: boolean; message?: string }[];
-  placeholder?: string;
+  placeholder?: React.ReactNode;
   attrs?: Record<string, any>;
   description?: {
     text: string;