Hamed744 commited on
Commit
f9f73d3
·
verified ·
1 Parent(s): 85409e9

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +341 -407
index.html CHANGED
@@ -3,470 +3,404 @@
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Alpha TTS - تست مستقیم API</title>
7
  <style>
8
  @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');
9
 
10
  :root {
11
  --app-font: 'Vazirmatn', sans-serif;
12
- --app-bg: #F8F9FC;
13
- --panel-bg: #FFFFFF;
14
- --panel-border: #EAEFF7;
15
- --input-bg: #F6F8FB;
16
- --input-border: #E1E7EF;
17
- --text-primary: #1A202C;
18
- --text-secondary: #626F86;
19
- --text-tertiary: #8A94A6;
20
- --accent-primary: #4A6CFA;
21
- --accent-primary-hover: #3553D6;
22
  --accent-primary-glow: rgba(74, 108, 250, 0.25);
23
- --accent-secondary: #0FD4A8;
24
- --accent-secondary-hover: #0DA986;
25
- --accent-secondary-glow: rgba(15, 212, 168, 0.2);
26
  --waveform-color-active: var(--accent-primary);
27
- --waveform-color-inactive: #D0D9E6;
28
- --waveform-dashed-line-color: #E0E4E9;
29
  --shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03);
30
  --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05), 0 2px 4px -2px rgba(26, 32, 44, 0.04);
31
  --shadow-lg: 0 10px 15px -3px rgba(26, 32, 44, 0.06), 0 4px 6px -4px rgba(26, 32, 44, 0.05);
32
  --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05);
33
-
34
  --radius-card: 24px;
35
  --radius-btn: 14px;
36
  --radius-input: 12px;
37
  --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
38
  --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
39
- --transition-bounce: all 0.4s cubic-bezier(0.68, -0.55, 0.27, 1.55);
40
  }
41
 
