Hugging Face's logo

Spaces:
jrl224
/
test
Running

App Files Community
test / index.html
jrl224's picture
jrl224
Add 2 files
b7da7ad verified
Raw
History Blame Contribute Delete
27.4 kB
<!DOCTYPE html>
<html lang="en">
<head>
 <meta charset="UTF-8">
 <meta name="viewport" content="width=device-width, initial-scale=1.0">
 <title>Video2Guide - Convert YouTube Videos to Step-by-Step Guides</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">
 <style>
 .gradient-bg {
 background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
 }
 .guide-step {
 transition: all 0.3s ease;
 }
 .guide-step:hover {
 transform: translateY(-5px);
 box-shadow: 0 10px 25px rgba(0, 0, 0, 0.1);
 }
 .highlight-area {
 position: absolute;
 border: 2px solid rgba(255, 255, 0, 0.7);
 background-color: rgba(255, 255, 0, 0.2);
 border-radius: 50%;
 pointer-events: none;
 }
 .tooltip {
 position: absolute;
 background: white;
 padding: 5px 10px;
 border-radius: 5px;
 box-shadow: 0 2px 10px rgba(0,0,0,0.1);
 z-index: 100;
 font-size: 0.8rem;
 max-width: 200px;
 }
 .chat-container {
 transition: all 0.3s ease;
 height: 500px;
 }
 .chat-container.collapsed {
 height: 60px;
 }
 .progress-steps li.completed {
 color: #10b981;
 }
 .progress-steps li.completed:after {
 background-color: #10b981;
 }
 .progress-steps li.active {
 color: #3b82f6;
 font-weight: bold;
 }
 .progress-steps li.active:after {
 background-color: #3b82f6;
 }
 </style>
</head>
<body class="font-sans bg-gray-50 min-h-screen">
 <!-- Header/Navigation -->
 <header class="gradient-bg text-white shadow-lg">
 <div class="container mx-auto px-4 py-6">
 <div class="flex justify-between items-center">
 <div class="flex items-center space-x-2">
 <i class="fas fa-book-open text-2xl"></i>
 <h1 class="text-2xl font-bold">Video2Guide</h1>
 </div>
 <nav class="hidden md:flex space-x-6">
 <a href="#" class="hover:text-gray-200 transition">Home</a>
 <a href="#" class="hover:text-gray-200 transition">Examples</a>
 <a href="#" class="hover:text-gray-200 transition">Pricing</a>
 <a href="#" class="hover:text-gray-200 transition">FAQ</a>
 </nav>
 <button class="md:hidden text-xl">
 <i class="fas fa-bars"></i>
 </button>
 </div>
 </div>
 </header>
<!-- Main Content -->
 <main class="container mx-auto px-4 py-8">
 <!-- Hero Section -->
 <section class="text-center mb-16">
 <h2 class="text-4xl md:text-5xl font-bold text-gray-800 mb-6">Convert YouTube Videos to Step-by-Step Guides</h2>
 <p class="text-xl text-gray-600 max-w-3xl mx-auto mb-8">
 Transform any instructional video into a detailed, easy-to-follow visual guide with screenshots and clear instructions.
 </p>
<!-- URL Input Form -->
 <div class="max-w-2xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-6">
 <div class="flex flex-col md:flex-row gap-4">
 <input
type="url"
id="youtubeUrl"
placeholder="Paste YouTube video URL here..."
class="flex-grow px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-blue-500 outline-none transition"
 >
 <button
id="generateBtn"
 class="bg-blue-600 hover:bg-blue-700 text-white font-semibold px-6 py-3 rounded-lg transition flex items-center justify-center"
 >
 <i class="fas fa-magic mr-2"></i> Generate Guide
 </button>
 </div>
 <p class="text-sm text-gray-500 mt-3 text-left">
 Example: https://www.youtube.com/watch?v=dQw4w9WgXcQ
 </p>
 </div>
 </section>
<!-- Loading State (Hidden by default) -->
 <section id="loadingSection" class="hidden max-w-3xl mx-auto bg-white rounded-xl shadow-md overflow-hidden p-8 mb-8">
 <div class="text-center">
 <div class="animate-spin rounded-full h-16 w-16 border-t-2 border-b-2 border-blue-500 mx-auto mb-6"></div>
 <h3 class="text-2xl font-semibold text-gray-800 mb-4">Creating Your Guide...</h3>
