New discussion

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>OX AI - Video Studio</title> <script src="https://tailwindcss.com"></script> </head> <body class="bg-gray-950 text-gray-100 min-h-screen font-sans"> <!-- Navbar --> <header class="border-b border-gray-800 bg-gray-900 px-6 py-4 flex justify-between items-center"> <h1 class="text-2xl font-bold tracking-wider text-purple-400">OX AI <span class="text-xs text-gray-400 font-normal">v1.0 Studio</span></h1> <div class="flex items-center gap-4"> <span class="text-sm bg-gray-800 px-3 py-1.5 rounded-full text-purple-300 font-semibold" id="creditDisplay">Credits: 500</span> </div> </header> <!-- Main Workspace --> <main class="grid grid-cols-1 lg:grid-cols-3 gap-6 p-6 max-w-7xl mx-auto"> <!-- Left & Center: Configuration & Generation --> <div class="lg:col-span-2 space-y-6"> <!-- Prompt Settings --> <div class="bg-gray-900 border border-gray-800 rounded-xl p-5 space-y-4"> <label class="block text-sm font-medium text-gray-400">Text Prompt (High Accuracy Physics Engine)</label> <textarea id="prompt" rows="3" class="w-full bg-gray-950 border border-gray-700 rounded-lg p-3 text-white focus:ring-2 focus:ring-purple-500 focus:outline-none placeholder-gray-600" placeholder="Cinematic shot, cinematic lighting, continuous motion, flawless physics..."></textarea> <!-- Aspect Ratio & Resolution --> <div class="grid grid-cols-2 gap-4"> <div> <label class="block text-xs font-medium text-gray-400 mb-1">Aspect Ratio</label> <select id="aspectRatio" class="w-full bg-gray-950 border border-gray-700 rounded-lg p-2.5 text-white"> <option value="16:9">Widescreen (16:9)</option> <option value="9:16">Vertical Social (9:16)</option> <option value="1:1">Square (1:1)</option> </select> </div> <div> <label class="block text-xs font-medium text-gray-400 mb-1">Target Resolution</label> <select id="resolution" class="w-full bg-gray-950 border border-gray-700 rounded-lg p-2.5 text-white"> <option value="1080p">1080p Full HD</option> <option value="4k">4K Ultra HD (Premium)</option> </select> </div> </div> </div> <!-- Advanced Controls (Consistency & Native Audio) --> <div class="bg-gray-900 border border-gray-800 rounded-xl p-5 space-y-4"> <h3 class="text-sm font-semibold text-purple-400">Creative Control Overlays</h3> <div class="grid grid-cols-1 md:grid-cols-2 gap-4"> <div> <label class="block text-xs text-gray-400 mb-1">Character & Scene Consistency Token</label> <input type="text" id="characterToken" placeholder="e.g., actor_id_492" class="w-full bg-gray-950 border border-gray-700 rounded-lg p-2 text-white text-sm"> </div> <div> <label class="block text-xs text-gray-400 mb-1">Motion Intensity (Physics Anchor)</label> <input type="range" id="motionScale" min="1" max="10" value="5" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer accent-purple-500 mt-3"> </div> </div> <div class="flex items-center gap-6 pt-2"> <label class="flex items-center gap-2 text-sm text-gray-300"> <input type="checkbox" id="nativeAudio" class="rounded bg-gray-950 border-gray-700 text-purple-600 focus:ring-purple-500"> Generate Native Audio & Lip-Sync </label> <label class="flex items-center gap-2 text-sm text-gray-300"> <input type="checkbox" id="commercialSafety" checked disabled class="rounded bg-gray-950 border-gray-700 text-purple-600"> Commercial Safety Guarantee </label> </div> </div> <!-- Action Button --> <button onclick="generateVideo()" id="generateBtn" class="w-full bg-purple-600 hover:bg-purple-700 text-white font-bold py-3.5 px-6 rounded-xl transition duration-200 shadow-lg shadow-purple-900/30"> Render Video Asset </button> </div> <!-- Right Side: Real-time Output & Rendering Monitoring --> <div class="bg-gray-900 border border-gray-800 rounded-xl p-5 flex flex-col justify-between min-h-[400px]"> <div> <h2 class="text-lg font-bold text-gray-200 mb-4">Live Preview Pipeline</h2> <div id="videoContainer" class="w-full aspect-video bg-gray-950 rounded-lg flex items-center justify-center border border-gray-800 relative overflow-hidden"> <div id="statusPlaceholder" class="text-gray-500 text-sm text-center px-4"> <p>No video rendered yet.</p> <p class="text-xs text-gray-600 mt-1">Configure parameters and hit generate.</p> </div> <!-- Real Video Element hidden initially --> <video id="outputVideo" controls class="w-full h-full object-cover hidden"></video> <!-- Loading Mask --> <div id="loader" class="absolute inset-0 bg-gray-950/80 hidden flex-col items-center justify-center gap-3"> <div class="w-10 h-10 border-4 border-purple-500 border-t-transparent rounded-full animate-spin"></div> <p class="text-sm text-purple-400 font-medium animate-pulse" id="progressText">Simulating Physics Engine...</p> </div> </div> </div> <div class="border-t border-gray-800 pt-4 mt-4 space-y-2 text-xs text-gray-400"> <div class="flex justify-between"><span>Render Cost:</span><span id="costEstimation" class="text-white">10 Credits</span></div> <div class="flex justify-between"><span>Licensing Status:</span><span class="text-green-400 font-medium">100% Globally Cleared</span></div> </div> </div> </main> <script> async function generateVideo() { const btn = document.getElementById('generateBtn'); const loader = document.getElementById('loader'); const videoElement = document.getElementById('outputVideo'); const placeholder = document.getElementById('statusPlaceholder'); btn.disabled = true; loader.classList.remove('hidden'); placeholder.classList.add('hidden'); videoElement.classList.add('hidden'); const payload = { prompt: document.getElementById('prompt').value, aspect_ratio: document.getElementById('aspectRatio').value, resolution: document.getElementById('resolution').value, character_token: document.getElementById('characterToken').value, motion_intensity: parseInt(document.getElementById('motionScale').value), native_audio: document.getElementById('nativeAudio').checked }; try { const response = await fetch('http://127.0.0', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(payload) }); const data = await response.json(); if(data.success) { document.getElementById('creditDisplay').innerText = `Credits: ${data.remaining_credits}`; videoElement.src = data.video_url; videoElement.classList.remove('hidden'); } else { alert("Error: " + data.message); placeholder.classList.remove('hidden'); } } catch (error) { console.error("Pipeline failure:", error); placeholder.classList.remove('hidden'); } finally { btn.disabled = false; loader.classList.add('hidden'); } } </script> </body> </html>

#74 opened 4 days ago by
UserOXAI

Lightsabers ? lora ?

2
#71 opened about 1 month ago by
mekabe

LTX-2.3

#58 opened 4 months ago by
R4PTORINF1LTR

Add WBench evaluation results

#56 opened 5 months ago by
Kaining

Diffusers format

#44 opened 7 months ago by
oglok

diffusers

πŸ‘€ 2
3
#27 opened 8 months ago by
ziwangfu

Render Times

8
#16 opened 8 months ago by
DflippinK