xiaozhang/guoyu

Fork 0

xiao12feng 5d7dae4466 修改基本问题，剩余语音测评功能不可以

2025-12-05 18:15:23 +08:00

10 KiB

Raw Blame History

运行时下载模型 - 完整实现示例

✅ 确认：完全可以实现！

uni-app 的 uni.downloadFile API 完全支持运行时下载大文件。

📁 文件清单

已创建：

✅ utils/modelDownloader.js - 模型下载管理器（已创建）

需要修改：

⚠️ pages/speech/speech.vue - 语音识别页面

🎯 在语音页面中使用

完整代码示例

<template>
	<view class="container">
		<!-- 模型下载提示 -->
		<view v-if="!modelReady" class="download-container">
			<view class="download-header">
				<text class="title">语音识别模型初始化</text>
			</view>
			
			<!-- 未开始下载 -->
			<view v-if="downloadStatus === 'idle'" class="idle-state">
				<text class="tip">首次使用需要下载语音识别模型</text>
				<text class="size">文件大小：41.87 MB</text>
				<text class="wifi-tip">建议在WiFi环境下下载</text>
				
				<button 
					type="primary" 
					@click="startDownload"
					class="download-btn">
					开始下载
				</button>
			</view>
			
			<!-- 下载中 -->
			<view v-if="downloadStatus === 'downloading'" class="downloading-state">
				<text class="progress-text">下载进度：{{ downloadProgress }}%</text>
				<progress 
					:percent="downloadProgress" 
					:show-info="true"
					:stroke-width="10"
					activeColor="#07c160" />
				<text class="speed-text">速度：{{ downloadSpeed }}</text>
				<text class="size-text">{{ downloadedSize }} / {{ totalSize }}</text>
				
				<button 
					type="warn" 
					@click="cancelDownload"
					class="cancel-btn"
					size="mini">
					取消下载
				</button>
			</view>
			
			<!-- 下载失败 -->
			<view v-if="downloadStatus === 'error'" class="error-state">
				<text class="error-text">下载失败：{{ errorMessage }}</text>
				<button 
					type="primary" 
					@click="retryDownload"
					class="retry-btn">
					重试
				</button>
			</view>
		</view>
		
		<!-- 语音识别界面 -->
		<view v-else class="speech-container">
			<text class="ready-text">✅ 模型已就绪</text>
			
			<!-- 原来的语音识别界面 -->
			<button @click="startSpeech" type="primary">开始识别</button>
			
			<!-- 设置：重新下载模型 -->
			<view class="settings">
				<button @click="redownloadModel" size="mini">重新下载模型</button>
			</view>
		</view>
	</view>
</template>

<script>
import modelDownloader from '@/utils/modelDownloader.js';