42
- @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
43
- @keyframes modalZoomIn { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } }
44
- @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
45
- @keyframes rotate-loader-orbital { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
46
- @keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
47
- @keyframes satellite-pulse-1 { from { transform: scale(0.7) translateX(-50%); opacity: 0.6; } to { transform: scale(1.1) translateX(-50%); opacity: 1; } }
48
- @keyframes satellite-pulse-2 { from { transform: scale(0.7) translateY(-50%); opacity: 0.6; } to { transform: scale(1.1) translateY(-50%); opacity: 1; } }
49
- @keyframes satellite-pulse-3 { from { transform: scale(0.7) translateX(50%); opacity: 0.6; } to { transform: scale(1.1) translateX(50%); opacity: 1; } }
50
-
51
  body {
52
- font-family: var(--app-font); direction: rtl; background-color: var(--app-bg);
53
- color: var(--text-primary); font-size: 16px; line-height: 1.8; margin: 0;
54
- padding: 2.5rem 0; min-height: 100vh; -webkit-font-smoothing: antialiased;
55
- -moz-osx-font-smoothing: grayscale; display: flex; justify-content: center;
56
- align-items: flex-start; overflow-x: hidden;
57
- background-image: radial-gradient(var(--text-tertiary) 0.5px, transparent 0.5px);
58
- background-size: 20px 20px; background-position: -10px -10px;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
59
  }
60
- .container { max-width: 820px; width: 92%; margin: 0 auto; }
61
-
62
- .app-header { padding: 0.5rem 0 2.5rem 0; text-align: center; margin-bottom: 1.5rem; animation: fadeIn 0.8s 0.2s ease-out backwards; }
63
- .app-header h1 { font-size: 2.5em; font-weight: 900; margin: 0 0 0.8rem 0; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; letter-spacing: -1px; }
64
- .app-header p { font-size: 1.05em; color: var(--text-secondary); margin-top: 0; opacity: 0.9; font-weight: 400; line-height: 1.7; }
65
-
66
- .main-content { padding: 3rem; background-color: var(--panel-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-xl); border: 1px solid var(--panel-border); animation: fadeIn 0.8s 0.4s ease-out backwards; }
67
- .form-group { margin-bottom: 2.2rem; }
68
- label { display: block; font-weight: 700; color: var(--text-primary); font-size: 1.1em; margin-bottom: 1rem; }
69
- textarea, input[type="text"] { width: 100%; padding: 1rem 1.2rem; border-radius: var(--radius-input); border: 1px solid var(--input-border); background-color: var(--input-bg); color: var(--text-primary); box-shadow: var(--shadow-sm) inset; font-family: var(--app-font); font-size: 1rem; box-sizing: border-box; transition: var(--transition-smooth); }
70
- textarea:focus, input[type="text"]:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-glow), var(--shadow-sm) inset; background-color: var(--panel-bg); }
71
- textarea { min-height: 120px; resize: vertical; }
72
- .char-counter-wrapper { font-size: 0.85em; color: var(--text-tertiary); text-align: left; margin-top: 0.75rem; padding: 0 0.2rem; }
73
- #char-count { font-weight: 600; color: var(--accent-primary); }
74
-
75
- #selected-speaker-display { text-align: center; margin-top: 1.5rem; }
76
- #selected-speaker-card { display: inline-flex; align-items: center; background: linear-gradient(135deg, var(--input-bg) 0%, var(--panel-bg) 100%); border-radius: 50px; padding: 0.75rem 0.75rem 0.75rem 1.5rem; box-shadow: var(--shadow-md); border: 1px solid var(--panel-border); transition: var(--transition-bounce); cursor: pointer; margin-bottom: 1.5rem; }
77
- #selected-speaker-card:hover { transform: translateY(-6px) scale(1.03); box-shadow: var(--shadow-lg); border-color: var(--accent-primary); }
78
- #selected-speaker-card img { width: 60px; height: 60px; border-radius: 50%; object-fit: cover; margin-left: 1rem; border: 3px solid var(--accent-secondary); box-shadow: 0 0 15px -3px var(--accent-secondary-glow); transition: var(--transition-smooth); }
79
- #selected-speaker-info { text-align: right; }
80
- #selected-speaker-info h3 { margin: 0; font-size: 1.25em; font-weight: 800; }
81
- #selected-speaker-info p { margin: 2px 0 0; color: var(--text-secondary); font-size: 0.85em; font-weight: 500; }
82
- #change-speaker-btn { display: inline-flex; align-items: center; justify-content: center; padding: 12px 24px; border-radius: var(--radius-btn); background: var(--panel-bg); border: 1px solid var(--input-border); color: var(--text-primary); cursor: pointer; font-family: var(--app-font); font-weight: 600; font-size: 1em; transition: var(--transition-smooth); box-shadow: var(--shadow-md); }
83
- #change-speaker-btn:hover { background: var(--input-bg); border-color: var(--accent-primary); color: var(--accent-primary); transform: translateY(-3px) scale(1.05); box-shadow: var(--shadow-lg); }
84
-
85
- .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(18, 24, 38, 0.6); backdrop-filter: blur(10px) saturate(150%); display: none; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity var(--transition-smooth); }
86
- .modal-overlay.visible { display: flex; opacity: 1; }
87
- .modal-dialog { background: var(--panel-bg); padding: 2.5rem; border-radius: var(--radius-card); width: 90%; box-shadow: var(--shadow-xl); border: 1px solid var(--panel-border); opacity: 0; animation: modalZoomIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; }
88
- .modal-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; padding-bottom: 1.5rem; border-bottom: 1px solid var(--panel-border); }
89
- .modal-header h2 { margin: 0; font-size: 1.8em; font-weight: 800; color: var(--accent-primary); }
90
- .close-modal-btn { background: none; border: none; font-size: 2.5rem; cursor: pointer; color: var(--text-tertiary); transition: var(--transition-smooth); line-height: 1; }
91
- .close-modal-btn:hover { color: var(--accent-primary); transform: rotate(90deg) scale(1.1); }
92
- #speaker-modal .modal-dialog { max-width: 750px; max-height: 85vh; overflow-y: auto; }
93
- #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1.5rem; }
94
- .speaker-card { cursor: pointer; transition: var(--transition-smooth); text-align: center; position: relative; border-radius: var(--radius-card); padding: 0.5rem; }
95
- .speaker-card:hover { transform: translateY(-8px); }
96
- .speaker-card input[type="radio"] { display: none; }
97
- .speaker-card .speaker-visual { border: 3px solid transparent; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); position: relative; background-color: var(--input-bg); transition: var(--transition-bounce); }
98
- .speaker-card:hover .speaker-visual { box-shadow: var(--shadow-lg); }
99
- .speaker-card img { width: 100%; height: 130px; object-fit: cover; display: block; background-color: #e0e0e0; border-radius: 14px; transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); }
100
- .speaker-card:hover img { transform: scale(1.1); }
101
- .speaker-card .speaker-name { padding: 0.8rem 0.4rem 0.2rem; font-weight: 600; font-size: 0.95em; color: var(--text-secondary); transition: color 0.2s; }
102
- .speaker-card input[type="radio"]:checked + .speaker-visual { border-color: var(--accent-secondary); box-shadow: 0 0 25px -5px var(--accent-secondary-glow); transform: scale(1.05); }
103
-
104
- .label-with-info { display: flex; align-items: center; gap: 0.5rem; margin-bottom: 1.2rem; }
105
- .info-icon { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; background-color: var(--input-bg); border: 1px solid var(--input-border); color: var(--text-secondary); font-size: 0.9em; font-weight: 700; cursor: pointer; transition: var(--transition-smooth); user-select: none; }
106
- .info-icon:hover { background-color: var(--accent-primary); color: white; border-color: var(--accent-primary); transform: scale(1.1); box-shadow: 0 0 10px var(--accent-primary-glow); }
107
- .slider-container { display: flex; align-items: center; gap: 1.5rem; }
108
- input[type="range"] { flex-grow: 1; -webkit-appearance: none; appearance: none; width: 100%; height: 6px; background: var(--input-border); border-radius: 3px; outline: none; cursor: pointer; }
109
- input[type="range"]::-webkit-slider-runnable-track { background: linear-gradient(to right, var(--accent-secondary) 0%, var(--accent-primary) 100%); height: 6px; border-radius: 3px; }
110
- input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 24px; height: 24px; background: #fff; border-radius: 50%; cursor: pointer; border: 4px solid var(--accent-primary); box-shadow: var(--shadow-md); margin-top: -9px; transition: var(--transition-fast); }
111
- input[type="range"]:hover::-webkit-slider-thumb { transform: scale(1.15); box-shadow: 0 0 0 8px var(--accent-primary-glow); }
112
- #temperature-value { font-weight: 700; background-color: var(--input-bg); padding: 0.5rem 1rem; border-radius: 8px; border: 1px solid var(--input-border); min-width: 45px; text-align: center; color: var(--accent-primary); font-size: 1em; box-shadow: var(--shadow-sm); }
113
-
114
- #generate-btn { width: 100%; padding: 1.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-btn); cursor: pointer; transition: var(--transition-smooth), transform 0.15s ease-out; box-shadow: 0 6px 12px -3px var(--accent-primary-glow), 0 6px 12px -3px var(--accent-secondary-glow); position: relative; overflow: hidden; letter-spacing: 0.5px; }
115
- #generate-btn:hover:not(:disabled) { transform: translateY(-5px) scale(1.02); box-shadow: 0 8px 20px -4px var(--accent-primary-glow), 0 8px 20px -4px var(--accent-secondary-glow); }
116
- #generate-btn:disabled { background: var(--text-tertiary); cursor: not-allowed; box-shadow: none; color: var(--text-secondary); }
117
- #generate-btn svg { display:inline-block; margin-left: 0.5em; width:1.2em; height:1.2em; vertical-align: middle; }
118
-
119
- #output-section { margin-top: 3rem; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 220px; position: relative; box-sizing: border-box; padding: 2rem; background-color: var(--input-bg); border-radius: var(--radius-card); border: 2px dashed var(--input-border); box-shadow: var(--shadow-sm) inset; transition: var(--transition-smooth); }
120
- #output-section.has-content { background-color: var(--panel-bg); border: 1px solid var(--panel-border); box-shadow: var(--shadow-lg); padding: 0; min-height: auto; }
121
- #status-message { font-weight: 500; color: var(--text-secondary); text-align: center; font-size: 1.1em; }
122
-
123
- #loading-animation-wrapper { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.8rem; width: 100%; }
124
- .orbital-loader { width: 110px; height: 110px; position: relative; animation: rotate-loader-orbital 10s linear infinite; }
125
- .orbit { position: absolute; top: 50%; left: 50%; border: 2px dashed rgba(74, 108, 250, 0.35); border-radius: 50%; transform-origin: center center; }
126
- .orbit:nth-child(1) { width: 35px; height: 35px; margin: -17.5px 0 0 -17.5px; animation: orbit-spin 2.8s linear infinite reverse; }
127
- .orbit:nth-child(2) { width: 65px; height: 65px; margin: -32.5px 0 0 -32.5px; animation: orbit-spin 3.8s linear infinite; }
128
- .orbit:nth-child(3) { width: 95px; height: 95px; margin: -47.5px 0 0 -47.5px; animation: orbit-spin 4.8s linear infinite reverse; }
129
- .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); }
130
- .orbit:nth-child(1) .satellite { top: -5px; left: 50%; animation: satellite-pulse-1 1.4s ease-in-out infinite alternate; }
131
- .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; }
132
- .orbit:nth-child(3) .satellite { bottom: -5px; right: 50%; animation: satellite-pulse-3 1.4s 0.4s ease-in-out infinite alternate;}
133
- #loading-text { font-size: 1.2em; font-weight: 700; color: var(--text-primary); text-align: center; background: linear-gradient(90deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; }
134
-
135
- #audio-player-content { display: none; width: 100%; padding: 1.5rem; box-sizing: border-box; flex-direction: column; gap: 1.2rem; }
136
- .audio-waveform-container { display: flex; align-items: center; gap: 1rem; width: 100%; margin-bottom: 1rem; }
137
- .audio-time { font-size: 0.9em; color: var(--text-secondary); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; user-select: none; }
138
- .audio-waveform { flex-grow: 1; height: 60px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; }
139
- #audio-waveform-canvas { display: block; max-width: 100%; height: 100%; }
140
- .audio-waveform-dashed-line { position: absolute; top: 50%; left: 0; width: 100%; height: 1px; background-image: linear-gradient(to right, var(--waveform-dashed-line-color) 33%, transparent 0%); background-position: center; background-size: 10px 1px; transform: translateY(-50%); z-index: 1; }
141
- .audio-controls-group { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-bottom: 1rem; }
142
- .audio-skip-btn, .audio-play-pause-btn-large, .audio-volume-btn, .audio-speed-btn { background: none; border: none; cursor: pointer; padding: 8px; transition: transform 0.2s, opacity 0.2s; }
143
- .audio-skip-btn, .audio-play-pause-btn-large, .audio-volume-btn { color: var(--text-secondary); }
144
- .audio-skip-btn:hover, .audio-play-pause-btn-large:hover, .audio-volume-btn:hover { color: var(--accent-primary); opacity: 0.9; }
145
- .audio-skip-btn:active, .audio-play-pause-btn-large:active, .audio-volume-btn:active { transform: scale(0.9); }
146
- .audio-skip-btn svg { width: 28px; height: 28px; fill: currentColor; }
147
- .audio-play-pause-btn-large { padding: 0; width: 50px; height: 50px; }
148
- .audio-play-pause-btn-large svg { width: 38px; height: 38px; fill: currentColor; }
149
- .audio-utility-controls { display: flex; align-items: center; justify-content: space-between; width: 100%; }
150
- .audio-volume-btn svg { width: 24px; height: 24px; fill: currentColor; }
151
- .audio-speed-btn { font-family: var(--app-font); font-size: 0.9em; font-weight: 600; background-color: var(--panel-bg); border: 1px solid var(--panel-border); border-radius: 8px; min-width: 40px; text-align: center; color: var(--text-primary); box-shadow: var(--shadow-sm); }
152
- .audio-speed-btn:hover { background-color: var(--input-bg); }
153
- #hidden-audio-player { display: none !important; }
154
 
