diff --git a/config/config.ts b/config/config.ts index 83b0519e..01c0f761 100644 --- a/config/config.ts +++ b/config/config.ts @@ -14,7 +14,7 @@ const isProduction = env === 'production'; const t = Date.now(); export default defineConfig({ proxy: { - ...proxy('http://192.168.50.4') + ...proxy('http://192.168.50.5') }, history: { type: 'hash' diff --git a/src/components/audio-animation/index.less b/src/components/audio-animation/index.less index a2e3b5f5..d4828cd2 100644 --- a/src/components/audio-animation/index.less +++ b/src/components/audio-animation/index.less @@ -11,3 +11,9 @@ image-rendering: crisp-edges; } } + +.scroller-wrapper { + width: 100%; + height: 100%; + overflow: hidden; +} diff --git a/src/components/audio-animation/index.tsx b/src/components/audio-animation/index.tsx index a9a48da4..db9be622 100644 --- a/src/components/audio-animation/index.tsx +++ b/src/components/audio-animation/index.tsx @@ -1,5 +1,5 @@ import useResizeObserver from '@/components/logs-viewer/use-size'; -import React, { useEffect } from 'react'; +import React, { useEffect, useState } from 'react'; import './index.less'; interface AudioAnimationProps { @@ -7,6 +7,7 @@ interface AudioAnimationProps { height: number; scaleFactor?: number; maxBarCount?: number; + fixedHeight?: boolean; analyserData: { data: Uint8Array; analyser: any; @@ -17,20 +18,22 @@ const AudioAnimation: React.FC = (props) => { const { scaleFactor = 1.2, maxBarCount = 128, + fixedHeight = true, analyserData, - width, - height + width: initialWidth, + height: initialHeight } = props; const canvasRef = React.useRef(null); const animationId = React.useRef(0); const isScaled = React.useRef(false); const oscillationOffset = React.useRef(0); const direction = React.useRef(1); - // const [width, setWidth] = useState(props.width); - // const [height, setHeight] = useState(props.height); + const scrollerRef = React.useRef(null); + const [width, setWidth] = useState(initialWidth); + const [height, setHeight] = useState(initialHeight); const containerRef = React.useRef(null); - const size = useResizeObserver(containerRef); + const size = useResizeObserver(scrollerRef); const calculateJitter = ( i: number, @@ -128,26 +131,14 @@ const AudioAnimation: React.FC = (props) => { draw(performance.now()); }; - // const handleResizeThrottle = React.useCallback( - // throttle(() => { - // console.log('size:', size); - // if (size.width && size.width !== width) { - // setWidth(size.width); - // } - // if (size.height && size.height !== height) { - // setHeight(size.height); - // } - // }, 100), - // [size, width, height] - // ); - - // useEffect(() => { - // handleResizeThrottle(); - // window.addEventListener('resize', handleResizeThrottle); - // return () => { - // handleResizeThrottle.cancel(); - // }; - // }, [size, width, height]); + React.useEffect(() => { + if (size) { + setWidth(size?.width || 0); + if (!fixedHeight) { + setHeight(size?.height || 0); + } + } + }, [size]); useEffect(() => { if (!canvasRef.current) return; @@ -175,14 +166,17 @@ const AudioAnimation: React.FC = (props) => { return (
- +
+ +
); }; diff --git a/src/components/auto-image/single-image.tsx b/src/components/auto-image/single-image.tsx index affc52fe..15336018 100644 --- a/src/components/auto-image/single-image.tsx +++ b/src/components/auto-image/single-image.tsx @@ -3,7 +3,7 @@ import { Progress } from 'antd'; import classNames from 'classnames'; import * as Vibrant from 'node-vibrant'; import ResizeObserver from 'rc-resize-observer'; -import React from 'react'; +import React, { useCallback } from 'react'; import AutoImage from './index'; import './single-image.less'; @@ -20,6 +20,7 @@ interface SingleImageProps { onDelete: (uid: number) => void; autoBgColor?: boolean; editable?: boolean; + style?: React.CSSProperties; } const SingleImage: React.FC = (props) => { @@ -35,6 +36,7 @@ const SingleImage: React.FC = (props) => { maxHeight, maxWidth, dataUrl, + style, autoBgColor } = props; @@ -49,36 +51,29 @@ const SingleImage: React.FC = (props) => { return loading ? { width: '100%', height: '100%' } : {}; }, [loading, imgSize]); - const handleResize = React.useCallback( - async (size: { width: number; height: number }) => { - if (!autoSize || !dataUrl) return; + const handleResize = useCallback( + (size: { width: number; height: number }) => { + if (!autoSize) return; const { width: containerWidth, height: containerHeight } = size; const { width: originalWidth, height: originalHeight } = props; - console.log('size:', size, originalWidth, originalHeight); - if (!originalWidth || !originalHeight) return; - const imageAspectRatio = originalWidth / originalHeight; - const containerAspectRatio = containerWidth / containerHeight; + const widthRatio = containerWidth / originalWidth; + const heightRatio = containerHeight / originalHeight; - let newWidth, newHeight; + const scale = Math.min(widthRatio, heightRatio, 1); + + const newWidth = originalWidth * scale; + const newHeight = originalHeight * scale; - if (containerAspectRatio > imageAspectRatio) { - newHeight = containerHeight; - newWidth = containerHeight * imageAspectRatio; - } else { - newWidth = containerWidth; - newHeight = containerWidth / imageAspectRatio; - } - console.log('size++++++++=', size, newWidth, newHeight); setImgSize({ width: newWidth, height: newHeight }); }, - [autoSize, dataUrl, props] + [autoSize, props.width, props.height] ); const handleOnLoad = React.useCallback(async () => { @@ -129,6 +124,7 @@ const SingleImage: React.FC = (props) => { return (
{ + if (wavesurfer.current) { + wavesurfer.current.seekTo(value); + } + }; + const duration = () => { if (wavesurfer.current) { return wavesurfer.current.getDuration(); @@ -123,7 +129,8 @@ const AudioPlayer: React.FC< return { play, pause, - duration + duration, + seekTo }; }); @@ -135,7 +142,13 @@ const AudioPlayer: React.FC< destroyWavesurfer(); }; }, [audioUrl, container.current]); - return
; + return ( +
+ ); }); export default React.memo(AudioPlayer); diff --git a/src/components/speech-content/speech-item.tsx b/src/components/speech-content/speech-item.tsx index b4d4d7fd..58358607 100644 --- a/src/components/speech-content/speech-item.tsx +++ b/src/components/speech-content/speech-item.tsx @@ -1,3 +1,4 @@ +import AudioAnimation from '@/components/audio-animation'; import useResizeObserver from '@/components/logs-viewer/use-size'; import { DownloadOutlined, @@ -5,12 +6,13 @@ import { PlayCircleOutlined } from '@ant-design/icons'; import { useIntl } from '@umijs/max'; -import { Button, Tooltip } from 'antd'; +import { Button, Slider, Tooltip } from 'antd'; import dayjs from 'dayjs'; -import _ from 'lodash'; +import _, { throttle } from 'lodash'; import React, { useCallback, useEffect, useRef, useState } from 'react'; import AudioPlayer from './audio-player'; import './styles/index.less'; +import './styles/slider-progress.less'; const audioFormat = { 'audio/mpeg': 'mp3', @@ -72,10 +74,18 @@ const SpeechItem: React.FC = (props) => { setIsPlay(false); }, []); - const handleOnAudioprocess = useCallback((current: number) => { - setCurrentTime(() => current); - console.log('current:', current, duration); - }, []); + const throttleUpdateCurrentTime = throttle((current: number) => { + setCurrentTime(current); + }, 100); + + const handleOnAudioprocess = useCallback( + (current: number) => { + console.log('current:', current); + // setCurrentTime(() => current); + throttleUpdateCurrentTime(current); + }, + [throttleUpdateCurrentTime] + ); const handleReay = useCallback((duration: number) => { setIsPlay(props.autoplay); @@ -87,13 +97,17 @@ const SpeechItem: React.FC = (props) => { }, []); const handleAnimationResize = useCallback((size: any) => { - console.log('size:=======', size); setAnimationSize({ width: size.width, height: size.height }); }, []); + const handleSliderChange = (value: number) => { + ref.current?.seekTo(value); + setCurrentTime(value); + }; + useEffect(() => { console.log('width:', size); }, [size]); @@ -112,7 +126,6 @@ const SpeechItem: React.FC = (props) => { return (
-
= (props) => { onAudioprocess={handleOnAudioprocess} ref={ref} > - {/* {!isPlay && ( + {isPlay && ( - )} */} + )}
- {/* */} +
{props.format} - {_.round(duration, 2)} + + {_.round(currentTime, 2) || _.round(duration, 2)} +
= (props) => { label={intl.formatMessage({ id: 'models.form.backend' })} options={[ { - label: `llama-box(llama.cpp)`, + label: `llama-box`, value: backendOptionsMap.llamaBox, disabled: source === modelSourceMap.local_path_value ? false : !isGGUF diff --git a/src/pages/playground/components/ground-images.tsx b/src/pages/playground/components/ground-images.tsx index ceee14c8..79001e2d 100644 --- a/src/pages/playground/components/ground-images.tsx +++ b/src/pages/playground/components/ground-images.tsx @@ -196,7 +196,7 @@ const GroundImages: React.FC = forwardRef((props, ref) => { height: imgSize[1], width: imgSize[0], loading: true, - uid: index + uid: setMessageId() }; }); setImageList(newImageList); diff --git a/src/pages/playground/components/ground-stt.tsx b/src/pages/playground/components/ground-stt.tsx index f5b8733f..aacf1b0f 100644 --- a/src/pages/playground/components/ground-stt.tsx +++ b/src/pages/playground/components/ground-stt.tsx @@ -232,6 +232,7 @@ const GroundLeft: React.FC = forwardRef((props, ref) => { if (isRecording) { return ( = forwardRef((props, ref) => { return (
-
+
= useMemo(() => { + if (!responseable) return {}; + if (dataList.length === 1) { + return { + 0: { + justifyContent: 'center', + alignItems: 'center' + } + }; + } + if (dataList.length === 2) { + return { + 0: { + justifyContent: 'flex-end', + alignItems: 'center' + }, + 1: { + justifyContent: 'flex-start', + alignItems: 'center' + } + }; + } + if (dataList.length === 3) { + return { + 0: { + justifyContent: 'flex-end', + alignItems: 'flex-end' + }, + 1: { + justifyContent: 'flex-start', + alignItems: 'flex-end' + }, + 2: { + justifyContent: 'flex-end', + alignItems: 'flex-start' + } + }; + } + return { + 0: { + justifyContent: 'flex-end', + alignItems: 'flex-end' + }, + 1: { + justifyContent: 'flex-start', + alignItems: 'flex-end' + }, + 2: { + justifyContent: 'flex-end', + alignItems: 'flex-start' + }, + 3: { + justifyContent: 'flex-start', + alignItems: 'flex-start' + } + }; + }, [dataList, responseable]); return ( <> - { + {dataList?.length ? (
{responseable ? ( <> @@ -53,7 +107,7 @@ const ThumbImg: React.FC<{ dataList.length === 1 ? 'center' : 'flex-start' }} > - {_.map(_.slice(dataList, 0, 2), (item: any, index: string) => { + {_.map(_.slice(dataList, 0, 2), (item: any, index: number) => { return ( - {_.map(_.slice(dataList, 2), (item: any, index: string) => { + {_.map(_.slice(dataList, 2), (item: any, index: number) => { + console.log('index=======', index); return ( )}
- } + ) : null} ); };