709 lines
20 KiB
TypeScript
709 lines
20 KiB
TypeScript
import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
|
||
import React, { useEffect, useRef, useState } from 'react';
|
||
import {
|
||
ActivityIndicator,
|
||
Alert,
|
||
Image,
|
||
ScrollView,
|
||
StyleSheet,
|
||
Text,
|
||
View,
|
||
} from 'react-native';
|
||
|
||
export const unstable_settings = {
|
||
headerShown: false,
|
||
};
|
||
|
||
import { DynamicFormField } from '@/components/forms/dynamic-form-field';
|
||
import { getTemplateById } from '@/lib/api/templates';
|
||
import { recordTokenUsage, getUserBalance } from '@/lib/api/balance';
|
||
import { runTemplate, pollTemplateGeneration } from '@/lib/api/template-runs';
|
||
import { uploadFile } from '@/lib/api/upload';
|
||
import { Template, TemplateGraphNode } from '@/lib/types/template';
|
||
import { TemplateGeneration } from '@/lib/types/template-run';
|
||
import { useAuth } from '@/hooks/use-auth';
|
||
import { Header } from '@/components/sker/header';
|
||
import { Page } from '@/components/sker/page';
|
||
import { GenerateBtn } from '@/components/sker/generate-btn';
|
||
import VideoPlayer from '@/components/sker/video-player/video-player';
|
||
import { getVideoThumbnail } from '@/lib/utils/media';
|
||
|
||
export default function TemplateFormScreen() {
|
||
const { id } = useLocalSearchParams<{ id: string }>();
|
||
const router = useRouter();
|
||
const { session, isLoading: authLoading } = useAuth();
|
||
|
||
const [template, setTemplate] = useState<Template | null>(null);
|
||
const [loading, setLoading] = useState(true);
|
||
const [formData, setFormData] = useState<Record<string, any>>({});
|
||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||
const [pollingStatus, setPollingStatus] = useState<{
|
||
isPolling: boolean;
|
||
generationId?: string;
|
||
message?: string;
|
||
}>({ isPolling: false });
|
||
|
||
const pollCancelRef = useRef<(() => void) | null>(null);
|
||
|
||
useEffect(() => {
|
||
loadInitialData();
|
||
|
||
return () => {
|
||
if (pollCancelRef.current) {
|
||
pollCancelRef.current();
|
||
pollCancelRef.current = null;
|
||
}
|
||
};
|
||
}, [id]);
|
||
|
||
const loadInitialData = async () => {
|
||
try {
|
||
setLoading(true);
|
||
const templateResponse = await getTemplateById(id);
|
||
|
||
if (templateResponse?.success && templateResponse?.data) {
|
||
setTemplate(templateResponse.data as any);
|
||
// 初始化表单数据
|
||
const initialData: Record<string, any> = {};
|
||
(templateResponse.data.formSchema as any)?.startNodes.forEach((node: TemplateGraphNode) => {
|
||
if (node.data.actionData?.allowMultiple) {
|
||
initialData[node.id] = [];
|
||
} else {
|
||
initialData[node.id] = '';
|
||
}
|
||
});
|
||
setFormData(initialData);
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to load template:', error);
|
||
Alert.alert('错误', '加载数据失败，请稍后重试');
|
||
} finally {
|
||
setLoading(false);
|
||
}
|
||
};
|
||
|
||
const validateForm = (): boolean => {
|
||
if (!template?.formSchema?.startNodes) return false;
|
||
|
||
const newErrors: Record<string, string> = {};
|
||
|
||
template.formSchema.startNodes.forEach((node: TemplateGraphNode) => {
|
||
const { id, data } = node;
|
||
const { actionData, label } = data;
|
||
const value = formData[id];
|
||
|
||
// 检查必填项
|
||
if (actionData?.required) {
|
||
if (Array.isArray(value)) {
|
||
if (value.length === 0) {
|
||
newErrors[id] = `请选择${label}`;
|
||
}
|
||
} else if (!value || (typeof value === 'string' && !value.trim())) {
|
||
newErrors[id] = `请填写${label}`;
|
||
}
|
||
}
|
||
});
|
||
|
||
setErrors(newErrors);
|
||
return Object.keys(newErrors).length === 0;
|
||
};
|
||
|
||
/**
|
||
* 检查用户是否可以生成（登录 + metered 订阅 + 余额充足）
|
||
*/
|
||
const canGenerate = async (): Promise<{ canProceed: boolean; message?: string }> => {
|
||
// 1. 检查是否登录
|
||
if (!session?.user) {
|
||
return {
|
||
canProceed: false,
|
||
message: '请先登录',
|
||
};
|
||
}
|
||
|
||
// 2. 检查是否有 metered 订阅
|
||
const balanceResponse = await getUserBalance();
|
||
if (!balanceResponse.success) {
|
||
return {
|
||
canProceed: false,
|
||
message: balanceResponse.message || '未找到计费订阅，请先订阅',
|
||
};
|
||
}
|
||
|
||
// 3. 检查余额是否充足
|
||
const requiredAmount = template?.costPrice || 0;
|
||
const currentBalance = balanceResponse.data.remainingTokenBalance;
|
||
|
||
if (currentBalance < requiredAmount) {
|
||
return {
|
||
canProceed: false,
|
||
message: `余额不足\n当前余额: ${currentBalance}\n需要费用: ${requiredAmount}`,
|
||
};
|
||
}
|
||
|
||
return { canProceed: true };
|
||
};
|
||
|
||
/**
|
||
* 上传所有 blob URL 文件到服务器
|
||
*/
|
||
const uploadBlobFiles = async (data: Record<string, any>): Promise<Record<string, any>> => {
|
||
if (!template?.formSchema?.startNodes) return data;
|
||
|
||
const uploadedData = { ...data };
|
||
|
||
for (const node of template.formSchema.startNodes) {
|
||
const value = data[node.id];
|
||
|
||
if (!value) continue;
|
||
|
||
// 检查是否是 blob URL
|
||
if (typeof value === 'string' && value.startsWith('blob:')) {
|
||
const fileType = node.type === 'image' ? 'image' : node.type === 'video' ? 'video' : null;
|
||
|
||
if (fileType) {
|
||
const uploadResponse = await uploadFile(value, fileType as 'image' | 'video');
|
||
|
||
if (!uploadResponse.success || !uploadResponse.data) {
|
||
throw new Error(`上传 ${node.data.label} 失败`);
|
||
}
|
||
|
||
uploadedData[node.id] = uploadResponse.data.url;
|
||
}
|
||
}
|
||
}
|
||
|
||
return uploadedData;
|
||
};
|
||
|
||
const transformFormDataToRunFormat = (formData: Record<string, any>): Record<string, any> => {
|
||
if (!template?.formSchema?.startNodes) return {};
|
||
|
||
const transformed: Record<string, any> = {};
|
||
|
||
template.formSchema.startNodes.forEach((node: TemplateGraphNode) => {
|
||
const { id, type } = node;
|
||
const value = formData[id];
|
||
|
||
// 跳过空值
|
||
if (!value || (Array.isArray(value) && value.length === 0)) {
|
||
return;
|
||
}
|
||
|
||
// 根据节点类型转换数据格式
|
||
switch (type) {
|
||
case 'image':
|
||
transformed[id] = {
|
||
images: [{ url: value }],
|
||
};
|
||
break;
|
||
|
||
case 'video':
|
||
transformed[id] = {
|
||
videos: [{ url: value }],
|
||
};
|
||
break;
|
||
|
||
case 'text':
|
||
transformed[id] = {
|
||
texts: [value],
|
||
};
|
||
break;
|
||
|
||
case 'select':
|
||
// 根据 allowMultiple 判断是否为多选
|
||
if (node.data.actionData?.allowMultiple) {
|
||
transformed[id] = {
|
||
selections: Array.isArray(value) ? value : [value],
|
||
};
|
||
} else {
|
||
transformed[id] = {
|
||
selections: value,
|
||
};
|
||
}
|
||
break;
|
||
|
||
default:
|
||
// 未知类型，保持原样
|
||
transformed[id] = value;
|
||
}
|
||
});
|
||
|
||
return transformed;
|
||
};
|
||
|
||
const handleSubmit = async () => {
|
||
if (!template) return;
|
||
if (!validateForm()) {
|
||
Alert.alert('提示', '请完善所有必填项');
|
||
return;
|
||
}
|
||
|
||
setIsSubmitting(true);
|
||
|
||
try {
|
||
// 步骤 1: 检查是否可以生成（登录 + 订阅 + 余额）
|
||
const checkResult = await canGenerate();
|
||
if (!checkResult.canProceed) {
|
||
Alert.alert('无法生成', checkResult.message || '请检查账户状态', [
|
||
{ text: '取消', style: 'cancel' },
|
||
{
|
||
text: '去充值',
|
||
onPress: () => router.push('/exchange' as any),
|
||
},
|
||
]);
|
||
return;
|
||
}
|
||
|
||
// 步骤 2: 上传所有 blob 文件到服务器
|
||
let uploadedFormData: Record<string, any>;
|
||
try {
|
||
uploadedFormData = await uploadBlobFiles(formData);
|
||
} catch (uploadError) {
|
||
Alert.alert('上传失败', uploadError instanceof Error ? uploadError.message : '文件上传失败，请重试');
|
||
return;
|
||
}
|
||
|
||
// 步骤 3: 扣费并获取 identifier
|
||
const requiredAmount = template.costPrice || 0;
|
||
const usageResponse = await recordTokenUsage({
|
||
price: requiredAmount,
|
||
name: `生成视频 - ${template.title}`,
|
||
metadata: {
|
||
templateId: template.id,
|
||
templateTitle: template.title,
|
||
},
|
||
});
|
||
|
||
if (!usageResponse.success || !usageResponse.data?.identifier) {
|
||
Alert.alert('扣费失败', usageResponse.message || '请稍后重试');
|
||
return;
|
||
}
|
||
|
||
const paymentIdentifier = usageResponse.data.identifier;
|
||
|
||
// 步骤 4: 验证所有 URL 都是有效的服务器 URL
|
||
const hasInvalidUrl = Object.values(uploadedFormData).some(
|
||
(value) => typeof value === 'string' && value.startsWith('blob:')
|
||
);
|
||
|
||
if (hasInvalidUrl) {
|
||
Alert.alert('错误', '存在未上传的文件，请重试');
|
||
return;
|
||
}
|
||
|
||
// 步骤 5: 转换表单数据为 API 格式
|
||
const transformedData = transformFormDataToRunFormat(uploadedFormData);
|
||
|
||
// 步骤 6: 调用 template run，使用支付凭证 identifier
|
||
const runResponse = await runTemplate(id, transformedData, paymentIdentifier);
|
||
|
||
if (!runResponse?.success) {
|
||
Alert.alert('错误', '生成任务创建失败');
|
||
return;
|
||
}
|
||
|
||
const generationId = runResponse.data;
|
||
|
||
// 步骤 7: 开始轮询任务状态
|
||
setPollingStatus({
|
||
isPolling: true,
|
||
generationId,
|
||
message: '正在生成内容，请稍候...',
|
||
});
|
||
|
||
// 清理之前的轮询
|
||
if (pollCancelRef.current) {
|
||
pollCancelRef.current();
|
||
}
|
||
|
||
// 使用轮询函数
|
||
const cancelPoll = pollTemplateGeneration(
|
||
generationId,
|
||
// 成功回调
|
||
(result: TemplateGeneration) => {
|
||
setPollingStatus({ isPolling: false });
|
||
pollCancelRef.current = null;
|
||
|
||
// 跳转到结果页面
|
||
router.push(`/result?generationId=${generationId}`);
|
||
},
|
||
// 错误回调
|
||
(error: Error) => {
|
||
setPollingStatus({ isPolling: false });
|
||
pollCancelRef.current = null;
|
||
Alert.alert('生成失败', error.message || '任务执行失败，请重试');
|
||
},
|
||
// 最大尝试次数（100次 * 3秒 = 5分钟）
|
||
100,
|
||
// 轮询间隔（3秒）
|
||
3000
|
||
);
|
||
pollCancelRef.current = cancelPoll;
|
||
} catch (error) {
|
||
console.error('Submission failed:', error);
|
||
Alert.alert('错误', '提交失败，请稍后重试');
|
||
} finally {
|
||
setIsSubmitting(false);
|
||
}
|
||
};
|
||
|
||
const renderFormFields = () => {
|
||
if (!template?.formSchema?.startNodes) return null;
|
||
|
||
const nodes = template.formSchema.startNodes;
|
||
const imageNodes = nodes.filter((node: TemplateGraphNode) => node.type === 'image');
|
||
|
||
// 当恰好有2个图片字段时,使用横向布局
|
||
if (imageNodes.length === 2) {
|
||
const result: React.ReactNode[] = [];
|
||
let imageIndex = 0;
|
||
|
||
for (let i = 0; i < nodes.length; i++) {
|
||
const node = nodes[i];
|
||
|
||
if (node.type === 'image') {
|
||
// 第一个图片字段:开始行容器
|
||
if (imageIndex === 0) {
|
||
const firstImage = node;
|
||
const secondImage = imageNodes[1];
|
||
|
||
result.push(
|
||
<View key={`image-row`} style={styles.imageRow}>
|
||
<View style={styles.imageColumn}>
|
||
<DynamicFormField
|
||
node={firstImage}
|
||
value={formData[firstImage.id]}
|
||
onChange={(value) => {
|
||
setFormData(prev => ({ ...prev, [firstImage.id]: value }));
|
||
if (errors[firstImage.id]) {
|
||
setErrors(prev => {
|
||
const newErrors = { ...prev };
|
||
delete newErrors[firstImage.id];
|
||
return newErrors;
|
||
});
|
||
}
|
||
}}
|
||
error={errors[firstImage.id]}
|
||
/>
|
||
</View>
|
||
<View style={styles.imageColumn}>
|
||
<DynamicFormField
|
||
node={secondImage}
|
||
value={formData[secondImage.id]}
|
||
onChange={(value) => {
|
||
setFormData(prev => ({ ...prev, [secondImage.id]: value }));
|
||
if (errors[secondImage.id]) {
|
||
setErrors(prev => {
|
||
const newErrors = { ...prev };
|
||
delete newErrors[secondImage.id];
|
||
return newErrors;
|
||
});
|
||
}
|
||
}}
|
||
error={errors[secondImage.id]}
|
||
/>
|
||
</View>
|
||
</View>
|
||
);
|
||
imageIndex++;
|
||
}
|
||
// 第二个图片字段已在上面处理,跳过
|
||
imageIndex++;
|
||
} else {
|
||
// 非图片字段正常渲染
|
||
result.push(
|
||
<DynamicFormField
|
||
key={node.id}
|
||
node={node}
|
||
value={formData[node.id]}
|
||
onChange={(value) => {
|
||
setFormData(prev => ({ ...prev, [node.id]: value }));
|
||
if (errors[node.id]) {
|
||
setErrors(prev => {
|
||
const newErrors = { ...prev };
|
||
delete newErrors[node.id];
|
||
return newErrors;
|
||
});
|
||
}
|
||
}}
|
||
error={errors[node.id]}
|
||
/>
|
||
);
|
||
}
|
||
}
|
||
|
||
return result;
|
||
}
|
||
|
||
// 默认垂直布局
|
||
return nodes.map((node: TemplateGraphNode) => (
|
||
<DynamicFormField
|
||
key={node.id}
|
||
node={node}
|
||
value={formData[node.id]}
|
||
onChange={(value) => {
|
||
setFormData(prev => ({ ...prev, [node.id]: value }));
|
||
if (errors[node.id]) {
|
||
setErrors(prev => {
|
||
const newErrors = { ...prev };
|
||
delete newErrors[node.id];
|
||
return newErrors;
|
||
});
|
||
}
|
||
}}
|
||
error={errors[node.id]}
|
||
/>
|
||
));
|
||
};
|
||
|
||
const renderGenerating = () => {
|
||
if (!template) return null;
|
||
|
||
return (
|
||
<ScrollView
|
||
style={styles.stepScroll}
|
||
contentContainerStyle={styles.step1Content}
|
||
showsVerticalScrollIndicator={false}
|
||
>
|
||
<View style={styles.generatingContainer}>
|
||
<View style={styles.generatingImageWrapper}>
|
||
<Image source={{ uri: getVideoThumbnail(template.previewUrl, { width: 144, height: 240 }) }} style={styles.uploadedImage} resizeMode="cover" />
|
||
</View>
|
||
|
||
<Image source={require('@/assets/images/star.png')} style={{ width: 32, height: 32 }} />
|
||
<Text style={styles.generatingText}>正在加载生成中...</Text>
|
||
|
||
<View style={styles.progressBarContainer}>
|
||
<View style={styles.progressBarTrack}>
|
||
<View style={styles.progressBarFill} />
|
||
</View>
|
||
</View>
|
||
</View>
|
||
</ScrollView>
|
||
);
|
||
};
|
||
|
||
const renderStep1 = () => {
|
||
if (!template) return null;
|
||
const aspectRatio = template.aspectRatio || '3:4';
|
||
const [w, h] = aspectRatio.split(':');
|
||
const itemWidth = 320;
|
||
const height = itemWidth * parseInt(h) / parseInt(w);
|
||
const posterImage = template.coverImageUrl || template.previewUrl;
|
||
return (
|
||
<ScrollView
|
||
style={styles.stepScroll}
|
||
contentContainerStyle={styles.step1Content}
|
||
showsVerticalScrollIndicator={false}
|
||
>
|
||
<Text style={styles.heroSubtitle}>
|
||
{template.descriptionEn}
|
||
</Text>
|
||
<View style={{ position: 'relative', borderRadius: 16, marginBottom: 8, height: height, width: itemWidth, overflow: 'hidden', margin: `auto` }}>
|
||
<VideoPlayer source={{ uri: template.previewUrl }} originalImage={posterImage} />
|
||
</View>
|
||
<View style={{ height: 8 }}></View>
|
||
{pollingStatus.isPolling ? renderGenerating() : renderFormFields()}
|
||
</ScrollView>
|
||
);
|
||
};
|
||
|
||
return (
|
||
<Page>
|
||
<Header title={(template?.titleEn ?? 'AI视频生成').toUpperCase()} />
|
||
{renderStep1()}
|
||
<GenerateBtn onGenerate={handleSubmit} loading={isSubmitting || pollingStatus.isPolling} />
|
||
</Page>
|
||
);
|
||
}
|
||
|
||
const styles = StyleSheet.create({
|
||
canvas: {
|
||
flex: 1,
|
||
backgroundColor: '#050505',
|
||
},
|
||
safeArea: {
|
||
flex: 1,
|
||
},
|
||
loadingCanvas: {
|
||
flex: 1,
|
||
backgroundColor: '#050505',
|
||
},
|
||
loadingContainer: {
|
||
flex: 1,
|
||
justifyContent: 'center',
|
||
alignItems: 'center',
|
||
},
|
||
loadingText: {
|
||
marginTop: 16,
|
||
fontSize: 16,
|
||
color: 'rgba(255, 255, 255, 0.7)',
|
||
letterSpacing: 0.3,
|
||
},
|
||
stepScroll: {
|
||
flex: 1,
|
||
},
|
||
step1Content: {
|
||
paddingHorizontal: 12,
|
||
paddingBottom: 40,
|
||
},
|
||
topBar: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'space-between',
|
||
paddingHorizontal: 0,
|
||
paddingTop: 8,
|
||
paddingBottom: 8,
|
||
gap: 12,
|
||
},
|
||
stepIndicator: {
|
||
flex: 1,
|
||
textAlign: 'right',
|
||
fontSize: 13,
|
||
letterSpacing: 2,
|
||
color: 'rgba(255, 255, 255, 0.5)',
|
||
},
|
||
heroTitle: {
|
||
fontSize: 26,
|
||
lineHeight: 32,
|
||
fontWeight: '700',
|
||
color: '#FFFFFF',
|
||
letterSpacing: 0.8,
|
||
textTransform: 'uppercase',
|
||
marginBottom: 16,
|
||
},
|
||
heroSubtitle: {
|
||
fontSize: 14,
|
||
lineHeight: 20,
|
||
color: 'rgba(255, 255, 255, 0.68)',
|
||
marginBottom: 24,
|
||
},
|
||
previewStage: {
|
||
overflow: 'hidden',
|
||
},
|
||
previewImage: {
|
||
height: '100%',
|
||
width: '100%'
|
||
},
|
||
previewInset: {
|
||
position: 'absolute',
|
||
bottom: 18,
|
||
left: 18,
|
||
width: 74,
|
||
height: 74,
|
||
borderRadius: 24,
|
||
overflow: 'hidden',
|
||
},
|
||
previewInsetImage: {
|
||
width: '100%',
|
||
height: '100%',
|
||
},
|
||
generateButton: {
|
||
flexDirection: 'row',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
height: 58,
|
||
borderRadius: 30,
|
||
backgroundColor: '#D1FF00',
|
||
gap: 10,
|
||
},
|
||
generateButtonDisabled: {
|
||
opacity: 0.6,
|
||
},
|
||
generateLabel: {
|
||
fontSize: 17,
|
||
fontWeight: '700',
|
||
letterSpacing: 0.4,
|
||
color: '#050505',
|
||
},
|
||
imageRow: {
|
||
flexDirection: 'row',
|
||
gap: 12,
|
||
marginBottom: 24,
|
||
},
|
||
imageColumn: {
|
||
flex: 1,
|
||
},
|
||
generatingTitle: {
|
||
fontSize: 24,
|
||
fontWeight: '700',
|
||
color: '#FFFFFF',
|
||
letterSpacing: 0.8,
|
||
textAlign: 'center',
|
||
marginBottom: 12,
|
||
},
|
||
generatingSubtitle: {
|
||
fontSize: 14,
|
||
color: 'rgba(255, 255, 255, 0.68)',
|
||
textAlign: 'center',
|
||
marginBottom: 32,
|
||
},
|
||
uploadedImageContainer: {
|
||
marginBottom: 24,
|
||
margin: 'auto'
|
||
},
|
||
generatingContainer: {
|
||
alignItems: 'center',
|
||
paddingVertical: 40,
|
||
backgroundColor: '#232527'
|
||
},
|
||
generatingImageWrapper: {
|
||
position: 'relative',
|
||
marginBottom: 24,
|
||
},
|
||
generatingIconOverlay: {
|
||
position: 'absolute',
|
||
top: 0,
|
||
left: 0,
|
||
right: 0,
|
||
bottom: 0,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
backgroundColor: 'rgba(0, 0, 0, 0.4)',
|
||
borderRadius: 12,
|
||
},
|
||
generatingText: {
|
||
fontSize: 16,
|
||
fontWeight: '600',
|
||
color: '#FFFFFF',
|
||
letterSpacing: 0.5,
|
||
marginBottom: 24,
|
||
},
|
||
progressBarContainer: {
|
||
width: '100%',
|
||
paddingHorizontal: 20,
|
||
},
|
||
progressBarTrack: {
|
||
height: 4,
|
||
backgroundColor: 'rgba(136, 245, 250, 0.2)',
|
||
borderRadius: 2,
|
||
overflow: 'hidden',
|
||
},
|
||
progressBarFill: {
|
||
height: '100%',
|
||
width: '60%',
|
||
backgroundColor: '#88F5FA',
|
||
borderRadius: 2,
|
||
},
|
||
uploadedImageLabel: {
|
||
fontSize: 14,
|
||
fontWeight: '600',
|
||
color: 'rgba(255, 255, 255, 0.85)',
|
||
marginBottom: 12,
|
||
letterSpacing: 0.3,
|
||
},
|
||
uploadedImage: {
|
||
width: 144,
|
||
aspectRatio: 1,
|
||
borderRadius: 12,
|
||
backgroundColor: 'rgba(255, 255, 255, 0.05)',
|
||
},
|
||
progressContainer: {
|
||
marginTop: 24,
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
paddingVertical: 32,
|
||
},
|
||
});
|