fix: 修复 OmniHuman 主体识别图片上传问题
问题修复: - 修复本地文件路径无法被火山云 API 识别的问题 - 添加图片先上传到云端再调用识别 API 的完整流程 - 集成 fileUploadService 实现图片云端上传 - 添加上传进度显示,提升用户体验 技术改进: - 使用 fileUploadService.uploadFileToCloud() 上传图片 - 获取云端 URL 后调用火山云识别 API - 添加详细的进度反馈 (上传 60% + 识别 40%) - 完善错误处理,区分上传失败和识别失败 现在用户可以正常使用 OmniHuman 主体识别功能了!
This commit is contained in:
parent
c196659869
commit
4ce50b15d7
|
|
@ -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>
|
||||||
|
|
||||||
|
|
|
||||||
Loading…
Reference in New Issue