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

feat: add Workflows and Agents tabs to Electron vanilla JS build

Browse source 
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
Anil Matcha 2026-04-23 02:22:35 +05:30
commit e832e9d389
4 changed files with 59 additions and 1 deletions
Download patch file Download diff file Expand all files Collapse all files

24
src/components/AgentStudio.js Normal file
View file

@ -0,0 +1,24 @@
export function AgentStudio() {
const container = document.createElement('div');
container.className = 'w-full h-full flex flex-col items-center justify-center bg-app-bg text-white gap-4';
const icon = document.createElement('div');
icon.innerHTML = `<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.4">
<path d="M12 2a4 4 0 0 1 4 4 4 4 0 0 1-4 4 4 4 0 0 1-4-4 4 4 0 0 1 4-4"/>
<path d="M8 14a6 6 0 0 0-6 6h20a6 6 0 0 0-6-6H8z"/>
<path d="M9 9h.01M15 9h.01"/>
</svg>`;
const title = document.createElement('p');
title.textContent = 'Agent Studio';
title.className = 'text-lg font-bold opacity-60';
const sub = document.createElement('p');
sub.textContent = 'Available in the web app at open-generative-ai.com';
sub.className = 'text-sm opacity-40';
container.appendChild(icon);
container.appendChild(title);
container.appendChild(sub);
return container;
}

4
src/components/Header.js
View file

@ -27,7 +27,7 @@ export function Header(navigate) {
const menu = document.createElement('nav');
menu.className = 'hidden lg:flex items-center gap-6 text-[13px] font-bold text-secondary';
const items = ['Image', 'Video', 'Lip Sync', 'Cinema Studio'];
const items = ['Image', 'Video', 'Lip Sync', 'Cinema Studio', 'Workflows', 'Agents'];
items.forEach(item => {
const link = document.createElement('a');
@ -51,6 +51,8 @@ export function Header(navigate) {
else if (item === 'Video') navigate('video');
else if (item === 'Lip Sync') navigate('lipsync');
else if (item === 'Cinema Studio') navigate('cinema');
else if (item === 'Workflows') navigate('workflows');
else if (item === 'Agents') navigate('agents');
};
menu.appendChild(link);

24
src/components/WorkflowStudio.js Normal file
View file

@ -0,0 +1,24 @@
export function WorkflowStudio() {
const container = document.createElement('div');
container.className = 'w-full h-full flex flex-col items-center justify-center bg-app-bg text-white gap-4';
const icon = document.createElement('div');
icon.innerHTML = `<svg width="48" height="48" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.5" opacity="0.4">
<rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/>
<rect x="3" y="14" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/>
<path d="M6.5 10v4M17.5 10v4M10 6.5h4M10 17.5h4"/>
</svg>`;
const title = document.createElement('p');
title.textContent = 'Workflow Studio';
title.className = 'text-lg font-bold opacity-60';
const sub = document.createElement('p');
sub.textContent = 'Available in the web app at open-generative-ai.com';
sub.className = 'text-sm opacity-40';
container.appendChild(icon);
container.appendChild(title);
container.appendChild(sub);
return container;
}

8
src/main.js
View file

@ -24,6 +24,14 @@ function navigate(page) {
import('./components/LipSyncStudio.js').then(({ LipSyncStudio }) => {
contentArea.appendChild(LipSyncStudio());
});
} else if (page === 'workflows') {
import('./components/WorkflowStudio.js').then(({ WorkflowStudio }) => {
contentArea.appendChild(WorkflowStudio());
});
} else if (page === 'agents') {
import('./components/AgentStudio.js').then(({ AgentStudio }) => {
contentArea.appendChild(AgentStudio());
});
}
}