Spaces:
Running
Running
Create an interactive web ui app that teaches users how to deploy hugging face models. It should work as a step by step guide to deploy a chat model with live tts and stt and a the same time, work as a web ui that actually lets the user connect to his huggin face account and use users credenctials to deploy and run run this models.
b76fec0 verified | <html lang="en" class="dark"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Deployment Configuration | HuggyFace</title> | |
| <link rel="icon" type="image/x-icon" href="/static/favicon.ico"> | |
| <script src="https://cdn.tailwindcss.com"></script> | |
| <script> | |
| tailwind.config = { | |
| darkMode: 'class', | |
| theme: { | |
| extend: { | |
| colors: { | |
| primary: { | |
| 500: '#EC4899', | |
| }, | |
| secondary: { | |
| 500: '#F97316', | |
| } | |
| } | |
| } | |
| } | |
| } | |
| </script> | |
| <script src="https://unpkg.com/feather-icons"></script> | |
| <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script> | |
| <style> | |
| .glass-card { | |
| background: rgba(17, 24, 39, 0.8); | |
| backdrop-filter: blur(10px); | |
| border: 1px solid rgba(255, 255, 255, 0.1); | |
| } | |
| .config-option { | |
| transition: all 0.2s ease; | |
| } | |
| .config-option:hover { | |
| transform: translateY(-2px); | |
| box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06); | |
| } | |
| </style> | |
| </head> | |
| <body class="min-h-screen bg-gray-900 text-gray-100"> | |
| <div class="container mx-auto px-4 py-8"> | |
| <header class="flex justify-between items-center mb-12"> | |
| <div class="flex items-center"> | |
| <i data-feather="cpu" class="text-primary-500 mr-3" width="32" height="32"></i> | |
| <h1 class="text-3xl font-bold bg-gradient-to-r from-primary-500 to-secondary-500 bg-clip-text text-transparent">HuggyFace Deploy Wizard</h1> | |
| </div> | |
| <div class="flex items-center space-x-4"> | |
| <div class="flex items-center text-sm bg-gray-800 px-3 py-1 rounded-full"> | |
| <i data-feather="user" class="w-4 h-4 mr-2 text-green-400"></i> | |
| <span>Connected</span> | |
| </div> | |
| <button class="px-4 py-2 rounded-full bg-gradient-to-r from-primary-500 to-secondary-500 hover:from-primary-600 hover:to-secondary-600 transition-all"> | |
| <i data-feather="settings" class="mr-2"></i> | |
| Settings | |
| </button> | |
| </div> | |
| </header> | |
| <main class="grid grid-cols-1 lg:grid-cols-3 gap-8"> | |
| <!-- Steps Navigation --> | |
| <div class="lg:col-span-1"> | |
| <div class="glass-card rounded-xl p-6 h-full"> | |
| <h2 class="text-xl font-semibold mb-6 flex items-center"> | |
| <i data-feather="compass" class="mr-2"></i> | |
| Deployment Steps | |
| </h2> | |
| <div class="space-y-4"> | |
| <div class="flex items-center cursor-pointer" onclick="window.location.href='index.html'"> | |
| <div class="step-indicator completed-step">1</div> | |
| <div> | |
| <h3 class="font-medium">Account Setup</h3> | |
| <p class="text-sm text-gray-400">Connect your Hugging Face account</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center cursor-pointer" onclick="window.location.href='index.html'"> | |
| <div class="step-indicator completed-step">2</div> | |
| <div> | |
| <h3 class="font-medium">Model Selection</h3> | |
| <p class="text-sm text-gray-400">Choose your chat model</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="step-indicator active-step">3</div> | |
| <div> | |
| <h3 class="font-medium">Deployment Config</h3> | |
| <p class="text-sm text-gray-400">Set up TTS/STT options</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="step-indicator pending-step">4</div> | |
| <div> | |
| <h3 class="font-medium">Review & Deploy</h3> | |
| <p class="text-sm text-gray-400">Launch your model</p> | |
| </div> | |
| </div> | |
| <div class="flex items-center"> | |
| <div class="step-indicator pending-step">5</div> | |
| <div> | |
| <h3 class="font-medium">Interactive Testing</h3> | |
| <p class="text-sm text-gray-400">Test your deployed model</p> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="mt-8 pt-6 border-t border-gray-700"> | |
| <h3 class="font-medium mb-3">Selected Model</h3> | |
| <div class="bg-gray-800 rounded-lg p-3"> | |
| <div class="flex items-center"> | |
| <div class="w-10 h-10 rounded-full bg-primary-500/20 flex items-center justify-center mr-3"> | |
| <i data-feather="box" class="text-primary-400"></i> | |
| </div> | |
| <div> | |
| <h4 class="font-medium">DialoGPT-large</h4> | |
| <p class="text-xs text-gray-400">Conversational model</p> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Main Content --> | |
| <div class="lg:col-span-2"> | |
| <div class="glass-card rounded-xl p-6"> | |
| <div class="flex justify-between items-center mb-6"> | |
| <h2 class="text-2xl font-bold flex items-center"> | |
| <span class="mr-3 text-primary-500">3.</span> | |
| Deployment Configuration | |
| </h2> | |
| <span class="text-sm px-3 py-1 rounded-full bg-primary-500/20 text-primary-300">Required</span> | |
| </div> | |
| <div class="mb-8"> | |
| <p class="text-gray-300 mb-6">Configure your model deployment with speech-to-text (STT) and text-to-speech (TTS) options for a complete conversational experience.</p> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6 mb-8"> | |
| <!-- STT Configuration --> | |
| <div class="config-option glass-card rounded-lg p-5 border border-gray-700 hover:border-primary-500/50"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-secondary-500/20 flex items-center justify-center mr-3"> | |
| <i data-feather="mic" class="text-secondary-400"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold">Speech-to-Text</h3> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-4">Enable microphone input and convert speech to text for your model.</p> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox rounded bg-gray-800 border-gray-700 text-primary-500 focus:ring-primary-500"> | |
| <span class="ml-2">Enable STT</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Language</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"> | |
| <option>English</option> | |
| <option>Spanish</option> | |
| <option>French</option> | |
| <option>German</option> | |
| <option>Chinese</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">STT Model</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"> | |
| <option>Whisper Base</option> | |
| <option>Whisper Small</option> | |
| <option>Whisper Medium</option> | |
| </select> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- TTS Configuration --> | |
| <div class="config-option glass-card rounded-lg p-5 border border-gray-700 hover:border-primary-500/50"> | |
| <div class="flex items-center mb-4"> | |
| <div class="w-12 h-12 rounded-full bg-primary-500/20 flex items-center justify-center mr-3"> | |
| <i data-feather="speaker" class="text-primary-400"></i> | |
| </div> | |
| <h3 class="text-lg font-semibold">Text-to-Speech</h3> | |
| </div> | |
| <p class="text-gray-400 text-sm mb-4">Convert your model's responses to natural sounding speech.</p> | |
| <div class="space-y-4"> | |
| <div> | |
| <label class="flex items-center"> | |
| <input type="checkbox" class="form-checkbox rounded bg-gray-800 border-gray-700 text-primary-500 focus:ring-primary-500" checked> | |
| <span class="ml-2">Enable TTS</span> | |
| </label> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Voice</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"> | |
| <option>Female Voice 1</option> | |
| <option>Female Voice 2</option> | |
| <option>Male Voice 1</option> | |
| <option>Male Voice 2</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Speed</label> | |
| <input type="range" min="0.5" max="1.5" step="0.1" value="1.0" class="w-full accent-primary-500"> | |
| <div class="flex justify-between text-xs text-gray-400"> | |
| <span>Slower</span> | |
| <span>Normal</span> | |
| <span>Faster</span> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <!-- Advanced Options --> | |
| <div class="mb-8"> | |
| <div class="flex items-center justify-between mb-4 cursor-pointer" id="advanced-toggle"> | |
| <h3 class="text-lg font-semibold flex items-center"> | |
| <i data-feather="settings" class="mr-2 text-gray-400"></i> | |
| Advanced Configuration | |
| </h3> | |
| <i data-feather="chevron-down" class="text-gray-400 transition-transform" id="advanced-arrow"></i> | |
| </div> | |
| <div class="hidden glass-card rounded-lg p-5 border border-gray-700" id="advanced-content"> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Compute Type</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"> | |
| <option>CPU Basic</option> | |
| <option>CPU Standard</option> | |
| <option selected>GPU T4</option> | |
| <option>GPU V100</option> | |
| <option>GPU A100</option> | |
| </select> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Max Response Length</label> | |
| <input type="number" value="512" class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Temperature</label> | |
| <input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full accent-primary-500"> | |
| <div class="flex justify-between text-xs text-gray-400"> | |
| <span>Precise</span> | |
| <span>Balanced</span> | |
| <span>Creative</span> | |
| </div> | |
| </div> | |
| <div> | |
| <label class="block text-sm font-medium mb-1">Deployment Region</label> | |
| <select class="w-full bg-gray-800 border border-gray-700 rounded-lg px-4 py-2 focus:outline-none focus:ring-2 focus:ring-primary-500 focus:border-transparent"> | |
| <option>US East (N. Virginia)</option> | |
| <option>US West (Oregon)</option> | |
| <option>EU (Ireland)</option> | |
| <option>Asia Pacific (Singapore)</option> | |
| </select> | |
| </div> | |
| </div> | |
| <div class="mt-4"> | |
| <label class="flex items-start"> | |
| <input type="checkbox" class="form-checkbox rounded bg-gray-800 border-gray-700 text-primary-500 focus:ring-primary-500 mt-1"> | |
| <span class="ml-2 text-sm">Enable automatic scaling based on traffic</span> | |
| </label> | |
| </div> | |
| </div> | |
| </div> | |
| </div> | |
| <div class="flex justify-between mt-8"> | |
| <button onclick="window.location.href='index.html'" class="px-6 py-2 rounded-lg border border-gray-700 hover:bg-gray-800 transition-all"> | |
| <i data-feather="arrow-left" class="mr-2"></i> | |
| Back | |
| </button> | |
| <button onclick="window.location.href='review.html'" class="px-6 py-2 rounded-lg bg-primary-500 hover:bg-primary-600 transition-all"> | |
| Next: Review | |
| <i data-feather="arrow-right" class="ml-2"></i> | |
| </button> | |
| </div> | |
| </div> | |
| </div> | |
| </main> | |
| </div> | |
| <script> | |
| // Initialize feather icons | |
| feather.replace(); | |
| // Advanced options toggle | |
| document.getElementById('advanced-toggle').addEventListener('click', function() { | |
| const content = document.getElementById('advanced-content'); | |
| const arrow = document.getElementById('advanced-arrow'); | |
| content.classList.toggle('hidden'); | |
| arrow.classList.toggle('rotate-180'); | |
| }); | |
| // Animation for config options | |
| document.querySelectorAll('.config-option').forEach(option => { | |
| option.addEventListener('mouseenter', function() { | |
| this.style.transform = 'translateY(-2px)'; | |
| this.style.boxShadow = '0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06)'; | |
| }); | |
| option.addEventListener('mouseleave', function() { | |
| this.style.transform = ''; | |
| this.style.boxShadow = ''; | |
| }); | |
| }); | |
| </script> | |
| </body> | |
| </html> | |