155
  @media (max-width: 600px) {
156
- body { padding: 1.5rem 0; }
157
- .main-content { padding: 1.5rem; }
158
- .app-header h1 { font-size: 2em; }
159
- #selected-speaker-card { flex-direction: column; padding: 1rem; border-radius: var(--radius-card); }
160
- #selected-speaker-card img { margin-left: 0; margin-bottom: 1rem; }
 
 
161
  }
162
  </style>
163
  </head>
164
  <body>
165
-
166
  <div class="container">
167
  <header class="app-header">
168
- <h1>مولد صدای هوشمند آلفا</h1>
169
- <p>کیفیت استودیو، قدرت هوش مصنوعی. صدایی فراتر از انتظار خلق کنید.</p>
170
  </header>
171
 
172
- <main class="main-content">
173
  <form id="tts-form">
174
  <div class="form-group">
175
- <label for="text-input">📝 متن اصلی</label>
176
- <textarea id="text-input" rows="5" placeholder="متن خود را برای تبدیل به گفتار اینجا وارد کنید..."></textarea>
177
- <div class="char-counter-wrapper">
178
- <span id="char-count">0</span> / <span id="char-max">50000</span> نویسه
179
  </div>
180
  </div>
181
 
182
  <div class="form-group">
183
- <label for="prompt-input">🗣️ توصیف لحن و احساس (اختیاری)</label>
184
- <input type="text" id="prompt-input" placeholder="مثال: با لحنی آرام و قصه‌گو، یا صدای یک گوینده خبر حرفه‌ای">
185
  </div>
186
 
187
  <div class="form-group">
188
- <label>🎤 گوینده منتخب</label>
189
- <div id="selected-speaker-display">
190
- <div id="selected-speaker-card" title="برای تغییر گوینده کلیک کنید">
191
- <img id="selected-speaker-img" src="" alt="عکس گوینده">
192
- <div id="selected-speaker-info">
193
- <h3 id="selected-speaker-name"></h3>
194
- <p id="selected-speaker-desc"></p>
195
- </div>
196
- </div>
197
- <button type="button" id="change-speaker-btn">تغییر گوینده</button>
198
- </div>
199
  </div>
200
 
201
  <div class="form-group">
202
- <div class="label-with-info">
203
- <label for="temperature-slider">🌡️ خلاقیت و پویایی صدا</label>
204
- <div class="info-icon" id="temp-info-icon" role="button" tabindex="0" aria-label="اطلاعات بیشتر">!</div>
205
- </div>
206
- <div class="slider-container">
207
- <input type="range" id="temperature-slider" min="0.1" max="1.5" step="0.05" value="0.9">
208
  <span id="temperature-value">0.9</span>
209
  </div>
210
  </div>
211
 
212
- <button type="submit" id="generate-btn">✨ خلق صدا با آلفا</button>
213
  </form>
214
 
215
- <div id="output-section">
216
- <div id="status-message">صدای تولید شده در اینجا ظاهر خواهد شد.</div>
217
- <div id="loading-animation-wrapper">
218
- <div class="orbital-loader">
219
- <div class="orbit"><div class="satellite"></div></div>
220
- <div class="orbit"><div class="satellite"></div></div>
221
- <div class="orbit"><div class="satellite"></div></div>
222
- </div>
223
- <p id="loading-text">در حال پردازش هوشمند و تولید صدا...</p>
224
- </div>
225
-
226
- <div id="audio-player-content">
227
- <div class="audio-waveform-container">
228
- <span class="audio-time audio-current-time">0:00</span>
229
- <div class="audio-waveform">
230
- <canvas id="audio-waveform-canvas"></canvas>
231
- <div class="audio-waveform-dashed-line"></div>
232
- </div>
233
- <span class="audio-time audio-total-time">0:00</span>
234
- </div>
235
- <div class="audio-controls-group">
236
- <button class="audio-skip-btn backward">
237
- <svg viewBox="0 0 24 24"><path d="M11 16V8l-4 4 4 4zm4-12v16l7-8-7-8z"></path></svg>
238
- </button>
239
- <button class="audio-play-pause-btn-large">
240
- <svg viewBox="0 0 24 24" class="play-icon"><path d="M8 5v14l11-7z"></path></svg>
241
- <svg viewBox="0 0 24 24" class="pause-icon" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg>
242
- </button>
243
- <button class="audio-skip-btn forward">
244
- <svg viewBox="0 0 24 24"><path d="M13 16V8l4 4-4 4zM9 4v16L2 12l7-8z"></path></svg>
245
- </button>
246
- </div>
247
- <div class="audio-utility-controls">
248
- <button class="audio-volume-btn">
249
- <svg viewBox="0 0 24 24" class="volume-high-icon"><path d="M3 9v6h4l5 5V4L7 9H3zm13.5 3c0-1.77-1.02-3.29-2.5-4.03v8.05c1.48-.73 2.5-2.25 2.5-4.02zM14 3.23v2.06c2.89.86 5 3.54 5 6.71s-2.11 5.85-5 6.71v2.06c4.01-.91 7-4.49 7-8.77s-2.99-7.86-7-8.77z"></path></svg>
250
- <svg viewBox="0 0 24 24" class="volume-mute-icon" style="display:none;"><path d="M7 9v6h4l5 5V4L11 9H7zM16.5 12c0-1.77-1.02-3.29-2.5-4.03v2.21l2.45 2.45c.03-.2.05-.41.05-.63zM19 12c0 .94-.23 1.82-.68 2.6L19 14.88c.45-.88.7-1.88.7-2.88 0-4.01-2.99-7.14-7-8.05v2.06c2.89.86 5 3.54 5 6.71zM4.55 4L2 6.55 9.45 14H7v6h4l5 5V14.55l4.05 4.05L22 18 12 8 4.55 4z"></path></svg>
251
- </button>
252
- <button class="audio-speed-btn">1x</button>
253
- </div>
254
- </div>
255
- <audio id="hidden-audio-player" style="display: none;"></audio>
256
  </div>
257
  </main>
258
  </div>
259
 