<!-- Progress Steps -->
 <ul class="progress-steps relative max-w-md mx-auto mb-8">
 <li class="completed mb-10 pl-6 relative">
 <span>Processing YouTube URL</span>
 <span class="absolute left-0 top-0 w-4 h-4 rounded-full bg-green-500 -ml-2"></span>
 </li>
 <li class="active mb-10 pl-6 relative">
 <span>Extracting video transcript</span>
 <span class="absolute left-0 top-0 w-4 h-4 rounded-full bg-blue-500 -ml-2"></span>
 <span class="absolute left-0 top-0 w-1 h-10 bg-gray-200 -ml-1 -mt-10"></span>
 </li>
 <li class="mb-10 pl-6 relative">
 <span>Generating instructions</span>
 <span class="absolute left-0 top-0 w-4 h-4 rounded-full bg-gray-200 -ml-2"></span>
 <span class="absolute left-0 top-0 w-1 h-10 bg-gray-200 -ml-1 -mt-10"></span>
 </li>
 <li class="pl-6 relative">
 <span>Capturing screenshots</span>
 <span class="absolute left-0 top-0 w-4 h-4 rounded-full bg-gray-200 -ml-2"></span>
 <span class="absolute left-0 top-0 w-1 h-10 bg-gray-200 -ml-1 -mt-10"></span>
 </li>
 </ul>
<div class="w-full bg-gray-200 rounded-full h-2.5 mb-4">
 <div class="bg-blue-600 h-2.5 rounded-full" style="width: 45%"></div>
 </div>
 <p class="text-gray-600">Estimated time remaining: 1-2 minutes</p>
 </div>
 </section>
<!-- Results Section (Hidden by default) -->
 <section id="resultsSection" class="hidden">
 <div class="flex justify-between items-center mb-8">
 <h2 class="text-3xl font-bold text-gray-800">Your Step-by-Step Guide</h2>
 <div class="flex space-x-4">
 <button class="bg-gray-200 hover:bg-gray-300 text-gray-800 px-4 py-2 rounded-lg flex items-center transition">
 <i class="fas fa-print mr-2"></i> Print
 </button>
 <button id="exportPdfBtn" class="bg-red-600 hover:bg-red-700 text-white px-4 py-2 rounded-lg flex items-center transition">
 <i class="fas fa-file-pdf mr-2"></i> Export PDF
 </button>
 </div>
 </div>
<div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
 <!-- Video Info -->
 <div class="p-6 border-b">
 <div class="flex flex-col md:flex-row gap-6">
 <div class="w-full md:w-1/3">
 <img src="https://img.youtube.com/vi/dQw4w9WgXcQ/maxresdefault.jpg" alt="Video thumbnail" class="rounded-lg w-full">
 </div>
 <div class="w-full md:w-2/3">
 <h3 class="text-2xl font-bold text-gray-800 mb-2">How to Make Perfect Pancakes Every Time</h3>
 <p class="text-gray-600 mb-4">By Cooking Master • 12:34 duration</p>
 <p class="text-gray-700">This guide will walk you through the exact steps demonstrated in the video to make perfect, fluffy pancakes every time with professional results.</p>
 </div>
 </div>
 </div>
<!-- Guide Steps -->
 <div id="guideSteps" class="divide-y divide-gray-200">
 <!-- Step 1 -->
 <div class="guide-step p-6 hover:bg-gray-50">
 <div class="flex flex-col md:flex-row gap-6">
 <div class="w-full md:w-1/3 relative">
 <img src="https://images.unsplash.com/photo-1567620905732-2d1ec7ab7445?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Step 1" class="rounded-lg w-full cursor-pointer" id="stepImage1">
 <div class="highlight-area" style="width: 60px; height: 60px; top: 30%; left: 40%;"></div>
 <div class="tooltip" style="top: 20%; left: 45%;">Mix until smooth</div>
 </div>
 <div class="w-full md:w-2/3">
 <div class="flex items-center mb-2">
 <span class="bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full mr-3">Step 1</span>
 <span class="text-sm text-gray-500">00:32 - 01:15</span>
 </div>
 <h3 class="text-xl font-semibold text-gray-800 mb-3">Prepare the Dry Ingredients</h3>
 <p class="text-gray-700 mb-4">In a large mixing bowl, combine 2 cups of all-purpose flour, 2 tablespoons of sugar, 1 tablespoon of baking powder, and 1/2 teaspoon of salt. Whisk these dry ingredients together thoroughly to ensure even distribution of the leavening agents.</p>
 <div class="bg-yellow-50 border-l-4 border-yellow-400 p-4">
 <p class="text-yellow-700"><strong>Pro Tip:</strong> Sifting the dry ingredients will make your pancakes even fluffier.</p>
 </div>
 </div>
 </div>
 </div>
