Spaces:

Ezmary
/

Ttr

Running

App Files Files Community

Ezmary commited on Oct 23, 2025

Commit

0d87ed4

verified ·

1 Parent(s): acdd6e6

Update index.html

Browse files

Files changed (1) hide show

index.html +300 -355

index.html CHANGED Viewed

@@ -3,67 +3,56 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>ساخت ویدیو با Aging Face API</title>
-    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
     <style>
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
         }
         body {
-            background: linear-gradient(135deg, #1a2a6c, #b21f1f, #fdbb2d);
-            color: #fff;
-            min-height: 100vh;
             padding: 20px;
         }
         .container {
-            max-width: 1200px;
-            margin: 0 auto;
         }
-        header {
             text-align: center;
-            padding: 30px 0;
-            margin-bottom: 30px;
-        }
-        header h1 {
-            font-size: 2.8rem;
             margin-bottom: 10px;
-            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
-        }
-        header p {
-            font-size: 1.2rem;
-            opacity: 0.9;
-            max-width: 700px;
-            margin: 0 auto;
-        }
-        .card {
-            background: rgba(255, 255, 255, 0.1);
-            backdrop-filter: blur(10px);
-            border-radius: 15px;
-            padding: 25px;
-            margin-bottom: 30px;
-            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
-            border: 1px solid rgba(255, 255, 255, 0.1);
         }
-        .card h2 {
-            font-size: 1.8rem;
-            margin-bottom: 20px;
-            display: flex;
-            align-items: center;
-            gap: 10px;
         }
-        .card h2 i {
-            color: #fdbb2d;
         }
         .form-group {
@@ -73,124 +62,123 @@
         label {
             display: block;
             margin-bottom: 8px;
-            font-weight: 600;
         }
-        input, textarea, select {
             width: 100%;
-            padding: 12px 15px;
-            border: none;
             border-radius: 8px;
-            background: rgba(255, 255, 255, 0.15);
-            color: white;
             font-size: 1rem;
-            transition: all 0.3s ease;
         }
-        input:focus, textarea:focus, select:focus {
             outline: none;
-            background: rgba(255, 255, 255, 0.25);
-            box-shadow: 0 0 0 2px #fdbb2d;
         }
         input::placeholder, textarea::placeholder {
-            color: rgba(255, 255, 255, 0.7);
         }
-        button {
-            background: linear-gradient(to right, #fdbb2d, #b21f1f);
-            color: white;
-            border: none;
-            padding: 14px 25px;
-            border-radius: 8px;
-            font-size: 1.1rem;
-            font-weight: 600;
-            cursor: pointer;
-            transition: all 0.3s ease;
             display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-            width: 100%;
         }
-        button:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
         }
-        button:disabled {
-            background: #6c757d;
-            cursor: not-allowed;
-            transform: none;
-            box-shadow: none;
         }
-        .file-input-container {
-            position: relative;
-            overflow: hidden;
-            display: inline-block;
-            width: 100%;
         }
-        .file-input-container input[type="file"] {
-            position: absolute;
-            left: 0;
-            top: 0;
-            opacity: 0;
-            width: 100%;
-            height: 100%;
-            cursor: pointer;
         }
-        .file-input-label {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            gap: 10px;
-            padding: 12px 15px;
-            background: rgba(255, 255, 255, 0.15);
             border-radius: 8px;
             cursor: pointer;
-            transition: all 0.3s ease;
         }
-        .file-input-label:hover {
-            background: rgba(255, 255, 255, 0.25);
         }
-        .preview-container {
-            margin-top: 20px;
-            text-align: center;
         }
-        .preview-container img, .preview-container video {
-            max-width: 100%;
-            max-height: 300px;
-            border-radius: 10px;
-            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3);
         }
         .result-container {
-            display: none;
-            margin-top: 30px;
-            text-align: center;
         }
-        .loading {
-            display: none;
-            text-align: center;
-            padding: 20px;
         }
-        .loading-spinner {
-            border: 5px solid rgba(255, 255, 255, 0.3);
             border-radius: 50%;
-            border-top: 5px solid #fdbb2d;
-            width: 50px;
-            height: 50px;
             animation: spin 1s linear infinite;
-            margin: 0 auto 15px;
         }
         @keyframes spin {
@@ -198,284 +186,241 @@
             100% { transform: rotate(360deg); }
         }
-        .tabs {
-            display: flex;
-            margin-bottom: 20px;
-            border-radius: 10px;
-            overflow: hidden;
-            background: rgba(0, 0, 0, 0.2);
-        }
-        .tab {
-            flex: 1;
             text-align: center;
-            padding: 15px;
-            cursor: pointer;
-            transition: all 0.3s ease;
-            font-weight: 600;
         }
-        .tab.active {
-            background: #fdbb2d;
-            color: #1a2a6c;
         }
-        .tab-content {
             display: none;
         }
-        .tab-content.active {
-            display: block;
-        }
-        .alert {
-            padding: 15px;
             border-radius: 8px;
-            margin-bottom: 20px;
-            display: none;
-        }
-        .alert-success {
-            background: rgba(40, 167, 69, 0.3);
-            border: 1px solid #28a745;
-        }
-        .alert-error {
-            background: rgba(220, 53, 69, 0.3);
-            border: 1px solid #dc3545;
-        }
-        footer {
             text-align: center;
-            margin-top: 40px;
-            padding: 20px;
-            font-size: 0.9rem;
-            opacity: 0.7;
         }
-        @media (max-width: 768px) {
-            header h1 {
-                font-size: 2.2rem;
-            }
-            .card {
-                padding: 20px;
-            }
         }
     </style>
 </head>
 <body>
     <div class="container">
-        <header>
-            <h1>ساخت ویدیو با Aging Face API</h1>
-            <p>با استفاده از این ابزار می‌توانید از متن یا تصویر، ویدیوهای جذاب ایجاد کنید</p>
-        </header>
-        <div class="card">
-            <div class="form-group">
-                <label for="api-key"><i class="fas fa-key"></i> کلید API Aging Face</label>
-                <input type="text" id="api-key" placeholder="کلید API خود را اینجا وارد کنید">
-            </div>
         </div>
-        <div class="card">
-            <div class="tabs">
-                <div class="tab active" data-tab="text-to-video">ساخت ویدیو از متن</div>
-                <div class="tab" data-tab="image-to-video">ساخت ویدیو از تصویر</div>
-            </div>
-            <div class="tab-content active" id="text-to-video">
-                <h2><i class="fas fa-font"></i> ساخت ویدیو از متن</h2>
-                <div class="form-group">
-                    <label for="text-input">متن خود را وارد کنید</label>
-                    <textarea id="text-input" rows="4" placeholder="مثلاً: یک مرد جوان در حال قدم زدن در خیابان"></textarea>
-                </div>
-                <button id="generate-from-text">
-                    <i class="fas fa-video"></i> تولید ویدیو
-                </button>
             </div>
-            <div class="tab-content" id="image-to-video">
-                <h2><i class="fas fa-image"></i> ساخت ویدیو از تصویر</h2>
-                <div class="form-group">
-                    <label for="image-input">تصویر خود را انتخاب کنید</label>
-                    <div class="file-input-container">
-                        <div class="file-input-label">
-                            <i class="fas fa-upload"></i>
-                            <span id="file-name">انتخاب فایل تصویر</span>
-                        </div>
-                        <input type="file" id="image-input" accept="image/*">
-                    </div>
-                </div>
-                <div class="form-group">
-                    <label for="image-prompt">توضیحات برای ویدیو</label>
-                    <input type="text" id="image-prompt" placeholder="مثلاً: گربه شروع به رقصیدن می‌کند">
-                </div>
-                <button id="generate-from-image">
-                    <i class="fas fa-video"></i> تولید ویدیو
-                </button>
             </div>
         </div>
-        <div class="alert alert-success" id="success-alert">
-            <i class="fas fa-check-circle"></i> ویدیو با موفقیت تولید شد!
-        </div>
-        <div class="alert alert-error" id="error-alert">
-            <i class="fas fa-exclamation-circle"></i> خطا در تولید ویدیو. لطفاً دوباره تلاش کنید.
-        </div>
-        <div class="loading" id="loading">
-            <div class="loading-spinner"></div>
-            <p>در حال تولید ویدیو، لطفاً منتظر بمانید...</p>
-        </div>
-        <div class="card result-container" id="result-container">
-            <h2><i class="fas fa-film"></i> ویدیو تولید شده</h2>
-            <div class="preview-container">
-                <video id="generated-video" controls>
-                    مرورگر شما از تگ ویدیو پشتیبانی نمی‌کند.
-                </video>
             </div>
-            <div class="form-group" style="margin-top: 20px;">
-                <button id="download-video">
-                    <i class="fas fa-download"></i> دانلود ویدیو
-                </button>
             </div>
         </div>
-        <footer>
-            <p>ساخته شده با ❤️ | از Aging Face API استفاده می‌کند</p>
-        </footer>
     </div>
-    <script>
-        // مدیریت تب‌ها
-        document.querySelectorAll('.tab').forEach(tab => {
-            tab.addEventListener('click', () => {
-                // حذف کلاس active از همه تب‌ها و محتواها
-                document.querySelectorAll('.tab').forEach(t => t.classList.remove('active'));
-                document.querySelectorAll('.tab-content').forEach(c => c.classList.remove('active'));
-                // اضافه کردن کلاس active به تب و محتوای انتخاب شده
-                tab.classList.add('active');
-                document.getElementById(tab.dataset.tab).classList.add('active');
-            });
         });
-        // نمایش نام فایل انتخاب شده
-        document.getElementById('image-input').addEventListener('change', function() {
-            const fileName = this.files[0] ? this.files[0].name : 'انتخاب فایل تصویر';
-            document.getElementById('file-name').textContent = fileName;
-        });
-        // مدیریت تولید ویدیو از متن
-        document.getElementById('generate-from-text').addEventListener('click', async function() {
-            const apiKey = document.getElementById('api-key').value.trim();
-            const textInput = document.getElementById('text-input').value.trim();
-            if (!apiKey) {
-                showAlert('error', 'لطفاً کلید API را وارد کنید.');
                 return;
             }
-            if (!textInput) {
-                showAlert('error', 'لطفاً متن خود را وارد کنید.');
-                return;
             }
-            await generateVideo('text', { text: textInput }, apiKey);
         });
-        // مدیریت تولید ویدیو از تصویر
-        document.getElementById('generate-from-image').addEventListener('click', async function() {
-            const apiKey = document.getElementById('api-key').value.trim();
-            const imageInput = document.getElementById('image-input');
-            const imagePrompt = document.getElementById('image-prompt').value.trim();
-            if (!apiKey) {
-                showAlert('error', 'لطفاً کلید API را وارد کنید.');
-                return;
-            }
-            if (!imageInput.files.length) {
-                showAlert('error', 'لطفاً یک تصویر انتخاب کنید.');
                 return;
             }
-            if (!imagePrompt) {
-                showAlert('error', 'لطفاً توضیحات برای ویدیو را وارد کنید.');
                 return;
             }
-            await generateVideo('image', {
-                image: imageInput.files[0],
-                prompt: imagePrompt
-            }, apiKey);
-        });
-        // مدیریت دانلود ویدیو
-        document.getElementById('download-video').addEventListener('click', function() {
-            const videoElement = document.getElementById('generated-video');
-            const videoSrc = videoElement.src;
-            if (videoSrc) {
-                const a = document.createElement('a');
-                a.href = videoSrc;
-                a.download = 'generated-video.mp4';
-                document.body.appendChild(a);
-                a.click();
-                document.body.removeChild(a);
-            }
-        });
-        // تابع برای نمایش آلرت
-        function showAlert(type, message) {
-            const alertElement = type === 'success'
-                ? document.getElementById('success-alert')
-                : document.getElementById('error-alert');
-            alertElement.innerHTML = `<i class="fas fa-${type === 'success' ? 'check' : 'exclamation'}-circle"></i> ${message}`;
-            alertElement.style.display = 'block';
-            setTimeout(() => {
-                alertElement.style.display = 'none';
-            }, 5000);
-        }
-        // تابع اصلی برای تولید ویدیو
-        async function generateVideo(type, data, apiKey) {
-            // نمایش حالت بارگذاری
-            document.getElementById('loading').style.display = 'block';
-            document.getElementById('result-container').style.display = 'none';
             try {
-                // در اینجا باید کد واقعی برای ارتباط با API نوشته شود
-                // این یک شبیه‌سازی است
-                // شبیه‌سازی تاخیر در تولید ویدیو
-                await new Promise(resolve => setTimeout(resolve, 3000));
-                // نمایش نتیجه
-                document.getElementById('loading').style.display = 'none';
-                document.getElementById('result-container').style.display = 'block';
-                // در اینجا باید ویدیوی تولید شده از API دریافت و نمایش داده شود
-                // برای نمونه، از یک ویدیوی نمونه استفاده می‌کنیم
-                document.getElementById('generated-video').src = 'https://sample-videos.com/video123/mp4/720/big_buck_bunny_720p_1mb.mp4';
-                showAlert('success', 'ویدیو با موفقیت تولید شد!');
             } catch (error) {
-                console.error('Error generating video:', error);
-                document.getElementById('loading').style.display = 'none';
-                showAlert('error', 'خطا در تولید ویدیو. لطفاً دوباره تلاش کنید.');
             }
-        }
     </script>
 </body>
 </html>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>مولد ویدیو با Hugging Face</title>
     <style>
+        :root {
+            --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(--bg-color);
+            color: var(--on-bg-color);
+            margin: 0;
             padding: 20px;
+            display: flex;
+            justify-content: center;
+            align-items: flex-start;
+            min-height: 100vh;
         }
         .container {
+            width: 100%;
+            max-width: 800px;
+            background-color: var(--surface-color);
+            border-radius: 12px;
+            padding: 25px;
+            box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
         }
+        h1 {
             text-align: center;
+            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;
         }
         .form-group {
         label {
             display: block;
             margin-bottom: 8px;
+            font-weight: bold;
+            font-size: 1rem;
         }
+        input[type="text"],
+        input[type="password"],
+        textarea {
             width: 100%;
+            padding: 12px;
+            background-color: #2c2c2c;
+            border: 1px solid #444;
             border-radius: 8px;
+            color: var(--on-bg-color);
             font-size: 1rem;
+            box-sizing: border-box;
+            transition: border-color 0.3s, box-shadow 0.3s;
         }
+        input[type="text"]:focus,
+        input[type="password"]:focus,
+        textarea:focus {
             outline: none;
+            border-color: var(--primary-color);
+            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 #444;
+            margin-bottom: 20px;
         }
+        .tab-button {
+            padding: 10px 20px;
+            cursor: pointer;
+            border: none;
+            background-color: transparent;
+            color: #aaa;
+            font-size: 1rem;
+            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);
+            border-bottom-color: var(--primary-color);
         }
+        .tab-content {
+            display: none;
         }
+        .tab-content.active {
+            display: block;
         }
+        button {
+            background-color: var(--primary-color);
+            color: #000;
+            border: none;
+            padding: 12px 20px;
             border-radius: 8px;
+            font-size: 1rem;
+            font-weight: bold;
+            font-family: 'Vazirmatn', sans-serif;
             cursor: pointer;
+            transition: background-color 0.3s, transform 0.1s;
+            width: 100%;
         }
+        button:hover:not(:disabled) {
+            background-color: #03c0b1;
         }
+        button:active:not(:disabled) {
+            transform: scale(0.98);
         }
+        button:disabled {
+            background-color: #555;
+            color: #999;
+            cursor: not-allowed;
         }
         .result-container {
+            margin-top: 25px;
+            padding: 15px;
+            background-color: #2c2c2c;
+            border-radius: 8px;
+            min-height: 50px;
+            display: flex;
+            justify-content: center;
+            align-items: center;
         }
+        video, img#imagePreview {
+            max-width: 100%;
+            border-radius: 8px;
+        }
+        #imagePreview {
+            max-height: 250px;
         }
