Spaces:

Hamed744
/

HtmlEzmar

Running

App Files Files

xet

Community

Hamed744 commited on Jul 5

Commit

e7a495c

verified ·

1 Parent(s): 81cbc33

Update index.html

Browse files

Files changed (1) hide show

index.html +208 -825

index.html CHANGED Viewed

@@ -3,655 +3,152 @@
 <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;600;700;800;900&display=swap');
         :root {
             --app-font: 'Vazirmatn', sans-serif;
-            --app-bg: #F4F7FC;
-            --panel-bg: #FFFFFF;
-            --panel-border: #E8EEF3;
-            --text-primary: #121826;
-            --text-secondary: #5C677D;
-            --accent-primary: #3B82F6;
-            --accent-primary-hover: #2563EB;
-            --accent-secondary: #10B981;
-            --accent-secondary-hover: #059669;
-            --input-bg: #F8FAFC;
-            --input-border-focus: var(--accent-primary);
             --radius-card: 24px;
-            --radius-input: 14px;
-            --shadow-subtle: 0 2px 8px rgba(26, 32, 44, 0.04);
-            --shadow-medium: 0 6px 16px -2px rgba(26, 32, 44, 0.08), 0 3px 8px -3px rgba(26,32,44,0.05);
-            --shadow-strong: 0 10px 25px -5px rgba(26, 32, 44, 0.12), 0 6px 15px -6px rgba(26,32,44,0.08);
-            --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
-        }
-        @keyframes fadeInDown {
-            from { opacity: 0; transform: translateY(-20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes fadeInUp {
-            from { opacity: 0; transform: translateY(20px); }
-            to { opacity: 1; transform: translateY(0); }
-        }
-        @keyframes modalZoomIn {
-            from { opacity: 0; transform: scale(0.8) translateY(20px); }
-            to { opacity: 1; transform: scale(1) translateY(0); }
-        }
-        @keyframes modalZoomOut {
-            from { opacity: 1; transform: scale(1) translateY(0); }
-            to { opacity: 0; transform: scale(0.8) translateY(20px); }
         }
         body {
             font-family: var(--app-font);
             direction: rtl;
-            background-color: var(--app-bg);
-            color: var(--text-primary);
             font-size: 16px;
-            line-height: 1.8;
             margin: 0;
-            padding: 2.5rem 0;
             min-height: 100vh;
             -webkit-font-smoothing: antialiased;
             -moz-osx-font-smoothing: grayscale;
-            display: flex;
-            justify-content: center;
-            align-items: flex-start;
-            overflow-x: hidden;
-        }
-        .container {
-            max-width: 780px;
-            width: 92%;
-            margin: 0 auto;
-        }
-        .app-header {
-            padding: 0.5rem 0 2.5rem 0;
-            text-align: center;
-            margin-bottom: 1.5rem;
-            animation: fadeInDown 0.8s 0.1s ease-out backwards;
-        }
-        .app-header h1 {
-            font-size: 2.1em;
-            font-weight: 900;
-            margin:0 0 0.6rem 0;
-            background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            letter-spacing: -0.5px;
-        }
-        .app-header p {
-            font-size: 1em;
-            color: var(--text-secondary);
-            margin-top:0;
-            opacity: 0.85;
-            font-weight: 400;
-            line-height: 1.6;
-        }
-        .main-content {
-            padding: 2.5rem;
-            background-color: var(--panel-bg);
-            border-radius: var(--radius-card);
-            box-shadow: var(--shadow-strong);
-            border: 1px solid var(--panel-border);
-            animation: fadeInUp 0.8s 0.3s ease-out backwards;
-        }
-        .form-group { margin-bottom: 2rem; }
-        .label-with-info {
-            display: flex;
-            align-items: center;
-            gap: 0.5rem;
-            margin-bottom: 1rem;
-        }
-        .label-with-info label {
-             margin-bottom: 0;
-        }
-        .info-icon { /* Renamed from info-tooltip-icon for clarity */
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            width: 22px;
-            height: 22px;
-            border-radius: 50%;
-            background-color: var(--input-bg);
-            border: 1px solid var(--panel-border);
-            color: var(--text-secondary);
-            font-size: 0.9em;
-            font-weight: 700;
-            cursor: pointer;
-            position: relative;
-            transition: var(--transition-smooth);
-            user-select: none;
-        }
-        .info-icon:hover, .info-icon:focus {
-            background-color: var(--accent-primary);
-            color: white;
-            border-color: var(--accent-primary);
-            transform: scale(1.1);
-            outline: none;
         }
-        /* Removed .tooltip-text and .info-tooltip-icon.active as it's now a modal */
-        label {
-            display: block;
-            font-weight: 700;
-            color: var(--text-primary);
-            font-size: 1.05em;
-            margin-bottom: 0.8rem;
-        }
-        textarea, input[type="text"] {
-            width: 100%;
-            padding: 0.9rem 1.1rem;
-            border-radius: var(--radius-input);
-            border: 1px solid var(--panel-border);
-            background-color: var(--input-bg);
-            color: var(--text-primary);
-            box-shadow: var(--shadow-subtle) inset;
-            font-family: var(--app-font);
-            font-size: 1rem;
-            box-sizing: border-box;
-            transition: var(--transition-smooth);
-        }
-        textarea:focus, input[type="text"]:focus {
-            outline: none;
-            border-color: var(--input-border-focus);
-            box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25), var(--shadow-subtle) inset;
-            background-color: #fff;
-        }
-        textarea { min-height: 100px; resize: vertical; }
-        .char-counter-wrapper {
-            font-size: 0.85em;
-            color: var(--text-secondary);
-            text-align: left;
-            margin-top: 0.5rem;
-            padding: 0 0.2rem;
-        }
-        #char-count { font-weight: 600; color: var(--accent-primary); }
-        /* --- نمایش گوینده منتخب --- */
-        #selected-speaker-display { text-align: center; margin-top: 1rem; position: relative; }
-        #selected-speaker-card {
-            display: inline-flex;
-            align-items: center;
-            background: linear-gradient(135deg, var(--input-bg) 0%, #fff 100%);
-            border-radius: var(--radius-card);
-            padding: 1rem 1.2rem;
-            box-shadow: var(--shadow-medium);
-            border: 1px solid var(--panel-border);
-            transition: var(--transition-bounce);
-            position: relative;
-            margin-bottom: 1.2rem;
-            cursor: pointer;
-        }
-         #selected-speaker-card:hover {
-            transform: translateY(-6px) scale(1.03);
-            box-shadow: var(--shadow-strong);
-        }
-        #selected-speaker-card img {
-            width: 75px; height: 75px;
-            border-radius: 50%;
-            object-fit: cover;
-            margin-left: 18px;
-            border: 3px solid var(--accent-secondary);
-            box-shadow: 0 0 12px -2px rgba(16, 185, 129, 0.5);
-            background-color: #e0e0e0;
-            transition: var(--transition-smooth);
-        }
-        #selected-speaker-card:hover img {
-            transform: scale(1.08) rotate(3deg);
-        }
-        #selected-speaker-info h3 { margin: 0; font-size: 1.35em; font-weight: 800; color: var(--text-primary); }
-        #selected-speaker-info p { margin: 4px 0 0; color: var(--text-secondary); font-size: 0.88em; font-weight: 500; }
-        #change-speaker-btn {
-            display: inline-flex;
-            align-items: center;
-            justify-content: center;
-            margin: 0 auto;
-            padding: 10px 20px;
-            border-radius: var(--radius-input);
-            background: linear-gradient(45deg, var(--accent-primary-hover), var(--accent-primary));
-            border: none;
-            color: #fff;
-            cursor: pointer;
-            font-family: var(--app-font); font-weight: 600;
-            font-size: 1em;
-            transition: var(--transition-smooth);
-            box-shadow: 0 4px 10px -2px rgba(59, 130, 246, 0.35), var(--shadow-subtle);
-        }
-        #change-speaker-btn:hover {
-            background: linear-gradient(45deg, var(--accent-primary), var(--accent-primary-hover));
-            transform: translateY(-3px) scale(1.05);
-            box-shadow: 0 6px 12px -3px rgba(59, 130, 246, 0.45), var(--shadow-medium);
-        }
-        #change-speaker-btn svg {
-            width: 1.1em;
-            height: 1.1em;
-            margin-right: 0.5em;
-            fill: currentColor;
-        }
-        /* --- مودال عمومی --- */
-        .modal-overlay {
-            position: fixed; top: 0; left: 0; width: 100%; height: 100%;
-            background-color: rgba(18, 24, 38, 0.6);
-            backdrop-filter: blur(8px) saturate(150%);
-            display: none; /* Hidden by default */
-            align-items: center; justify-content: center;
-            z-index: 1000; opacity: 0;
-            transition: opacity 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-        .modal-overlay.visible { display: flex; opacity: 1; }
-        .modal-dialog {
-            background: var(--panel-bg);
-            padding: 2rem;
-            border-radius: var(--radius-card);
-            width: 90%;
-            box-shadow: var(--shadow-strong);
-            border: 1px solid var(--panel-border);
-            opacity: 0; /* For animation */
-            animation-duration: 0.35s;
-            animation-fill-mode: forwards;
-        }
-        .modal-overlay.visible .modal-dialog {
-            animation-name: modalZoomIn;
-        }
-        .modal-overlay.hiding .modal-dialog {
-            animation-name: modalZoomOut;
-        }
-        .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--panel-border); }
-        .modal-header h2 { margin: 0; font-size: 1.6em; font-weight: 800; color: var(--accent-primary);}
-        .close-modal-btn { background: none; border: none; font-size: 2.5rem; cursor: pointer; color: var(--text-secondary); transition: var(--transition-smooth); line-height: 1; }
-        .close-modal-btn:hover { color: var(--accent-primary); transform: rotate(90deg) scale(1.1); }
-        /* --- مودال گالری گویندگان (اختصاصی) --- */
-        #speaker-modal .modal-dialog { /* Target specific modal dialog */
-            max-width: 700px;
-            max-height: 85vh; overflow-y: auto;
-        }
-        #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 1.2rem; }
-        @media (min-width: 640px) { #speaker-grid { grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); } }
-        .speaker-card { cursor: pointer; transition: var(--transition-smooth); text-align: center; position: relative;}
-        .speaker-card .speaker-visual {
-            border: 3px solid transparent;
-            border-radius: var(--radius-card);
-            overflow: hidden;
-            box-shadow: var(--shadow-subtle);
-            position: relative;
-            background-color: var(--input-bg);
-            transition: var(--transition-bounce);
-            padding: 6px;
-        }
-        .speaker-card:hover .speaker-visual {
-            transform: translateY(-5px) scale(1.06);
-            box-shadow: var(--shadow-medium);
-            /* border-color: rgba(var(--accent-secondary-rgb), 0.3); */ /* Requires CSS var for RGB components */
-        }
         .speaker-card input[type="radio"] { display: none; }
-        .speaker-card img {
-            width: 100%; height: 120px;
-            object-fit: cover; display: block;
-            background-color: #e0e0e0;
-            transition: transform 0.35s cubic-bezier(0.25, 0.46, 0.45, 0.94);
-            border-radius: calc(var(--radius-card) - 12px);
-        }
-        .speaker-card:hover img { transform: scale(1.12); }
-        .speaker-card .speaker-name { padding: 0.8rem 0.4rem 0.1rem; font-weight: 600; font-size: 0.9em; color: var(--text-secondary); transition: color 0.2s; }
-        .speaker-card input[type="radio"]:checked + .speaker-visual {
-            border-color: var(--accent-secondary);
-            box-shadow: 0 0 25px -5px rgba(16, 185, 129, 0.75);
-            background: linear-gradient(135deg, var(--accent-secondary-hover), var(--accent-primary));
-            transform: scale(1.05);
-        }
-        .speaker-card input[type="radio"]:checked + .speaker-visual img {
-            border: 2px solid white;
-            transform: scale(1.05);
-        }
-        .speaker-card input[type="radio"]:checked + .speaker-visual .speaker-name {
-            color: #fff;
-            font-weight: 700;
-        }
-        /* --- مودال اطلاعات (اختصاصی) --- */
-        #info-modal .modal-dialog {
-            max-width: 480px; /* Smaller width for info */
-        }
-        #info-modal-content p {
-            font-size: 1em;
-            line-height: 1.7;
-            color: var(--text-secondary);
-            margin-bottom: 0.5rem;
-        }
-        #info-modal-content p strong {
-            color: var(--text-primary);
-            font-weight: 600;
-        }
-        #info-modal-content .range-info {
-            font-size: 0.9em;
-            color: var(--accent-primary);
-            font-weight: 500;
-            margin-top: 1rem;
-            display: block;
-            text-align: center;
-        }
-        /* --- Slider & Button & Output --- */
-        .slider-container { display: flex; align-items: center; gap: 1.2rem; }
-        input[type="range"] {
-            flex-grow: 1; -webkit-appearance: none; appearance: none;
-            width: 100%; height: 8px;
-            background: #EAF0F6;
-            border-radius: 4px; outline: none;
-            cursor: pointer;
-            transition: background 0.2s;
-        }
-        input[type="range"]::-webkit-slider-runnable-track {
-            background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%);
-            height: 8px;
-            border-radius: 4px;
-        }
-        input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none; appearance: none;
-            width: 22px; height: 22px;
-            background: #fff;
-            border-radius: 50%; cursor: pointer;
-            border: 3px solid var(--accent-primary);
-            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
-            margin-top: -7px;
-            transition: transform 0.2s ease, box-shadow 0.2s ease;
-        }
-         input[type="range"]::-webkit-slider-thumb:hover, input[type="range"]:focus::-webkit-slider-thumb {
-            transform: scale(1.2);
-            box-shadow: 0 3px 8px rgba(59, 130, 246, 0.35);
-        }
-        input[type="range"]::-moz-range-thumb {
-            width: 22px; height: 22px;
-            background: #fff;
-            border-radius: 50%; cursor: pointer;
-            border: 3px solid var(--accent-primary);
-            box-shadow: 0 2px 6px rgba(0,0,0,0.15);
-        }
-        input[type="range"]::-moz-range-track {
-            background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%);
-            height: 8px;
-            border-radius: 4px;
-            border: none;
-        }
-        #temperature-value {
-            font-weight: 700; background-color: var(--input-bg);
-            padding: 0.5rem 1rem;
-            border-radius: 8px;
-            border: 1px solid var(--panel-border);
-            min-width: 45px; text-align: center;
-            color: var(--accent-primary);
-            font-size: 1em;
-            box-shadow: var(--shadow-subtle);
-        }
-        #generate-btn {
-            width: 100%; padding: 1rem 1.5rem;
-            font-size: 1.25em; font-weight: 800;
-            font-family: var(--app-font);
-            background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%);
-            color: #fff;
-            border: none;
-            border-radius: var(--radius-input);
-            cursor: pointer;
-            transition: var(--transition-smooth), transform 0.15s ease-out;
-            box-shadow: 0 5px 15px -4px rgba(59, 130, 246, 0.45), 0 5px 15px -4px rgba(16, 185, 129, 0.35);
-            position: relative;
-            overflow: hidden;
-            letter-spacing: 0.5px;
-        }
-        #generate-btn::before {
-            content: ''; position: absolute;
-            top: 0; left: -180%; width: 80%; height: 100%;
-            background: linear-gradient(to right, rgba(255,255,255,0) 0%, rgba(255,255,255,0.25) 50%, rgba(255,255,255,0) 100%);
-            transform: skewX(-30deg);
-            transition: left 0.8s cubic-bezier(0.23, 1, 0.32, 1);
-        }
-        #generate-btn:hover::before { left: 180%; }
-        #generate-btn:hover:not(:disabled) {
-            transform: translateY(-5px) scale(1.02);
-            box-shadow: 0 8px 20px -4px rgba(59, 130, 246, 0.55), 0 8px 20px -4px rgba(16, 185, 129, 0.45);
-        }
-        #generate-btn:active:not(:disabled) {
-            transform: translateY(-2px) scale(0.98);
-        }
-        #generate-btn:disabled {
-            background: #B8C2CC;
-            cursor: not-allowed; box-shadow: none; color: #E8EEF3;
-            transform: none;
-        }
-        #generate-btn:disabled::before { display: none; }
-        #generate-btn svg {
-             display:inline-block; margin-left: 0.5em; width:1.2em; height:1.2em;
-             vertical-align: middle;
-        }
-        #output-section {
-            margin-top: 3rem;
-            padding: 2rem;
-            background-color: var(--input-bg);
-            border-radius: var(--radius-card);
-            min-height: 200px;
-            display: flex; align-items: center; justify-content: center;
-            flex-direction: column; gap: 1.5rem;
-            border: 2px dashed var(--panel-border);
-            transition: var(--transition-smooth), border-color 0.5s, box-shadow 0.5s;
-            position: relative;
-            box-shadow: var(--shadow-subtle) inset;
-        }
-        #output-section.has-content {
-             background-color: #fff;
-             border-style: solid;
-             border-color: var(--accent-secondary);
-             box-shadow: 0 0 30px -8px rgba(16, 185, 129, 0.25);
-             padding: 1.5rem;
-        }
-        #output-section.has-content #status-message,
-        #output-section.has-content #loading-animation-wrapper {
-            display: none !important;
-        }
-        #status-message { font-weight: 500; color: var(--text-secondary); text-align: center; font-size: 1.1em; }
-        #audio-player { width: 100%; margin-top: 0; display: none; border-radius: 10px; box-shadow: var(--shadow-medium); }
-        #output-section.has-content #audio-player {
-            margin-top: 0;
-        }
-        #audio-player::-webkit-media-controls-panel { background-color: #fdfdff; border-radius: 10px; padding: 5px; box-shadow: var(--shadow-subtle) inset;}
-        #audio-player::-webkit-media-controls-play-button { color: var(--accent-primary); background-color: rgba(59, 130, 246, 0.1); border-radius: 50%; margin: 5px;}
-        #audio-player::-webkit-media-controls-current-time-display,
-        #audio-player::-webkit-media-controls-time-remaining-display { color: var(--text-secondary); font-weight: 500; }
-        #audio-player::-webkit-media-controls-timeline { background-color: #EAF0F6; border-radius: 5px; margin: 0 10px;}
-        /* --- انیمیشن پردازش --- */
-        #loading-animation-wrapper {
-            display: none;
-            flex-direction: column;
-            align-items: center;
-            justify-content: center;
-            gap: 1.8rem;
-            width: 100%;
-            min-height: 150px;
-        }
-        .orbital-loader {
-            width: 110px;
-            height: 110px;
-            position: relative;
-            animation: rotate-loader-orbital 10s linear infinite;
-        }
-        .orbit {
-            position: absolute;
-            top: 50%; left: 50%;
-            border: 2px dashed rgba(59, 130, 246, 0.25);
-            border-radius: 50%;
-            transform-origin: center center;
-        }
-        .orbit:nth-child(1) { width: 35px; height: 35px; margin: -17.5px 0 0 -17.5px; animation: orbit-spin 2.8s linear infinite reverse; }
-        .orbit:nth-child(2) { width: 65px; height: 65px; margin: -32.5px 0 0 -32.5px; animation: orbit-spin 3.8s linear infinite; }
-        .orbit:nth-child(3) { width: 95px; height: 95px; margin: -47.5px 0 0 -47.5px; animation: orbit-spin 4.8s linear infinite reverse; }
-        .orbit .satellite {
-            position: absolute;
-            width: 10px; height: 10px;
-            border-radius: 50%;
-            background-color: var(--accent-primary);
-            box-shadow: 0 0 8px var(--accent-primary), 0 0 12px var(--accent-secondary);
-        }
-        .orbit:nth-child(1) .satellite { top: -5px; left: 50%; animation: satellite-pulse-1 1.4s ease-in-out infinite alternate; }
-        .orbit:nth-child(2) .satellite { top: 50%; left: -5px; background-color: var(--accent-secondary); animation: satellite-pulse-2 1.4s 0.2s ease-in-out infinite alternate; }
-        .orbit:nth-child(3) .satellite { bottom: -5px; right: 50%; animation: satellite-pulse-3 1.4s 0.4s ease-in-out infinite alternate;}
-        @keyframes rotate-loader-orbital { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-        @keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
-        @keyframes satellite-pulse-1 {
-            from { transform: scale(0.7) translateX(-50%); opacity: 0.6; }
-            to { transform: scale(1.1) translateX(-50%); opacity: 1; }
-        }
-        @keyframes satellite-pulse-2 {
-            from { transform: scale(0.7) translateY(-50%); opacity: 0.6; }
-            to { transform: scale(1.1) translateY(-50%); opacity: 1; }
-        }
-        @keyframes satellite-pulse-3 {
-            from { transform: scale(0.7) translateX(50%); opacity: 0.6; }
-            to { transform: scale(1.1) translateX(50%); opacity: 1; }
-        }
-        #loading-text {
-            font-size: 1.2em;
-            font-weight: 700;
-            color: var(--text-primary);
-            text-align: center;
-            background: linear-gradient(45deg, var(--accent-primary), var(--accent-secondary));
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-        }
     </style>
 </head>
 <body>
     <div class="container">
         <header class="app-header">
