Merge pull request #34 from Cassianvale/main

fix:修复多音频文件API展示无效的问题

Author: jianchang512

app.py

@@ -168,7 +168,6 @@ def tts():
     sample_rate = 24000  # Assuming 24kHz sample rate
     audio_duration = len(combined_wavdata) / sample_rate
     audio_duration_rounded = round(audio_duration, 2)
-    app.logger.info(f"音频时长: {audio_duration_rounded} 秒")
     print(f"音频时长: {audio_duration_rounded} 秒")
 
     sf.write(WAVS_DIR+'/'+filename, combined_wavdata, 24000)

templates/index.html

@@ -123,8 +123,7 @@ <h1 class="text-center">ChatTTS WebUI & API<span class="fs-6">(v{{version}})</sp
   $('[data-toggle="tooltip"]').tooltip();
 
     let audioGenerated = false;
-    let jsCode = '';
-  
+
   $('#temper_wrap input[type="range"]').change(function(){
 	$(this).next().text(($(this).val()));
   });
@@ -146,86 +145,70 @@ <h1 class="text-center">ChatTTS WebUI & API<span class="fs-6">(v{{version}})</sp
 				custom_voice:custom_voice?parseInt(custom_voice):0
 			};
 
-            $.ajax({
-                url: '/tts',
-                type: 'POST',
-                data: data,
-                timeout: 3600000,
-                success: function(response) {
-                    if (response.code === 0) {
-                        console.log(response);
-                        if (response.audio_files) {
-                            response.audio_files.forEach(function(audio, index) {
-                                let pos = audio.filename.lastIndexOf('/') + 1;
-                                let filename = audio.filename.substr(pos);
-                                let audioId = `audio-${index}`;
-                                let buttonId = `show-js-btn-${index}`;
-                                let jsCode = `# API调用代码
+      $.ajax({
+        url: '/tts',
+        type: 'POST',
+        data: data,
+        timeout: 3600000,
+        success: function(response) {
+          if (response.code === 0) {
+            console.log(response);
+            if (response.audio_files) {
+              response.audio_files.forEach(function(audio, index) {
+                let pos = audio.filename.lastIndexOf('/') + 1;
+                let filename = audio.filename.substr(pos);
+                let jsCode = `# API调用代码
 
 import requests
 
-res=requests.post('http://${location.host}/tts',data=${JSON.stringify(data)})
+res = requests.post('http://${location.host}/tts', data=${JSON.stringify(data, null, 2)})
 print(res.json())
 
 #ok
-{code:0,msg:'ok',audio_files:[{filename:${audio.filename},url:${audio.url}}]}
+{code:0, msg:'ok', audio_files:[{filename: ${audio.filename}, url: ${audio.url}}]}
 
 #error
-{code:1,msg:"error"}
+{code:1, msg:"error"}
 `;
 
-                                $('#audio-container').append(`
-                                  <div class="col-12 mb-2 pb-2 border-bottom" id="${audioId}">
-                                    <div class="fs-6 text-secondary">${filename}</div>
-                                    <audio controls src="${audio.url}"></audio>
-                                    <div>推理时间: ${audio.inference_time} 秒</div>
-                                    <div>生成时间: ${audio.audio_duration} 秒</div>
-
-                                    <button id="${buttonId}" class="btn btn-info mt-2">显示API调用</button>
-                                    <div class="m-2 bg-black text-white d-none" id="code-${index}"></div>
-
-                                  </div>
-                                `);
-
-                                $(`#${buttonId}`).click(function() {
-                                    let codeId = `#code-${index}`;
-                                    $(codeId).toggleClass('d-none');
-                                    if (!$(codeId).hasClass('d-none')) {
-                                        $(codeId).html(`<pre><code>${jsCode}</code></pre>`);
-                                    }
-                                });
-                            });
-
-                            audioGenerated = true;
-                        } else {
-                            layer.alert('音频文件生成失败', {title: false});
-                        }
-                    } else {
-                        layer.alert(response.msg,{title:false});
-                    }
-                },
-                error: function(xhr, status, error) {
-                    layer.alert('发生错误: ' + error,{title:false});
-                },
-				complete:function(){
-					layer.close(index)
-				}
-            });
-        }
-    });
-
-    // Show API call example button
-    $('#show-js-btn').click(function() {
-        if (audioGenerated) {
-            $('#code').toggleClass('d-none');
-            $('#show-js-btn').toggleClass('btn-warning');
-            if (!$('#code').hasClass('d-none')) {
-                $('#code').html(`<pre><code>${jsCode}</code></pre>`);
+                $('#audio-container').append(`
+                  <div class="col-12 mb-2 pb-2 border-bottom">
+                    <div class="fs-6 text-secondary">${filename}</div>
+                    <audio controls src="${audio.url}"></audio>
+                    <div>推理时长: ${audio.inference_time} 秒</div>
+                    <div>音频时长: ${audio.audio_duration} 秒</div>
+                    <button class="btn btn-info mt-2 show-js-btn" data-js-code="${encodeURIComponent(jsCode)}">显示API调用</button>
+                    <div class="m-2 bg-black text-white d-none code-container"></div>
+                  </div>
+                `);
+              });
+
+              audioGenerated = true;
+            } else {
+              layer.alert('音频文件生成失败', {title: false});
             }
-        } else {
-            layer.alert('请先生成音频文件', {title: false});
+          } else {
+            layer.alert(response.msg, {title: false});
+          }
+        },
+        error: function(xhr, status, error) {
+          layer.alert('发生错误: ' + error, {title: false});
+        },
+        complete: function() {
+          layer.close(index);
         }
-    });
+      });
+    }
+  });
+
+  $(document).on('click', '.show-js-btn', function() {
+    let codeContainer = $(this).next('.code-container');
+    codeContainer.toggleClass('d-none');
+    if (!codeContainer.hasClass('d-none')) {
+      codeContainer.html(`<pre><code>${decodeURIComponent($(this).data('js-code'))}</code></pre>`);
+    }
+  });
+
 
 	$('#upload-btn').click(function() {
         $('#file-input').click(); // Trigger file input when upload button is clicked