style: image display ratio

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

@@ -263,8 +263,8 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
           const progress = _.round(item.progress, 0);
           newImageList[item.index] = {
             dataUrl: imgItem.dataUrl,
-            height: '100%',
-            width: '100%',
+            height: imgSize[1],
+            width: imgSize[0],
             maxHeight: `${imgSize[1]}px`,
             maxWidth: `${imgSize[0]}px`,
             uid: imgItem.uid,

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

@@ -212,7 +212,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
         const res = await queryModelVoices({
           model: value
         });
-        console.log('res:', res);
         if (res?.error) {
           setVoiceError({
             error: true,
@@ -235,6 +234,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
         const newList = sortVoiceList(locale, list);
 
         setVoiceList(newList);
+        setVoiceError(null);
         setParams((pre: any) => {
           return {
             ...pre,

src/pages/playground/components/thumb-img.tsx

@@ -1,7 +1,5 @@
-import AutoImage from '@/components/auto-image';
 import SingleImage from '@/components/auto-image/single-image';
-import { CloseCircleOutlined } from '@ant-design/icons';
-import { Col, Progress, Row } from 'antd';
+import { Col, Row } from 'antd';
 import _ from 'lodash';
 import React, { useCallback } from 'react';
 import '../style/thumb-img.less';
@@ -38,57 +36,6 @@ const ThumbImg: React.FC<{
     return null;
   }
 
-  const renderImageItem = (item: any) => {
-    const thumImgWrapStyle = item.loading
-      ? { width: item.width, height: item.height }
-      : {};
-    return (
-      <span key={item.uid} className="thumb-img" style={thumImgWrapStyle}>
-        <>
-          {item.loading ? (
-            <span
-              className="progress-wrap"
-              style={{
-                width: '100%',
-                height: '100%',
-                display: 'flex',
-                border: '1px solid var(--ant-color-split)',
-                borderRadius: 'var(--border-radius-base)',
-                justifyContent: 'center',
-                alignItems: 'center',
-                padding: '10px',
-                overflow: 'hidden'
-              }}
-            >
-              <Progress percent={item.progress} type="circle" />
-            </span>
-          ) : (
-            <span
-              className="img"
-              style={{
-                maxHeight: `min(${item.maxHeight}, 100%)`,
-                maxWidth: `min(${item.maxWidth}, 100%)`
-              }}
-            >
-              <AutoImage
-                autoSize={autoSize}
-                src={item.dataUrl}
-                width={item.width || 100}
-                height={item.height || 100}
-              />
-            </span>
-          )}
-        </>
-
-        {editable && (
-          <span className="del" onClick={() => handleOnDelete(item.uid)}>
-            <CloseCircleOutlined />
-          </span>
-        )}
-      </span>
-    );
-  };
-
   return (
     <>
       {
@@ -147,6 +94,7 @@ const ThumbImg: React.FC<{
                       >
                         <SingleImage
                           {...item}
+                          loading={item.loading}
                           autoSize={autoSize}
                           editable={editable}
                           autoBgColor={autoBgColor}