style: create images ux

This commit is contained in:
jialin
2024-11-22 10:00:34 +08:00
parent dde937f460
commit 67febd3e25
14 changed files with 150 additions and 73 deletions
+3 -10
View File
@@ -5,7 +5,7 @@ import SealSelect from '@/components/seal-form/seal-select';
import { PageAction } from '@/config';
import { PageActionType } from '@/config/types';
import { useIntl } from '@umijs/max';
import { Button, Form, Modal, Select, Tag } from 'antd';
import { Button, Form, Modal, Tag } from 'antd';
import dayjs from 'dayjs';
import { useEffect, useState } from 'react';
import { createApisKey } from '../apis';
@@ -160,17 +160,10 @@ const AddModal: React.FC<AddModalProps> = ({
]}
>
<SealSelect
options={expirationOptions}
label={intl.formatMessage({ id: 'apikeys.form.expiretime' })}
required
>
{expirationOptions.map((option) => {
return (
<Select.Option key={option.value} value={option.value}>
{intl.formatMessage({ id: option.label })}
</Select.Option>
);
})}
</SealSelect>
></SealSelect>
</Form.Item>
<Form.Item<FormData>
name="description"
+24 -4
View File
@@ -1,6 +1,26 @@
export const expirationOptions = [
{ label: 'apikeys.form.expiration.7days', type: 'day', value: 7 },
{ label: 'apikeys.form.expiration.1month', type: 'month', value: 1 },
{ label: 'apikeys.form.expiration.6months', type: 'month', value: 6 },
{ label: 'apikeys.form.expiration.never', type: 'never', value: -1 }
{
label: 'apikeys.form.expiration.7days',
type: 'day',
value: 7,
locale: true
},
{
label: 'apikeys.form.expiration.1month',
type: 'month',
value: 1,
locale: true
},
{
label: 'apikeys.form.expiration.6months',
type: 'month',
value: 6,
locale: true
},
{
label: 'apikeys.form.expiration.never',
type: 'never',
value: -1,
locale: true
}
];
@@ -54,6 +54,7 @@ const ModelCard: React.FC<{
signal: axiosTokenRef.current.signal
}
);
console.log('readme++++++++', res);
return res || '';
} catch (error) {
return '';
@@ -48,8 +48,8 @@ const extraConfig: ParamsSchema[] = [
type: 'Select',
name: 'quality',
options: [
{ label: 'standard', value: 'standard' },
{ label: 'hd', value: 'hd' }
{ label: 'playground.params.standard', value: 'standard', locale: true },
{ label: 'playground.params.hd', value: 'hd', locale: true }
],
label: {
text: 'playground.params.quality',
@@ -65,8 +65,12 @@ const extraConfig: ParamsSchema[] = [
type: 'Select',
name: 'style',
options: [
{ label: 'vivid', value: 'vivid' },
{ label: 'natural', value: 'natural' }
{ label: 'playground.params.style.vivid', value: 'vivid', locale: true },
{
label: 'playground.params.style.natural',
value: 'natural',
locale: true
}
],
label: {
text: 'playground.params.style',
@@ -93,42 +97,42 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
progress?: number;
}[]
>([
{
dataUrl:
'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
height: 'auto',
width: 'auto',
uid: 0,
span: 12,
progress: 10
},
{
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://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png',
// height: 'auto',
// width: 'auto',
// uid: 0,
// span: 12,
// progress: 10
// },
// {
// 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
// }
]);
const intl = useIntl();
@@ -252,7 +256,10 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
const result: any = await fetchChunkedData({
data: params,
url: CREAT_IMAGE_API,
signal: requestToken.current.signal
signal: requestToken.current.signal,
headers: {
accept: 'text/event-stream'
}
});
if (result?.error) {
@@ -462,7 +469,9 @@ const GroundImages: React.FC<MessageProps> = forwardRef((props, ref) => {
)}
<div className="ground-left-footer">
<MessageInput
placeholer="Type <kbd>/</kbd> to input prompt"
placeholer={intl.formatMessage({
id: 'playground.input.prompt.holder'
})}
actions={[]}
loading={loading}
disabled={!parameters.model}