Ezmary commited on
Commit
ddbda7b
·
verified ·
1 Parent(s): ec918e0

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +220 -529
app.py CHANGED
@@ -1,536 +1,227 @@
1
- <!DOCTYPE html>
2
- <html lang="fa" dir="rtl">
3
- <head>
4
- <meta charset="UTF-8">
5
- <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
- <title>Alpha TTS - استودیوی پادکست</title>
7
- <style>
8
- /* All your existing CSS styles go here... */
9
- @import url('https://fonts.googleapis.com/css2?family=Vazirmatn:wght@300;400;500;600;700;800;900&display=swap');
10
- :root {
11
- --app-font: 'Vazirmatn', sans-serif; --app-bg: #F8F9FC; --panel-bg: #FFFFFF;
12
- --panel-border: #EAEFF7; --input-bg: #F6F8FB; --input-border: #E1E7EF;
13
- --text-primary: #1A202C; --text-secondary: #626F86; --text-tertiary: #8A94A6;
14
- --accent-primary: #4A6CFA; --accent-primary-hover: #3553D6; --accent-primary-glow: rgba(74, 108, 250, 0.25);
15
- --accent-secondary: #0FD4A8; --accent-secondary-hover: #0DA986; --accent-secondary-glow: rgba(15, 212, 168, 0.2);
16
- --danger-color: #e53e3e; --danger-color-hover: #c53030; --danger-glow: rgba(229, 62, 62, 0.25);
17
- --waveform-color-active: var(--accent-primary); --waveform-color-inactive: #D0D9E6; --waveform-dashed-line-color: #E0E4E9;
18
- --shadow-sm: 0 1px 2px 0 rgba(26, 32, 44, 0.03); --shadow-md: 0 4px 6px -1px rgba(26, 32, 44, 0.05), 0 2px 4px -2px rgba(26, 32, 44, 0.04);
19
- --shadow-lg: 0 10px 15px -3px rgba(26, 32, 44, 0.06), 0 4px 6px -4px rgba(26, 32, 44, 0.05);
20
- --shadow-xl: 0 20px 25px -5px rgba(26, 32, 44, 0.07), 0 8px 10px -6px rgba(26, 32, 44, 0.05);
21
- --radius-card: 24px; --radius-btn: 14px; --radius-input: 12px;
22
- --transition-smooth: all 0.35s cubic-bezier(0.4, 0, 0.2, 1);
23
- }
24
- @keyframes fadeIn { from { opacity: 0; transform: translateY(15px); } to { opacity: 1; transform: translateY(0); } }
25
- @keyframes spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
26
- @keyframes modalZoomIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
27
- @keyframes fadeInOut { 0% { opacity: 0; transform: translateY(10px); } 10% { opacity: 1; transform: translateY(0); } 90% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-10px); } }
28
- @keyframes rotate-loader-orbital { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
29
- @keyframes orbit-spin { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
30
- @keyframes satellite-pulse-1 { from { transform: scale(0.7) translateX(-50%); opacity: 0.6; } to { transform: scale(1.1) translateX(-50%); opacity: 1; } }
31
- @keyframes satellite-pulse-2 { from { transform: scale(0.7) translateY(-50%); opacity: 0.6; } to { transform: scale(1.1) translateY(-50%); opacity: 1; } }
32
- @keyframes satellite-pulse-3 { from { transform: scale(0.7) translateX(50%); opacity: 0.6; } to { transform: scale(1.1) translateX(50%); opacity: 1; } }
33
- @keyframes shake { 10%, 90% { transform: translate3d(-1px, 0, 0); } 20%, 80% { transform: translate3d(2px, 0, 0); } 30%, 50%, 70% { transform: translate3d(-4px, 0, 0); } 40%, 60% { transform: translate3d(4px, 0, 0); } }
34
- .shake-animation { animation: shake 0.82s cubic-bezier(.36,.07,.19,.97) both; }
35
- @keyframes ai-core-pulse { 0% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(74, 108, 250, 0.7); } 70% { transform: scale(1); box-shadow: 0 0 0 20px rgba(74, 108, 250, 0); } 100% { transform: scale(0.95); box-shadow: 0 0 0 0 rgba(74, 108, 250, 0); } }
36
- @keyframes ai-orbit { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
37
- @keyframes ai-text-fade-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
38
 
39
- /* --- انیمیشن‌های جدید --- */
40
- @keyframes shake-button { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-6px); } 20%, 40%, 60%, 80% { transform: translateX(6px); } }
41
- .shake-animation-btn { animation: shake-button 0.6s cubic-bezier(.36,.07,.19,.97) both; }
42
- @keyframes validation-fade-in-out { 0% { opacity: 0; transform: translateY(10px); } 15% { opacity: 1; transform: translateY(0); } 85% { opacity: 1; transform: translateY(0); } 100% { opacity: 0; transform: translateY(-5px); } }
43
- .validation-message-active { animation: validation-fade-in-out 4s ease-in-out forwards; }
44
-
45
-
46
- html { scroll-behavior: smooth; }
47
- body { font-family: var(--app-font); direction: rtl; background-color: var(--app-bg); color: var(--text-primary); font-size: 16px; line-height: 1.8; margin: 0; padding: 2.5rem 0; min-height: 100vh; display: flex; justify-content: center; align-items: flex-start; overflow-x: hidden; background-image: radial-gradient(var(--text-tertiary) 0.5px, transparent 0.5px); background-size: 20px 20px; background-position: -10px -10px; }
48
- .app-container { max-width: 820px; width: 92%; margin: 0 auto; }
49
- .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; }
50
- .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; }
51
- .app-header p { font-size: 1.05em; color: var(--text-secondary); margin-top: 0; opacity: 0.9; font-weight: 400; line-height: 1.7; }
52
- .main-content { position:relative; padding: 2.5rem; 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; }
53
- .form-group { margin-bottom: 2.5rem; }
54
- .form-group-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.2rem; }
55
- label { display: block; font-weight: 700; color: var(--text-primary); font-size: 1.2em; }
56
- #project-speakers-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 1.5rem; text-align: center; }
57
- .speaker-display-card { position: relative; background-color: var(--input-bg); border-radius: var(--radius-card); padding: 1.5rem 1rem; border: 2px solid var(--input-border); transition: var(--transition-smooth); }
58
- .speaker-display-card:hover:not(#add-speaker-card) { border-color: var(--accent-primary); transform: translateY(-5px); box-shadow: var(--shadow-md); }
59
- .speaker-display-card img { width: 80px; height: 80px; border-radius: 50%; object-fit: cover; border: 4px solid var(--panel-bg); box-shadow: var(--shadow-md); margin-bottom: 1rem; }
60
- .speaker-display-card h3 { margin: 0 0 0.25rem 0; font-size: 1.1em; font-weight: 800; }
61
- .remove-speaker-btn { position: absolute; top: 12px; left: 12px; background: rgba(255, 255, 255, 0.7); backdrop-filter: blur(4px); border: 1px solid var(--panel-border); color: var(--text-secondary); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 1.2rem; line-height: 1; transition: all 0.2s; }
62
- .remove-speaker-btn:hover { color: var(--danger-color); transform: scale(1.1); background: #fff; }
63
- #add-speaker-card { display: flex; flex-direction: column; align-items: center; justify-content: center; font-weight: 700; color: var(--accent-primary); border: 2px dashed var(--input-border); cursor: pointer; background-color: transparent; }
64
- #add-speaker-card:hover { border-color: var(--accent-primary); background: var(--accent-primary-glow); }
65
- #add-speaker-card .plus-icon { font-size: 2.5rem; line-height: 1; margin-bottom: 0.5rem; }
66
- #podcast-script-container { border: 1px solid var(--input-border); border-radius: var(--radius-card); padding: 1rem; background-color: var(--input-bg); box-shadow: inset 0 2px 4px rgba(0,0,0,0.02); }
67
- .script-turn { display: flex; gap: 1rem; margin-bottom: 1.5rem; background-color: var(--panel-bg); padding: 1rem; border-radius: var(--radius-input); border: 1px solid var(--panel-border); box-shadow: var(--shadow-md); }
68
- .script-turn:last-child { margin-bottom: 0; }
69
- .turn-speaker-selector { flex-shrink: 0; width: 180px; position: relative; }
70
- .turn-content { flex-grow: 1; }
71
- .turn-content textarea { width: 100%; min-height: 100px; resize: vertical; padding: 0.8rem 1rem; border-radius: var(--radius-input); border: 1px solid var(--input-border); background-color: #fff; font-family: var(--app-font); font-size: 1rem; box-sizing: border-box; }
72
- .turn-content textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 3px var(--accent-primary-glow); }
73
- .remove-turn-btn { flex-shrink: 0; background: none; border: none; color: var(--text-tertiary); font-size: 1.5rem; cursor: pointer; align-self: center; transition: all 0.2s; }
74
- .remove-turn-btn:hover { color: var(--danger-color); transform: scale(1.1); }
75
- #add-turn-btn { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; padding: 1rem; font-size: 1em; font-weight: 700; background: transparent; color: var(--text-primary); border: 2px dashed var(--input-border); border-radius: var(--radius-btn); cursor: pointer; margin-top: 1.5rem; transition: var(--transition-smooth); }
76
- #add-turn-btn:hover { background: var(--panel-bg); border-color: var(--accent-primary); color: var(--accent-primary); }
77
- .slider-container { display: flex; align-items: center; gap: 1.5rem; }
78
- 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; }
79
- 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; }
80
- .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); }
81
- .generate-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 1.1rem 1.5rem; font-size: 1.25em; font-weight: 800; background: linear-gradient(95deg, var(--accent-secondary) 0%, var(--accent-primary) 100%); color: #fff; border: none; border-radius: var(--radius-btn); cursor: pointer; transition: all 0.3s ease; box-shadow: 0 6px 12px -3px var(--accent-primary-glow), 0 6px 12px -3px var(--accent-secondary-glow); }
82
- .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); }
83
- .generate-btn:disabled { background: var(--text-tertiary); cursor: not-allowed; box-shadow: none; }
84
- .generate-btn .spinner { width: 20px; height: 20px; border: 3px solid rgba(255, 255, 255, 0.4); border-top-color: #fff; border-radius: 50%; animation: spin 0.8s linear infinite; display: none;}
85
 
86
- /* --- استایل پیام اعتبارسنجی --- */
87
- #validation-message {
88
- color: var(--text-secondary); font-weight: 600; text-align: center;
89
- margin-top: 1rem; padding: 0.5rem 1rem;
90
- background-color: var(--input-bg); border-radius: var(--radius-input);
91
- border: 1px solid var(--input-border);
92
- opacity: 0; /* شروع به صورت مخفی */
93
- }
94
-
95
- .output-section { margin-top: 3rem; display: flex; align-items: center; justify-content: center; flex-direction: column; min-height: 220px; position: relative; padding: 2rem; background-color: var(--input-bg); border-radius: var(--radius-card); border: 2px dashed var(--input-border); box-shadow: var(--shadow-sm) inset; }
96
- .output-section.has-content { padding: 0; background-color: transparent; border: none; min-height: auto; box-shadow: none; }
97
- .status-message { font-weight: 500; color: var(--text-secondary); text-align: center; font-size: 1.1em; }
98
- .status-message.error { color: var(--danger-color); font-weight: 600; }
99
- #clear-history-btn { background: none; border: none; color: var(--text-tertiary); font-family: var(--app-font); font-size: 0.9em; font-weight: 600; cursor: pointer; margin-top: 1rem; transition: color 0.2s; display: inline-flex; align-items: center; gap: 6px; }
100
- #clear-history-btn:hover { color: var(--accent-primary); }
101
- #clear-history-btn svg { width: 16px; height: 16px; fill: currentColor; }
102
- .loading-animation-wrapper { display: none; flex-direction: column; align-items: center; justify-content: center; gap: 1.8rem; width: 100%; }
103
- .orbital-loader { width: 110px; height: 110px; position: relative; animation: rotate-loader-orbital 10s linear infinite; }
104
- .orbit { position: absolute; top: 50%; left: 50%; border: 2px dashed rgba(74, 108, 250, 0.35); border-radius: 50%; transform-origin: center center; }
105
- .orbit:nth-child(1) { width: 35px; height: 35px; margin: -17.5px 0 0 -17.5px; animation: orbit-spin 2.8s linear infinite reverse; }
106
- .orbit:nth-child(2) { width: 65px; height: 65px; margin: -32.5px 0 0 -32.5px; animation: orbit-spin 3.8s linear infinite; }
107
- .orbit:nth-child(3) { width: 95px; height: 95px; margin: -47.5px 0 0 -47.5px; animation: orbit-spin 4.8s linear infinite reverse; }
108
- .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); }
109
- .orbit:nth-child(1) .satellite { top: -5px; left: 50%; animation: satellite-pulse-1 1.4s ease-in-out infinite alternate; }
110
- .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; }
111
- .orbit:nth-child(3) .satellite { bottom: -5px; right: 50%; animation: satellite-pulse-3 1.4s 0.4s ease-in-out infinite alternate;}
112
- .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; }
113
- .audio-player-content { display: none; width: 100%; padding: 1.5rem; box-sizing: border-box; flex-direction: column; gap: 1.2rem; background-color: var(--panel-bg); border-radius: var(--radius-card); box-shadow: var(--shadow-lg); border: 1px solid var(--panel-border); animation: fadeIn 0.5s ease-out; }
114
- .audio-waveform-container { display: flex; align-items: center; gap: 1rem; width: 100%; margin-bottom: 1rem; }
115
- .audio-time { font-size: 0.9em; color: var(--text-secondary); min-width: 40px; text-align: center; font-variant-numeric: tabular-nums; user-select: none; }
116
- .audio-waveform { flex-grow: 1; height: 60px; position: relative; overflow: hidden; display: flex; align-items: center; justify-content: center; margin-bottom: 0.5rem; }
117
- .audio-waveform-canvas { display: block; max-width: 100%; height: 100%; }
118
- .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; z-index: 1; }
119
- .audio-controls-group { display: flex; justify-content: center; align-items: center; gap: 1.5rem; margin-bottom: 1rem; }
120
- .audio-skip-btn, .audio-play-pause-btn-large, .audio-volume-btn { background: none; border: none; cursor: pointer; padding: 8px; transition: transform 0.2s, opacity 0.2s; color: var(--text-secondary); }
121
- .audio-skip-btn:hover, .audio-play-pause-btn-large:hover, .audio-volume-btn:hover { color: var(--accent-primary); opacity: 0.9; }
122
- .audio-skip-btn:active, .audio-play-pause-btn-large:active, .audio-volume-btn:active { transform: scale(0.9); }
123
- .audio-skip-btn svg { width: 28px; height: 28px; fill: currentColor; }
124
- .audio-play-pause-btn-large { padding: 0; width: 50px; height: 50px; }
125
- .audio-play-pause-btn-large svg { width: 38px; height: 38px; fill: currentColor; }
126
- .audio-utility-controls { display: flex; align-items: center; justify-content: space-between; width: 100%; }
127
- .audio-volume-btn svg { width: 24px; height: 24px; fill: currentColor; }
128
- .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-md); padding: 0.4rem 0.6rem; cursor: pointer; }
129
- .audio-speed-btn:hover { background-color: var(--input-bg); }
130
- .turn-player-container { display: none; align-items: center; gap: 1rem; padding: 0.75rem; margin-top: 1rem; background-color: var(--input-bg); border-radius: var(--radius-input); border: 1px solid var(--panel-border); position: relative; }
131
- .turn-player-container.visible { display: flex; }
132
- .turn-play-btn { background: var(--accent-primary); color: white; border: none; width: 36px; height: 36px; border-radius: 50%; display: flex; align-items: center; justify-content: center; cursor: pointer; transition: var(--transition-smooth); flex-shrink: 0; }
133
- .turn-play-btn:hover { background: var(--accent-primary-hover); transform: scale(1.1); }
134
- .turn-play-btn svg { width: 20px; height: 20px; fill: currentColor; }
135
- .turn-play-btn .pause-icon { display: none; }
136
- .turn-player-container.playing .turn-play-btn .play-icon { display: none; }
137
- .turn-player-container.playing .turn-play-btn .pause-icon { display: block; }
138
- .loading-state-wrapper { display: flex; align-items: center; gap: 6px; margin-right: auto; }
139
- .loading-state-wrapper .spinner { width: 18px; height: 18px; border: 2px solid var(--text-tertiary); border-top-color: var(--accent-primary); border-radius: 50%; animation: spin 0.8s linear infinite; display: inline-block; }
140
- .loading-state-wrapper .loading-text { font-size: 0.85em; font-weight: 600; color: var(--accent-primary); white-space: nowrap; }
141
- .turn-retry-btn { font-family: var(--app-font); font-size: 0.85em; font-weight: 600; background: none; border: 1px solid var(--input-border); color: var(--text-secondary); padding: 0.4rem 0.8rem; border-radius: var(--radius-btn); cursor: pointer; transition: var(--transition-smooth); margin-right: auto; display: flex; align-items: center; gap: 6px; }
142
- .turn-retry-btn:hover { border-color: var(--accent-secondary); color: var(--accent-secondary); background: var(--accent-secondary-glow); }
143
- .turn-retry-btn svg { width: 16px; height: 16px; fill: currentColor; }
144
- .replace-success-message { font-family: var(--app-font); font-size: 0.85em; font-weight: 600; padding: 0.4rem 0.8rem; border-radius: var(--radius-btn); background-color: var(--accent-secondary-glow); color: var(--accent-secondary); white-space: nowrap; display: flex; align-items: center; justify-content: center; margin-right: auto; opacity: 0; transform: translateY(10px); animation: fadeInOut 3s forwards; }
145
- .modal-overlay { position: fixed; top: 0; left: 0; width: 100%; height: 100%; background-color: rgba(18, 24, 38, 0.6); backdrop-filter: blur(8px); display: none; align-items: center; justify-content: center; z-index: 1000; opacity: 0; transition: opacity 0.3s; }
146
- .modal-overlay.visible { display: flex; opacity: 1; }
147
- .modal-dialog { background: var(--panel-bg); padding: 2.5rem; border-radius: var(--radius-card); width: 90%; max-width: 750px; max-height: 85vh; box-shadow: var(--shadow-lg); border: 1px solid var(--panel-border); animation: modalZoomIn 0.4s cubic-bezier(0.4, 0, 0.2, 1) forwards; position: relative; display: flex; flex-direction: column; }
148
- .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); }
149
- .modal-header h2 { margin: 0; font-size: 1.8em; font-weight: 800; color: var(--accent-primary); }
150
- .close-modal-btn { background: none; border: none; font-size: 2.5rem; cursor: pointer; color: var(--text-tertiary); transition: var(--transition-smooth); line-height: 1; }
151
- .close-modal-btn:hover { color: var(--accent-primary); transform: rotate(90deg); }
152
- .modal-body { overflow-y: auto; }
153
- #speaker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 1.5rem; }
154
- .speaker-card { cursor: pointer; transition: var(--transition-smooth); text-align: center; padding: 0.5rem; }
155
- .speaker-card:hover:not(.disabled) { transform: translateY(-8px); }
156
- .speaker-card .speaker-visual { border: 3px solid transparent; border-radius: 18px; overflow: hidden; box-shadow: var(--shadow-md); transition: var(--transition-smooth); }
157
- .speaker-card:hover:not(.disabled) .speaker-visual { box-shadow: var(--shadow-lg); }
158
- .speaker-card img { width: 100%; height: 130px; object-fit: cover; display: block; background-color: #e0e0e0; border-radius: 14px; }
159
- .speaker-card .speaker-name { padding: 0.8rem 0.4rem 0.2rem; font-weight: 600; font-size: 0.95em; color: var(--text-secondary); }
160
- .speaker-card.disabled { opacity: 0.4; cursor: not-allowed; }
161
- .custom-select-trigger { display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem; border-radius: var(--radius-input); border: 1px solid var(--input-border); background-color: #fff; cursor: pointer; transition: var(--transition-smooth); }
162
- .custom-select-trigger:hover { border-color: var(--accent-primary); }
163
- .custom-select-trigger img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
164
- .custom-select-trigger span { font-weight: 600; flex-grow: 1; }
165
- .custom-select-trigger .arrow { margin-right: auto; width: 20px; height: 20px; color: var(--text-tertiary); transition: transform 0.2s; }
166
- .custom-select-container.open .arrow { transform: rotate(180deg); }
167
- .custom-select-options { position: absolute; top: calc(100% + 8px); left: 0; width: 100%; background: var(--panel-bg); border-radius: var(--radius-input); border: 1px solid var(--panel-border); box-shadow: var(--shadow-lg); z-index: 10; max-height: 250px; overflow-y: auto; opacity: 0; transform: translateY(10px); pointer-events: none; transition: all 0.25s ease-out; }
168
- .custom-select-container.open .custom-select-options { opacity: 1; transform: translateY(0); pointer-events: auto; }
169
- .custom-select-option { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem; cursor: pointer; }
170
- .custom-select-option:hover { background-color: var(--input-bg); }
171
- .custom-select-option img { width: 40px; height: 40px; border-radius: 10px; object-fit: cover; }
172
- .custom-select-option span { font-weight: 500; }
173
- .no-speaker-option { padding: 1rem; text-align: center; color: var(--text-secondary); }
174
- .ai-script-btn { background: transparent; border: 1px solid var(--accent-primary); color: var(--accent-primary); padding: 0.4rem 0.9rem; font-size: 0.9em; border-radius: var(--radius-btn); font-weight: 700; cursor: pointer; transition: var(--transition-smooth); display: flex; align-items: center; gap: 8px; }
175
- .ai-script-btn:hover { background: var(--accent-primary-glow); box-shadow: var(--shadow-md); }
176
- #ai-modal .modal-dialog { max-width: 480px; padding: 32px 36px; min-height: 480px; display: flex; align-items: center; }
177
- #ai-modal .modal-content-wrapper, #ai-modal .modal-loading-wrapper { width: 100%; transition: opacity 0.4s ease-in-out, transform 0.4s ease-in-out; }
178
- #ai-modal .modal-content-wrapper:not(.active), #ai-modal .modal-loading-wrapper:not(.active) { opacity: 0; transform: scale(0.95); pointer-events: none; position: absolute; right: 36px; left: 36px; }
179
- #ai-modal .modal-loading-wrapper { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 40px; }
180
- #ai-modal .loader-animation { width: 120px; height: 120px; position: relative; display: flex; align-items: center; justify-content: center; }
181
- #ai-modal .core-pulse { width: 25px; height: 25px; background-color: var(--accent-primary); border-radius: 50%; animation: ai-core-pulse 2s infinite cubic-bezier(0.45, 0.05, 0.55, 0.95); }
182
- #ai-modal .ai-orbit { position: absolute; border-radius: 50%; border: 2px dashed var(--panel-border); animation: ai-orbit 10s linear infinite; }
183
- #ai-modal .ai-orbit:nth-child(2) { width: 70px; height: 70px; animation-duration: 8s; animation-direction: reverse; }
184
- #ai-modal .ai-orbit:nth-child(3) { width: 110px; height: 110px; animation-duration: 12s; }
185
- #ai-modal .ai-orbit::before { content: ''; position: absolute; width: 10px; height: 10px; border-radius: 50%; background-color: var(--text-primary); top: 5px; left: 5px; }
186
- #ai-modal .ai-orbit:nth-child(2)::before { background-color: var(--accent-secondary); top: auto; bottom: 8px; left: 8px; }
187
- #ai-modal .ai-orbit:nth-child(3)::before { background-color: var(--accent-primary); top: 10px; right: 10px; left: auto; }
188
- #loading-text-ai { font-size: 18px; font-weight: 600; background-image: linear-gradient(100deg, var(--accent-primary), var(--accent-secondary)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; text-align: center; min-height: 27px; animation: ai-text-fade-in 0.5s ease; }
189
- #ai-modal .modal-header { padding-bottom: 0; border-bottom: none; margin-bottom: 0; }
190
- #ai-modal .modal-header h2 { font-size: 28px; font-weight: 800; }
191
- #ai-modal .modal-body p { color: var(--text-secondary); line-height: 1.8; margin: 24px 0; font-size: 1rem; }
192
- #ai-modal textarea { width: 100%; min-height: 150px; padding: 16px; border: 2px solid var(--input-border); border-radius: var(--radius-input); font-family: var(--app-font); font-size: 1rem; resize: vertical; box-sizing: border-box; background-color: #fff; transition: border-color 0.3s ease, box-shadow 0.3s ease; }
193
- #ai-modal textarea:focus { outline: none; border-color: var(--accent-primary); box-shadow: 0 0 0 4px var(--accent-primary-glow); }
194
- #ai-modal .modal-footer { margin-top: 28px; padding-top: 0; border-top: none; }
195
- #generate-script-ai-btn { width: 100%; padding: 16px 24px; font-family: var(--app-font); font-size: 18px; font-weight: 700; background-image: linear-gradient(100deg, var(--accent-primary), var(--accent-secondary)); background-size: 200% 100%; box-shadow: 0 8px 20px -5px var(--accent-primary-glow); transition: transform 0.3s cubic-bezier(0.16, 1, 0.3, 1), box-shadow 0.3s cubic-bezier(0.16, 1, 0.3, 1), background-position 0.4s ease; }
196
- #generate-script-ai-btn:hover { background-position: right center; }
197
- #ai-status-message { margin: 1rem 0 0 0; text-align: center; display: none; }
198
- #ai-status-message.error { color: var(--danger-color); font-weight: 700; }
199
-
200
- /* --- استایل مودال تایید (Confirmation Modal) --- */
201
- #confirm-modal .modal-dialog { max-width: 450px; text-align: center; }
202
- #confirm-modal .modal-body { padding-top: 1rem; }
203
- #confirm-modal-message { font-size: 1.1em; color: var(--text-secondary); margin-bottom: 2rem; }
204
- .confirm-modal-actions { display: flex; gap: 1rem; justify-content: center; }
205
- .confirm-btn { padding: 0.8rem 1.5rem; font-family: var(--app-font); font-size: 1em; font-weight: 700; border-radius: var(--radius-btn); border: none; cursor: pointer; transition: var(--transition-smooth); }
206
- #confirm-btn-yes { background-color: var(--danger-color); color: white; box-shadow: 0 4px 12px -2px var(--danger-glow); }
207
- #confirm-btn-yes:hover { background-color: var(--danger-color-hover); transform: translateY(-3px); }
208
- #confirm-btn-no { background-color: var(--input-bg); color: var(--text-primary); border: 1px solid var(--input-border); }
209
- #confirm-btn-no:hover { background-color: var(--panel-border); }
210
-
211
- @media (max-width: 768px) { .script-turn { flex-direction: column; } .remove-turn-btn { align-self: flex-end; margin-top: -1.5rem; } .turn-speaker-selector { width: 100%; } }
212
- </style>
213
- </head>
214
- <body>
215
- <div class="app-container">
216
- <header class="app-header">
217
- <h1>استودیوی ساخت پادکست</h1>
218
- <p>گویندگان خود را به پروژه اضافه کنید، سناریو را ب��ویسید و پادکست خود را تحویل بگیرید.</p>
219
- </header>
220
- <main class="main-content">
221
- <form id="podcast-form" onsubmit="return false;">
222
- <!-- ... سایر بخش‌های فرم ... -->
223
- <div class="form-group">
224
- <label>🎤 تیم گویندگان</label>
225
- <div id="project-speakers-container">
226
- <div id="add-speaker-card" class="speaker-display-card">
227
- <div class="plus-icon">+</div>
228
- <h3>افزودن گوینده</h3>
229
- </div>
230
- </div>
231
- </div>
232
- <div class="form-group">
233
- <div class="form-group-header">
234
- <label>📜 سناریوی گفتگو</label>
235
- <button type="button" id="open-ai-modal-btn" class="ai-script-btn">
236
- ✨ساخت پروژه با هوش مصنوعی
237
- </button>
238
- </div>
239
- <div id="podcast-script-container"></div>
240
- <button type="button" id="add-turn-btn">+ افزودن نوبت گفتگو</button>
241
- </div>
242
- <div class="form-group">
243
- <label for="temperature-slider-podcast">🌡️ خلاقیت صدا</label>
244
- <div class="slider-container">
245
- <input type="range" id="temperature-slider-podcast" min="0.1" max="1.5" step="0.05" value="0.9">
246
- <span id="temperature-value-podcast" class="temperature-value">0.9</span>
247
- </div>
248
- </div>
249
-
250
- <button type="submit" id="generate-btn-podcast" class="generate-btn">
251
- <span class="btn-text">🎙️ ساخت پادکست</span>
252
- <div class="spinner"></div>
253
- </button>
254
- <!-- پیام اعتبارسنجی اینجا نمایش داده می‌شود -->
255
- <p id="validation-message" style="display: none;"></p>
256
- </form>
257
- <div id="output-section-podcast" class="output-section">
258
- <div id="status-message-podcast" class="status-message">پادکست نهایی در اینجا ظاهر خواهد شد.</div>
259
- <button type="button" id="clear-history-btn" style="display: none;">
260
- <svg viewBox="0 0 24 24"><path d="M6 19c0 1.1.9 2 2 2h8c1.1 0 2-.9 2-2V7H6v12zM19 4h-3.5l-1-1h-5l-1 1H5v2h14V4z"></path></svg>
261
- حذف سابقه گفتگو قبلی
262
- </button>
263
- <div id="loading-animation-wrapper-podcast" class="loading-animation-wrapper">
264
- <div class="orbital-loader">
265
- <div class="orbit"><div class="satellite"></div></div>
266
- <div class="orbit"><div class="satellite"></div></div>
267
- <div class="orbit"><div class="satellite"></div></div>
268
- </div>
269
- <p class="loading-text" id="loading-text-podcast">در حال پردازش هوشمند...</p>
270
- </div>
271
- <div id="audio-player-content-podcast" class="audio-player-content">
272
- <div class="audio-waveform-container"> <span class="audio-time audio-current-time">0:00</span> <div class="audio-waveform"> <canvas class="audio-waveform-canvas"></canvas> <div class="audio-waveform-dashed-line"></div> </div> <span class="audio-time audio-total-time">0:00</span> </div> <div class="audio-controls-group"> <button type="button" class="audio-skip-btn backward" title="پرش به عقب"> <svg viewBox="0 0 24 24"><path d="M11 16V8l-4 4 4 4zm4-12v16l7-8-7-8z"></path></svg> </button> <button type="button" class="audio-play-pause-btn-large"> <svg viewBox="0 0 24 24" class="play-icon"><path d="M8 5v14l11-7z"></path></svg> <svg viewBox="0 0 24 24" class="pause-icon" style="display:none;"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg> </button> <button type="button" class="audio-skip-btn forward" title="پرش به جلو"> <svg viewBox="0 0 24 24"><path d="M13 16V8l4 4-4 4zM9 4v16L2 12l7-8z"></path></svg> </button> </div> <div class="audio-utility-controls"> <button type="button" class="audio-volume-btn" title="قطع/وصل صدا"> <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> <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> </button> <button type="button" class="audio-speed-btn" title="سرعت پخش">1x</button> </div>
273
- </div>
274
- </div>
275
- </main>
276
- <audio id="hidden-audio-player" style="display: none;"></audio>
277
-
278
- <!-- مودال انتخاب گوینده -->
279
- <div id="speaker-modal" class="modal-overlay">
280
- <div class="modal-dialog">
281
- <div class="modal-header">
282
- <h2 id="modal-title">انتخاب گوینده برای افزودن به پروژه</h2>
283
- <button type="button" class="close-modal-btn">×</button>
284
- </div>
285
- <div class="modal-body"><div id="speaker-grid"></div></div>
286
- </div>
287
- </div>
288
-
289
- <!-- مودال هوش مصنوعی -->
290
- <div id="ai-modal" class="modal-overlay">
291
- <div class="modal-dialog">
292
- <div id="ai-content-wrapper" class="modal-content-wrapper active">
293
- <div class="modal-header">
294
- <h2>ساخت پروژه با هوش مصنوعی</h2>
295
- <button type="button" class="close-modal-btn">×</button>
296
- </div>
297
- <div class="modal-body">
298
- <p>یک موضوع (مثلاً: "تاریخچه پیدایش قهوه") یا یک مقاله کامل را وارد کنید. هوش مصنوعی بهترین تیم گویندگان را انتخاب کرده و سناریوی گفتگو را تولید خواهد کرد.</p>
299
- <textarea id="ai-prompt-textarea" placeholder="موضوع یا متن مقاله خود را اینجا وارد کنید..."></textarea>
300
- <p id="ai-status-message"></p>
301
- </div>
302
- <div class="modal-footer">
303
- <button type="button" id="generate-script-ai-btn" class="generate-btn">
304
- 🚀 پروژه را بساز
305
- </button>
306
- </div>
307
- </div>
308
- <div id="ai-loading-wrapper" class="modal-loading-wrapper">
309
- <div class="loader-animation">
310
- <div class="core-pulse"></div>
311
- <div class="ai-orbit"></div>
312
- <div class="ai-orbit"></div>
313
- </div>
314
- <p id="loading-text-ai">در حال آماده‌سازی...</p>
315
- </div>
316
- </div>
317
- </div>
318
-
319
- <!-- مودال جدید برای تایید حذف -->
320
- <div id="confirm-modal" class="modal-overlay">
321
- <div class="modal-dialog">
322
- <div class="modal-header">
323
- <h2>تایید عملیات</h2>
324
- </div>
325
- <div class="modal-body">
326
- <p id="confirm-modal-message">آیا از انجام این کار مطمئن هستید؟</p>
327
- <div class="confirm-modal-actions">
328
- <button id="confirm-btn-no" class="confirm-btn">لغو</button>
329
- <button id="confirm-btn-yes" class="confirm-btn">تایید حذف</button>
330
- </div>
331
- </div>
332
- </div>
333
- </div>
334
- </div>
335
-
336
- <script>
337
- document.addEventListener('DOMContentLoaded', () => {
338
- // ... تمام کدهای JS قبلی شما بدون تغییر اینجا قرار می‌گیرد ...
339
- const TTS_API_ENDPOINT = 'https://alphattspro1.onrender.com/api/generate';
340
- const AI_CREATE_API_ENDPOINT = '/api/create-full-podcast';
341
- const AI_STATUS_API_ENDPOINT = '/api/podcast-status/';
342
- const BATCH_SIZE = 2;
343
 
344
- const speakers = [ { id: "Charon", name: "شهاب (مرد)", gender: "male", imgUrl: "https://uploadkon.ir/uploads/a18705_25IMG-۲۰۲۵۰۷۰۵-۱۱۰۵۴۹.jpg" }, { id: "Zephyr", name: "آوا (زن)", gender: "female", imgUrl: "https://uploadkon.ir/uploads/029605_25IMG-۲۰۲۵۰۷۰۵-۱۱۱۲۵۲.jpg" }, { id: "Achird", name: "نوید (مرد)", gender: "male", imgUrl: "https://uploadkon.ir/uploads/697e05_25IMG-۲۰۲۵۰۶۰۹-۰۶۴۶۳۷.jpg" }, { id: "Zubenelgenubi", name: "آرمان (مرد)", gender: "male", imgUrl: "https://uploadkon.ir/uploads/a8a705_25IMG-۲۰۲۵۰۷۰۵-۱۱۱۶۲۹.jpg" }, { id: "Vindemiatrix", name: "مهسا (زن)", gender: "female", imgUrl: "https://uploadkon.ir/uploads/d74d05_25IMG-۲۰۲۵۰۷۰۵-۱۱۱۸۳۸.jpg" }, { id: "Sadachbia", name: "سامان (مرد)", gender: "male", imgUrl: "https://uploadkon.ir/uploads/580205_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۳۳۰.jpg" }, { id: "Sadaltager", name: "آرش (مرد)", gender: "male", imgUrl: "https://uploadkon.ir/uploads/c4db05_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۵۰۰.jpg" }, { id: "Sulafat", name: "شبنم (زن)", gender: "female", imgUrl: "https://uploadkon.ir/uploads/995005_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۶۱۱.jpg" }, { id: "Laomedeia", name: "سحر (زن)", gender: "female", imgUrl: "https://uploadkon.ir/uploads/660705_25IMG-۲۰۲۵۰۷۰۵-۱۱۳۷۵۴.jpg" }, { id: "Achernar", name: "مریم (زن)", gender: "female", imgUrl: "https://uploadkon.ir/uploads/4c2905_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۰۳۶.jpg" }, { id: "Alnilam", name: "بهرام (مرد)", gender: "male", imgUrl: "https://uploadkon.ir/uploads/f0c205_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۲۲۰.jpg" }, { id: "Schedar", name: "نیکان (مرد)", gender: "male", imgUrl: "https://uploadkon.ir/uploads/d37a05_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۳۲۵.jpg" }, { id: "Gacrux", name: "فرناز (زن)", gender: "female", imgUrl: "https://uploadkon.ir/uploads/cff705_25IMG-%DB%B2%DB%B0%DB%B2%DB%B5%DB%B0%DB%B7%DB%B0%DB%B5-%DB%B1%DB%B1%DB%B4%DB%B6%DB%B0%DB%B5.jpg" }, { id: "Pulcherrima", name: "سارا (زن)", gender: "female", imgUrl: "https://uploadkon.ir/uploads/acb105_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۷۴۳.jpg" }, { id: "Umbriel", name: "مانی (مرد)", gender: "male", imgUrl: "https://uploadkon.ir/uploads/68b505_25IMG-۲۰۲۵۰۷۰۵-۱۱۴۹۱۴.jpg" }, { id: "Algieba", name: "آرتین (مرد)", gender: "male", imgUrl: "https://uploadkon.ir/uploads/571005_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۰۳۹.jpg" }, { id: "Despina", name: "دلنواز (زن)", gender: "female", imgUrl: "https://uploadkon.ir/uploads/5d7805_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۲۲۲.jpg" }, { id: "Erinome", name: "روژان (زن)", gender: "female", imgUrl: "https://uploadkon.ir/uploads/aa8805_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۳۴۹.jpg" }, { id: "Algenib", name: "امید (مرد)", gender: "male", imgUrl: "https://uploadkon.ir/uploads/a63c05_25IMG-۲۰۲۵۰۷۰۵-۱۱۵۹۲۱.jpg" }, { id: "Orus", name: "بردیا (مرد)", gender: "male", imgUrl: "https://uploadkon.ir/uploads/8bc405_25IMG-۲۰۲۵۰۷۰۵-۱۲۱۴۳۳.jpg" }, { id: "Aoede", name: "ترانه (زن)", gender: "female", imgUrl: "https://uploadkon.ir/uploads/9cb405_25IMG-۲۰۲۵۰۷۰۵-۱۲۱۸۵۰.jpg" }, { id: "Callirrhoe", name: "نیکو (زن)", gender: "female", imgUrl: "https://uploadkon.ir/uploads/ee5f05_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۰۴۷.jpg" }, { id: "Autonoe", name: "هستی (زن)", gender: "female", imgUrl: "https://uploadkon.ir/uploads/9b0505_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۲۲۲.jpg" }, { id: "Enceladus", name: "کامیار (مرد)", gender: "male", imgUrl: "https://uploadkon.ir/uploads/127805_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۴۱۴.jpg" }, { id: "Iapetus", name: "کیانوش (مرد)", gender: "male", imgUrl: "https://uploadkon.ir/uploads/c98b05_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۶۰۵.jpg" }, { id: "Puck", name: "پویا (مرد)", gender: "male", imgUrl: "https://uploadkon.ir/uploads/ca3605_25IMG-۲۰۲۵۰۷۰۵-۱۲۲۸۳۹.jpg" }, { id: "Kore", name: "مهتاب (زن)", gender: "female", imgUrl: "https://uploadkon.ir/uploads/b66605_25IMG-۲۰۲۵۰۷۰۵-۱۲۳۰۳۵.jpg" }, { id: "Fenrir", name: "سام (مرد)", gender: "male", imgUrl: "https://uploadkon.ir/uploads/03c005_25IMG-۲۰۲۵۰۷۰۵-۱۲۳۴۱۳.jpg" }, { id: "Leda", name: "لیدا (زن)", gender: "female", imgUrl: "https://uploadkon.ir/uploads/710305_25IMG-۲۰۲۵۰۷۰۵-۱۲۳۷۳۱.jpg" }];
345
-
346
- let activeSpeakers = [], masterAudioBlobs = [], currentlyPlayingTurnPlayer = null, speakerToReplaceId = null;
347
- let audioPeaks = [], currentPlaybackSpeedIndex = 0;
348
- const playbackSpeeds = [1.0, 1.25, 1.5, 0.75];
349
- const mainAudioPlayer = document.getElementById('hidden-audio-player');
350
- const form = document.getElementById('podcast-form');
351
- const scriptContainer = document.getElementById('podcast-script-container');
352
- const addTurnBtn = document.getElementById('add-turn-btn');
353
- const tempSlider = document.getElementById('temperature-slider-podcast');
354
- const tempValueSpan = document.getElementById('temperature-value-podcast');
355
- const generateBtn = document.getElementById('generate-btn-podcast');
356
- const outputSection = document.getElementById('output-section-podcast');
357
- const statusMessage = document.getElementById('status-message-podcast');
358
- const clearHistoryBtn = document.getElementById('clear-history-btn');
359
- const loadingAnimationWrapper = document.getElementById('loading-animation-wrapper-podcast');
360
- const loadingText = document.getElementById('loading-text-podcast');
361
- const playerContent = document.getElementById('audio-player-content-podcast');
362
- const speakerModal = document.getElementById('speaker-modal');
363
- const modalTitleElement = document.getElementById('modal-title');
364
- const addSpeakerCard = document.getElementById('add-speaker-card');
365
- const projectSpeakersContainer = document.getElementById('project-speakers-container');
366
- const audioContext = new (window.AudioContext || window.webkitAudioContext)();
367
 
368
- // --- متغیرهای مودال هوش مصنوعی ---
369
- const aiModal = document.getElementById('ai-modal');
370
- const openAiModalBtn = document.getElementById('open-ai-modal-btn');
371
- const generateAiBtn = document.getElementById('generate-script-ai-btn');
372
- const aiPromptTextarea = document.getElementById('ai-prompt-textarea');
373
- const aiStatusMessage = document.getElementById('ai-status-message');
374
- const aiContentWrapper = document.getElementById('ai-content-wrapper');
375
- const aiLoadingWrapper = document.getElementById('ai-loading-wrapper');
376
- const aiLoadingText = document.getElementById('loading-text-ai');
377
- const aiStatusMessages = ["در حال تحلیل موضوع...", "انتخاب هوشمند گویندگان...", "نوشتن پیش‌نویس سناریو...", "بازبینی و نهایی‌سازی متن...", "آماده‌سازی پروژه..."];
378
- let pollingInterval = null, statusInterval = null;
379
-
380
- // --- متغیرهای جدید برای مودال تایید و پیام خطا ---
381
- const confirmModal = document.getElementById('confirm-modal');
382
- const confirmMessageEl = document.getElementById('confirm-modal-message');
383
- const confirmBtnYes = document.getElementById('confirm-btn-yes');
384
- const confirmBtnNo = document.getElementById('confirm-btn-no');
385
- const validationMessage = document.getElementById('validation-message');
386
- let validationTimeout;
387
-
388
- const showAiModal = () => aiModal.classList.add('visible');
389
- const hideAiModal = () => {
390
- aiModal.classList.remove('visible');
391
- resetAiModalView();
392
- };
393
- openAiModalBtn.addEventListener('click', showAiModal);
394
- aiModal.querySelector('.close-modal-btn').addEventListener('click', hideAiModal);
395
- aiModal.addEventListener('click', e => { if (e.target === aiModal) hideAiModal(); });
396
 
397
- async function mergeAudioBlobs(blobs) { const decodedBuffers=await Promise.all(blobs.filter(b=>b&&b.size>100).map(async blob=>{try{const arrayBuffer=await blob.arrayBuffer();if(audioContext.state==='suspended'){await audioContext.resume()}return await audioContext.decodeAudioData(arrayBuffer)}catch(e){console.error("خطا در decode کردن یک قطعه صوتی:",e);return null}}));const validBuffers=decodedBuffers.filter(buffer=>buffer);if(validBuffers.length===0){console.log("هیچ قطعه صوتی معتبری برای میکس وجود ندارد.");return null}const totalLength=validBuffers.reduce((total,buffer)=>total+buffer.length,0);const outputBuffer=audioContext.createBuffer(validBuffers[0].numberOfChannels,totalLength,validBuffers[0].sampleRate);let offset=0;for(const buffer of validBuffers){for(let channel=0;channel<buffer.numberOfChannels;channel++){outputBuffer.getChannelData(channel).set(buffer.getChannelData(channel),offset)}offset+=buffer.length}return outputBuffer}
398
- function bufferToWav(buffer) { const numOfChan=buffer.numberOfChannels,length=buffer.length*numOfChan*2+44,bufferArr=new ArrayBuffer(length),view=new DataView(bufferArr),channels=[],sampleRate=buffer.sampleRate;let offset=0,pos=0;const writeString=(s)=>{for(let i=0;i<s.length;i++)view.setUint8(pos++,s.charCodeAt(i))};writeString('RIFF');view.setUint32(pos,36+length,true);pos+=4;writeString('WAVE');writeString('fmt ');view.setUint32(pos,16,true);pos+=4;view.setUint16(pos,1,true);pos+=2;view.setUint16(pos,numOfChan,true);pos+=2;view.setUint32(pos,sampleRate,true);pos+=4;view.setUint32(pos,sampleRate*2*numOfChan,true);pos+=4;view.setUint16(pos,numOfChan*2,true);pos+=2;view.setUint16(pos,16,true);pos+=2;writeString('data');view.setUint32(pos,length-pos-4,true);pos+=4;for(let i=0;i<buffer.numberOfChannels;i++)channels.push(buffer.getChannelData(i));while(pos<length){for(let i=0;i<numOfChan;i++){let s=Math.max(-1,Math.min(1,channels[i][offset]));s=s<0?s*0x8000:s*0x7FFF;view.setInt16(pos,s,true);pos+=2}offset++}return new Blob([view],{type:'audio/wav'})}
399
- function resetAiModalView() { if(statusInterval) clearInterval(statusInterval); if(pollingInterval) clearInterval(pollingInterval); pollingInterval = null; statusInterval = null; aiContentWrapper.classList.add('active'); aiLoadingWrapper.classList.remove('active'); generateAiBtn.disabled = false; }
400
- function pollForResult(taskId) { pollingInterval = setInterval(async () => { try { const response = await fetch(`${AI_STATUS_API_ENDPOINT}${taskId}`); if (response.status === 404) { throw new Error("وظیفه یافت نشد. لطفاً دوباره تلاش کنید."); } if (!response.ok) { throw new Error(`خطای سرور: ${response.status}`); } const result = await response.json(); if (result.status === 'completed') { clearInterval(pollingInterval); clearInterval(statusInterval); populateProjectWithAiData(result.data); } else if (result.status === 'failed') { throw new Error(result.error || "پردازش هوش مصنوعی با خطا مواجه شد."); } } catch (error) { console.error('Polling Error:', error); aiStatusMessage.textContent = `خطا: ${error.message}`; aiStatusMessage.classList.add('error'); aiStatusMessage.style.display = 'block'; resetAiModalView(); } }, 3000); }
401
- function populateProjectWithAiData(data) { const selectedSpeakerIds = data.selected_speakers; const scriptTurns = data.script; activeSpeakers = []; selectedSpeakerIds.forEach(id => { const speaker = speakers.find(s => s.id === id); if (speaker && !activeSpeakers.some(s => s.id === id)) { activeSpeakers.push(speaker); } }); renderActiveSpeakers(); scriptContainer.innerHTML = ''; masterAudioBlobs = []; scriptTurns.forEach(turn => addScriptTurn(turn.speaker_id, turn.dialogue)); hideAiModal(); saveState(); }
402
- generateAiBtn.addEventListener('click', async () => { if (pollingInterval) clearInterval(pollingInterval); const prompt = aiPromptTextarea.value.trim(); if (!prompt) { aiStatusMessage.textContent = 'لطفاً یک موضوع یا متن وارد کنید.'; aiStatusMessage.classList.add('error'); aiStatusMessage.style.display = 'block'; aiPromptTextarea.classList.add('shake-animation'); setTimeout(() => { aiPromptTextarea.classList.remove('shake-animation'); aiStatusMessage.style.display = 'none'; aiStatusMessage.classList.remove('error'); }, 2000); return; } const allSpeakerData = speakers.map(s => ({ id: s.id, name: s.name, gender: s.gender })); generateAiBtn.disabled = true; aiStatusMessage.style.display = 'none'; aiContentWrapper.classList.remove('active'); aiLoadingWrapper.classList.add('active'); let messageIndex = 0; aiLoadingText.textContent = aiStatusMessages[messageIndex]; statusInterval = setInterval(() => { messageIndex = (messageIndex + 1) % aiStatusMessages.length; aiLoadingText.style.animation = 'none'; void aiLoadingText.offsetWidth; aiLoadingText.style.animation = 'ai-text-fade-in 0.5s ease'; aiLoadingText.textContent = aiStatusMessages[messageIndex]; }, 2000); try { const response = await fetch(AI_CREATE_API_ENDPOINT, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ prompt, available_speakers: allSpeakerData }) }); if (response.status !== 202) { const errorData = await response.json(); throw new Error(errorData.error || `خطای سرور: ${response.status}`); } const responseData = await response.json(); pollForResult(responseData.task_id); } catch (error) { console.error('AI Project Creation Error:', error); aiStatusMessage.textContent = `خطا: ${error.message}`; aiStatusMessage.classList.add('error'); aiStatusMessage.style.display = 'block'; resetAiModalView(); } });
403
- const formatTime = (s) => { if (isNaN(s) || s < 0) return '0:00'; const m = Math.floor(s / 60); return `${m}:${Math.floor(s % 60).toString().padStart(2, '0')}`; };
404
- const processAudioForWaveform = (audioBuffer) => { if (!audioBuffer) { audioPeaks = []; return; } const data = audioBuffer.getChannelData(0); const samples = Math.floor(audioBuffer.duration * 40); if (samples === 0) { audioPeaks = []; return; } const peaks = []; const sampleSize = Math.floor(data.length / samples); for (let i = 0; i < samples; i++) { let max = 0; const start = i * sampleSize; for (let j = 0; j < sampleSize; j++) { const val = Math.abs(data[start + j]); if (val > max) max = val; } peaks.push(Math.min(1, Math.max(0, max * 1.5))); } audioPeaks = peaks; };
405
- const drawWaveform = (canvas, progressRatio) => { if (!canvas || !audioPeaks.length) return; const waveformCtx = canvas.getContext('2d'); const dpr = window.devicePixelRatio || 1; canvas.width = canvas.offsetWidth * dpr; canvas.height = canvas.offsetHeight * dpr; waveformCtx.scale(dpr, dpr); const width = canvas.offsetWidth; const height = canvas.offsetHeight; waveformCtx.clearRect(0, 0, width, height); const barWidth = 3; const barGap = 2; const totalBarWidth = barWidth + barGap; const numBars = Math.floor(width / totalBarWidth); const offset = (width - numBars * totalBarWidth) / 2; const inactiveColor = getComputedStyle(document.documentElement).getPropertyValue('--waveform-color-inactive').trim(); const activeColor = getComputedStyle(document.documentElement).getPropertyValue('--waveform-color-active').trim(); waveformCtx.fillStyle = inactiveColor; for (let i = 0; i < numBars; i++) { const peakIndex = Math.floor((i / numBars) * audioPeaks.length); const barHeight = (audioPeaks[peakIndex] || 0) * height; const x = offset + i * totalBarWidth; const y = (height - barHeight) / 2; waveformCtx.fillRect(x, y, barWidth, barHeight); } const activeFillEnd = progressRatio * width; if (activeFillEnd > 0) { const gradientFadeWidth = 80; const gradientSolidStart = Math.max(0, activeFillEnd - gradientFadeWidth); const activeGradient = waveformCtx.createLinearGradient(0, 0, width, 0); activeGradient.addColorStop(0, activeColor); activeGradient.addColorStop(Math.min(1, gradientSolidStart / width), activeColor); activeGradient.addColorStop(Math.min(1, activeFillEnd / width), inactiveColor); waveformCtx.fillStyle = activeGradient; for (let i = 0; i < numBars; i++) { const peakIndex = Math.floor((i / numBars) * audioPeaks.length); const barHeight = (audioPeaks[peakIndex] || 0) * height; const x = offset + i * totalBarWidth; const y = (height - barHeight) / 2; waveformCtx.fillRect(x, y, barWidth, barHeight); } } };
406
- function setupMainPlayerListeners() { const playPauseBtn = playerContent.querySelector('.audio-play-pause-btn-large'); const skipBackwardBtn = playerContent.querySelector('.audio-skip-btn.backward'); const skipForwardBtn = playerContent.querySelector('.audio-skip-btn.forward'); const volBtn = playerContent.querySelector('.audio-volume-btn'); const speedBtn = playerContent.querySelector('.audio-speed-btn'); playPauseBtn.addEventListener('click', () => mainAudioPlayer.paused ? mainAudioPlayer.play() : mainAudioPlayer.pause()); skipBackwardBtn.addEventListener('click', () => mainAudioPlayer.currentTime = Math.max(0, mainAudioPlayer.currentTime - 5)); skipForwardBtn.addEventListener('click', () => mainAudioPlayer.currentTime = Math.min(mainAudioPlayer.duration, mainAudioPlayer.currentTime + 5)); volBtn.addEventListener('click', () => { mainAudioPlayer.muted = !mainAudioPlayer.muted; volBtn.querySelector('.volume-high-icon').style.display = mainAudioPlayer.muted ? 'none' : 'block'; volBtn.querySelector('.volume-mute-icon').style.display = mainAudioPlayer.muted ? 'block' : 'none'; }); speedBtn.addEventListener('click', () => { currentPlaybackSpeedIndex = (currentPlaybackSpeedIndex + 1) % playbackSpeeds.length; mainAudioPlayer.playbackRate = playbackSpeeds[currentPlaybackSpeedIndex]; speedBtn.textContent = `${playbackSpeeds[currentPlaybackSpeedIndex]}x`; }); ['timeupdate', 'play', 'pause', 'ended'].forEach(e => mainAudioPlayer.addEventListener(e, updateMainPlayerUI)); window.addEventListener('resize', updateMainPlayerUI); }
407
- const updateMainPlayerUI = () => { const isPlaying = !(mainAudioPlayer.paused || mainAudioPlayer.ended); playerContent.querySelectorAll('.play-icon').forEach(i => i.style.display = isPlaying ? 'none' : 'block'); playerContent.querySelectorAll('.pause-icon').forEach(i => i.style.display = isPlaying ? 'block' : 'none'); const { currentTime, duration } = mainAudioPlayer; playerContent.querySelectorAll('.audio-current-time').forEach(s => s.textContent = formatTime(currentTime)); playerContent.querySelectorAll('.audio-total-time').forEach(s => s.textContent = isFinite(duration) ? formatTime(duration) : '0:00'); const activeCanvas = playerContent.querySelector('.audio-waveform-canvas'); if (activeCanvas) { const progressRatio = isFinite(duration) && duration > 0 ? currentTime / duration : 0; requestAnimationFrame(() => drawWaveform(activeCanvas, progressRatio)); } };
408
- let saveTimeout; function saveState() { clearTimeout(saveTimeout); saveTimeout = setTimeout(() => { const state = { activeSpeakers: activeSpeakers.map(s => s.id), turns: Array.from(scriptContainer.querySelectorAll('.script-turn')).map(turnDiv => ({ speakerId: turnDiv.querySelector('.custom-select-container').dataset.selectedId, text: turnDiv.querySelector('textarea').value.trim() })), temperature: tempSlider.value }; try { localStorage.setItem('podcastStudioState', JSON.stringify(state)); } catch (e) { console.error('Error saving state:', e); } }, 500); }
409
- function resetToDefaultState() { localStorage.removeItem('podcastStudioState'); activeSpeakers = []; scriptContainer.innerHTML = ''; masterAudioBlobs = []; addSpeakerToProject(speakers[0].id); addSpeakerToProject(speakers[1].id); addScriptTurn(speakers[0].id); addScriptTurn(speakers[1].id); tempSlider.value = 0.9; tempValueSpan.textContent = '0.9'; showUIState('initial', 'پادکست نهایی در اینجا ظاهر خواهد شد.'); clearHistoryBtn.style.display = 'none'; }
410
- function loadState() { try { const savedState = localStorage.getItem('podcastStudioState'); if (savedState) { const state = JSON.parse(savedState); activeSpeakers = []; if (state.activeSpeakers && state.activeSpeakers.length > 0) { state.activeSpeakers.forEach(speakerId => { const speaker = speakers.find(s => s.id === speakerId); if (speaker) activeSpeakers.push(speaker); }); renderActiveSpeakers(); } else { addSpeakerToProject(speakers[0].id); addSpeakerToProject(speakers[1].id); } scriptContainer.innerHTML = ''; if (state.turns && state.turns.length > 0) { state.turns.forEach(turnData => addScriptTurn(turnData.speakerId, turnData.text)); } else { addScriptTurn(speakers[0]?.id); addScriptTurn(speakers[1]?.id); } if (state.temperature) { tempSlider.value = state.temperature; tempValueSpan.textContent = state.temperature; } showUIState('initial', 'پادکست قبلی شما بارگذاری شد.'); clearHistoryBtn.style.display = 'inline-flex'; } else { resetToDefaultState(); } } catch (e) { console.error('Error loading state:', e); resetToDefaultState(); } }
411
- function showUIState(state, msg = '') { const btnSpinner = generateBtn.querySelector(".spinner"); const btnText = generateBtn.querySelector(".btn-text"); generateBtn.disabled = state === 'loading'; btnSpinner.style.display = state === 'loading' ? 'inline-block' : 'none'; btnText.textContent = state === 'loading' ? 'در حال ساخت...' : '🎙️ ساخت پادکست'; outputSection.classList.toggle('has-content', state === 'result'); playerContent.style.display = 'none'; statusMessage.style.display = 'none'; loadingAnimationWrapper.style.display = 'none'; if (state === 'initial' || state === 'error') { statusMessage.style.display = 'block'; statusMessage.classList.toggle('error', state === 'error'); statusMessage.textContent = msg; } else if (state === 'loading') { loadingAnimationWrapper.style.display = 'flex'; loadingText.textContent = msg; } else if (state === 'result' && masterAudioBlobs.length > 0) { playerContent.style.display = 'flex'; } }
412
- function showTransientMainMessage(message, duration = 2000, isError = false) { const originalStatusText = statusMessage.textContent; const originalStatusError = statusMessage.classList.contains('error'); statusMessage.textContent = message; statusMessage.classList.toggle('error', isError); statusMessage.style.display = 'block'; setTimeout(() => { if (masterAudioBlobs.length > 0) { showUIState('result'); } else { showUIState('initial', 'پادکست نهایی در اینجا ظاهر خواهد شد.'); } statusMessage.classList.toggle('error', false); }, duration); }
413
- function renderActiveSpeakers() { document.querySelectorAll('.speaker-display-card:not(#add-speaker-card)').forEach(card => card.remove()); activeSpeakers.forEach(speaker => { const card = document.createElement('div'); card.className = 'speaker-display-card'; card.dataset.id = speaker.id; card.innerHTML = `<button type="button" class="remove-speaker-btn" data-id="${speaker.id}" title="حذف از پروژه">×</button><img src="${speaker.imgUrl}" alt="${speaker.name}"><h3>${speaker.name}</h3>`; projectSpeakersContainer.insertBefore(card, addSpeakerCard); card.querySelector('.remove-speaker-btn').addEventListener('click', (event) => { event.stopPropagation(); removeSpeakerFromProject(speaker.id); }); card.addEventListener('click', () => { speakerToReplaceId = speaker.id; openSpeakerModal(); }); }); updateAllTurnSelects(); saveState(); }
414
- function addSpeakerToProject(speakerId) { if (!activeSpeakers.some(s => s.id === speakerId)) { const speaker = speakers.find(s => s.id === speakerId); if (speaker) { activeSpeakers.push(speaker); renderActiveSpeakers(); } } }
415
- function removeSpeakerFromProject(speakerIdToRemove) { activeSpeakers = activeSpeakers.filter(s => s.id !== speakerIdToRemove); renderActiveSpeakers(); document.querySelectorAll('.script-turn').forEach(turnDiv => { const selectContainer = turnDiv.querySelector('.custom-select-container'); if (selectContainer.dataset.selectedId === speakerIdToRemove) { selectContainer.dataset.selectedId = activeSpeakers.length > 0 ? activeSpeakers[0].id : ''; updateSingleTurnSelect(selectContainer); } }); }
416
- function openSpeakerModal() { const speakerGrid = document.getElementById('speaker-grid'); speakerGrid.innerHTML = ''; const activeSpeakerIds = activeSpeakers.map(s => s.id); if (speakerToReplaceId) { const replacingSpeaker = speakers.find(s => s.id === speakerToReplaceId); modalTitleElement.textContent = `جایگزینی گوینده: ${replacingSpeaker ? replacingSpeaker.name : 'نامشخص'}`; } else { modalTitleElement.textContent = `انتخاب گوینده برای افزودن به پروژه`; } speakers.forEach(speaker => { const card = document.createElement('div'); card.className = 'speaker-card'; if (activeSpeakerIds.includes(speaker.id) && speaker.id !== speakerToReplaceId) { card.classList.add('disabled'); } card.innerHTML = `<div class="speaker-visual"><img src="${speaker.imgUrl}" alt="${speaker.name}"></div><div class="speaker-name">${speaker.name}</div>`; if (!card.classList.contains('disabled')) { card.addEventListener('click', () => { const newSpeakerId = speaker.id; if (speakerToReplaceId) { const oldSpeakerId = speakerToReplaceId; const oldSpeakerIndex = activeSpeakers.findIndex(s => s.id === oldSpeakerId); if (oldSpeakerIndex > -1) { activeSpeakers[oldSpeakerIndex] = speakers.find(s => s.id === newSpeakerId); } document.querySelectorAll('.script-turn').forEach(turnDiv => { const selectContainer = turnDiv.querySelector('.custom-select-container'); if (selectContainer.dataset.selectedId === oldSpeakerId) { selectContainer.dataset.selectedId = newSpeakerId; updateSingleTurnSelect(selectContainer); } }); speakerToReplaceId = null; } else { addSpeakerToProject(newSpeakerId); } renderActiveSpeakers(); speakerModal.classList.remove('visible'); saveState(); }); } speakerGrid.appendChild(card); }); speakerModal.classList.add('visible'); }
417
- function updateAllTurnSelects() { document.querySelectorAll('.custom-select-container').forEach(container => { const currentSelectedId = container.dataset.selectedId; updateSingleTurnSelect(container, currentSelectedId); }); }
418
- function updateSingleTurnSelect(container, preSelectedId = null) { const trigger = container.querySelector('.custom-select-trigger'); const optionsDiv = container.querySelector('.custom-select-options'); optionsDiv.innerHTML = ''; if (activeSpeakers.length === 0) { trigger.innerHTML = `<span>گوینده‌ای انتخاب نشده</span><svg class="arrow" viewBox="0 0 24 24"><path fill="currentColor" d="M7,10L12,15L17,10H7Z"></path></svg>`; optionsDiv.innerHTML = `<div class="no-speaker-option">ابتدا یک گوینده به پروژه اضافه کنید.</div>`; container.dataset.selectedId = ''; return; } let selectedSpeaker = activeSpeakers.find(s => s.id === preSelectedId); if (!selectedSpeaker) { selectedSpeaker = activeSpeakers[0]; preSelectedId = selectedSpeaker.id; } activeSpeakers.forEach(speaker => { const optionEl = document.createElement('div'); optionEl.className = 'custom-select-option'; optionEl.dataset.id = speaker.id; optionEl.innerHTML = `<img src="${speaker.imgUrl}" alt="${speaker.name}"><span>${speaker.name}</span>`; optionsDiv.appendChild(optionEl); }); trigger.innerHTML = `<img src="${selectedSpeaker.imgUrl}" alt="${selectedSpeaker.name}"><span>${selectedSpeaker.name}</span><svg class="arrow" viewBox="0 0 24 24"><path fill="currentColor" d="M7,10L12,15L17,10H7Z"></path></svg>`; container.dataset.selectedId = preSelectedId; }
419
- function addScriptTurn(initialSpeakerId = null, initialText = '') { if (activeSpeakers.length === 0) { return; } const turnDiv = document.createElement('div'); turnDiv.className = 'script-turn'; turnDiv.innerHTML = `<div class="turn-speaker-selector"><div class="custom-select-container" data-selected-id=""><div class="custom-select-trigger"></div><div class="custom-select-options"></div></div></div><div class="turn-content"><textarea placeholder="متن گفتگو..."></textarea><div class="turn-player-container"><button type="button" class="turn-play-btn"><svg viewBox="0 0 24 24" class="play-icon"><path d="M8 5v14l11-7z"></path></svg><svg viewBox="0 0 24 24" class="pause-icon"><path d="M6 19h4V5H6v14zm8-14v14h4V5h-4z"></path></svg></button><audio class="turn-audio" style="display:none;"></audio><div class="loading-state-wrapper" style="display:none;"><div class="spinner"></div><span class="loading-text">در حال جایگزین صدا</span></div><button type="button" class="turn-retry-btn"><svg viewBox="0 0 24 24"><path d="M17.65 6.35C16.2 4.9 14.21 4 12 4c-4.42 0-7.99 3.58-7.99 8s3.57 8 7.99 8c3.73 0 6.84-2.55 7.73-6h-2.08c-.82 2.33-3.04 4-5.65 4-3.31 0-6-2.69-6-6s2.69-6 6-6c1.66 0 3.14.69 4.22 1.78L13 11h7V4l-2.35 2.35z"></path></svg>تلاش مجدد</button><span class="replace-success-message" style="display:none;">فایل جدید جایگزین شد</span></div></div><button type="button" class="remove-turn-btn" title="حذف">×</button>`; const customSelectContainer = turnDiv.querySelector('.custom-select-container'); const textarea = turnDiv.querySelector('textarea'); textarea.value = initialText; let finalSpeakerId = initialSpeakerId; if (!finalSpeakerId || !activeSpeakers.some(s => s.id === finalSpeakerId)) { finalSpeakerId = activeSpeakers[0]?.id; } updateSingleTurnSelect(customSelectContainer, finalSpeakerId); textarea.addEventListener('input', saveState); customSelectContainer.addEventListener('click', saveState); turnDiv.querySelector('.remove-turn-btn').addEventListener('click', () => { const turnIndex = Array.from(scriptContainer.children).indexOf(turnDiv); if (turnIndex > -1) masterAudioBlobs.splice(turnIndex, 1); turnDiv.remove(); if (masterAudioBlobs.length > 0) rebuildFinalAudio(); else showUIState('initial', 'پادکست نهایی در اینجا ظاهر خواهد شد.'); saveState(); }); scriptContainer.appendChild(turnDiv); }
420
- async function rebuildFinalAudio() { showUIState('loading', 'در حال میکس مجدد صدا...'); try { const mergedBuffer = await mergeAudioBlobs(masterAudioBlobs); if (!mergedBuffer) { mainAudioPlayer.src = ''; showUIState('initial', 'پادکست خالی است.'); return; }; const finalWavBlob = bufferToWav(mergedBuffer); if (mainAudioPlayer.src) { URL.revokeObjectURL(mainAudioPlayer.src); } mainAudioPlayer.src = URL.createObjectURL(finalWavBlob); mainAudioPlayer.load(); mainAudioPlayer.onloadedmetadata = () => { processAudioForWaveform(mergedBuffer); showUIState('result'); updateMainPlayerUI(); }; } catch (error) { console.error("Error rebuilding audio:", error); showUIState('error', `خطا در بازسازی صدا: ${error.message}`); } }
421
- async function handleRetry(turnDiv, turnIndex) { const playerContainer = turnDiv.querySelector('.turn-player-container'); const retryBtn = playerContainer.querySelector('.turn-retry-btn'); const loadingStateWrapper = playerContainer.querySelector('.loading-state-wrapper'); const replaceSuccessMessage = playerContainer.querySelector('.replace-success-message'); const turnAudio = playerContainer.querySelector('.turn-audio'); const textarea = turnDiv.querySelector('textarea'); const speakerId = turnDiv.querySelector('.custom-select-container').dataset.selectedId; if (!textarea.value.trim() || !speakerId) { showValidationError('متن یا گوینده این بخش نامعتبر است.'); return; } retryBtn.style.display = 'none'; replaceSuccessMessage.style.display = 'none'; loadingStateWrapper.style.display = 'flex'; if (currentlyPlayingTurnPlayer && currentlyPlayingTurnPlayer !== turnAudio) { currentlyPlayingTurnPlayer.pause(); currentlyPlayingTurnPlayer.closest('.turn-player-container').classList.remove('playing'); } try { const payload = { text: textarea.value.trim(), speaker: speakerId, temperature: parseFloat(tempSlider.value) }; const response = await fetch(TTS_API_ENDPOINT, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload) }); if (!response.ok) { const errorText = await response.text(); throw new Error(`خطا در سرور: ${errorText}`); } const newBlob = await response.blob(); masterAudioBlobs[turnIndex] = newBlob; if (turnAudio.src) URL.revokeObjectURL(turnAudio.src); turnAudio.src = URL.createObjectURL(newBlob); loadingStateWrapper.style.display = 'none'; replaceSuccessMessage.style.display = 'flex'; replaceSuccessMessage.style.animation = 'none'; void replaceSuccessMessage.offsetWidth; replaceSuccessMessage.style.animation = 'fadeInOut 3s forwards'; setTimeout(async () => { replaceSuccessMessage.style.display = 'none'; retryBtn.style.display = 'flex'; await rebuildFinalAudio(); showTransientMainMessage('فایل اصلی بروز شد.', 2000); }, 3000); } catch (error) { console.error(`Retry failed for turn ${turnIndex}:`, error); loadingStateWrapper.style.display = 'none'; replaceSuccessMessage.style.display = 'none'; retryBtn.style.display = 'flex'; showTransientMainMessage(`تلاش مجدد با خطا مواجه شد`, 4000, true); } }
422
- function setupTurnPlayer(turnDiv, turnIndex) { const playerContainer = turnDiv.querySelector('.turn-player-container'); const playBtn = playerContainer.querySelector('.turn-play-btn'); const turnAudio = playerContainer.querySelector('.turn-audio'); const retryBtn = playerContainer.querySelector('.turn-retry-btn'); if (masterAudioBlobs[turnIndex]) { if (turnAudio.src) URL.revokeObjectURL(turnAudio.src); turnAudio.src = URL.createObjectURL(masterAudioBlobs[turnIndex]); } else { playerContainer.classList.remove('visible'); return; } playBtn.onclick = () => { if (currentlyPlayingTurnPlayer && currentlyPlayingTurnPlayer !== turnAudio) { currentlyPlayingTurnPlayer.pause(); currentlyPlayingTurnPlayer.closest('.turn-player-container').classList.remove('playing'); } if (turnAudio.paused) { turnAudio.play(); currentlyPlayingTurnPlayer = turnAudio; } else { turnAudio.pause(); } }; turnAudio.onplay = () => playerContainer.classList.add('playing'); turnAudio.onpause = () => playerContainer.classList.remove('playing'); turnAudio.onended = () => { playerContainer.classList.remove('playing'); currentlyPlayingTurnPlayer = null; turnAudio.currentTime = 0; }; retryBtn.onclick = () => handleRetry(turnDiv, turnIndex); playerContainer.classList.add('visible'); }
423
- addSpeakerCard.addEventListener('click', () => { speakerToReplaceId = null; openSpeakerModal(); });
424
- speakerModal.querySelector('.close-modal-btn').addEventListener('click', () => { speakerModal.classList.remove('visible'); speakerToReplaceId = null; });
425
- speakerModal.addEventListener('click', (e) => { if (e.target === speakerModal) { speakerModal.classList.remove('visible'); speakerToReplaceId = null; } });
426
- addTurnBtn.addEventListener('click', () => addScriptTurn());
427
- tempSlider.addEventListener('input', () => { tempValueSpan.textContent = tempSlider.value; saveState(); });
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
428
 
