| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Enterprise MultiModal AI Studio</title> |
| |
| <meta http-equiv="Content-Security-Policy" content="default-src 'self'; img-src 'self' blob: data: https://* https://*.githubusercontent.com https://*.googleusercontent.com; media-src 'self' blob: https://*; connect-src 'self' https://api-inference.huggingface.co https://huggingface.co https://*.huggingface.co https://hf.co https://*.hf.co https://*.hf.space https://*.gradio.live wss://*.hf.space wss://*.gradio.live; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; frame-src 'self' https://huggingface.co https://*.huggingface.co https://*.hf.space https://*.gradio.live; form-action 'self' https://huggingface.co https://*.huggingface.co;"> |
| </head> |
| <body class="bg-gray-950 text-gray-100 font-sans antialiased h-screen overflow-hidden"> |
|
|
| <div id="authOverlay" class="fixed inset-0 bg-gray-950 flex flex-col items-center justify-center z-50 p-4"> |
| <div class="max-w-md w-full bg-gray-900 border border-gray-800 rounded-2xl p-8 text-center shadow-2xl"> |
| <div class="inline-flex items-center justify-center w-16 h-16 rounded-full bg-indigo-500/10 text-indigo-400 mb-4 text-3xl">🛡️</div> |
| <h1 class="text-2xl font-bold text-white mb-2">MultiModal AI Studio</h1> |
| <p class="text-gray-400 mb-6 text-sm">Enterprise-hardened single-page app deployment. Sourcing compute straight from client-scoped OAuth boundaries.</p> |
| <button id="loginButton" class="w-full py-3 px-4 bg-indigo-600 hover:bg-indigo-500 text-white font-medium rounded-xl shadow-lg transition duration-200"> |
| Sign In with Google / GitHub |
| </button> |
| </div> |
| </div> |
|
|
| <div id="appContainer" class="hidden flex h-screen w-screen"> |
| |
| <aside class="w-80 bg-gray-900 border-r border-gray-800 flex flex-col justify-between flex-shrink-0"> |
| <div class="p-4 overflow-y-auto flex-1"> |
| <div class="flex items-center gap-3 mb-6 px-2"> |
| <span class="text-2xl">⚡</span> |
| <h2 class="text-lg font-bold tracking-wide text-white">Studio Platform</h2> |
| </div> |
| |
| <div class="space-y-1 mb-6" id="domainTabGroup"> |
| <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-2">Task Environments</label> |
| <button id="btn-tab-text" class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition">📝 Text Core</button> |
| <button id="btn-tab-image" class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition">🎨 Image Core</button> |
| <button id="btn-tab-video" class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition">🎬 ZeroGPU Video</button> |
| <button id="btn-tab-audio" class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition">🎵 Audio Hub</button> |
| <button id="btn-tab-vision" class="w-full flex items-center gap-3 px-3 py-2.5 rounded-xl text-sm font-medium transition">👁️ Vision Matrix</button> |
| </div> |
|
|
| <div class="space-y-2"> |
| <label class="text-xs font-semibold text-gray-500 uppercase tracking-wider px-2">Framework Instance</label> |
| <select id="modelSelector" class="w-full bg-gray-950 border border-gray-800 text-gray-300 text-sm rounded-xl p-3 focus:outline-none focus:border-indigo-500 transition cursor-pointer"> |
| </select> |
| </div> |
| </div> |
|
|
| <div class="p-4 border-t border-gray-800 bg-gray-900/50 flex items-center justify-between"> |
| <div class="flex items-center gap-2 overflow-hidden"> |
| <div class="w-2 h-2 rounded-full bg-emerald-500 animate-pulse"></div> |
| <p class="text-xs text-gray-400 truncate font-mono">Session Scope Isolated</p> |
| </div> |
| <button id="logoutBtn" class="text-xs text-gray-500 hover:text-rose-400 transition">Disconnect</button> |
| </div> |
| </aside> |
|
|
| <main class="flex-1 flex flex-col bg-gray-950"> |
| <div class="p-4 bg-gray-900/40 border-b border-gray-800 flex justify-between items-center px-6"> |
| <button id="cancelBtn" class="hidden px-4 py-1.5 bg-rose-600/20 hover:bg-rose-600 text-rose-400 hover:text-white text-xs font-semibold rounded-lg transition items-center gap-1.5"> |
| 🛑 Stop Waiting |
| </button> |
| <div class="flex gap-2 ml-auto" id="actionHeader"> |
| <button id="copyBtn" class="hidden px-3 py-1.5 bg-gray-800 hover:bg-gray-700 text-xs font-medium rounded-lg transition">📋 Copy Text</button> |
| <a id="downloadBtn" class="hidden px-3 py-1.5 bg-indigo-600/20 hover:bg-indigo-600/40 text-indigo-400 text-xs font-medium rounded-lg transition cursor-pointer select-none">📥 Download Asset</a> |
| </div> |
| </div> |
|
|
| <div class="flex-1 p-6 overflow-y-auto flex items-center justify-center"> |
| <div id="previewCanvas" class="w-full max-w-3xl h-full flex flex-col items-center justify-center border-2 border-dashed border-gray-800 rounded-2xl p-6 relative bg-gray-900/20"> |
| |
| <div id="stateEmptyCategory" class="hidden text-center space-y-2"> |
| <p class="text-5xl">⚠️</p> |
| <h3 class="text-lg font-medium text-gray-300">Category Currently Empty</h3> |
| <p class="text-sm text-gray-500 max-w-sm">No valid operational frameworks mapped to this task environment profile yet.</p> |
| </div> |
|
|
| <div id="statePlaceholder" class="text-center space-y-2"> |
| <p class="text-5xl">🎯</p> |
| <h3 class="text-lg font-medium text-gray-300">Workspace Layer Ready</h3> |
| <p class="text-sm text-gray-500 max-w-sm">Select an active infrastructure module inside the side navigation panels to start computing.</p> |
| </div> |
|
|
| <div id="stateLoading" class="hidden text-center space-y-4"> |
| <div class="w-12 h-12 border-4 border-indigo-500 border-t-transparent rounded-full animate-spin mx-auto"></div> |
| <p id="loadingStatusText" class="text-sm text-indigo-400 font-mono tracking-wide">Orchestrating Remote Clusters...</p> |
| </div> |
|
|
| <div id="textOutput" class="hidden w-full text-left bg-gray-900 border border-gray-800 rounded-xl p-6 overflow-y-auto max-h-[60vh] text-gray-200 font-mono text-sm whitespace-pre-wrap leading-relaxed"></div> |
| <img id="imageOutput" class="hidden max-h-[65vh] rounded-xl shadow-2xl border border-gray-800 object-contain mx-auto" alt="Preview Output Context Layer"/> |
| <audio id="audioOutput" class="hidden w-full max-w-md mx-auto" controls></audio> |
| <video id="videoOutput" class="hidden max-h-[65vh] w-full rounded-xl shadow-2xl border border-gray-800 object-contain mx-auto" controls></video> |
| </div> |
| </div> |
|
|
| <footer class="p-6 border-t border-gray-800 bg-gray-900/30 space-y-4"> |
| <div id="mediaUploadContainer" class="hidden max-w-3xl mx-auto p-4 bg-gray-900 border border-gray-800 rounded-xl flex items-center gap-4"> |
| <span class="text-xs font-mono text-gray-400 uppercase tracking-wider" id="uploadInputLabel">Source Media:</span> |
| <input type="file" id="mediaFileInput" class="text-xs text-gray-400 file:mr-4 file:py-2 file:px-4 file:rounded-xl file:border-0 file:text-xs file:font-semibold file:bg-indigo-600/10 file:text-indigo-400 hover:file:bg-indigo-600/20 cursor-pointer"> |
| </div> |
|
|
| <div class="max-w-3xl mx-auto flex items-center gap-4 bg-gray-900 border border-gray-800 rounded-2xl p-2 pl-4 focus-within:border-indigo-500 transition shadow-2xl"> |
| <input type="text" id="promptInput" placeholder="Pass explicit prompt directions to the active engine infrastructure layers..." class="flex-1 bg-transparent text-sm text-white border-none focus:outline-none placeholder-gray-500 py-2"> |
| <input type="hidden" id="activeDomainContext" value="text"> |
| <button id="generateBtn" class="bg-indigo-600 hover:bg-indigo-500 text-white px-5 py-2.5 rounded-xl text-sm font-medium transition flex-shrink-0 transform active:scale-95"> |
| Generate |
| </button> |
| </div> |
| </footer> |
| </main> |
| </div> |
|
|
| <script type="module" src="/src/app.js"></script> |
| </body> |
| </html> |
