Veu3

Running

App Files Files Community

Hamed744 commited on Jun 9

Commit

fe60ee7

verified ·

1 Parent(s): 41da9f6

Update index.html

Browse files

Files changed (1) hide show

index.html +312 -673

index.html CHANGED Viewed

@@ -3,758 +3,397 @@
 <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: #667eea;
-            --app-header-grad-end: #764ba2;
-            --app-panel-bg: rgba(255, 255, 255, 0.95);
-            --app-input-bg: rgba(248, 249, 250, 0.8);
-            --app-button-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --app-button-hover-bg: linear-gradient(135deg, #5a6fd8 0%, #6a4190 100%);
-            --app-main-bg: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-            --app-text-primary: #2c3e50;
-            --app-text-secondary: #555;
-            --app-border-color: rgba(224, 224, 224, 0.5);
             --radius-card: 24px;
-            --radius-input: 16px;
-            --shadow-card: 0 20px 40px -10px rgba(0,0,0,0.1);
-            --shadow-button: 0 8px 25px -5px rgba(102, 126, 234, 0.4);
-            --speaker-selected-glow: 0 0 25px rgba(102, 126, 234, 0.6);
-            --accent-color: #ff6b6b;
-            --success-color: #4ecdc4;
-        }
-        * {
-            margin: 0;
-            padding: 0;
-            box-sizing: border-box;
         }
         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;
             min-height: 100vh;
-            -webkit-font-smoothing: antialiased;
-            -moz-osx-font-smoothing: grayscale;
-            position: relative;
-            overflow-x: hidden;
         }
-        /* Background Animation */
         body::before {
             content: '';
             position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background:
-                radial-gradient(circle at 20% 80%, rgba(120, 119, 198, 0.3) 0%, transparent 50%),
-                radial-gradient(circle at 80% 20%, rgba(255, 107, 107, 0.3) 0%, transparent 50%),
-                radial-gradient(circle at 40% 40%, rgba(78, 205, 196, 0.2) 0%, transparent 50%);
-            animation: backgroundMove 20s ease-in-out infinite;
             z-index: -1;
         }
-        @keyframes backgroundMove {
-            0%, 100% { transform: translateX(0) translateY(0) rotate(0deg); }
-            33% { transform: translateX(-30px) translateY(-50px) rotate(0.5deg); }
-            66% { transform: translateX(20px) translateY(20px) rotate(-0.5deg); }
-        }
-        .container {
-            max-width: 900px;
-            width: 95%;
-            margin: 0 auto;
-            padding-bottom: 40px;
-        }
-        .app-header {
-            padding: 4rem 2rem 6rem 2rem;
-            text-align: center;
-            background: 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 10px 30px -5px rgba(0,0,0,0.3);
-            position: relative;
-            overflow: hidden;
         }
-        .app-header::before {
-            content: '';
-            position: absolute;
-            top: -50%;
-            left: -50%;
-            width: 200%;
-            height: 200%;
-            background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
-            animation: headerShine 8s ease-in-out infinite;
         }
-        @keyframes headerShine {
-            0%, 100% { transform: rotate(0deg); opacity: 0.3; }
-            50% { transform: rotate(180deg); opacity: 0.1; }
         }