-            <h1>تبدیل متن به صدا با هوش مصنوعی آلفا</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="4" placeholder="متن خود را اینجا وارد کنید..."></textarea>
-                    <div class="char-counter-wrapper">
-                        <span id="char-count">0</span> / <span id="char-max">50000</span> نویسه
-                    </div>
                 </div>
                 <div class="form-group">
-                    <label for="prompt-input">🗣️ توصیف سبک و لحن گفتار (اختیاری)</label>
-                    <input type="text" id="prompt-input" placeholder="مثال: با لحنی رسمی و موقر، یا شاد و کودکانه">
                 </div>
                 <div class="form-group">
-                    <label>🎤 انتخاب گوینده حرفه‌ای</label>
                     <div id="selected-speaker-display">
-                        <div id="selected-speaker-card" title="برای تغییر گوینده کلیک کنید">
                             <img id="selected-speaker-img" src="" alt="عکس گوینده">
                             <div id="selected-speaker-info">
                                 <h3 id="selected-speaker-name"></h3>
-                                <p id="selected-speaker-desc">گوینده پیش‌فرض</p>
                             </div>
                         </div>
-                        <button type="button" id="change-speaker-btn">
-                            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
-                                <path d="M12 2.5a5.5 5.5 0 0 1 5.5 5.5c0 1.826-.889 3.442-2.257 4.494.04.054.082.106.126.158A7.5 7.5 0 0 1 21.75 18H2.25a7.5 7.5 0 0 1 6.381-5.348c.044-.052.087-.104.127-.158A5.502 5.502 0 0 1 6.5 8a5.5 5.5 0 0 1 5.5-5.5Zm3.018 9.589A7.502 7.502 0 0 0 12 11.5a7.502 7.502 0 0 0-3.018.589C6.44 12.51 5.018 13.56 4.135 14.997a.75.75 0 0 0 .614.853A10.51 10.51 0 0 0 12 16.5a10.51 10.51 0 0 0 7.251-.65.75.75 0 0 0 .614-.853 9.998 9.998 0 0 0-4.847-2.408Z" />
-                              </svg>
-                            تغییر گوینده
-                        </button>
                     </div>
                 </div>
                 <div class="form-group">
