Spaces:
Running
Running
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>Autotutorial.ai - Create Video Tutorials Effortlessly</title> | |
| <!-- Tailwind CSS CDN for styling --> | |
| <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/tailwind.min.css" rel="stylesheet"> | |
| <!-- Font Awesome CDN for icons --> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" integrity="sha512-9usAa10IRO0HhonpyAIVpjrylPvoDwiPUiKdWk5t3PyolY1cOd4DSE0Ga+ri4AuTroPR5aQvXU9xC6qOPnzFeg==" crossorigin="anonymous" referrerpolicy="no-referrer" /> | |
| <!-- Inter Font from Google Fonts --> | |
| <link rel="preconnect" href="https://fonts.googleapis.com"> | |
| <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> | |
| <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet"> | |
| <style> | |
| body { font-family: 'Inter', sans-serif; } | |
| .btn-primary { @apply bg-blue-600 hover:bg-blue-700 text-white font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-blue-500 focus:ring-opacity-50 transition-colors duration-200; } | |
| .btn-primary:disabled { @apply bg-blue-300 cursor-not-allowed hover:bg-blue-300 focus:ring-0; } | |
| .btn-secondary { @apply bg-gray-200 hover:bg-gray-300 text-gray-700 font-semibold py-2 px-4 rounded focus:outline-none focus:ring-2 focus:ring-gray-400 focus:ring-opacity-50 transition-colors duration-200; } | |
| .input-field { @apply shadow appearance-none border rounded w-full py-2 px-3 text-gray-700 leading-tight focus:outline-none focus:shadow-outline; } | |
| .input-label { @apply block text-gray-700 text-sm font-bold mb-2; } | |
| .status-box { @apply border rounded p-4 mb-4; } | |
| .error-text { @apply text-red-500 mt-2 text-sm; } | |
| .video-player-container { @apply rounded overflow-hidden shadow-xl; } | |
| </style> | |
| </head> | |
| <body class="bg-gray-100 p-8"> | |
| <div class="max-w-4xl mx-auto bg-white shadow-lg rounded-lg overflow-hidden"> | |
| <!-- Header Section --> | |
| <header class="bg-blue-700 p-6 text-white"> | |
| <h1 class="text-2xl font-bold"><i class="fas fa-video mr-2"></i> Autotutorial.ai</h1> | |
| <p class="text-sm mt-1">Effortlessly Generate Professional Video Tutorials</p> | |
| </header> | |
| <!-- Main Content Area --> | |
| <div class="p-8"> | |
| <!-- Tutorial Input Section --> | |
| <section class="mb-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">Tutorial Settings</h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="tutorialTopic" class="input-label">Tutorial Topic <span class="text-gray-500">(e.g., "Getting Started with React")</span></label> | |
| <input type="text" id="tutorialTopic" class="input-field" placeholder="Enter tutorial topic" value="Mastering Asynchronous JavaScript" required> | |
| </div> | |
| <div> | |
| <label for="desiredDuration" class="input-label">Desired Duration (Minutes)</label> | |
| <select id="desiredDuration" class="input-field"> | |
| <option value="5">5 Minutes</option> | |
| <option value="10" selected>10 Minutes</option> | |
| <option value="15">15 Minutes</option> | |
| <option value="20">20 Minutes</option> | |
| </select> | |
| </div> | |
| </div> | |
| </section> | |
| <!-- API Keys Section --> | |
| <section class="mb-6"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800">API Keys <span class="text-gray-500">(Optional, for advanced features)</span></h2> | |
| <div class="grid grid-cols-1 md:grid-cols-2 gap-6"> | |
| <div> | |
| <label for="openaiApiKey" class="input-label">OpenAI API Key <span class="text-gray-500">(For script generation)</span></label> | |
| <input type="text" id="openaiApiKey" class="input-field" placeholder="Enter your OpenAI API Key (Optional)" value="sk-YOUR_OPENAI_API_KEY_DEMO" > | |
| </div> | |
| <div> | |
| <label for="videoGenApiKey" class="input-label">Video Generation API Key <span class="text-gray-500">(For advanced video synthesis)</span></label> | |
| <input type="text" id="videoGenApiKey" class="input-field" placeholder="Enter Video API Key (Optional)" value="vg-YOUR_VIDEO_GEN_API_KEY_DEMO"> | |
| </div> | |
| </div> | |
| <p class="text-sm text-gray-500 mt-2">These API keys are optional and enhance the tutorial generation process. You can still generate basic tutorials without them.</p> | |
| </section> | |
| <!-- Action Buttons --> | |
| <section class="mb-6 flex justify-between"> | |
| <button id="generateButton" class="btn-primary"><i class="fas fa-magic mr-2"></i> Generate Tutorial</button> | |
| <button id="resetButton" class="btn-secondary hidden"><i class="fas fa-redo mr-2"></i> Reset</button> | |
| </section> | |
| <!-- Status and Error Area --> | |
| <section id="statusSection" class="status-box bg-gray-50"> | |
| <h3 class="font-semibold text-gray-700 mb-2"><i class="fas fa-spinner fa-spin mr-2"></i> Status Updates</h3> | |
| <div id="statusMessages"> | |
| <p class="text-gray-600"><i class="fas fa-check-circle text-green-500 mr-1"></i> Ready to generate tutorial. Please click "Generate Tutorial".</p> | |
| </div> | |
| <p id="errorMessage" class="error-text hidden"></p> | |
| </section> | |
| <!-- Video Output Section --> | |
| <section id="videoOutputSection" class="hidden"> | |
| <h2 class="text-xl font-semibold mb-4 text-gray-800"><i class="fas fa-film mr-2"></i> Generated Tutorial Preview</h2> | |
| <div class="video-player-container"> | |
| <video id="tutorialVideo" controls width="100%"> | |
| <source src="https://archive.org/download/ElephantsDream/ed_1024_512.mp4" type="video/mp4"> | |
| Your browser does not support the video tag. | |
| </video> | |
| </div> | |
| <div class="mt-4 flex justify-between items-center"> | |
| <div> | |
| <p class="text-gray-700"><strong>Tutorial Title:</strong> <span id="videoTitle">Mastering Asynchronous JavaScript in 10 Minutes</span></p> | |
| <p class="text-gray-500 text-sm">Generated based on your topic input.</p> | |
| </div> | |
| <div> | |
| <a href="#" id="downloadButton" class="btn-primary" download="tutorial.mp4"><i class="fas fa-download mr-2"></i> Download Video</a> | |
| </div> | |
| </div> | |
| </section> | |
| </div> | |
| <!-- Footer Section --> | |
| <footer class="bg-gray-200 p-4 text-center text-gray-600 text-sm"> | |
| © 2023 Autotutorial.ai. All rights reserved. | <a href="#" class="hover:underline">Terms of Service</a> | <a href="#" class="hover:underline">Privacy Policy</a> | |
| </footer> | |
| </div> | |
| <script> | |
| document.getElementById('generateButton').addEventListener('click', function() { | |
| const topic = document.getElementById('tutorialTopic').value; | |
| const duration = document.getElementById('desiredDuration').value; | |
| const openaiKey = document.getElementById('openaiApiKey').value; | |
| const videoGenKey = document.getElementById('videoGenApiKey').value; | |
| const statusMessagesDiv = document.getElementById('statusMessages'); | |
| const errorMessageDiv = document.getElementById('errorMessage'); | |
| const generateButton = document.getElementById('generateButton'); | |
| const resetButton = document.getElementById('resetButton'); | |
| const statusSection = document.getElementById('statusSection'); | |
| const videoOutputSection = document.getElementById('videoOutputSection'); | |
| const videoTitleSpan = document.getElementById('videoTitle'); | |
| // Reset status and hide video output | |
| statusMessagesDiv.innerHTML = ''; | |
| errorMessageDiv.classList.add('hidden'); | |
| videoOutputSection.classList.add('hidden'); | |
| resetButton.classList.add('hidden'); | |
| generateButton.disabled = true; | |
| statusSection.querySelector('h3 i').classList.remove('fa-check-circle', 'text-green-500', 'fa-times-circle', 'text-red-500'); | |
| statusSection.querySelector('h3 i').classList.add('fa-spinner', 'fa-spin', 'mr-2'); | |
| statusSection.querySelector('h3').innerHTML = '<i class="fas fa-spinner fa-spin mr-2"></i> Status Updates'; | |
| // Simulate tutorial generation process with delays | |
| simulateStep(statusMessagesDiv, "Generating tutorial script...", 1000, () => { | |
| simulateStep(statusMessagesDiv, "Creating voiceover...", 2000, () => { | |
| simulateStep(statusMessagesDiv, "Synthesizing video scenes...", 3000, () => { | |
| simulateStep(statusMessagesDiv, "Finalizing and rendering...", 2500, () => { | |
| // Simulate success | |
| statusMessagesDiv.innerHTML = '<p class="text-green-600"><i class="fas fa-check-circle text-green-500 mr-1"></i> Tutorial generation complete!</p>'; | |
| statusSection.querySelector('h3 i').classList.remove('fa-spinner', 'fa-spin', 'mr-2'); | |
| statusSection.querySelector('h3 i').classList.add('fa-check-circle', 'text-green-500', 'mr-2'); | |
| statusSection.querySelector('h3').innerHTML = '<i class="fas fa-check-circle text-green-500 mr-2"></i> Status Updates'; | |
| videoTitleSpan.textContent = topic + " in " + duration + " Minutes"; | |
| videoOutputSection.classList.remove('hidden'); | |
| generateButton.disabled = false; | |
| generateButton.classList.add('hidden'); | |
| resetButton.classList.remove('hidden'); | |
| }, false); | |
| }, false); | |
| }, false); | |
| }, false); | |
| }); | |
| document.getElementById('resetButton').addEventListener('click', function() { | |
| const statusMessagesDiv = document.getElementById('statusMessages'); | |
| const errorMessageDiv = document.getElementById('errorMessage'); | |
| const generateButton = document.getElementById('generateButton'); | |
| const resetButton = document.getElementById('resetButton'); | |
| const statusSection = document.getElementById('statusSection'); | |
| const videoOutputSection = document.getElementById('videoOutputSection'); | |
| statusMessagesDiv.innerHTML = '<p class="text-gray-600"><i class="fas fa-check-circle text-green-500 mr-1"></i> Ready to generate tutorial. Please click "Generate Tutorial".</p>'; | |
| errorMessageDiv.classList.add('hidden'); | |
| videoOutputSection.classList.add('hidden'); | |
| generateButton.disabled = false; | |
| generateButton.classList.remove('hidden'); | |
| resetButton.classList.add('hidden'); | |
| statusSection.querySelector('h3 i').classList.remove('fa-times-circle', 'text-red-500', 'fa-spinner', 'fa-spin', 'mr-2'); | |
| statusSection.querySelector('h3 i').classList.add('fa-check-circle', 'text-green-500', 'mr-2'); | |
| statusSection.querySelector('h3').innerHTML = '<i class="fas fa-check-circle text-green-500 mr-2"></i> Status Updates'; | |
| }); | |
| function simulateStep(statusDiv, message, delay, callback, isSuccess = true) { | |
| setTimeout(function() { | |
| const messageElement = document.createElement('p'); | |
| if (isSuccess) { | |
| messageElement.classList.add('text-gray-600'); | |
| messageElement.innerHTML = `<i class="fas fa-check-circle text-green-500 mr-1"></i> ${message}`; | |
| } else { | |
| messageElement.classList.add('text-red-500'); | |
| messageElement.innerHTML = `<i class="fas fa-times-circle text-red-500 mr-1"></i> ${message}`; | |
| document.getElementById('errorMessage').textContent = "Error during tutorial generation. Please check API keys and try again."; | |
| document.getElementById('errorMessage').classList.remove('hidden'); | |
| document.getElementById('statusSection').querySelector('h3 i').classList.remove('fa-spinner', 'fa-spin', 'mr-2'); | |
| document.getElementById('statusSection').querySelector('h3 i').classList.add('fa-times-circle', 'text-red-500', 'mr-2'); | |
| document.getElementById('statusSection').querySelector('h3').innerHTML = '<i class="fas fa-times-circle text-red-500 mr-2"></i> Status Updates'; | |
| document.getElementById('generateButton').disabled = false; | |
| document.getElementById('generateButton').classList.add('hidden'); | |
| document.getElementById('resetButton').classList.remove('hidden'); | |
| } | |
| statusDiv.appendChild(messageElement); | |
| statusDiv.scrollTop = statusDiv.scrollHeight; // Auto scroll to bottom | |
| if (callback) callback(); | |
| }, delay); | |
| } | |
| </script> | |
| </body> | |
| </html> |