-        .app-header h1 {
-            font-size: 3.2em;
-            font-weight: 800;
-            margin: 0 0 1rem 0;
-            text-shadow: 0 4px 8px rgba(0,0,0,0.2);
-            position: relative;
-            z-index: 1;
-            background: linear-gradient(45deg, #fff, #f0f8ff);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
-            background-clip: text;
         }
-        .app-header p {
-            font-size: 1.3em;
-            color: rgba(255,255,255,0.9);
-            margin-top: 0;
-            opacity: 0.95;
-            position: relative;
-            z-index: 1;
         }
-        .main-content {
-            padding: 3rem;
-            margin: -4rem auto 2rem auto;
-            background: var(--app-panel-bg);
             backdrop-filter: blur(20px);
-            border-radius: var(--radius-card);
-            box-shadow: var(--shadow-card);
-            border: 1px solid rgba(255, 255, 255, 0.2);
-        }
-        .form-group {
-            margin-bottom: 2.8rem;
             position: relative;
         }
-        label {
-            display: block;
-            font-weight: 700;
-            color: var(--app-text-primary);
-            font-size: 1.2em;
-            margin-bottom: 1rem;
-            position: relative;
-        }
-        label::after {
-            content: '';
-            position: absolute;
-            bottom: -5px;
-            right: 0;
-            width: 30px;
-            height: 3px;
-            background: linear-gradient(90deg, var(--accent-color), transparent);
-            border-radius: 2px;
-        }
-        textarea, input[type="text"] {
-            width: 100%;
-            padding: 1.2rem 1.5rem;
-            border-radius: var(--radius-input);
-            border: 2px solid var(--app-border-color);
-            background: var(--app-input-bg);
-            backdrop-filter: blur(10px);
-            box-shadow: 0 4px 15px rgba(0,0,0,0.05);
-            font-family: var(--app-font);
-            font-size: 1rem;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            position: relative;
-        }
-        textarea:focus, input[type="text"]:focus {
-            outline: none;
-            border-color: var(--accent-color);
-            box-shadow: 0 0 0 4px rgba(255, 107, 107, 0.2), 0 8px 25px rgba(0,0,0,0.1);
-            background: rgba(255, 255, 255, 0.95);
-            transform: translateY(-2px);
-        }
-        /* Enhanced Speaker Selection */
-        #selected-speaker-display {
-            text-align: center;
-        }
-        #selected-speaker-card {
-            display: inline-flex;
-            align-items: center;
-            background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.9) 100%);
-            backdrop-filter: blur(15px);
-            border-radius: 20px;
-            padding: 15px 20px;
-            box-shadow: 0 10px 30px rgba(0,0,0,0.1);
-            border: 2px solid rgba(255, 255, 255, 0.3);
-            transition: all 0.3s ease;
-        }
-        #selected-speaker-card:hover {
-            transform: translateY(-3px);
-            box-shadow: 0 15px 40px rgba(0,0,0,0.15);
-        }
-        #selected-speaker-card img {
-            width: 90px;
-            height: 90px;
-            border-radius: 50%;
-            object-fit: cover;
-            margin-left: 20px;
-            background-color: #eee;
-            border: 3px solid rgba(255, 255, 255, 0.8);
-            box-shadow: 0 4px 15px rgba(0,0,0,0.1);
-        }
-        #selected-speaker-info h3 {
-            margin: 0;
-            font-size: 1.5em;
-            color: var(--app-text-primary);
-        }
-        #selected-speaker-info p {
-            margin: 8px 0 0;
-            color: var(--app-text-secondary);
-            font-size: 0.95em;
-        }
-        #change-speaker-btn {
-            display: block;
-            margin: 1.5rem auto 0;
-            padding: 12px 30px;
-            border-radius: 12px;
-            background: linear-gradient(135deg, var(--app-input-bg) 0%, rgba(248,249,250,0.9) 100%);
-            border: 2px solid var(--app-border-color);
-            cursor: pointer;
-            font-family: var(--app-font);
-            font-weight: 600;
-            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
-            backdrop-filter: blur(10px);
-        }
-        #change-speaker-btn:hover {
-            background: linear-gradient(135deg, #e9ecef 0%, #f8f9fa 100%);
-            border-color: var(--accent-color);
-            transform: translateY(-2px);
-            box-shadow: 0 6px 20px rgba(0,0,0,0.1);
-        }
-        /* Enhanced Modal */
-        #speaker-modal {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: rgba(0,0,0,0.6);
-            backdrop-filter: blur(10px);
-            display: none;
-            align-items: center;
-            justify-content: center;
-            z-index: 1000;
-            opacity: 0;
-            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-        #speaker-modal.visible {
-            display: flex;
-            opacity: 1;
-        }
-        .modal-content {
-            background: linear-gradient(135deg, rgba(255,255,255,0.95) 0%, rgba(248,249,250,0.95) 100%);
-            backdrop-filter: blur(20px);
-            padding: 2.5rem;
-            border-radius: var(--radius-card);
-            width: 90%;
-            max-width: 800px;
-            max-height: 85vh;
-            overflow-y: auto;
-            transform: scale(0.9) translateY(50px);
-            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-            border: 1px solid rgba(255, 255, 255, 0.3);
-            box-shadow: 0 25px 50px rgba(0,0,0,0.2);
-        }
-        #speaker-modal.visible .modal-content {
-            transform: scale(1) translateY(0);
-        }
-        .modal-header {
-            display: flex;
-            justify-content: space-between;
-            align-items: center;
-            margin-bottom: 2rem;
-        }
-        .modal-header h2 {
-            margin: 0;
-            font-size: 1.8em;
-            color: var(--app-text-primary);
-        }
-        .close-modal-btn {
-            background: none;
-            border: none;
-            font-size: 2.5rem;
-            cursor: pointer;
-            color: #999;
             transition: all 0.3s ease;
-            width: 40px;
-            height: 40px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            border-radius: 50%;
-        }
-        .close-modal-btn:hover {
-            color: var(--accent-color);
-            background: rgba(255, 107, 107, 0.1);
-            transform: rotate(90deg);
-        }
-        #speaker-grid {
-            display: grid;
-            grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
-            gap: 1.5rem;
-        }
-        @media (min-width: 576px) {
-            #speaker-grid {
-                grid-template-columns: repeat(4, 1fr);
-            }
-        }
-        .speaker-card {
-            cursor: pointer;
-            transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
-        }
-        .speaker-card .speaker-visual {
-            border: 3px solid transparent;
-            border-radius: var(--radius-card);
-            overflow: hidden;
-            text-align: center;
-            box-shadow: 0 6px 20px rgba(0,0,0,0.08);
-            position: relative;
-            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
-            backdrop-filter: blur(10px);
-        }
-        .speaker-card:hover .speaker-visual {
-            transform: translateY(-5px) scale(1.02);
-            box-shadow: 0 12px 30px rgba(0,0,0,0.15);
         }