export default {
	data() {
		return {
			modelReady: false,
			downloadStatus: 'idle', // idle, downloading, success, error
			downloadProgress: 0,
			downloadSpeed: '',
			downloadedSize: '',
			totalSize: '',
			errorMessage: '',
			downloadTask: null,
			modelPath: ''
		}
	},
	
	onLoad() {
		// 页面加载时检查模型
		this.checkModel();
	},
	
	methods: {
		/**
		 * 检查模型是否存在
		 */
		async checkModel() {
			try {
				uni.showLoading({
					title: '检查模型...',
					mask: true
				});
				
				const result = await modelDownloader.checkModelExists();
				
				uni.hideLoading();
				
				if (result.exists) {
					console.log('模型已存在，路径：', result.path);
					this.modelPath = result.path;
					this.modelReady = true;
					this.downloadStatus = 'success';
				} else {
					console.log('模型不存在，需要下载');
					this.modelReady = false;
					this.downloadStatus = 'idle';
				}
			} catch (e) {
				console.error('检查模型失败：', e);
				uni.hideLoading();
				this.downloadStatus = 'idle';
			}
		},
		
		/**
		 * 开始下载
		 */
		startDownload() {
			// 检查网络类型
			uni.getNetworkType({
				success: (res) => {
					const networkType = res.networkType;
					
					if (networkType === '2g' || networkType === '3g') {
						// 移动网络提示
						uni.showModal({
							title: '提示',
							content: '当前使用移动网络，下载将消耗约42MB流量，是否继续？',
							success: (modalRes) => {
								if (modalRes.confirm) {
									this.doDownload();
								}
							}
						});
					} else {
						// WiFi或其他网络直接下载
						this.doDownload();
					}
				},
				fail: () => {
					// 无法获取网络类型，直接下载
					this.doDownload();
				}
			});
		},
		
		/**
		 * 执行下载
		 */
		doDownload() {
			this.downloadStatus = 'downloading';
			this.downloadProgress = 0;
			
			this.downloadTask = modelDownloader.downloadModel(
				// 进度回调
				(progressData) => {
					this.downloadProgress = Math.floor(progressData.progress);
					this.downloadSpeed = modelDownloader.formatSpeed(progressData.speed);
					this.downloadedSize = modelDownloader.formatSize(progressData.loaded);
					this.totalSize = modelDownloader.formatSize(progressData.total);
				},
				// 成功回调
				(filePath) => {
					console.log('下载成功：', filePath);
					this.modelPath = filePath;
					this.modelReady = true;
					this.downloadStatus = 'success';
					
					uni.showToast({
						title: '模型下载完成',
						icon: 'success',
						duration: 2000
					});
				},
				// 失败回调
				(error) => {
					console.error('下载失败：', error);
					this.downloadStatus = 'error';
					this.errorMessage = error.message || '未知错误';
					
					uni.showToast({
						title: '下载失败',
						icon: 'none',
						duration: 2000
					});
				}
			);
		},
		
		/**
		 * 取消下载
		 */
		cancelDownload() {
			if (this.downloadTask) {
				this.downloadTask.abort();
				this.downloadTask = null;
			}
			
			this.downloadStatus = 'idle';
			this.downloadProgress = 0;
			
			uni.showToast({
				title: '已取消下载',
				icon: 'none'
			});
		},
		
		/**
		 * 重试下载
		 */
		retryDownload() {
			this.doDownload();
		},
		
		/**
		 * 重新下载模型
		 */
		redownloadModel() {
			uni.showModal({
				title: '确认',
				content: '确定要重新下载模型吗？',
				success: async (res) => {
					if (res.confirm) {
						try {
							// 删除旧模型
							await modelDownloader.deleteModel();
							
							// 重置状态
							this.modelReady = false;
							this.downloadStatus = 'idle';
							
							uni.showToast({
								title: '请重新下载',
								icon: 'none'
							});
						} catch (e) {
							console.error('删除模型失败：', e);
						}
					}
				}
			});
		},
		
		/**
		 * 开始语音识别
		 */
		startSpeech() {
			if (!this.modelReady) {
				uni.showToast({
					title: '模型未就绪',
					icon: 'none'
				});
				return;
			}
			
			// 调用语音识别插件
			// 传入模型路径：this.modelPath
			console.log('使用模型路径：', this.modelPath);
			
			// 原来的语音识别代码
			// ...
		}
	}
}
</script>

<style scoped>
.container {
	padding: 30rpx;
}

.download-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: 40rpx;
}

.download-header {
	margin-bottom: 30rpx;
}

.title {
	font-size: 36rpx;
	font-weight: bold;
	color: #333;
}

.idle-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20rpx;
}

.tip {
	font-size: 28rpx;
	color: #666;
	margin-top: 20rpx;
}

.size {
	font-size: 32rpx;
	color: #07c160;
	font-weight: bold;
}

.wifi-tip {
	font-size: 24rpx;
	color: #999;
}

.download-btn {
	margin-top: 40rpx;
	width: 300rpx;
}

.downloading-state {
	width: 100%;
	display: flex;
	flex-direction: column;
	gap: 20rpx;
}

.progress-text {
	font-size: 28rpx;
	color: #333;
	text-align: center;
}