<!-- Step 2 -->
 <div class="guide-step p-6 hover:bg-gray-50">
 <div class="flex flex-col md:flex-row gap-6">
 <div class="w-full md:w-1/3 relative">
 <img src="https://images.unsplash.com/photo-1550583724-b2692b85b150?ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D&auto=format&fit=crop&w=800&q=80" alt="Step 2" class="rounded-lg w-full cursor-pointer" id="stepImage2">
 <div class="highlight-area" style="width: 80px; height: 40px; top: 50%; left: 30%;"></div>
 <div class="tooltip" style="top: 40%; left: 35%;">Medium heat is ideal</div>
 </div>
 <div class="w-full md:w-2/3">
 <div class="flex items-center mb-2">
 <span class="bg-blue-100 text-blue-800 text-sm font-semibold px-3 py-1 rounded-full mr-3">Step 2</span>
 <span class="text-sm text-gray-500">01:16 - 02:30</span>
 </div>
 <h3 class="text-xl font-semibold text-gray-800 mb-3">Mix Wet Ingredients Separately</h3>
 <p class="text-gray-700 mb-4">In another bowl, beat 2 large eggs, then add 1 3/4 cups of milk, 1/4 cup of melted butter, and 1 teaspoon of vanilla extract. Whisk until fully combined. The video emphasizes not to overmix at this stage to prevent gluten development.</p>
 <div class="bg-blue-50 border-l-4 border-blue-400 p-4">
 <p class="text-blue-700"><strong>Note:</strong> The butter should be cooled slightly before adding to prevent cooking the eggs.</p>
 </div>
 </div>
 </div>
 </div>
<!-- More steps would appear here in a real implementation -->
 </div>
 </div>
<!-- Materials/Ingredients Section -->
 <div class="bg-white rounded-xl shadow-md overflow-hidden mb-8">
 <div class="p-6 border-b">
 <h3 class="text-xl font-semibold text-gray-800 mb-4">Materials & Ingredients</h3>
 <div class="grid grid-cols-1 md:grid-cols-2 gap-6">
 <div>
 <h4 class="font-medium text-gray-700 mb-2">Ingredients</h4>
 <ul class="list-disc pl-5 text-gray-600 space-y-1">
 <li>2 cups all-purpose flour</li>
 <li>2 tbsp sugar</li>
 <li>1 tbsp baking powder</li>
 <li>1/2 tsp salt</li>
 <li>2 large eggs</li>
 <li>1 3/4 cups milk</li>
 <li>1/4 cup melted butter</li>
 <li>1 tsp vanilla extract</li>
 </ul>
 </div>
 <div>
 <h4 class="font-medium text-gray-700 mb-2">Equipment</h4>
 <ul class="list-disc pl-5 text-gray-600 space-y-1">
 <li>Large mixing bowls (2)</li>
 <li>Whisk</li>
 <li>Measuring cups/spoons</li>
 <li>Non-stick skillet or griddle</li>
 <li>Spatula</li>
 <li>Ladle or measuring cup</li>
 </ul>
 </div>
 </div>
 </div>
 </div>
 </section>
