432 lines
9.7 KiB
Vue
432 lines
9.7 KiB
Vue
<template>
|
||
<view class="content">
|
||
<view class="header">
|
||
<text class="title">语音识别</text>
|
||
</view>
|
||
|
||
<!-- 状态显示区域 -->
|
||
<view class="status-area">
|
||
<view class="status-item">
|
||
<text class="status-label">状态：</text>
|
||
<text class="status-value" :class="{ 'status-ready': isReady, 'status-loading': isLoading }">{{ statusText }}</text>
|
||
</view>
|
||
</view>
|
||
|
||
<!-- 操作按钮区域 -->
|
||
<view class="action-area">
|
||
<button
|
||
class="action-btn"
|
||
:class="{ 'btn-recording': isRecording, 'btn-ready': !isRecording && isReady }"
|
||
:disabled="isLoading || !isReady"
|
||
@click="handleStart">
|
||
<text class="btn-text">{{ isRecording ? '正在识别...' : '开始说话' }}</text>
|
||
</button>
|
||
<button
|
||
v-if="isRecording"
|
||
class="action-btn btn-stop"
|
||
@click="handleStop">
|
||
<text class="btn-text">停止识别</text>
|
||
</button>
|
||
</view>
|
||
|
||
<!-- 识别结果区域 -->
|
||
<view class="result-area">
|
||
<view class="result-title">
|
||
<text>识别结果：</text>
|
||
</view>
|
||
<view class="result-content">
|
||
<scroll-view class="result-scroll" scroll-y>
|
||
<text class="result-text">{{ content }}</text>
|
||
</scroll-view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { ref, onMounted, onBeforeUnmount } from 'vue'
|
||
import { downloadModel, initVoskModel, startSpeechVoice, stopSpeechVoice } from '@/uni_modules/xwq-speech-to-text'
|
||
|
||
const modelPath = ref('') // 储存模型解压地址
|
||
const content = ref('') // 识别结果
|
||
const isReady = ref(false) // 模型是否已准备好
|
||
const isRecording = ref(false) // 是否正在录音
|
||
const isLoading = ref(false) // 是否正在加载/初始化
|
||
const statusText = ref('准备中...')
|
||
const serverUrl = ref('') // 服务器地址（可从配置文件或环境变量获取）
|
||
|
||
/**
|
||
* 页面加载时自动初始化
|
||
*/
|
||
onMounted(() => {
|
||
// 从本地存储读取服务器地址（如果有配置的话）
|
||
const savedServerUrl = uni.getStorageSync('vosk_server_url')
|
||
if (savedServerUrl) {
|
||
serverUrl.value = savedServerUrl
|
||
}
|
||
// 如果需要在代码中直接配置默认服务器地址，可以取消下面的注释
|
||
// 如果没有配置，可以使用默认地址
|
||
// if (!serverUrl.value) {
|
||
// serverUrl.value = 'http://192.168.1.100:8080/vosk-model-small-cn-0.22.zip'
|
||
// }
|
||
autoInit()
|
||
})
|
||
|
||
/**
|
||
* 页面卸载前停止识别
|
||
*/
|
||
onBeforeUnmount(() => {
|
||
if (isRecording.value) {
|
||
stopSpeechVoice()
|
||
}
|
||
})
|
||
|
||
/**
|
||
* 自动初始化模型
|
||
* 1. 先尝试使用已解压的模型（最快）
|
||
* 2. 如果没有，尝试从服务器下载
|
||
* 3. 如果服务器下载失败，从 static 目录初始化
|
||
*/
|
||
const autoInit = () => {
|
||
isLoading.value = true
|
||
statusText.value = '正在初始化模型...'
|
||
|
||
// 尝试从本地存储读取已解压的模型路径
|
||
const savedModelPath = uni.getStorageSync('vosk_model_path')
|
||
|
||
if (savedModelPath) {
|
||
// 使用已解压的模型（最快）
|
||
statusText.value = '正在加载已解压模型...'
|
||
initVoskModel({
|
||
modelPath: savedModelPath,
|
||
zipModelPath: ''
|
||
}, (result) => {
|
||
if (result && result.data) {
|
||
modelPath.value = result.data.modelPath
|
||
isReady.value = true
|
||
isLoading.value = false
|
||
statusText.value = '准备就绪，可以开始说话'
|
||
uni.showToast({
|
||
title: '模型加载成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
} else {
|
||
// 加载失败，尝试从服务器下载
|
||
downloadFromServer()
|
||
}
|
||
})
|
||
} else {
|
||
// 没有已解压的模型，优先从服务器下载
|
||
downloadFromServer()
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 从服务器下载模型
|
||
*/
|
||
const downloadFromServer = () => {
|
||
// 如果配置了服务器地址，优先从服务器下载
|
||
if (serverUrl.value) {
|
||
statusText.value = '正在从服务器下载模型...'
|
||
downloadModel(serverUrl.value, (res) => {
|
||
console.log('服务器下载结果：', res)
|
||
if (res.code == 0 && res.filePath != '') {
|
||
// 下载成功，初始化模型
|
||
statusText.value = '下载完成，正在初始化...'
|
||
initVoskModel({
|
||
zipModelPath: res.filePath
|
||
}, (result) => {
|
||
if (result && result.data) {
|
||
modelPath.value = result.data.modelPath
|
||
// 保存模型路径到本地存储
|
||
uni.setStorageSync('vosk_model_path', result.data.modelPath)
|
||
isReady.value = true
|
||
isLoading.value = false
|
||
statusText.value = '准备就绪，可以开始说话'
|
||
uni.showToast({
|
||
title: '模型初始化成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
} else {
|
||
// 初始化失败，尝试从 static 加载
|
||
initFromStatic()
|
||
}
|
||
})
|
||
} else {
|
||
// 下载失败，尝试从 static 加载
|
||
console.log('服务器下载失败，尝试从本地加载')
|
||
initFromStatic()
|
||
}
|
||
})
|
||
} else {
|
||
// 没有配置服务器地址，直接尝试从 static 加载
|
||
console.log('未配置服务器地址，从本地加载')
|
||
initFromStatic()
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 从 static 目录初始化模型
|
||
*/
|
||
const initFromStatic = () => {
|
||
statusText.value = '正在解压模型文件...'
|
||
let path = '/static/vosk-model-small-cn-0.22.zip'
|
||
|
||
// #ifdef APP-PLUS
|
||
try {
|
||
const staticPath = plus.io.convertLocalFileSystemURL(path)
|
||
initVoskModel({
|
||
zipModelPath: staticPath
|
||
}, (result) => {
|
||
if (result && result.data) {
|
||
modelPath.value = result.data.modelPath
|
||
// 保存模型路径到本地存储
|
||
uni.setStorageSync('vosk_model_path', result.data.modelPath)
|
||
isReady.value = true
|
||
isLoading.value = false
|
||
statusText.value = '准备就绪，可以开始说话'
|
||
uni.showToast({
|
||
title: '模型初始化成功',
|
||
icon: 'success',
|
||
duration: 2000
|
||
})
|
||
} else {
|
||
statusText.value = '初始化失败，请检查模型文件'
|
||
isLoading.value = false
|
||
uni.showToast({
|
||
title: '初始化失败',
|
||
icon: 'error'
|
||
})
|
||
}
|
||
})
|
||
} catch (error) {
|
||
console.error('初始化错误：', error)
|
||
statusText.value = '初始化失败：' + error.message
|
||
isLoading.value = false
|
||
uni.showToast({
|
||
title: '初始化失败',
|
||
icon: 'error'
|
||
})
|
||
}
|
||
// #endif
|
||
|
||
// #ifndef APP-PLUS
|
||
statusText.value = '仅支持 APP 端'
|
||
isLoading.value = false
|
||
uni.showToast({
|
||
title: '仅支持 APP 端',
|
||
icon: 'error'
|
||
})
|
||
// #endif
|
||
}
|
||
|
||
/**
|
||
* 开始识别
|
||
*/
|
||
const handleStart = () => {
|
||
if (!isReady.value) {
|
||
uni.showToast({
|
||
title: '模型未准备好，请稍候',
|
||
icon: 'error'
|
||
})
|
||
return
|
||
}
|
||
|
||
isRecording.value = true
|
||
statusText.value = '正在识别中...'
|
||
content.value = '' // 清空上次识别结果
|
||
|
||
startSpeechVoice((res) => {
|
||
console.log('识别结果===', res.data)
|
||
if (res && res.data && res.data.text) {
|
||
content.value += res.data.text + ' '
|
||
// 滚动到底部
|
||
uni.pageScrollTo({
|
||
scrollTop: 10000,
|
||
duration: 300
|
||
})
|
||
}
|
||
})
|
||
}
|
||
|
||
/**
|
||
* 停止识别
|
||
*/
|
||
const handleStop = () => {
|
||
stopSpeechVoice()
|
||
isRecording.value = false
|
||
statusText.value = '已停止识别'
|
||
uni.showToast({
|
||
title: '已停止识别',
|
||
icon: 'success',
|
||
duration: 1500
|
||
})
|
||
}
|
||
</script>
|
||
|
||
<style>
|
||
.content {
|
||
display: flex;
|
||
flex-direction: column;
|
||
padding: 20rpx;
|
||
min-height: 100vh;
|
||
background: linear-gradient(to bottom, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.header {
|
||
display: flex;
|
||
justify-content: center;
|
||
margin: 40rpx 0 60rpx 0;
|
||
}
|
||
|
||
.title {
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
|
||
.status-area {
|
||
background-color: rgba(255, 255, 255, 0.9);
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
margin-bottom: 40rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||
}
|
||
|
||
.status-item {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: space-between;
|
||
}
|
||
|
||
.status-label {
|
||
font-size: 28rpx;
|
||
color: #666;
|
||
font-weight: 500;
|
||
}
|
||
|
||
.status-value {
|
||
font-size: 28rpx;
|
||
color: #333;
|
||
font-weight: 600;
|
||
}
|
||
|
||
.status-ready {
|
||
color: #52c41a;
|
||
}
|
||
|
||
.status-loading {
|
||
color: #1890ff;
|
||
animation: pulse 1.5s ease-in-out infinite;
|
||
}
|
||
|
||
@keyframes pulse {
|
||
0%, 100% {
|
||
opacity: 1;
|
||
}
|
||
50% {
|
||
opacity: 0.6;
|
||
}
|
||
}
|
||
|
||
.action-area {
|
||
display: flex;
|
||
flex-direction: column;
|
||
align-items: center;
|
||
margin-bottom: 40rpx;
|
||
gap: 30rpx;
|
||
}
|
||
|
||
.action-btn {
|
||
width: 500rpx;
|
||
height: 500rpx;
|
||
border-radius: 50%;
|
||
border: none;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.3);
|
||
transition: all 0.3s;
|
||
}
|
||
|
||
.btn-ready {
|
||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||
}
|
||
|
||
.btn-ready:active {
|
||
transform: scale(0.95);
|
||
}
|
||
|
||
.btn-recording {
|
||
background: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
|
||
animation: pulse-ring 1.5s ease-out infinite;
|
||
}
|
||
|
||
@keyframes pulse-ring {
|
||
0% {
|
||
box-shadow: 0 0 0 0 rgba(245, 87, 108, 0.7);
|
||
}
|
||
50% {
|
||
box-shadow: 0 0 0 40rpx rgba(245, 87, 108, 0);
|
||
}
|
||
100% {
|
||
box-shadow: 0 0 0 0 rgba(245, 87, 108, 0);
|
||
}
|
||
}
|
||
|
||
.btn-stop {
|
||
width: 300rpx;
|
||
height: 100rpx;
|
||
border-radius: 50rpx;
|
||
background: linear-gradient(135deg, #fa709a 0%, #fee140 100%);
|
||
}
|
||
|
||
.btn-text {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
|
||
.result-area {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
background-color: rgba(255, 255, 255, 0.95);
|
||
border-radius: 20rpx;
|
||
padding: 30rpx;
|
||
box-shadow: 0 4rpx 20rpx rgba(0, 0, 0, 0.1);
|
||
min-height: 400rpx;
|
||
}
|
||
|
||
.result-title {
|
||
font-size: 32rpx;
|
||
font-weight: bold;
|
||
color: #333;
|
||
margin-bottom: 20rpx;
|
||
}
|
||
|
||
.result-content {
|
||
flex: 1;
|
||
display: flex;
|
||
flex-direction: column;
|
||
}
|
||
|
||
.result-scroll {
|
||
flex: 1;
|
||
width: 100%;
|
||
}
|
||
|
||
.result-text {
|
||
font-size: 30rpx;
|
||
line-height: 1.8;
|
||
color: #333;
|
||
word-break: break-all;
|
||
min-height: 200rpx;
|
||
}
|
||
</style>
|