-        .speaker-card input[type="radio"] {
-            display: none;
-        }
-        .speaker-card img {
-            width: 100%;
-            height: 140px;
-            object-fit: cover;
-            display: block;
-            background-color: #eee;
-        }
-        .speaker-card .speaker-name {
-            padding: 1rem 0.8rem;
-            font-weight: 600;
-            font-size: 0.95em;
-            color: var(--app-text-primary);
-        }
-        .speaker-card input[type="radio"]:checked + .speaker-visual {
-            border-color: var(--accent-color);
-            box-shadow: var(--speaker-selected-glow), 0 12px 30px rgba(0,0,0,0.15);
-            transform: scale(1.05);
         }
-        /* Enhanced Slider */
-        .slider-container {
-            display: flex;
-            align-items: center;
-            gap: 1.5rem;
-            background: var(--app-input-bg);
-            backdrop-filter: blur(10px);
             padding: 1rem 1.5rem;
             border-radius: var(--radius-input);
-            border: 2px solid var(--app-border-color);
-        }
-        input[type="range"] {
-            flex-grow: 1;
-            cursor: pointer;
-            height: 8px;
-            background: linear-gradient(90deg, var(--accent-color), var(--success-color));
-            border-radius: 5px;
-            outline: none;
-            -webkit-appearance: none;
-        }
-        input[type="range"]::-webkit-slider-thumb {
-            -webkit-appearance: none;
-            width: 20px;
-            height: 20px;
-            border-radius: 50%;
-            background: linear-gradient(135deg, var(--accent-color), #ff8a8a);
             cursor: pointer;
-            box-shadow: 0 2px 10px rgba(255, 107, 107, 0.4);
-        }
-        #temperature-value {
-            font-weight: bold;
-            background: linear-gradient(135deg, rgba(255,255,255,0.9), rgba(248,249,250,0.9));
-            padding: 0.5rem 1rem;
-            border-radius: 10px;
-            border: 2px solid rgba(255, 107, 107, 0.3);
-            min-width: 50px;
-            text-align: center;
-            color: var(--accent-color);
-            font-size: 1.1em;
-        }
-        /* Enhanced Generate Button */
-        #generate-btn {
-            width: 100%;
-            padding: 1.5rem 2rem;
-            font-size: 1.3em;
-            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.4s cubic-bezier(0.4, 0, 0.2, 1);
-            box-shadow: var(--shadow-button);
             position: relative;
             overflow: hidden;
         }
