diff --git a/src/pages/playground/config/params-config.ts b/src/pages/playground/config/params-config.ts
index 31d4f704..8303727c 100644
--- a/src/pages/playground/config/params-config.ts
+++ b/src/pages/playground/config/params-config.ts
@@ -1,6 +1,6 @@
import { ParamsSchema } from './types';
-export interface ImageSizeItem {
+export interface SizeOption {
label: string;
value: string;
width: number;
@@ -504,7 +504,7 @@ export const ImageAdvancedParamsConfig: ParamsSchema[] = [
}
];
-export const ImageCustomSizeConfig: ParamsSchema[] = [
+export const CustomSizeConfig: ParamsSchema[] = [
{
type: 'Slider',
name: 'width',
diff --git a/src/pages/playground/config/video-parameters.ts b/src/pages/playground/config/video-parameters.ts
index dabe2a8e..7d9bf349 100644
--- a/src/pages/playground/config/video-parameters.ts
+++ b/src/pages/playground/config/video-parameters.ts
@@ -1,7 +1,7 @@
-import { ImageSizeItem } from './params-config';
+import { SizeOption } from './params-config';
import { ParamsSchema } from './types';
-export const videoSizeOptions: ImageSizeItem[] = [
+export const videoSizeOptions: SizeOption[] = [
{ label: '720x1280', value: '720x1280', width: 720, height: 1280 },
{ label: '1280x720', value: '1280x720', width: 1280, height: 720 },
{ label: '1024x1792', value: '1024x1792', width: 1024, height: 1792 },
diff --git a/src/pages/playground/hooks/use-init-meta.ts b/src/pages/playground/hooks/use-init-meta.ts
index d4e714af..b1d07cfc 100644
--- a/src/pages/playground/hooks/use-init-meta.ts
+++ b/src/pages/playground/hooks/use-init-meta.ts
@@ -1,11 +1,11 @@
import useOverlayScroller from '@/hooks/use-overlay-scroller';
import {
+ CustomSizeConfig,
ImageCountConfig,
- ImageCustomSizeConfig,
ImageSizeConfig,
- ImageSizeItem,
ImageconstExtraConfig,
ImageAdvancedParamsConfig as ImgAdvancedParamsConfig,
+ SizeOption,
imageSizeOptions as imageSizeList
} from '@/pages/playground/config/params-config';
import { generateRandomNumber } from '@/utils';
@@ -210,9 +210,9 @@ export const useInitImageMeta = (
const [searchParams] = useSearchParams();
const [modelMeta, setModelMeta] = useState
({});
const [isOpenaiCompatible, setIsOpenaiCompatible] = useState(false);
- const [imageSizeOptions, setImageSizeOptions] = React.useState<
- ImageSizeItem[]
- >([]);
+ const [imageSizeOptions, setImageSizeOptions] = React.useState(
+ []
+ );
const [basicParamsConfig, setBasicParamsConfig] = React.useState<
ParamsSchema[]
>([...ImageCountConfig, ...ImageSizeConfig]);
@@ -275,7 +275,7 @@ export const useInitImageMeta = (
const generateImageParamsConfig = (
currentModel: any,
- sizeOptions: ImageSizeItem[]
+ sizeOptions: SizeOption[]
) => {
if (sizeOptions.length) {
const sizeConfig = ImageSizeConfig.map((item) => {
@@ -290,18 +290,16 @@ export const useInitImageMeta = (
return [...ImageCountConfig, ...sizeConfig];
}
const { max_height, max_width } = currentModel.meta || {};
- const customSizeConfig = _.cloneDeep(ImageCustomSizeConfig).map(
- (item: any) => {
- const max = item.name === 'height' ? max_height : max_width;
- return {
- ...item,
- attrs: {
- ...item.attrs,
- max: max || item.attrs.max
- }
- };
- }
- );
+ const customSizeConfig = _.cloneDeep(CustomSizeConfig).map((item: any) => {
+ const max = item.name === 'height' ? max_height : max_width;
+ return {
+ ...item,
+ attrs: {
+ ...item.attrs,
+ max: max || item.attrs.max
+ }
+ };
+ });
return [...ImageCountConfig, ...customSizeConfig];
};
@@ -334,7 +332,7 @@ export const useInitImageMeta = (
if (values.size === 'custom') {
return [
...basicParamsConfig,
- ...ImageCustomSizeConfig,
+ ...CustomSizeConfig,
...(values.isOpenaiCompatible
? ImageconstExtraConfig
: ImageAdvancedParamsConfig)
@@ -437,7 +435,7 @@ export const useInitImageMeta = (
if (changeValues.size && changeValues.size === 'custom') {
setParamsConfig([
...basicParamsConfig,
- ...ImageCustomSizeConfig,
+ ...CustomSizeConfig,
...(!isOpenaiCompatible
? ImageAdvancedParamsConfig
: ImageconstExtraConfig)
@@ -515,7 +513,7 @@ export const useInitImageMeta = (
imgInitialValues,
ImageCountConfig,
ImageSizeConfig,
- ImageCustomSizeConfig,
+ CustomSizeConfig,
ImageconstExtraConfig
};
};
diff --git a/src/pages/playground/hooks/use-init-video-meta.ts b/src/pages/playground/hooks/use-init-video-meta.ts
index 47b0f383..ee810d4e 100644
--- a/src/pages/playground/hooks/use-init-video-meta.ts
+++ b/src/pages/playground/hooks/use-init-video-meta.ts
@@ -1,6 +1,6 @@
import {
- ImageCustomSizeConfig,
- ImageSizeItem
+ CustomSizeConfig,
+ SizeOption
} from '@/pages/playground/config/params-config';
import { generateRandomNumber } from '@/utils';
import { useSearchParams } from '@umijs/max';
@@ -43,9 +43,9 @@ export const useInitVideoMeta = (
const [searchParams] = useSearchParams();
const [modelMeta, setModelMeta] = useState({});
const [isOpenaiCompatible, setIsOpenaiCompatible] = useState(false);
- const [videoSizeOptions, setVideoSizeOptions] = React.useState<
- ImageSizeItem[]
- >([]);
+ const [videoSizeOptions, setVideoSizeOptions] = React.useState(
+ []
+ );
const [basicParamsConfig, setBasicParamsConfig] = React.useState<
ParamsSchema[]
>([...videoParamsConfig]);
@@ -107,7 +107,7 @@ export const useInitVideoMeta = (
const generateParamsConfig = (
currentModel: any,
- sizeOptions: ImageSizeItem[]
+ sizeOptions: SizeOption[]
) => {
if (sizeOptions.length) {
const sizeConfig = videoParamsConfig.map((item) => {
@@ -120,18 +120,16 @@ export const useInitVideoMeta = (
}
const { max_height, max_width } = currentModel.meta || {};
// generate custom size config
- const customSizeConfig = _.cloneDeep(ImageCustomSizeConfig).map(
- (item: any) => {
- const max = item.name === 'height' ? max_height : max_width;
- return {
- ...item,
- attrs: {
- ...item.attrs,
- max: max || item.attrs.max
- }
- };
- }
- );
+ const customSizeConfig = _.cloneDeep(CustomSizeConfig).map((item: any) => {
+ const max = item.name === 'height' ? max_height : max_width;
+ return {
+ ...item,
+ attrs: {
+ ...item.attrs,
+ max: max || item.attrs.max
+ }
+ };
+ });
return [...customSizeConfig];
};
@@ -163,7 +161,7 @@ export const useInitVideoMeta = (
if (values.size === 'custom') {
return [
...basicParamsConfig,
- ...ImageCustomSizeConfig,
+ ...CustomSizeConfig,
...(values.isOpenaiCompatible
? videoExtraConfig
: videoAdvancedParamsConfig)
@@ -266,7 +264,7 @@ export const useInitVideoMeta = (
if (changeValues.size && changeValues.size === 'custom') {
setParamsConfig([
...basicParamsConfig,
- ...ImageCustomSizeConfig,
+ ...CustomSizeConfig,
...(!isOpenaiCompatible
? videoAdvancedParamsConfig
: videoExtraConfig)
@@ -342,7 +340,7 @@ export const useInitVideoMeta = (
videoAdvancedDefaultValues,
videoAdvancedParamsConfig,
videoInitialValues,
- ImageCustomSizeConfig,
+ CustomSizeConfig,
videoExtraConfig
};
};
diff --git a/src/pages/playground/hooks/use-text-video.ts b/src/pages/playground/hooks/use-text-video.ts
index 6f45f65a..6b265b92 100644
--- a/src/pages/playground/hooks/use-text-video.ts
+++ b/src/pages/playground/hooks/use-text-video.ts
@@ -13,10 +13,6 @@ export default function useTextVideo(props: any) {
const [videoList, setVideoList] = useState<
{
dataUrl: string;
- height: number | string;
- width: string | number;
- maxHeight: string | number;
- maxWidth: string | number;
uid: number;
span?: number;
loading?: boolean;
@@ -47,29 +43,6 @@ export default function useTextVideo(props: any) {
return requestIdRef.current;
};
- const removeBase64Suffix = (str: string, suffix: string) => {
- return str.endsWith(suffix) ? str.slice(0, -suffix.length) : str;
- };
-
- const setImageSize = (parameters: any) => {
- let size: Record = {
- span: 12
- };
- if (parameters.n === 1) {
- size.span = 24;
- }
- if (parameters.n === 2) {
- size.span = 12;
- }
- if (parameters.n === 3) {
- size.span = 12;
- }
- if (parameters.n === 4) {
- size.span = 12;
- }
- return size;
- };
-
const setMessageId = () => {
messageId.current = messageId.current + 1;
return messageId.current;
@@ -91,31 +64,21 @@ export default function useTextVideo(props: any) {
requestToken.current?.abort?.('cancel');
requestToken.current = new AbortController();
const currentRequestId = updateRequestId();
- const size: any = setImageSize(parameters);
setLoading(true);
setMessageId();
setTokenResult(null);
- const imgSize = _.split(parameters.size, 'x').map((item: string) =>
- _.toNumber(item)
- );
+ const newList = [
+ {
+ dataUrl: '',
+ progress: 0,
+ loading: true,
+ preview: false,
+ uid: setMessageId()
+ }
+ ];
- let newImageList = Array(parameters.n)
- .fill({})
- .map((item, index: number) => {
- return {
- dataUrl: 'data:image/png;base64,',
- ...size,
- progress: 0,
- height: imgSize[1],
- width: imgSize[0],
- loading: true,
- progressType: 'dashboard',
- preview: false,
- uid: setMessageId()
- };
- });
- setVideoList(newImageList);
+ setVideoList(newList);
const result = await createVideo({
data: parameters,
@@ -145,28 +108,15 @@ export default function useTextVideo(props: any) {
return;
}
- result?.data?.forEach((item: any, index: number) => {
- const imgItem = newImageList[index];
+ newList[0] = {
+ ...newList[0],
+ dataUrl: result?.id,
+ loading: false,
+ progress: 100
+ };
- if (item.b64_json) {
- imgItem.dataUrl = `data:image/png;base64,${item.b64_json}`;
- }
-
- newImageList[index] = {
- dataUrl: imgItem.dataUrl,
- height: imgSize[1],
- width: imgSize[0],
- maxHeight: `${imgSize[1]}px`,
- maxWidth: `${imgSize[0]}px`,
- uid: imgItem.uid,
- span: imgItem.span,
- loading: false,
- preview: true,
- progress: 100
- };
- });
- console.log('newImageList:', newImageList);
- setVideoList([...newImageList]);
+ console.log('newList:', newList);
+ setVideoList([...newList]);
} catch (error) {
console.log('error:', error);
updateRequestId();
diff --git a/src/pages/playground/video.tsx b/src/pages/playground/video.tsx
index b3b907b5..42561325 100644
--- a/src/pages/playground/video.tsx
+++ b/src/pages/playground/video.tsx
@@ -17,32 +17,30 @@ import './style/play-ground.less';
const PlaygroundRerank: React.FC = () => {
const intl = useIntl();
- const groundRerankerRef = useRef(null);
- const [rerankerModelList, setRerankerModelList] = useState<
- Global.BaseOption[]
- >([]);
+ const groundVideoRef = useRef(null);
+ const [modelList, setModelList] = useState[]>([]);
const [loaded, setLoaded] = useState(false);
useCollapseLayout({
handler: () => {
- groundRerankerRef.current?.setCollapse?.();
+ groundVideoRef.current?.setCollapse?.();
},
- triggeredRef: groundRerankerRef.current
+ triggeredRef: groundVideoRef.current
});
const handleViewCode = useMemoizedFn(() => {
- groundRerankerRef.current?.viewCode?.();
+ groundVideoRef.current?.viewCode?.();
});
const handleToggleCollapse = useMemoizedFn(() => {
- groundRerankerRef.current?.setCollapse?.();
+ groundVideoRef.current?.setCollapse?.();
});
useEffect(() => {
- const getModelListByReranker = async () => {
+ const getModelList = async () => {
try {
const params = {
- categories: modelCategoriesMap.reranker,
+ categories: modelCategoriesMap.llm,
with_meta: true
};
const res = await queryModelsList(params);
@@ -61,10 +59,8 @@ const PlaygroundRerank: React.FC = () => {
};
const fetchData = async () => {
try {
- const [rerankerModelList] = await Promise.all([
- getModelListByReranker()
- ]);
- setRerankerModelList(rerankerModelList);
+ const [modelList] = await Promise.all([getModelList()]);
+ setModelList(modelList);
} catch (error) {
setLoaded(true);
}
@@ -75,7 +71,7 @@ const PlaygroundRerank: React.FC = () => {
useHotkeys(
HotKeys.RIGHT.join(','),
() => {
- groundRerankerRef.current?.setCollapse?.();
+ groundVideoRef.current?.setCollapse?.();
},
{
preventDefault: true
@@ -103,8 +99,8 @@ const PlaygroundRerank: React.FC = () => {
diff --git a/src/pages/playground/view-code/video.ts b/src/pages/playground/view-code/video.ts
index 4aa6ff83..1319054c 100644
--- a/src/pages/playground/view-code/video.ts
+++ b/src/pages/playground/view-code/video.ts
@@ -1,6 +1,6 @@
import _ from 'lodash';
-import { MODEL_PROXY } from '../apis';
-import { fomatNodeJsParams, formatCurlArgs } from './utils';
+import { MODEL_PROXY, OPENAI_COMPATIBLE } from '../apis';
+import { fomatNodeJsParams, formatCurlArgs, formatPyParams } from './utils';
export const generateCurlCode = ({
api: url,
@@ -13,23 +13,14 @@ export const generateCurlCode = ({
const api = modelProxy ? `${MODEL_PROXY}/\${YOUR_API_PATH}` : url;
// ========================= Curl =========================
- let curlCode = `
-curl ${host}${api} \\
--H "Content-Type: application/json" \\
--H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\${modelProxy ? `\n-H "X-GPUStack-Model: ${parameters.model}" \\` : ''}
-${formatCurlArgs(parameters, isFormdata)}`.trim();
- if (edit) {
- curlCode = `
+ const curlCode = `
curl ${host}${api} \\
-H "Content-Type: multipart/form-data" \\
-H "Authorization: Bearer $\{YOUR_GPUSTACK_API_KEY}" \\${modelProxy ? `\n-H "X-GPUStack-Model: ${parameters.model}" \\` : ''}
--F image="@image.png" \\
--F mask="@mask.png" \\
${formatCurlArgs(_.omit(parameters, ['mask', 'image']), isFormdata)}`
- .trim()
- .replace(/\\$/, '');
- }
+ .trim()
+ .replace(/\\$/, '');
return curlCode;
};
@@ -37,8 +28,7 @@ ${formatCurlArgs(_.omit(parameters, ['mask', 'image']), isFormdata)}`
export const generateCode = ({
api: url,
parameters,
- isFormdata = false,
- edit = false
+ isFormdata = false
}: Record
) => {
const host = window.location.origin;
const api = url;
@@ -47,36 +37,39 @@ export const generateCode = ({
let curlCode = generateCurlCode({
api: url,
parameters,
- isFormdata,
- edit
+ isFormdata
});
// ========================= Python =========================
const pythonCode = `
-import requests\n
-url="${host}${api}"
-headers = {
- "Content-type": "application/json",
- "Authorization": "Bearer $\{YOUR_GPUSTACK_API_KEY}"
-}
-data = ${JSON.stringify(parameters, null, 2).replace(/null/g, 'None')}\n
-response = requests.post(url, headers=headers, json=data)
-print(response.json()['data']['object'])`.trim();
+from openai import OpenAI\n
+client = OpenAI(
+ base_url="${host}/${OPENAI_COMPATIBLE}",
+ api_key="YOUR_GPUSTACK_API_KEY"
+)
+
+video = client.videos.create(\n${formatPyParams({ ...parameters })})\n
+print(video.id)`.trim();
// ========================= Node.js =========================
+ const params = fomatNodeJsParams({
+ ...parameters
+ });
+
const nodeJsCode = `
-const axios = require('axios');
+const OpenAI = require("openai");
-const url = "${host}${api}";
-const headers = {
- "Content-type": "application/json",
- "Authorization": "Bearer $\{YOUR_GPUSTACK_API_KEY}"
-};
-const data = ${fomatNodeJsParams(parameters)};
+const openai = new OpenAI({
+ "apiKey": "YOUR_GPUSTACK_API_KEY",
+ "baseURL": "${host}/${OPENAI_COMPATIBLE}"
+});
-axios.post(url, data, { headers }).then((response) => {
- console.log(response.data.object);
-});`.trim();
+async function main() {
+ const params = ${params};
+ const video = await openai.videos.create(params);
+ console.log(video.id);
+}
+main();`.trim();
return {
curlCode,