fix: 修复 OmniHuman 主体识别图片上传问题

问题修复:
-  修复本地文件路径无法被火山云 API 识别的问题
-  添加图片先上传到云端再调用识别 API 的完整流程
-  集成 fileUploadService 实现图片云端上传
-  添加上传进度显示,提升用户体验

技术改进:
- 使用 fileUploadService.uploadFileToCloud() 上传图片
- 获取云端 URL 后调用火山云识别 API
- 添加详细的进度反馈 (上传 60% + 识别 40%)
- 完善错误处理,区分上传失败和识别失败

现在用户可以正常使用 OmniHuman 主体识别功能了!
This commit is contained in:
imeepos 2025-08-05 18:25:10 +08:00
parent c196659869
commit 4ce50b15d7
1 changed files with 24 additions and 7 deletions

View File

@ -12,12 +12,14 @@ import {
import { open } from '@tauri-apps/plugin-dialog'; import { open } from '@tauri-apps/plugin-dialog';
import { useNotifications } from '../../components/NotificationSystem'; import { useNotifications } from '../../components/NotificationSystem';
import videoGenerationService from '../../services/videoGenerationService'; import videoGenerationService from '../../services/videoGenerationService';
import fileUploadService from '../../services/fileUploadService';
import { RealmanAvatarPictureCreateRoleOmniResponse } from '../../types/videoGeneration'; import { RealmanAvatarPictureCreateRoleOmniResponse } from '../../types/videoGeneration';
const OmniHumanDetectionTool: React.FC = () => { const OmniHumanDetectionTool: React.FC = () => {
const [selectedImage, setSelectedImage] = useState<string>(''); const [selectedImage, setSelectedImage] = useState<string>('');
const [imagePreview, setImagePreview] = useState<string>(''); const [imagePreview, setImagePreview] = useState<string>('');
const [isProcessing, setIsProcessing] = useState(false); const [isProcessing, setIsProcessing] = useState(false);
const [uploadProgress, setUploadProgress] = useState(0);
const [result, setResult] = useState<RealmanAvatarPictureCreateRoleOmniResponse | null>(null); const [result, setResult] = useState<RealmanAvatarPictureCreateRoleOmniResponse | null>(null);
const [errorMessage, setErrorMessage] = useState<string>(''); const [errorMessage, setErrorMessage] = useState<string>('');
@ -63,14 +65,29 @@ const OmniHumanDetectionTool: React.FC = () => {
setIsProcessing(true); setIsProcessing(true);
setErrorMessage(''); setErrorMessage('');
setResult(null); setResult(null);
setUploadProgress(0);
try { try {
// 这里需要先上传图片到云端获取URL // 1. 先上传图片到云端
// 为了演示,我们假设图片已经上传到云端 setUploadProgress(10);
const imageUrl = selectedImage; // 实际应用中需要上传到云端 const uploadResult = await fileUploadService.uploadFileToCloud(
selectedImage,
undefined,
(progress) => {
setUploadProgress(10 + progress * 0.6); // 上传占 60% 进度
}
);
const response = await videoGenerationService.realmanAvatarPictureCreateRoleOmniSubmitTask(imageUrl); if (uploadResult.status !== 'success' || !uploadResult.url) {
throw new Error(uploadResult.error || '图片上传失败');
}
setUploadProgress(70);
// 2. 使用云端 URL 调用识别 API
const response = await videoGenerationService.realmanAvatarPictureCreateRoleOmniSubmitTask(uploadResult.url);
setUploadProgress(100);
setResult(response); setResult(response);
if (response.code === 10000) { if (response.code === 10000) {
@ -178,7 +195,7 @@ const OmniHumanDetectionTool: React.FC = () => {
) : ( ) : (
<User className="w-4 h-4" /> <User className="w-4 h-4" />
)} )}
{isProcessing ? '识别中...' : '开始识别'} {isProcessing ? `处理中... ${uploadProgress}%` : '开始识别'}
</button> </button>
</div> </div>