429
- // --- توابع جدید برای مودال تایید و نمایش خطا ---
430
- function showConfirmModal(message, onConfirm) {
431
- confirmMessageEl.textContent = message;
432
- confirmModal.classList.add('visible');
433
-
434
- const handleConfirm = () => {
435
- onConfirm();
436
- hideConfirmModal();
437
- };
438
-
439
- const hideConfirmModal = () => {
440
- confirmModal.classList.remove('visible');
441
- confirmBtnYes.removeEventListener('click', handleConfirm);
442
- confirmBtnNo.removeEventListener('click', hideConfirmModal);
443
- };
444
-
445
- confirmBtnYes.addEventListener('click', handleConfirm, { once: true });
446
- confirmBtnNo.addEventListener('click', hideConfirmModal, { once: true });
447
- }
448
-
449
- function showValidationError(message) {
450
- clearTimeout(validationTimeout);
451
- validationMessage.textContent = message;
452
- validationMessage.style.display = 'block';
453
-
454
- generateBtn.classList.add('shake-animation-btn');
455
- validationMessage.classList.add('validation-message-active');
456
-
457
- setTimeout(() => {
458
- generateBtn.classList.remove('shake-animation-btn');
459
- }, 600); // زمان انیمیشن لرزش
460
-
461
- validationTimeout = setTimeout(() => {
462
- validationMessage.classList.remove('validation-message-active');
463
- validationMessage.style.display = 'none';
464
- }, 4000); // زمان نمایش پیام
465
- }
466
-
467
- clearHistoryBtn.addEventListener('click', () => {
468
- showConfirmModal(
469
- 'آیا از حذف سابقه و بازنشانی پروژه مطمئن هستید؟',
470
- resetToDefaultState
471
- );
472
- });
473
-
474
- document.addEventListener('click', e => { const isDropdownTrigger = e.target.closest('.custom-select-trigger'); const isDropdownOption = e.target.closest('.custom-select-option'); document.querySelectorAll('.custom-select-container.open').forEach(container => { if (!container.contains(e.target)) { container.classList.remove('open'); } }); if (isDropdownTrigger) { const container = isDropdownTrigger.closest('.custom-select-container'); container.classList.toggle('open'); } else if (isDropdownOption) { const container = isDropdownOption.closest('.custom-select-container'); const speakerId = isDropdownOption.dataset.id; const speaker = activeSpeakers.find(s => s.id === speakerId); if(speaker){ const trigger = container.querySelector('.custom-select-trigger'); trigger.innerHTML = `<img src="${speaker.imgUrl}" alt="${speaker.name}"><span>${speaker.name}</span><svg class="arrow" viewBox="0 0 24 24"><path fill="currentColor" d="M7,10L12,15L17,10H7Z"></path></svg>`; container.dataset.selectedId = speaker.id; container.classList.remove('open'); saveState(); } } });
475
 
