mirrors/Open-Generative-AI
2
0
Fork 0
mirror of https://github.com/Anil-matcha/Open-Generative-AI.git synced 2026-05-07 01:17:18 +00:00
Code Issues Projects Releases Packages Wiki Activity

Merge pull request #45 from Anil-matcha/master

Browse source 
Add mode selector for video models and API key UI
This commit is contained in:
Anil Chandra Naidu Matcha 2026-03-13 19:40:48 +05:30 • committed by GitHub
commit 38ce0ecbf1
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
4 changed files with 59 additions and 3 deletions
Download patch file Download diff file Expand all files Collapse all files

5
src/components/Header.js
View file

@ -1,3 +1,5 @@
import { SettingsModal } from './SettingsModal.js';
export function Header(navigate) {
const header = document.createElement('header');
header.className = 'w-full flex flex-col z-50 sticky top-0';
@ -73,8 +75,7 @@ export function Header(navigate) {
</svg>
`;
keyBtn.onclick = () => {
localStorage.removeItem('muapi_key');
window.location.reload();
document.body.appendChild(SettingsModal());
};
rightPart.appendChild(keyBtn);

47
src/components/VideoStudio.js
View file

@ -1,5 +1,5 @@
import { muapi } from '../lib/muapi.js';
import { t2vModels, getAspectRatiosForVideoModel, getDurationsForModel, getResolutionsForVideoModel, i2vModels, getAspectRatiosForI2VModel, getDurationsForI2VModel, getResolutionsForI2VModel, v2vModels } from '../lib/models.js';
import { t2vModels, getAspectRatiosForVideoModel, getDurationsForModel, getResolutionsForVideoModel, i2vModels, getAspectRatiosForI2VModel, getDurationsForI2VModel, getResolutionsForI2VModel, v2vModels, getModesForModel } from '../lib/models.js';
import { AuthModal } from './AuthModal.js';
import { createUploadPicker } from './UploadPicker.js';
import { savePendingJob, removePendingJob, getPendingJobs } from '../lib/pendingJobs.js';
@ -16,6 +16,7 @@ export function VideoStudio() {
let selectedDuration = defaultModel.inputs?.duration?.default || 5;
let selectedResolution = defaultModel.inputs?.resolution?.default || '';
let selectedQuality = defaultModel.inputs?.quality?.default || '';
let selectedMode = '';
let lastGenerationId = null;
let lastGenerationModel = null;
let dropdownOpen = null;
@ -28,6 +29,7 @@ export function VideoStudio() {
const getCurrentAspectRatios = (id) => imageMode ? getAspectRatiosForI2VModel(id) : getAspectRatiosForVideoModel(id);
const getCurrentDurations = (id) => imageMode ? getDurationsForI2VModel(id) : getDurationsForModel(id);
const getCurrentResolutions = (id) => imageMode ? getResolutionsForI2VModel(id) : getResolutionsForVideoModel(id);
const getCurrentModes = (id) => getModesForModel(id);
const getCurrentModel = () => getCurrentModels().find(m => m.id === selectedModel);
const getQualitiesForModel = (id) => {
const model = getCurrentModels().find(m => m.id === id);
@ -284,11 +286,16 @@ export function VideoStudio() {
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="opacity-60 text-secondary"><path d="M12 2l3.09 6.26L22 9.27l-5 4.87 1.18 6.88L12 17.77l-6.18 3.25L7 14.14 2 9.27l6.91-1.01L12 2z"/></svg>
`, selectedQuality || 'basic', 'v-quality-btn');
const modeBtn = createControlBtn(`
<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5" class="opacity-60 text-secondary"><path d="M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z"/></svg>
`, selectedMode || 'normal', 'v-mode-btn');
controlsLeft.appendChild(modelBtn);
controlsLeft.appendChild(arBtn);
controlsLeft.appendChild(durationBtn);
controlsLeft.appendChild(resolutionBtn);
controlsLeft.appendChild(qualityBtn);
controlsLeft.appendChild(modeBtn);
// Initial visibility (t2v mode)
const initDurations = getDurationsForModel(defaultModel.id);
@ -296,6 +303,7 @@ export function VideoStudio() {
const initResolutions = getResolutionsForVideoModel(defaultModel.id);
resolutionBtn.style.display = initResolutions.length > 0 ? 'flex' : 'none';
qualityBtn.style.display = 'none';
modeBtn.style.display = getModesForModel(defaultModel.id).length > 0 ? 'flex' : 'none';
const generateBtn = document.createElement('button');
generateBtn.className = 'bg-primary text-black px-6 md:px-8 py-3 md:py-3.5 rounded-xl md:rounded-[1.5rem] font-black text-sm md:text-base hover:shadow-glow hover:scale-105 active:scale-95 transition-all flex items-center justify-center gap-2.5 w-full sm:w-auto shadow-lg';
@ -322,6 +330,7 @@ export function VideoStudio() {
durationBtn.style.display = 'none';
resolutionBtn.style.display = 'none';
qualityBtn.style.display = 'none';
modeBtn.style.display = 'none';
extendBanner.classList.add('hidden');
extendBanner.classList.remove('flex');
return;
@ -368,6 +377,17 @@ export function VideoStudio() {
qualityBtn.style.display = 'none';
}
// Mode
const modes = getCurrentModes(modelId);
if (modes.length > 0) {
selectedMode = model?.inputs?.mode?.default || modes[0];
document.getElementById('v-mode-btn-label').textContent = selectedMode;
modeBtn.style.display = 'flex';
} else {
selectedMode = '';
modeBtn.style.display = 'none';
}
// Extend banner (extend model only)
if (model?.requiresRequestId) {
extendBanner.classList.remove('hidden');
@ -568,6 +588,28 @@ export function VideoStudio() {
list.appendChild(item);
});
dropdown.appendChild(list);
} else if (type === 'mode') {
dropdown.classList.add('max-w-[200px]');
dropdown.innerHTML = `<div class="text-[10px] font-bold text-secondary uppercase tracking-widest px-3 py-2 border-b border-white/5 mb-2">Mode</div>`;
const list = document.createElement('div');
list.className = 'flex flex-col gap-1';
getCurrentModes(selectedModel).forEach(m => {
const item = document.createElement('div');
item.className = 'flex items-center justify-between p-3.5 hover:bg-white/5 rounded-2xl cursor-pointer transition-all group';
item.innerHTML = `
<span class="text-xs font-bold text-white opacity-80 group-hover:opacity-100 capitalize">${m}</span>
${selectedMode === m ? '<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="#d9ff00" stroke-width="4"><polyline points="20 6 9 17 4 12"/></svg>' : ''}
`;
item.onclick = (e) => {
e.stopPropagation();
selectedMode = m;
document.getElementById('v-mode-btn-label').textContent = m;
closeDropdown();
};
list.appendChild(item);
});
dropdown.appendChild(list);
}
// Position dropdown
@ -600,6 +642,7 @@ export function VideoStudio() {
durationBtn.onclick = toggleDropdown('duration', durationBtn);
resolutionBtn.onclick = toggleDropdown('resolution', resolutionBtn);
qualityBtn.onclick = toggleDropdown('quality', qualityBtn);
modeBtn.onclick = toggleDropdown('mode', modeBtn);
window.addEventListener('click', closeDropdown);
container.appendChild(dropdown);
@ -934,6 +977,7 @@ export function VideoStudio() {
const resolutions = getCurrentResolutions(selectedModel);
if (resolutions.length > 0) i2vParams.resolution = selectedResolution;
if (selectedQuality) i2vParams.quality = selectedQuality;
if (selectedMode) i2vParams.mode = selectedMode;
const res = await muapi.generateI2V(i2vParams);
console.log('[VideoStudio] I2V response:', res);
@ -976,6 +1020,7 @@ export function VideoStudio() {
if (resolutions.length > 0) params.resolution = selectedResolution;
if (selectedQuality) params.quality = selectedQuality;
if (selectedMode) params.mode = selectedMode;
const res = await muapi.generateVideo(params);

8
src/lib/models.js
View file

@ -7961,6 +7961,14 @@ export const getResolutionsForI2VModel = (modelId) => {
return [];
};
export const getModesForModel = (modelId) => {
const model = [...t2vModels, ...i2vModels].find(m => m.id === modelId);
if (!model) return [];
const modeInput = model.inputs?.mode;
if (modeInput?.enum) return modeInput.enum;
return [];
};
export const getResolutionsForI2IModel = (modelId) => {
const model = getI2IModelById(modelId);
if (!model) return [];

2
src/lib/muapi.js
View file

@ -183,6 +183,7 @@ export class MuapiClient {
if (params.duration) finalPayload.duration = params.duration;
if (params.resolution) finalPayload.resolution = params.resolution;
if (params.quality) finalPayload.quality = params.quality;
if (params.mode) finalPayload.mode = params.mode;
if (params.image_url) finalPayload.image_url = params.image_url;
console.log('[Muapi] Video Request:', url);
@ -329,6 +330,7 @@ export class MuapiClient {
if (params.duration) finalPayload.duration = params.duration;
if (params.resolution) finalPayload.resolution = params.resolution;
if (params.quality) finalPayload.quality = params.quality;
if (params.mode) finalPayload.mode = params.mode;
console.log('[Muapi] I2V Request:', url);
console.log('[Muapi] I2V Payload:', finalPayload);