260
- <!-- Modals -->
261
- <div id="speaker-modal" class="modal-overlay">
262
- <div class="modal-dialog">
263
- <div class="modal-header">
264
- <h2>گالری گویندگان آلفا</h2>
265
- <button type="button" class="close-modal-btn" data-modal-id="speaker-modal">×</button>
266
- </div>
267
- <div id="speaker-grid"></div>
268
- </div>
269
- </div>
270
- <div id="info-modal" class="modal-overlay">
271
- <div class="modal-dialog" style="max-width: 520px;">
272
- <div class="modal-header">
273
- <h2>🌡️ خلاقیت و پویایی صدا</h2>
274
- <button type="button" class="close-modal-btn" data-modal-id="info-modal">×</button>
275
- </div>
276
- <div>
277
- <p style="color: var(--text-secondary); line-height: 1.9;">این پارامتر، میزان "غیرقابل پیش‌بینی بودن" و تنوع در صدای خروجی را کنترل می‌کند.</p>
278
- <p><strong>مقادیر بالاتر (نزدیک به ۱.۵):</strong> صدایی بسیار متنوع، احساسی و پویا ایجاد می‌کند. ایده‌آل برای محتوای خلاقانه و هنری.</p>
279
- <p><strong>مقادیر پایین‌تر (نزدیک به ۰.۱):</strong> صدایی پایدار، یکنواخت و قابل پیش‌بینی‌تر تولید می‌کند. مناسب برای خوانش متون رسمی و خبری.</p>
280
- </div>
281
- </div>
282
- </div>
283
- <input type="hidden" id="selected_speaker_id_storage" value="Charon">
284
-
285
  <script>
