root/gpustack-ui
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: slider to change width and height in image

Browse Source
This commit is contained in:
jialin
2024-12-02 08:20:30 +08:00
parent 412c6dadca
commit ec2cd29096
24 changed files with 500 additions and 283 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/playground/components/audio-input.tsx
+12 -7
View File
@@ -1,6 +1,7 @@
import { AudioOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Space, Tooltip } from 'antd';
import dayjs from 'dayjs';
import React, {
useCallback,
useEffect,
@@ -8,7 +9,6 @@ import React, {
useRef,
useState
} from 'react';
// import '../style/audio-input.less';
interface AudioInputProps {
onAudioData: (audioData: {
@@ -49,7 +49,7 @@ const AudioInput: React.FC<AudioInputProps> = (props) => {
window.webkitAudioContext)();
analyser.current = audioContext.current.createAnalyser();
analyser.current.fftSize = 256;
analyser.current.fftSize = 512;
dataArray.current = new Uint8Array(analyser.current.frequencyBinCount);
}, []);
@@ -136,7 +136,7 @@ const AudioInput: React.FC<AudioInputProps> = (props) => {
setAudioPermission(true);
initAudioContext();
} catch (error) {
// console.log(error);
console.log('enable+++++++++', error);
}
};
@@ -158,6 +158,10 @@ const AudioInput: React.FC<AudioInputProps> = (props) => {
props.onAudioData?.(audioData);
};
const generateFileNameByTime = () => {
// format: recording-YYYY-MM-DD-HH_mm_ss.wav
return `recording-${dayjs().format('YYYY-MM-DD-HH_mm_ss')}${recordingFormat.suffix}`;
};
// start recording
const StartRecording = async () => {
if (isRecording) {
@@ -167,7 +171,6 @@ const AudioInput: React.FC<AudioInputProps> = (props) => {
try {
await EnableAudio();
console.log('audioStream:', audioStream.current);
audioRecorder.current = new MediaRecorder(audioStream.current);
@@ -186,13 +189,14 @@ const AudioInput: React.FC<AudioInputProps> = (props) => {
audioRecorder.current.onstop = () => {
const audioBlob = new Blob(audioChunks, { type: recordingFormat.type });
const audioUrl = URL.createObjectURL(audioBlob);
handleAudioData({
chunks: audioBlob,
size: audioBlob.size,
type: audioBlob.type,
url: audioUrl,
name: `recording-${new Date().toISOString()}${recordingFormat.suffix}`,
duration: Math.ceil((Date.now() - startTime.current) / 1000)
name: generateFileNameByTime(),
duration: Math.floor((Date.now() - startTime.current) / 1000)
});
props.onAnalyse?.([], null);
@@ -201,7 +205,7 @@ const AudioInput: React.FC<AudioInputProps> = (props) => {
setIsRecording(true);
props.onRecord?.(true);
startTime.current = Date.now();
audioRecorder.current.start(1000);
audioRecorder.current.start(100);
generateVisualData();
console.log('start recording');
} catch (error) {
@@ -226,6 +230,7 @@ const AudioInput: React.FC<AudioInputProps> = (props) => {
border: 'none'
};
}
return {};
}, [audioPermission]);
useEffect(() => {
src/pages/playground/components/ground-images.tsx
+66 -67
View File
@@ -1,7 +1,6 @@
import AlertInfo from '@/components/alert-info';
import IconFont from '@/components/icon-font';
import FieldComponent from '@/components/seal-form/field-component';
import SealInput from '@/components/seal-form/seal-input';
import SealSelect from '@/components/seal-form/seal-select';
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import ThumbImg from '@/pages/playground/components/thumb-img';
@@ -30,6 +29,7 @@ import { CREAT_IMAGE_API } from '../apis';
import { OpenAIViewCode, promptList } from '../config';
import {
ImageAdvancedParamsConfig,
ImageCustomSizeConfig,
ImageconstExtraConfig,
ImageParamsConfig as paramsConfig
} from '../config/params-config';
@@ -46,10 +46,7 @@ interface MessageProps {
loaded?: boolean;
ref?: any;
}
const initialValues = {
n: 1,
size: '512x512',
const advancedFieldsDefaultValus = {
seed: null,
sampler: 'euler_a',
cfg_scale: 4.5,
@@ -58,6 +55,17 @@ const initialValues = {
schedule: 'discrete'
};
const openaiCompatibleFieldsDefaultValus = {
quality: 'standard',
style: null
};
const initialValues = {
n: 1,
size: '512x512',
...advancedFieldsDefaultValus
};
const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const { modelList } = props;
const messageId = useRef<number>(0);
@@ -293,37 +301,22 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const handleToggleParamsStyle = () => {
if (isOpenaiCompatible) {
form.current?.form?.setFieldsValue({
seed: null,
sampler: 'euler_a',
cfg_scale: 4.5,
sample_steps: 10,
negative_prompt: null,
schedule: 'discrete'
...advancedFieldsDefaultValus
});
setParams((pre: object) => {
return {
..._.omit(pre, ['quality', 'style']),
seed: null,
sampler: 'euler_a',
cfg_scale: 4.5,
sample_steps: 10,
negative_prompt: null,
schedule: 'discrete'
..._.omit(pre, _.keys(openaiCompatibleFieldsDefaultValus)),
...advancedFieldsDefaultValus
};
});
} else {
form.current?.form?.setFieldsValue({
...openaiCompatibleFieldsDefaultValus
});
setParams((pre: object) => {
return {
quality: 'standard',
style: null,
..._.omit(pre, [
'seed',
'sampler',
'cfg_scale',
'sample_steps',
'negative_prompt',
'schedule'
])
...openaiCompatibleFieldsDefaultValus,
..._.omit(pre, _.keys(advancedFieldsDefaultValus))
};
});
}
@@ -370,6 +363,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
noStyle={item.name === 'random_seed'}
>
<FieldComponent
style={item.name === 'random_seed' ? { marginBottom: 20 } : {}}
disabled={
item.disabledConfig
? item.disabledConfig?.when?.(formValues)
@@ -385,58 +379,63 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const renderCustomSize = useMemo(() => {
if (size === 'custom') {
return (
<div className="flex gap-10" key="custom">
return ImageCustomSizeConfig.map((item: ParamsSchema) => {
return (
<Form.Item
name="width"
key="width"
name={item.name}
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{
name: intl.formatMessage({ id: 'playground.params.width' })
}
)
{ id: 'common.form.rule.input' },
{ name: intl.formatMessage({ id: item.label.text }) }
),
required: true
}
]}
key={item.name}
>
<SealInput.Number
style={{ width: '100%' }}
label={`${intl.formatMessage({ id: 'playground.params.width' })}(px)`}
></SealInput.Number>
</Form.Item>
<Form.Item
name="height"
key="height"
rules={[
{
required: true,
message: intl.formatMessage(
{
id: 'common.form.rule.input'
},
{
name: intl.formatMessage({ id: 'playground.params.height' })
}
)
<FieldComponent
label={
item.label.isLocalized
? intl.formatMessage({ id: item.label.text })
: item.label.text
}
]}
>
<SealInput.Number
style={{ width: '100%' }}
label={`${intl.formatMessage({ id: 'playground.params.height' })}(px)`}
></SealInput.Number>
description={
item.description?.isLocalized
? intl.formatMessage({ id: item.description.text })
: item.description?.text
}
{...item.attrs}
{..._.omit(item, [
'name',
'description',
'rules',
'disabledConfig'
])}
></FieldComponent>
</Form.Item>
</div>
);
);
});
}
return null;
}, [size, intl]);
useEffect(() => {
if (size === 'custom') {
form.current?.form?.setFieldsValue({
width: 256,
height: 256
});
setParams((pre: object) => {
return {
...pre,
width: 256,
height: 256
};
});
}
}, [size]);
useEffect(() => {
if (scroller.current) {
initialize(scroller.current);
src/pages/playground/components/ground-stt.tsx
+5 -6
View File
@@ -134,7 +134,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
} catch (error: any) {
console.log('error:', error);
const res = error?.response?.data;
if (res.error) {
if (res?.error) {
setTokenResult({
error: true,
errorMessage:
@@ -226,8 +226,8 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
if (isRecording) {
return (
<AudioAnimation
height={66}
width={200}
height={82}
width={500}
analyserData={audioChunks}
></AudioAnimation>
);
@@ -235,7 +235,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
return (
<div className="tips-text">
<IconFont type={'icon-audio'} style={{ fontSize: 20 }}></IconFont>
<IconFont type={'icon-audio'} style={{ fontSize: 18 }}></IconFont>
<span>
{intl.formatMessage({ id: 'playground.audio.speechtotext.tips' })}
</span>
@@ -320,10 +320,9 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
})}
>
<Button
style={{ width: 46 }}
size="middle"
disabled={!audioData}
type="primary"
shape="circle"
onClick={handleOnGenerate}
icon={<SendOutlined></SendOutlined>}
></Button>
src/pages/playground/components/ground-tts.tsx
+7 -4
View File
@@ -124,7 +124,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
console.log('result:', res);
if (res.error) {
if (res?.error) {
setTokenResult({
error: true,
errorMessage:
@@ -147,7 +147,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
]);
} catch (error: any) {
const res = error?.response?.data;
if (res.error) {
if (res?.error) {
setTokenResult({
error: true,
errorMessage:
@@ -180,7 +180,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
model: value
});
console.log('res:', res);
if (res.error) {
if (res?.error) {
setVoiceError({
error: true,
errorMessage:
@@ -209,7 +209,7 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
formRef.current?.form.setFieldValue('voice', voiceList[0]?.value);
} catch (error: any) {
const res = error?.response?.data;
if (res.error) {
if (res?.error) {
setVoiceError({
error: true,
errorMessage:
@@ -353,6 +353,9 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
checkLabel={intl.formatMessage({
id: 'playground.toolbar.autoplay'
})}
placeholer={intl.formatMessage({
id: 'playground.input.text.holder'
})}
defaultSize={{
minRows: 5,
maxRows: 5