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

chore: video test code

Browse Source
This commit is contained in:
jialin
2026-01-13 18:43:11 +08:00
parent 342d977fe4
commit 5ff26e1ce8
19 changed files with 159 additions and 235 deletions
Download Patch File Download Diff File Expand all files Collapse all files
config/routes.ts
+4 -4
View File
@@ -79,10 +79,10 @@ export default [
title: 'Video',
path: '/playground/video',
key: 'video',
icon: 'icon-video',
hideInMenu: true,
selectedIcon: 'icon-video-filled',
defaultIcon: 'icon-video',
icon: 'icon-video-outline',
hideInMenu: false,
selectedIcon: 'icon-video-filled02',
defaultIcon: 'icon-video-outline',
component: './playground/video'
}
]
src/components/icon-font/index.tsx
+1 -1
View File
@@ -2,7 +2,7 @@ import { createFromIconfontCN } from '@ant-design/icons';
// import './iconfont/iconfont.js';
const IconFont = createFromIconfontCN({
scriptUrl: '//at.alicdn.com/t/c/font_4613488_h1excejg8p8.js'
scriptUrl: '//at.alicdn.com/t/c/font_4613488_xson4g41d39.js'
});
export default IconFont;
src/components/logs-viewer/styles/logs-list.less
+3 -2
View File
@@ -1,7 +1,8 @@
.logs-wrap {
background-color: var(--color-logs-bg);
border-radius: var(--border-radius-mini);
font-family: monospace, Menlo, Courier, 'Courier New', Consolas, Monaco,
font-family:
monospace, Menlo, Courier, 'Courier New', Consolas, Monaco,
'Liberation Mono' !important;
.content {
@@ -35,7 +36,7 @@
}
color: var(--color-logs-text);
font-size: var(--font-size-small);
font-size: 12px;
line-height: 22px;
white-space: pre-wrap;
background-color: var(--color-logs-bg);
src/components/status-tag/index.less
+2 -2
View File
@@ -3,7 +3,7 @@
display: flex;
justify-content: center;
align-items: center;
padding: 2px 10px;
padding-inline: 7px;
border-radius: 20px;
min-width: 76px;
width: max-content;
@@ -16,7 +16,7 @@
display: flex;
align-items: center;
height: 20px;
gap: 5px;
gap: 4px;
&.err {
cursor: default;
src/global.less
+1
View File
@@ -212,6 +212,7 @@ body {
// set for the non-form item
.ant-input-outlined,
.ant-input-affix-wrapper,
.ant-select,
.ant-picker {
height: 40px;
}
src/locales/en-US/playground.ts
+2 -1
View File
@@ -161,5 +161,6 @@ export default {
'playground.uploadImage.url.invalid':
'Please enter a direct image URL (e.g. https://.../image.png). Press ESC to cancel.',
'playground.uploadImage.url.holder': 'Enter an image URL',
'playground.uploadImage.url.button': 'Add Image from URL'
'playground.uploadImage.url.button': 'Add Image from URL',
'playground.params.duration': 'Duration (seconds)'
};
src/locales/ja-JP/playground.ts
+4 -2
View File
@@ -164,7 +164,8 @@ export default {
'playground.uploadImage.url.invalid':
'Please enter a direct image URL (e.g. https://.../image.png). Press ESC to cancel.',
'playground.uploadImage.url.holder': 'Enter an image URL',
'playground.uploadImage.url.button': 'Add Image from URL'
'playground.uploadImage.url.button': 'Add Image from URL',
'playground.params.duration': 'Duration (seconds)'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
@@ -173,5 +174,6 @@ export default {
// 3. 'playground.uploadfile.sizeError': 'File size exceeds the limit. Maximum allowed: {size}.'
// 4. 'playground.uploadImage.url.invalid': 'Please enter a direct image URL(e.g. https://.../image.png). Press ESC to cancel.',
// 5. 'playground.uploadImage.url.holder': 'Enter an image URL'
// 6. 'playground.uploadImage.url.button': 'Add Image from URL'
// 6. 'playground.uploadImage.url.button': 'Add Image from URL',
// 7. 'playground.params.duration': 'Duration (seconds)'
// ========== End of To-Do List ==========
src/locales/ru-RU/playground.ts
+4 -2
View File
@@ -158,11 +158,13 @@ export default {
'playground.uploadImage.url.invalid':
'Please enter a direct image URL (e.g. https://.../image.png). Press ESC to cancel.',
'playground.uploadImage.url.holder': 'Enter an image URL',
'playground.uploadImage.url.button': 'Add Image from URL'
'playground.uploadImage.url.button': 'Add Image from URL',
'playground.params.duration': 'Duration (seconds)'
};
// ========== To-Do: Translate Keys (Remove After Translation) ==========
// 1. 'playground.uploadImage.url.invalid': 'Please enter a direct image URL(e.g. https://.../image.png). Press ESC to cancel.',
// 2. 'playground.uploadImage.url.holder': 'Enter an image URL',
// 3. 'playground.uploadImage.url.button': 'Add Image from URL'
// 3. 'playground.uploadImage.url.button': 'Add Image from URL',
// 4. 'playground.params.duration': 'Duration (seconds)'
// ========== End of To-Do List ==========
src/locales/zh-CN/playground.ts
+2 -1
View File
@@ -154,5 +154,6 @@ export default {
'playground.uploadImage.url.invalid':
'请输入直接的图片链接（例如：https://…/image.png）。按 ESC 可取消。',
'playground.uploadImage.url.holder': '请输入图片链接',
'playground.uploadImage.url.button': '从链接添加图片'
'playground.uploadImage.url.button': '从链接添加图片',
'playground.params.duration': '时长 (秒)'
};
src/pages/cluster-management/cluster-detail.tsx
+3 -3
View File
@@ -44,7 +44,7 @@ const ClusterDetailModal = () => {
items={[
{
key: 'workers',
label: `Workers (${clusterDetailData?.workers ?? 0})`,
label: `Workers`,
icon: <IconFont type="icon-resources" />,
children: (
<WorkerList
@@ -58,13 +58,13 @@ const ClusterDetailModal = () => {
},
{
key: 'deployments',
label: `Deployments (${clusterDetailData?.models ?? 0})`,
label: `Deployments`,
icon: <IconFont type="icon-rocket-launch1" />,
children: <Deployments clusterId={Number(id)}></Deployments>
},
{
key: 'gpus',
label: `GPUs (${clusterDetailData?.gpus ?? 0})`,
label: `GPUs`,
icon: <IconFont type="icon-gpu1" />,
children: <GPUList clusterId={Number(id)} widths={{ input: 360 }} />
}
src/pages/llmodels/forms/advance-config.tsx
-31
View File
@@ -1,7 +1,6 @@
import LabelSelector from '@/components/label-selector';
import CheckboxField from '@/components/seal-form/checkbox-field';
import SealSelect from '@/components/seal-form/seal-select';
import SealSlider from '@/components/seal-form/seal-slider';
import { useIntl } from '@umijs/max';
import { Form } from 'antd';
import _ from 'lodash';
@@ -68,36 +67,6 @@ const AdvanceConfig = () => {
options={modelCategories}
></SealSelect>
</Form.Item>
{!isGGUF && modelContextData?.native && (
<Form.Item<FormData> name="max_context_len">
<SealSlider
label={intl.formatMessage({ id: 'models.form.maxContextLength' })}
inputnumber={true}
onChange={handleContextLengthChange}
included={true}
max={modelContextData?.scaled || 163840}
tooltip={{}}
step={1024}
marks={{
[modelContextData?.scaled]: {
label: 'scaled',
style: {
transform: 'translateX(-100%)'
}
},
[modelContextData?.native]: {
label: 'native',
style: {
transform:
modelContextData?.scaled === modelContextData?.native
? 'translateX(-100%)'
: 'unset'
}
}
}}
></SealSlider>
</Form.Item>
)}
<BackendParametersList></BackendParametersList>
<Form.Item<FormData> name="env">
<LabelSelector
src/pages/playground/components/ground-video.tsx
+30 -18
View File
@@ -2,10 +2,9 @@ import { setRouteCache } from '@/atoms/route-cache';
import AlertInfo from '@/components/alert-info';
import IconFont from '@/components/icon-font';
import routeCachekey from '@/config/route-cachekey';
import ThumbImg from '@/pages/playground/components/thumb-img';
import { VideoCameraOutlined } from '@ant-design/icons';
import { useIntl } from '@umijs/max';
import { Button, Tooltip } from 'antd';
import { Button, Spin, Tooltip } from 'antd';
import classNames from 'classnames';
import _ from 'lodash';
import 'overlayscrollbars/overlayscrollbars.css';
@@ -116,6 +115,7 @@ const GroundVideo: React.FC<MessageProps> = forwardRef((props, ref) => {
const viewCodeContent = useMemo(() => {
return generateCode({
api: CREATE_VIDEO_API,
isFormdata: true,
parameters: {
...finalParameters,
prompt: currentPrompt
@@ -170,22 +170,34 @@ const GroundVideo: React.FC<MessageProps> = forwardRef((props, ref) => {
>
<>
<div className="content" style={{ height: '100%' }}>
<ThumbImg
style={{
padding: 0,
height: '100%',
justifyContent: 'center',
flexDirection: 'column',
flexWrap: 'unset',
alignItems: 'center'
}}
autoBgColor={false}
editable={false}
dataList={videoList}
responseable={true}
gutter={[8, 16]}
autoSize={true}
></ThumbImg>
{videoList.length > 0 && (
<div
style={{
width: '100%',
maxWidth: 720,
margin: '24px auto',
aspectRatio: '16 / 9',
background: '#000',
borderRadius: 8,
overflow: 'hidden',
boxShadow: '0 4px 24px rgba(0,0,0,0.12)'
}}
>
<Spin spinning={loading}>
<video
src={videoList[0]?.dataUrl}
poster="https://placehold.co/640x360.png?text=GPUStack"
controls
disablePictureInPicture
style={{
width: '100%',
height: '100%',
objectFit: 'contain'
}}
/>
</Spin>
</div>
)}
{!videoList.length && (
<div className="flex-column font-size-14 flex-center gap-20 justify-center hold-wrapper">
<VideoCameraOutlined className="font-size-32 text-secondary" />
src/pages/playground/config/params-config.ts
+2 -2
View File
@@ -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',
src/pages/playground/config/video-parameters.ts
+2 -2
View File
@@ -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 },
src/pages/playground/hooks/use-init-meta.ts
+19 -21
View File
@@ -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<any>({});
const [isOpenaiCompatible, setIsOpenaiCompatible] = useState<boolean>(false);
const [imageSizeOptions, setImageSizeOptions] = React.useState<
ImageSizeItem[]
>([]);
const [imageSizeOptions, setImageSizeOptions] = React.useState<SizeOption[]>(
[]
);
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
};
};
src/pages/playground/hooks/use-init-video-meta.ts
+19 -21
View File
@@ -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<any>({});
const [isOpenaiCompatible, setIsOpenaiCompatible] = useState<boolean>(false);
const [videoSizeOptions, setVideoSizeOptions] = React.useState<
ImageSizeItem[]
>([]);
const [videoSizeOptions, setVideoSizeOptions] = React.useState<SizeOption[]>(
[]
);
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
};
};
src/pages/playground/hooks/use-text-video.ts
+18 -68
View File
@@ -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<string, string | number> = {
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();
src/pages/playground/video.tsx
+13 -17
View File
@@ -17,32 +17,30 @@ import './style/play-ground.less';
const PlaygroundRerank: React.FC = () => {
const intl = useIntl();
const groundRerankerRef = useRef<any>(null);
const [rerankerModelList, setRerankerModelList] = useState<
Global.BaseOption<string>[]
>([]);
const groundVideoRef = useRef<any>(null);
const [modelList, setModelList] = useState<Global.BaseOption<string>[]>([]);
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 = () => {
<div className="play-ground">
<div className="chat">
<GroundVideo
ref={groundRerankerRef}
modelList={rerankerModelList}
ref={groundVideoRef}
modelList={modelList}
loaded={loaded}
></GroundVideo>
</div>
src/pages/playground/view-code/video.ts
+30 -37
View File
@@ -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<string, any>) => {
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,