-        #generate-btn::before {
-            content: '';
-            position: absolute;
-            top: 0;
-            left: -100%;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(90deg, transparent, rgba(255,255,255,0.2), transparent);
-            transition: left 0.6s;
-        }
-        #generate-btn:hover::before {
-            left: 100%;
-        }
-        #generate-btn:hover:not(:disabled) {
-            background: var(--app-button-hover-bg);
-            transform: translateY(-3px);
-            box-shadow: 0 12px 35px -5px rgba(102, 126, 234, 0.6);
         }
-        #generate-btn:disabled {
-            background: linear-gradient(135deg, #999, #777);
-            cursor: not-allowed;
-            box-shadow: none;
             transform: none;
         }
-        #output-section {
-            margin-top: 3rem;
-            padding: 2rem;
-            background: linear-gradient(135deg, rgba(255,255,255,0.9) 0%, rgba(248,249,250,0.9) 100%);
-            backdrop-filter: blur(15px);
-            border-radius: var(--radius-card);
-            min-height: 120px;
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            flex-direction: column;
-            gap: 1.5rem;
-            border: 2px solid rgba(255, 255, 255, 0.3);
-            box-shadow: 0 10px 30px rgba(0,0,0,0.08);
-        }
-        #status-message {
-            font-weight: 600;
-            color: var(--app-text-secondary);
-            font-size: 1.1em;
-        }
-        #audio-player {
-            width: 100%;
-            margin-top: 1rem;
-            display: none;
-            border-radius: 12px;
-        }
-        /* Loading Animation */
-        .loading-overlay {
-            position: fixed;
-            top: 0;
-            left: 0;
-            width: 100%;
-            height: 100%;
-            background: linear-gradient(135deg, rgba(102, 126, 234, 0.95), rgba(118, 75, 162, 0.95));
-            display: none;
             align-items: center;
             justify-content: center;
-            z-index: 2000;
-            backdrop-filter: blur(20px);
-        }
-        .loading-overlay.active {
-            display: flex;
-        }
-        .loading-content {
-            text-align: center;
-            color: white;
-            max-width: 600px;
-            padding: 3rem;
-        }
-        .loading-animation {
             position: relative;
-            width: 200px;
-            height: 200px;
-            margin: 0 auto 3rem;
-        }
-        .sound-wave {
-            position: absolute;
-            left: 50%;
-            top: 50%;
-            transform: translate(-50%, -50%);
-            width: 8px;
-            background: linear-gradient(45deg, #ff6b6b, #4ecdc4, #45b7d1, #96ceb4);
-            border-radius: 4px;
-            animation: soundWave 1.5s ease-in-out infinite;
-        }
-        .sound-wave:nth-child(1) { left: 45%; animation-delay: 0s; height: 20px; }
-        .sound-wave:nth-child(2) { left: 48%; animation-delay: 0.1s; height: 40px; }
-        .sound-wave:nth-child(3) { left: 51%; animation-delay: 0.2s; height: 60px; }
-        .sound-wave:nth-child(4) { left: 54%; animation-delay: 0.3s; height: 40px; }
-        .sound-wave:nth-child(5) { left: 57%; animation-delay: 0.4s; height: 20px; }
-        @keyframes soundWave {
-            0%, 100% {
-                transform: translate(-50%, -50%) scaleY(0.5);
-                opacity: 0.7;
-            }
-            50% {
-                transform: translate(-50%, -50%) scaleY(1.5);
-                opacity: 1;
-            }
         }
-        .ai-circle {
             position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            width: 120px;
-            height: 120px;
-            border: 3px solid rgba(255, 255, 255, 0.2);
             border-radius: 50%;
-            animation: aiRotate 3s linear infinite;
-        }
-        .ai-circle::before {
-            content: '🤖';
-            position: absolute;
-            top: 50%;
-            left: 50%;
-            transform: translate(-50%, -50%);
-            font-size: 3rem;
-            animation: aiPulse 2s ease-in-out infinite;
-        }
-        @keyframes aiRotate {
-            0% { transform: translate(-50%, -50%) rotate(0deg); }
-            100% { transform: translate(-50%, -50%) rotate(360deg); }
-        }
-        @keyframes aiPulse {
-            0%, 100% { transform: translate(-50%, -50%) scale(1); }
-            50% { transform: translate(-50%, -50%) scale(1.1); }
-        }
-        .loading-text h2 {
-            font-size: 2.5em;
-            margin-bottom: 1rem;
-            background: linear-gradient(45deg, #fff, #f0f8ff, #e6f3ff);
-            -webkit-background-clip: text;
-            -webkit-text-fill-color: transparent;
-            background-clip: text;
-            animation: textGlow 2s ease-in-out infinite alternate;
-        }
-        .loading-text p {
-            font-size: 1.3em;
-            opacity: 0.9;
-            animation: textFade 3s ease-in-out infinite;
-        }
-        @keyframes textGlow {
-            0% { opacity: 0.8; }
-            100% { opacity: 1; }
-        }
-        @keyframes textFade {
-            0%, 100% { opacity: 0.7; }
-            50% { opacity: 1; }
         }
-        .progress-bar {
-            width: 100%;
-            height: 6px;
-            background: rgba(255, 255, 255, 0.2);
-            border-radius: 3px;
-            margin-top: 2rem;
-            overflow: hidden;
         }
-        .progress-fill {
-            height: 100%;
-            background: linear-gradient(90deg, #ff6b6b, #4ecdc4, #45b7d1);
-            border-radius: 3px;
-            animation: progressMove 2s ease-in-out infinite;
         }
-        @keyframes progressMove {
-            0% { width: 10%; }
-            50% { width: 80%; }
-            100% { width: 100%; }
         }
-        /* Responsive Design */
-        @media (max-width: 768px) {
-            .app-header {
-                padding: 3rem 1.5rem 4rem;
-            }
-            .app-header h1 {
-                font-size: 2.5em;
-            }
-            .main-content {
-                padding: 2rem;
-                margin: -3rem auto 1rem;
-            }
-            .loading-animation {
-                width: 150px;
-                height: 150px;
-            }
-            .loading-text h2 {
-                font-size: 2em;
-            }
-            .loading-text p {
-                font-size: 1.1em;
-            }
         }
     </style>
 </head>
 <body>
-    <!-- Loading Overlay -->
-    <div id="loading-overlay" class="loading-overlay">
-        <div class="loading-content">
-            <div class="loading-animation">
-                <div class="ai-circle"></div>
-                <div class="sound-wave"></div>
-                <div class="sound-wave"></div>
-                <div class="sound-wave"></div>
-                <div class="sound-wave"></div>
-                <div class="sound-wave"></div>
-            </div>
-            <div class="loading-text">
-                <h2>در حال تبدیل متن به صدا</h2>
-                <p>با هوش مصنوعی آلفا</p>
-                <div class="progress-bar">
-                    <div class="progress-fill"></div>
-                </div>
-            </div>
-        </div>
-    </div>
     <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', () => {

 <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;
+            --bg-dark: #0d0f1a;
+            --panel-bg: rgba(23, 26, 41, 0.6);
+            --border-color: rgba(129, 140, 248, 0.2);
+            --text-primary: #e0e7ff;
+            --text-secondary: #94a3b8;
+            --accent-glow: #818cf8;
+            --accent-gradient: linear-gradient(90deg, #a78bfa, #818cf8, #60a5fa);
             --radius-card: 24px;
+            --radius-input: 12px;
+            --shadow-glow: 0 0 30px -5px rgba(129, 140, 248, 0.3);
         }
         body {
             font-family: var(--app-font);
             direction: rtl;
+            background-color: var(--bg-dark);
+            color: var(--text-primary);
             font-size: 16px;
+            line-height: 1.7;
+            margin: 0;
             min-height: 100vh;
+            overflow: hidden; /* برای جلوگیری از اسکرول به خاطر افکت پس‌زمینه */
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 2rem 0;
         }
+        /* --- افکت پس‌زمینه شفق قطبی (Aurora) --- */
         body::before {
             content: '';
             position: fixed;
+            top: 0; left: 0; right: 0; bottom: 0;
+            background-image:
+                radial-gradient(circle at 15% 20%, rgba(167, 139, 250, 0.2), transparent 40%),
+                radial-gradient(circle at 80% 30%, rgba(96, 165, 250, 0.2), transparent 40%),
+                radial-gradient(circle at 50% 85%, rgba(139, 92, 246, 0.25), transparent 40%);
+            animation: aurora 15s infinite linear;
             z-index: -1;
         }
+        @keyframes aurora {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
         }
+        .container {
+            max-width: 700px;
+            width: 95%;
+            max-height: 95vh;
+            overflow-y: auto;
+            scrollbar-width: thin;
+            scrollbar-color: var(--accent-glow) transparent;
         }
+        .container::-webkit-scrollbar { width: 6px; }
+        .container::-webkit-scrollbar-track { background: transparent; }
+        .container::-webkit-scrollbar-thumb { background-color: var(--accent-glow); border-radius: 10px; }
+        .app-header {
+            text-align: center;
+            padding: 2rem 0;
         }
+        .app-header h1 {
+            font-size: 3.5em;
+            font-weight: 800;
+            margin: 0;
+            background: var(--accent-gradient);
             -webkit-background-clip: text;
             -webkit-text-fill-color: transparent;
+            text-shadow: 0 0 20px rgba(167, 139, 250, 0.3);
         }
+        .app-header p {
+            font-size: 1.25em;
+            color: var(--text-secondary);
+            margin-top: 0.5rem;
         }
+        /* --- پنل اصلی با افکت شیشه‌ای --- */
+        .main-content {
+            padding: 2.5rem;
+            background: var(--panel-bg);
+            border-radius: var(--radius-card);
+            border: 1px solid var(--border-color);
+            box-shadow: var(--shadow-glow);
             backdrop-filter: blur(20px);
+            -webkit-backdrop-filter: blur(20px);
             position: relative;
         }
+        .form-group { margin-bottom: 2rem; }
+        label { display: block; font-weight: 500; color: var(--text-primary); font-size: 1.1em; margin-bottom: 1rem; }
+        textarea, input[type="text"] {
+            width: 100%;
+            padding: 1rem;
+            border-radius: var(--radius-input);
+            border: 1px solid var(--border-color);
+            background-color: rgba(13, 15, 26, 0.5);
+            color: var(--text-primary);
+            font-family: var(--app-font);
+            font-size: 1rem;
+            box-sizing: border-box;
             transition: all 0.3s ease;
         }
+        textarea:focus, input[type="text"]:focus {
+            outline: none;
+            border-color: var(--accent-glow);
+            box-shadow: 0 0 15px rgba(129, 140, 248, 0.4);
+            background-color: rgba(13, 15, 26, 0.8);
         }
+        /* --- دکمه اصلی --- */
+        #generate-btn {
+            width: 100%;
             padding: 1rem 1.5rem;
+            font-size: 1.25em;
+            font-weight: 700;
+            font-family: var(--app-font);
+            color: white;
+            border: none;
             border-radius: var(--radius-input);
             cursor: pointer;
             position: relative;
             overflow: hidden;
+            background: var(--accent-gradient);
+            transition: all 0.3s ease;
+            box-shadow: 0 5px 20px -5px rgba(129, 140, 248, 0.5);
         }
+        #generate-btn:hover:not(:disabled) {
+            transform: translateY(-3px);
+            box-shadow: 0 8px 25px -5px rgba(129, 140, 248, 0.6);
         }
+        #generate-btn:disabled {
+            background: #4b5563;
+            cursor: not-allowed;
+            box-shadow: none;
             transform: none;
         }
