Spaces:

karhar92
/

video

Running

App Files Files Community

karhar92 commited on Apr 4, 2025

Commit

89e9ded

verified ·

1 Parent(s): 3dcdf30

Add 2 files

Browse files

Files changed (2) hide show

README.md +7 -5
index.html +327 -19

README.md CHANGED Viewed

@@ -1,10 +1,12 @@
 ---
-title: Video
-emoji: 📈
-colorFrom: green
-colorTo: gray
 sdk: static
 pinned: false
 ---
-Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

 ---
+title: video
+emoji: 🐳
+colorFrom: yellow
+colorTo: blue
 sdk: static
 pinned: false
+tags:
+  - deepsite
 ---
+Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference

index.html CHANGED Viewed

@@ -1,19 +1,327 @@
-<!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>VidGenAI - AI-Powered Video Creation</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>
+        @import url('https://fonts.googleapis.com/css2?family=Poppins:wght@300;400;500;600;700&display=swap');
+        body {
+            font-family: 'Poppins', sans-serif;
+            background-color: #f8fafc;
+        }
+        .gradient-bg {
+            background: linear-gradient(135deg, #6366f1 0%, #8b5cf6 50%, #d946ef 100%);
+        }
+        .video-container {
+            aspect-ratio: 16/9;
+            background-color: #1e293b;
+            border-radius: 0.75rem;
+            overflow: hidden;
+        }
+        .chat-message-ai {
+            background-color: #f1f5f9;
+            border-radius: 1rem 1rem 1rem 0;
+        }
+        .chat-message-user {
+            background-color: #6366f1;
+            color: white;
+            border-radius: 1rem 1rem 0 1rem;
+        }
+        .recording-indicator {
+            animation: pulse 1.5s infinite;
+        }
+        @keyframes pulse {
+            0% { opacity: 1; }
+            50% { opacity: 0.5; }
+            100% { opacity: 1; }
+        }
+        .timeline-track {
+            height: 4px;
+            background-color: #e2e8f0;
+        }
+        .timeline-progress {
+            height: 100%;
+            background-color: #6366f1;
+            width: 0%;
+        }
+        .tooltip:hover .tooltip-text {
+            visibility: visible;
+            opacity: 1;
+        }
+    </style>
+</head>
+<body class="min-h-screen flex flex-col">
+    <!-- Header -->
+    <header class="gradient-bg text-white shadow-lg">
+        <div class="container mx-auto px-4 py-4 flex justify-between items-center">
+            <div class="flex items-center space-x-2">
+                <i class="fas fa-video text-2xl"></i>
+                <h1 class="text-2xl font-bold">VidGenAI</h1>
+            </div>
+            <nav class="hidden md:flex space-x-6">
+                <a href="#" class="hover:text-indigo-200 transition">Home</a>
+                <a href="#" class="hover:text-indigo-200 transition">Templates</a>
+                <a href="#" class="hover:text-indigo-200 transition">Library</a>
+                <a href="#" class="hover:text-indigo-200 transition">Pricing</a>
+            </nav>
+            <div class="flex items-center space-x-4">
+                <button class="bg-white text-indigo-600 px-4 py-2 rounded-full font-medium hover:bg-indigo-50 transition">
+                    Upgrade
+                </button>
+                <div class="w-10 h-10 rounded-full bg-indigo-200 flex items-center justify-center">
+                    <i class="fas fa-user text-indigo-700"></i>
+                </div>
+            </div>
+        </div>
+    </header>
+    <!-- Main Content -->
+    <main class="flex-1 container mx-auto px-4 py-8 flex flex-col lg:flex-row gap-8">
+        <!-- Video Editor Section -->
+        <section class="flex-1 flex flex-col">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-semibold text-gray-800">Video Editor</h2>
+                <div class="flex space-x-2">
+                    <button class="px-4 py-2 bg-gray-200 rounded-lg hover:bg-gray-300 transition">
+                        <i class="fas fa-cog mr-2"></i> Settings
+                    </button>
+                    <button class="px-4 py-2 bg-indigo-600 text-white rounded-lg hover:bg-indigo-700 transition">
+                        <i class="fas fa-save mr-2"></i> Export
+                    </button>
+                </div>
+            </div>
+            <!-- Video Preview -->
+            <div class="video-container mb-4 relative">
+                <div class="absolute inset-0 flex items-center justify-center">
+                    <i class="fas fa-video text-5xl text-gray-500"></i>
+                </div>
+                <div class="absolute bottom-4 left-4 bg-black bg-opacity-50 text-white px-3 py-1 rounded-full text-sm">
+                    <span class="recording-indicator">●</span> Recording...
+                </div>
+            </div>
+            <!-- Recording Controls -->
+            <div class="bg-white rounded-xl shadow-md p-4 mb-6">
+                <div class="flex justify-center space-x-4">
+                    <button class="w-12 h-12 rounded-full bg-red-600 text-white flex items-center justify-center hover:bg-red-700 transition tooltip">
+                        <i class="fas fa-stop"></i>
+                        <span class="tooltip-text absolute -mt-16 bg-gray-800 text-white text-xs px-2 py-1 rounded">Stop Recording</span>
+                    </button>
+                    <button class="w-16 h-16 rounded-full bg-indigo-600 text-white flex items-center justify-center hover:bg-indigo-700 transition tooltip">
+                        <i class="fas fa-video"></i>
+                        <span class="tooltip-text absolute -mt-20 bg-gray-800 text-white text-xs px-2 py-1 rounded">Record Video</span>
+                    </button>
+                    <button class="w-12 h-12 rounded-full bg-gray-200 flex items-center justify-center hover:bg-gray-300 transition tooltip">
+                        <i class="fas fa-microphone"></i>
+                        <span class="tooltip-text absolute -mt-16 bg-gray-800 text-white text-xs px-2 py-1 rounded">Record Audio</span>
+                    </button>
+                </div>
+                <div class="mt-6">
+                    <div class="flex justify-between text-sm text-gray-600 mb-1">
+                        <span>00:12</span>
+                        <span>05:00</span>
+                    </div>
+                    <div class="timeline-track rounded-full">
+                        <div class="timeline-progress rounded-full"></div>
+                    </div>
+                </div>
+            </div>
+            <!-- Editing Tools -->
+            <div class="bg-white rounded-xl shadow-md p-4">
+                <div class="flex overflow-x-auto pb-2 space-x-4">
+                    <button class="flex flex-col items-center px-3 py-2 rounded-lg hover:bg-gray-100 transition min-w-fit">
+                        <i class="fas fa-cut text-indigo-600 mb-1"></i>
+                        <span class="text-xs">Trim</span>
+                    </button>
+                    <button class="flex flex-col items-center px-3 py-2 rounded-lg hover:bg-gray-100 transition min-w-fit">
+                        <i class="fas fa-layer-group text-indigo-600 mb-1"></i>
+                        <span class="text-xs">Layers</span>
+                    </button>
+                    <button class="flex flex-col items-center px-3 py-2 rounded-lg hover:bg-gray-100 transition min-w-fit">
+                        <i class="fas fa-text-height text-indigo-600 mb-1"></i>
+                        <span class="text-xs">Text</span>
+                    </button>
+                    <button class="flex flex-col items-center px-3 py-2 rounded-lg hover:bg-gray-100 transition min-w-fit">
+                        <i class="fas fa-music text-indigo-600 mb-1"></i>
+                        <span class="text-xs">Audio</span>
+                    </button>
+                    <button class="flex flex-col items-center px-3 py-2 rounded-lg hover:bg-gray-100 transition min-w-fit">
+                        <i class="fas fa-sliders-h text-indigo-600 mb-1"></i>
+                        <span class="text-xs">Effects</span>
+                    </button>
+                    <button class="flex flex-col items-center px-3 py-2 rounded-lg hover:bg-gray-100 transition min-w-fit">
+                        <i class="fas fa-transition text-indigo-600 mb-1"></i>
+                        <span class="text-xs">Transitions</span>
+                    </button>
+                    <button class="flex flex-col items-center px-3 py-2 rounded-lg hover:bg-gray-100 transition min-w-fit">
+                        <i class="fas fa-robot text-indigo-600 mb-1"></i>
+                        <span class="text-xs">AI Enhance</span>
+                    </button>
+                </div>
+            </div>
+        </section>
+        <!-- AI Assistant Section -->
+        <section class="lg:w-96 flex flex-col">
+            <div class="flex justify-between items-center mb-4">
+                <h2 class="text-xl font-semibold text-gray-800">AI Video Assistant</h2>
+                <button class="text-indigo-600 hover:text-indigo-800 transition">
+                    <i class="fas fa-ellipsis-h"></i>
+                </button>
+            </div>
+            <div class="bg-white rounded-xl shadow-md flex-1 flex flex-col">
+                <!-- Chat Messages -->
+                <div class="flex-1 p-4 overflow-y-auto space-y-4" id="chat-messages">
+                    <div class="chat-message-ai p-3 max-w-xs">
+                        <div class="flex items-center mb-1">
+                            <div class="w-6 h-6 rounded-full bg-purple-200 flex items-center justify-center mr-2">
+                                <i class="fas fa-robot text-purple-600 text-xs"></i>
+                            </div>
+                            <span class="font-medium text-sm">VidGenAI</span>
+                        </div>
+                        <p class="text-sm">Hi there! I'm your AI video assistant. How can I help you with your video project today?</p>
+                    </div>
+                    <div class="flex justify-end">
+                        <div class="chat-message-user p-3 max-w-xs">
+                            <p class="text-sm">Can you suggest a good intro for my tech tutorial?</p>
+                        </div>
+                    </div>
+                    <div class="chat-message-ai p-3 max-w-xs">
+                        <div class="flex items-center mb-1">
+                            <div class="w-6 h-6 rounded-full bg-purple-200 flex items-center justify-center mr-2">
+                                <i class="fas fa-robot text-purple-600 text-xs"></i>
+                            </div>
+                            <span class="font-medium text-sm">VidGenAI</span>
+                        </div>
+                        <p class="text-sm mb-2">Here's a suggested intro script:</p>
+                        <p class="text-sm italic mb-2">"Welcome to today's tutorial where we'll explore the latest in AI technology. Whether you're a beginner or an expert, by the end of this video you'll have mastered..."</p>
+                        <p class="text-sm">Would you like me to generate a voiceover for this?</p>
+                    </div>
+                </div>
+                <!-- Chat Input -->
+                <div class="p-4 border-t">
+                    <div class="flex items-center space-x-2">
+                        <button class="w-10 h-10 rounded-full bg-gray-100 flex items-center justify-center hover:bg-gray-200 transition">
+                            <i class="fas fa-plus text-gray-600"></i>
+                        </button>
+                        <div class="flex-1 relative">
+                            <input type="text" placeholder="Ask the AI assistant..."
+                                   class="w-full px-4 py-2 rounded-full border border-gray-300 focus:outline-none focus:ring-2 focus:ring-indigo-500 focus:border-transparent">
+                            <button class="absolute right-2 top-1/2 transform -translate-y-1/2 text-indigo-600 hover:text-indigo-800">
+                                <i class="fas fa-paper-plane"></i>
+                            </button>
+                        </div>
+                    </div>
+                    <div class="mt-2 text-xs text-gray-500 text-center">
+                        VidGenAI can help with scripts, edits, and creative ideas
+                    </div>
+                </div>
+            </div>
+            <!-- AI Quick Actions -->
+            <div class="mt-4 bg-white rounded-xl shadow-md p-4">
+                <h3 class="font-medium text-gray-700 mb-3">Quick AI Actions</h3>
+                <div class="grid grid-cols-2 gap-2">
+                    <button class="text-left p-2 rounded-lg hover:bg-gray-100 transition text-sm">
+                        <i class="fas fa-magic text-indigo-600 mr-2"></i> Auto-edit
+                    </button>
+                    <button class="text-left p-2 rounded-lg hover:bg-gray-100 transition text-sm">
+                        <i class="fas fa-closed-captioning text-indigo-600 mr-2"></i> Generate captions
+                    </button>
+                    <button class="text-left p-2 rounded-lg hover:bg-gray-100 transition text-sm">
+                        <i class="fas fa-music text-indigo-600 mr-2"></i> Add background music
+                    </button>
+                    <button class="text-left p-2 rounded-lg hover:bg-gray-100 transition text-sm">
+                        <i class="fas fa-lightbulb text-indigo-600 mr-2"></i> Creative suggestions
+                    </button>
+                </div>
+            </div>
+        </section>
+    </main>
+    <script>
+        // Simulate AI response
+        document.querySelector('.fa-paper-plane').addEventListener('click', function() {
+            const input = document.querySelector('input[type="text"]');
+            if (input.value.trim() === '') return;
+            // Add user message
+            const userMessage = document.createElement('div');
+            userMessage.className = 'flex justify-end';
+            userMessage.innerHTML = `
+                <div class="chat-message-user p-3 max-w-xs">
+                    <p class="text-sm">${input.value}</p>
+                </div>
+            `;
+            document.getElementById('chat-messages').appendChild(userMessage);
+            // Clear input
+            const userQuery = input.value;
+            input.value = '';
+            // Simulate AI thinking
+            setTimeout(() => {
+                // Add AI response
+                const aiResponse = document.createElement('div');
+                aiResponse.className = 'chat-message-ai p-3 max-w-xs';
+                aiResponse.innerHTML = `
+                    <div class="flex items-center mb-1">
+                        <div class="w-6 h-6 rounded-full bg-purple-200 flex items-center justify-center mr-2">
+                            <i class="fas fa-robot text-purple-600 text-xs"></i>
+                        </div>
+                        <span class="font-medium text-sm">VidGenAI</span>
+                    </div>
+                    <p class="text-sm">${getAIResponse(userQuery)}</p>
+                `;
+                document.getElementById('chat-messages').appendChild(aiResponse);
+                // Scroll to bottom
+                document.getElementById('chat-messages').scrollTop = document.getElementById('chat-messages').scrollHeight;
+            }, 1000);
+        });
+        // Simple AI response logic
+        function getAIResponse(query) {
+            const responses = [
+                "I can help you with that video edit. Would you like me to automatically adjust the lighting and colors?",
+                "For that type of content, I recommend using our 'Tech Explainer' template. Would you like me to apply it?",
+                "Here's a suggested script for your introduction: 'In today's fast-paced digital world, understanding this technology is crucial...'",
+                "I've analyzed your footage and suggest trimming the first 5 seconds for better pacing.",
+                "Your video could benefit from some background music. I've selected 3 options that would match well.",
+                "Based on your content, these are the optimal export settings: 1080p at 30fps with H.264 compression."
+            ];
+            return responses[Math.floor(Math.random() * responses.length)];
+        }
+        // Simulate recording progress
+        setInterval(() => {
+            const progress = document.querySelector('.timeline-progress');
+            const currentWidth = parseFloat(progress.style.width || '0');
+            if (currentWidth < 100) {
+                progress.style.width = (currentWidth + 0.5) + '%';
+            }
+        }, 100);
+    </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=karhar92/video" style="color: #fff;text-decoration: underline;" target="_blank" >Remix</a></p></body>
+</html>