fix: set default spec to form

11 months ago · ed28bcdfb0
parent 31ea81c211
commit ed28bcdfb0
10 changed files with 128 additions and 45 deletions
--- a/package.json
+++ b/package.json
@ -29,6 +29,7 @@
    "@umijs/max": "^4.2.11",
    "@xterm/addon-fit": "^0.10.0",
    "@xterm/xterm": "^5.5.0",
+    "ahooks": "^3.8.5",
    "ansi-to-html": "^0.7.2",
    "antd": "^5.21.6",
    "antd-style": "^3.6.2",
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@ -47,6 +47,9 @@ dependencies:
  '@xterm/xterm':
    specifier: ^5.5.0
    version: 5.5.0
+  ahooks:
+    specifier: ^3.8.5
+    version: 3.8.5(react@18.2.0)
  ansi-to-html:
    specifier: ^0.7.2
    version: 0.7.2
@ -292,7 +295,7 @@ packages:
      '@umijs/bundler-utils': 4.2.8
      '@umijs/plugins': 4.2.8(@babel/core@7.26.0)(@types/react-dom@18.3.0)(@types/react@18.3.1)(antd@5.21.6)(dva@2.5.0-beta.2)(rc-field-form@2.7.0)(react-dom@18.2.0)(react@18.2.0)
      '@umijs/utils': 4.2.8
-      ahooks: 3.8.0(react@18.2.0)
+      ahooks: 3.8.5(react@18.2.0)
      antd-mobile-alita: 2.3.4(react-dom@18.2.0)(react@18.2.0)
      antd-mobile-icons: 0.2.2
      babel-plugin-import: 1.13.8
@ -391,7 +394,7 @@ packages:
      react: '>=16.0.0'
      react-dom: '>=16.0.0'
    dependencies:
-      '@babel/runtime': 7.24.7
+      '@babel/runtime': 7.26.0
      '@emotion/hash': 0.8.0
      '@emotion/unitless': 0.7.5
      classnames: 2.5.1
@ -407,7 +410,7 @@ packages:
      react: '>=16.0.0'
      react-dom: '>=16.0.0'
    dependencies:
-      '@babel/runtime': 7.25.7
+      '@babel/runtime': 7.26.0
      '@emotion/hash': 0.8.0
      '@emotion/unitless': 0.7.5
      classnames: 2.5.1
