Spaces:

samihalawa
/

Autotutorial

Running

App Files Files Community

Luigi commited on Feb 11

Commit

16ec358

verified ·

1 Parent(s): a6e1b09

Update index.html

Browse files

Files changed (1) hide show

index.html +211 -19

index.html CHANGED Viewed

@@ -1,19 +1,211 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>

+<!DOCTYPE html>
+<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>