> ## Documentation Index
> Fetch the complete documentation index at: https://novita.ai/docs/llms.txt
> Use this file to discover all available pages before exploring further.
# Unified Video Generation API
export const UnifiedAPI = () => {
if (typeof document === "undefined") {
return null;
}
const [config, setConfig] = useState(window.novitaRemoteData?.videoUnifyAPIConfig?.data || null);
const [chosenIndex, setChosenIndex] = useState(0);
const [isOpen, setIsOpen] = useState(false);
const [isLoading, setIsLoading] = useState(false);
const [searchTerm, setSearchTerm] = useState("");
useEffect(() => {
if (!window.novitaRemoteData?.videoUnifyAPIConfig?.data) {
setIsLoading(true);
fetch('https://api.novita.ai/v3/admin/video-unify-api/config').then(response => {
if (!response.ok) {
throw new Error("Network response was not ok");
}
return response.json();
}).then(data => {
setConfig(data.configs);
}).catch(error => {
console.error('Failed to fetch config:', error);
}).finally(() => {
setIsLoading(false);
});
}
}, []);
const data = useMemo(() => {
return config?.[chosenIndex];
}, [config, chosenIndex]);
useEffect(() => {
const handleClickOutside = event => {
if (isOpen && !event.target.closest(".unified-api-selector-container")) {
setIsOpen(false);
setSearchTerm("");
}
};
document.addEventListener("mousedown", handleClickOutside);
return () => {
document.removeEventListener("mousedown", handleClickOutside);
};
}, [isOpen]);
const filteredConfig = useMemo(() => {
if (!config || !searchTerm.trim()) {
return config || [];
}
const term = searchTerm.toLowerCase();
return config.filter(item => {
const model = (item.model || '').toLowerCase();
const description = (item.description || '').toLowerCase();
return model.includes(term) || description.includes(term);
});
}, [config, searchTerm]);
const modelSelector = useMemo(() => {
if (!config || config.length <= 1) {
return null;
}
const selectedModel = config[chosenIndex]?.model || '-';
return
Model
setIsOpen(!isOpen)} className="unified-api-selector-button">
{selectedModel}
{isOpen &&
{filteredConfig.length > 0 ? filteredConfig.map((item, filteredIndex) => {
const originalIndex = config.findIndex(configItem => configItem === item);
return
{
setChosenIndex(originalIndex);
setIsOpen(false);
setSearchTerm("");
}} className={`unified-api-selector-option ${originalIndex === chosenIndex ? "selected" : ""}`}>
{item.model || '-'}
;
}) :
No matching model found
}
}
;
}, [config, chosenIndex, isOpen, searchTerm, filteredConfig]);
const headerFields = useMemo(() => {
return <>
Request Headers
Enum: application/json
Bearer authentication format: Bearer {`{{API Key}}`}.
;
}, []);
const requestBodyFields = useMemo(() => {
if (!data?.json_schema) {
return null;
}
const schema = JSON.parse(data.json_schema);
const getFields = () => {
return Object.entries(schema.properties).filter(([key, value]) => key !== "model").map(([key, value]) => ({
name: key,
...value
}));
};
const getFieldInfo = fieldName => {
const field = schema.properties[fieldName];
if (!field) return {
type: "string",
required: false
};
return {
type: field.type || "string",
required: schema.required?.includes(fieldName) || false,
description: field.description,
enum: field.enum,
default: field.default,
minLength: field.minLength,
maxLength: field.maxLength,
minimum: field.minimum,
maximum: field.maximum,
maxItems: field.maxItems,
items: field.items
};
};
const renderFieldConstraints = fieldInfo => {
return <>
{fieldInfo.maxItems !== undefined &&
Max items:{" "}
{fieldInfo.maxItems}
}
{(fieldInfo.minLength || fieldInfo.maxLength) &&
{fieldInfo.minLength !== undefined && <>
Min length:{" "}
{fieldInfo.minLength}
}
{fieldInfo.minLength !== undefined && fieldInfo.maxLength && ", "}
{fieldInfo.maxLength && <>
Max length:{" "}
{fieldInfo.maxLength}
}
.
}
{(fieldInfo.minimum !== undefined || fieldInfo.maximum !== undefined) &&
{fieldInfo.minimum !== undefined && <>
Min value:{" "}
{fieldInfo.minimum}
}
{fieldInfo.minimum !== undefined && fieldInfo.maximum !== undefined && ", "}
{fieldInfo.maximum !== undefined && <>
Max value:{" "}
{fieldInfo.maximum}
}
.
}
{(fieldInfo.enum || fieldInfo.default !== undefined) &&
{fieldInfo.enum && <>
Enum values:{" "}
{fieldInfo.enum.map((value, index) =>
{value}
{index < fieldInfo.enum.length - 1 && ", "}
)}
}
{fieldInfo.enum && fieldInfo.default !== undefined && ". "}
{fieldInfo.default !== undefined && <>
Default:{" "}
{typeof fieldInfo.default === 'boolean' ? fieldInfo.default ? 'true' : 'false' : fieldInfo.default}
}
.
}
;
};
return <>
{data?.model &&
Supported model:
{data.model}
}
{getFields().map(field => {
const fieldInfo = getFieldInfo(field.name);
return
{fieldInfo.description}
{renderFieldConstraints(fieldInfo)}
{fieldInfo.items && fieldInfo.items.properties &&
{Object.entries(fieldInfo.items.properties).map(([propName, propInfo]) =>
{propInfo.description}
{renderFieldConstraints(propInfo)}
)}
}
;
})}
;
}, [data]);
const LoadingSpinner = useMemo(() => , []);
return
This API provides a unified interface for video generation across multiple vendors, extracting common request and response fields, standardizing parameters and data formats, simplifying the invocation process, and improving integration and usage efficiency.
{modelSelector}
{data?.description && <>
Model description:
{data.description}
}
{headerFields}
Request Body
{!isLoading &&
Webhook callback URL. When video generation is completed, the system will send a POST request to this URL with the callback data format shown below:
{`{
event_type: "ASYNC_TASK_RESULT",
payload: TaskResultResponse
}`}
See Task Result Query API for details on the TaskResultResponse object. }
{isLoading ? LoadingSpinner : requestBodyFields}
Response
The asynchronous task task_id. You should use this task_id to call{" "}
the task result query API
{" "}
to obtain the generation result.
;
};