Update index.html

index.html

@@ -4,27 +4,25 @@
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
     <title>مولد ویدیو با Hugging Face</title>
-    <script src="https://cdn.jsdelivr.net/npm/@huggingface/inference@2.7.0/dist/huggingface-inference.min.js"></script>
     <style>
-        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;500;700&display=swap');
-
         :root {
-            --primary-color: #3b82f6;
-            --secondary-color: #1f2937;
-            --background-color: #f9fafb;
-            --text-color: #374151;
-            --card-bg: #ffffff;
-            --border-color: #e5e7eb;
-            --success-color: #10b981;
-            --error-color: #ef4444;
+            --bg-color: #121212;
+            --surface-color: #1e1e1e;
+            --primary-color: #03dac6;
+            --primary-variant-color: #3700b3;
+            --on-bg-color: #e0e0e0;
+            --on-surface-color: #ffffff;
+            --error-color: #cf6679;
         }
 
+        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@400;700&display=swap');
+
         body {
             font-family: 'Vazirmatn', sans-serif;
-            background-color: var(--background-color);
-            color: var(--text-color);
+            background-color: var(--bg-color);
+            color: var(--on-bg-color);
             margin: 0;
-            padding: 2rem;
+            padding: 20px;
             display: flex;
             justify-content: center;
             align-items: flex-start;
@@ -34,79 +32,88 @@
         .container {
             width: 100%;
             max-width: 800px;
-            background: var(--card-bg);
+            background-color: var(--surface-color);
             border-radius: 12px;
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
-            padding: 2rem;
-            box-sizing: border-box;
+            padding: 25px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
         }
 
         h1 {
-            color: var(--secondary-color);
             text-align: center;
-            margin-bottom: 2rem;
+            color: var(--on-surface-color);
+            margin-bottom: 10px;
+        }
+
+        p.subtitle {
+            text-align: center;
+            margin-top: 0;
+            margin-bottom: 25px;
+            color: #aaa;
+        }
+
+        .token-section {
+            margin-bottom: 25px;
         }
 
-        .input-group {
-            margin-bottom: 1.5rem;
+        .form-group {
+            margin-bottom: 20px;
         }
 
-        .input-group label {
+        label {
             display: block;
-            margin-bottom: 0.5rem;
-            font-weight: 500;
+            margin-bottom: 8px;
+            font-weight: bold;
+            font-size: 1rem;
         }
 
-        .input-group input[type="text"],
-        .input-group input[type="password"],
-        .input-group textarea {
+        input[type="text"],
+        input[type="password"],
+        textarea {
             width: 100%;
-            padding: 0.75rem;
-            border: 1px solid var(--border-color);
+            padding: 12px;
+            background-color: #2c2c2c;
+            border: 1px solid #444;
             border-radius: 8px;
-            font-family: inherit;
+            color: var(--on-bg-color);
             font-size: 1rem;
             box-sizing: border-box;
-            transition: border-color 0.2s, box-shadow 0.2s;
+            transition: border-color 0.3s, box-shadow 0.3s;
         }
-        
-        .input-group input:focus, .input-group textarea:focus {
+
+        input[type="text"]:focus,
+        input[type="password"]:focus,
+        textarea:focus {
             outline: none;
             border-color: var(--primary-color);
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.3);
+            box-shadow: 0 0 0 3px rgba(3, 218, 198, 0.2);
+        }
+        
+        input::placeholder, textarea::placeholder {
+            color: #777;
         }
 
         .tabs {
             display: flex;
-            border-bottom: 1px solid var(--border-color);
-            margin-bottom: 1.5rem;
+            border-bottom: 1px solid #444;
+            margin-bottom: 20px;
         }
 
         .tab-button {
-            padding: 1rem 1.5rem;
-            border: none;
-            background: none;
+            padding: 10px 20px;
             cursor: pointer;
+            border: none;
+            background-color: transparent;
+            color: #aaa;
             font-size: 1rem;
-            font-family: inherit;
-            font-weight: 500;
-            position: relative;
-            color: #6b7280;
-            transition: color 0.2s;
+            font-family: 'Vazirmatn', sans-serif;
+            font-weight: bold;
+            border-bottom: 3px solid transparent;
+            transition: color 0.3s, border-color 0.3s;
         }
 
         .tab-button.active {
             color: var(--primary-color);
-        }
-
-        .tab-button.active::after {
-            content: '';
-            position: absolute;
-            bottom: -1px;
-            left: 0;
-            right: 0;
-            height: 2px;
-            background-color: var(--primary-color);
+            border-bottom-color: var(--primary-color);
         }
 
         .tab-content {
@@ -117,292 +124,298 @@
             display: block;
         }
 
-        .custom-file-upload {
-            border: 1px solid var(--border-color);
-            display: inline-block;
-            padding: 0.75rem 1.25rem;
-            cursor: pointer;
-            border-radius: 8px;
-            background-color: #f9fafb;
-            text-align: center;
-            width: 100%;
-            box-sizing: border-box;
-        }
-        .custom-file-upload:hover {
-            background-color: #f3f4f6;
-        }
-        
-        #file-name {
-            margin-top: 0.5rem;
-            font-style: italic;
-            color: #6b7280;
-        }
-        
-        input[type="file"] {
-            display: none;
-        }
-
-        .btn {
-            display: block;
-            width: 100%;
-            padding: 0.85rem;
+        button {
             background-color: var(--primary-color);
-            color: white;
+            color: #000;
             border: none;
+            padding: 12px 20px;
             border-radius: 8px;
-            font-size: 1.1rem;
-            font-weight: 700;
+            font-size: 1rem;
+            font-weight: bold;
+            font-family: 'Vazirmatn', sans-serif;
             cursor: pointer;
-            transition: background-color 0.2s, transform 0.1s;
+            transition: background-color 0.3s, transform 0.1s;
+            width: 100%;
         }
 
-        .btn:hover:not(:disabled) {
-            background-color: #2563eb;
+        button:hover:not(:disabled) {
+            background-color: #03c0b1;
+        }
+        
+        button:active:not(:disabled) {
+            transform: scale(0.98);
         }
 
-        .btn:disabled {
-            background-color: #9ca3af;
+        button:disabled {
+            background-color: #555;
+            color: #999;
             cursor: not-allowed;
         }
-        
-        .output-container {
-            margin-top: 2rem;
-            padding-top: 2rem;
-            border-top: 1px solid var(--border-color);
-            text-align: center;
-        }
-        
-        #result-video {
-            width: 100%;
-            max-width: 500px;
+
+        .result-container {
+            margin-top: 25px;
+            padding: 15px;
+            background-color: #2c2c2c;
             border-radius: 8px;
-            margin: 1rem auto;
-            display: none;
-            border: 1px solid var(--border-color);
+            min-height: 50px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
-        
-        #download-link {
-            display: none;
-            margin-top: 1rem;
-            padding: 0.75rem 1.5rem;
-            background-color: var(--success-color);
-            color: white;
-            text-decoration: none;
+
+        video, img#imagePreview {
+            max-width: 100%;
             border-radius: 8px;
-            font-weight: 500;
-        }
-        #download-link:hover {
-            background-color: #059669;
         }
         
+        #imagePreview {
+            max-height: 250px;
+        }
+
         .loader {
-            border: 5px solid #f3f3f3;
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid var(--primary-color);
             border-radius: 50%;
-            border-top: 5px solid var(--primary-color);
-            width: 50px;
-            height: 50px;
+            width: 30px;
+            height: 30px;
             animation: spin 1s linear infinite;
-            margin: 1rem auto;
-            display: none;
         }
 
         @keyframes spin {
             0% { transform: rotate(0deg); }
             100% { transform: rotate(360deg); }
         }
-        
-        #error-message {
+
+        .status-message {
+            margin-top: 15px;
+            text-align: center;
+            color: #ccc;
+        }
+
+        .error-message {
             color: var(--error-color);
-            margin-top: 1rem;
-            font-weight: 500;
+            font-weight: bold;
+        }
+        
+        input[type="file"] {
             display: none;
         }
 
+        .file-label {
+            display: inline-block;
+            padding: 10px 15px;
+            background-color: #333;
+            border: 1px dashed #666;
+            border-radius: 8px;
+            cursor: pointer;
+            text-align: center;
+            width: 100%;
+            box-sizing: border-box;
+            transition: background-color 0.3s;
+        }
+        .file-label:hover {
+            background-color: #444;
+        }
+
     </style>
 </head>
 <body>
 
     <div class="container">
-        <h1>مولد ویدیو با AI</h1>
+        <h1>مولد ویدیو با Hugging Face</h1>
+        <p class="subtitle">ویدیوهای خلاقانه از متن یا تصویر بسازید</p>
 
-        <div class="input-group">
-            <label for="hf-token">توکن Hugging Face شما</label>
-            <input type="password" id="hf-token" placeholder="hf_...">
+        <div class="token-section form-group">
+            <label for="hfToken">کلید توکن Hugging Face</label>
+            <input type="password" id="hfToken" placeholder="توکن خود را اینجا وارد کنید (مثال: hf_...)">
         </div>
 
         <div class="tabs">
-            <button class="tab-button active" onclick="openTab(event, 'textToVideo')">ساخت ویدیو از متن</button>
-            <button class="tab-button" onclick="openTab(event, 'imageToVideo')">ساخت ویدیو از تصویر</button>
+            <button class="tab-button active" onclick="openTab('textToVideo')">ساخت ویدیو از متن</button>
+            <button class="tab-button" onclick="openTab('imageToVideo')">ساخت ویدیو از تصویر</button>
         </div>
 
-        <!-- Tab: Text to Video -->
+        <!-- Tab Content: Text to Video -->
         <div id="textToVideo" class="tab-content active">
-            <div class="input-group">
-                <label for="text-prompt">توصیف ویدیو (Prompt)</label>
-                <textarea id="text-prompt" rows="3" placeholder="مثال: A young man walking on the street"></textarea>
+            <div class="form-group">
+                <label for="textPrompt">توصیف ویدیو (Prompt)</label>
+                <textarea id="textPrompt" rows="4" placeholder="مثال: A young man walking on the street"></textarea>
+            </div>
+            <button id="generateTextBtn">ساخت ویدیو</button>
+            <div class="result-container" id="textResultContainer">
+                <span>نتیجه در اینجا نمایش داده می‌شود</span>
             </div>
-            <button id="generate-text-btn" class="btn">تولید ویدیو</button>
+            <div class="status-message" id="textStatus"></div>
         </div>
 
-        <!-- Tab: Image to Video -->
+        <!-- Tab Content: Image to Video -->
         <div id="imageToVideo" class="tab-content">
-            <div class="input-group">
-                <label for="image-file">تصویر ورودی را انتخاب کنید</label>
-                 <label for="image-file" class="custom-file-upload">انتخاب فایل</label>
-                <input type="file" id="image-file" accept="image/png, image/jpeg">
-                <div id="file-name">فایلی انتخاب نشده است</div>
+            <div class="form-group">
+                <label for="imageFile">انتخاب تصویر</label>
+                <input type="file" id="imageFile" accept="image/*">
+                <label for="imageFile" class="file-label">برای انتخاب تصویر کلیک کنید</label>
             </div>
-            <div class="input-group">
-                <label for="image-prompt">دستور برای متحرک‌سازی تصویر (Prompt)</label>
-                <input type="text" id="image-prompt" placeholder="مثال: The cat starts to dance">
+             <div class="form-group" id="imagePreviewContainer" style="display: none;">
+                <label>پیش‌نمایش تصویر</label>
+                <div class="result-container">
+                    <img id="imagePreview" src="" alt="Image Preview">
+                </div>
             </div>
-            <button id="generate-image-btn" class="btn">تولید ویدیو</button>
-        </div>
-        
-        <!-- Output Area -->
-        <div class="output-container">
-            <div id="loader" class="loader"></div>
-            <div id="error-message"></div>
-            <video id="result-video" controls></video>
-            <a id="download-link" href="#" download="generated_video.mp4">دانلود ویدیو</a>
+            <div class="form-group">
+                <label for="imagePrompt">توصیف حرکت (Prompt)</label>
+                <input type="text" id="imagePrompt" placeholder="مثال: The cat starts to dance">
+            </div>
+            <button id="generateImageBtn">ساخت ویدیو</button>
+            <div class="result-container" id="imageResultContainer">
+                <span>نتیجه در اینجا نمایش داده می‌شود</span>
+            </div>
+            <div class="status-message" id="imageStatus"></div>
         </div>
-
     </div>
 
-    <script>
-        const { HfInference } = HuggingFace;
+    <script type="module">
+        // Import the HfInference class from the CDN
+        import { HfInference } from "https://cdn.jsdelivr.net/npm/@huggingface/inference@2.7.0/+esm";
 
         // DOM Elements
-        const hfTokenInput = document.getElementById('hf-token');
-        const loader = document.getElementById('loader');
-        const errorMessage = document.getElementById('error-message');
-        const resultVideo = document.getElementById('result-video');
-        const downloadLink = document.getElementById('download-link');
+        const hfTokenInput = document.getElementById('hfToken');
         
-        // Text to Video Elements
-        const textPromptInput = document.getElementById('text-prompt');
-        const generateTextBtn = document.getElementById('generate-text-btn');
+        // Text-to-Video elements
+        const textPrompt = document.getElementById('textPrompt');
+        const generateTextBtn = document.getElementById('generateTextBtn');
+        const textResultContainer = document.getElementById('textResultContainer');
+        const textStatus = document.getElementById('textStatus');
+
+        // Image-to-Video elements
+        const imageFile = document.getElementById('imageFile');
+        const imagePrompt = document.getElementById('imagePrompt');
+        const generateImageBtn = document.getElementById('generateImageBtn');
+        const imageResultContainer = document.getElementById('imageResultContainer');
+        const imageStatus = document.getElementById('imageStatus');
+        const imagePreviewContainer = document.getElementById('imagePreviewContainer');
+        const imagePreview = document.getElementById('imagePreview');
         
-        // Image to Video Elements
-        const imageFileInput = document.getElementById('image-file');
-        const fileNameDisplay = document.getElementById('file-name');
-        const imagePromptInput = document.getElementById('image-prompt');
-        const generateImageBtn = document.getElementById('generate-image-btn');
-
-        // Tab switching logic
-        function openTab(evt, tabName) {
-            let i, tabcontent, tablinks;
-            tabcontent = document.getElementsByClassName("tab-content");
-            for (i = 0; i < tabcontent.length; i++) {
-                tabcontent[i].style.display = "none";
-            }
-            tablinks = document.getElementsByClassName("tab-button");
-            for (i = 0; i < tablinks.length; i++) {
-                tablinks[i].className = tablinks[i].className.replace(" active", "");
-            }
-            document.getElementById(tabName).style.display = "block";
-            evt.currentTarget.className += " active";
-        }
+        let hf;
+
+        // --- Tab Management ---
+        window.openTab = function(tabName) {
+            const tabContents = document.querySelectorAll('.tab-content');
+            tabContents.forEach(content => content.classList.remove('active'));
 
-        // Display selected file name
-        imageFileInput.addEventListener('change', () => {
-            if (imageFileInput.files.length > 0) {
-                fileNameDisplay.textContent = imageFileInput.files[0].name;
+            const tabButtons = document.querySelectorAll('.tab-button');
+            tabButtons.forEach(button => button.classList.remove('active'));
+
+            document.getElementById(tabName).classList.add('active');
+            event.currentTarget.classList.add('active');
+        }
+        
+        // --- Image Preview ---
+        imageFile.addEventListener('change', () => {
+            const file = imageFile.files[0];
+            if (file) {
+                const reader = new FileReader();
+                reader.onload = (e) => {
+                    imagePreview.src = e.target.result;
+                    imagePreviewContainer.style.display = 'block';
+                };
+                reader.readAsDataURL(file);
             } else {
-                fileNameDisplay.textContent = 'فایلی انتخاب نشده است';
+                 imagePreviewContainer.style.display = 'none';
             }
         });
-        
-        function resetOutput() {
-            loader.style.display = 'none';
-            errorMessage.style.display = 'none';
-            resultVideo.style.display = 'none';
-            downloadLink.style.display = 'none';
-            resultVideo.src = '';
-            downloadLink.href = '#';
-        }
-
-        function handleApiCall(button, apiFunction) {
-            button.disabled = true;
-            resetOutput();
-            
+
+        // --- Helper Functions ---
+        function getHfClient() {
             const token = hfTokenInput.value.trim();
             if (!token) {
-                errorMessage.textContent = 'لطفاً توکن Hugging Face خود را وارد کنید.';
-                errorMessage.style.display = 'block';
-                button.disabled = false;
-                return;
+                alert('لطفاً کلید توکن Hugging Face خود را وارد کنید.');
+                return null;
             }
-            
-            loader.style.display = 'block';
-            
-            apiFunction(token)
-                .then(videoBlob => {
-                    const videoUrl = URL.createObjectURL(videoBlob);
-                    resultVideo.src = videoUrl;
-                    downloadLink.href = videoUrl;
-                    
-                    resultVideo.style.display = 'block';
-                    downloadLink.style.display = 'inline-block';
-                })
-                .catch(err => {
-                    console.error(err);
-                    errorMessage.textContent = `خطایی رخ داد: ${err.message}`;
-                    errorMessage.style.display = 'block';
-                })
-                .finally(() => {
-                    loader.style.display = 'none';
-                    button.disabled = false;
-                });
+            return new HfInference(token);
         }
+
+        function showLoading(container, statusEl, buttonEl) {
+            container.innerHTML = '<div class="loader"></div>';
+            statusEl.className = 'status-message';
+            statusEl.textContent = 'در حال ساخت ویدیو... این فرآیند ممکن است چند دقیقه طول بکشد. لطفاً صبور باشید.';
+            buttonEl.disabled = true;
+        }
+
+        function showResult(container, statusEl, buttonEl, videoBlob) {
+            const videoUrl = URL.createObjectURL(videoBlob);
+            container.innerHTML = `<video controls src="${videoUrl}"></video>`;
+            statusEl.textContent = 'ویدیو با موفقیت ساخته شد!';
+            buttonEl.disabled = false;
+        }
+
+        function showError(container, statusEl, buttonEl, error) {
+            container.innerHTML = '<span>خطا در ساخت ویدیو</span>';
+            statusEl.className = 'status-message error-message';
+            statusEl.textContent = `خطا: ${error.message}`;
+            buttonEl.disabled = false;
+        }
+
+        // --- Event Listeners for Generation ---
         
-        // --- Event Listeners ---
-        
-        generateTextBtn.addEventListener('click', () => {
-            const prompt = textPromptInput.value.trim();
+        // Text-to-Video Generation
+        generateTextBtn.addEventListener('click', async () => {
+            const hf = getHfClient();
+            if (!hf) return;
+            
+            const prompt = textPrompt.value.trim();
             if (!prompt) {
-                errorMessage.textContent = 'لطفاً توصیف ویدیو را وارد کنید.';
-                errorMessage.style.display = 'block';
+                alert('لطفاً توصیف ویدیو را وارد کنید.');
                 return;
             }
-            
-            handleApiCall(generateTextBtn, async (token) => {
-                const hf = new HfInference(token);
-                return await hf.textToVideo({
+
+            showLoading(textResultContainer, textStatus, generateTextBtn);
+
+            try {
+                const videoBlob = await hf.textToVideo({
                     provider: "fal-ai",
                     model: "akhaliq/veo3.1-fast",
                     inputs: prompt,
                 });
-            });
+                showResult(textResultContainer, textStatus, generateTextBtn, videoBlob);
+            } catch (error) {
+                console.error("Text-to-Video Error:", error);
+                showError(textResultContainer, textStatus, generateTextBtn, error);
+            }
         });
-        
-        generateImageBtn.addEventListener('click', () => {
-            const prompt = imagePromptInput.value.trim();
-            const imageFile = imageFileInput.files[0];
-            
-            if (!imageFile) {
-                errorMessage.textContent = 'لطفاً یک فایل تصویر انتخاب کنید.';
-                errorMessage.style.display = 'block';
+
+        // Image-to-Video Generation
+        generateImageBtn.addEventListener('click', async () => {
+            const hf = getHfClient();
+            if (!hf) return;
+
+            const file = imageFile.files[0];
+            if (!file) {
+                alert('لطفاً یک تصویر انتخاب کنید.');
                 return;
             }
+            
+            const prompt = imagePrompt.value.trim();
             if (!prompt) {
-                errorMessage.textContent = 'لطفاً دستور متحرک‌سازی را وارد کنید.';
-                errorMessage.style.display = 'block';
+                alert('لطفاً توصیف حرکت را وارد کنید.');
                 return;
             }
             
-            handleApiCall(generateImageBtn, async (token) => {
-                const hf = new HfInference(token);
-                return await hf.imageToVideo({
+            showLoading(imageResultContainer, imageStatus, generateImageBtn);
+
+            try {
+                const videoBlob = await hf.imageToVideo({
                     provider: "fal-ai",
                     model: "akhaliq/veo3.1-fast-image-to-video",
-                    inputs: imageFile, // The library can handle the File object directly
+                    inputs: file, // The library directly accepts the File object from the input
                     parameters: { prompt: prompt },
                 });
-            });
+                showResult(imageResultContainer, imageStatus, generateImageBtn, videoBlob);
+            } catch (error) {
+                console.error("Image-to-Video Error:", error);
+                showError(imageResultContainer, imageStatus, generateImageBtn, error);
+            }
         });
 
     </script>
-
 </body>
 </html>