Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>AI Device Control Demo - Transformers.js</title> | |
| <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet"> | |
| <link rel="stylesheet" href="style.css"> | |
| </head> | |
| <body class="bg-gradient-to-br from-purple-900 via-blue-900 to-indigo-900 min-h-screen text-white"> | |
| <header class="bg-black bg-opacity-50 backdrop-blur-lg border-b border-white border-opacity-20"> | |
| <div class="container mx-auto px-4 py-4"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <svg class="w-8 h-8 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.75 17L9 20l-1 1h8l-1-1-.75-3M3 13h18M5 17h14a2 2 0 002-2V5a2 2 0 00-2-2H5a2 2 0 00-2 2v10a2 2 0 002 2z"></path> | |
| </svg> | |
| <h1 class="text-2xl font-bold bg-gradient-to-r from-purple-400 to-pink-400 bg-clip-text text-transparent"> | |
| AI Device Control Demo | |
| </h1> | |
| </div> | |
| <a href="https://huggingface.co/spaces/akhaliq/anycoder" target="_blank" | |
| class="text-sm text-purple-300 hover:text-purple-200 transition-colors"> | |
| Built with anycoder | |
| </a> | |
| </div> | |
| </div> | |
| </header> | |
| <main class="container mx-auto px-4 py-8"> | |
| <div class="grid lg:grid-cols-2 gap-8"> | |
| <!-- Control Panel --> | |
| <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl p-6 border border-white border-opacity-20"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <svg class="w-5 h-5 mr-2 text-purple-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M13 10V3L4 14h7v7l9-11h-7z"></path> | |
| </svg> | |
| Natural Language Control | |
| </h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Enter Command</label> | |
| <textarea id="commandInput" | |
| class="w-full px-4 py-3 bg-black bg-opacity-30 rounded-lg border border-purple-400 border-opacity-30 focus:border-opacity-60 focus:outline-none resize-none" | |
| rows="3" | |
| placeholder="E.g., 'Create a gentle wave pattern', 'Increase intensity gradually', 'Make a pulsing rhythm'"></textarea> | |
| </div> | |
| <button id="processCommand" | |
| class="w-full py-3 bg-gradient-to-r from-purple-600 to-pink-600 rounded-lg font-semibold hover:from-purple-700 hover:to-pink-700 transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"> | |
| Process Command | |
| </button> | |
| <div id="commandResult" class="hidden p-4 bg-black bg-opacity-30 rounded-lg"> | |
| <h3 class="text-sm font-semibold mb-2 text-purple-300">Generated Pattern:</h3> | |
| <pre id="patternOutput" class="text-xs font-mono text-green-400"></pre> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Pattern Generator --> | |
| <div class="bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl p-6 border border-white border-opacity-20"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <svg class="w-5 h-5 mr-2 text-pink-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M12 6V4m0 2a2 2 0 100 4m0-4a2 2 0 110 4m-6 8a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4m6 6v10m6-2a2 2 0 100-4m0 4a2 2 0 110-4m0 4v2m0-6V4"></path> | |
| </svg> | |
| AI Pattern Generator | |
| </h2> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Pattern Type</label> | |
| <select id="patternType" class="w-full px-4 py-3 bg-black bg-opacity-30 rounded-lg border border-purple-400 border-opacity-30 focus:border-opacity-60 focus:outline-none"> | |
| <option value="wave">Wave</option> | |
| <option value="pulse">Pulse</option> | |
| <option value="ramp">Ramp</option> | |
| <option value="random">Random</option> | |
| <option value="custom">Custom AI Generated</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Duration (seconds)</label> | |
| <input type="range" id="duration" min="5" max="60" value="20" class="w-full"> | |
| <div class="text-center text-sm mt-1"> | |
| <span id="durationValue">20</span>s | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-2">Intensity</label> | |
| <input type="range" id="intensity" min="0" max="100" value="50" class="w-full"> | |
| <div class="text-center text-sm mt-1"> | |
| <span id="intensityValue">50</span>% | |
| </div> | |
| </div> | |
| <button id="generatePattern" | |
| class="w-full py-3 bg-gradient-to-r from-pink-600 to-purple-600 rounded-lg font-semibold hover:from-pink-700 hover:to-purple-700 transition-all transform hover:scale-105 disabled:opacity-50 disabled:cursor-not-allowed"> | |
| Generate Pattern | |
| </button> | |
| <div id="generatedPattern" class="hidden p-4 bg-black bg-opacity-30 rounded-lg"> | |
| <canvas id="patternCanvas" width="400" height="150" class="w-full rounded"></canvas> | |
| <div class="mt-2 text-xs text-purple-300"> | |
| <span id="patternStats"></span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Safety & Settings --> | |
| <div class="mt-8 bg-white bg-opacity-10 backdrop-blur-lg rounded-2xl p-6 border border-white border-opacity-20"> | |
| <h2 class="text-xl font-semibold mb-4 flex items-center"> | |
| <svg class="w-5 h-5 mr-2 text-green-400" fill="none" stroke="currentColor" viewBox="0 0 24 24"> | |
| <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 12l2 2 4-4m5.618-4.016A11.955 11.955 0 0112 2.944a11.955 11.955 0 01-8.618 3.04A12.02 12.02 0 003 9c0 5.591 3.824 10.29 9 11.622 5.176-1.332 9-6.03 9-11.622 0-1.042-.133-2.052-.382-3.016z"></path> | |
| </svg> | |
| Safety Settings & Limits | |
| </h2> | |
| <div class="grid md:grid-cols-3 gap-4"> | |
| <div class="bg-black bg-opacity-30 rounded-lg p-4"> | |
| <label class="flex items-center justify-between"> | |
| <span class="text-sm">Max Intensity Limit</span> | |
| <input type="checkbox" id="maxIntensity" checked class="toggle-checkbox"> | |
| </label> | |
| <p class="text-xs text-gray-400 mt-1">Caps maximum intensity at 80%</p> | |
| </div> | |
| <div class="bg-black bg-opacity-30 rounded-lg p-4"> | |
| <label class="flex items-center justify-between"> | |
| <span class="text-sm">Auto-stop Timer</span> | |
| <input type="checkbox" id="autoStop" checked class="toggle-checkbox"> | |
| </label> | |
| <p class="text-xs text-gray-400 mt-1">Automatically stop after 30 minutes</p> | |
| </div> | |
| <div class="bg-black bg-opacity-30 rounded-lg p-4"> | |
| <label class="flex items-center justify-between"> | |
| <span class="text-sm">Gradual Changes</span> | |
| <input type="checkbox" id="gradualChanges" checked class="toggle-checkbox"> | |
| </label> | |
| <p class="text-xs text-gray-400 mt-1">Smooth transitions between patterns</p> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Status Display --> | |
| <div id="statusBar" class="mt-8 bg-black bg-opacity-30 backdrop-blur-lg rounded-lg p-4 border border-white border-opacity-20"> | |
| <div class="flex items-center justify-between"> | |
| <div class="flex items-center space-x-3"> | |
| <div id="statusIndicator" class="w-3 h-3 bg-green-400 rounded-full animate-pulse"></div> | |
| <span id="statusText" class="text-sm">Ready</span> | |
| </div> | |
| <div id="modelStatus" class="text-xs text-gray-400"> | |
| Model: Loading... | |
| </div> | |
| </div> | |
| <div id="loadingBar" class="mt-2 hidden"> | |
| <div class="w-full bg-black bg-opacity-50 rounded-full h-2"> | |
| <div id="loadingProgress" class="bg-gradient-to-r from-purple-400 to-pink-400 h-2 rounded-full transition-all duration-300" style="width: 0%"></div> | |
| </div> | |
| <p id="loadingText" class="text-xs text-gray-400 mt-1">Initializing AI model...</p> | |
| </div> | |
| </div> | |
| </main> | |
| <script src="https://cdn.jsdelivr.net/npm/@huggingface/transformers@2.17.2/dist/transformers.min.js"></script> | |
| <script src="index.js"></script> | |
| </body> | |
| </html> |