+        .loader {
+            border: 4px solid #f3f3f3;
+            border-top: 4px solid var(--primary-color);
             border-radius: 50%;
+            width: 30px;
+            height: 30px;
             animation: spin 1s linear infinite;
         }
         @keyframes spin {
             100% { transform: rotate(360deg); }
         }
+        .status-message {
+            margin-top: 15px;
             text-align: center;
+            color: #ccc;
         }
+        .error-message {
+            color: var(--error-color);
+            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>مولد ویدیو با Hugging Face</h1>
+        <p class="subtitle">ویدیوهای خلاقانه از متن یا تصویر بسازید</p>
+        <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('textToVideo')">ساخت ویدیو از متن</button>
+            <button class="tab-button" onclick="openTab('imageToVideo')">ساخت ویدیو از تصویر</button>
+        </div>
+        <!-- Tab Content: Text to Video -->
+        <div id="textToVideo" class="tab-content active">
+            <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>
+            <div class="status-message" id="textStatus"></div>
         </div>
+        <!-- Tab Content: Image to Video -->
+        <div id="imageToVideo" class="tab-content">
+            <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="form-group" id="imagePreviewContainer" style="display: none;">
+                <label>پیش‌نمایش تصویر</label>
+                <div class="result-container">
+                    <img id="imagePreview" src="" alt="Image Preview">
+                </div>
             </div>
+            <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 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('hfToken');
+        // 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');
+        // --- Tab Management ---
+        window.openTab = function(tabName) {
+            const tabContents = document.querySelectorAll('.tab-content');
+            tabContents.forEach(content => content.classList.remove('active'));
+            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 {
+                 imagePreviewContainer.style.display = 'none';
+            }
         });