476
- // --- رویداد submit فرم با اعتبارسنجی جدید ---
477
- form.addEventListener('submit', async () => {
478
- const scriptData = Array.from(scriptContainer.querySelectorAll('.script-turn'))
479
- .map((t, index) => ({
480
- element: t,
481
- index: index,
482
- speakerId: t.querySelector('.custom-select-container').dataset.selectedId,
483
- text: t.querySelector('textarea').value.trim()
484
- }))
485
- .filter(d => d.text.length > 0 && d.speakerId);
486
-
487
- if (activeSpeakers.length === 0) {
488
- showValidationError('لطفا ابتدا حداقل یک گوینده به پروژه اضافه کنید.');
489
- return;
490
- }
491
- if (scriptData.length === 0) {
492
- showValidationError('لطفاً سناریو را کامل کنید و برای هر بخش یک گوینده انتخاب نمایید.');
493
- return;
494
- }
495
-
496
- showUIState('loading', 'در حال آماده‌سازی...');
497
- masterAudioBlobs = new Array(scriptData.length).fill(null);
498
- try {
499
- for (let i = 0; i < scriptData.length; i += BATCH_SIZE) {
500
- const batch = scriptData.slice(i, i + BATCH_SIZE);
501
- const totalBatches = Math.ceil(scriptData.length / BATCH_SIZE);
502
- showUIState('loading', `در حال پردازش دسته ${ (i / BATCH_SIZE) + 1 } از ${ totalBatches }...`);
503
- const batchPromises = batch.map(segment => {
504
- const payload = { text: segment.text, speaker: segment.speakerId, temperature: parseFloat(tempSlider.value) };
505
- return fetch(TTS_API_ENDPOINT, { method: 'POST', headers: {'Content-Type': 'application/json'}, body: JSON.stringify(payload) })
506
- .then(res => res.ok ? res.blob() : res.text().then(text => { throw new Error(`خطا در قطعه ${segment.index + 1}: ${text}`) }))
507
- .then(blob => ({ index: segment.index, blob }));
508
- });
509
- const results = await Promise.all(batchPromises);
510
- results.forEach(result => { masterAudioBlobs[result.index] = result.blob; });
511
- }
512
- showUIState('loading', 'همه قطعه‌ها ساخته شد. در حال میکس نهایی صدا...');
513
- const mergedBuffer = await mergeAudioBlobs(masterAudioBlobs);
514
- if (!mergedBuffer) throw new Error("میکس صدا با شکست مواجه شد (هیچ فایل صوتی معتبری دریافت نشد).");
515
- const finalWavBlob = bufferToWav(mergedBuffer);
516
- if(mainAudioPlayer.src) URL.revokeObjectURL(mainAudioPlayer.src);
517
- mainAudioPlayer.src = URL.createObjectURL(finalWavBlob);
518
- mainAudioPlayer.load();
519
- mainAudioPlayer.onloadedmetadata = () => {
520
- processAudioForWaveform(mergedBuffer);
521
- showUIState('result');
522
- updateMainPlayerUI();
523
- };
524
- scriptData.forEach(item => { setupTurnPlayer(item.element, item.index); });
525
- } catch (error) {
526
- console.error(error);
527
- showUIState('error', `عملیات با شکست مواجه شد: ${error.message}`);
528
- }
529
- });
530
-
531
- setupMainPlayerListeners();
532
- loadState();
533
- });
534
- </script>
535
- </body>
536
- </html>
 