286
- document.addEventListener('DOMContentLoaded', () => {
287
- // --- تنظیمات اصلی API ---
288
- const API_ENDPOINT_URL = "https://www.aisada.ir/api/v1/audio/generate";
289
- // !!! هشدار: این کلید فقط برای تست است و نباید در کد نهایی قرار گیرد !!!
290
- const USER_API_KEY = "sk-a1b2c3d4e5f6g7h8i9j0k1l2m3n4";
291
-
292
- // --- لیست گویندگان ---
293
- const speakers = [
294
- { id: "Charon", name: "شهاب (مرد)", desc: "صدایی قدرتمند و رسا", imgUrl: "https://uploadkon.ir/uploads/a18705_25IMG-۲۰۲۵۰۷۰۵-۱۱۰۵۴۹.jpg" },
295
- { id: "Zephyr", name: "آوا (زن)", desc: "لطیف و دلنشین", imgUrl: "https://uploadkon.ir/uploads/029605_25IMG-۲۰۲۵۰۷۰۵-۱۱۱۲۵۲.jpg" },
296
- { id: "Achird", name: "نوید (مرد)", desc: "جوان و پرانرژی", imgUrl: "https://uploadkon.ir/uploads/697e05_25IMG-۲۰۲۵۰۶۰۹-۰۶۴۶۳۷.jpg" },
297
- { id: "Zubenelgenubi", name: "آرمان (مرد)", desc: "گرم و صمیمی", imgUrl: "https://uploadkon.ir/uploads/a8a705_25IMG-۲۰۲۵۰۷۰۵-۱۱۱۶۲۹.jpg" },
298
- { id: "Vindemiatrix", name: "مهسا (زن)", desc: "باوقار و رسمی", imgUrl: "https://uploadkon.ir/uploads/d74d05_25IMG-۲۰۲۵۰۷۰۵-۱۱۱۸۳۸.jpg" },
299
- { id: "Sadachbia", name: "سامان (مرد)", desc: "شاداب و پویا", imgUrl: "https://uploadkon.ir/uploads/580205_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۳۳۰.jpg" },
300
- { id: "Sadaltager", name: "آرش (مرد)", desc: "مطمئن و تاثیرگذار", imgUrl: "https://uploadkon.ir/uploads/c4db05_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۵۰۰.jpg" },
301
- { id: "Sulafat", name: "شبنم (زن)", desc: "آرام و متین", imgUrl: "https://uploadkon.ir/uploads/995005_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۶۱۱.jpg" },
302
- { id: "Laomedeia", name: "سحر (زن)", desc: "دوستانه و گیرا", imgUrl: "https://uploadkon.ir/uploads/660705_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۷۵۴.jpg" },
303
- { id: "Achernar", name: "مریم (زن)", desc: "حرفه‌ای و واضح", imgUrl: "https://uploadkon.ir/uploads/4c2905_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۰۳۶.jpg" },
304
- { id: "Alnilam", name: "بهرام (مرد)", desc: "حماسی و نافذ", imgUrl: "https://uploadkon.ir/uploads/f0c205_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۲۲۰.jpg" },
305
- { id: "Schedar", name: "نیکان (مرد)", desc: "مهربان و شیرین", imgUrl: "https://uploadkon.ir/uploads/d37a05_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۳۲۵.jpg" },
306
- { id: "Gacrux", name: "فرناز (زن)", desc: "پخته و قابل اعتماد", imgUrl: "https://uploadkon.ir/uploads/cff705_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۶۰۵.jpg" },
307
- { id: "Pulcherrima", name: "سارا (زن)", desc: "جذاب و مدرن", imgUrl: "https://uploadkon.ir/uploads/acb105_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۷۴۳.jpg" },
308
- { id: "Umbriel", name: "مانی (مرد)", desc: "خلاق و متفاوت", imgUrl: "https://uploadkon.ir/uploads/68b505_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۹۱۴.jpg" },
309
- { id: "Algieba", name: "آرتین (مرد)", desc: "با اصالت و شیک", imgUrl: "https://uploadkon.ir/uploads/571005_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۰۳۹.jpg" },
310
- { id: "Despina", name: "دلنواز (زن)", desc: "هنری و احساسی", imgUrl: "https://uploadkon.ir/uploads/5d7805_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۲۲۲.jpg" },
311
- { id: "Erinome", name: "روژان (زن)", desc: "شفاف و گویا", imgUrl: "https://uploadkon.ir/uploads/aa8805_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۳۴۹.jpg" },
312
- { id: "Algenib", name: "امید (مرد)", desc: "انگیزه بخش و مثبت", imgUrl: "https://uploadkon.ir/uploads/a63c05_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۹۲۱.jpg" },
313
- { id: "Orus", name: "بردیا (مرد)", desc: "ورزشی و پرهیجان", imgUrl: "https://uploadkon.ir/uploads/8bc405_25IMG-۲۰۲۵۰۷۰۵-۱۲۱۴۳۳.jpg" },
314
- { id: "Aoede", name: "ترانه (زن)", desc: "موزیکال و خوش‌آهنگ", imgUrl: "https://uploadkon.ir/uploads/9cb405_25IMG-۲۰۲۵۰۷۰۵-۱۲۱۸۵۰.jpg" },
315
- { id: "Callirrhoe", name: "نیکو (زن)", desc: "روایتگر و قصه‌گو", imgUrl: "https://uploadkon.ir/uploads/ee5f05_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۰۴۷.jpg" },
316
- { id: "Autonoe", name: "هستی (زن)", desc: "طبیعی و خودمانی", imgUrl: "https://uploadkon.ir/uploads/9b0505_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۲۲۲.jpg" },
317
- { id: "Enceladus", name: "کامیار (مرد)", desc: "مصمم و جدی", imgUrl: "https://uploadkon.ir/uploads/127805_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۴۱۴.jpg" },
318
- { id: "Iapetus", name: "کیانوش (مرد)", desc: "درخشان و گیرا", imgUrl: "https://uploadkon.ir/uploads/c98b05_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۶۰۵.jpg" },
319
- { id: "Puck", name: "پویا (مرد)", desc: "بازیگوش و سرزنده", imgUrl: "https://uploadkon.ir/uploads/ca3605_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۸۳۹.jpg" },
320
- { id: "Kore", name: "مهتاب (زن)", desc: "نجواگر و آرامش‌بخش", imgUrl: "https://uploadkon.ir/uploads/b66605_25IMG-۲۰۲۵۰۷۰۵-۱۲۳۰۳۵.jpg" },
321
- { id: "Fenrir", name: "سام (مرد)", desc: "جسور و بی‌باک", imgUrl: "https://uploadkon.ir/uploads/03c005_25IMG-۲۰۲۵۰۷۰۵-۱۲۳۴۱۳.jpg" },
322
- { id: "Leda", name: "لیدا (زن)", desc: "کلاسیک و باوقار", imgUrl: "https://uploadkon.ir/uploads/710305_25IMG-۲۰۲۵۰۷۰۵-۱۲۳۷۳۱.jpg" }
323
- ];
324
-
325
- // --- DOM Elements ---
326
- 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 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'); const speakerModal = document.getElementById('speaker-modal'); const infoModal = document.getElementById('info-modal'); const tempInfoIcon = document.getElementById('temp-info-icon'); const hiddenAudioPlayer = document.getElementById('hidden-audio-player'); const audioPlayerContent = document.getElementById('audio-player-content'); const audioCurrentTimeSpan = audioPlayerContent.querySelector('.audio-current-time'); const audioTotalTimeSpan = audioPlayerContent.querySelector('.audio-total-time'); const audioWaveformCanvas = document.getElementById('audio-waveform-canvas'); const waveformCtx = audioWaveformCanvas.getContext('2d'); const playPauseBtn = audioPlayerContent.querySelector('.audio-play-pause-btn-large'); const playIcon = playPauseBtn.querySelector('.play-icon'); const pauseIcon = playPauseBtn.querySelector('.pause-icon'); const skipBackwardBtn = audioPlayerContent.querySelector('.audio-skip-btn.backward'); const skipForwardBtn = audioPlayerContent.querySelector('.audio-skip-btn.forward'); const volumeBtn = audioPlayerContent.querySelector('.audio-volume-btn'); const volumeHighIcon = volumeBtn.querySelector('.volume-high-icon'); const volumeMuteIcon = volumeBtn.querySelector('.volume-mute-icon'); const speedBtn = audioPlayerContent.querySelector('.audio-speed-btn');
327
- let currentPlaybackSpeedIndex = 0; const playbackSpeeds = [1.0, 1.25, 1.5, 0.75]; let audioPeaks = []; let audioContext = null;
328
-
329
- // --- Character Counter ---
330
- const charCountSpan = document.getElementById('char-count'); const charMaxSpan = document.getElementById('char-max'); const MAX_CHARS = 50000;
331
- charMaxSpan.textContent = MAX_CHARS.toLocaleString('fa-IR');
332
- textInput.addEventListener('input', () => { const currentLength = textInput.value.length; charCountSpan.textContent = currentLength.toLocaleString('fa-IR'); charCountSpan.style.color = currentLength > MAX_CHARS ? 'red' : 'var(--accent-primary)'; });
333
-
334
- // --- Speaker Logic ---
335
- const getSpeakerById = (id) => speakers.find(s => s.id === id) || speakers[0];
336
- const getImageUrl = (speaker) => speaker.imgUrl;
337
-
338
- const updateSelectedSpeakerDisplay = (speakerId) => { const speaker = getSpeakerById(speakerId); selectedSpeakerImgDisplay.src = getImageUrl(speaker); selectedSpeakerNameDisplay.textContent = speaker.name; selectedSpeakerDescDisplay.textContent = speaker.desc; selectedSpeakerIdStorage.value = speaker.id; };
339
- const createSpeakerCardsInModal = () => { speakerGridInModal.innerHTML = ''; speakers.forEach((speaker) => { 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)}" alt="${speaker.name}" loading="lazy"> </div> <div class="speaker-name">${speaker.name}</div> `; cardLabel.addEventListener('click', () => { updateSelectedSpeakerDisplay(speaker.id); hideModal(speakerModal); }); speakerGridInModal.appendChild(cardLabel); }); };
340
-
341
- // --- Modal Management ---
342
- const showModal = (modalElement) => { modalElement.classList.add('visible'); setTimeout(() => modalElement.querySelector('button')?.focus(), 50); }; const hideModal = (modalElement) => modalElement.classList.remove('visible'); changeSpeakerBtn.addEventListener('click', () => { createSpeakerCardsInModal(); showModal(speakerModal); }); selectedSpeakerCard.addEventListener('click', () => { createSpeakerCardsInModal(); showModal(speakerModal); }); tempInfoIcon.addEventListener('click', () => showModal(infoModal)); document.querySelectorAll('.modal-overlay').forEach(o => o.addEventListener('click', (e) => (e.target === o) && hideModal(o))); document.querySelectorAll('.close-modal-btn').forEach(b => b.addEventListener('click', () => hideModal(document.getElementById(b.dataset.modalId)))); document.addEventListener('keydown', (e) => (e.key === 'Escape') && document.querySelectorAll('.modal-overlay.visible').forEach(hideModal)); tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; });
343
-
344
- // --- Audio Player Logic (with Waveform) ---
345
- const formatTime = (seconds) => { if (isNaN(seconds) || seconds < 0) return '0:00'; const minutes = Math.floor(seconds / 60); const remainingSeconds = Math.floor(seconds % 60); return `${minutes}:${remainingSeconds < 10 ? '0' : ''}${remainingSeconds}`; };
346
-
347
- function drawWaveform(progressRatio = 0) {
348
- const dpr = window.devicePixelRatio || 1; audioWaveformCanvas.width = audioWaveformCanvas.offsetWidth * dpr; audioWaveformCanvas.height = audioWaveformCanvas.offsetHeight * dpr; waveformCtx.scale(dpr, dpr);
349
- const width = audioWaveformCanvas.offsetWidth; const height = audioWaveformCanvas.offsetHeight;
350
- if (width === 0 || height === 0) return; waveformCtx.clearRect(0, 0, width, height);
351
- const barWidth = 3; const barGap = 2; const totalBarAndGap = barWidth + barGap; const numBars = Math.floor(width / totalBarAndGap); const offset = (width - (numBars * totalBarAndGap)) / 2;
352
- const activeColor = getComputedStyle(document.documentElement).getPropertyValue('--waveform-color-active').trim(); const inactiveColor = getComputedStyle(document.documentElement).getPropertyValue('--waveform-color-inactive').trim();
353
- waveformCtx.fillStyle = inactiveColor;
354
- for (let i = 0; i < numBars; i++) { const peak = audioPeaks[i] || 0; const barHeight = peak * height; const x = offset + i * totalBarAndGap; const y = (height - barHeight) / 2; waveformCtx.fillRect(x, y, barWidth, barHeight); }
355
- const activeFillEnd = progressRatio * width; const gradientFadeWidth = 80; const gradientSolidStart = Math.max(0, activeFillEnd - gradientFadeWidth);
356
- const activeGradient = waveformCtx.createLinearGradient(0, 0, width, 0); activeGradient.addColorStop(0, activeColor); activeGradient.addColorStop(gradientSolidStart / width, activeColor); activeGradient.addColorStop(activeFillEnd / width, inactiveColor);
357
- waveformCtx.fillStyle = activeGradient;
358
- for (let i = 0; i < numBars; i++) { const peak = audioPeaks[i] || 0; const barHeight = peak * height; const x = offset + i * totalBarAndGap; const y = (height - barHeight) / 2; waveformCtx.fillRect(x, y, barWidth, barHeight); }
359
- }
360
-
361
- const updatePlayerUI = () => {
362
- playIcon.style.display = hiddenAudioPlayer.paused || hiddenAudioPlayer.ended ? 'block' : 'none'; pauseIcon.style.display = !(hiddenAudioPlayer.paused || hiddenAudioPlayer.ended) ? 'block' : 'none';
363
- const currentTime = hiddenAudioPlayer.currentTime; const duration = hiddenAudioPlayer.duration;
364
- audioCurrentTimeSpan.textContent = formatTime(currentTime);
365
- if (isFinite(duration) && duration > 0) { audioTotalTimeSpan.textContent = formatTime(duration); requestAnimationFrame(() => drawWaveform(currentTime / duration)); } else { audioTotalTimeSpan.textContent = '0:00'; requestAnimationFrame(() => drawWaveform(0)); }
366
- };
367
-
368
- async function processAudioForWaveform(audioBuffer) {
369
- if (!audioBuffer) { audioPeaks = []; return; }
370
- const channelData = audioBuffer.getChannelData(0); const numBars = Math.floor(audioWaveformCanvas.offsetWidth / 5); const samplesPerBar = Math.floor(channelData.length / numBars); const peaks = [];
371
- for (let i = 0; i < numBars; i++) { let maxPeak = 0; const start = i * samplesPerBar; const end = Math.min(start + samplesPerBar, channelData.length); for (let j = start; j < end; j++) { const value = Math.abs(channelData[j]); if (value > maxPeak) maxPeak = value; } peaks.push(Math.min(1, Math.max(0, maxPeak * 1.5))); }
372
- audioPeaks = peaks; requestAnimationFrame(() => drawWaveform(0));
373
- }
374
-
375
- playPauseBtn.addEventListener('click', () => hiddenAudioPlayer.paused ? hiddenAudioPlayer.play() : hiddenAudioPlayer.pause()); skipBackwardBtn.addEventListener('click', () => hiddenAudioPlayer.currentTime = Math.max(0, hiddenAudioPlayer.currentTime - 5)); skipForwardBtn.addEventListener('click', () => hiddenAudioPlayer.currentTime = Math.min(hiddenAudioPlayer.duration, hiddenAudioPlayer.currentTime + 5));
376
- volumeBtn.addEventListener('click', () => { hiddenAudioPlayer.muted = !hiddenAudioPlayer.muted; volumeHighIcon.style.display = hiddenAudioPlayer.muted ? 'none' : 'block'; volumeMuteIcon.style.display = hiddenAudioPlayer.muted ? 'block' : 'none'; });
377
- speedBtn.addEventListener('click', () => { currentPlaybackSpeedIndex = (currentPlaybackSpeedIndex + 1) % playbackSpeeds.length; const newSpeed = playbackSpeeds[currentPlaybackSpeedIndex]; hiddenAudioPlayer.playbackRate = newSpeed; speedBtn.textContent = `${newSpeed}x`; });
378
- hiddenAudioPlayer.addEventListener('timeupdate', updatePlayerUI); hiddenAudioPlayer.addEventListener('play', updatePlayerUI); hiddenAudioPlayer.addEventListener('pause', updatePlayerUI); hiddenAudioPlayer.addEventListener('ended', () => { hiddenAudioPlayer.currentTime = 0; updatePlayerUI(); });
379
-
380
- hiddenAudioPlayer.addEventListener('loadedmetadata', async () => {
381
- if (!audioContext) audioContext = new (window.AudioContext || window.webkitAudioContext)();
382
- if (!hiddenAudioPlayer.src || !hiddenAudioPlayer.src.startsWith('http')) { audioPeaks = []; requestAnimationFrame(() => drawWaveform(0)); updatePlayerUI(); return; }
383
- try { const response = await fetch(hiddenAudioPlayer.src, { mode: 'cors' }); const arrayBuffer = await response.arrayBuffer(); const decodedBuffer = await audioContext.decodeAudioData(arrayBuffer); await processAudioForWaveform(decodedBuffer); } catch (e) { console.error("Error decoding audio for waveform:", e); audioPeaks = []; requestAnimationFrame(() => drawWaveform(0)); }
384
- updatePlayerUI();
385
- });
386
-
387
- let resizeTimeout; window.addEventListener('resize', () => { clearTimeout(resizeTimeout); resizeTimeout = setTimeout(() => { if (outputSection.classList.contains('has-content') && hiddenAudioPlayer.src) { requestAnimationFrame(() => drawWaveform(hiddenAudioPlayer.currentTime / hiddenAudioPlayer.duration)); } }, 250); });
388
-
389
- // --- State Management Functions ---
390
- const showLoadingState = () => { audioPlayerContent.style.display = 'none'; outputSection.classList.remove('has-content'); statusMessage.style.display = 'none'; loadingAnimationWrapper.style.display = 'flex'; generateBtn.disabled = true; generateBtn.innerHTML = ` <svg aria-hidden="true" role="status" fill="currentColor" viewBox="0 0 100 101" style="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> در حال پردازش... `; };
391
- const showResultState = (isSuccess, message = '') => {
392
- loadingAnimationWrapper.style.display = 'none';
393
- if (isSuccess) {
394
- statusMessage.style.display = 'none'; audioPlayerContent.style.display = 'flex';
395
- outputSection.classList.add('has-content');
396
- } else {
397
- statusMessage.textContent = message || 'خطایی رخ داد. لطفاً دوباره تلاش کنید.';
398
- statusMessage.style.display = 'block'; audioPlayerContent.style.display = 'none';
399
- outputSection.classList.remove('has-content');
400
- hiddenAudioPlayer.src = ''; audioPeaks = []; requestAnimationFrame(() => drawWaveform(0));
401
- }
402
- generateBtn.disabled = false; generateBtn.innerHTML = '✨ خلق صدا با آلفا';
403
- };
404
-
405
- // --- API Call (Modified for your PHP backend) ---
406
- async function generateAudio(event) {
407
- event.preventDefault();
408
- showLoadingState();
409
-
410
- const text = textInput.value;
411
- const prompt = promptInput.value;
412
- const voice = selectedSpeakerIdStorage.value;
413
- const temperature = parseFloat(tempSlider.value);
414
-
415
- if (!text.trim()) {
416
- showResultState(false, 'خطا: متن ورودی نمی‌تواند خالی باشد.');
417
- return;
418
- }
419
-
420
- const payload = {
421
- text: text,
422
- prompt: prompt,
423
- voice: voice,
424
- temperature: temperature
425
- };
426
-
427
- try {
428
- const response = await fetch(API_ENDPOINT_URL, {
429
- method: "POST",
430
- headers: {
431
- "Content-Type": "application/json",
432
- "Authorization": `Bearer ${USER_API_KEY}` // ارسال کلید API در هدر
433
- },
434
- body: JSON.stringify(payload)
435
- });
436
-
437
- const result = await response.json();
438
-
439
- if (!response.ok || !result.success) {
440
- const errorMessage = result.error?.message || `خطای سرور: ${response.status}. لطفا کنسول را برای جزئیات بررسی کنید.`;
441
- throw new Error(errorMessage);
442
  }
443
 
444
- const finalAudioUrl = result.data.audio_url;
445
-
446
- if (finalAudioUrl) {
447
- hiddenAudioPlayer.src = '';
448
- hiddenAudioPlayer.load();
449
- hiddenAudioPlayer.src = finalAudioUrl;
450
- showResultState(true);
451
- } else {
452
- throw new Error('فایل صوتی از سرور دریافت نشد.');
453
  }
454
-
455
- } catch (error) {
456
- console.error('خطا در فرآیند تولید صدا:', error);
457
- showResultState(false, error.message);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
458
  }
459
- }
460
-
461
- // --- Initial Setup ---
462
- const defaultSpeakerId = speakers.length > 0 ? speakers[0].id : "Charon";
463
- updateSelectedSpeakerDisplay(selectedSpeakerIdStorage.value || defaultSpeakerId);
464
- form.addEventListener('submit', generateAudio);
465
- statusMessage.style.display = 'block';
466
- loadingAnimationWrapper.style.display = 'none';
467
- audioPlayerContent.style.display = 'none';
468
- outputSection.classList.remove('has-content');
469
- });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
470
  </script>
