|
|
@@ -214,6 +214,66 @@
|
|
|
.error {
|
|
|
color: #e74c3c;
|
|
|
}
|
|
|
+
|
|
|
+ /* 实时识别结果样式 */
|
|
|
+ .realtime-display {
|
|
|
+ background: #f8f9fa;
|
|
|
+ border: 1px solid #e9ecef;
|
|
|
+ border-radius: 8px;
|
|
|
+ padding: 20px;
|
|
|
+ margin: 20px 0;
|
|
|
+ }
|
|
|
+
|
|
|
+ .caption-container {
|
|
|
+ margin-bottom: 20px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .caption-container h3 {
|
|
|
+ color: #2c3e50;
|
|
|
+ margin-bottom: 10px;
|
|
|
+ font-size: 16px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .caption-text {
|
|
|
+ background: white;
|
|
|
+ border: 1px solid #ddd;
|
|
|
+ border-radius: 6px;
|
|
|
+ padding: 15px;
|
|
|
+ min-height: 60px;
|
|
|
+ font-size: 14px;
|
|
|
+ line-height: 1.5;
|
|
|
+ color: #333;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-info {
|
|
|
+ display: grid;
|
|
|
+ grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
|
|
+ gap: 15px;
|
|
|
+ margin-top: 20px;
|
|
|
+ padding-top: 20px;
|
|
|
+ border-top: 1px solid #e9ecef;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-item {
|
|
|
+ display: flex;
|
|
|
+ justify-content: space-between;
|
|
|
+ align-items: center;
|
|
|
+ padding: 8px 12px;
|
|
|
+ background: white;
|
|
|
+ border: 1px solid #e9ecef;
|
|
|
+ border-radius: 4px;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-item .label {
|
|
|
+ font-weight: 600;
|
|
|
+ color: #6c757d;
|
|
|
+ }
|
|
|
+
|
|
|
+ .status-item span:last-child {
|
|
|
+ color: #495057;
|
|
|
+ font-family: "Courier New", monospace;
|
|
|
+ font-size: 12px;
|
|
|
+ }
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
@@ -279,6 +339,34 @@
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
+ <div class="demo-section">
|
|
|
+ <h2>🎯 实时识别结果</h2>
|
|
|
+ <div class="realtime-display" id="realtimeDisplay">
|
|
|
+ <div class="caption-container">
|
|
|
+ <h3>📝 原文识别</h3>
|
|
|
+ <div class="caption-text" id="originalText">等待识别结果...</div>
|
|
|
+ </div>
|
|
|
+ <div class="caption-container">
|
|
|
+ <h3>🌐 翻译结果</h3>
|
|
|
+ <div class="caption-text" id="translatedText">等待翻译结果...</div>
|
|
|
+ </div>
|
|
|
+ <div class="status-info">
|
|
|
+ <div class="status-item">
|
|
|
+ <span class="label">任务ID:</span>
|
|
|
+ <span id="taskId">未开始</span>
|
|
|
+ </div>
|
|
|
+ <div class="status-item">
|
|
|
+ <span class="label">状态:</span>
|
|
|
+ <span id="transcriptionStatus">未开始</span>
|
|
|
+ </div>
|
|
|
+ <div class="status-item">
|
|
|
+ <span class="label">开始时间:</span>
|
|
|
+ <span id="startTime">未开始</span>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+ </div>
|
|
|
+
|
|
|
<div class="demo-section">
|
|
|
<h2>📋 测试日志</h2>
|
|
|
<div class="log" id="testLog">
|
|
|
@@ -360,6 +448,39 @@
|
|
|
}
|
|
|
}
|
|
|
|
|
|
+ // 更新实时识别结果
|
|
|
+ function updateRealtimeDisplay(textstream) {
|
|
|
+ // 根据数据类型更新显示
|
|
|
+ if (textstream.dataType === "transcribe") {
|
|
|
+ // 原文识别结果
|
|
|
+ const originalText = document.getElementById("originalText")
|
|
|
+ if (textstream.words && textstream.words.length > 0) {
|
|
|
+ const text = textstream.words.map((word) => word.text || "").join(" ")
|
|
|
+ originalText.textContent = text
|
|
|
+ }
|
|
|
+ } else if (textstream.dataType === "translate") {
|
|
|
+ // 翻译结果
|
|
|
+ const translatedText = document.getElementById("translatedText")
|
|
|
+ if (textstream.trans && textstream.trans.length > 0) {
|
|
|
+ const translations = textstream.trans
|
|
|
+ .map(
|
|
|
+ (trans, index) =>
|
|
|
+ `翻译${index + 1} (${textstream.culture || "未知"}): ${trans.text || ""}`,
|
|
|
+ )
|
|
|
+ .join("\n")
|
|
|
+ translatedText.textContent = translations
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ // 更新状态信息
|
|
|
+ document.getElementById("taskId").textContent = textstream.uid || "未知"
|
|
|
+ document.getElementById("transcriptionStatus").textContent =
|
|
|
+ textstream.dataType === "transcribe" ? "转录中" : "翻译中"
|
|
|
+ document.getElementById("startTime").textContent = new Date(
|
|
|
+ textstream.time || Date.now(),
|
|
|
+ ).toLocaleTimeString()
|
|
|
+ }
|
|
|
+
|
|
|
// 初始化SDK
|
|
|
function initializeSdk() {
|
|
|
const appId = document.getElementById("appId").value
|
|
|
@@ -399,11 +520,17 @@
|
|
|
rtmManager = sdk.createRtmManager()
|
|
|
sttManager = sdk.createSttManager(rtmManager)
|
|
|
|
|
|
- // 监听事件
|
|
|
+ // 监听RTM事件
|
|
|
rtmManager.on("sttDataChanged", (data) => {
|
|
|
addTestLog("收到STT数据: " + JSON.stringify(data))
|
|
|
})
|
|
|
|
|
|
+ // 监听RTC文本流事件
|
|
|
+ rtmManager.on("textstreamReceived", (textstream) => {
|
|
|
+ addTestLog("收到文本流数据: " + JSON.stringify(textstream))
|
|
|
+ updateRealtimeDisplay(textstream)
|
|
|
+ })
|
|
|
+
|
|
|
addTestLog("STT和RTM管理器创建成功", "success")
|
|
|
document.getElementById("transcribeBtn").disabled = false
|
|
|
document.getElementById("cleanupBtn").disabled = false
|
|
|
@@ -467,6 +594,15 @@
|
|
|
})
|
|
|
}
|
|
|
|
|
|
+ // 重置实时显示
|
|
|
+ function resetRealtimeDisplay() {
|
|
|
+ document.getElementById("originalText").textContent = "等待识别结果..."
|
|
|
+ document.getElementById("translatedText").textContent = "等待翻译结果..."
|
|
|
+ document.getElementById("taskId").textContent = "未开始"
|
|
|
+ document.getElementById("transcriptionStatus").textContent = "未开始"
|
|
|
+ document.getElementById("startTime").textContent = "未开始"
|
|
|
+ }
|
|
|
+
|
|
|
// 清理资源
|
|
|
function cleanup() {
|
|
|
addTestLog("开始清理资源...")
|
|
|
@@ -505,6 +641,7 @@
|
|
|
updateStatus("资源已清理", "info")
|
|
|
document.getElementById("transcribeBtn").disabled = true
|
|
|
document.getElementById("cleanupBtn").disabled = true
|
|
|
+ resetRealtimeDisplay()
|
|
|
})
|
|
|
.catch((error) => {
|
|
|
addTestLog("SDK销毁失败: " + error, "error")
|
yourname