Veu3

Running

App Files Files Community

Hamed744 commited on Jun 6

Commit

abc7c31

verified ·

1 Parent(s): e60f4e8

Update Yek.html

Browse files

Files changed (1) hide show

Yek.html +354 -638

Yek.html CHANGED Viewed

@@ -1,660 +1,376 @@
-<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>

+<!DOCTYPE html>
+<html lang="fa" dir="rtl">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Alpha TTS - رابط کاربری هوشمند با عکس</title>
+    <style>
+        @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;700;800&display=swap');
         :root {
+            --app-font: 'Vazirmatn', sans-serif;
+            --app-header-grad-start: #1a2980;
+            --app-header-grad-end: #26d0ce;
+            --app-panel-bg: #FFFFFF;
+            --app-input-bg: #F8F9FA;
+            --app-button-bg: #5f27cd;
+            --app-button-hover-bg: #481e9e;
+            --app-main-bg: linear-gradient(170deg, #F3E8FF 0%, #E0F2FE 100%);
+            --app-text-primary: #2c3e50;
+            --app-text-secondary: #555;
+            --app-border-color: #E0E0E0;
+            --radius-card: 24px;
+            --radius-input: 12px;
+            --shadow-card: 0 10px 30px -5px rgba(0,0,0,0.08);
+            --shadow-button: 0 4px 15px -2px rgba(95, 39, 205, 0.4);
+            --speaker-selected-glow: 0 0 15px rgba(95, 39, 205, 0.5);
         }
         body {
+            font-family: var(--app-font);
+            direction: rtl;
+            background: var(--app-main-bg);
+            color: var(--app-text-primary);
+            font-size: 16px;
+            line-height: 1.65;
+            margin: 0;
+            padding: 0;
+            min-height: 100vh;
+            -webkit-font-smoothing: antialiased;
+            -moz-osx-font-smoothing: grayscale;
+        }
+        .container { max-width: 800px; width: 95%; margin: 0 auto; padding-bottom: 40px; }
+        .app-header { padding: 3rem 1.5rem 5rem 1.5rem; text-align: center; background-image: linear-gradient(135deg, var(--app-header-grad-start) 0%, var(--app-header-grad-end) 100%); color: white; border-bottom-left-radius: var(--radius-card); border-bottom-right-radius: var(--radius-card); box-shadow: 0 6px 20px -5px rgba(0,0,0,0.2); }
+        .app-header h1 { font-size: 2.8em; font-weight: 800; margin:0 0 0.5rem 0; text-shadow: 0 2px 4px rgba(0,0,0,0.15); }
+        .app-header p { font-size: 1.2em; color: rgba(255,255,255,0.9); margin-top:0; opacity: 0.9; }
+        .main-content { padding: 2.5rem; margin: -3.5rem auto 2rem auto; background-color: var(--app-panel-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-card); }
+        .form-group { margin-bottom: 2.5rem; }
+        label { display: block; font-weight: 700; color: var(--app-text-primary); font-size: 1.1em; margin-bottom: 0.8rem; }
+        textarea, input[type="text"] { width: 100%; padding: 1rem; border-radius: var(--radius-input); border: 2px solid var(--app-border-color); background-color: var(--app-input-bg); box-shadow: none; font-family: var(--app-font); font-size: 1rem; box-sizing: border-box; transition: all 0.2s ease-in-out; }
+        textarea:focus, input[type="text"]:focus { outline: none; border-color: var(--app-button-bg); box-shadow: 0 0 0 3px rgba(95, 39, 205, 0.2); background-color: #fff; }
+        #selected-speaker-display { text-align: center; }
+        #selected-speaker-card { display: inline-flex; align-items: center; background: #fff; border-radius: 99px; padding: 10px; box-shadow: 0 5px 20px rgba(0,0,0,0.1); border: 2px solid var(--app-border-color); }
+        #selected-speaker-card img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; margin-left: 15px; background-color: #eee; }
+        #selected-speaker-info h3 { margin: 0; font-size: 1.4em; }
+        #selected-speaker-info p { margin: 5px 0 0; color: var(--app-text-secondary); font-size: 0.9em; }
+        #change-speaker-btn { display: block; margin: 1rem auto 0; padding: 8px 20px; border-radius: 8px; background-color: var(--app-input-bg); border: 1px solid var(--app-border-color); cursor: pointer; font-family: var(--app-font); font-weight: 500; transition: all 0.2s ease; }
+        #change-speaker-btn:hover { background-color: #e9ecef; border-color: #ced4da; }
+        #speaker-modal { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(0,0,0,0.5); backdrop-filter: blur(5px); display: none; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity 0.3s ease; }
+        #speaker-modal.visible { display: flex; opacity: 1; }
+        .modal-content { background: #fff; padding: 2rem; border-radius: var(--radius-card); width: 90%; max-width: 700px; max-height: 80vh; overflow-y: auto; transform: scale(0.95); transition: transform 0.3s ease; }
+        #speaker-modal.visible .modal-content { transform: scale(1); }
+        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; }
+        .modal-header h2 { margin: 0; }
+        .close-modal-btn { background: none; border: none; font-size: 2rem; cursor: pointer; color: #aaa; transition: color 0.2s ease; }
+        .close-modal-btn:hover { color: #333; }
+        #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1rem; }
+        @media (min-width: 576px) { #speaker-grid { grid-template-columns: repeat(4, 1fr); } }
+        .speaker-card { cursor: pointer; transition: all 0.3s ease; }
+        .speaker-card .speaker-visual { border: 3px solid transparent; border-radius: var(--radius-card); overflow: hidden; text-align: center; box-shadow: 0 4px 10px rgba(0,0,0,0.05); position: relative; background-color: #fff; }
+        .speaker-card:hover .speaker-visual { transform: translateY(-3px); box-shadow: 0 6px 15px rgba(0,0,0,0.1); }
+        .speaker-card input[type="radio"] { display: none; }
+        .speaker-card img { width: 100%; height: 120px; object-fit: cover; display: block; background-color: #eee; }
+        .speaker-card .speaker-name { padding: 0.7rem 0.5rem; font-weight: 500; font-size: 0.9em; }
+        .speaker-card input[type="radio"]:checked + .speaker-visual { border-color: var(--app-button-bg); box-shadow: var(--speaker-selected-glow); }
+        .slider-container { display: flex; align-items: center; gap: 1rem; }
+        input[type="range"] { flex-grow: 1; cursor: pointer; }
+        #temperature-value { font-weight: bold; background-color: var(--app-input-bg); padding: 0.2rem 0.8rem; border-radius: 8px; border: 1px solid var(--app-border-color); min-width: 40px; text-align: center; }
+        #generate-btn { width: 100%; padding: 1rem 1.5rem; font-size: 1.2em; font-weight: 700; font-family: var(--app-font); background: var(--app-button-bg); color: white; border: none; border-radius: var(--radius-input); cursor: pointer; transition: all 0.3s ease; box-shadow: var(--shadow-button); }
+        #generate-btn:hover:not(:disabled) { background-color: var(--app-button-hover-bg); transform: translateY(-2px); box-shadow: 0 6px 20px -3px rgba(95, 39, 205, 0.5); }
+        #generate-btn:disabled { background-color: #999; cursor: not-allowed; box-shadow: none; }
+        #output-section { margin-top: 2.5rem; padding: 1.5rem; background-color: #fff; border-radius: var(--radius-card); min-height: 100px; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 1rem; border: 1px solid var(--app-border-color); }
+        #status-message { font-weight: 500; color: var(--app-text-secondary); }
+        #audio-player { width: 100%; margin-top: 1rem; display: none; }
     </style>
+</head>
+<body>
+    <div class="container">
+        <header class="app-header">
+            <h1>آلفا TTS</h1>
+            <p>جادوی تبدیل متن به صدا، به سبک شما</p>
+        </header>
+        <main class="main-content">
+            <form id="tts-form">
+                <div class="form-group">
+                    <label for="text-input">📝 متن برای تبدیل</label>
+                    <textarea id="text-input" rows="5" placeholder="اینجا متن خود را به فارسی وارد کنید...">این یک آزمایش برای بررسی کیفیت صدای تولید شده توسط هوش مصنوعی آلفا است.</textarea>
+                </div>
+                <div class="form-group">
+                    <label for="prompt-input">🗣️ سبک و لحن گفتار (اختیاری)</label>
+                    <input type="text" id="prompt-input" value="با صدایی طبیعی و روان." placeholder="مثال: با لحنی شاد و پرانرژی">
+                </div>
+                <div class="form-group">
+                    <label>🎤 گوینده منتخب</label>
+                    <div id="selected-speaker-display">
+                        <div id="selected-speaker-card">
+                            <img id="selected-speaker-img" src="" alt="عکس ��وینده">
+                            <div id="selected-speaker-info">
+                                <h3 id="selected-speaker-name"></h3>
+                                <p>برای تغییر، روی دکمه زیر کلیک کنید</p>
+                            </div>
+                        </div>
+                        <button type="button" id="change-speaker-btn">تغییر گوینده</button>
+                    </div>
+                </div>
+                <div class="form-group">
+                    <label for="temperature-slider">🌡️ میزان خلاقیت صدا (0.1 تا 1.5)</label>
+                    <div class="slider-container">
+                        <input type="range" id="temperature-slider" min="0.1" max="1.5" step="0.05" value="0.9">
+                        <span id="temperature-value">0.9</span>
+                    </div>
+                </div>
+                <button type="submit" id="generate-btn">🚀 تولید و پخش صدا</button>
+            </form>
+            <div id="output-section">
+                <div id="status-message">خروجی صدا در اینجا نمایش داده می‌شود</div>
+                <audio id="audio-player" controls></audio>
+            </div>
+        </main>
+    </div>
+    <div id="speaker-modal">
+        <div class="modal-content">
+            <div class="modal-header">
+                <h2>انتخاب گوینده</h2>
+                <button type="button" class="close-modal-btn">×</button>
+            </div>
+            <div id="speaker-grid"></div>
+        </div>
+    </div>
+    <input type="hidden" id="selected_speaker_id_storage" value="Charon"> <!-- مقدار پیش‌فرض از کد پایتون -->
+    <script>
         document.addEventListener('DOMContentLoaded', () => {
+            const HF_SPACE_URL = "https://hamed744-ttspro.hf.space";
+            const JOIN_QUEUE_URL = `${HF_SPACE_URL}/gradio_api/queue/join`;
+            const GET_DATA_URL_BASE = `${HF_SPACE_URL}/gradio_api/queue/data`;
+            const FILE_URL_BASE = `${HF_SPACE_URL}/gradio_api/file=`;
+            const FN_INDEX = 1;
+            // --- لیست گویندگان با اسامی فارسی و ID انگلیسی مطابق با کد پایتون ---
+            const speakers = [
+                { id: "Achird", name: "آرش (مرد)" },
+                { id: "Zubenelgenubi", name: "زهره (زن)" },
+                { id: "Vindemiatrix", name: "ویدا (زن)" },
+                { id: "Sadachbia", name: "سارا (زن)" },
+                { id: "Sadaltager", name: "سامان (مرد)" },
+                { id: "Sulafat", name: "سولماز (زن)" },
+                { id: "Laomedeia", name: "لیلا (زن)" },
+                { id: "Achernar", name: "آرمان (مرد)" },
+                { id: "Alnilam", name: "آیدا (زن)" },
+                { id: "Schedar", name: "شهاب (مرد)" },
+                { id: "Gacrux", name: "کاوه (مرد)" },
+                { id: "Pulcherrima", name: "پریا (زن)" },
+                { id: "Umbriel", name: "امید (مرد)" },
+                { id: "Algieba", name: "آزاده (زن)" },
+                { id: "Despina", name: "دینا (زن)" },
+                { id: "Erinome", name: "ایرج (مرد)" },
+                { id: "Algenib", name: "آرشام (مرد)" },
+                { id: "Rasalthgeti", name: "رها (زن)" },
+                { id: "Orus", name: "اردلان (مرد)" },
+                { id: "Aoede", name: "آیدین (؟)" }, // نام خنثی
+                { id: "Callirrhoe", name: "کیمیا (زن)" },
+                { id: "Autonoe", name: "آتنا (زن)" },
+                { id: "Enceladus", name: "انوش (مرد)" },
+                { id: "Iapetus", name: "یاشار (مرد)" },
+                { id: "Zephyr", name: "نسیم (زن)" }, // در مثال Gradio زنانه بود
+                { id: "Puck", name: "پویا (مرد)" },
+                { id: "Charon", name: "کارن (مرد)" }, // پیش‌فرض در Gradio شما
+                { id: "Kore", name: "کوروش (مرد)" },
+                { id: "Fenrir", name: "فرید (مرد)" },
+                { id: "Leda", name: "لیدا (زن)" }
+            ];
+            const form = document.getElementById('tts-form');
+            const textInput = document.getElementById('text-input');
+            const promptInput = document.getElementById('prompt-input');
+            const tempSlider = document.getElementById('temperature-slider');
+            const tempValueSpan = document.getElementById('temperature-value');
+            const generateBtn = document.getElementById('generate-btn');
+            const statusMessage = document.getElementById('status-message');
+            const audioPlayer = document.getElementById('audio-player');
+            const selectedSpeakerIdStorage = document.getElementById('selected_speaker_id_storage');
+            const speakerModal = document.getElementById('speaker-modal');
+            const changeSpeakerBtn = document.getElementById('change-speaker-btn');
+            const closeModalBtn = document.querySelector('.close-modal-btn');
+            const speakerGridInModal = document.getElementById('speaker-grid');
+            const selectedSpeakerImgDisplay = document.getElementById('selected-speaker-img');
+            const selectedSpeakerNameDisplay = document.getElementById('selected-speaker-name');
+            function getSpeakerById(id) {
+                return speakers.find(s => s.id === id);
             }
+            function getImageUrl(speaker, index) {
+                const genderHint = speaker.name.toLowerCase();
+                let gender = 'lego'; // پیشفرض برای موارد نامشخص
+                if (genderHint.includes('(مرد)')) gender = 'men';
+                else if (genderHint.includes('(زن)')) gender = 'women';
+                const imageIndex = (index * 5 + (speaker.id.length % 10)) % 100; // فرمول کمی پیچیده‌تر برای تنوع بیشتر
+                return `https://randomuser.me/api/portraits/${gender}/${imageIndex}.jpg`;
             }
+            function updateSelectedSpeakerDisplay(speakerId) {
+                const speaker = getSpeakerById(speakerId);
+                if (speaker) {
+                    const speakerIndex = speakers.findIndex(s => s.id === speakerId);
+                    selectedSpeakerImgDisplay.src = getImageUrl(speaker, speakerIndex);
+                    selectedSpeakerNameDisplay.textContent = speaker.name;
+                    selectedSpeakerIdStorage.value = speaker.id;
                 }
             }
+            function createSpeakerCardsInModal() {
+                speakerGridInModal.innerHTML = '';
+                speakers.forEach((speaker, index) => {
+                    const card = document.createElement('label');
+                    card.className = 'speaker-card';
+                    card.setAttribute('for', `modal-speaker-${speaker.id}`);
+                    const isChecked = speaker.id === selectedSpeakerIdStorage.value ? 'checked' : '';
+                    card.innerHTML = `
+                        <input type="radio" name="modal_speaker_selection" value="${speaker.id}" id="modal-speaker-${speaker.id}" ${isChecked}>
+                        <div class="speaker-visual">
+                            <img src="${getImageUrl(speaker, index)}" alt="عکس گوینده ${speaker.name}" loading="lazy">
+                            <div class="speaker-name">${speaker.name}</div>
+                        </div>
+                    `;
+                    card.addEventListener('click', () => {
+                        updateSelectedSpeakerDisplay(speaker.id);
+                        setTimeout(() => speakerModal.classList.remove('visible'), 100);
+                    });
+                    speakerGridInModal.appendChild(card);
                 });
             }
+            changeSpeakerBtn.addEventListener('click', () => {
+                createSpeakerCardsInModal();
+                speakerModal.classList.add('visible');
+            });
+            closeModalBtn.addEventListener('click', () => speakerModal.classList.remove('visible'));
+            speakerModal.addEventListener('click', (e) => {
+                if (e.target === speakerModal) {
+                    speakerModal.classList.remove('visible');
                 }
+            });
+            tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
+            async function generateAudio(event) {
+                event.preventDefault();
+                generateBtn.disabled = true;
+                generateBtn.textContent = 'در حال پردازش...';
+                statusMessage.textContent = 'در حال ارسال درخواست به سرور...';
+                audioPlayer.style.display = 'none';
+                audioPlayer.src = '';
+                const text = textInput.value;
+                const prompt = promptInput.value;
+                const temperature = parseFloat(tempSlider.value);
+                const selectedSpeaker = selectedSpeakerIdStorage.value;
+                const sessionHash = Math.random().toString(36).substring(2);
+                if (!text.trim()) {
+                    statusMessage.textContent = 'خطا: متن ورودی نمی‌تواند خالی باشد.';
+                    generateBtn.disabled = false;
+                    generateBtn.textContent = '🚀 تولید و پخش صدا';
                     return;
                 }
+                const payload = {
+                    fn_index: FN_INDEX,
+                    data: [false, null, text, prompt, selectedSpeaker, temperature],
+                    event_data: null,
+                    session_hash: sessionHash
+                };
+                try {
+                    const joinQueueResponse = await fetch(JOIN_QUEUE_URL, {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify(payload)
+                    });
+                    if (!joinQueueResponse.ok) {
+                         const errorBody = await joinQueueResponse.text();
+                         throw new Error(`خطا در اتصال به صف (${joinQueueResponse.status}): ${errorBody}`);
+                    }
+                    statusMessage.textContent = 'در انتظار نتیجه از سرور...';
+                    const dataResponse = await fetch(`${GET_DATA_URL_BASE}?session_hash=${sessionHash}`);
+                    const reader = dataResponse.body.getReader();
+                    const decoder = new TextDecoder();
+                    let finalFilePath = null;
+                    let buffer = '';
+                    while (true) {
+                        const { value, done } = await reader.read();
+                        if (done) break;
+                        buffer += decoder.decode(value, { stream: true });
+                        const lines = buffer.split('\n');
+                        buffer = lines.pop();
+                        for (const line of lines) {
+                            if (!line.startsWith('data:')) continue;
+                            try {
+                                const data = JSON.parse(line.substring(5));
+                                if (data.msg === 'process_generating') {
+                                    statusMessage.textContent = 'سرور در حال تولید فایل صوتی است...';
+                                }
+                                if (data.msg === 'process_completed') {
+                                    if (data.success && data.output.data && data.output.data[0] && (data.output.data[0].name || data.output.data[0].path)) {
+                                        finalFilePath = data.output.data[0].name || data.output.data[0].path;
+                                    } else {
+                                        console.error("ساختار پیام موفقیت مورد انتظار نبود:", data);
+                                    }
+                                    break;
+                                }
+                            } catch (e) { /* نادیده گرفتن خطاهای پارس */ }
+                        }
+                        if (finalFilePath) break;
+                    }
+                    if (finalFilePath) {
+                        statusMessage.textContent = 'فایل صوتی با موفقیت دریافت شد!';
+                        const audioUrl = `${FILE_URL_BASE}${finalFilePath}`;
+                        audioPlayer.src = audioUrl;
+                        audioPlayer.style.display = 'block';
+                        audioPlayer.play();
+                    } else {
+                        throw new Error('فایل صوتی از سرور دریافت نشد. کنسول را برای اطلاعات بیشتر بررسی کنید.');
+                    }
+                } catch (error) {
+                    console.error('یک خطا در فرآیند رخ داد:', error);
+                    statusMessage.textContent = `یک خطا رخ داد: ${error.message}`;
+                } finally {
+                    generateBtn.disabled = false;
+                    generateBtn.textContent = '🚀 تولید و پخش صدا';
+                }
             }
+            updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value);
+            form.addEventListener('submit', generateAudio);
         });
     </script>
+</body>
+</html>