471
  </body>
472
  </html>
 
3
  <head>
4
  <meta charset="UTF-8">
5
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>تبدیل متن به صدا - Gemini TTS Pro</title>
7
  <style>
8
  @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');
9
 
10
  :root {
11
  --app-font: 'Vazirmatn', sans-serif;
12
+ --app-bg: #f8f9fc;
13
+ --panel-bg: #ffffff;
14
+ --panel-border: #eaeff7;
15
+ --input-bg: #f6f8fb;
16
+ --input-border: #e1e7ef;
17
+ --text-primary: #1a202c;
18
+ --text-secondary: #626f86;
19
+ --text-tertiary: #8a94a6;
20
+ --accent-primary: #4a6cfa;
21
+ --accent-primary-hover: #3553d6;
22
  --accent-primary-glow: rgba(74, 108, 250, 0.25);
23
+ --accent-secondary: #0fd4a8;
24
+ --accent-secondary-hover: #0da986;
 
25
  --waveform-color-active: var(--accent-primary);
26
+ --waveform-color-inactive: #d0d9e6;
 
27
  --shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03);
28
  --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05), 0 2px 4px -2px rgba(26, 32, 44, 0.04);
29
  --shadow-lg: 0 10px 15px -3px rgba(26, 32, 44, 0.06), 0 4px 6px -4px rgba(26, 32, 44, 0.05);