<!-- Features Section -->
 <section class="my-16">
 <h2 class="text-3xl font-bold text-center text-gray-800 mb-12">How It Works</h2>
 <div class="grid grid-cols-1 md:grid-cols-3 gap-8">
 <div class="bg-white p-6 rounded-xl shadow-md text-center">
 <div class="bg-blue-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-link text-blue-600 text-2xl"></i>
 </div>
 <h3 class="text-xl font-semibold text-gray-800 mb-3">1. Paste YouTube URL</h3>
 <p class="text-gray-600">Simply copy and paste the link to any instructional YouTube video you want to convert into a guide.</p>
 </div>
 <div class="bg-white p-6 rounded-xl shadow-md text-center">
 <div class="bg-purple-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-cogs text-purple-600 text-2xl"></i>
 </div>
 <h3 class="text-xl font-semibold text-gray-800 mb-3">2. AI Processes Content</h3>
 <p class="text-gray-600">Our system analyzes the video, extracts key moments, and generates clear step-by-step instructions.</p>
 </div>
 <div class="bg-white p-6 rounded-xl shadow-md text-center">
 <div class="bg-green-100 w-16 h-16 rounded-full flex items-center justify-center mx-auto mb-4">
 <i class="fas fa-file-alt text-green-600 text-2xl"></i>
 </div>
 <h3 class="text-xl font-semibold text-gray-800 mb-3">3. Get Your Guide</h3>
 <p class="text-gray-600">Receive a comprehensive visual guide with screenshots, timestamps, and detailed instructions.</p>
 </div>
 </div>
 </section>
 </main>
<!-- Floating Chat Button -->
 <div class="fixed bottom-6 right-6 z-50">
 <button id="chatToggle" class="bg-blue-600 text-white w-14 h-14 rounded-full shadow-lg flex items-center justify-center transition hover:bg-blue-700">
 <i class="fas fa-comment-dots text-2xl"></i>
 </button>
 </div>
<!-- Chat Container -->
 <div id="chatContainer" class="fixed bottom-24 right-6 w-80 bg-white rounded-t-xl shadow-xl overflow-hidden chat-container collapsed">
 <div class="bg-blue-600 text-white p-4 flex justify-between items-center cursor-pointer" id="chatHeader">
 <h3 class="font-semibold">Guide Assistant</h3>
 <div>
 <button id="minimizeChat" class="text-white mr-2">
 <i class="fas fa-minus"></i>
 </button>
 <button id="closeChat" class="text-white">
 <i class="fas fa-times"></i>
 </button>
 </div>
 </div>
 <div class="p-4 h-80 overflow-y-auto bg-gray-50" id="chatMessages">
 <div class="mb-4">
 <div class="bg-blue-100 text-gray-800 p-3 rounded-lg max-w-xs float-right">
 Hello! I'm your guide assistant. How can I help you with this tutorial?
 </div>
 <div class="clear-both"></div>
 </div>
 <div class="mb-4">
 <div class="bg-white text-gray-800 p-3 rounded-lg max-w-xs shadow float-left">
 Can you explain step 3 in more detail?
 </div>
 <div class="clear-both"></div>
 </div>
 <div class="mb-4">
 <div class="bg-blue-100 text-gray-800 p-3 rounded-lg max-w-xs float-right">
 Certainly! Step 3 covers the mixing technique. The key is to fold the wet ingredients into the dry ingredients gently, stopping as soon as the flour is moistened. Lumps are okay - overmixing makes pancakes tough.
 </div>
 <div class="clear-both"></div>
 </div>
 </div>
 <div class="p-3 border-t border-gray-200 bg-white">
 <div class="flex">
 <input
type="text"
placeholder="Type your question..."
class="flex-grow px-3 py-2 border border-gray-300 rounded-l-lg focus:outline-none focus:ring-1 focus:ring-blue-500"
 >
 <button class="bg-blue-600 text-white px-4 py-2 rounded-r-lg hover:bg-blue-700 transition">
 <i class="fas fa-paper-plane"></i>
 </button>
 </div>
 </div>
 </div>
