Spaces:

Ezmary
/

Ttr

Running

App Files Files Community

Ezmary commited on Oct 23

Commit

b141e4b

verified ·

1 Parent(s): 0d87ed4

Update index.html

Browse files

Files changed (1) hide show

index.html +393 -312

index.html CHANGED Viewed

@@ -3,424 +3,505 @@
 <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 {
             margin-bottom: 20px;
         }
         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 {
-            0% { transform: rotate(0deg); }
-            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/[email protected]/+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>

 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>ساخت ویدیو با هوش مصنوعی - Hugging Face</title>
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <script src="https://cdn.jsdelivr.net/npm/@huggingface/[email protected]"></script>
     <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;
+        }
+        h1 {
+            font-size: 2.5rem;
             margin-bottom: 10px;
+            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.3);
         }
+        .subtitle {
+            font-size: 1.2rem;
+            opacity: 0.9;
         }
+        .card {
+            background: rgba(255, 255, 255, 0.1);
+            backdrop-filter: blur(10px);
+            border-radius: 15px;
+            padding: 25px;
             margin-bottom: 25px;
+            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.2);
+            border: 1px solid rgba(255, 255, 255, 0.2);
         }
+        .card-title {
+            display: flex;
+            align-items: center;
+            margin-bottom: 20px;
+            font-size: 1.5rem;
+        }
+        .card-title i {
+            margin-left: 10px;
+            font-size: 1.8rem;
+        }
         .form-group {
             margin-bottom: 20px;
         }
         label {
             display: block;
             margin-bottom: 8px;
+            font-weight: 500;
         }
+        input, textarea, select {
             width: 100%;
+            padding: 12px 15px;
             border-radius: 8px;
+            border: 1px solid rgba(255, 255, 255, 0.3);
+            background: rgba(255, 255, 255, 0.1);
+            color: #fff;
             font-size: 1rem;
+            transition: all 0.3s ease;
         }
+        input:focus, textarea:focus, select:focus {
             outline: none;
+            border-color: #4dabf7;
+            box-shadow: 0 0 0 3px rgba(77, 171, 247, 0.3);
         }
+        textarea {
+            min-height: 120px;
+            resize: vertical;
         }
+        .btn {
+            display: inline-flex;
+            align-items: center;
+            justify-content: center;
+            padding: 12px 25px;
+            background: linear-gradient(45deg, #ff6b6b, #ff8e53);
+            color: white;
             border: none;
+            border-radius: 8px;
             font-size: 1rem;
+            font-weight: 600;
+            cursor: pointer;
+            transition: all 0.3s ease;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
         }
+        .btn:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
         }
+        .btn i {
+            margin-right: 8px;
         }
+        .btn-primary {
+            background: linear-gradient(45deg, #4dabf7, #3bc9db);
         }
+        .btn-success {
+            background: linear-gradient(45deg, #51cf66, #94d82d);
         }
+        .flex-container {
+            display: flex;
+            gap: 25px;
+            flex-wrap: wrap;
         }
+        .flex-item {
+            flex: 1;
+            min-width: 300px;
         }
         .result-container {
+            display: none;
+            text-align: center;
+            padding: 20px;
+        }
+        .video-preview {
+            width: 100%;
+            max-width: 600px;
+            height: 300px;
+            background: rgba(0, 0, 0, 0.3);
+            border-radius: 10px;
+            margin: 20px auto;
             display: flex;
             align-items: center;
+            justify-content: center;
+            overflow: hidden;
         }
+        .video-preview video {
             max-width: 100%;
+            max-height: 100%;
             border-radius: 8px;
         }
+        .loading {
+            display: none;
+            text-align: center;
+            padding: 20px;
         }
+        .spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid rgba(255, 255, 255, 0.3);
             border-radius: 50%;
+            border-top-color: #4dabf7;
             animation: spin 1s linear infinite;
+            margin: 0 auto 15px;
         }
         @keyframes spin {
+            to { transform: rotate(360deg); }
         }
+        .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;
+            padding: 12px;
+            background: rgba(255, 255, 255, 0.1);
+            border: 2px dashed rgba(255, 255, 255, 0.3);
+            border-radius: 8px;
+            cursor: pointer;
+            transition: all 0.3s ease;
+        }
+        .file-input-label:hover {
+            background: rgba(255, 255, 255, 0.2);
+        }
+        .file-input-label i {
+            margin-left: 8px;
+            font-size: 1.5rem;
+        }
+        .image-preview {
             margin-top: 15px;
             text-align: center;
         }
+        .image-preview img {
+            max-width: 100%;
+            max-height: 200px;
+            border-radius: 8px;
+            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
         }