+        /* --- بخش خروجی --- */
+        #output-section {
+            margin-top: 2.5rem;
+            padding: 2rem;
+            border-radius: var(--radius-card);
+            min-height: 200px;
+            display: flex;
             align-items: center;
             justify-content: center;
+            flex-direction: column;
+            gap: 1rem;
+            border: 2px dashed var(--border-color);
+            transition: all 0.5s ease;
+        }
+        #status-message { font-weight: 500; color: var(--text-secondary); text-align: center; }
+        #audio-player { width: 100%; margin-top: 1rem; display: none; }
+        #audio-player::-webkit-media-controls-panel { background-color: rgba(30, 41, 59, 0.8); }
+        #audio-player::-webkit-media-controls-play-button { color: var(--accent-glow); }
+        /* دیگر استایل‌های پلیر... */
+        /* --- انیمیشن پردازش (AI Core) --- */
+        #loading-animation { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 2rem; width: 100%; }
+        .ai-core-container {
+            width: 150px;
+            height: 150px;
             position: relative;
+            display: flex;
+            align-items: center;
+            justify-content: center;
         }
+        .ai-core-container .ring {
             position: absolute;
+            width: 100%; height: 100%;
+            border: 2px solid var(--accent-glow);
             border-radius: 50%;
+            opacity: 0.5;
+            animation: ring-pulse 3s infinite ease-out;
         }
