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

style: create images ux

Browse Source
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
Download Patch File Download Diff File Expand all files Collapse all files
config/config.ts
+1 -1
View File
@@ -14,7 +14,7 @@ const isProduction = env === 'production';
const t = Date.now();
export default defineConfig({
proxy: {
...proxy('http://csvhs44p420c73bdb41g-80.agent.damodel.com')
...proxy()
},
history: {
type: 'hash'
config/proxy.ts
+26 -1
View File
@@ -18,10 +18,35 @@ export default function createProxyTable(target?: string) {
changeOrigin: true,
secure: false,
ws: true,
buffer: false,
selfHandleResponse: false,
pathRewrite: (pth: string) => pth.replace(`/^/${api}`, `/${api}`),
headers: {
origin: newTarget,
Connection: 'keep-alive'
Connection: 'keep-alive',
'Cache-Control': 'no-cache'
},
onProxyRes: (proxyRes: any, req: any, res: any) => {
// let body = '';
// proxyRes.on('data', (chunk) => {
// body += chunk;
// console.log('Received data from target server::::::::::', chunk);
// });
// proxyRes.on('end', () => {
// console.log('Received data from target server=================end');
// console.log(body);
// });
if (req.headers.accept === 'text/event-stream') {
res.writeHead(res.statusCode, {
'Content-Type': 'text/event-stream',
'Cache-Control': 'no-cache',
Connection: 'keep-alive',
'X-Accel-Buffering': 'no',
'Access-Control-Allow-Origin': '*'
});
proxyRes.pipe(res);
}
}
};
return obj;
config/routes.ts
+1 -1
View File
@@ -36,7 +36,7 @@ export default [
{
name: 'text2images',
title: 'Text2Images',
path: '/playground/text-to-images',
path: '/playground/text-to-image',
key: 'text2images',
icon: 'Comment',
component: './playground/images'
src/components/echarts/scatter.tsx
+6 -6
View File
@@ -28,16 +28,16 @@ const options: any = {
}
},
axisLine: {
show: false,
show: true,
lineStyle: {
color: '#F2F2F2'
color: '#DCDCDC'
}
},
axisTick: {
show: false
},
axisLabel: {
show: false
show: true
},
boundaryGap: [0.05, 0.05]
},
@@ -54,16 +54,16 @@ const options: any = {
}
},
axisLine: {
show: false,
show: true,
lineStyle: {
color: '#F2F2F2'
color: '#DCDCDC'
}
},
axisTick: {
show: false
},
axisLabel: {
show: false
show: true
}
},
src/components/markdown-viewer/index.tsx
+13 -6
View File
@@ -1,3 +1,4 @@
import { isHTMLDocumentString } from '@/utils';
import { EyeOutlined } from '@ant-design/icons';
import { Checkbox, Image, Typography } from 'antd';
import { unescape } from 'lodash';
@@ -198,12 +199,18 @@ const MarkdownViewer: React.FC<MarkdownViewerProps> = ({
}, [content, generateImgSrc]);
return (
<div
style={{ height }}
className="markdown-viewer custom-scrollbar-horizontal"
>
{renderTokens(tokens)}
</div>
<>
{isHTMLDocumentString(content) ? (
<div dangerouslySetInnerHTML={{ __html: content }} style={{ height }} />
) : (
<div
style={{ height }}
className="markdown-viewer custom-scrollbar-horizontal"
>
{renderTokens(tokens)}
</div>
)}
</>
);
};
src/locales/en-US/playground.ts
+5
View File
@@ -43,6 +43,7 @@ export default {
'playground.toolbar.compare4Model': '4-Model Comparison',
'playground.toolbar.compare6Model': '6-Model Comparison',
'playground.input.holder': 'Type <kbd>/</kbd> to input message',
'playground.input.prompt.holder': 'Type <kbd>/</kbd> to input prompt',
'playground.input.keyword.holder': 'Type <kbd>/</kbd> to input your query',
'playground.compare.apply': 'Apply',
'playground.compare.applytoall': 'Apply to all models',
@@ -61,6 +62,10 @@ export default {
'playground.params.height': 'Height',
'playground.params.custom': 'Custom',
'playground.params.empty.tips': 'Generated images will appear here',
'playground.params.standard': 'Standard',
'playground.params.hd': 'HD',
'playground.params.style.vivid': 'Vivid',
'playground.params.style.natural': 'Natural',
'playground.embedding.documents': 'Documents',
'playground.embedding.addtext': 'Add Text',
'playground.embedding.inputyourtext': 'Input your text',
src/locales/zh-CN/menu.ts
+1 -1
View File
@@ -5,7 +5,7 @@ export default {
'menu.playground.embedding': '文本嵌入',
'menu.playground.chat': '对话',
'menu.playground.speech': '语音',
'menu.playground.text2images': '图片',
'menu.playground.text2images': '文生图',
'menu.compare': '多模型对比',
'menu.models': '模型',
'menu.resources': '资源',
src/locales/zh-CN/playground.ts
+5
View File
@@ -44,6 +44,7 @@ export default {
'playground.toolbar.compare6Model': '6 模型对比',
'playground.input.holder': '按 <kbd>/</kbd> 开始输入',
'playground.input.keyword.holder': '按 <kbd>/</kbd> 输入你的查询',
'playground.input.prompt.holder': '按 <kbd>/</kbd> 输入提示',
'playground.compare.apply': '应用',
'playground.compare.applytoall': '应用到所有模型',
'playground.model.noavailable': '无可用模型',
@@ -60,6 +61,10 @@ export default {
'playground.params.width': '宽度',
'playground.params.height': '高度',
'playground.params.custom': '自定义',
'playground.params.standard': '标准',
'playground.params.hd': '高清',
'playground.params.style.vivid': '生动',
'playground.params.style.natural': '自然',
'playground.params.empty.tips': '生成的图片将出现在这里',
'playground.embedding.documents': '文档',
'playground.embedding.addtext': '添加文本',
src/pages/api-keys/components/add-apikey.tsx
+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"
src/pages/api-keys/config/index.ts
+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
}
];
src/pages/llmodels/components/model-card.tsx
+1
View File
@@ -54,6 +54,7 @@ const ModelCard: React.FC<{
signal: axiosTokenRef.current.signal
}
);
console.log('readme++++++++', res);
return res || '';
} catch (error) {
return '';
src/pages/playground/components/ground-images.tsx
+51 -42
View File
@@ -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}
src/utils/fetch-chunk-data.ts
+3 -1
View File
@@ -32,6 +32,7 @@ export const fetchChunkedData = async (params: {
params?: any;
signal?: AbortSignal;
method?: string;
headers?: any;
}) => {
const method = params.method || 'POST';
let url = params.url;
@@ -43,7 +44,8 @@ export const fetchChunkedData = async (params: {
body: method === 'POST' ? JSON.stringify(params.data) : null,
signal: params.signal,
headers: {
'Content-Type': 'application/json'
'Content-Type': 'application/json',
...params.headers
}
});
if (!response.ok) {
src/utils/index.ts
+10
View File
@@ -127,3 +127,13 @@ export const cosineSimilarity = (vec1: number[], vec2: number[]) => {
return dotProduct / (magnitudeA * magnitudeB);
};
export const isHTMLDocumentString = (str: string) => {
try {
const parser = new DOMParser();
const doc = parser.parseFromString(str, 'text/html');
return doc.documentElement.tagName.toLowerCase() === 'html';
} catch (e) {
return false;
}
};