-                    <div class="label-with-info">
-                        <label for="temperature-slider">🌡️ میزان خلاقیت و نوآوری صدا</label>
-                        <div class="info-icon" id="temp-info-icon" role="button" tabindex="0" aria-label="اطلاعات بیشتر">!
-                            <!-- Tooltip text removed, will be shown in modal -->
-                        </div>
-                    </div>
                     <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>
-                <div id="loading-animation-wrapper">
-                     <div class="orbital-loader">
-                        <div class="orbit"><div class="satellite"></div></div>
-                        <div class="orbit"><div class="satellite"></div></div>
-                        <div class="orbit"><div class="satellite"></div></div>
-                    </div>
-                    <p id="loading-text">در حال پردازش هوشمند و تولید صدا...</p>
-                </div>
                 <audio id="audio-player" controls></audio>
             </div>
         </main>
     </div>
-    <!-- مودال گالری گویندگان -->
-    <div id="speaker-modal" class="modal-overlay">
-        <div class="modal-dialog">
             <div class="modal-header">
-                <h2>گالری گویندگان آلفا نوا</h2>
-                <button type="button" class="close-modal-btn" data-modal-id="speaker-modal" aria-label="بستن مودال">×</button>
-            </div>
-            <div id="speaker-grid">
-                <!-- Speaker cards will be generated here by JS -->
             </div>
         </div>
     </div>