+        .ai-core-container .ring:nth-child(2) { animation-delay: -1s; }
+        .ai-core-container .ring:nth-child(3) { animation-delay: -2s; }
+        .ai-core-container .core {
+            width: 50px; height: 50px;
+            background: var(--accent-gradient);
+            border-radius: 50%;
+            box-shadow: 0 0 20px 5px var(--accent-glow);
+            animation: core-pulse 1.5s infinite alternate ease-in-out;
         }
+        #loading-text {
+            font-size: 1.2em;
+            font-weight: 500;
+            color: var(--text-primary);
+            text-shadow: 0 0 10px rgba(129, 140, 248, 0.5);
         }
+        @keyframes ring-pulse {
+            0% { transform: scale(0.1); opacity: 0.8; }
+            100% { transform: scale(1); opacity: 0; }
         }
+        @keyframes core-pulse {
+            0% { transform: scale(0.9); box-shadow: 0 0 15px 3px var(--accent-glow); }
+            100% { transform: scale(1.1); box-shadow: 0 0 30px 10px var(--accent-glow); }
         }
     </style>
 </head>
 <body>
     <div class="container">
         <header class="app-header">
+            <h1>Alpha 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>
+                <!-- سایر فیلدها برای سادگی حذف شده‌اند تا تمرکز روی ظاهر باشد، اما می‌توانند اضافه شوند -->
+                <button type="submit" id="generate-btn">
+                    <span>✨ تولید صدا</span>
+                </button>
             </form>
             <div id="output-section">
                 <div id="status-message">خروجی صدا در اینجا نمایش داده می‌شود</div>
