> ## Documentation Index
> Fetch the complete documentation index at: https://docs.myrouter.ai/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.myrouterRemoteData?.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.myrouterRemoteData?.videoUnifyAPIConfig?.data) {
setIsLoading(true);
fetch('https://api.myrouter.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
Select a model to use
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 models found
}
}
;
}, [config, chosenIndex, isOpen, searchTerm, filteredConfig]);
const headerFields = useMemo(() => {
return <>
Request Headers
Enum value: 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 &&
Maximum number of items:{" "}
{fieldInfo.maxItems}
}
{(fieldInfo.minLength || fieldInfo.maxLength) &&
{fieldInfo.minLength !== undefined && <>
Minimum length:{" "}
{fieldInfo.minLength}
}
{fieldInfo.minLength !== undefined && fieldInfo.maxLength && ", "}
{fieldInfo.maxLength && <>
Maximum length:{" "}
{fieldInfo.maxLength}
}
.
}
{(fieldInfo.minimum !== undefined || fieldInfo.maximum !== undefined) &&
{fieldInfo.minimum !== undefined && <>
Minimum value:{" "}
{fieldInfo.minimum}
}
{fieldInfo.minimum !== undefined && fieldInfo.maximum !== undefined && ", "}
{fieldInfo.maximum !== undefined && <>
Maximum 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 value:{" "}
{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 integration of video generation capabilities from various providers, extracting common request and response fields, standardizing parameters and data formats, and simplifying the calling process to improve integration and usage efficiency.
{modelSelector}
{data?.description && <>
Model information:
{data.description}
}
{headerFields}
Request Body
{isLoading ? LoadingSpinner : requestBodyFields}
Response
The task_id of the async task. You should use this task_id to call the{" "}
Query Task Result API
{" "}
to retrieve the generated results.
;
};