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

chore: audio api adjust

Browse Source
This commit is contained in:
jialin
2024-11-27 19:35:19 +08:00
parent 230120fff5
commit 60c92b8a98
12 changed files with 73 additions and 67 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/components/speech-content/speech-item.tsx
+4 -8
View File
@@ -1,9 +1,5 @@
import IconFont from '@/components/icon-font';
import {
DownloadOutlined,
FileTextOutlined,
PlayCircleOutlined
} from '@ant-design/icons';
import { DownloadOutlined, PlayCircleOutlined } from '@ant-design/icons';
import { Button, Tooltip } from 'antd';
import React, { useRef, useState } from 'react';
import AudioPlayer from './audio-player';
@@ -37,7 +33,7 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
<div className="speech-item">
<div className="voice">
<IconFont type="icon-user_voice" className="font-size-16" />
<span className="text">{props.voice}</span>
{/* <span className="text">{props.voice}</span> */}
</div>
<div className="wrapper">
<AudioPlayer
@@ -69,14 +65,14 @@ const SpeechItem: React.FC<SpeechContentProps> = (props) => {
size="small"
></Button>
</Tooltip>
<Tooltip title="Show Prompt">
{/* <Tooltip title="Show Prompt">
<Button
icon={<FileTextOutlined />}
type="text"
size="small"
onClick={handleCollapse}
></Button>
</Tooltip>
</Tooltip> */}
</div>
</div>
{/* {collapsed && (
src/pages/llmodels/components/table-list.tsx
+14
View File
@@ -481,6 +481,20 @@ const Models: React.FC<ModelsProps> = ({
</Tag>
);
}
if (record.image_only) {
return (
<Tag
style={{
margin: 0,
opacity: 0.8,
transform: 'scale(0.9)'
}}
color="geekblue"
>
Image Only
</Tag>
);
}
return null;
}, []);
const renderChildren = useCallback(
src/pages/llmodels/config/types.ts
+1
View File
@@ -2,6 +2,7 @@ export interface ListItem {
source: string;
backend: string;
reranker: boolean;
image_only?: boolean;
huggingface_repo_id: string;
huggingface_file_name: string;
backend_version?: string;
src/pages/playground/apis/index.ts
+3 -3
View File
@@ -1,4 +1,3 @@
import { MODELS_API } from '@/pages/llmodels/apis';
import { request } from '@umijs/max';
export const CHAT_API = '/v1-openai/chat/completions';
@@ -125,9 +124,10 @@ export const speechToText = async (params: any, options?: any) => {
});
};
export const queryModelVoices = async (params: { name: string }) => {
return request(`${MODELS_API}/${params.name}/voices`, {
export const queryModelVoices = async (params: { model: string }) => {
return request(`/voices`, {
method: 'GET',
params,
skipErrorHandler: true
});
};
src/pages/playground/components/ground-embedding.tsx
+10 -7
View File
@@ -278,13 +278,16 @@ const GroundEmbedding: React.FC<MessageProps> = forwardRef((props, ref) => {
const text = e.clipboardData.getData('text');
if (text) {
console.log('text:', text);
const dataLlist = text.split('\n').map((item: string) => {
return {
text: item,
uid: inputListRef.current?.setMessageId(),
name: ''
};
});
const dataLlist = text
.split('\n')
.map((item: string) => {
return {
text: item,
uid: inputListRef.current?.setMessageId(),
name: ''
};
})
.filter((item: any) => item.text);
setTextList([...textList.slice(0, index), ...dataLlist]);
}
},
src/pages/playground/components/ground-images.tsx
+6 -13
View File
@@ -72,8 +72,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
// width: 'auto',
// uid: 0,
// span: 12,
// progress: 10
// },
// loading: true,
// progress: 60
// }
// {
// dataUrl:
// 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
@@ -137,28 +138,18 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const setImageSize = useCallback(() => {
let size: Record<string, string | number> = {
with: 256,
height: 256,
span: 12
};
if (parameters.n === 1) {
size.width = '100%';
size.height = '100%';
size.span = 24;
}
if (parameters.n === 2) {
size.width = '50%';
size.height = 256;
size.span = 12;
}
if (parameters.n === 3) {
size.width = '33%';
size.height = 256;
size.span = 12;
}
if (parameters.n === 4) {
size.width = '25%';
size.height = 256;
size.span = 12;
}
return size;
@@ -249,6 +240,7 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const imgItem = newImageList[item.index];
if (item.b64_json) {
imgItem.dataUrl += item.b64_json;
// imgItem.cache.push(item.b64_json);
}
const progress = _.round(item.progress, 0);
newImageList[item.index] = {
@@ -264,9 +256,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
};
});
setImageList([...newImageList]);
console.log('newImageList:', newImageList);
});
} catch (error) {
// console.log('error:', error);
console.log('error:', error);
requestToken.current?.abort?.();
setImageList([]);
} finally {
src/pages/playground/components/ground-reranker.tsx
+11 -7
View File
@@ -350,13 +350,16 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
const text = e.clipboardData.getData('text');
if (text) {
console.log('text:', text);
const dataLlist = text.split('\n').map((item: string) => {
return {
text: item,
uid: inputListRef.current?.setMessageId(),
name: ''
};
});
const dataLlist = text
.split('\n')
.map((item: string) => {
return {
text: item,
uid: inputListRef.current?.setMessageId(),
name: ''
};
})
.filter((item: any) => item.text);
setTextList([...textList.slice(0, index), ...dataLlist]);
}
},
@@ -390,6 +393,7 @@ const GroundReranker: React.FC<MessageProps> = forwardRef((props, ref) => {
}
]);
setFileList([]);
setTokenResult(null);
};
useEffect(() => {
src/pages/playground/components/ground-stt.tsx
+3 -1
View File
@@ -109,7 +109,9 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
const params = {
...parameters,
file: new File([audioData.data], audioData.name)
file: new File([audioData.data], audioData.name, {
type: audioData.type
})
};
const result: any = await speechToText({
data: params
src/pages/playground/components/ground-tts.tsx
+2 -4
View File
@@ -157,11 +157,10 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
const handleSelectModel = useCallback(
async (value: string) => {
const data: any = modelList.find((item) => item.value === value);
if (!data) return;
if (!value) return;
try {
const res = await queryModelVoices({
name: data?.modelId as string
model: value
});
const voiceList = _.map(res.voices || [], (item: any) => {
return {
@@ -300,7 +299,6 @@ const GroundLeft: React.FC<MessageProps> = forwardRef((props, ref) => {
clearAll={handleClear}
shouldResetMessage={false}
submitIcon={<SendOutlined></SendOutlined>}
modelList={modelList}
/>
</div>
</div>
src/pages/playground/components/test.txt
+15
View File
@@ -0,0 +1,15 @@
Organic skincare for sensitive skin with aloe vera and chamomile: Imagine the soothing embrace of nature with our organic skincare range, crafted specifically for sensitive skin. Infused with the calming properties of aloe vera and chamomile, each product provides gentle nourishment and protection. Say goodbye to irritation and hello to a glowing, healthy complexion.
New makeup trends focus on bold colors and innovative techniques: Step into the world of cutting-edge beauty with this seasons makeup trends. Bold, vibrant colors and groundbreaking techniques are redefining the art of makeup. From neon eyeliners to holographic highlighters, unleash your creativity and make a statement with every look.
Bio-Hautpflege für empfindliche Haut mit Aloe Vera und Kamille: Erleben Sie die wohltuende Wirkung unserer Bio-Hautpflege, speziell für empfindliche Haut entwickelt. Mit den beruhigenden Eigenschaften von Aloe Vera und Kamille pflegen und schützen unsere Produkte Ihre Haut auf natürliche Weise. Verabschieden Sie sich von Hautirritationen und genießen Sie einen strahlenden Teint.
Neue Make-up-Trends setzen auf kräftige Farben und innovative Techniken: Tauchen Sie ein in die Welt der modernen Schönheit mit den neuesten Make-up-Trends. Kräftige, lebendige Farben und innovative Techniken setzen neue Maßstäbe. Von auffälligen Eyelinern bis hin zu holografischen Highlightern – lassen Sie Ihrer Kreativität freien Lauf und setzen Sie jedes Mal ein Statement.
Cuidado de la piel orgánico para piel sensible con aloe vera y manzanilla: Descubre el poder de la naturaleza con nuestra línea de cuidado de la piel orgánico, diseñada especialmente para pieles sensibles. Enriquecidos con aloe vera y manzanilla, estos productos ofrecen una hidratación y protección suave. Despídete de las irritaciones y saluda a una piel radiante y saludable.
针对敏感肌专门设计的天然有机护肤产品：体验由芦荟和洋甘菊提取物带来的自然呵护。我们的护肤产品特别为敏感肌设计，温和滋润，保护您的肌肤不受刺激。让您的肌肤告别不适，迎来健康光彩。
新的化妆趋势注重鲜艳的颜色和创新的技巧：进入化妆艺术的新纪元，本季的化妆趋势以大胆的颜色和创新的技巧为主。无论是霓虹眼线还是全息高光，每一款妆容都能让您脱颖而出，展现独特魅力。
新しいメイクのトレンドは鮮やかな色と革新的な技術に焦点を当てています: 今シーズンのメイクアップトレンドは、大胆な色彩と革新的な技術に注目しています。ネオンアイライナーからホログラフィックハイライターまで、クリエイティビティを解き放ち、毎回ユニークなルックを演出しましょう。
src/pages/playground/images.tsx
+1 -1
View File
@@ -40,7 +40,7 @@ const TextToImages: React.FC = () => {
const getModelList = async () => {
try {
const params = {
embedding_only: false
image_only: true
};
const res = await queryModelsList(params);
const list = _.map(res.data || [], (item: any) => {
src/pages/playground/speech.tsx
+3 -23
View File
@@ -2,7 +2,6 @@ import IconFont from '@/components/icon-font';
import breakpoints from '@/config/breakpoints';
import HotKeys from '@/config/hotkeys';
import useWindowResize from '@/hooks/use-window-resize';
import { queryModelsList as queryGPUStackModels } from '@/pages/llmodels/apis';
import { AudioOutlined } from '@ant-design/icons';
import { PageContainer } from '@ant-design/pro-components';
import { useIntl } from '@umijs/max';
@@ -103,30 +102,11 @@ const Playground: React.FC = () => {
}
};
const getGpuStackModels = async () => {
try {
const res: any = await queryGPUStackModels({ page: 1, perPage: 100 });
return res.items || [];
} catch (error) {
return [];
}
};
const fetchData = async () => {
try {
const [modelist, list] = await Promise.all([
getModelList(),
getGpuStackModels()
]);
const dataMap = list.reduce((acc: any, cur: any) => {
acc[cur.name] = cur;
return acc;
}, {});
const dataList = modelist.map((item: any) => {
item.modelId = dataMap[item.value]?.id;
return item;
});
setModelList(dataList);
const modelist = await getModelList();
setModelList(modelist);
} catch (error) {
setLoaded(true);
}