+        .instructions {
+            margin-top: 30px;
+            font-size: 0.9rem;
+            opacity: 0.8;
+            line-height: 1.6;
         }
+        .error {
+            background: rgba(255, 0, 0, 0.2);
+            border: 1px solid rgba(255, 0, 0, 0.5);
             border-radius: 8px;
+            padding: 15px;
+            margin: 15px 0;
+            display: none;
         }
+        @media (max-width: 768px) {
+            .flex-container {
+                flex-direction: column;
+            }
+            h1 {
+                font-size: 2rem;
+            }
         }
     </style>
 </head>
 <body>
     <div class="container">
+        <header>
+            <h1>ساخت ویدیو با هوش مصنوعی</h1>
+            <p class="subtitle">تبدیل متن و تصویر به ویدیو با استفاده از مدل VEO از Hugging Face</p>
+        </header>
+        <div class="card">
+            <div class="card-title">
+                <i class="fas fa-key"></i>
+                <h2>تنظیمات احراز هویت</h2>
             </div>
+            <div class="form-group">
+                <label for="token">توکن Hugging Face</label>
+                <input type="text" id="token" placeholder="توکن خود را اینجا وارد کنید" required>
+                <p class="instructions">برای استفاده از این سرویس، نیاز به یک توکن معتبر از Hugging Face دارید. اگر توکن ندارید، از <a href="https://huggingface.co/settings/tokens" target="_blank" style="color: #4dabf7;">این لینک</a> می‌توانید ایجاد کنید.</p>
             </div>
         </div>
+        <div class="flex-container">
+            <div class="flex-item">
+                <div class="card">
+                    <div class="card-title">
+                        <i class="fas fa-font"></i>
+                        <h2>تبدیل متن به ویدیو</h2>
+                    </div>
+                    <div class="form-group">
+                        <label for="text-input">متن خود را وارد کنید</label>
+                        <textarea id="text-input" placeholder="مثلاً: یک مرد جوان در خیابان در حال راه رفتن است"></textarea>
+                    </div>
+                    <button class="btn btn-primary" id="text-to-video-btn">
+                        <i class="fas fa-film"></i>
+                        ساخت ویدیو از متن
+                    </button>
+                </div>
             </div>
+            <div class="flex-item">
+                <div class="card">
+                    <div class="card-title">
+                        <i class="fas fa-image"></i>
+                        <h2>تبدیل تصویر به ویدیو</h2>
+                    </div>
+                    <div class="form-group">
+                        <label for="image-input">تصویر خود را انتخاب کنید</label>
+                        <div class="file-input-container">
+                            <div class="file-input-label">
+                                <i class="fas fa-cloud-upload-alt"></i>
+                                <span>انتخاب تصویر</span>
+                            </div>
+                            <input type="file" id="image-input" accept="image/*">
+                        </div>
+                        <div class="image-preview" id="image-preview"></div>
+                    </div>
+                    <div class="form-group">
+                        <label for="image-prompt">توضیح برای ویدیو (اختیاری)</label>
+                        <input type="text" id="image-prompt" placeholder="مثلاً: گربه شروع به رقصیدن می‌کند">
+                    </div>
+                    <button class="btn btn-success" id="image-to-video-btn">
+                        <i class="fas fa-video"></i>
+                        ساخت ویدیو از تصویر
+                    </button>
                 </div>
             </div>
+        </div>
+        <div class="loading" id="loading">
+            <div class="spinner"></div>
+            <p>در حال ساخت ویدیو، لطفاً منتظر بمانید...</p>
+            <p class="instructions">این فرآیند ممکن است چند دقیقه طول بکشد</p>
+        </div>
+        <div class="error" id="error-message">
+            <i class="fas fa-exclamation-triangle"></i>
+            <span id="error-text">خطایی رخ داده است</span>
+        </div>
+        <div class="card result-container" id="result-container">
+            <div class="card-title">
+                <i class="fas fa-check-circle"></i>
+                <h2>ویدیو شما آماده است!</h2>
             </div>
+            <div class="video-preview" id="video-preview">
+                <video controls id="generated-video">
+                    مرورگر شما از تگ ویدیو پشتیبانی نمی‌کند.
+                </video>
             </div>
+            <button class="btn btn-primary" id="download-btn">
+                <i class="fas fa-download"></i>
+                دانلود ویدیو
+            </button>
         </div>
     </div>