.speed-text,
.size-text {
	font-size: 24rpx;
	color: #666;
	text-align: center;
}

.cancel-btn {
	margin-top: 20rpx;
}

.error-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 20rpx;
}

.error-text {
	font-size: 28rpx;
	color: #ff0000;
}

.retry-btn {
	width: 300rpx;
}

.speech-container {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 30rpx;
}

.ready-text {
	font-size: 32rpx;
	color: #07c160;
	font-weight: bold;
}

.settings {
	margin-top: 50rpx;
}
</style>

✅ 优势说明

1. 用户体验好

✅ 首次下载有进度显示
✅ 显示下载速度和剩余大小
✅ 移动网络下有流量提醒
✅ 可以取消和重试

2. 技术可靠

✅ uni-app 官方 API 支持
✅ 支持大文件下载（GB级别）
✅ 自动处理文件保存
✅ 支持断点续传（需服务器配合）

3. 易于维护

✅ 模型可以随时更新
✅ 不需要重新打包APP
✅ 可以支持多个模型版本
✅ 用户可以手动重新下载

📊 效果对比

方案	APK大小	首次启动	更新模型	推荐度
打包方式	~100MB	即用	需重新打包	⭐⭐
运行时下载	~58MB	需下载1分钟	直接更新	⭐⭐⭐⭐⭐
自定义基座	~100MB	即用	需重新打包	⭐⭐⭐

🚀 实施步骤

1. 模型文件已移除 ✅

vosk-model-small-cn-0.22.zip 已移动到桌面

2. 下载管理器已创建 ✅

utils/modelDownloader.js

3. 上传模型到服务器

将 vosk-model-small-cn-0.22.zip 上传到：
https://app.liuyingyong.cn/static/vosk-model-small-cn-0.22.zip

4. 修改语音页面

参考上面的示例代码
修改 pages/speech/speech.vue

5. 测试

1. 打包APK（现在可以打包了，大小约58MB）
2. 安装到手机
3. 打开语音页面
4. 点击"开始下载"
5. 等待下载完成
6. 测试语音识别功能

⚠️ 注意事项

服务器要求

支持大文件下载
- 确保服务器允许下载42MB文件
- 设置合适的超时时间
HTTPS支持
- iOS必须使用HTTPS
- Android建议使用HTTPS
CDN加速（可选）
- 使用CDN可以提升下载速度
- 减轻服务器压力

APP权限

确保manifest.json中有存储权限：

{
  "permissions": {
    "WRITE_EXTERNAL_STORAGE": {},
    "READ_EXTERNAL_STORAGE": {}
  }
}

🎯 现在可以做什么？

方案A：先打包测试（推荐） ⭐⭐⭐⭐⭐

✅ 模型已移除，现在可以打包
✅ 打包后测试除语音外的功能
⏰ 后续实施运行时下载

方案B：立即实施运行时下载

上传模型到服务器
按照示例修改speech.vue
打包测试完整功能

📞 需要帮助？

如果您选择方案B，我可以：

帮您修改 pages/speech/speech.vue
检查服务器配置
提供测试建议

总结：完全可以运行时下载！建议先打包测试，后续再实施下载功能。 ✅

10 KiB Raw Blame History Unescape Escape

运行时下载模型 - 完整实现示例

✅ 确认：完全可以实现！

📁 文件清单

🎯 在语音页面中使用

完整代码示例

✅ 优势说明

1. 用户体验好

2. 技术可靠

3. 易于维护

📊 效果对比

🚀 实施步骤

1. 模型文件已移除 ✅

2. 下载管理器已创建 ✅

3. 上传模型到服务器

4. 修改语音页面

5. 测试

⚠️ 注意事项

服务器要求

APP权限

🎯 现在可以做什么？

方案A：先打包测试（推荐） ⭐⭐⭐⭐⭐

方案B：立即实施运行时下载

📞 需要帮助？

10 KiB

Raw Blame History