Update app.py

app.py

@@ -281,8 +281,11 @@ with gr.Blocks(css=GLOBAL_CSS) as demo:
         # ========== TTS TAB ==========
         with gr.Tab("Text to Speech"):
             text_input_tts = gr.Textbox(label="Nhập văn bản tiếng Việt (tối đa 30.000 ký tự)", lines=20, placeholder="Nhập nội dung cần đọc, chia đoạn viết có dấu 'phẩy', dấu 'chấm', để âm điệu đọc được tự nhiên và mượt mà hơn.")
-            with gr.Row(elem_id="char_usage_row"):
-                gr.HTML(f"<div style='display:flex;justify-content:space-between;align-items:center;width:100%;margin:0;padding:0;line-height:1;font-weight:500;'><div id='char-counter' style='text-align:left;'>✅ 0/200,000 ký tự</div><div id='time-counter' style='text-align:center;position:relative;left:12%;'>⏳ Hạn sử dụng: 0/3 ngày</div></div>")             with gr.Row(elem_id="tts_cols"):
+            with gr.Row(elem_id="char_usage_row", elem_classes="char-usage-row"):
+                gr.HTML(f"<div style='display:flex;justify-content:space-between;align-items:center;width:100%;margin:0;padding:0;line-height:1;font-weight:500;'><div id='char-counter' style='text-align:left;'>✅ 0/200,000 ký tự</div><div id='time-counter' style='text-align:center;position:relative;left:12%;'>⏳ Hạn sử dụng: 0/3 ngày</div></div>")
+
+            with gr.Row(elem_id="tts_cols"):
+
                 with gr.Column():# <-- đây là CỘT TRÁI (Voice + Tốc độ)
                     gr.HTML('''<div class="audio-box" style="position:relative;"><div style="display:flex;align-items:center;justify-content:space-between;"><span style="font-weight:600;">Chọn giọng để Text to Speech</span><div id="voice-select" style="border:1px solid #ccc;border-radius:8px;padding:6px 12px;width:60%;display:flex;align-items:center;justify-content:space-between;cursor:pointer;"><span id="selected-voice">Giọng A</span><span style="color:#555;">▸</span></div></div><div id="voice-dropdown" style="display:none;position:absolute;bottom:100%;left:0;width:100%;background:#fff;border:1px solid #ccc;border-radius:8px;box-shadow:0 2px 6px rgba(0,0,0,0.15);margin-bottom:6px;z-index:1000;overflow-y:auto;max-height:220px;padding:4px 0;">''' + ''.join([f"<div class='voice-item' style='display:flex;align-items:center;justify-content:space-between;padding:6px 12px;border-bottom:1px solid #eee;'><span>{v}</span><div style='display:flex;align-items:center;gap:10px;'><button class='voice-play' data-voice='{v}' style='background:#000;color:#fff;border:none;width:26px;height:26px;border-radius:4px;font-weight:bold;cursor:pointer;'>▶</button><div class='voice-radio' data-voice='{v}' style='width:16px;height:16px;border:2px solid #000;border-radius:50%;cursor:pointer;'></div></div></div>" for v in ["Giọng A","Giọng B","Giọng C","Giọng D","Giọng E","Giọng F","Giọng G","Giọng H","Giọng I","Giọng J"]]) + '''</div><div id="file-name" style="font-size:13px;color:#444;margin-top:6px;text-align:left;">Tên file mp3: <i>chưa tải</i></div><div style="display:flex;align-items:center;justify-content:space-between;margin-top:10px;"><span style="flex-shrink:0;">Tốc độ giọng đọc</span><input id="speed-slider" type="range" min="0.5" max="2" step="0.1" value="1" style="width:60%;height:4px;border-radius:4px;background:#555;appearance:none;cursor:pointer;"><span id="speed-value">1.0x</span></div><script>const sel=document.getElementById("voice-select");const drop=document.getElementById("voice-dropdown");const selName=document.getElementById("selected-voice");sel.onclick=()=>{drop.style.display=drop.style.display==="block"?"none":"block";};document.querySelectorAll(".voice-radio").forEach(r=>r.onclick=()=>{document.querySelectorAll(".voice-radio").forEach(x=>x.style.background='transparent');r.style.background='#0078ff';selName.textContent=r.dataset.voice;drop.style.display='none';});document.querySelectorAll(".voice-play").forEach(p=>p.onclick=()=>{const v=p.dataset.voice;if(p.textContent==='▶'){p.textContent='⏸';const a=new Audio('assets/sample_audio.mp3');a.play();a.onended=()=>{p.textContent='▶';};}else{p.textContent='▶';}});const s=document.getElementById('speed-slider');const val=document.getElementById('speed-value');s.oninput=()=>{val.textContent=parseFloat(s.value).toFixed(1)+'x';};</script><style>input[type="range"]::-webkit-slider-thumb{appearance:none;width:9px;height:9px;border-radius:50%;background:#000;cursor:pointer;}input[type="range"]::-moz-range-thumb{width:9px;height:9px;border-radius:50%;background:#000;cursor:pointer;}</style></div>''')
                 with gr.Column():# <-- đây là CỘT PHẢI (Kết quả TTS)