| <!DOCTYPE html> |
| <html lang="en"> |
| <head> |
| <meta charset="UTF-8"> |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> |
| <title>Real-time Webcam Transformer</title> |
| <script src="https://cdn.tailwindcss.com"></script> |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"> |
| <script> |
| tailwind.config = { |
| theme: { |
| extend: { |
| colors: { |
| primary: '#6366f1', |
| secondary: '#8b5cf6', |
| dark: '#0f172a', |
| light: '#f8fafc' |
| } |
| } |
| } |
| } |
| </script> |
| <style> |
| @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap'); |
| |
| body { |
| font-family: 'Inter', sans-serif; |
| background: linear-gradient(135deg, #0f172a 0%, #1e293b 100%); |
| min-height: 100vh; |
| overflow-x: hidden; |
| } |
| |
| .video-container { |
| position: relative; |
| overflow: hidden; |
| border-radius: 12px; |
| box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.25); |
| border: 1px solid rgba(255, 255, 255, 0.1); |
| } |
| |
| .video-overlay { |
| position: absolute; |
| top: 0; |
| left: 0; |
| width: 100%; |
| height: 100%; |
| background: linear-gradient(0deg, rgba(0,0,0,0.7) 0%, rgba(0,0,0,0) 40%); |
| pointer-events: none; |
| } |
| |
| .glow { |
| box-shadow: 0 0 15px rgba(99, 102, 241, 0.5); |
| } |
| |
| .pulse { |
| animation: pulse 2s infinite; |
| } |
| |
| @keyframes pulse { |
| 0% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.7); } |
| 70% { box-shadow: 0 0 0 10px rgba(99, 102, 241, 0); } |
| 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); } |
| } |
| |
| .transform-effect { |
| transition: all 0.3s ease; |
| } |
| |
| .output-placeholder { |
| background: rgba(30, 41, 59, 0.7); |
| border: 2px dashed rgba(99, 102, 241, 0.3); |
| } |
| |
| .control-panel { |
| background: rgba(15, 23, 42, 0.7); |
| backdrop-filter: blur(10px); |
| border: 1px solid rgba(99, 102, 241, 0.2); |
| } |
| |
| .slider::-webkit-slider-thumb { |
| -webkit-appearance: none; |
| appearance: none; |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| background: #8b5cf6; |
| cursor: pointer; |
| box-shadow: 0 0 10px rgba(139, 92, 246, 0.5); |
| } |
| |
| .slider::-moz-range-thumb { |
| width: 20px; |
| height: 20px; |
| border-radius: 50%; |
| background: #8b5cf6; |
| cursor: pointer; |
| box-shadow: 0 0 10px rgba(139, 92, 246, 0.5); |
| } |
| |
| .textarea { |
| background: rgba(15, 23, 42, 0.5); |
| border: 1px solid rgba(99, 102, 241, 0.3); |
| transition: all 0.3s ease; |
| } |
| |
| .textarea:focus { |
| border-color: #8b5cf6; |
| box-shadow: 0 0 0 3px rgba(139, 92, 246, 0.3); |
| } |
| |
| .btn-primary { |
| background: linear-gradient(90deg, #6366f1 0%, #8b5cf6 100%); |
| transition: all 0.3s ease; |
| } |
| |
| .btn-primary:hover { |
| transform: translateY(-2px); |
| box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.4); |
| } |
| |
| .btn-primary:active { |
| transform: translateY(0); |
| } |
| |
| .processing-indicator { |
| display: none; |
| } |
| |
| .active-processing { |
| display: flex; |
| } |
| |
| .tab-active { |
| background: rgba(99, 102, 241, 0.2); |
| color: #c7d2fe; |
| border-bottom: 2px solid #6366f1; |
| } |
| |
| .tab { |
| transition: all 0.2s ease; |
| } |
| |
| .tab:hover { |
| background: rgba(99, 102, 241, 0.1); |
| } |
| |
| .model-badge { |
| background: rgba(139, 92, 246, 0.15); |
| color: #c7d2fe; |
| } |
| </style> |
| </head> |
| <body class="text-light"> |
| |
| <header class="py-6 px-4 sm:px-6 lg:px-8"> |
| <div class="max-w-7xl mx-auto flex flex-col md:flex-row justify-between items-center"> |
| <div class="flex items-center space-x-3 mb-4 md:mb-0"> |
| <div class="bg-indigo-500 p-2 rounded-lg"> |
| <i class="fas fa-camera text-white text-xl"></i> |
| </div> |
| <h1 class="text-2xl font-bold text-white">SD-Turbo Transformer</h1> |
| </div> |
| <div class="flex items-center space-x-4"> |
| <div class="model-badge px-3 py-1 rounded-full text-sm"> |
| <i class="fas fa-bolt mr-1"></i> SD-Turbo Active |
| </div> |
| <div class="bg-green-500/20 text-green-400 px-3 py-1 rounded-full text-sm"> |
| <i class="fas fa-circle mr-1 text-xs"></i> Real-time Mode |
| </div> |
| </div> |
| </div> |
| </header> |
|
|
| |
| <main class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> |
| |
| <div class="flex border-b border-gray-700 mb-8"> |
| <button class="tab tab-active px-4 py-3 font-medium text-indigo-300"> |
| <i class="fas fa-camera-retro mr-2"></i> Webcam Transform |
| </button> |
| <button class="tab px-4 py-3 font-medium text-gray-400"> |
| <i class="fas fa-images mr-2"></i> Image Library |
| </button> |
| <button class="tab px-4 py-3 font-medium text-gray-400"> |
| <i class="fas fa-history mr-2"></i> History |
| </button> |
| </div> |
|
|
| <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> |
| |
| <div class="lg:col-span-2"> |
| <div class="video-container aspect-video bg-gray-900 relative"> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <i class="fas fa-camera text-4xl text-gray-600"></i> |
| </div> |
| <video id="video" autoplay playsinline class="w-full h-full object-cover hidden"></video> |
| <canvas id="output" class="w-full h-full object-cover hidden"></canvas> |
| <div class="video-overlay"></div> |
| <div class="absolute bottom-4 left-4 right-4 flex justify-between items-center"> |
| <div class="text-white"> |
| <div class="font-medium">Real-time Webcam</div> |
| <div class="text-sm text-gray-300">Streaming at 30 FPS</div> |
| </div> |
| <div class="flex space-x-2"> |
| <button id="toggleCamera" class="bg-indigo-600 hover:bg-indigo-700 p-2 rounded-full"> |
| <i class="fas fa-video"></i> |
| </button> |
| <button class="bg-indigo-600 hover:bg-indigo-700 p-2 rounded-full"> |
| <i class="fas fa-sync"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="control-panel mt-6 p-6 rounded-xl"> |
| <div class="flex flex-col md:flex-row md:items-center justify-between mb-6"> |
| <h2 class="text-xl font-bold text-white mb-4 md:mb-0">Transformation Settings</h2> |
| <div class="flex space-x-3"> |
| <button class="btn-primary px-4 py-2 rounded-lg font-medium"> |
| <i class="fas fa-save mr-2"></i> Save Settings |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 px-4 py-2 rounded-lg font-medium"> |
| <i class="fas fa-redo mr-2"></i> Reset |
| </button> |
| </div> |
| </div> |
|
|
| |
| <div class="mb-6"> |
| <label class="block text-gray-300 mb-2 font-medium">Transformation Description</label> |
| <textarea id="promptInput" class="textarea w-full p-4 rounded-lg text-white" rows="3" placeholder="Describe how you want to transform the image (e.g., 'make it look like a watercolor painting', 'convert to 80s synthwave style')...">Convert to cyberpunk neon aesthetic with glowing effects</textarea> |
| </div> |
|
|
| |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> |
| <div> |
| <label class="block text-gray-300 mb-2 font-medium">Transformation Strength</label> |
| <input type="range" min="0" max="100" value="75" class="slider w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> |
| <div class="flex justify-between text-sm text-gray-400 mt-1"> |
| <span>Subtle</span> |
| <span>Strong</span> |
| </div> |
| </div> |
| |
| <div> |
| <label class="block text-gray-300 mb-2 font-medium">Style Weight</label> |
| <input type="range" min="0" max="100" value="60" class="slider w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer"> |
| <div class="flex justify-between text-sm text-gray-400 mt-1"> |
| <span>Precise</span> |
| <span>Creative</span> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="mt-6"> |
| <label class="block text-gray-300 mb-2 font-medium">Quick Presets</label> |
| <div class="flex flex-wrap gap-2"> |
| <button class="bg-indigo-900/50 hover:bg-indigo-800 text-indigo-300 px-3 py-1.5 rounded-full text-sm">Anime Style</button> |
| <button class="bg-indigo-900/50 hover:bg-indigo-800 text-indigo-300 px-3 py-1.5 rounded-full text-sm">Oil Painting</button> |
| <button class="bg-indigo-900/50 hover:bg-indigo-800 text-indigo-300 px-3 py-1.5 rounded-full text-sm">Pencil Sketch</button> |
| <button class="bg-indigo-900/50 hover:bg-indigo-800 text-indigo-300 px-3 py-1.5 rounded-full text-sm">80s Synthwave</button> |
| <button class="bg-indigo-900/50 hover:bg-indigo-800 text-indigo-300 px-3 py-1.5 rounded-full text-sm">Watercolor</button> |
| </div> |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div> |
| |
| <div class="video-container aspect-video bg-gray-900 relative output-placeholder"> |
| <div class="absolute inset-0 flex items-center justify-center"> |
| <i class="fas fa-spinner fa-spin text-4xl text-indigo-500"></i> |
| </div> |
| <div class="video-overlay"></div> |
| <div class="absolute bottom-4 left-4 text-white"> |
| <div class="font-medium">Transformed Output</div> |
| <div class="text-sm text-gray-300">Real-time SD-Turbo Processing</div> |
| </div> |
| </div> |
|
|
| |
| <div class="control-panel mt-6 p-6 rounded-xl"> |
| <h2 class="text-xl font-bold text-white mb-4">Transformation Details</h2> |
| |
| <div class="space-y-4"> |
| <div> |
| <div class="flex justify-between text-gray-300 mb-1"> |
| <span>Processing Time</span> |
| <span class="font-mono">47ms</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-green-500 h-2 rounded-full" style="width: 65%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between text-gray-300 mb-1"> |
| <span>GPU Usage</span> |
| <span class="font-mono">28%</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-indigo-500 h-2 rounded-full" style="width: 28%"></div> |
| </div> |
| </div> |
| |
| <div> |
| <div class="flex justify-between text-gray-300 mb-1"> |
| <span>Memory Usage</span> |
| <span class="font-mono">1.4GB</span> |
| </div> |
| <div class="w-full bg-gray-700 rounded-full h-2"> |
| <div class="bg-purple-500 h-2 rounded-full" style="width: 44%"></div> |
| </div> |
| </div> |
| </div> |
| |
| <div class="mt-6"> |
| <h3 class="font-medium text-gray-300 mb-2">Current Prompt</h3> |
| <div class="bg-gray-800/50 p-3 rounded-lg text-sm"> |
| "Convert to cyberpunk neon aesthetic with glowing effects and futuristic overlays" |
| </div> |
| </div> |
| </div> |
|
|
| |
| <div class="flex space-x-3 mt-6"> |
| <button class="btn-primary flex-1 py-3 rounded-lg font-medium pulse"> |
| <i class="fas fa-play mr-2"></i> Start Live Transform |
| </button> |
| <button class="bg-gray-700 hover:bg-gray-600 py-3 px-4 rounded-lg"> |
| <i class="fas fa-capture"></i> |
| </button> |
| </div> |
| </div> |
| </div> |
| </main> |
|
|
| |
| <footer class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8 mt-12 border-t border-gray-800"> |
| <div class="text-center text-gray-500 text-sm"> |
| <p>Powered by SD-Turbo technology • Real-time image transformation • All processing happens locally in your browser</p> |
| <p class="mt-2">Your privacy is protected - no images leave your device</p> |
| </div> |
| </footer> |
|
|
| <script> |
| |
| document.addEventListener('DOMContentLoaded', function() { |
| const video = document.getElementById('video'); |
| const outputCanvas = document.getElementById('output'); |
| const ctx = outputCanvas.getContext('2d'); |
| |
| |
| setTimeout(() => { |
| video.style.display = 'block'; |
| document.querySelector('.fa-spinner').parentElement.parentElement.style.display = 'none'; |
| |
| |
| video.src = 'data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQwIiBoZWlnaHQ9IjQ4MCIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj48cmVjdCB3aWR0aD0iMTAwJSIgaGVpZ2h0PSIxMDAlIiBmaWxsPSIjMTIzMzQ0Ii8+PGNpcmNsZSBjeD0iMzIwIiBjeT0iMjQwIiByPSI4MCIgZmlsbD0iIzU1NTU1NSIvPjxjaXJjbGUgY3g9IjMyMCIgY3k9IjI0MCIgcj0iNDAiIGZpbGw9IiMzMzMzMzMiLz48Y2lyY2xlIGN4PSIzMjAiIGN5PSIxNzAiIHI9IjEwIiBmaWxsPSIjZmZmIi8+PGNpcmNsZSBjeD0iMzIwIiBjeT0iMzEwIiByPSIxMCIgZmlsbD0iI2ZmZiIvPjxyZWN0IHg9IjI1MCIgeT0iMTQwIiB3aWR0aD0iMTQwIiBoZWlnaHQ9IjIwMCIgcng9IjEwIiBmaWxsPSIjMjI0NDY2Ii8+PHJlY3QgeD0iMjgwIiB5PSIxNjAiIHdpZHRoPSI4MCIgaGVpZ2h0PSI4MCIgcng9IjUiIGZpbGw9IiMzMzMzMzMiLz48L3N2Zz4='; |
| |
| |
| setInterval(() => { |
| outputCanvas.width = outputCanvas.offsetWidth; |
| outputCanvas.height = outputCanvas.offsetHeight; |
| ctx.fillStyle = '#0f172a'; |
| ctx.fillRect(0, 0, outputCanvas.width, outputCanvas.height); |
| |
| |
| ctx.fillStyle = '#6366f1'; |
| ctx.beginPath(); |
| ctx.arc(outputCanvas.width/2, outputCanvas.height/2, 80, 0, Math.PI*2); |
| ctx.fill(); |
| |
| ctx.fillStyle = '#8b5cf6'; |
| ctx.beginPath(); |
| ctx.arc(outputCanvas.width/2, outputCanvas.height/2, 40, 0, Math.PI*2); |
| ctx.fill(); |
| |
| ctx.fillStyle = '#ffffff'; |
| ctx.beginPath(); |
| ctx.arc(outputCanvas.width/2, outputCanvas.height/2 - 30, 8, 0, Math.PI*2); |
| ctx.fill(); |
| |
| ctx.beginPath(); |
| ctx.arc(outputCanvas.width/2, outputCanvas.height/2 + 30, 8, 0, Math.PI*2); |
| ctx.fill(); |
| |
| ctx.fillStyle = '#000000'; |
| ctx.font = 'bold 16px Inter'; |
| ctx.textAlign = 'center'; |
| ctx.fillText('Cyberpunk Neon', outputCanvas.width/2, 50); |
| }, 100); |
| }, 1500); |
| |
| |
| const processIndicator = document.createElement('div'); |
| processIndicator.className = 'processing-indicator fixed bottom-4 right-4 bg-indigo-600 text-white px-4 py-2 rounded-lg flex items-center'; |
| processIndicator.innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Processing...'; |
| document.body.appendChild(processIndicator); |
| |
| document.querySelector('button.btn-primary').addEventListener('click', function() { |
| this.innerHTML = '<i class="fas fa-pause mr-2"></i> Stop Transform'; |
| this.classList.remove('pulse'); |
| processIndicator.classList.add('active-processing'); |
| |
| setTimeout(() => { |
| this.innerHTML = '<i class="fas fa-play mr-2"></i> Start Live Transform'; |
| processIndicator.classList.remove('active-processing'); |
| }, 5000); |
| }); |
| |
| |
| document.getElementById('toggleCamera').addEventListener('click', function() { |
| const icon = this.querySelector('i'); |
| if (icon.classList.contains('fa-video')) { |
| icon.classList.remove('fa-video'); |
| icon.classList.add('fa-video-slash'); |
| video.style.opacity = '0.2'; |
| this.classList.add('bg-red-600'); |
| } else { |
| icon.classList.remove('fa-video-slash'); |
| icon.classList.add('fa-video'); |
| video.style.opacity = '1'; |
| this.classList.remove('bg-red-600'); |
| } |
| }); |
| |
| |
| const tabs = document.querySelectorAll('.tab'); |
| tabs.forEach(tab => { |
| tab.addEventListener('click', function() { |
| tabs.forEach(t => { |
| t.classList.remove('tab-active', 'text-indigo-300'); |
| t.classList.add('text-gray-400'); |
| }); |
| this.classList.add('tab-active', 'text-indigo-300'); |
| this.classList.remove('text-gray-400'); |
| }); |
| }); |
| }); |
| </script> |
| <p style="border-radius: 8px; text-align: center; font-size: 12px; color: #fff; margin-top: 16px;position: fixed; left: 8px; bottom: 8px; z-index: 10; background: rgba(0, 0, 0, 0.8); padding: 4px 8px;">Made with <img src="https://enzostvs-deepsite.hf.space/logo.svg" alt="DeepSite Logo" style="width: 16px; height: 16px; vertical-align: middle;display:inline-block;margin-right:3px;filter:brightness(0) invert(1);"><a href="https://enzostvs-deepsite.hf.space" style="color: #fff;text-decoration: underline;" target="_blank" >DeepSite</a> - 🧬 <a href="https://enzostvs-deepsite.hf.space?remix=Festrcze/sdturbo" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body> |
| </html> |