@ -421,7 +424,7 @@ packages:
    resolution: {integrity: sha512-y2217gk4NqL35giHl72o6Zzqji9O7vHh9YmhUVkPtAOpoTCH4uWxo/pr4VE8t0+ChEPs0qo4eJRC5Q1eXWo3vA==, tarball: https://registry.npmjs.org/@ant-design/fast-color/-/fast-color-2.0.6.tgz}
    engines: {node: '>=8.x'}
    dependencies:
-      '@babel/runtime': 7.25.7
+      '@babel/runtime': 7.26.0

  /@ant-design/icons-svg@4.4.2:
    resolution: {integrity: sha512-vHbT+zJEVzllwP+CM+ul7reTEfBR0vgxFe7+lREAsAA7YGsYpboiq2sQNeQeRvh09GfQgs/GyFEvZpJ9cLXpXA==}
@ -2852,12 +2855,7 @@ packages:
    engines: {node: '>=6.9.0'}
    dependencies:
      regenerator-runtime: 0.14.1
-
-  /@babel/runtime@7.24.7:
-    resolution: {integrity: sha512-UwgBRMjJP+xv857DCngvqXI3Iq6J4v0wXmwc6sapg+zyhbwmQX67LUEFrkK5tbyJ30jGuG3ZvWpBiB9LCy1kWw==, tarball: https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.7.tgz}
-    engines: {node: '>=6.9.0'}
-    dependencies:
-      regenerator-runtime: 0.14.1
+    dev: false

  /@babel/runtime@7.24.8:
    resolution: {integrity: sha512-5F7SDGs1T72ZczbRwbGO9lQi0NLjQxzl6i4lJxLxfW9U5UluCSyEJeniWvnhl3/euNiqQVbo8zruhsDfid0esA==, tarball: https://registry.npmjs.org/@babel/runtime/-/runtime-7.24.8.tgz}
@ -3224,7 +3222,7 @@ packages:
      react: '>=16.8.0'
    dependencies:
      react: 18.2.0
-      tslib: 2.6.2
+      tslib: 2.8.1

  /@dnd-kit/core@6.1.0(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-J3cQBClB4TVxwGo3KEjssGEXNJqGVWx17aRTZ1ob0FliR5IjYgTxl5YJbKTzA6IzrtelotH19v6y7uoIRUZPSg==, tarball: https://registry.npmjs.org/@dnd-kit/core/-/core-6.1.0.tgz}
@ -3236,7 +3234,7 @@ packages:
      '@dnd-kit/utilities': 3.2.2(react@18.2.0)
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)
-      tslib: 2.6.2
+      tslib: 2.8.1

  /@dnd-kit/modifiers@6.0.1(@dnd-kit/core@6.1.0)(react@18.2.0):
    resolution: {integrity: sha512-rbxcsg3HhzlcMHVHWDuh9LCjpOVAgqbV78wLGI8tziXY3+qcMQ61qVXIvNKQFuhj75dSfD+o+PYZQ/NUk2A23A==, tarball: https://registry.npmjs.org/@dnd-kit/modifiers/-/modifiers-6.0.1.tgz}
@ -3247,7 +3245,7 @@ packages:
      '@dnd-kit/core': 6.1.0(react-dom@18.2.0)(react@18.2.0)
      '@dnd-kit/utilities': 3.2.2(react@18.2.0)
      react: 18.2.0
-      tslib: 2.6.2
+      tslib: 2.8.1

  /@dnd-kit/sortable@7.0.2(@dnd-kit/core@6.1.0)(react@18.2.0):
    resolution: {integrity: sha512-wDkBHHf9iCi1veM834Gbk1429bd4lHX4RpAwT0y2cHLf246GAvU2sVw/oxWNpPKQNQRQaeGXhAVgrOl1IT+iyA==, tarball: https://registry.npmjs.org/@dnd-kit/sortable/-/sortable-7.0.2.tgz}
@ -3258,7 +3256,7 @@ packages:
      '@dnd-kit/core': 6.1.0(react-dom@18.2.0)(react@18.2.0)
      '@dnd-kit/utilities': 3.2.2(react@18.2.0)
      react: 18.2.0
-      tslib: 2.6.2
+      tslib: 2.8.1

  /@dnd-kit/utilities@3.2.2(react@18.2.0):
    resolution: {integrity: sha512-+MKAJEOfaBe5SmV6t34p80MMKhjvUz0vRrvVJbPT0WElzaOJ/1xs+D+KDv+tD/NE5ujfrChEcshd4fLn0wpiqg==, tarball: https://registry.npmjs.org/@dnd-kit/utilities/-/utilities-3.2.2.tgz}
@ -3266,13 +3264,13 @@ packages:
      react: '>=16.8.0'
    dependencies:
      react: 18.2.0
-      tslib: 2.6.2
+      tslib: 2.8.1

  /@emotion/babel-plugin@11.11.0:
    resolution: {integrity: sha512-m4HEDZleaaCH+XgDDsPF15Ht6wTLsgDTeR3WYj9Q/k76JtWhrJjcP4+/XlG8LGT/Rol9qUfOIztXeA84ATpqPQ==}
    dependencies:
      '@babel/helper-module-imports': 7.24.3
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.26.0
      '@emotion/hash': 0.9.1
      '@emotion/memoize': 0.8.1
      '@emotion/serialize': 1.1.4
@ -4706,7 +4704,7 @@ packages:
    resolution: {integrity: sha512-eN5chKrc0ANerXjLJuoqh/YJpor0u4T1bgaph5BPh42cJ2afDihaHJ2Mh3Up3XIFk05EfKG4nIQxbqC6y2eM4Q==, tarball: https://registry.npmjs.org/@rc-component/async-validator/-/async-validator-5.0.3.tgz}
    engines: {node: '>=14.x'}
    dependencies:
-      '@babel/runtime': 7.25.7
+      '@babel/runtime': 7.26.0

  /@rc-component/async-validator@5.0.4:
    resolution: {integrity: sha512-qgGdcVIF604M9EqjNF0hbUTz42bz/RDtxWdWuU5EQe3hi7M8ob54B6B35rOsvX5eSvIHIzT9iH1R3n+hk3CGfg==, tarball: https://registry.npmjs.org/@rc-component/async-validator/-/async-validator-5.0.4.tgz}
@ -4733,7 +4731,7 @@ packages:
      react: '>=16.9.0'
      react-dom: '>=16.9.0'
    dependencies:
-      '@babel/runtime': 7.25.7
+      '@babel/runtime': 7.26.0
      rc-util: 5.43.0(react-dom@18.2.0)(react@18.2.0)
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)
@ -4742,7 +4740,7 @@ packages:
    resolution: {integrity: sha512-jS4E7T9Li2GuYwI6PyiVXmxTiM6b07rlD9Ge8uGZSCz3WlzcG5ZK7g5bbuKNeZ9pgUuPK/5guV781ujdVpm4HQ==, tarball: https://registry.npmjs.org/@rc-component/mini-decimal/-/mini-decimal-1.1.0.tgz}
    engines: {node: '>=8.x'}
    dependencies:
-      '@babel/runtime': 7.25.7
+      '@babel/runtime': 7.26.0

  /@rc-component/mutate-observer@1.1.0(react-dom@18.2.0)(react@18.2.0):
    resolution: {integrity: sha512-QjrOsDXQusNwGZPf4/qRQasg7UFEj06XiCJ8iuiq/Io7CrHrgVi6Uuetw60WAMG1799v+aM8kyc+1L/GBbHSlw==, tarball: https://registry.npmjs.org/@rc-component/mutate-observer/-/mutate-observer-1.1.0.tgz}
@ -4764,7 +4762,7 @@ packages:
      react: '>=16.9.0'
      react-dom: '>=16.9.0'
    dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.26.0
      classnames: 2.5.1
      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
      react: 18.2.0
@ -5864,7 +5862,7 @@ packages:
  /@umijs/bundler-mako@0.9.9:
    resolution: {integrity: sha512-LOQVjCez8bJNyeRtGkdbTLmESWWlP5HWNrY/1n8jV340Crjsl6hF49u4oR/rbgi8HOFB3d+um0K7/lkW9nEznw==, tarball: https://registry.npmjs.org/@umijs/bundler-mako/-/bundler-mako-0.9.9.tgz}
    dependencies:
-      '@umijs/bundler-utils': 4.4.1
+      '@umijs/bundler-utils': 4.4.11
      '@umijs/mako': 0.9.9
      chalk: 4.1.2
      compression: 1.7.5
@ -6605,7 +6603,7 @@ packages:
      react-redux: 8.1.3(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1)
      redux: 4.2.1
      styled-components: 6.1.1(react-dom@18.2.0)(react@18.2.0)
-      tslib: 2.6.2
+      tslib: 2.8.1
      warning: 4.0.3
    transitivePeerDependencies:
      - '@babel/core'
@ -6653,7 +6651,7 @@ packages:
      react-redux: 8.1.3(@types/react-dom@18.3.0)(@types/react@18.3.1)(react-dom@18.2.0)(react@18.2.0)(redux@4.2.1)
      redux: 4.2.1
      styled-components: 6.1.1(react-dom@18.2.0)(react@18.2.0)
-      tslib: 2.6.2
+      tslib: 2.8.1
      warning: 4.0.3
    transitivePeerDependencies:
      - '@babel/core'
@ -7284,22 +7282,22 @@ packages:
    dev: false
    optional: true

-  /ahooks@3.8.0(react@18.2.0):
-    resolution: {integrity: sha512-M01m+mxLRNNeJ/PCT3Fom26UyreTj6oMqJBetUrJnK4VNI5j6eMA543Xxo53OBXn6XibA2FXKcCCgrT6YCTtKQ==, tarball: https://registry.npmjs.org/ahooks/-/ahooks-3.8.0.tgz}
+  /ahooks@3.8.5(react@18.2.0):
+    resolution: {integrity: sha512-Y+MLoJpBXVdjsnnBjE5rOSPkQ4DK+8i5aPDzLJdIOsCpo/fiAeXcBY1Y7oWgtOK0TpOz0gFa/XcyO1UGdoqLcw==, tarball: https://registry.npmjs.org/ahooks/-/ahooks-3.8.5.tgz}
    engines: {node: '>=8.0.0'}
    peerDependencies:
-      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0 || ^19.0.0
    dependencies:
      '@babel/runtime': 7.26.0
      dayjs: 1.11.11
      intersection-observer: 0.12.2
-      js-cookie: 2.2.1
+      js-cookie: 3.0.5
      lodash: 4.17.21
      react: 18.2.0
      react-fast-compare: 3.2.2
      resize-observer-polyfill: 1.5.1
      screenfull: 5.2.0
-      tslib: 2.6.2
+      tslib: 2.8.1
    dev: false

  /ajv-formats@2.1.1(ajv@8.13.0):
@ -7505,7 +7503,7 @@ packages:
      '@ant-design/colors': 6.0.0
      '@ant-design/icons': 4.8.3(react-dom@18.2.0)(react@18.2.0)
      '@ant-design/react-slick': 1.0.2(react@18.2.0)
-      '@babel/runtime': 7.24.7
+      '@babel/runtime': 7.26.0
      '@ctrl/tinycolor': 3.6.1
      classnames: 2.5.1
      copy-to-clipboard: 3.3.3
@ -12353,8 +12351,9 @@ packages:
      react: 18.2.0
    dev: false

-  /js-cookie@2.2.1:
-    resolution: {integrity: sha512-HvdH2LzI/EAZcUwA8+0nKNtWHqS+ZmijLA30RwZA0bo7ToCckjK5MkGhjED9KoRcXO6BaGI3I9UIzSA1FKFPOQ==, tarball: https://registry.npmjs.org/js-cookie/-/js-cookie-2.2.1.tgz}
+  /js-cookie@3.0.5:
+    resolution: {integrity: sha512-cEiJEAEoIbWfCZYKWhVwFuvPX1gETRYPw6LlaTKoxD3s2AkXzkCjnp6h0V77ozyqj0jakteJ4YqDJT830+lVGw==, tarball: https://registry.npmjs.org/js-cookie/-/js-cookie-3.0.5.tgz}
+    engines: {node: '>=14'}
    dev: false

  /js-sdsl@4.4.2:
@ -16240,7 +16239,7 @@ packages:
      react: '>=16.9.0'
      react-dom: '>=16.9.0'
    dependencies:
-      '@babel/runtime': 7.24.5
+      '@babel/runtime': 7.26.0
      classnames: 2.5.1
      rc-resize-observer: 1.4.0(react-dom@18.2.0)(react@18.2.0)
      rc-util: 5.38.1(react-dom@18.2.0)(react@18.2.0)
@ -16378,7 +16377,7 @@ packages:
      react: '>=16.9.0'
      react-dom: '>=16.9.0'
    dependencies:
-      '@babel/runtime': 7.25.7
+      '@babel/runtime': 7.26.0
      classnames: 2.5.1
      rc-util: 5.43.0(react-dom@18.2.0)(react@18.2.0)
      react: 18.2.0
@ -16827,7 +16826,7 @@ packages:
      react: '>=16.9.0'
      react-dom: '>=16.9.0'
    dependencies:
-      '@babel/runtime': 7.25.7
+      '@babel/runtime': 7.26.0
      react: 18.2.0
      react-dom: 18.2.0(react@18.2.0)
      react-is: 18.3.1
@ -16912,7 +16911,7 @@ packages:
    dev: false

  /react-fast-compare@3.2.2:
-    resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==}
+    resolution: {integrity: sha512-nsO+KSNgo1SbJqJEYRE9ERzo7YtYbou/OqjSQKxV7jcKox7+usiUVZOAC+XnDOABXggQTno0Y1CpVnuWEc1boQ==, tarball: https://registry.npmjs.org/react-fast-compare/-/react-fast-compare-3.2.2.tgz}
    dev: false

  /react-helmet-async@1.3.0(react-dom@18.1.0)(react@18.1.0):
--- a/src/components/upload-audio/index.tsx
+++ b/src/components/upload-audio/index.tsx
@ -7,10 +7,14 @@ interface UploadAudioProps {
  accept?: string;
  maxCount?: number;
  type?: 'text' | 'primary' | 'default';
+  icon?: React.ReactNode;
+  size?: 'small' | 'middle' | 'large';
+  shape?: 'circle' | 'round' | 'default';
  onChange?: (data: { file: any; fileList: any[] }) => void;
 }

 const UploadAudio: React.FC<UploadAudioProps> = (props) => {
+  const { icon, accept, type, size = 'large', shape = 'circle' } = props;
  const intl = useIntl();
  const beforeUpload = (file: any) => {
    return false;
@ -48,9 +52,10 @@ const UploadAudio: React.FC<UploadAudioProps> = (props) => {
          }}
        >
          <Button
-            icon={<UploadOutlined />}
+            size={size}
+            icon={icon ?? <UploadOutlined />}
            type={props.type ?? 'text'}
-            shape="circle"
+            shape={shape}
          ></Button>
        </div>
      </Upload>
--- a/src/pages/llmodels/components/deploy-builtin-modal.tsx
+++ b/src/pages/llmodels/components/deploy-builtin-modal.tsx
@ -132,8 +132,7 @@ const AddModal: React.FC<AddModalProps> = (props) => {
      'worker_selector',
      'gpu_selector',
      'env',
-      'backend_version',
-      'backend_parameters'
+      'backend_version'
    ]);
  };

--- a/src/pages/llmodels/components/deploy-modal.tsx
+++ b/src/pages/llmodels/components/deploy-modal.tsx
@ -38,7 +38,8 @@ const resetFieldsByModel = [

 const resetFieldsByFile = [
  'cpu_offloading',
-  'distributed_inference_across_workers'
+  'distributed_inference_across_workers',
+  'backend_parameters'
 ];

 const ModalFooterStyle = {
@ -99,6 +100,7 @@ const AddModal: FC<AddModalProps> = (props) => {
    handleBackendChangeBefore,
    cancelEvaluate,
    handleOnValuesChange,
+    handleEvaluateOnChange,
    warningStatus,
    submitAnyway
  } = useCheckCompatibility();
@ -140,22 +142,37 @@ const AddModal: FC<AddModalProps> = (props) => {
    return categories || null;
  };

-  const handleSelectModelFile = (item: any, evaluate?: boolean) => {
+  const handleSelectModelFile = async (item: any, evaluate?: boolean) => {
    form.current?.form?.resetFields(resetFieldsByFile);
    const modelInfo = onSelectModel(selectedModel, props.source);
    form.current?.setFieldsValue?.({
      file_name: item.fakeName,
-      ...getDefaultSpec(item),
      ...modelInfo,
      categories: getCategory(item)
    });

+    await new Promise((resolve) => {
+      setTimeout(() => {
+        resolve(true);
+      }, 0);
+    });
+
    if (item.fakeName) {
-      handleOnValuesChange?.({
+      const evaluateRes = await handleEvaluateOnChange?.({
        changedValues: {},
        allValues: form.current?.form?.getFieldsValue?.(),
        source: props.source
      });
+      const defaultSpec = getDefaultSpec({
+        evaluateResult: evaluateRes
+      });
+      console.log('defaultSpec', defaultSpec);
+      form.current?.setFieldsValue?.({
+        file_name: item.fakeName,
+        ...defaultSpec,
+        ...modelInfo,
+        categories: getCategory(item)
+      });
    }
  };

--- a/src/pages/llmodels/config/llama-config.ts
+++ b/src/pages/llmodels/config/llama-config.ts
@ -604,6 +604,10 @@ const options = [
  {
    label: '--swa-full',
    value: '--swa-full'
+  },
+  {
+    label: '--no-enable-reasoning',
+    value: '--no-enable-reasoning'
  }
 ];

--- a/src/pages/llmodels/hooks/index.ts
+++ b/src/pages/llmodels/hooks/index.ts
@ -7,6 +7,7 @@ import {
 import { ListItem as WorkerListItem } from '@/pages/resources/config/types';
 import { convertFileSize } from '@/utils';
 import { useIntl } from '@umijs/max';
+import { useDebounceFn } from 'ahooks';
 import _ from 'lodash';
 import { useEffect, useRef, useState } from 'react';
 import { evaluationsModelSpec, queryGPUList } from '../apis';
@ -513,7 +514,7 @@ export const useCheckCompatibility = () => {
    cacheFormValuesRef.current = allValues;
    const data = getSourceRepoConfigValue(source, allValues);
    const gpuSelector = generateGPUIds(data.values);
-    await handleDoEvalute({
+    return await handleDoEvalute({
      ...data.values,
      ...gpuSelector
    });
@ -537,7 +538,10 @@ export const useCheckCompatibility = () => {
    return res;
  };

-  const debounceHandleValuesChange = _.debounce(handleOnValuesChange, 500);
+  const { run: debounceHandleValuesChange } = useDebounceFn(
+    handleOnValuesChange,
+    { wait: 500 }
+  );

  const cancelEvaluate = () => {
    checkTokenRef.current?.cancel();
@ -561,6 +565,7 @@ export const useCheckCompatibility = () => {
    cancelEvaluate,
    handleBackendChangeBefore,
    handleOnValuesChange: debounceHandleValuesChange,
+    handleEvaluateOnChange: handleOnValuesChange,
    warningStatus,
    checkTokenRef,
    submitAnyway
--- a/src/pages/playground/components/message-input.tsx
+++ b/src/pages/playground/components/message-input.tsx
@ -1,5 +1,6 @@
 import IconFont from '@/components/icon-font';
 import HotKeys, { KeyMap } from '@/config/hotkeys';
+import { convertFileToBase64 } from '@/utils/load-audio-file';
 import { ClearOutlined, SendOutlined, SwapOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Button, Checkbox, Divider, Input, Tooltip } from 'antd';
@ -19,6 +20,12 @@ import '../style/message-input.less';
 import ThumbImg from './thumb-img';
 import UploadImg from './upload-img';

+const audioTypeMap: Record<string, string> = {
+  'audio/wav': 'wav',
+  'audio/mp3': 'mp3',
+  'audio/mpeg': 'mp3'
+};
+
 type CurrentMessage = Omit<MessageItem, 'uid'>;

 type ActionType =
@ -260,6 +267,26 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
      });
    };

+    const handleUploadAudioChange = async (data: {
+      file: any;
+      fileList: any[];
+    }) => {
+      // convert audio file to base64
+      try {
+        console.log('audio file====', data.file);
+        const base64Audio = await convertFileToBase64(data.file);
+        setMessage({
+          ...message,
+          audio: {
+            format: audioTypeMap[data.file.type],
+            dataUrl: base64Audio
+          }
+        });
+      } catch (error) {
+        console.error('Error converting audio to Base64:', error);
+      }
+    };
+
    const handleDeleteImg = (uid: number | string) => {
      const list = _.filter(
        message.imgs,
@ -360,6 +387,22 @@ const MessageInput: React.FC<MessageInputProps> = forwardRef(
                size="middle"
              ></UploadImg>
            )}
+            {/* {actions.includes('upload') && message.role === Roles.User && (
+              <UploadAudio
+                type="text"
+                accept={'.mp3,.wav'}
+                size="middle"
+                shape="default"
+                icon={<CustomerServiceOutlined />}
+                onChange={handleUploadAudioChange}
+              ></UploadAudio>
+            )} */}
+            {actions.includes('upload') && message.role === Roles.User && (
+              <UploadImg
+                handleUpdateImgList={handleUpdateImgList}
+                size="middle"
+              ></UploadImg>
+            )}
            {tools}
            {actions.includes('clear') && (
              <Tooltip
--- a/src/pages/playground/config/types.ts
+++ b/src/pages/playground/config/types.ts
@ -16,6 +16,7 @@ export type MessageItemAction =
 export interface MessageItem {
  content: string;
  imgs?: { uid: string | number; dataUrl: string }[];
+  audio?: { uid: string | number; dataUrl: string; format: 'wav' | 'mp3' };
  role: string;
  title?: React.ReactNode;
  uid: number;
--- a/src/utils/load-audio-file.ts
+++ b/src/utils/load-audio-file.ts
@ -1,5 +1,14 @@
 import { convertFileSize } from './index';

+export const convertFileToBase64 = (file: File): Promise<string> => {
+  return new Promise((resolve, reject) => {
+    const reader = new FileReader();
+    reader.readAsDataURL(file);
+    reader.onload = () => resolve(reader.result as string);
+    reader.onerror = (error) => reject(error);
+  });
+};
+
 export const loadAudioData = async (data: any, type: string) => {
  return new Promise((resolve, reject) => {
    try {