Spaces:

Quantumbraid
/

wandererester

Paused

App Files Files Community

Quantumbraid commited on Dec 31, 2025

Commit

6d4e0a9

verified ·

1 Parent(s): 5fb3ba7

Create index.html

Browse files

Files changed (1) hide show

index.html +101 -0

index.html ADDED Viewed

	@@ -0,0 +1,101 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>WANderFrame - LoRA Linker</title>
+    <link rel="stylesheet" href="style.css">
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://cdn.jsdelivr.net/npm/feather-icons/dist/feather.min.js"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-900 text-gray-100 min-h-screen">
+    <custom-navbar></custom-navbar>
+    <main class="container mx-auto px-4 py-8">
+        <div class="max-w-4xl mx-auto">
+            <div class="text-center mb-12">
+                <h1 class="text-4xl md:text-5xl font-bold mb-4 bg-gradient-to-r from-purple-500 to-pink-500 bg-clip-text text-transparent">WANderFrame</h1>
+                <p class="text-xl text-gray-400">Seamless LoRA integration with frame-perfect video generation</p>
+            </div>
+            <div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8">
+                <h2 class="text-2xl font-semibold mb-4 flex items-center">
+                    <i data-feather="link" class="mr-2"></i> LoRA URL Configuration
+                </h2>
+                <div class="space-y-4">
+                    <div>
+                        <label class="block text-gray-400 mb-2">LoRA URL</label>
+                        <input type="text" class="w-full bg-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:outline-none" placeholder="https://example.com/lora.safetensors">
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-2">Strength</label>
+                        <input type="range" min="0" max="1" step="0.1" value="0.7" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
+                    </div>
+                </div>
+            </div>
+            <div class="bg-gray-800 rounded-xl p-6 shadow-lg mb-8">
+                <h2 class="text-2xl font-semibold mb-4 flex items-center">
+                    <i data-feather="film" class="mr-2"></i> FFLF Configuration
+                </h2>
+                <div class="space-y-4">
+                    <div class="flex items-center">
+                        <input type="checkbox" id="enable-fflf" class="w-5 h-5 text-purple-500 rounded focus:ring-purple-500" checked>
+                        <label for="enable-fflf" class="ml-2 text-gray-400">Enable First Frame Last Frame</label>
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-2">Frame Blend Strength</label>
+                        <input type="range" min="0" max="1" step="0.1" value="0.5" class="w-full h-2 bg-gray-700 rounded-lg appearance-none cursor-pointer">
+                    </div>
+                </div>
+            </div>
+            <div class="bg-gray-800 rounded-xl p-6 shadow-lg">
+                <h2 class="text-2xl font-semibold mb-4 flex items-center">
+                    <i data-feather="settings" class="mr-2"></i> Generation Parameters
+                </h2>
+                <div class="grid grid-cols-1 md:grid-cols-2 gap-4">
+                    <div>
+                        <label class="block text-gray-400 mb-2">Seed</label>
+                        <input type="number" class="w-full bg-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:outline-none" value="-1">
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-2">Steps</label>
+                        <input type="number" class="w-full bg-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:outline-none" value="30">
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-2">CFG Scale</label>
+                        <input type="number" step="0.5" class="w-full bg-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:outline-none" value="7.5">
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-2">Width</label>
+                        <input type="number" class="w-full bg-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:outline-none" value="512">
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-2">Height</label>
+                        <input type="number" class="w-full bg-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:outline-none" value="512">
+                    </div>
+                    <div>
+                        <label class="block text-gray-400 mb-2">Frames</label>
+                        <input type="number" class="w-full bg-gray-700 rounded-lg px-4 py-2 focus:ring-2 focus:ring-purple-500 focus:outline-none" value="24">
+                    </div>
+                </div>
+            </div>
+            <div class="mt-8 flex justify-center">
+                <button class="bg-gradient-to-r from-purple-600 to-pink-600 hover:from-purple-700 hover:to-pink-700 text-white font-bold py-3 px-8 rounded-full text-lg transition-all duration-300 transform hover:scale-105 flex items-center">
+                    <i data-feather="play" class="mr-2"></i> Generate Video
+                </button>
+            </div>
+        </div>
+    </main>
+    <custom-footer></custom-footer>
+    <script src="components/navbar.js"></script>
+    <script src="components/footer.js"></script>
+    <script src="script.js"></script>
+    <script>feather.replace();</script>
+</body>
+</html>