1
+ import os
2
+ import google.generativeai as genai
3
+ import json
4
+ import time
5
+ from flask import Flask, request, jsonify, render_template
6
+ from flask_cors import CORS
7
+ import uuid
8
+ import threading
9
+ from datetime import datetime, timedelta
10
+ import re
11
+ import logging
12
+ import random # 1. کتابخانه random برای به هم ریختن لیست اضافه شد
13
+
14
+ logging.basicConfig(level=logging.INFO, format='%(asctime)s - %(message)s', datefmt='%Y-%m-%d %H:%M:%S')
15
+
16
+ app = Flask(__name__)
17
+ CORS(app)
18
+
19
+ tasks = {}
20
+ tasks_lock = threading.Lock()
21
+
22
+ GEMINI_API_KEYS = []
23
+ key_index = 0
24
+ key_lock = threading.Lock()
25
+
26
+ request_counter = 0
27
+ request_counter_lock = threading.Lock()
28
+
29
+
30
+ def cleanup_old_tasks():
31
+ with tasks_lock:
32
+ tasks_to_delete = []
33
+ for task_id, task_data in list(tasks.items()):
34
+ if datetime.utcnow() - task_data.get('timestamp', datetime.utcnow()) > timedelta(minutes=15):
35
+ tasks_to_delete.append(task_id)
 
 
36
 