+        // --- Helper Functions ---
+        function getHfClient() {
+            const token = hfTokenInput.value.trim();
+            if (!token) {
+                alert('لطفاً کلید توکن Hugging Face خود را وارد کنید.');
+                return null;
+            }
+            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 ---
+        // Text-to-Video Generation
+        generateTextBtn.addEventListener('click', async () => {
+            const hf = getHfClient();
+            if (!hf) return;
+            const prompt = textPrompt.value.trim();
+            if (!prompt) {
+                alert('لطفاً توصیف ویدیو را وارد کنید.');
                 return;
             }
+            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);
             }
         });
+        // Image-to-Video Generation (CORRECTED)
+        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) {
+                alert('لطفاً توصیف حرکت را وارد کنید.');
                 return;
             }
+            showLoading(imageResultContainer, imageStatus, generateImageBtn);
             try {
+                // CORRECTED: Use the generic 'request' method
+                const videoBlob = await hf.request({
+                    task: "image-to-video",
+                    model: "akhaliq/veo3.1-fast-image-to-video",
+                    data: file, // The library handles the File object
+                    parameters: {
+                        prompt: prompt,
+                        provider: "fal-ai"
+                    }
+                });
+                // The result of hf.request is directly the blob
+                showResult(imageResultContainer, imageStatus, generateImageBtn, videoBlob);
             } catch (error) {
+                console.error("Image-to-Video Error:", error);
+                showError(imageResultContainer, imageStatus, generateImageBtn, error);
             }
+        });
     </script>
 </body>
 </html>