<!-- Footer -->
 <footer class="bg-gray-800 text-white py-8">
 <div class="container mx-auto px-4">
 <div class="grid grid-cols-1 md:grid-cols-4 gap-8">
 <div>
 <h3 class="text-lg font-semibold mb-4">Video2Guide</h3>
 <p class="text-gray-400">Transforming video tutorials into actionable step-by-step guides using AI technology.</p>
 </div>
 <div>
 <h3 class="text-lg font-semibold mb-4">Quick Links</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white transition">Home</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Examples</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Pricing</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Contact</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-lg font-semibold mb-4">Legal</h3>
 <ul class="space-y-2">
 <li><a href="#" class="text-gray-400 hover:text-white transition">Terms of Service</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Privacy Policy</a></li>
 <li><a href="#" class="text-gray-400 hover:text-white transition">Cookie Policy</a></li>
 </ul>
 </div>
 <div>
 <h3 class="text-lg font-semibold mb-4">Connect</h3>
 <div class="flex space-x-4">
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-twitter text-xl"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-facebook text-xl"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-instagram text-xl"></i></a>
 <a href="#" class="text-gray-400 hover:text-white transition"><i class="fab fa-linkedin text-xl"></i></a>
 </div>
 </div>
 </div>
 <div class="border-t border-gray-700 mt-8 pt-6 text-center text-gray-400">
 <p>&copy; 2023 Video2Guide. All rights reserved.</p>
 </div>
 </div>
 </footer>
<!-- JavaScript -->
 <script>
 document.addEventListener('DOMContentLoaded', function() {
 // DOM Elements
 const generateBtn = document.getElementById('generateBtn');
 const youtubeUrl = document.getElementById('youtubeUrl');
 const loadingSection = document.getElementById('loadingSection');
 const resultsSection = document.getElementById('resultsSection');
 const chatToggle = document.getElementById('chatToggle');
 const chatContainer = document.getElementById('chatContainer');
 const minimizeChat = document.getElementById('minimizeChat');
 const closeChat = document.getElementById('closeChat');
 const chatHeader = document.getElementById('chatHeader');
// Generate Guide Button Click
 generateBtn.addEventListener('click', function() {
 const url = youtubeUrl.value.trim();
if (!url) {
 alert('Please enter a YouTube URL');
 return;
 }
// Simple URL validation
 if (!url.includes('youtube.com') && !url.includes('youtu.be')) {
 alert('Please enter a valid YouTube URL');
 return;
 }
// Show loading state
 loadingSection.classList.remove('hidden');
// Hide results if they were shown
 resultsSection.classList.add('hidden');
// Simulate processing (in a real app, this would be API calls)
 setTimeout(function() {
 loadingSection.classList.add('hidden');
 resultsSection.classList.remove('hidden');
// Scroll to results
 resultsSection.scrollIntoView({ behavior: 'smooth' });
 }, 3000);
 });
// Chat Toggle
 chatToggle.addEventListener('click', function() {
 chatContainer.classList.toggle('collapsed');
 });
// Minimize Chat
 minimizeChat.addEventListener('click', function(e) {
 e.stopPropagation();
 chatContainer.classList.add('collapsed');
 });
// Close Chat
 closeChat.addEventListener('click', function(e) {
 e.stopPropagation();
 chatContainer.classList.add('hidden');
 });
// Chat Header Click (to expand)
 chatHeader.addEventListener('click', function() {
 chatContainer.classList.remove('collapsed');
 });
// Image click for highlighting (simulated)
 document.querySelectorAll('[id^="stepImage"]').forEach(img => {
 img.addEventListener('click', function(e) {
 const rect = this.getBoundingClientRect();
 const x = e.clientX - rect.left;
 const y = e.clientY - rect.top;
// Create or move highlight
 let highlight = this.nextElementSibling;
 if (!highlight || !highlight.classList.contains('highlight-area')) {
 highlight = document.createElement('div');
 highlight.className = 'highlight-area';
 this.parentNode.insertBefore(highlight, this.nextSibling);
 }
highlight.style.width = '80px';
 highlight.style.height = '80px';
 highlight.style.top = (y - 40) + 'px';
 highlight.style.left = (x - 40) + 'px';
// Show tooltip
 let tooltip = highlight.nextElementSibling;
 if (!tooltip || !tooltip.classList.contains('tooltip')) {
 tooltip = document.createElement('div');
 tooltip.className = 'tooltip';
 tooltip.textContent = 'Important detail';
 this.parentNode.insertBefore(tooltip, highlight.nextSibling);
 }
tooltip.style.top = (y - 60) + 'px';
 tooltip.style.left = (x - 30) + 'px';
 });
 });
// Export PDF Button
 document.getElementById('exportPdfBtn').addEventListener('click', function() {
 alert('In a real implementation, this would generate a PDF with jsPDF or similar library');
 });
 });
 </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=jrl224/test" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
</html>