37
+ for task_id in tasks_to_delete:
38
+ if task_id in tasks:
39
+ del tasks[task_id]
40
+
41
+ def generate_podcast_in_background(task_id, system_prompt, safety_settings, api_key):
42
+ try:
43
+ genai.configure(api_key=api_key)
44
+ model_instance = genai.GenerativeModel('gemini-2.5-pro')
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
45
 
46
+ cleanup_old_tasks()
47
+ max_retries = 3
48
+ for attempt in range(max_retries):
49
+ try:
50
+ response = model_instance.generate_content(
51
+ system_prompt,
52
+ safety_settings=safety_settings
53
+ )
54
+
55
+ if not response.parts:
56
+ raise ValueError("Response was blocked by safety filters or was empty.")
57
+
58
+ raw_text = response.text
59
+
60
+ json_string = None
61
+ match = re.search(r"```json\s*(\{.*?\})\s*```", raw_text, re.DOTALL)
62
+ if match:
63
+ json_string = match.group(1)
64
+ else:
65
+ start_index = raw_text.find('{')
66
+ end_index = raw_text.rfind('}')
67
+ if start_index != -1 and end_index != -1 and end_index > start_index:
68
+ json_string = raw_text[start_index : end_index + 1]
69
+
70
+ if not json_string:
71
+ raise ValueError("Could not find a valid JSON object in the AI response.")
72
+
73
+ try:
74
+ response_json = json.loads(json_string)
75
+ except json.JSONDecodeError as json_err:
76
+ raise ValueError(f"AI returned malformed JSON. Details: {json_err}")
77
+
78
+ if not isinstance(response_json, dict) or "selected_speakers" not in response_json or "script" not in response_json:
79
+ raise ValueError("Generated JSON has an incorrect structure (missing keys).")
80
+
81
+ for turn in response_json.get("script", []):
82
+ if "dialogue" in turn and isinstance(turn["dialogue"], str):
83
+ cleaned_dialogue = re.sub(r'\[.*?\]|\(.*?\)', '', turn["dialogue"])
84
+ turn["dialogue"] = cleaned_dialogue.strip()
85
+
86
+ with tasks_lock:
87
+ tasks[task_id].update({'status': 'completed', 'data': response_json})
88
+ return
89
+
90
+ except Exception as e:
91
+ logging.warning(f"Task {task_id}: Attempt {attempt + 1} failed: {e}")
92
+ if attempt >= max_retries - 1:
93
+ raise e
94
+ time.sleep(2)
95
+
96
+ except Exception as e:
97
+ error_message = str(e)
98
+ with tasks_lock:
99
+ tasks[task_id].update({'status': 'failed', 'error': f"AI failed to generate a valid response: {error_message}"})
100
+ logging.error(f"Task {task_id} failed permanently: {error_message}")
101
+
102
+ try:
103
+ keys_str = os.environ.get("ALL_GEMINI_API_KEYS")
104
+ if not keys_str:
105
+ raise ValueError("سکرت ALL_GEMINI_API_KEYS پیدا نشد.")
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
106
 