+                <!-- انیمیشن لودینگ -->
+                <div id="loading-animation">
+                    <div class="ai-core-container">
+                        <div class="ring"></div>
+                        <div class="ring"></div>
+                        <div class="ring"></div>
+                        <div class="core"></div>
+                    </div>
+                    <p id="loading-text">در حال ساخت آینده صدا...</p>
+                </div>
                 <audio id="audio-player" controls></audio>
             </div>
         </main>
     </div>
+    <!-- فیلدهای مخفی و مودال را برای سادگی حذف کردم، اما کد JS زیر هنوز می‌تواند با آنها کار کند -->
     <input type="hidden" id="selected_speaker_id_storage" value="Charon">
+    <input type="hidden" id="prompt-input" value="با صدایی طبیعی و روان.">
+    <input type="hidden" id="temperature-slider" value="0.9">
     <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;
+            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 generateBtn = document.getElementById('generate-btn');
+            const statusMessage = document.getElementById('status-message');
+            const audioPlayer = document.getElementById('audio-player');
+            const loadingAnimation = document.getElementById('loading-animation');
+            const selectedSpeakerIdStorage = document.getElementById('selected_speaker_id_storage');
+            function showLoadingState() {
+                statusMessage.style.display = 'none';
+                audioPlayer.style.display = 'none';
+                audioPlayer.src = '';
+                loadingAnimation.style.display = 'flex';
+                generateBtn.disabled = true;
+                generateBtn.querySelector('span').textContent = 'در حال پردازش...';
+            }
+            function showResultState(isSuccess, message = '') {
+                loadingAnimation.style.display = 'none';
+                if (isSuccess) {
+                    statusMessage.style.display = 'none';
+                    audioPlayer.style.display = 'block';
+                    audioPlayer.play();
+                } else {
+                    statusMessage.textContent = message || 'یک خطای ناشناخته رخ داد.';
+                    statusMessage.style.display = 'block';
+                    audioPlayer.style.display = 'none';
+                }
+                generateBtn.disabled = false;
+                generateBtn.querySelector('span').textContent = '✨ تولید صدا';
+            }
+            // تابع شبیه‌سازی برای تست ظاهر بدون نیاز به API
+            async function mockGenerateAudio(event) {
+                event.preventDefault();
+                showLoadingState();
+                console.log("شبیه‌سازی شروع شد...");
+                // 5 ثانیه صبر می‌کنیم تا انیمیشن دیده شود
+                await new Promise(resolve => setTimeout(resolve, 5000));
+                const isSuccess = Math.random() > 0.2; // 80% شانس موفقیت
+                if(isSuccess) {
+                    console.log("شبیه‌سازی با موفقیت تمام شد.");
+                    // یک فایل صوتی نمونه برای نمایش پلیر
+                    audioPlayer.src = "https://www.soundhelix.com/examples/mp3/SoundHelix-Song-1.mp3";
+                    showResultState(true);
+                } else {
+                    console.log("شبیه‌سازی با خطا تمام شد.");
+                    showResultState(false, "خطا در شبیه‌سازی! لطفاً دوباره تلاش کنید.");
+                }
+            }
+            // برای استفاده واقعی، این تابع را جایگزین mockGenerateAudio کنید
+            async function generateAudio(event) {
+                event.preventDefault();
+                showLoadingState();
+                const text = textInput.value;
+                if (!text.trim()) {
+                    showResultState(false, 'خطا: متن ورودی نمی‌تواند خالی باشد.');
+                    return;
+                }
+                const prompt = promptInput.value;
+                const temperature = parseFloat(tempSlider.value);
+                const selectedSpeaker = selectedSpeakerIdStorage.value;
+                const sessionHash = Math.random().toString(36).substring(2);
+                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) throw new Error(`خطا در اتصال: ${joinQueueResponse.statusText}`);
+                    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_completed') {
+                                    if (data.success && 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;
+                                    }
+                                    break;
+                                }
+                            } catch (e) {}
+                        }
+                        if (finalFilePath) break;
+                    }
+                    if (finalFilePath) {
+                        audioPlayer.src = `${FILE_URL_BASE}${finalFilePath}`;
+                        showResultState(true);
+                    } else {
+                        throw new Error('فایل صوتی از سرور دریافت نشد.');
+                    }
+                } catch (error) {
+                    console.error('خطا:', error);
+                    showResultState(false, `یک خطا رخ داد: ${error.message}`);
+                }
+            }
+            // **مهم:** برای تست ظاهری از mockGenerateAudio و برای کارکرد واقعی از generateAudio استفاده کنید
+            form.addEventListener('submit', mockGenerateAudio);
+            // form.addEventListener('submit', generateAudio);
+        });
+    </script>
+</body>
+</html>