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

style: image display ratio

Browse Source
This commit is contained in:
jialin
2024-12-02 17:00:26 +08:00
parent cb13f66b3d
commit 804cbb8c56
18 changed files with 296 additions and 213 deletions
Download Patch File Download Diff File Expand all files Collapse all files
src/pages/playground/components/ground-images.tsx
+2 -2
View File
@@ -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
+1 -1
View File
@@ -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
+2 -54
View File
@@ -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}
src/pages/playground/config/params-config.ts
+1 -1
View File
@@ -311,7 +311,7 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
},
{
type: 'Input',
name: 'negative_prompt',
name: 'negative_prompt', //ng_deepnegative_v1_75t,(badhandv4:1.2),EasyNegative,(worst quality:2),
label: {
text: 'playground.image.params.negativePrompt',
isLocalized: true
src/pages/playground/config/test-image.ts
+38 -33
View File
@@ -1,39 +1,44 @@
// import Img01 from '@/assets/images/img_01.png';
import Img02 from '@/assets/images/img_02.png';
export default [
{
dataUrl:
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
height: 'auto',
width: 'auto',
// dataUrl:
// 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
dataUrl: Img02,
height: 1024,
width: 512,
uid: 0,
span: 12,
loading: true,
span: 24,
loading: false,
progress: 30
},
{
dataUrl:
'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
height: 'auto',
width: 'auto',
uid: 1,
span: 12,
progress: 15
},
{
dataUrl:
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
height: 'auto',
width: 'auto',
uid: 3,
span: 12,
progress: 10
},
{
dataUrl:
'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
height: 'auto',
width: 'auto',
uid: 4,
span: 12,
progress: 15
}
// {
// // dataUrl:
// // 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
// dataUrl: Img02,
// height: 1024,
// width: 512,
// uid: 1,
// span: 12,
// progress: 15
// }
// {
// dataUrl:
// 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
// height: 'auto',
// width: 'auto',
// uid: 3,
// span: 12,
// progress: 10
// },
// {
// dataUrl:
// 'https://gw.alipayobjects.com/zos/antfincdn/LlvErxo8H9/photo-1503185912284-5271ff81b9a8.webp',
// height: 'auto',
// width: 'auto',
// uid: 4,
// span: 12,
// progress: 15
// }
];
src/pages/playground/style/thumb-img.less
+2 -2
View File
@@ -23,8 +23,8 @@
.del {
position: absolute;
top: -4px;
right: -2px;
top: 2px;
right: 2px;
font-size: var(--font-size-middle);
cursor: pointer;
background-color: var(--color-white-1);