fixed speech to text

index.html

@@ -157,6 +157,9 @@
                                 style="background: none;">
                                 <h6 class="m-0 font-weight-bold text-primary d-none">圖表輸出</h6>
 
+                                <!-- <p>語音辨識結果:<span id="record_text"> </span></p> -->
+
+
                                 <!-- <div class="text-center">
                                     <button id="downloadButton">下載圖表</button>
                                 </div> -->
@@ -255,6 +258,10 @@
                                     <!-- <i class="fas fa-search fa-sm"></i> -->
                                     送出
                                 </button>
+                                <button class="btn btn-danger ml-2" id="cancel_send_data" type="button">
+                                    <!-- <i class="fas fa-search fa-sm"></i> -->
+                                    取消
+                                </button>
 
                             </div>
                         </div>

js/demo/text-to-chart.js

@@ -71,6 +71,9 @@ var vocab = [];
 
 var chartDiv = document.getElementById('chartdiv');
 
+let cancelToken;
+let source;
+
 $('#chartdiv').hide();
 
 
@@ -312,6 +315,7 @@ document.addEventListener('DOMContentLoaded', function () {
 
 // 定義按鈕點擊事件處理函數
 function sendButtonClickHandler() {
+    // inputField.value = "";
     console.log(inputField.value);
     var input_text_value = inputField.value;
     $('#chartdiv').hide();
@@ -321,7 +325,11 @@ function sendButtonClickHandler() {
     get_data(input_text_value);
 }
 
-sendButton.addEventListener("click", sendButtonClickHandler);
+sendButton.addEventListener("click", function () {
+
+    sendButtonClickHandler();
+    inputField.value = ''
+});
 
 // sendButton.addEventListener("click", function () {
 //     console.log(inputField.value);
@@ -1119,7 +1127,7 @@ function createChart(chartType, data, labels) {
             size: YfontSizeValue,
         },
         anchor: 'end',
-        align: 'right'
+        align: 'top'
     } : null;
 
     ctx = document.getElementById("textToChart");
@@ -1681,7 +1689,10 @@ TitlefontSize.addEventListener('input', function () {
 let labelDependent = ""; // 圖表左側 Label
 
 function get_data(input_text_value) {
-    inputField.value = "";
+    // 重新创建取消令牌和源
+    cancelToken = axios.CancelToken;
+    source = cancelToken.source();
+    // inputField.value = "";
     apiLoading();
     var existingTable = chartJsBox.querySelector('table');
     downloadButton.style.display = "none";
@@ -1715,7 +1726,11 @@ function get_data(input_text_value) {
         myChart.destroy();
         document.getElementById('img_box_url').src = "";
     }
-    axios.get('https://cmm.ai:8080/answer_with_token?token=' + accessToken + '&question=' + input_text_value)
+    const apiUrl = `https://cmm.ai:8080/answer_with_token?token=${accessToken}&question=${input_text_value}`;
+
+    axios.get(apiUrl, {
+        cancelToken: source.token // 将取消令牌传递给 Axios 请求
+    })
         .then(response => {
 
             apiHideLoading();
@@ -1809,14 +1824,27 @@ function get_data(input_text_value) {
             // generateChart(dataArray);
         })
         .catch(error => {
+            // 错误处理逻辑，包括取消请求的情况
             apiHideLoading();
-
-            // 在這裡處理請求失敗的情況
-            console.error('發生錯誤:', error);
+            if (axios.isCancel(error)) {
+                console.log('请求被取消：', error.message);
+            } else {
+                console.error('发生错误:', error);
+            }
         });
 }
 
 
+// 取消请求的函数
+function cancelRequest() {
+    if (source) {
+
+        source.cancel('取消了 API 请求');
+        apiHideLoading(); // 隐藏加载状态
+    }
+}
+
+document.getElementById('cancel_send_data').addEventListener('click', cancelRequest);
 
 
 
@@ -2063,7 +2091,7 @@ if (!window.Html_$T) {//没有提供本页面用的国际化多语言支持时
 
 if (window.Recorder) {
     // reclog(Html_$T('BL9u::頁面已準備好，請先點擊打開錄音，然後點擊錄製'), 2);
-    console.log('頁面已準備好，請先點擊打開錄音，然後點擊錄製')
+    alert('錄音已準備好，請先點擊右下角打開錄音，即可開始錄製')
 } else {
     reclog(Html_$T("YzPd::js文件加载失败，请刷新重试！"), "#f00;font-size:50px");
 
@@ -2191,7 +2219,7 @@ function recStop() {
 
         recBlob = blob;
         var file = new File([blob], "recording.mp3", { type: "audio/mp3" });
-        console.log(file);
+        // console.log(file);
         handleAudioToText(file);
         reclog(Html_$T("0LHf::已錄製mp3：{1}ms {2}字節，可以點擊播放、上傳、本地下载了", 0, formatMs(duration), blob.size), 2);
     }, function (msg) {
@@ -2348,7 +2376,7 @@ var formatMs = function (ms, all) {
 let mediaRecorder;
 let audioChunks = [];
 
-
+var recordText = document.getElementById('record_text');
 
 async function handleAudioToText(file) {
     console.log('tts')
@@ -2393,8 +2421,14 @@ async function handleAudioToText(file) {
             return
         }
         console.log(input_text_value[0]);
+
+        inputField.value = input_text_value[0];
+        // Show the result for a short time before executing get_data
         get_data(input_text_value);
 
+
+        // get_data(input_text_value);
+
     } catch (error) {
         console.log("error", error);
     }