Spaces:

kevinsousa258gmailcom
/

avatarsync-studio

Running

App Files Files Community

kevinsousa258gmailcom commited on Sep 29, 2025

Commit

50e7e0d

verified ·

1 Parent(s): cb04dfe

Como que uso agora?

Browse files

Files changed (2) hide show

help.html +96 -0
index.html +17 -13

help.html ADDED Viewed

	@@ -0,0 +1,96 @@

+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Help - AvatarSync Studio</title>
+    <script src="https://cdn.tailwindcss.com"></script>
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+<body class="bg-gray-50 min-h-screen">
+    <div class="container mx-auto px-4 py-12 max-w-4xl">
+        <header class="text-center mb-12">
+            <h1 class="text-4xl font-bold text-gray-800 mb-2">How to Use AvatarSync Studio</h1>
+            <div class="flex justify-center mt-4">
+                <div class="w-16 h-1 bg-indigo-500 rounded-full"></div>
+            </div>
+        </header>
+        <div class="bg-white rounded-xl shadow-xl p-8 mb-8">
+            <div class="space-y-8">
+                <div class="flex items-start">
+                    <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3 mr-4">
+                        <i data-feather="upload" class="text-indigo-500 w-6 h-6"></i>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-semibold text-gray-800 mb-2">1. Upload Your Media</h3>
+                        <p class="text-gray-600">Start by uploading an image file for your avatar and an audio file that you want to sync with. Supported formats: JPG, PNG for images; MP3, WAV for audio.</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3 mr-4">
+                        <i data-feather="sliders" class="text-indigo-500 w-6 h-6"></i>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-semibold text-gray-800 mb-2">2. Customize Your Animation</h3>
+                        <p class="text-gray-600">Choose from different animation styles, adjust colors, and tweak motion intensity. Preview how your avatar will move in real-time.</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3 mr-4">
+                        <i data-feather="zap" class="text-indigo-500 w-6 h-6"></i>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-semibold text-gray-800 mb-2">3. Generate Your Avatar</h3>
+                        <p class="text-gray-600">Click the generate button to create your animated avatar. Processing time depends on the length of your audio.</p>
+                    </div>
+                </div>
+                <div class="flex items-start">
+                    <div class="flex-shrink-0 bg-indigo-100 rounded-lg p-3 mr-4">
+                        <i data-feather="download" class="text-indigo-500 w-6 h-6"></i>
+                    </div>
+                    <div>
+                        <h3 class="text-xl font-semibold text-gray-800 mb-2">4. Download & Share</h3>
+                        <p class="text-gray-600">Once processed, download your animated avatar as a video or GIF, or share it directly to social media platforms.</p>
+                    </div>
+                </div>
+            </div>
+        </div>
+        <div class="bg-white rounded-xl shadow-xl p-8">
+            <h2 class="text-2xl font-semibold text-gray-800 mb-4">Tips for Best Results</h2>
+            <ul class="space-y-3 text-gray-600">
+                <li class="flex items-start">
+                    <i data-feather="check" class="text-green-500 w-4 h-4 mr-2 mt-1"></i>
+                    <span>Use high-quality images (minimum 500x500 pixels) for clearer animations</span>
+                </li>
+                <li class="flex items-start">
+                    <i data-feather="check" class="text-green-500 w-4 h-4 mr-2 mt-1"></i>
+                    <span>For best lip-sync results, use clear vocal audio without background music</span>
+                </li>
+                <li class="flex items-start">
+                    <i data-feather="check" class="text-green-500 w-4 h-4 mr-2 mt-1"></i>
+                    <span>Experiment with different motion intensities to find your preferred style</span>
+                </li>
+                <li class="flex items-start">
+                    <i data-feather="check" class="text-green-500 w-4 h-4 mr-2 mt-1"></i>
+                    <span>Save your project if you want to make changes later</span>
+                </li>
+            </ul>
+        </div>
+        <div class="text-center mt-8">
+            <a href="index.html" class="inline-flex items-center text-indigo-500 hover:text-indigo-700 font-medium">
+                <i data-feather="arrow-left" class="w-4 h-4 mr-2"></i> Back to AvatarSync Studio
+            </a>
+        </div>
+    </div>
+    <script>
+        feather.replace();
+    </script>
+</body>
+</html>

index.html CHANGED Viewed

@@ -354,13 +354,15 @@
                                 </div>
                             </div>
                         </div>
-                        <div class="flex justify-center">
                             <button id="newProjectBtn" class="bg-white border border-indigo-500 text-indigo-500 hover:bg-indigo-50 px-6 py-2 rounded-lg flex items-center">
                                 <i data-feather="plus" class="w-4 h-4 mr-2"></i> Create New
                             </button>
                         </div>
-                    </div>
                 </div>
             </div>
         </div>
@@ -471,14 +473,13 @@
             // Clear buttons
             clearImageBtn.addEventListener('click', clearImage);
             clearAudioBtn.addEventListener('click', clearAudio);
-            // Navigation between steps
-            nextStep1Btn.addEventListener('click', goToStep2);
-            document.getElementById('backStep2Btn').addEventListener('click', goToStep1);
-            document.getElementById('nextStep2Btn').addEventListener('click', goToStep3);
-            document.getElementById('newProjectBtn').addEventListener('click', resetAll);
-            function preventDefaults(e) {
                 e.preventDefault();
                 e.stopPropagation();
             }
@@ -648,9 +649,12 @@
                     }
                 }, 200);
             }
             function resetAll() {
-                document.getElementById('step3').classList.add('hidden');
                 document.getElementById('step1').classList.remove('hidden');
                 document.getElementById('processingAnimation').classList.remove('hidden');
                 document.getElementById('resultSection').classList.add('hidden');

                                 </div>
                             </div>
                         </div>
+                        <div class="flex justify-center space-x-4">
                             <button id="newProjectBtn" class="bg-white border border-indigo-500 text-indigo-500 hover:bg-indigo-50 px-6 py-2 rounded-lg flex items-center">
                                 <i data-feather="plus" class="w-4 h-4 mr-2"></i> Create New
                             </button>
+                            <button id="helpBtn" class="bg-indigo-500 hover:bg-indigo-600 text-white px-6 py-2 rounded-lg flex items-center">
+                                <i data-feather="help-circle" class="w-4 h-4 mr-2"></i> How to Use
+                            </button>
                         </div>
+</div>
                 </div>
             </div>
         </div>
             // Clear buttons
             clearImageBtn.addEventListener('click', clearImage);
             clearAudioBtn.addEventListener('click', clearAudio);
+        // Navigation between steps
+        nextStep1Btn.addEventListener('click', goToStep2);
+        document.getElementById('backStep2Btn').addEventListener('click', goToStep1);
+        document.getElementById('nextStep2Btn').addEventListener('click', goToStep3);
+        document.getElementById('newProjectBtn').addEventListener('click', resetAll);
+        document.getElementById('helpBtn').addEventListener('click', showHelp);
+function preventDefaults(e) {
                 e.preventDefault();
                 e.stopPropagation();
             }
                     }
                 }, 200);
             }
+            function showHelp() {
+                alert("How to use AvatarSync Studio:\n\n1. Upload an image (your avatar) and an audio file\n2. Customize the animation style and colors\n3. Generate your animated avatar\n4. Download or share your creation!");
+            }
             function resetAll() {
+document.getElementById('step3').classList.add('hidden');
                 document.getElementById('step1').classList.remove('hidden');
                 document.getElementById('processingAnimation').classList.remove('hidden');
                 document.getElementById('resultSection').classList.add('hidden');