-    <!-- مودال اطلاعات خلاقیت صدا -->
-    <div id="info-modal" class="modal-overlay">
-        <div class="modal-dialog">
-            <div class="modal-header">
-                <h2>🌡️ خلاقیت و نوآوری صدا</h2>
-                <button type="button" class="close-modal-btn" data-modal-id="info-modal" aria-label="بستن توضیحات">×</button>
-            </div>
-            <div id="info-modal-content">
-                <p>این تنظیم مشخص می‌کند که هوش مصنوعی تا چه حد در تولید صدا <strong>خلاقیت</strong> به خرج دهد.</p>
-                <p><strong>مقادیر بالاتر:</strong> منجر به صدایی متنوع‌تر، پویاتر و گاهی اوقات غیرمنتظره‌تر می‌شود. مناسب برای زمانی که به دنبال لحنی خاص و منحصربه‌فرد هستید.</p>
-                <p><strong>مقادیر پایین‌تر:</strong> صدایی پایدارتر، قابل پیش‌بینی‌تر و نزدیک‌تر به صدای استاندارد گوینده تولید می‌کند. مناسب برای خوانش متون رسمی یا زمانی که ثبات لحن اهمیت دارد.</p>
-                <span class="range-info">محدوده پیشنهادی: ۰.۱ (پایدار) تا ۱.۵ (بسیار خلاق)</span>
-            </div>
-        </div>
-    </div>
-    <input type="hidden" id="selected_speaker_id_storage" value="Charon">
     <script>
         document.addEventListener('DOMContentLoaded', () => {
@@ -661,247 +158,144 @@
             const FILE_URL_BASE = `${HF_SPACE_URL}/gradio_api/file=`;
             const FN_INDEX = 1;
             const speakers = [
-                { id: "Charon", name: "شهاب (مرد)", desc: "صدایی قدرتمند و رسا" },
-                { id: "Zephyr", name: "آوا (زن)", desc: "لطیف و دلنشین" },
-                { id: "Achird", name: "نوید (مرد)", desc: "جوان و پرانرژی" },
-                { id: "Zubenelgenubi", name: "رویا (زن)", desc: "گرم و صمیمی" },
-                { id: "Vindemiatrix", name: "کیان (مرد)", desc: "باوقار و رسمی" },
-                { id: "Sadachbia", name: "پریسا (زن)", desc: "شاداب و پویا" },
-                { id: "Sadaltager", name: "آرش (مرد)", desc: "مطمئن و تاثیرگذار" },
-                { id: "Sulafat", name: "شبنم (زن)", desc: "آرام و متین" },
-                { id: "Laomedeia", name: "سهیل (مرد)", desc: "دوستانه و گیرا" },
-                { id: "Achernar", name: "مریم (زن)", desc: "حرفه‌ای و واضح" },
-                { id: "Alnilam", name: "بهرام (مرد)", desc: "حماسی و نافذ" },
-                { id: "Schedar", name: "نگار (زن)", desc: "مهربان و شیرین" },
-                { id: "Gacrux", name: "فرید (مرد)", desc: "پخته و قابل اعتماد" },
-                { id: "Pulcherrima", name: "سارا (زن)", desc: "جذاب و مدرن" },
-                { id: "Umbriel", name: "مانی (مرد)", desc: "خلاق و متفاوت" },
-                { id: "Algieba", name: "آناهیتا (زن)", desc: "با اصالت و شیک" },
-                { id: "Despina", name: "دلنواز (زن)", desc: "هنری و احساسی" },
-                { id: "Erinome", name: "رسا (مرد)", desc: "شفاف و گویا" },
-                { id: "Algenib", name: "امید (مرد)", desc: "انگیزه بخش و مثبت" },
-                { id: "Rasalthgeti", name: "��لهه (زن)", desc: "اسرارآمیز و فریبنده" },
-                { id: "Orus", name: "بردیا (مرد)", desc: "ورزشی و پرهیجان" },
-                { id: "Aoede", name: "ترانه (زن)", desc: "موزیکال و خوش‌آهنگ" },
-                { id: "Callirrhoe", name: "نیما (مرد)", desc: "روایتگر و قصه‌گو" },
-                { id: "Autonoe", name: "هستی (زن)", desc: "طبیعی و خودمانی" },
-                { id: "Enceladus", name: "کامیار (مرد)", desc: "مصمم و جدی" },
-                { id: "Iapetus", name: "ستاره (زن)", desc: "درخشان و گیرا" },
-                { id: "Puck", name: "پویا (مرد)", desc: "بازیگوش و سرزنده" },
-                { id: "Kore", name: "مهتاب (زن)", desc: "نجواگر و آرامش‌بخش" },
-                { id: "Fenrir", name: "سام (مرد)", desc: "جسور و بی‌باک" },
-                { id: "Leda", name: "لیدا (زن)", desc: "کلاسیک و باوقار" }
             ];
             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 outputSection = document.getElementById('output-section');
             const statusMessage = document.getElementById('status-message');
             const audioPlayer = document.getElementById('audio-player');
-            const loadingAnimationWrapper = document.getElementById('loading-animation-wrapper');
             const selectedSpeakerIdStorage = document.getElementById('selected_speaker_id_storage');
             const changeSpeakerBtn = document.getElementById('change-speaker-btn');
-            const selectedSpeakerCard = document.getElementById('selected-speaker-card');
             const speakerGridInModal = document.getElementById('speaker-grid');
             const selectedSpeakerImgDisplay = document.getElementById('selected-speaker-img');
             const selectedSpeakerNameDisplay = document.getElementById('selected-speaker-name');
-            const selectedSpeakerDescDisplay = document.getElementById('selected-speaker-desc');
-            // Modal Elements
-            const speakerModal = document.getElementById('speaker-modal');
-            const infoModal = document.getElementById('info-modal');
-            const tempInfoIcon = document.getElementById('temp-info-icon');
-            // Character Counter
-            const charCountSpan = document.getElementById('char-count');
-            const charMaxSpan = document.getElementById('char-max');
-            const MAX_CHARS = 50000;
-            charMaxSpan.textContent = MAX_CHARS.toLocaleString('fa-IR');
-            textInput.addEventListener('input', () => {
-                const currentLength = textInput.value.length;
-                charCountSpan.textContent = currentLength.toLocaleString('fa-IR');
-                if (currentLength > MAX_CHARS) {
-                    charCountSpan.style.color = 'var(--accent-secondary-hover)';
-                } else {
-                    charCountSpan.style.color = 'var(--accent-primary)';
-                }
-            });
             function getSpeakerById(id) {
-                return speakers.find(s => s.id === id) || speakers[0];
             }
-            function getImageUrl(speaker, index, size = 'thumb') {
-                const gender = speaker.name.includes('(مرد)') ? 'men' : 'women';
-                const imageIndex = (index * 7 + speaker.id.length * 3 + 5) % 100;
-                let portraitSizePath = 'thumb/';
-                if (size === 'large') portraitSizePath = '';
-                return `https://randomuser.me/api/portraits/${portraitSizePath}${gender}/${imageIndex}.jpg`;
             }
             function updateSelectedSpeakerDisplay(speakerId) {
                 const speaker = getSpeakerById(speakerId);
-                const speakerIndex = speakers.findIndex(s => s.id === speaker.id);
-                selectedSpeakerImgDisplay.src = getImageUrl(speaker, speakerIndex, 'large');
-                selectedSpeakerImgDisplay.alt = `عکس گوینده ${speaker.name}`;
-                selectedSpeakerNameDisplay.textContent = speaker.name;
-                selectedSpeakerDescDisplay.textContent = speaker.desc || "گوینده منتخب شما";
-                selectedSpeakerIdStorage.value = speaker.id;
             }
             function createSpeakerCardsInModal() {
-                speakerGridInModal.innerHTML = '';
                 speakers.forEach((speaker, index) => {
-                    const cardLabel = document.createElement('label');
-                    cardLabel.className = 'speaker-card';
-                    cardLabel.setAttribute('for', `modal-speaker-${speaker.id}`);
                     const isChecked = speaker.id === selectedSpeakerIdStorage.value ? 'checked' : '';
-                    cardLabel.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, 'thumb')}" alt="${speaker.name}" loading="lazy">
                             <div class="speaker-name">${speaker.name}</div>
                         </div>
                     `;
-                    cardLabel.addEventListener('click', (e) => {
-                        if (e.target.name !== "modal_speaker_selection") {
-                             const radio = cardLabel.querySelector('input[type="radio"]');
-                             if(radio) radio.checked = true;
-                        }
                         updateSelectedSpeakerDisplay(speaker.id);
-                        hideModal(speakerModal);
                     });
-                    speakerGridInModal.appendChild(cardLabel);
                 });
             }
-            // --- Modal Management ---
-            function showModal(modalElement) {
-                modalElement.classList.add('visible');
-                // Focus first focusable element in modal
-                setTimeout(() => {
-                     const firstFocusable = modalElement.querySelector('button, [href], input, select, textarea, [tabindex]:not([tabindex="-1"])');
-                     if (firstFocusable) firstFocusable.focus();
-                }, 50); // Allow transition to start
-            }
-            function hideModal(modalElement) {
-                modalElement.classList.add('hiding'); // Add class for exit animation
-                modalElement.addEventListener('animationend', () => {
-                    modalElement.classList.remove('visible', 'hiding');
-                }, { once: true });
-            }
-            // Speaker Modal Listeners
             changeSpeakerBtn.addEventListener('click', () => {
-                createSpeakerCardsInModal();
-                showModal(speakerModal);
-            });
-            selectedSpeakerCard.addEventListener('click', () => {
-                createSpeakerCardsInModal();
-                showModal(speakerModal);
-            });
-            // Info Modal Listener
-            tempInfoIcon.addEventListener('click', () => showModal(infoModal));
-            tempInfoIcon.addEventListener('keydown', (e) => {
-                if (e.key === 'Enter' || e.key === ' ') {
-                    e.preventDefault();
-                    showModal(infoModal);
-                }
-            });
-            // General Modal Close Listeners (for all modals)
-            document.querySelectorAll('.modal-overlay').forEach(overlay => {
-                overlay.addEventListener('click', (e) => {
-                    if (e.target === overlay) { // Click on backdrop
-                        hideModal(overlay);
-                    }
-                });
-            });
-            document.querySelectorAll('.close-modal-btn').forEach(button => {
-                button.addEventListener('click', () => {
-                    const modalId = button.dataset.modalId;
-                    if (modalId) {
-                        hideModal(document.getElementById(modalId));
-                    }
-                });
             });
-            document.addEventListener('keydown', (e) => {
-                if (e.key === 'Escape') {
-                    document.querySelectorAll('.modal-overlay.visible').forEach(hideModal);
                 }
             });
             tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
-            function showLoadingState() {
-                outputSection.classList.remove('has-content');
-                statusMessage.style.display = 'none';
-                audioPlayer.style.display = 'none';
-                audioPlayer.src = '';
-                loadingAnimationWrapper.style.display = 'flex';
-                generateBtn.disabled = true;
-                generateBtn.innerHTML = `
-                    <svg aria-hidden="true" role="status" fill="currentColor" viewBox="0 0 100 101" style="display:inline-block; margin-left: 0.5em; width:1.2em; height:1.2em; vertical-align: middle; animation: spin 1s linear infinite;">
-                        <path d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z" fill="#E5E7EB"/>
-                        <path d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0492C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z" fill="currentColor"/>
-                    </svg>
-                    در حال پردازش...
-                `;
-            }
-            function showResultState(isSuccess, message = '') {
-                loadingAnimationWrapper.style.display = 'none';
-                if (isSuccess) {
-                    statusMessage.style.display = 'none';
-                    audioPlayer.style.display = 'block';
-                    outputSection.classList.add('has-content');
-                } else {
-                    statusMessage.textContent = message || 'خطایی رخ داد. لطفاً دوباره تلاش کنید.';
-                    statusMessage.style.display = 'block';
-                    audioPlayer.style.display = 'none';
-                    outputSection.classList.remove('has-content');
-                }
-                generateBtn.disabled = false;
-                generateBtn.innerHTML = '✨ تولید صدا با آلفا';
-            }
             async function generateAudio(event) {
                 event.preventDefault();
-                showLoadingState();
                 const text = textInput.value;
                 if (!text.trim()) {
-                    showResultState(false, 'خطا: متن ورودی نمی‌تواند خالی باشد.');
-                    return;
-                }
-                if (text.length > MAX_CHARS) {
-                    showResultState(false, `خطا: طول متن بیش از ${MAX_CHARS.toLocaleString('fa-IR')} نویسه است.`);
                     return;
                 }
-                const promptVal = promptInput.value;
-                const temperatureVal = parseFloat(tempSlider.value);
-                const selectedSpeakerVal = selectedSpeakerIdStorage.value;
-                const sessionHash = Math.random().toString(36).substring(2);
                 const payload = {
                     fn_index: FN_INDEX,
-                    data: [false, null, text, promptVal, selectedSpeakerVal, temperatureVal],
                     event_data: null,
                     session_hash: sessionHash
                 };
@@ -915,78 +309,67 @@
                     if (!joinQueueResponse.ok) {
                          const errorBody = await joinQueueResponse.text();
-                         console.error("Join Queue Error Body:", errorBody);
-                         throw new Error(`خطا در برقراری ارتباط با سرویس آلفا (${joinQueueResponse.status}). لطفا لحظاتی دیگر تلاش کنید.`);
                     }
                     let finalFilePath = null;
-                    const startTime = Date.now();
-                    const timeoutDuration = 90000;
-                    while (Date.now() - startTime < timeoutDuration) {
-                        const dataResponse = await fetch(`${GET_DATA_URL_BASE}?session_hash=${sessionHash}`);
-                        if (!dataResponse.ok) {
-                             const errorBody = await dataResponse.text();
-                             console.error("Get Data Error Body:", errorBody);
-                             throw new Error(`خطا در دریافت داده از سرویس (${dataResponse.status})`);
-                        }
-                        const responseText = await dataResponse.text();
-                        const lines = responseText.trim().split('\n');
                         for (const line of lines) {
                             if (!line.startsWith('data:')) continue;
                             try {
                                 const data = JSON.parse(line.substring(5));
-                                if (data.msg === 'process_generating' || data.msg === 'process_starts') {
-                                    // console.log("Processing:", data.output?.progress_data?.[0]?.desc || data.msg);
-                                } else 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("Invalid server response structure or unsuccessful processing:", data);
-                                        throw new Error(data.output?.error || 'خطای ناشناخته در پردازش سرور.');
                                     }
-                                    break;
-                                } else if (data.msg === 'queue_full') {
-                                    throw new Error('صف پردازش پر است. لطفا کمی بعد تلاش کنید.');
                                 }
-                            } catch (e) {
-                                console.warn("Error parsing JSON from stream:", e, "Line:", line);
-                            }
                         }
-                        if (finalFilePath) break;
-                        await new Promise(resolve => setTimeout(resolve, 1000));
                     }
                     if (finalFilePath) {
                         const audioUrl = `${FILE_URL_BASE}${finalFilePath}`;
                         audioPlayer.src = audioUrl;
-                        showResultState(true);
-                    } else if (Date.now() - startTime >= timeoutDuration) {
-                        throw new Error('پردازش بیش از حد طول کشید و متوقف شد.');
                     } else {
-                         throw new Error('فایل صوتی از سرور دریافت نشد یا پردازش ناموفق بود.');
                     }
                 } catch (error) {
-                    console.error('خطا در فرآیند تولید صدا:', error);
-                    showResultState(false, `${error.message}`);
                 }
             }
-            updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value || speakers[0].id);
             form.addEventListener('submit', generateAudio);
-            statusMessage.style.display = 'block';
-            loadingAnimationWrapper.style.display = 'none';
-            audioPlayer.style.display = 'none';
-            outputSection.classList.remove('has-content');
-            const styleSheet = document.createElement("style")
-            styleSheet.type = "text/css"
-            styleSheet.innerText = `@keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }`;
-            document.head.appendChild(styleSheet);
         });
     </script>
 </body>

 <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 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
                 };
                     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>