feat(friends-photo): add Friends Photo page with image upload and AI generation functionality
- Introduced a new page for generating a combined photo from two uploaded images. - Implemented image upload logic with audit handling and user feedback. - Added CSS styles for the new page layout and components. - Updated app configuration to include the new Friends Photo page in the navigation.
This commit is contained in:
iHeyTang
@@ -3,6 +3,7 @@ export default defineAppConfig({
|
||||
'pages/home/index', // 新的模板卡片首页
|
||||
'pages/history/index', // 历史记录页面
|
||||
'pages/result/index',
|
||||
'pages/friends-photo/index', // 好友合照页面
|
||||
],
|
||||
tabBar: {
|
||||
color: '#8E9BAE',
|
||||
|
||||
5
src/pages/friends-photo/index.config.ts
Normal file
5
src/pages/friends-photo/index.config.ts
Normal file
@@ -0,0 +1,5 @@
|
||||
export default definePageConfig({
|
||||
navigationBarTitleText: '好友合照',
|
||||
enableShareAppMessage: true,
|
||||
enableShareTimeline: true,
|
||||
});
|
||||
427
src/pages/friends-photo/index.css
Normal file
427
src/pages/friends-photo/index.css
Normal file
@@ -0,0 +1,427 @@
|
||||
/* 页面容器 */
|
||||
.friends-photo {
|
||||
height: 100vh;
|
||||
background: #f5f6f8;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
/* 滚动容器 */
|
||||
.friends-photo-scroll {
|
||||
flex: 1;
|
||||
height: 100%;
|
||||
padding-bottom: 100px; /* 为固定底部按钮留空间 */
|
||||
}
|
||||
|
||||
/* 介绍卡片 */
|
||||
.intro-card {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
margin: 20px;
|
||||
border-radius: 20px;
|
||||
padding: 24px;
|
||||
box-shadow: 0 8px 32px rgba(102, 126, 234, 0.3);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.intro-card::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
right: -50%;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
|
||||
border-radius: 50%;
|
||||
}
|
||||
|
||||
.intro-content {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
.intro-icon {
|
||||
font-size: 36px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 16px;
|
||||
padding: 12px;
|
||||
backdrop-filter: blur(10px);
|
||||
border: 1px solid rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
.intro-text {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.intro-title {
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: white;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.intro-subtitle {
|
||||
font-size: 14px;
|
||||
color: rgba(255, 255, 255, 0.9);
|
||||
line-height: 1.4;
|
||||
}
|
||||
|
||||
/* 上传区域 */
|
||||
.upload-section {
|
||||
padding: 0 20px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
/* 上传卡片 */
|
||||
.upload-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
overflow: hidden;
|
||||
transition: all 0.3s ease;
|
||||
}
|
||||
|
||||
.upload-card:active {
|
||||
transform: scale(0.98);
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.12);
|
||||
}
|
||||
|
||||
.upload-card-content {
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
/* 上传信息 */
|
||||
.upload-info {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.upload-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1d1f22;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.upload-description {
|
||||
font-size: 14px;
|
||||
color: #8e9bae;
|
||||
}
|
||||
|
||||
/* 上传区域 */
|
||||
.upload-area {
|
||||
width: 100%;
|
||||
height: 160px;
|
||||
border: 2px dashed #e5e7eb;
|
||||
border-radius: 12px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
background: #fafbfc;
|
||||
transition: all 0.3s ease;
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.upload-area:active {
|
||||
transform: scale(0.98);
|
||||
}
|
||||
|
||||
.upload-area.has-image {
|
||||
border: 2px solid #3b82f6;
|
||||
background: transparent;
|
||||
}
|
||||
|
||||
/* 上传占位符 */
|
||||
.upload-placeholder {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.upload-icon {
|
||||
font-size: 32px;
|
||||
color: #8e9bae;
|
||||
}
|
||||
|
||||
.upload-hint {
|
||||
font-size: 14px;
|
||||
color: #8e9bae;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 上传的图片 */
|
||||
.upload-image {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
object-fit: cover;
|
||||
border-radius: 10px;
|
||||
}
|
||||
|
||||
/* 图片覆盖层 */
|
||||
.image-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s ease;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.upload-area.has-image:active .image-overlay {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.overlay-content {
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
|
||||
.change-icon {
|
||||
font-size: 24px;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.change-text {
|
||||
color: white;
|
||||
font-size: 14px;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
/* 预览卡片 */
|
||||
.preview-card {
|
||||
background: white;
|
||||
margin: 24px 20px 0;
|
||||
border-radius: 16px;
|
||||
padding: 20px;
|
||||
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
|
||||
animation: slideUp 0.3s ease-out;
|
||||
}
|
||||
|
||||
@keyframes slideUp {
|
||||
from {
|
||||
opacity: 0;
|
||||
transform: translateY(20px);
|
||||
}
|
||||
to {
|
||||
opacity: 1;
|
||||
transform: translateY(0);
|
||||
}
|
||||
}
|
||||
|
||||
.preview-header {
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.preview-title {
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
color: #1d1f22;
|
||||
margin-bottom: 4px;
|
||||
}
|
||||
|
||||
.preview-subtitle {
|
||||
font-size: 14px;
|
||||
color: #8e9bae;
|
||||
}
|
||||
|
||||
/* 预览网格 */
|
||||
.preview-grid {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 16px;
|
||||
}
|
||||
|
||||
.preview-item {
|
||||
flex: 1;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.preview-image {
|
||||
width: 100%;
|
||||
aspect-ratio: 1;
|
||||
object-fit: cover;
|
||||
border-radius: 12px;
|
||||
box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
|
||||
}
|
||||
|
||||
.preview-label {
|
||||
position: absolute;
|
||||
bottom: 8px;
|
||||
left: 8px;
|
||||
background: rgba(0, 0, 0, 0.7);
|
||||
color: white;
|
||||
font-size: 12px;
|
||||
font-weight: 500;
|
||||
padding: 4px 8px;
|
||||
border-radius: 6px;
|
||||
backdrop-filter: blur(4px);
|
||||
}
|
||||
|
||||
.preview-connector {
|
||||
font-size: 20px;
|
||||
font-weight: bold;
|
||||
color: #3b82f6;
|
||||
background: rgba(59, 130, 246, 0.1);
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
border-radius: 50%;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
/* 底部间距 */
|
||||
.bottom-spacer {
|
||||
height: 20px;
|
||||
}
|
||||
|
||||
/* 提交区域 */
|
||||
.submit-section {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
padding: 20px;
|
||||
background: white;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.08);
|
||||
backdrop-filter: blur(10px);
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
/* 提交按钮 */
|
||||
.submit-button {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
background: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
|
||||
border-radius: 28px;
|
||||
border: none;
|
||||
color: white;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
gap: 8px;
|
||||
transition: all 0.3s ease;
|
||||
box-shadow: 0 6px 24px rgba(59, 130, 246, 0.4);
|
||||
position: relative;
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.submit-button::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
top: -50%;
|
||||
left: -50%;
|
||||
width: 200%;
|
||||
height: 200%;
|
||||
background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.2), transparent);
|
||||
transform: rotate(45deg);
|
||||
transition: transform 0.6s ease;
|
||||
}
|
||||
|
||||
.submit-button:not(.disabled):active::before {
|
||||
transform: rotate(45deg) translateX(100%);
|
||||
}
|
||||
|
||||
.submit-button.disabled {
|
||||
background: #d1d5db;
|
||||
box-shadow: none;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.submit-button:not(.disabled):active {
|
||||
transform: translateY(2px);
|
||||
box-shadow: 0 3px 16px rgba(59, 130, 246, 0.4);
|
||||
}
|
||||
|
||||
.submit-icon {
|
||||
font-size: 18px;
|
||||
}
|
||||
|
||||
.submit-text {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
/* 加载动画 */
|
||||
.loading-spinner {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
border: 2px solid rgba(255, 255, 255, 0.3);
|
||||
border-top: 2px solid white;
|
||||
border-radius: 50%;
|
||||
animation: spin 1s linear infinite;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% {
|
||||
transform: rotate(0deg);
|
||||
}
|
||||
100% {
|
||||
transform: rotate(360deg);
|
||||
}
|
||||
}
|
||||
|
||||
/* 响应式适配 */
|
||||
@media (max-width: 375px) {
|
||||
.intro-card {
|
||||
margin: 16px;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.upload-section {
|
||||
padding: 0 16px;
|
||||
}
|
||||
|
||||
.preview-card {
|
||||
margin: 20px 16px 0;
|
||||
}
|
||||
|
||||
.submit-section {
|
||||
padding: 16px;
|
||||
}
|
||||
}
|
||||
|
||||
/* 深色模式适配 */
|
||||
@media (prefers-color-scheme: dark) {
|
||||
.friends-photo {
|
||||
background: #1a1a1a;
|
||||
}
|
||||
|
||||
.upload-card,
|
||||
.preview-card {
|
||||
background: #2a2a2a;
|
||||
border: 1px solid #333;
|
||||
}
|
||||
|
||||
.upload-title {
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.upload-description {
|
||||
color: #999;
|
||||
}
|
||||
|
||||
.upload-area {
|
||||
background: #333;
|
||||
border-color: #444;
|
||||
}
|
||||
|
||||
.submit-section {
|
||||
background: #2a2a2a;
|
||||
border-color: #333;
|
||||
}
|
||||
}
|
||||
322
src/pages/friends-photo/index.tsx
Normal file
322
src/pages/friends-photo/index.tsx
Normal file
@@ -0,0 +1,322 @@
|
||||
import { View, Image, Button, ScrollView } from '@tarojs/components';
|
||||
import { useState, useEffect } from 'react';
|
||||
import Taro, { navigateTo } from '@tarojs/taro';
|
||||
import { useSdk, useServerSdk } from '../../hooks/index';
|
||||
import { useImageDetectionTaskManager, ImageAuditResult, AuditConclusion } from '../../hooks/useImageDetectionTaskManager';
|
||||
|
||||
import './index.css';
|
||||
|
||||
// 好友合照模板的固定代码
|
||||
const FRIENDS_PHOTO_TEMPLATE_CODE = 'friends_photo';
|
||||
|
||||
export default function FriendsPhoto() {
|
||||
const sdk = useSdk();
|
||||
const serverSdk = useServerSdk();
|
||||
const { submitAuditTask } = useImageDetectionTaskManager();
|
||||
|
||||
const [image1, setImage1] = useState<string>('');
|
||||
const [image2, setImage2] = useState<string>('');
|
||||
const [loading, setLoading] = useState(false);
|
||||
const [showGuide, setShowGuide] = useState(true);
|
||||
|
||||
// 显示使用指南
|
||||
useEffect(() => {
|
||||
if (!showGuide) return;
|
||||
|
||||
const timer = setTimeout(() => {
|
||||
Taro.showModal({
|
||||
title: '使用小贴士',
|
||||
content: '• 选择清晰的人脸照片效果更佳\n• 建议选择光线充足的照片\n• 支持JPG、PNG格式',
|
||||
confirmText: '我知道了',
|
||||
showCancel: false,
|
||||
success: () => {
|
||||
setShowGuide(false);
|
||||
}
|
||||
});
|
||||
}, 1000);
|
||||
|
||||
return () => clearTimeout(timer);
|
||||
}, [showGuide]);
|
||||
|
||||
// 处理审核失败
|
||||
const handleAuditFailure = (auditResult: ImageAuditResult) => {
|
||||
const messages: Record<AuditConclusion, string> = {
|
||||
[AuditConclusion.REJECT]: '图片内容不符合规范，请重新选择符合规范的图片',
|
||||
[AuditConclusion.REVIEW]: '图片需要人工审核，请稍后重试或更换其他图片',
|
||||
[AuditConclusion.UNCERTAIN]: '图片审核结果不确定，请重新选择图片',
|
||||
[AuditConclusion.PASS]: '图片审核通过',
|
||||
};
|
||||
|
||||
const message = auditResult.conclusion ? messages[auditResult.conclusion] : '图片审核失败，请重新选择图片';
|
||||
|
||||
Taro.showModal({
|
||||
title: '图片审核未通过',
|
||||
content: message,
|
||||
confirmText: '我知道了',
|
||||
showCancel: false,
|
||||
});
|
||||
};
|
||||
|
||||
// 上传单张图片
|
||||
const uploadSingleImage = async (imageIndex: 1 | 2) => {
|
||||
try {
|
||||
// 添加触觉反馈
|
||||
Taro.vibrateShort();
|
||||
|
||||
Taro.showLoading({
|
||||
title: '选择图片中...',
|
||||
mask: true,
|
||||
});
|
||||
|
||||
const imageUrl = await sdk.chooseAndUploadImage({
|
||||
count: 1,
|
||||
onImageSelected: () => {
|
||||
Taro.showLoading({
|
||||
title: '正在上传...',
|
||||
mask: true,
|
||||
});
|
||||
},
|
||||
onProgress: () => {
|
||||
Taro.showLoading({
|
||||
title: '上传中...',
|
||||
mask: true,
|
||||
});
|
||||
},
|
||||
});
|
||||
|
||||
// 审核图片
|
||||
const auditResult = await new Promise<ImageAuditResult>((resolve, reject) => {
|
||||
submitAuditTask(
|
||||
{
|
||||
imageUrl,
|
||||
options: {
|
||||
enableCache: true,
|
||||
timeout: 30000,
|
||||
},
|
||||
},
|
||||
(status, progress) => {
|
||||
console.log('审核进度:', status, progress);
|
||||
},
|
||||
result => {
|
||||
console.log('审核成功:', result);
|
||||
resolve(result);
|
||||
},
|
||||
error => {
|
||||
console.error('审核失败:', error);
|
||||
reject(error);
|
||||
}
|
||||
);
|
||||
});
|
||||
|
||||
Taro.hideLoading();
|
||||
|
||||
if (auditResult.conclusion === AuditConclusion.PASS) {
|
||||
if (imageIndex === 1) {
|
||||
setImage1(imageUrl);
|
||||
} else {
|
||||
setImage2(imageUrl);
|
||||
}
|
||||
|
||||
// 成功反馈
|
||||
Taro.vibrateShort();
|
||||
Taro.showToast({
|
||||
title: `图片${imageIndex}上传成功`,
|
||||
icon: 'success',
|
||||
duration: 1500,
|
||||
});
|
||||
} else {
|
||||
handleAuditFailure(auditResult);
|
||||
}
|
||||
} catch (error: any) {
|
||||
Taro.hideLoading();
|
||||
|
||||
// 用户取消选择图片，不显示错误提示
|
||||
if (error.errMsg && error.errMsg.includes('chooseImage:fail cancel')) {
|
||||
return;
|
||||
}
|
||||
|
||||
// 提供更详细的错误提示
|
||||
let errorTitle = '图片上传失败';
|
||||
if (error?.message) {
|
||||
errorTitle = error.message;
|
||||
} else if (error?.errMsg) {
|
||||
if (error.errMsg.includes('chooseImage:fail auth')) {
|
||||
errorTitle = '需要授权访问相册';
|
||||
} else if (error.errMsg.includes('timeout')) {
|
||||
errorTitle = '上传超时，请重试';
|
||||
} else if (error.errMsg.includes('network')) {
|
||||
errorTitle = '网络连接失败';
|
||||
} else {
|
||||
errorTitle = '图片上传失败，请重试';
|
||||
}
|
||||
}
|
||||
|
||||
Taro.showToast({
|
||||
title: errorTitle,
|
||||
icon: 'error',
|
||||
duration: 3000,
|
||||
});
|
||||
|
||||
console.error('图片上传详细错误:', error);
|
||||
}
|
||||
};
|
||||
|
||||
// 提交处理
|
||||
const handleSubmit = async () => {
|
||||
if (!image1 || !image2) {
|
||||
Taro.vibrateShort();
|
||||
Taro.showToast({
|
||||
title: '请先上传两张图片',
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
// 提交时的触觉反馈
|
||||
Taro.vibrateShort();
|
||||
setLoading(true);
|
||||
|
||||
try {
|
||||
Taro.showLoading({
|
||||
title: 'AI正在生成中...',
|
||||
mask: true,
|
||||
});
|
||||
|
||||
// 将两个图片URL用逗号分隔
|
||||
const combinedImageUrl = `${image1},${image2}`;
|
||||
|
||||
const taskId = await serverSdk.executeTemplate({
|
||||
imageUrl: combinedImageUrl,
|
||||
templateCode: FRIENDS_PHOTO_TEMPLATE_CODE,
|
||||
});
|
||||
|
||||
Taro.hideLoading();
|
||||
|
||||
// 跳转到结果页面
|
||||
navigateTo({
|
||||
url: `/pages/result/index?taskId=${taskId}&templateCode=${FRIENDS_PHOTO_TEMPLATE_CODE}`,
|
||||
});
|
||||
} catch (error) {
|
||||
Taro.hideLoading();
|
||||
console.error('提交失败:', error);
|
||||
|
||||
Taro.showToast({
|
||||
title: '请等待生成中的任务完成后再尝试',
|
||||
icon: 'none',
|
||||
duration: 2000,
|
||||
});
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const renderUploadCard = (imageIndex: 1 | 2, imageUrl: string, title: string, description: string) => (
|
||||
<View className="upload-card">
|
||||
<View className="upload-card-content">
|
||||
<View className="upload-info">
|
||||
<View className="upload-title">{title}</View>
|
||||
<View className="upload-description">{description}</View>
|
||||
</View>
|
||||
<View
|
||||
className={`upload-area ${imageUrl ? 'has-image' : ''}`}
|
||||
onClick={() => uploadSingleImage(imageIndex)}
|
||||
>
|
||||
{imageUrl ? (
|
||||
<>
|
||||
<Image src={imageUrl} className="upload-image" mode="aspectFill" />
|
||||
<View className="image-overlay">
|
||||
<View className="overlay-content">
|
||||
<View className="change-icon">🔄</View>
|
||||
<View className="change-text">点击更换</View>
|
||||
</View>
|
||||
</View>
|
||||
</>
|
||||
) : (
|
||||
<View className="upload-placeholder">
|
||||
<View className="upload-icon">📷</View>
|
||||
<View className="upload-hint">点击上传</View>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
return (
|
||||
<View className="friends-photo">
|
||||
<ScrollView
|
||||
className="friends-photo-scroll"
|
||||
scrollY
|
||||
enhanced
|
||||
showScrollbar={false}
|
||||
enablePassive
|
||||
bounces
|
||||
>
|
||||
{/* 顶部介绍卡片 */}
|
||||
<View className="intro-card">
|
||||
<View className="intro-content">
|
||||
<View className="intro-icon">👫</View>
|
||||
<View className="intro-text">
|
||||
<View className="intro-title">好友合照生成</View>
|
||||
<View className="intro-subtitle">
|
||||
上传两张照片，AI将为你们生成精彩的合照视频
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 上传区域 */}
|
||||
<View className="upload-section">
|
||||
{renderUploadCard(1, image1, "第一张照片", "选择你的照片")}
|
||||
{renderUploadCard(2, image2, "第二张照片", "选择朋友的照片")}
|
||||
</View>
|
||||
|
||||
{/* 预览区域 */}
|
||||
{image1 && image2 && (
|
||||
<View className="preview-card">
|
||||
<View className="preview-header">
|
||||
<View className="preview-title">📸 照片预览</View>
|
||||
<View className="preview-subtitle">确认无误后即可开始生成</View>
|
||||
</View>
|
||||
<View className="preview-grid">
|
||||
<View className="preview-item">
|
||||
<Image src={image1} className="preview-image" mode="aspectFill" />
|
||||
<View className="preview-label">照片 1</View>
|
||||
</View>
|
||||
<View className="preview-connector">+</View>
|
||||
<View className="preview-item">
|
||||
<Image src={image2} className="preview-image" mode="aspectFill" />
|
||||
<View className="preview-label">照片 2</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
)}
|
||||
|
||||
{/* 底部间距 */}
|
||||
<View className="bottom-spacer" />
|
||||
</ScrollView>
|
||||
|
||||
{/* 固定底部按钮 */}
|
||||
<View className="submit-section">
|
||||
<Button
|
||||
className={`submit-button ${(!image1 || !image2 || loading) ? 'disabled' : ''}`}
|
||||
disabled={!image1 || !image2 || loading}
|
||||
onClick={handleSubmit}
|
||||
>
|
||||
{loading ? (
|
||||
<>
|
||||
<View className="loading-spinner" />
|
||||
<View className="submit-text">生成中...</View>
|
||||
</>
|
||||
) : (
|
||||
<>
|
||||
<View className="submit-icon">✨</View>
|
||||
<View className="submit-text">开始生成合照</View>
|
||||
</>
|
||||
)}
|
||||
</Button>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
import { View, ScrollView, Canvas } from '@tarojs/components';
|
||||
import { View, ScrollView } from '@tarojs/components';
|
||||
import { useEffect, useState } from 'react';
|
||||
import Taro, { navigateTo } from '@tarojs/taro';
|
||||
import { useAppDispatch, useAppSelector } from '../../hooks/redux';
|
||||
@@ -90,9 +90,15 @@ export default function Home() {
|
||||
};
|
||||
|
||||
const handleTemplateClick = async (template: Template) => {
|
||||
// 如果是好友合照，跳转到专门的页面
|
||||
if (template.name === '好友合照') {
|
||||
navigateTo({ url: `/pages/friends-photo/index` });
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 第一步：选择并上传图片
|
||||
const imageCount = template.templateType === '2image-to-video' ? 2 : 1;
|
||||
const imageCount = 1;
|
||||
const imageUrl = await sdk.chooseAndUploadImage({
|
||||
count: imageCount,
|
||||
onImageSelected: () => {
|
||||
|
||||
@@ -1,3 +1,4 @@
|
||||
import { PlatformFactory } from "../platforms/factory";
|
||||
import Taro from "@tarojs/taro"
|
||||
|
||||
/**
|
||||
@@ -51,7 +52,7 @@ interface ImageToVideoParams {
|
||||
}
|
||||
|
||||
export function isGetFileInfoSuccessCallbackResult(val: any): val is Taro.getFileInfo.SuccessCallbackResult {
|
||||
return val && Reflect.has(val, 'digest')
|
||||
return val && typeof val.size === 'number' && !val.errMsg
|
||||
}
|
||||
|
||||
/**
|
||||
@@ -74,11 +75,25 @@ export class BowongAISDK {
|
||||
const url = `${this.baseUrl}/api/file/upload/s3`;
|
||||
|
||||
try {
|
||||
// 获取文件信息
|
||||
const fileInfo = await Taro.getFileInfo({ filePath });
|
||||
if (!isGetFileInfoSuccessCallbackResult(fileInfo)) {
|
||||
throw new Error(fileInfo.errMsg)
|
||||
// 检测环境并使用不同的上传策略
|
||||
if (PlatformFactory.detectPlatform() === 'h5') {
|
||||
return await this._uploadForH5(params);
|
||||
}
|
||||
|
||||
// 小程序环境的原有逻辑
|
||||
// 获取文件信息
|
||||
let fileInfo;
|
||||
try {
|
||||
fileInfo = await Taro.getFileInfo({ filePath });
|
||||
if (!isGetFileInfoSuccessCallbackResult(fileInfo)) {
|
||||
console.warn('获取文件信息失败，使用默认值:', fileInfo.errMsg);
|
||||
fileInfo = { size: 0 };
|
||||
}
|
||||
} catch (getFileInfoError) {
|
||||
console.warn('getFileInfo调用失败，使用默认值:', getFileInfoError);
|
||||
fileInfo = { size: 0 };
|
||||
}
|
||||
|
||||
// 自动生成文件名（如果未提供）
|
||||
const fileName = name || `upload_${Date.now()}.${this._getFileExtension(filePath)}`;
|
||||
|
||||
@@ -138,8 +153,105 @@ export class BowongAISDK {
|
||||
console.log('文件上传成功:', result.data);
|
||||
return result.data;
|
||||
|
||||
} catch (error) {
|
||||
} catch (error: any) {
|
||||
console.error('文件上传失败:', error);
|
||||
|
||||
// 提供更详细的错误信息
|
||||
let errorMessage = '文件上传失败';
|
||||
if (error?.errMsg) {
|
||||
if (error.errMsg.includes('timeout')) {
|
||||
errorMessage = '上传超时，请检查网络连接';
|
||||
} else if (error.errMsg.includes('network')) {
|
||||
errorMessage = '网络连接失败，请检查网络';
|
||||
} else if (error.errMsg.includes('size')) {
|
||||
errorMessage = '文件过大，请选择较小的图片';
|
||||
} else if (error.errMsg.includes('cors') || error.errMsg.includes('CORS')) {
|
||||
errorMessage = 'H5环境跨域错误，请联系开发者';
|
||||
} else {
|
||||
errorMessage = `上传失败: ${error.errMsg}`;
|
||||
}
|
||||
} else if (error?.message) {
|
||||
if (error.message.includes('cors') || error.message.includes('CORS')) {
|
||||
errorMessage = 'H5环境跨域错误，请联系开发者';
|
||||
} else {
|
||||
errorMessage = error.message;
|
||||
}
|
||||
}
|
||||
|
||||
throw new Error(errorMessage);
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* H5环境专用上传方法
|
||||
* @private
|
||||
*/
|
||||
private async _uploadForH5(params: UploadParams): Promise<string> {
|
||||
const { filePath, name, type } = params;
|
||||
const url = `${this.baseUrl}/api/file/upload/s3`;
|
||||
|
||||
try {
|
||||
// H5环境中，filePath实际上是File对象或Blob URL
|
||||
let file: File;
|
||||
|
||||
if (typeof filePath === 'string') {
|
||||
// 如果是blob URL，需要先获取blob
|
||||
const response = await fetch(filePath);
|
||||
const blob = await response.blob();
|
||||
const fileName = name || `upload_${Date.now()}.${this._getFileExtension(filePath)}`;
|
||||
file = new File([blob], fileName, { type: type || blob.type });
|
||||
} else if (filePath && typeof filePath === 'object' && 'name' in filePath && 'size' in filePath && 'type' in filePath) {
|
||||
file = filePath as File;
|
||||
} else {
|
||||
throw new Error('H5环境下文件路径格式不正确');
|
||||
}
|
||||
|
||||
// 创建FormData
|
||||
const formData = new FormData();
|
||||
formData.append('file', file);
|
||||
formData.append('filename', file.name);
|
||||
formData.append('type', file.type);
|
||||
|
||||
console.log('H5环境开始上传文件:', {
|
||||
fileName: file.name,
|
||||
fileSize: file.size,
|
||||
fileType: file.type
|
||||
});
|
||||
|
||||
// 使用fetch API上传，添加CORS支持
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'Accept': 'application/json',
|
||||
// 不要手动设置Content-Type，让浏览器自动设置multipart/form-data边界
|
||||
},
|
||||
mode: 'cors', // 明确指定CORS模式
|
||||
credentials: 'omit' // 不发送cookie
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: 文件上传失败`);
|
||||
}
|
||||
|
||||
const result = await response.json() as ApiResponse<string>;
|
||||
|
||||
// 检查业务状态码
|
||||
if (!result.status) {
|
||||
throw new Error(result.msg || '文件上传失败');
|
||||
}
|
||||
|
||||
console.log('H5环境文件上传成功:', result.data);
|
||||
return result.data;
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('H5环境文件上传失败:', error);
|
||||
|
||||
// 特殊处理CORS错误
|
||||
if (error.name === 'TypeError' && error.message.includes('fetch')) {
|
||||
throw new Error('网络错误：可能是CORS问题，请确保服务器支持跨域请求');
|
||||
}
|
||||
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
@@ -203,14 +315,14 @@ export class BowongAISDK {
|
||||
|
||||
} catch (error) {
|
||||
console.error('选择并上传图片失败:', error);
|
||||
|
||||
|
||||
// 检查是否是授权被拒绝的错误
|
||||
if (this._isAuthorizationError(error)) {
|
||||
await this._handleAuthorizationError();
|
||||
// 用户重新授权后，递归调用自己重试
|
||||
return this.chooseAndUploadImage(options);
|
||||
}
|
||||
|
||||
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
@@ -223,10 +335,10 @@ export class BowongAISDK {
|
||||
if (!error || typeof error.errMsg !== 'string') {
|
||||
return false;
|
||||
}
|
||||
|
||||
|
||||
const errMsg = error.errMsg.toLowerCase();
|
||||
return errMsg.includes('auth') ||
|
||||
errMsg.includes('permission') ||
|
||||
return errMsg.includes('auth') ||
|
||||
errMsg.includes('permission') ||
|
||||
errMsg.includes('denied') ||
|
||||
errMsg.includes('authorize') ||
|
||||
errMsg.includes('scope');
|
||||
@@ -251,8 +363,8 @@ export class BowongAISDK {
|
||||
success: (settingResult) => {
|
||||
console.log('用户设置结果:', settingResult);
|
||||
// 检查是否授权了相册权限
|
||||
if (settingResult.authSetting &&
|
||||
(settingResult.authSetting['scope.writePhotosAlbum'] ||
|
||||
if (settingResult.authSetting &&
|
||||
(settingResult.authSetting['scope.writePhotosAlbum'] ||
|
||||
settingResult.authSetting['scope.camera'])) {
|
||||
Taro.showToast({
|
||||
title: '授权成功',
|
||||
@@ -341,14 +453,14 @@ export class BowongAISDK {
|
||||
|
||||
} catch (error) {
|
||||
console.error('选择并上传图片失败:', error);
|
||||
|
||||
|
||||
// 检查是否是授权被拒绝的错误
|
||||
if (this._isAuthorizationError(error)) {
|
||||
await this._handleAuthorizationError();
|
||||
// 用户重新授权后，递归调用自己重试
|
||||
return this.chooseAndGenerateImage(options);
|
||||
}
|
||||
|
||||
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
@@ -385,7 +497,7 @@ export class BowongAISDK {
|
||||
* 生成图像
|
||||
* @param params 图像生成参数
|
||||
* @returns Promise<string> 返回任务ID
|
||||
*
|
||||
*
|
||||
* 使用 multipart/form-data 格式提交，支持文件上传和URL参数
|
||||
* 对应 curl 命令：
|
||||
* curl -X 'POST' \
|
||||
@@ -413,17 +525,22 @@ export class BowongAISDK {
|
||||
const url = `${this.baseUrl}/api/custom/image/submit/task`;
|
||||
|
||||
try {
|
||||
// 改为选择图片
|
||||
|
||||
// 如果提供了本地文件路径，使用 uploadFile
|
||||
if (img_file) {
|
||||
// 检测环境并使用不同的上传策略
|
||||
if (PlatformFactory.detectPlatform() === 'h5') {
|
||||
return await this._generateImageForH5(params);
|
||||
}
|
||||
|
||||
// 小程序环境的原有逻辑
|
||||
const response = await new Promise<Taro.uploadFile.SuccessCallbackResult>((resolve, reject) => {
|
||||
Taro.uploadFile({
|
||||
url,
|
||||
filePath: img_file,
|
||||
name: 'img_file',
|
||||
header: {
|
||||
'accept': 'application/json'
|
||||
'accept': 'application/json',
|
||||
'Content-Type': 'multipart/form-data'
|
||||
},
|
||||
formData: {
|
||||
prompt,
|
||||
@@ -458,6 +575,92 @@ export class BowongAISDK {
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* H5环境专用图像生成方法
|
||||
* @private
|
||||
*/
|
||||
private async _generateImageForH5(params: GenerateImageParams): Promise<string> {
|
||||
const {
|
||||
prompt,
|
||||
model_name = 'gemini-2.5-flash-image-preview',
|
||||
aspect_ratio = '9:16',
|
||||
mode = 'turbo',
|
||||
webhook_flag = false,
|
||||
img_file
|
||||
} = params;
|
||||
|
||||
const url = `${this.baseUrl}/api/custom/image/submit/task`;
|
||||
|
||||
try {
|
||||
// H5环境中，img_file实际上是File对象或Blob URL
|
||||
let file: File;
|
||||
|
||||
if (typeof img_file === 'string') {
|
||||
// 如果是blob URL，需要先获取blob
|
||||
const response = await fetch(img_file);
|
||||
const blob = await response.blob();
|
||||
const fileName = `generate_${Date.now()}.${this._getFileExtension(img_file)}`;
|
||||
file = new File([blob], fileName, { type: blob.type });
|
||||
} else if (img_file && typeof img_file === 'object' && 'name' in img_file && 'size' in img_file && 'type' in img_file) {
|
||||
file = img_file as File;
|
||||
} else {
|
||||
throw new Error('H5环境下图片文件格式不正确');
|
||||
}
|
||||
|
||||
// 创建FormData
|
||||
const formData = new FormData();
|
||||
formData.append('img_file', file);
|
||||
formData.append('prompt', prompt);
|
||||
formData.append('model_name', model_name);
|
||||
formData.append('aspect_ratio', aspect_ratio);
|
||||
formData.append('mode', mode.toString());
|
||||
formData.append('webhook_flag', webhook_flag.toString());
|
||||
formData.append('img_url', '');
|
||||
|
||||
console.log('H5环境开始图像生成:', {
|
||||
fileName: file.name,
|
||||
fileSize: file.size,
|
||||
fileType: file.type,
|
||||
prompt: prompt.substring(0, 100) + '...'
|
||||
});
|
||||
|
||||
// 使用fetch API上传，添加CORS支持
|
||||
const response = await fetch(url, {
|
||||
method: 'POST',
|
||||
body: formData,
|
||||
headers: {
|
||||
'accept': 'application/json',
|
||||
// 不要手动设置Content-Type，让浏览器自动设置multipart/form-data边界
|
||||
},
|
||||
mode: 'cors', // 明确指定CORS模式
|
||||
credentials: 'omit' // 不发送cookie
|
||||
});
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(`HTTP ${response.status}: 图像生成请求失败`);
|
||||
}
|
||||
|
||||
const result = await response.json() as ApiResponse<string>;
|
||||
|
||||
if (!result.status) {
|
||||
throw new Error(result.msg || '图像生成请求失败');
|
||||
}
|
||||
|
||||
console.log('H5环境图像生成任务提交成功:', result.data);
|
||||
return result.data;
|
||||
|
||||
} catch (error: any) {
|
||||
console.error('H5环境图像生成失败:', error);
|
||||
|
||||
// 特殊处理CORS错误
|
||||
if (error.name === 'TypeError' && error.message.includes('fetch')) {
|
||||
throw new Error('网络错误：可能是CORS问题，请确保服务器支持跨域请求');
|
||||
}
|
||||
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 查询任务状态
|
||||
* @param taskId 任务ID
|
||||
@@ -511,7 +714,7 @@ export class BowongAISDK {
|
||||
* 图像转视频
|
||||
* @param params 图像转视频参数
|
||||
* @returns Promise<string> 返回任务ID
|
||||
*
|
||||
*
|
||||
* 对应 curl 命令：
|
||||
* curl -X 'POST' \
|
||||
* 'https://bowongai-test--text-video-agent-fastapi-app.modal.run/api/custom/transform/i2v' \
|
||||
@@ -561,21 +764,21 @@ export class BowongAISDK {
|
||||
|
||||
/**
|
||||
* 使用示例：
|
||||
*
|
||||
*
|
||||
* // 1. 选择并上传图片
|
||||
* const uploadResult = await bowongAI.chooseAndUploadImage({
|
||||
* onProgress: (progress) => console.log(`上传进度: ${progress}%`)
|
||||
* });
|
||||
*
|
||||
*
|
||||
* // 2. 使用上传的图片生成新图像
|
||||
* const generateResult = await bowongAI.generateImage({
|
||||
* img_url: uploadResult.file_url,
|
||||
* prompt: '转换为油画风格'
|
||||
* });
|
||||
*
|
||||
*
|
||||
* // 3. 查询生成状态
|
||||
* const status = await bowongAI.getTaskStatus(generateResult.task_id);
|
||||
*
|
||||
*
|
||||
* // 4. 获取最终结果
|
||||
* const finalResult = await bowongAI.getTaskResult(generateResult.task_id);
|
||||
*/
|
||||
@@ -584,4 +787,4 @@ export class BowongAISDK {
|
||||
export const bowongAI = new BowongAISDK();
|
||||
|
||||
// 向后兼容的类名导出
|
||||
export const Sdk = BowongAISDK;
|
||||
export const Sdk = BowongAISDK;
|
||||
|
||||
@@ -1,168 +0,0 @@
|
||||
import Taro from '@tarojs/taro';
|
||||
|
||||
/**
|
||||
* 上传参数接口
|
||||
*/
|
||||
export interface UploadParams {
|
||||
filePath: string;
|
||||
name?: string;
|
||||
type?: string;
|
||||
onProgress?: (progress: number) => void;
|
||||
}
|
||||
|
||||
/**
|
||||
* API响应接口
|
||||
*/
|
||||
interface ApiResponse<T = any> {
|
||||
status: boolean;
|
||||
msg: string;
|
||||
data: T;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件信息成功回调结果类型守卫
|
||||
*/
|
||||
function isGetFileInfoSuccessCallbackResult(
|
||||
result: any
|
||||
): result is Taro.getFileInfo.SuccessCallbackResult {
|
||||
return result && typeof result.size === 'number';
|
||||
}
|
||||
|
||||
/**
|
||||
* 图片上传工具类
|
||||
*/
|
||||
export class ImageUploader {
|
||||
private baseUrl: string;
|
||||
|
||||
constructor(baseUrl: string = 'https://bowongai-test--text-video-agent-fastapi-app.modal.run') {
|
||||
this.baseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
|
||||
}
|
||||
|
||||
/**
|
||||
* 上传文件
|
||||
*/
|
||||
async upload(params: UploadParams): Promise<string> {
|
||||
const { filePath, name, type, onProgress } = params;
|
||||
const url = `${this.baseUrl}/api/file/upload/s3`;
|
||||
|
||||
try {
|
||||
// 获取文件信息
|
||||
let fileInfo;
|
||||
try {
|
||||
fileInfo = await Taro.getFileInfo({ filePath });
|
||||
if (!isGetFileInfoSuccessCallbackResult(fileInfo)) {
|
||||
console.warn('获取文件信息失败，使用默认值');
|
||||
fileInfo = { size: 0 };
|
||||
}
|
||||
} catch (getFileInfoError) {
|
||||
console.warn('getFileInfo调用失败，使用默认值:', getFileInfoError);
|
||||
fileInfo = { size: 0 };
|
||||
}
|
||||
|
||||
// 自动生成文件名（如果未提供）
|
||||
const fileName = name || `upload_${Date.now()}.${this._getFileExtension(filePath)}`;
|
||||
|
||||
// 自动判断文件类型（如果未提供）
|
||||
const fileType = type || this._getMimeType(filePath);
|
||||
|
||||
console.log('开始上传文件:', {
|
||||
fileName,
|
||||
fileSize: fileInfo.size,
|
||||
fileType
|
||||
});
|
||||
|
||||
// 使用 Taro.uploadFile 进行文件上传
|
||||
const response = await new Promise<Taro.uploadFile.SuccessCallbackResult>((resolve, reject) => {
|
||||
const uploadTask = Taro.uploadFile({
|
||||
url,
|
||||
filePath,
|
||||
name: 'file', // 服务端接收的字段名
|
||||
header: {
|
||||
'Accept': 'application/json'
|
||||
},
|
||||
formData: {
|
||||
filename: fileName,
|
||||
type: fileType
|
||||
},
|
||||
success: resolve,
|
||||
fail: reject
|
||||
});
|
||||
|
||||
// 监听上传进度
|
||||
if (onProgress) {
|
||||
uploadTask.progress((res) => {
|
||||
const progress = Math.round((res.totalBytesSent / res.totalBytesExpectedToSend) * 100);
|
||||
onProgress(progress);
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
// 检查 HTTP 状态码
|
||||
if (response.statusCode !== 200) {
|
||||
throw new Error(`HTTP ${response.statusCode}: 文件上传失败`);
|
||||
}
|
||||
|
||||
// 解析响应数据
|
||||
let result: ApiResponse<string>;
|
||||
try {
|
||||
result = JSON.parse(response.data) as ApiResponse<string>;
|
||||
} catch (parseError) {
|
||||
throw new Error('服务器响应格式错误');
|
||||
}
|
||||
|
||||
// 检查业务状态码
|
||||
if (!result.status) {
|
||||
throw new Error(result.msg || '文件上传失败');
|
||||
}
|
||||
|
||||
console.log('文件上传成功:', result.data);
|
||||
return result.data;
|
||||
|
||||
} catch (error) {
|
||||
console.error('文件上传失败:', error);
|
||||
throw error;
|
||||
}
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取文件扩展名
|
||||
*/
|
||||
private _getFileExtension(filePath: string): string {
|
||||
const parts = filePath.split('.');
|
||||
return parts.length > 1 ? parts[parts.length - 1].toLowerCase() : 'jpg';
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取MIME类型
|
||||
*/
|
||||
private _getMimeType(filePath: string): string {
|
||||
const ext = this._getFileExtension(filePath);
|
||||
const mimeTypes: Record<string, string> = {
|
||||
'jpg': 'image/jpeg',
|
||||
'jpeg': 'image/jpeg',
|
||||
'png': 'image/png',
|
||||
'gif': 'image/gif',
|
||||
'webp': 'image/webp',
|
||||
'bmp': 'image/bmp',
|
||||
'svg': 'image/svg+xml'
|
||||
};
|
||||
return mimeTypes[ext] || 'image/jpeg';
|
||||
}
|
||||
|
||||
/**
|
||||
* 设置基础URL
|
||||
*/
|
||||
setBaseUrl(baseUrl: string): void {
|
||||
this.baseUrl = baseUrl.endsWith('/') ? baseUrl.slice(0, -1) : baseUrl;
|
||||
}
|
||||
|
||||
/**
|
||||
* 获取基础URL
|
||||
*/
|
||||
getBaseUrl(): string {
|
||||
return this.baseUrl;
|
||||
}
|
||||
}
|
||||
|
||||
// 导出默认实例
|
||||
export const imageUploader = new ImageUploader();
|
||||
Reference in New Issue
Block a user