Create Yek.html

Yek.html

@@ -0,0 +1,660 @@
+<p>&nbsp;</p>
+<style>
+        :root {
+            --color-primary: #667EEA; /* بنفش آبی ملایم */
+            --color-secondary: #764BA2; /* بنفش تیره‌تر */
+            --color-text: #2D3748; /* متن اصلی تیره */
+            --color-text-muted: #718096; /* متن کم‌رنگ‌تر */
+            -- rozmowy: #F7FAFC; /* پس‌زمینه روشن برای بخش‌ها */
+            --color-border: #E2E8F0;
+            --color-white: #FFFFFF;
+            --color-success: #48BB78;
+            --color-error: #F56565;
+            --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1);
+            --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1);
+            --border-radius-md: 10px;
+            --border-radius-lg: 16px;
+        }
+
+        * { box-sizing: border-box; margin: 0; padding: 0; }
+
+        body {
+            background-color: var(--color-white); /* پس‌زمینه ساده سفید */
+            font-family: 'Vazirmatn', sans-serif;
+            color: var(--color-text);
+            line-height: 1.6;
+        }
+
+        .ltx-video-creator-app {
+            width: 100%;
+            max-width: 500px;
+            margin: 20px auto;
+            padding: 0 10px;
+        }
+
+        .app-header {
+            text-align: center;
+            margin-bottom: 25px;
+        }
+        .app-header h1 {
+            font-size: 1.9em;
+            font-weight: 700;
+            background: linear-gradient(45deg, var(--color-primary), var(--color-secondary));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            margin-bottom: 8px;
+        }
+        .app-header h1 img {
+            width: 32px;
+            height: 32px;
+            margin-left: 10px;
+        }
+        .app-header p {
+            font-size: 0.95em;
+            color: var(--color-text-muted);
+        }
+
+        .form-section-card {
+            background-color: var(--color-white);
+            padding: 25px;
+            border-radius: var(--border-radius-lg);
+            box-shadow: var(--shadow-lg);
+            border: 1px solid var(--color-border);
+        }
+
+        .mode-selector {
+            display: flex;
+            background-color: var(--color-bg-light);
+            border-radius: var(--border-radius-md);
+            padding: 4px;
+            margin-bottom: 20px;
+            border: 1px solid var(--color-border);
+        }
+        .mode-button {
+            flex: 1;
+            padding: 8px 10px;
+            background-color: transparent;
+            border: none;
+            cursor: pointer;
+            font-family: inherit;
+            font-size: 0.85rem;
+            font-weight: 600;
+            color: var(--color-text-muted);
+            border-radius: 8px;
+            transition: all 0.25s ease;
+        }
+        .mode-button.active {
+            background-color: var(--color-primary);
+            color: var(--color-white);
+            box-shadow: 0 3px 8px rgba(102, 126, 234, 0.3);
+        }
+
+        .form-group {
+            margin-bottom: 18px;
+        }
+        label {
+            display: block;
+            font-size: 0.8rem;
+            text-transform: uppercase;
+            letter-spacing: 0.5px;
+            color: var(--color-text-muted);
+            margin-bottom: 6px;
+            font-weight: 600;
+        }
+        input[type="text"], textarea, input[type="number"] {
+            width: 100%;
+            padding: 11px 14px;
+            border: 1px solid var(--color-border);
+            border-radius: var(--border-radius-md);
+            font-size: 0.9rem;
+            background-color: var(--color-bg-light);
+            color: var(--color-text);
+            font-family: inherit;
+        }
+        input[type="text"]::placeholder, textarea::placeholder {
+            color: #A0AEC0;
+        }
+
+        input[type="file"] {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid var(--color-border);
+            border-radius: var(--border-radius-md);
+            font-size: 0.9em;
+            background-color: var(--color-bg-light);
+            font-family: inherit;
+        }
+        input[type="file"]::file-selector-button {
+            padding: 8px 15px;
+            margin-right: 10px;
+            background-color: #6c757d;
+            color: white;
+            border: none;
+            border-radius: 7px;
+            cursor: pointer;
+            font-family: inherit;
+            font-weight: 500;
+        }
+        input[type="file"]::file-selector-button:hover {
+            background-color: #5a6268;
+        }
+
+        input:focus, textarea:focus {
+            outline: none;
+            border-color: var(--color-primary);
+            box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.25);
+            background-color: var(--color-white);
+        }
+        textarea {
+            min-height: 60px;
+            resize: vertical;
+        }
+        .preview-image {
+            max-width: 100%;
+            max-height: 150px;
+            border-radius: var(--border-radius-md);
+            margin-top: 12px;
+            display: none;
+            border: 1px solid var(--color-border);
+            object-fit: cover;
+            box-shadow: var(--shadow-md);
+        }
+
+        .options-grid {
+            display: grid;
+            grid-template-columns: 1fr 1fr;
+            gap: 10px;
+        }
+        .option-button {
+            padding: 10px;
+            font-size: 0.85em;
+            font-weight: 500;
+            border: 1px solid var(--color-border);
+            border-radius: var(--border-radius-md);
+            background-color: var(--color-bg-light);
+            color: var(--color-text);
+            cursor: pointer;
+            text-align: center;
+            font-family: inherit;
+        }
+        .option-button.selected {
+            background-color: var(--color-primary);
+            color: var(--color-white);
+            border-color: var(--color-primary);
+            font-weight: 600;
+        }
+
+        .flex-row {
+            display: flex;
+            gap: 10px;
+        }
+        .flex-row .form-group {
+            flex: 1;
+        }
+
+        .button-container {
+            text-align: center;
+            margin-top: 25px;
+        }
+        #generateButton {
+            background: linear-gradient(45deg, var(--color-primary) 0%, var(--color-secondary) 100%);
+            color: white;
+            padding: 13px 28px;
+            border: none;
+            border-radius: var(--border-radius-md);
+            font-size: 1em;
+            font-weight: 600;
+            cursor: pointer;
+            font-family: inherit;
+            width: 100%;
+            box-shadow: 0 5px 15px rgba(102, 126, 234, 0.3);
+        }
+        #generateButton:hover:not(:disabled) {
+            transform: scale(1.02);
+            box-shadow: 0 8px 20px rgba(102, 126, 234, 0.4);
+        }
+        #generateButton:disabled {
+            background: var(--color-border);
+            color: var(--color-text-muted);
+            cursor: not-allowed;
+            box-shadow: none;
+        }
+
+        .status-section, .output-section {
+            margin-top: 25px;
+            padding: 20px;
+            background-color: var(--color-white);
+            border-radius: var(--border-radius-lg);
+            border: 1px solid var(--color-border);
+            box-shadow: var(--shadow-md);
+        }
+        .status-section h2, .output-section h2 {
+            font-size: 1.15em;
+            color: var(--color-text);
+            border-bottom: 1px solid var(--color-border);
+            padding-bottom: 8px;
+            margin-bottom: 15px;
+            font-weight: 600;
+        }
+        .loader {
+            width: 30px;
+            height: 30px;
+            margin: 15px auto;
+            display: none;
+            border-radius: 50%;
+            border: 3px solid var(--color-bg-light);
+            border-top-color: var(--color-primary);
+            animation: spin 0.7s linear infinite;
+        }
+        @keyframes spin { to { transform: rotate(360deg); } }
+
+        .progress-bar-container {
+            width: 100%;
+            background-color: var(--color-border);
+            border-radius: 6px;
+            margin: 12px 0;
+            display: none;
+            height: 6px;
+        }
+        .progress-bar {
+            width: 0%;
+            height: 100%;
+            background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-secondary) 100%);
+            border-radius: 6px;
+        }
+        .status-messages-container {
+            max-height: 90px;
+            overflow-y: auto;
+            padding-right: 5px;
+        }
+        .status-message {
+            padding: 8px 12px;
+            border-radius: var(--border-radius-md);
+            margin-top: 8px;
+            font-size: 0.85em;
+            background-color: var(--color-bg-light);
+        }
+        .status-message.info {
+            border-left: 3px solid var(--color-primary);
+            background-color: #EBF4FF;
+            color: #0D47A1;
+        }
+        .status-message.error {
+            border-left: 3px solid var(--color-error);
+            background-color: #FFEBEE;
+            color: #C62828;
+        }
+        .status-message.success {
+            border-left: 3px solid var(--color-success);
+            background-color: #E8F5E9;
+            color: #1B5E20;
+        }
+
+        #outputVideo {
+            width: 100%;
+            border-radius: var(--border-radius-md);
+            margin-top: 10px;
+            border: 1px solid var(--color-border);
+            background-color: #000;
+        }
+        #finalSeed {
+            font-size: 0.8em;
+            color: var(--color-text-muted);
+            text-align: center;
+            margin-top: 8px;
+        }
+
+        .hidden-section {
+            display: none !important;
+        }
+
+        @media (max-width: 480px) {
+            .ltx-video-creator-app {
+                padding: 0;
+                margin: 10px auto;
+            }
+            .app-header h1 {
+                font-size: 1.6em;
+            }
+            .form-section-card {
+                padding: 15px;
+                border-radius: var(--border-radius-md);
+            }
+            #generateButton {
+                padding: 12px 18px;
+                font-size: 0.95em;
+            }
+        }
+    </style>
+<div class="ltx-video-creator-app">
+<div class="app-header">
+<h1><img src="https://em-content.zobj.net/thumbs/120/apple/354/film-projector_1f4fd-fe0f.png" alt="🎬" /> ویدیو ساز LTX</h1>
+<p>انیمیشن&zwnj;های کوتاه و جذاب خلق کنید</p>
+</div>
+<div class="form-section-card">
+<div class="mode-selector"><button class="mode-button active" data-mode="image-to-video">از تصویر</button> <button class="mode-button" data-mode="text-to-video">از متن</button></div>
+<div id="imageToVideoSection" class="form-mode-section">
+<div class="form-group"><label for="imageFile">تصویر شما</label> <input type="file" id="imageFile" accept="image/jpeg, image/png, image/webp" /> <img id="imagePreview" src="#" alt="پیش&zwnj;نمایش" class="preview-image" /></div>
+</div>
+<div id="textToVideoSection" class="form-mode-section hidden-section">
+<p style="text-align: center; font-size: 0.8rem; margin-bottom: 15px; padding: 8px; background-color: var(--color-bg-light); border-radius: 7px;">در این حالت، ویدیو تنها بر اساس شرح شما ساخته می&zwnj;شود.</p>
+</div>
+<div class="form-group"><label for="prompt">شرح انیمیشن (Prompt)</label> <textarea id="prompt" rows="2" placeholder="مثال: گربه&zwnj;ای که در چمنزار می&zwnj;دود">یک موجود از داخل تصویر شروع به حرکت می‌کند</textarea></div>
+<div class="form-group"><label>مدت زمان</label>
+<div class="options-grid" id="durationButtonsContainer"><button class="option-button duration-button" data-api-duration="5">کوتاه (۵ ثانیه)</button> <button class="option-button duration-button selected" data-api-duration="7.8">استاندارد (۸ ثانیه)</button></div>
+</div>
+<div class="form-group"><label>نسبت تصویر خروجی</label>
+<div class="options-grid" id="aspectRatioButtonsContainer"><button class="option-button aspect-ratio-button selected" data-height="768" data-width="768">۱:۱ (مربع)</button> <button class="option-button aspect-ratio-button" data-height="768" data-width="432">۹:۱۶ (پرتره)</button> <button class="option-button aspect-ratio-button" data-height="432" data-width="768">۱۶:۹ (لنداسکیپ)</button> <button class="option-button aspect-ratio-button" data-height="512" data-width="704">LTX (۵۱۲&times;۷۰۴)</button></div>
+</div>
+<div class="form-group"><label for="negativePrompt">موارد ناخواسته (Negative Prompt)</label> <textarea id="negativePrompt" rows="2" placeholder="مثال: کیفیت پایین, متن">کیفیت پایین، تار، لرزان, متن ناخوانا</textarea></div>
+<div class="flex-row">
+<div class="form-group"><label for="cfgScale">قدرت Prompt</label> <input type="number" id="cfgScale" value="1.0" min="1.0" max="10.0" step="0.1" /></div>
+<div class="form-group"><label for="seed">سید (0=تصادفی)</label> <input type="number" id="seed" value="0" min="0" /></div>
+</div>
+<div class="flex-row">
+<div class="form-group"><label for="outputHeight">ارتفاع (px)</label> <input type="number" id="outputHeight" value="768" step="32" min="256" max="1280" /></div>
+<div class="form-group"><label for="outputWidth">عرض (px)</label> <input type="number" id="outputWidth" value="768" step="32" min="256" max="1280" /></div>
+</div>
+<div class="button-container"><button id="generateButton">🚀 تولید ویدیو</button></div>
+</div>
+<div class="status-section" id="statusSection" style="display: none;">
+<h2>وضعیت پردازش</h2>
+<div class="loader" id="loader"></div>
+<div class="progress-bar-container" id="progressBarContainer">
+<div class="progress-bar" id="progressBar"></div>
+</div>
+<div class="status-messages-container" id="statusMessages"></div>
+</div>
+<div class="output-section" id="outputSection" style="display: none;">
+<h2>ویدیوی شما آماده است!</h2>
+<video width="300" height="150" id="outputVideo" controls="controls" preload="metadata" playsinline=""></video>
+<p id="finalSeed">&nbsp;</p>
+</div>
+</div>
+<p>
+<script>
+        const imageFileInput = document.getElementById('imageFile');
+        const imagePreview = document.getElementById('imagePreview');
+        const promptInput = document.getElementById('prompt');
+        const durationButtons = document.querySelectorAll('.duration-button');
+        const aspectRatioButtons = document.querySelectorAll('.aspect-ratio-button');
+        const generateButton = document.getElementById('generateButton');
+        const outputVideo = document.getElementById('outputVideo');
+        const finalSeedElement = document.getElementById('finalSeed');
+        const statusMessagesDiv = document.getElementById('statusMessages');
+        const statusSection = document.getElementById('statusSection');
+        const outputSection = document.getElementById('outputSection');
+        const loader = document.getElementById('loader');
+        const progressBarContainer = document.getElementById('progressBarContainer');
+        const progressBar = document.getElementById('progressBar');
+        const negativePromptInput = document.getElementById('negativePrompt');
+        const cfgScaleInput = document.getElementById('cfgScale');
+        const seedInput = document.getElementById('seed');
+        const outputHeightInput = document.getElementById('outputHeight');
+        const outputWidthInput = document.getElementById('outputWidth');
+        const modeButtons = document.querySelectorAll('.mode-button');
+        const imageToVideoSection = document.getElementById('imageToVideoSection');
+        const textToVideoSection = document.getElementById('textToVideoSection');
+        let currentGenerationMode = "image-to-video";
+        const SPACE_URL_BASE = "https://lightricks-ltx-video-distilled.hf.space";
+        let selectedApiDuration = 7.8;
+        let currentSessionHash = '';
+        let uploadedImageInfo = null;
+
+        document.addEventListener('DOMContentLoaded', () => {
+            document.querySelector('.duration-button.selected')?.click();
+            document.querySelector('.aspect-ratio-button.selected')?.click();
+            updateFormForMode(currentGenerationMode);
+        });
+
+        modeButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                modeButtons.forEach(btn => btn.classList.remove('active'));
+                button.classList.add('active');
+                currentGenerationMode = button.dataset.mode;
+                updateFormForMode(currentGenerationMode);
+            });
+        });
+
+        function updateFormForMode(mode) {
+            if (mode === "image-to-video") {
+                imageToVideoSection.classList.remove('hidden-section');
+                textToVideoSection.classList.add('hidden-section');
+                promptInput.placeholder = "مثال: گربه‌ای در چمنزار آفتابی می‌دود";
+            } else {
+                imageToVideoSection.classList.add('hidden-section');
+                textToVideoSection.classList.remove('hidden-section');
+                imageFileInput.value = '';
+                imagePreview.style.display = 'none';
+                uploadedImageInfo = null;
+                promptInput.placeholder = "مثال: یک اژدهای آتشین بر فراز قلعه‌ای قرون وسطایی";
+            }
+        }
+
+        imageFileInput.addEventListener('change', function(event) {
+            const file = event.target.files[0];
+            if (file) {
+                if (!file.type.startsWith('image/')) {
+                    addStatusMessage('لطفاً یک فایل تصویری انتخاب کنید.', 'error');
+                    imageFileInput.value = '';
+                    imagePreview.style.display = 'none';
+                    return;
+                }
+                const reader = new FileReader();
+                reader.onload = function(e) {
+                    imagePreview.src = e.target.result;
+                    imagePreview.style.display = 'block';
+                };
+                reader.readAsDataURL(file);
+                uploadedImageInfo = null;
+            } else {
+                imagePreview.style.display = 'none';
+            }
+        });
+
+        durationButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                durationButtons.forEach(btn => btn.classList.remove('selected'));
+                button.classList.add('selected');
+                selectedApiDuration = parseFloat(button.dataset.apiDuration);
+            });
+        });
+
+        aspectRatioButtons.forEach(button => {
+            button.addEventListener('click', () => {
+                aspectRatioButtons.forEach(btn => btn.classList.remove('selected'));
+                button.classList.add('selected');
+                outputHeightInput.value = button.dataset.height;
+                outputWidthInput.value = button.dataset.width;
+            });
+        });
+
+        function addStatusMessage(message, type = 'info') {
+            statusSection.style.display = 'block';
+            const messageDiv = document.createElement('div');
+            messageDiv.className = `status-message ${type}`;
+            messageDiv.textContent = message;
+            statusMessagesDiv.insertBefore(messageDiv, statusMessagesDiv.firstChild);
+        }
+
+        function clearStatusAndOutput() {
+            statusMessagesDiv.innerHTML = '';
+            statusSection.style.display = 'none';
+            outputSection.style.display = 'none';
+            if (outputVideo.src) URL.revokeObjectURL(outputVideo.src);
+            outputVideo.src = '';
+            finalSeedElement.textContent = '';
+            progressBar.style.width = '0%';
+            progressBarContainer.style.display = 'none';
+        }
+
+        function generateRandomHash(length = 11) {
+            const characters = 'abcdefghijklmnopqrstuvwxyz0123456789';
+            let result = '';
+            for (let i = 0; i < length; i++) {
+                result += characters.charAt(Math.floor(Math.random() * characters.length));
+            }
+            return result;
+        }
+
+        async function uploadImage(file) {
+            addStatusMessage('۱. آماده‌سازی تصویر...');
+            const uploadId = generateRandomHash(12);
+            const formData = new FormData();
+            formData.append('files', file);
+            try {
+                const response = await fetch(`${SPACE_URL_BASE}/gradio_api/upload?upload_id=${uploadId}`, {
+                    method: 'POST',
+                    body: formData
+                });
+                if (!response.ok) throw new Error(`خطا در آپلود (${response.status})`);
+                const result = await response.json();
+                if (result && result.length > 0 && typeof result[0] === 'string') {
+                    return {
+                        path: result[0],
+                        url: `${SPACE_URL_BASE}/gradio_api/file=${result[0]}`,
+                        orig_name: file.name,
+                        size: file.size,
+                        mime_type: file.type || 'application/octet-stream',
+                        meta: { "_type": "gradio.FileData" }
+                    };
+                }
+                throw new Error('پاسخ آپلود نامعتبر.');
+            } catch (error) {
+                addStatusMessage(`خطا در آپلود: ${error.message}`, 'error');
+                return null;
+            }
+        }
+
+        async function submitToQueue(payload) {
+            addStatusMessage('۲. ارسال درخواست به سرور...');
+            try {
+                const response = await fetch(`${SPACE_URL_BASE}/gradio_api/queue/join`, {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify(payload)
+                });
+                if (!response.ok) throw new Error(`خطا در ارسال به صف (${response.status})`);
+                return await response.json();
+            } catch (error) {
+                addStatusMessage(`خطا در ارتباط با سرور: ${error.message}`, 'error');
+                return null;
+            }
+        }
+
+        function listenForResults(eventId) {
+            addStatusMessage('۳. در حال تولید ویدیو...');
+            const eventSource = new EventSource(`${SPACE_URL_BASE}/gradio_api/queue/data?session_hash=${currentSessionHash}`);
+
+            eventSource.onmessage = function(event) {
+                const data = JSON.parse(event.data);
+                if (data.event_id !== eventId && data.msg !== "queue_full") return;
+                switch (data.msg) {
+                    case "process_starts":
+                        addStatusMessage('عملیات در سرور آغاز شد.');
+                        progressBarContainer.style.display = 'block';
+                        progressBar.style.width = '0%';
+                        break;
+                    case "progress":
+                        if (data.progress_data && data.progress_data.length > 0) {
+                            const progress = Math.round((data.progress_data[0].progress || 0) * 100);
+                            progressBar.style.width = `${progress}%`;
+                        }
+                        break;
+                    case "process_completed":
+                        eventSource.close();
+                        loader.style.display = 'none';
+                        generateButton.disabled = false;
+                        progressBar.style.width = '100%';
+                        if (data.success && data.output?.data?.[0]?.video?.url) {
+                            addStatusMessage('ویدیو با موفقیت ساخته شد! 🎉', 'success');
+                            outputSection.style.display = 'block';
+                            outputVideo.src = data.output.data[0].video.url;
+                            outputVideo.load();
+                            finalSeedElement.textContent = data.output.data[1] ? `سید نهایی: ${data.output.data[1]}` : '';
+                        } else {
+                            addStatusMessage('تولید ویدیو ناموفق بود.', 'error');
+                        }
+                        break;
+                    case "queue_full":
+                        addStatusMessage('سرور مشغول است، لطفاً کمی بعد تلاش کنید.', 'error');
+                        eventSource.close();
+                        loader.style.display = 'none';
+                        generateButton.disabled = false;
+                        break;
+                }
+            };
+
+            eventSource.onerror = function() {
+                addStatusMessage('خطا در ارتباط با سرور.', 'error');
+                eventSource.close();
+                loader.style.display = 'none';
+                generateButton.disabled = false;
+            };
+        }
+
+        generateButton.addEventListener('click', async () => {
+            clearStatusAndOutput();
+            const imageFile = imageFileInput.files[0];
+
+            if (currentGenerationMode === "image-to-video" && !imageFile) {
+                addStatusMessage('لطفاً ابتدا یک تصویر انتخاب کنید.', 'error');
+                return;
+            }
+            if (!promptInput.value.trim()) {
+                addStatusMessage('لطفاً متن راهنما (Prompt) را وارد کنید.', 'error');
+                return;
+            }
+
+            generateButton.disabled = true;
+            loader.style.display = 'block';
+            current
+
+SessionHash = generateRandomHash();
+
+            if (currentGenerationMode === "image-to-video") {
+                uploadedImageInfo = await uploadImage(imageFile);
+                if (!uploadedImageInfo) {
+                    generateButton.disabled = false;
+                    loader.style.display = 'none';
+                    return;
+                }
+            } else {
+                uploadedImageInfo = null;
+            }
+
+            const userSeed = parseInt(seedInput.value);
+            const generationPayload = {
+                fn_index: 5,
+                data: [
+                    promptInput.value,
+                    negativePromptInput.value,
+                    uploadedImageInfo,
+                    (currentGenerationMode === "image-to-video" ? null : ""),
+                    parseInt(outputHeightInput.value),
+                    parseInt(outputWidthInput.value),
+                    currentGenerationMode,
+                    selectedApiDuration,
+                    9,
+                    (userSeed > 0) ? userSeed : Math.floor(Math.random() * (2**32 - 1)),
+                    (userSeed <= 0),
+                    parseFloat(cfgScaleInput.value),
+                    true
+                ],
+                session_hash: currentSessionHash
+            };
+
+            const joinResponse = await submitToQueue(generationPayload);
+            if (joinResponse && joinResponse.event_id) {
+                listenForResults(joinResponse.event_id);
+            } else {
+                addStatusMessage('ارسال درخواست به سرور ناموفق بود.', 'error');
+                generateButton.disabled = false;
+                loader.style.display = 'none';
+            }
+        });
+    </script>
+</p>