diff --git a/src/app.config.ts b/src/app.config.ts index 3d07256..588cbe9 100644 --- a/src/app.config.ts +++ b/src/app.config.ts @@ -3,6 +3,7 @@ export default defineAppConfig({ 'pages/home/index', // 新的模板卡片首页 'pages/history/index', // 历史记录页面 'pages/result/index', + 'pages/friends-photo/index', // 好友合照页面 ], tabBar: { color: '#8E9BAE', diff --git a/src/pages/friends-photo/index.config.ts b/src/pages/friends-photo/index.config.ts new file mode 100644 index 0000000..c2b46d0 --- /dev/null +++ b/src/pages/friends-photo/index.config.ts @@ -0,0 +1,5 @@ +export default definePageConfig({ + navigationBarTitleText: '好友合照', + enableShareAppMessage: true, + enableShareTimeline: true, +}); diff --git a/src/pages/friends-photo/index.css b/src/pages/friends-photo/index.css new file mode 100644 index 0000000..a3e2fd5 --- /dev/null +++ b/src/pages/friends-photo/index.css @@ -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; + } +} diff --git a/src/pages/friends-photo/index.tsx b/src/pages/friends-photo/index.tsx new file mode 100644 index 0000000..cef9172 --- /dev/null +++ b/src/pages/friends-photo/index.tsx @@ -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(''); + const [image2, setImage2] = useState(''); + 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.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((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) => ( + + + + {title} + {description} + + uploadSingleImage(imageIndex)} + > + {imageUrl ? ( + <> + + + + 🔄 + 点击更换 + + + + ) : ( + + 📷 + 点击上传 + + )} + + + + ); + + return ( + + + {/* 顶部介绍卡片 */} + + + 👫 + + 好友合照生成 + + 上传两张照片,AI将为你们生成精彩的合照视频 + + + + + + {/* 上传区域 */} + + {renderUploadCard(1, image1, "第一张照片", "选择你的照片")} + {renderUploadCard(2, image2, "第二张照片", "选择朋友的照片")} + + + {/* 预览区域 */} + {image1 && image2 && ( + + + 📸 照片预览 + 确认无误后即可开始生成 + + + + + 照片 1 + + + + + + 照片 2 + + + + )} + + {/* 底部间距 */} + + + + {/* 固定底部按钮 */} + + + + + ); +} diff --git a/src/pages/home/index.tsx b/src/pages/home/index.tsx index 063a95a..d32003c 100644 --- a/src/pages/home/index.tsx +++ b/src/pages/home/index.tsx @@ -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,6 +90,12 @@ export default function Home() { }; const handleTemplateClick = async (template: Template) => { + // 如果是好友合照,跳转到专门的页面 + if (template.name === '好友合照') { + navigateTo({ url: `/pages/friends-photo/index` }); + return; + } + try { // 第一步:选择并上传图片 const imageCount = template.code === '2image-to-video' ? 2 : 1; diff --git a/src/utils/imageUploader.ts b/src/utils/imageUploader.ts deleted file mode 100644 index 1f25304..0000000 --- a/src/utils/imageUploader.ts +++ /dev/null @@ -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 { - 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 { - 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((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; - try { - result = JSON.parse(response.data) as ApiResponse; - } 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 = { - '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(); \ No newline at end of file