+    <script>
+        // عناصر DOM
+        const tokenInput = document.getElementById('token');
+        const textInput = document.getElementById('text-input');
+        const imageInput = document.getElementById('image-input');
+        const imagePrompt = document.getElementById('image-prompt');
+        const textToVideoBtn = document.getElementById('text-to-video-btn');
+        const imageToVideoBtn = document.getElementById('image-to-video-btn');
+        const loading = document.getElementById('loading');
+        const resultContainer = document.getElementById('result-container');
+        const videoPreview = document.getElementById('video-preview');
+        const generatedVideo = document.getElementById('generated-video');
+        const downloadBtn = document.getElementById('download-btn');
+        const imagePreview = document.getElementById('image-preview');
+        const errorMessage = document.getElementById('error-message');
+        const errorText = document.getElementById('error-text');
+        // پیش‌نمایش تصویر آپلود شده
+        imageInput.addEventListener('change', function(e) {
+            const file = e.target.files[0];
             if (file) {
                 const reader = new FileReader();
+                reader.onload = function(e) {
+                    imagePreview.innerHTML = `<img src="${e.target.result}" alt="تصویر آپلود شده">`;
                 };
                 reader.readAsDataURL(file);
             }
         });
+        // تبدیل متن به ویدیو
+        textToVideoBtn.addEventListener('click', async function() {
+            if (!tokenInput.value) {
+                showError('لطفاً توکن Hugging Face خود را وارد کنید');
+                return;
+            }
+            if (!textInput.value) {
+                showError('لطفاً متنی برای تبدیل به ویدیو وارد کنید');
                 return;
             }
+            hideError();
+            loading.style.display = 'block';
+            resultContainer.style.display = 'none';
             try {
+                // استفاده از کتابخانه Hugging Face Inference
+                const { InferenceClient } = window.HfInference;
+                const client = new InferenceClient(tokenInput.value);
+                const videoBlob = await client.textToVideo({
                     provider: "fal-ai",
                     model: "akhaliq/veo3.1-fast",
+                    inputs: textInput.value,
                 });
+                // نمایش ویدیوی تولید شده
+                const videoUrl = URL.createObjectURL(videoBlob);
+                generatedVideo.src = videoUrl;
+                loading.style.display = 'none';
+                resultContainer.style.display = 'block';
+                // تنظیم لینک دانلود
+                downloadBtn.onclick = function() {
+                    const a = document.createElement('a');
+                    a.href = videoUrl;
+                    a.download = `text-to-video-${Date.now()}.mp4`;
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                };
             } catch (error) {
+                console.error('خطا در ساخت ویدیو:', error);
+                showError('خطا در ساخت ویدیو: ' + error.message);
+                loading.style.display = 'none';
             }
         });
+        // تبدیل تصویر به ویدیو
+        imageToVideoBtn.addEventListener('click', async function() {
+            if (!tokenInput.value) {
+                showError('لطفاً توکن Hugging Face خود را وارد کنید');
                 return;
             }
+            if (!imageInput.files[0]) {
+                showError('لطفاً تصویری برای تبدیل به ویدیو انتخاب کنید');
                 return;
             }
+            hideError();
+            loading.style.display = 'block';
+            resultContainer.style.display = 'none';
             try {
+                // تبدیل تصویر به Blob
+                const imageFile = imageInput.files[0];
+                // استفاده از کتابخانه Hugging Face Inference
+                const { InferenceClient } = window.HfInference;
+                const client = new InferenceClient(tokenInput.value);
+                const videoBlob = await client.imageToVideo({
+                    provider: "fal-ai",
                     model: "akhaliq/veo3.1-fast-image-to-video",
+                    inputs: imageFile,
+                    parameters: {
+                        prompt: imagePrompt.value || "The image comes to life"
+                    },
                 });
+                // نمایش ویدیوی تولید شده
+                const videoUrl = URL.createObjectURL(videoBlob);
+                generatedVideo.src = videoUrl;
+                loading.style.display = 'none';
+                resultContainer.style.display = 'block';
+                // تنظیم لینک دانلود
+                downloadBtn.onclick = function() {
+                    const a = document.createElement('a');
+                    a.href = videoUrl;
+                    a.download = `image-to-video-${Date.now()}.mp4`;
+                    document.body.appendChild(a);
+                    a.click();
+                    document.body.removeChild(a);
+                };
             } catch (error) {
+                console.error('خطا در ساخت ویدیو:', error);
+                showError('خطا در ساخت ویدیو: ' + error.message);
+                loading.style.display = 'none';
             }
         });
+        // نمایش خطا
+        function showError(message) {
+            errorText.textContent = message;
+            errorMessage.style.display = 'block';
+        }
+        // پنهان کردن خطا
+        function hideError() {
+            errorMessage.style.display = 'none';
+        }
     </script>
 </body>
 </html>