30
  --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05);
 
31
  --radius-card: 24px;
32
  --radius-btn: 14px;
33
  --radius-input: 12px;
34
  --transition-fast: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
35
  --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
 
36
  }
37
 
 
 
 
 
 
 
 
 
 
38
  body {
39
+ font-family: var(--app-font);
40
+ direction: rtl;
41
+ background-color: var(--app-bg);
42
+ color: var(--text-primary);
43
+ margin: 0;
44
+ padding: 2rem;
45
+ min-height: 100vh;
46
+ display: flex;
47
+ justify-content: center;
48
+ align-items: flex-start;
49
+ }
50
+
51
+ .container {
52
+ max-width: 800px;
53
+ width: 100%;
54
+ }
55
+
56
+ .app-header {
57
+ text-align: center;
58
+ margin-bottom: 2rem;
59
+ }
60
+
61
+ .app-header h1 {
62
+ font-size: 2.2rem;
63
+ color: var(--accent-primary);
64
+ margin-bottom: 0.5rem;
65
+ }
66
+
67
+ .app-header p {
68
+ color: var(--text-secondary);
69
+ margin-top: 0;
70
+ }
71
+
72
+ .main-panel {
73
+ background-color: var(--panel-bg);
74
+ border-radius: var(--radius-card);
75
+ padding: 2rem;
76
+ box-shadow: var(--shadow-xl);
77
+ border: 1px solid var(--panel-border);
78
+ }
79
+
80
+ .form-group {
81
+ margin-bottom: 1.5rem;
82
+ }
83
+
84
+ label {
85
+ display: block;
86
+ font-weight: 600;
87
+ margin-bottom: 0.5rem;
88
+ color: var(--text-primary);
89
+ }
90
+
91
+ textarea, select {
92
+ width: 100%;
93
+ padding: 0.8rem;
94
+ border-radius: var(--radius-input);
95
+ border: 1px solid var(--input-border);
96
+ background-color: var(--input-bg);
97
+ font-family: var(--app-font);
98
+ resize: vertical;
99
+ transition: var(--transition-smooth);
100
+ }
101
+
102
+ textarea:focus, select:focus {
103
+ outline: none;
104
+ border-color: var(--accent-primary);
105
+ box-shadow: 0 0 0 3px var(--accent-primary-glow);
106
+ }
107
+
108
+ textarea {
109
+ min-height: 120px;
110
+ }
111
+
112
+ .char-counter {
113
+ font-size: 0.85rem;
114
+ color: var(--text-secondary);
115
+ text-align: left;
116
+ margin-top: 0.5rem;
117
+ }
118
+
119
+ .char-counter .count {
120
+ font-weight: 600;
121
+ color: var(--accent-primary);
122
+ }
123
+
124
+ .btn {
125
+ background-color: var(--accent-primary);
126
+ color: white;
127
+ border: none;
128
+ padding: 0.8rem 1.5rem;
129
+ border-radius: var(--radius-btn);
130
+ font-family: var(--app-font);
131
+ font-weight: 600;
132
+ cursor: pointer;
133
+ transition: var(--transition-smooth);
134
+ width: 100%;
135
+ font-size: 1rem;
136
+ }
137
+
138
+ .btn:hover {
139
+ background-color: var(--accent-primary-hover);
140
+ transform: translateY(-2px);
141
+ box-shadow: var(--shadow-md);
142
+ }
143
+
144
+ .btn:disabled {
145
+ background-color: var(--text-tertiary);
146
+ cursor: not-allowed;
147
+ transform: none;
148
+ box-shadow: none;
149
+ }
150
+
151
+ .output-section {
152
+ margin-top: 2rem;
153
+ padding: 1.5rem;
154
+ background-color: var(--input-bg);
155
+ border-radius: var(--radius-card);
156
+ border: 2px dashed var(--input-border);
157
+ text-align: center;
158
+ min-height: 150px;
159
+ display: flex;
160
+ flex-direction: column;
161
+ justify-content: center;
162
+ align-items: center;
163
+ }
164
+
165
+ .output-section.has-audio {
166
+ background-color: var(--panel-bg);
167
+ border: 1px solid var(--panel-border);
168
+ }
169
+
170
+ .status-message {
171
+ color: var(--text-secondary);
172
+ }
173
+
174
+ .loading-spinner {
175
+ display: none;
176
+ width: 40px;
177
+ height: 40px;
178
+ border: 4px solid rgba(0, 0, 0, 0.1);
179
+ border-radius: 50%;
180
+ border-top-color: var(--accent-primary);
181
+ animation: spin 1s linear infinite;
182
+ margin-bottom: 1rem;
183
+ }
184
+
185
+ @keyframes spin {
186
+ to { transform: rotate(360deg); }
187
+ }
188
+
189
+ .audio-player {
190
+ width: 100%;
191
+ margin-top: 1rem;
192
+ display: none;
193
+ }
194
+
195
+ .audio-controls {
196
+ display: flex;
197
+ justify-content: center;
198
+ gap: 1rem;
199
+ margin-top: 1rem;
200
+ }
201
+
202
+ .audio-controls button {
203
+ background: none;
204
+ border: none;
205
+ cursor: pointer;
206
+ font-size: 1.2rem;
207
+ color: var(--text-primary);
208
+ }
209
+
210
+ .error-message {
211
+ color: #e74c3c;
212
+ margin-top: 1rem;
213
+ display: none;
214
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
215
 
216
  @media (max-width: 600px) {
217
+ body {
218
+ padding: 1rem;
219
+ }
220
+
221
+ .main-panel {
222
+ padding: 1.5rem;
223
+ }
224
  }
225
  </style>
226
  </head>
227
  <body>
 
228
  <div class="container">
229
  <header class="app-header">
230
+ <h1>تبدیل متن به صدا با هوش مصنوعی</h1>
231
+ <p>متن خود را وارد کنید و به صدای طبیعی تبدیل کنید</p>
232
  </header>
233
 
234
+ <main class="main-panel">
235
  <form id="tts-form">
236
  <div class="form-group">
237
+ <label for="text-input">متن فارسی</label>
238
+ <textarea id="text-input" placeholder="متن خود را اینجا وارد کنید..."></textarea>
239
+ <div class="char-counter">
240
+ <span class="count">0</span> / 50000 نویسه
241
  </div>
242
  </div>
243
 
244
  <div class="form-group">
245
+ <label for="prompt-input">راهنمای لحن (اختیاری)</label>
246
+ <textarea id="prompt-input" placeholder="مثال: با لحنی شاد و پرانرژی" rows="2"></textarea>
247
  </div>
248
 
249
  <div class="form-group">
250
+ <label for="voice-select">انتخاب صدا</label>
251
+ <select id="voice-select">
252
+ <option value="Charon">چارون (مرد - پیش‌فرض)</option>
253
+ <option value="Zephyr">زفیر (زن - ملایم)</option>
254
+ <option value="Achird">آچیرد (مرد - جوان)</option>
255
+ <option value="Zubenelgenubi">زوبن الجنوبی (مرد - گرم)</option>
256
+ <option value="Vindemiatrix">ویندیمیاتریکس (زن - رسمی)</option>
257
+ <option value="Sadachbia">ساداخبیا (مرد - شاداب)</option>
258
+ </select>
 
 
259
  </div>
260
 
261
  <div class="form-group">
262
+ <label for="temperature-slider">سطح خلاقیت صدا (0.1 تا 1.5)</label>
263
+ <input type="range" id="temperature-slider" min="0.1" max="1.5" step="0.1" value="0.9">
264
+ <div style="text-align: center; margin-top: 0.5rem;">
 
 
 
265
  <span id="temperature-value">0.9</span>
266
  </div>
267
  </div>
268
 
269
+ <button type="submit" class="btn" id="generate-btn">تبدیل به صدا</button>
270
  </form>
271
 
272
+ <div class="output-section" id="output-section">
273
+ <div class="status-message" id="status-message">صدای تولید شده در اینجا نمایش داده می‌شود</div>
274
+ <div class="loading-spinner" id="loading-spinner"></div>
275
+ <audio controls class="audio-player" id="audio-player"></audio>
276
+ <div class="error-message" id="error-message"></div>
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
277
  </div>
278
  </main>
279
  </div>
280
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
281
  <script>
282
+ document.addEventListener('DOMContentLoaded', function() {
283
+ // تنظیمات API
284
+ const API_URL = 'https://www.aisada.ir/api/v1/audio/generate';
285
+ const API_KEY = 'sk-a1b2c3d4e5f6g7h8i9j0k1l2m3n4'; // کلید API شما
286
+
287
+ // عناصر DOM
288
+ const form = document.getElementById('tts-form');
289
+ const textInput = document.getElementById('text-input');
290
+ const promptInput = document.getElementById('prompt-input');
291
+ const voiceSelect = document.getElementById('voice-select');
292
+ const temperatureSlider = document.getElementById('temperature-slider');
293
+ const temperatureValue = document.getElementById('temperature-value');
294
+ const generateBtn = document.getElementById('generate-btn');
295
+ const outputSection = document.getElementById('output-section');
296
+ const statusMessage = document.getElementById('status-message');
297
+ const loadingSpinner = document.getElementById('loading-spinner');
298
+ const audioPlayer = document.getElementById('audio-player');
299
+ const errorMessage = document.getElementById('error-message');
300
+ const charCount = document.querySelector('.char-counter .count');
301
+
302
+ // نمایش مقدار temperature
303
+ temperatureSlider.addEventListener('input', function() {
304
+ temperatureValue.textContent = this.value;
305
+ });
306
+
307
+ // شمارشگر کاراکترها
308
+ textInput.addEventListener('input', function() {
309
+ const count = this.value.length;
310
+ charCount.textContent = count;
311
+ charCount.style.color = count > 50000 ? 'red' : 'var(--accent-primary)';
312
+ });
313
+
314
+ // ارسال فرم
315
+ form.addEventListener('submit', async function(e) {
316
+ e.preventDefault();
317
+
318
+ const text = textInput.value.trim();
319
+ if (!text) {
320
+ showError('لطفاً متن مورد نظر را وارد کنید');
321
+ return;
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
322
  }
323
 
324
+ if (text.length > 50000) {
325
+ showError('متن نمی‌تواند بیشتر از 50000 نویسه باشد');
326
+ return;
 
 
 
 
 
 
327
  }
328
+
329
+ startLoading();
330
+
331
+ try {
332
+ const response = await fetch(API_URL, {
333
+ method: 'POST',
334
+ headers: {
335
+ 'Authorization': `Bearer ${API_KEY}`,
336
+ 'Content-Type': 'application/json'
337
+ },
338
+ body: JSON.stringify({
339
+ text: text,
340
+ prompt: promptInput.value.trim(),
341
+ voice: voiceSelect.value,
342
+ temperature: parseFloat(temperatureSlider.value)
343
+ })
344
+ });
345
+
346
+ const data = await response.json();
347
+
348
+ if (response.ok) {
349
+ if (data.success) {
350
+ showAudio(data.data.audio_url);
351
+ } else {
352
+ showError(data.error?.message || 'خطایی در پردازش رخ داد');
353
+ }
354
+ } else {
355
+ showError(data.error?.message || `خطای سرور: ${response.status}`);
356
+ }
357
+ } catch (error) {
358
+ showError('خطا در ارتباط با سرور: ' + error.message);
359
+ } finally {
360
+ stopLoading();
361
+ }
362
+ });
363
+
364
+ // توابع کمکی
365
+ function startLoading() {
366
+ generateBtn.disabled = true;
367
+ generateBtn.textContent = 'در حال پردازش...';
368
+ loadingSpinner.style.display = 'block';
369
+ statusMessage.style.display = 'none';
370
+ errorMessage.style.display = 'none';
371
+ audioPlayer.style.display = 'none';
372
+ outputSection.classList.remove('has-audio');
373
  }
374
+
375
+ function stopLoading() {
376
+ generateBtn.disabled = false;
377
+ generateBtn.textContent = 'تبدیل به صدا';
378
+ loadingSpinner.style.display = 'none';
379
+ }
380
+
381
+ function showAudio(audioUrl) {
382
+ audioPlayer.src = audioUrl;
383
+ audioPlayer.style.display = 'block';
384
+ outputSection.classList.add('has-audio');
385
+ statusMessage.style.display = 'none';
386
+ errorMessage.style.display = 'none';
387
+
388
+ // پخش خودکار صدا
389
+ setTimeout(() => {
390
+ audioPlayer.play().catch(e => {
391
+ console.log('اتوماتیک پخش نشد:', e);
392
+ });
393
+ }, 500);
394
+ }
395
+
396
+ function showError(message) {
397
+ errorMessage.textContent = message;
398
+ errorMessage.style.display = 'block';
399
+ statusMessage.style.display = 'none';
400
+ audioPlayer.style.display = 'none';
401
+ outputSection.classList.remove('has-audio');
402
+ }
403
+ });
404
  </script>
405
  </body>
406
  </html>