107
+ GEMINI_API_KEYS = [key.strip() for key in keys_str.split(',') if key.strip()]
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
108
 
109
+ if not GEMINI_API_KEYS:
110
+ raise ValueError("هیچ کلید معتبری در متغیر ALL_GEMINI_API_KEYS یافت نشد.")
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
111
 
112
+ logging.info("===========================================")
113
+ logging.info(f"✅ تعداد {len(GEMINI_API_KEYS)} کلید جیمینای با موفقیت شناسایی شد.")
114
+ logging.info("===========================================")
115
+
116
+ safety_settings = [
117
+ {"category": "HARM_CATEGORY_HARASSMENT", "threshold": "BLOCK_NONE"},
118
+ {"category": "HARM_CATEGORY_HATE_SPEECH", "threshold": "BLOCK_NONE"},
119
+ {"category": "HARM_CATEGORY_SEXUALLY_EXPLICIT", "threshold": "BLOCK_NONE"},
120
+ {"category": "HARM_CATEGORY_DANGEROUS_CONTENT", "threshold": "BLOCK_NONE"},
121
+ ]
122
+
123
+ except Exception as e:
124
+ logging.error(f"❌ خطا در هنگام پیکربندی اولیه: {e}")
125
+ GEMINI_API_KEYS = []
126
+
127
+ @app.route('/')
128
+ def index():
129
+ return render_template('index.html')
130
+
131
+ @app.route('/api/create-full-podcast', methods=['POST'])
132
+ def create_full_podcast():
133
+ if not GEMINI_API_KEYS:
134
+ return jsonify({"error": "مدل Gemini به دلیل نبود کلید API معتبر، راه‌اندازی نشده است. لاگ‌های سرور را بررسی کنید."}), 500
135
+
136
+ try:
137
+ global request_counter
138
+ global key_index
139
+
140
+ with request_counter_lock:
141
+ request_counter += 1
142
+ current_request_number = request_counter
143
+
144
+ with key_lock:
145
+ current_key_index = key_index
146
+ selected_api_key = GEMINI_API_KEYS[current_key_index]
147
+ key_index = (key_index + 1) % len(GEMINI_API_KEYS)
148
+
149
+ logging.info(f"🚀 درخواست #{current_request_number}: استفاده از کلید شماره {current_key_index + 1}")
150
+
151
+ data = request.get_json()
152
+ user_prompt = data.get('prompt')
153
+ available_speakers = data.get('available_speakers')
154
+
155
+ if not user_prompt or not available_speakers:
156
+ return jsonify({"error": "Prompt and speakers list are required."}), 400
157
+
158
+ # 2. به هم ریختن ترتیب لیست گویندگان برای جلوگیری از بایاس
159
+ random.shuffle(available_speakers)
160
+
161
+ speaker_info_text = "\n".join(
162
+ f"- ID: '{s['id']}', Name: {s['name']}, Gender: {s['gender']}" for s in available_speakers
163
+ )
164
+
165
+ # 3. بهبود و تقویت پرامپت برای انتخاب هوشمندانه
166
+ system_prompt = f"""
167
+ You are an expert Podcast Producer. Your task is to act as a Casting Director and a Script Writer.
168
+
169
+ Step 1: Casting Director.
170
+ Analyze the user's topic: "{user_prompt}"
171
+ Review the list of available voice talents below. Your selection MUST be logical and suitable for the topic. For example, for a technical topic, you might choose more male voices, and for a social topic, a mix of male and female voices.
172
+ Select a DIVERSE and suitable team of 2 to 4 speakers. AVOID defaulting to the same speakers for different topics. Your choices should be varied and intelligent.
173
+
174
+ Available Voice Talents:
175
+ {speaker_info_text}
176
+
177
+ Step 2: Script Writer. Write a complete, engaging podcast script for the team you just selected.
178
+
179
+ **CRITICAL OUTPUT INSTRUCTIONS:**
180
+ - Your entire response MUST BE a single, valid JSON object and nothing else.
181
+ - The JSON must have "selected_speakers" and "script" keys.
182
+
183
+ **CRITICAL SCRIPT CONTENT RULES:**
184
+ - The "dialogue" values MUST ONLY contain the words to be spoken.
185
+ - DO NOT include ANY descriptions of sounds, music, actions, or emotions in brackets or parentheses (e.g., "[موسیقی]", "(با خنده)").
186
+ - The output must be clean and ready for a Text-to-Speech (TTS) engine.
187
+
188
+ Example of the ONLY valid output format:
189
+ {{
190
+ "selected_speakers": ["Charon", "Vindemiatrix"],
191
+ "script": [
192
+ {{"speaker_id": "Charon", "dialogue": "سلام به همه شنوندگان عزیز پادکست ما."}},
193
+ {{"speaker_id": "Vindemiatrix", "dialogue": "سلام شهاب جان. خوشحالم که امروز هم با یک موضوع جذاب دیگر در خدمت شما هستیم."}}
194
+ ]
195
+ }}
196
+ """
197
+
198
+ task_id = str(uuid.uuid4())
199
+ with tasks_lock:
200
+ tasks[task_id] = {'status': 'pending', 'timestamp': datetime.utcnow()}
201
+
202
+ thread = threading.Thread(
203
+ target=generate_podcast_in_background,
204
+ args=(task_id, system_prompt, safety_settings, selected_api_key)
205
+ )
206
+ thread.daemon = True
207
+ thread.start()
208
+
209
+ return jsonify({"task_id": task_id}), 202
210
+
211
+ except Exception as e:
212
+ logging.error(f"CRITICAL ERROR in API endpoint: {e}")
213
+ return jsonify({"error": "An unexpected internal server error occurred."}), 500
214
+
215
+ @app.route('/api/podcast-status/<task_id>', methods=['GET'])
216
+ def get_podcast_status(task_id):
217
+ with tasks_lock:
218
+ task = tasks.get(task_id)
219
 
220
+ if not task:
221
+ return jsonify({'status': 'not_found', 'error': 'Task not found or expired.'}), 404
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
222
 
223
+ return jsonify(task)
224
+
225
+ if __name__ == '__main__':
226
+ port = int(os.environ.get('PORT', 7860))
227
+ app.run(host='0.0.0.0', port=port)