✨ feat: 性能优化与余额扣费系统集成
主要更新： - 🚀 模板详情页性能优化：添加缓存机制、图片预加载、请求中断控制 - 💰 集成余额检查与扣费功能到表单提交流程 - 🔄 添加错误重试机制，提升用户体验 - 🎨 重构动态表单字段为独立组件 (DynamicFormField) - 🔧 修复类型错误，优化样式结构 技术细节： - 实现5分钟缓存策略减少API调用 - 使用 AbortController 管理请求生命周期 - React.memo 优化列表项渲染性能 - 图片预缓存提升加载体验 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
imeepos
@@ -30,7 +30,7 @@ export default function LoginScreen() {
|
||||
useEffect(() => {
|
||||
if (!authLoading && isAuthenticated) {
|
||||
console.log("[Login] User authenticated, redirecting to tabs...");
|
||||
router.replace("/(tabs)");
|
||||
router.replace("/(tabs)" as any);
|
||||
}
|
||||
}, [isAuthenticated, authLoading]);
|
||||
|
||||
|
||||
@@ -197,13 +197,11 @@ export default function ResultPage() {
|
||||
return (
|
||||
<video
|
||||
src={url}
|
||||
style={[
|
||||
{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover' as any
|
||||
}
|
||||
]}
|
||||
style={{
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
objectFit: 'cover' as any
|
||||
}}
|
||||
muted
|
||||
playsInline
|
||||
/>
|
||||
|
||||
@@ -3,7 +3,7 @@ import { getTagByName, type TagTemplate } from '@/lib/api/tags';
|
||||
import { getTemplateById } from '@/lib/api/templates';
|
||||
import Feather from '@expo/vector-icons/Feather';
|
||||
import { Stack, router, useLocalSearchParams } from 'expo-router';
|
||||
import React, { useEffect, useMemo, useState } from 'react';
|
||||
import React, { useCallback, useEffect, useMemo, useRef, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
Image,
|
||||
@@ -55,6 +55,31 @@ const quickActions = [
|
||||
{ id: 'download', label: 'Download' },
|
||||
];
|
||||
|
||||
const PreviewFrame = React.memo<{
|
||||
frame: TemplateFrame;
|
||||
isActive: boolean;
|
||||
onPress: () => void;
|
||||
}>(({ frame, isActive, onPress }) => {
|
||||
return (
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.85}
|
||||
onPress={onPress}
|
||||
style={[
|
||||
styles.previewFrame,
|
||||
{ borderColor: isActive ? frame.accent : 'rgba(255,255,255,0.08)' },
|
||||
isActive && styles.previewFrameActive,
|
||||
]}
|
||||
>
|
||||
<Image source={{ uri: frame.uri }} style={styles.previewImage} />
|
||||
</TouchableOpacity>
|
||||
);
|
||||
});
|
||||
|
||||
PreviewFrame.displayName = 'PreviewFrame';
|
||||
|
||||
const CACHE_DURATION = 5 * 60 * 1000;
|
||||
const cache = new Map<string, { data: TemplateFrame[]; timestamp: number }>();
|
||||
|
||||
export default function TemplateDetailScreen() {
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const [looks, setLooks] = useState<TemplateFrame[]>([]);
|
||||
@@ -62,19 +87,55 @@ export default function TemplateDetailScreen() {
|
||||
const [menuVisible, setMenuVisible] = useState(false);
|
||||
const [loadingLooks, setLoadingLooks] = useState(true);
|
||||
const [errorMessage, setErrorMessage] = useState<string | null>(null);
|
||||
const abortControllerRef = useRef<AbortController | null>(null);
|
||||
const imageCache = useRef(new Set<string>());
|
||||
|
||||
const getCachedData = useCallback((key: string) => {
|
||||
const cached = cache.get(key);
|
||||
if (cached && Date.now() - cached.timestamp < CACHE_DURATION) {
|
||||
return cached.data;
|
||||
}
|
||||
return null;
|
||||
}, []);
|
||||
|
||||
const setCachedData = useCallback((key: string, data: TemplateFrame[]) => {
|
||||
cache.set(key, { data, timestamp: Date.now() });
|
||||
}, []);
|
||||
|
||||
const preloadImage = useCallback((uri: string) => {
|
||||
if (imageCache.current.has(uri)) {
|
||||
return;
|
||||
}
|
||||
Image.prefetch(uri).then(() => {
|
||||
imageCache.current.add(uri);
|
||||
}).catch(() => {
|
||||
});
|
||||
}, []);
|
||||
|
||||
useEffect(() => {
|
||||
abortControllerRef.current?.abort();
|
||||
abortControllerRef.current = new AbortController();
|
||||
const signal = abortControllerRef.current.signal;
|
||||
|
||||
let isMounted = true;
|
||||
|
||||
const loadByTagName = async (tagName?: string | null) => {
|
||||
const loadByTagName = async (tagName?: string | null): Promise<TemplateFrame[]> => {
|
||||
if (!tagName) {
|
||||
return [];
|
||||
}
|
||||
|
||||
const cacheKey = `tag:${tagName}`;
|
||||
const cached = getCachedData(cacheKey);
|
||||
if (cached) {
|
||||
return cached;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await getTagByName(tagName);
|
||||
if (response.success && response.data?.templates?.length) {
|
||||
return mapTagTemplates(response.data.templates);
|
||||
const templates = mapTagTemplates(response.data.templates);
|
||||
setCachedData(cacheKey, templates);
|
||||
return templates;
|
||||
}
|
||||
} catch (tagError) {
|
||||
console.warn('Failed to load tag templates:', tagError);
|
||||
@@ -95,70 +156,109 @@ export default function TemplateDetailScreen() {
|
||||
setLoadingLooks(true);
|
||||
setErrorMessage(null);
|
||||
|
||||
let frames = await loadByTagName(id);
|
||||
let fallbackTemplateId: string | null = id;
|
||||
try {
|
||||
const templateResponse = await getTemplateById(id);
|
||||
if (!signal.aborted && templateResponse.success && templateResponse.data) {
|
||||
const template = templateResponse.data;
|
||||
const primaryTagName = template.tags?.[0]?.nameEn || template.tags?.[0]?.name;
|
||||
|
||||
if (frames.length === 0) {
|
||||
try {
|
||||
const templateResponse = await getTemplateById(id);
|
||||
if (templateResponse.success && templateResponse.data) {
|
||||
const template = templateResponse.data;
|
||||
fallbackTemplateId = template.id;
|
||||
const primaryTagName = template.tags?.[0]?.nameEn || template.tags?.[0]?.name;
|
||||
const relatedFrames = await loadByTagName(primaryTagName);
|
||||
frames = relatedFrames.length > 0 ? relatedFrames : [createFrame(template, 0)];
|
||||
const [relatedFrames, mainFrame] = await Promise.allSettled([
|
||||
loadByTagName(primaryTagName),
|
||||
Promise.resolve(createFrame(template, 0))
|
||||
]);
|
||||
|
||||
const frames: TemplateFrame[] = [];
|
||||
|
||||
if (relatedFrames.status === 'fulfilled' && relatedFrames.value.length > 0) {
|
||||
frames.push(...relatedFrames.value);
|
||||
} else {
|
||||
frames.push(mainFrame.status === 'fulfilled' ? mainFrame.value : createFrame(template, 0));
|
||||
}
|
||||
} catch (templateError) {
|
||||
console.warn('Failed to fetch template detail:', templateError);
|
||||
|
||||
if (!isMounted || signal.aborted) {
|
||||
return;
|
||||
}
|
||||
|
||||
setLooks(frames);
|
||||
setCachedData(`template:${id}`, frames);
|
||||
|
||||
const preferredId =
|
||||
frames.find(frame => frame.id === id)?.id ??
|
||||
frames[0]?.id ??
|
||||
template.id;
|
||||
|
||||
setSelectedId(preferredId);
|
||||
|
||||
frames.slice(0, 3).forEach(frame => preloadImage(frame.uri));
|
||||
} else {
|
||||
if (!isMounted || signal.aborted) {
|
||||
return;
|
||||
}
|
||||
setErrorMessage('Template not found');
|
||||
setLooks([]);
|
||||
setSelectedId(null);
|
||||
}
|
||||
} catch (templateError) {
|
||||
if (!isMounted || signal.aborted) {
|
||||
return;
|
||||
}
|
||||
console.warn('Failed to fetch template detail:', templateError);
|
||||
setErrorMessage('Failed to load template');
|
||||
setLooks([]);
|
||||
setSelectedId(null);
|
||||
} finally {
|
||||
if (isMounted && !signal.aborted) {
|
||||
setLoadingLooks(false);
|
||||
}
|
||||
}
|
||||
|
||||
if (!isMounted) {
|
||||
return;
|
||||
}
|
||||
|
||||
if (frames.length === 0) {
|
||||
setErrorMessage('No templates available');
|
||||
}
|
||||
|
||||
setLooks(frames);
|
||||
|
||||
const preferredId =
|
||||
frames.find(frame => frame.id === id)?.id ??
|
||||
frames[0]?.id ??
|
||||
fallbackTemplateId ??
|
||||
null;
|
||||
|
||||
setSelectedId(preferredId);
|
||||
setLoadingLooks(false);
|
||||
};
|
||||
|
||||
hydrateLooks();
|
||||
|
||||
return () => {
|
||||
isMounted = false;
|
||||
abortControllerRef.current?.abort();
|
||||
};
|
||||
}, [id]);
|
||||
}, [id, getCachedData, setCachedData, preloadImage]);
|
||||
|
||||
const current = useMemo(
|
||||
() => {
|
||||
if (looks.length === 0) {
|
||||
return null;
|
||||
}
|
||||
const current = useMemo(() => {
|
||||
if (looks.length === 0) {
|
||||
return null;
|
||||
}
|
||||
|
||||
if (!selectedId) {
|
||||
return looks[0];
|
||||
}
|
||||
if (!selectedId) {
|
||||
return looks[0];
|
||||
}
|
||||
|
||||
return looks.find(look => look.id === selectedId) ?? looks[0];
|
||||
},
|
||||
[looks, selectedId],
|
||||
);
|
||||
return looks.find(look => look.id === selectedId) ?? looks[0];
|
||||
}, [looks, selectedId]);
|
||||
|
||||
const resolvedTemplateId = current?.id ?? (typeof id === 'string' ? id : '');
|
||||
const heroImageUri = current?.uri ?? FALLBACK_PREVIEW;
|
||||
const infoTitle = current?.title ?? 'Loading template';
|
||||
|
||||
const handleRetry = useCallback(() => {
|
||||
cache.delete(`template:${id}`);
|
||||
cache.delete(`tag:${current?.title}`);
|
||||
setErrorMessage(null);
|
||||
setLoadingLooks(true);
|
||||
|
||||
const event = new Event('retry');
|
||||
window.dispatchEvent(event);
|
||||
}, [id, current?.title]);
|
||||
|
||||
useEffect(() => {
|
||||
const handleRetryEvent = () => {
|
||||
const newController = new AbortController();
|
||||
abortControllerRef.current = newController;
|
||||
};
|
||||
|
||||
window.addEventListener('retry', handleRetryEvent);
|
||||
return () => {
|
||||
window.removeEventListener('retry', handleRetryEvent);
|
||||
};
|
||||
}, []);
|
||||
|
||||
const handleGenerate = () => {
|
||||
if (!resolvedTemplateId) {
|
||||
return;
|
||||
@@ -198,6 +298,9 @@ export default function TemplateDetailScreen() {
|
||||
{!loadingLooks && errorMessage && (
|
||||
<View style={styles.errorBanner}>
|
||||
<Text style={styles.errorText}>{errorMessage}</Text>
|
||||
<TouchableOpacity style={styles.retryButton} onPress={handleRetry}>
|
||||
<Text style={styles.retryLabel}>Retry</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
)}
|
||||
|
||||
@@ -208,23 +311,14 @@ export default function TemplateDetailScreen() {
|
||||
showsHorizontalScrollIndicator={false}
|
||||
contentContainerStyle={styles.carouselContent}
|
||||
>
|
||||
{looks.map(look => {
|
||||
const isActive = look.id === selectedId;
|
||||
return (
|
||||
<TouchableOpacity
|
||||
key={look.id}
|
||||
activeOpacity={0.85}
|
||||
onPress={() => setSelectedId(look.id)}
|
||||
style={[
|
||||
styles.previewFrame,
|
||||
{ borderColor: isActive ? look.accent : 'rgba(255,255,255,0.08)' },
|
||||
isActive && styles.previewFrameActive,
|
||||
]}
|
||||
>
|
||||
<Image source={{ uri: look.uri }} style={styles.previewImage} />
|
||||
</TouchableOpacity>
|
||||
);
|
||||
})}
|
||||
{looks.map(look => (
|
||||
<PreviewFrame
|
||||
key={look.id}
|
||||
frame={look}
|
||||
isActive={look.id === selectedId}
|
||||
onPress={() => setSelectedId(look.id)}
|
||||
/>
|
||||
))}
|
||||
</ScrollView>
|
||||
) : (
|
||||
!loadingLooks && (
|
||||
@@ -334,6 +428,19 @@ const styles = StyleSheet.create({
|
||||
color: '#FF8A8A',
|
||||
fontSize: 13,
|
||||
fontWeight: '600',
|
||||
marginBottom: 8,
|
||||
},
|
||||
retryButton: {
|
||||
backgroundColor: 'rgba(255, 94, 94, 0.2)',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
borderRadius: 12,
|
||||
alignSelf: 'flex-start',
|
||||
},
|
||||
retryLabel: {
|
||||
color: '#FF8A8A',
|
||||
fontSize: 13,
|
||||
fontWeight: '700',
|
||||
},
|
||||
headerBar: {
|
||||
flexDirection: 'row',
|
||||
|
||||
@@ -1,7 +1,5 @@
|
||||
import { Feather } from '@expo/vector-icons';
|
||||
import * as ImagePicker from 'expo-image-picker';
|
||||
import { Stack, useLocalSearchParams, useRouter } from 'expo-router';
|
||||
import { UploadCloud } from 'lucide-react';
|
||||
import React, { useEffect, useState } from 'react';
|
||||
import {
|
||||
ActivityIndicator,
|
||||
@@ -10,7 +8,6 @@ import {
|
||||
ScrollView,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TextInput,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
@@ -20,27 +17,12 @@ export const unstable_settings = {
|
||||
headerShown: false,
|
||||
};
|
||||
|
||||
import { DynamicForm } from '@/components/forms/dynamic-form';
|
||||
import { BackButton } from '@/components/ui/back-button';
|
||||
import { DynamicFormField } from '@/components/forms/dynamic-form-field';
|
||||
import { getTemplateById } from '@/lib/api/templates';
|
||||
import { Template } from '@/lib/types/template';
|
||||
import { RunFormSchema, RunTemplateData } from '@/lib/types/template-run';
|
||||
import { transformWorkflowToFormSchema, validateFormSchema } from '@/lib/utils/form-schema-transformer';
|
||||
|
||||
interface Step1FormData {
|
||||
characterImage: string;
|
||||
productImage: string;
|
||||
script: string;
|
||||
}
|
||||
|
||||
interface Step2FormData extends RunTemplateData { }
|
||||
|
||||
interface FormData {
|
||||
step1: Step1FormData;
|
||||
step2: Step2FormData;
|
||||
}
|
||||
|
||||
type UploadFieldKey = 'characterImage' | 'productImage';
|
||||
import { getUserBalance, chargeUser } from '@/lib/api/balance';
|
||||
import { runTemplate } from '@/lib/api/template-runs';
|
||||
import { Template, TemplateGraphNode } from '@/lib/types/template';
|
||||
|
||||
const FALLBACK_PREVIEW =
|
||||
'https://images.unsplash.com/photo-1542204165-0198c1e21a3b?auto=format&fit=crop&w=1200&q=80';
|
||||
@@ -51,20 +33,9 @@ export default function TemplateFormScreen() {
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const router = useRouter();
|
||||
|
||||
const [currentStep, setCurrentStep] = useState(1);
|
||||
const [template, setTemplate] = useState<Template | null>(null);
|
||||
const [formSchema, setFormSchema] = useState<RunFormSchema>({ fields: [] });
|
||||
const [loading, setLoading] = useState(true);
|
||||
|
||||
const [formData, setFormData] = useState<FormData>({
|
||||
step1: {
|
||||
characterImage: '',
|
||||
productImage: '',
|
||||
script: '',
|
||||
},
|
||||
step2: {},
|
||||
});
|
||||
|
||||
const [formData, setFormData] = useState<Record<string, any>>({});
|
||||
const [errors, setErrors] = useState<Record<string, string>>({});
|
||||
const [isSubmitting, setIsSubmitting] = useState(false);
|
||||
|
||||
@@ -79,169 +50,149 @@ export default function TemplateFormScreen() {
|
||||
|
||||
if (templateResponse.success && templateResponse.data) {
|
||||
setTemplate(templateResponse.data);
|
||||
|
||||
if (templateResponse.data.formSchema) {
|
||||
try {
|
||||
const rawData =
|
||||
typeof templateResponse.data.formSchema === 'string'
|
||||
? JSON.parse(templateResponse.data.formSchema as string)
|
||||
: templateResponse.data.formSchema;
|
||||
|
||||
const formConfig = transformWorkflowToFormSchema(rawData);
|
||||
|
||||
if (validateFormSchema(formConfig)) {
|
||||
setFormSchema(formConfig);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to parse form schema:', error);
|
||||
// 初始化表单数据
|
||||
const initialData: Record<string, any> = {};
|
||||
templateResponse.data.formSchema?.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('Error', 'Failed to load data. Please retry later.');
|
||||
Alert.alert('错误', '加载数据失败，请稍后重试');
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
const validateStep1 = (): boolean => {
|
||||
const validateForm = (): boolean => {
|
||||
if (!template?.formSchema?.startNodes) return false;
|
||||
|
||||
const newErrors: Record<string, string> = {};
|
||||
|
||||
if (!formData.step1.characterImage) {
|
||||
newErrors.characterImage = 'Please upload the character image';
|
||||
}
|
||||
template.formSchema.startNodes.forEach((node: TemplateGraphNode) => {
|
||||
const { id, data } = node;
|
||||
const { actionData, label } = data;
|
||||
const value = formData[id];
|
||||
|
||||
if (!formData.step1.productImage) {
|
||||
newErrors.productImage = 'Please upload the product image';
|
||||
}
|
||||
|
||||
if (!formData.step1.script.trim()) {
|
||||
newErrors.script = 'Please provide the character script';
|
||||
}
|
||||
// 检查必填项
|
||||
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;
|
||||
};
|
||||
|
||||
const handleStep1Next = () => {
|
||||
if (validateStep1()) {
|
||||
setCurrentStep(2);
|
||||
}
|
||||
};
|
||||
|
||||
const handleStep2Prev = () => {
|
||||
setCurrentStep(1);
|
||||
};
|
||||
|
||||
const handleStep2Submit = async () => {
|
||||
const handleSubmit = async () => {
|
||||
if (!template) return;
|
||||
if (!validateForm()) {
|
||||
Alert.alert('提示', '请完善所有必填项');
|
||||
return;
|
||||
}
|
||||
|
||||
setIsSubmitting(true);
|
||||
|
||||
try {
|
||||
const combinedData = {
|
||||
...formData.step1,
|
||||
...formData.step2,
|
||||
};
|
||||
// 1. 检查余额
|
||||
const balanceResponse = await getUserBalance();
|
||||
|
||||
console.log('Submitting template payload:', combinedData);
|
||||
if (!balanceResponse.success) {
|
||||
Alert.alert('错误', '无法获取账户余额');
|
||||
return;
|
||||
}
|
||||
|
||||
Alert.alert('Success', 'Template configuration saved.', [
|
||||
const balance = balanceResponse.data.balance;
|
||||
const requiredAmount = template.costPrice || 0;
|
||||
|
||||
if (balance < requiredAmount) {
|
||||
Alert.alert(
|
||||
'余额不足',
|
||||
`当前余额: ${balance}\n所需费用: ${requiredAmount}\n请先充值`,
|
||||
[
|
||||
{ text: '取消', style: 'cancel' },
|
||||
{ text: '去充值', onPress: () => router.push('/recharge') },
|
||||
]
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
// 2. 扣费
|
||||
const chargeResponse = await chargeUser({
|
||||
amount: requiredAmount,
|
||||
description: `生成视频 - ${template.title}`,
|
||||
metadata: {
|
||||
templateId: template.id,
|
||||
templateTitle: template.title,
|
||||
},
|
||||
});
|
||||
|
||||
if (!chargeResponse.success) {
|
||||
Alert.alert('错误', '扣费失败，请稍后重试');
|
||||
return;
|
||||
}
|
||||
|
||||
const transactionId = chargeResponse.data.id;
|
||||
|
||||
// 3. 调用 template run
|
||||
const runResponse = await runTemplate(id, formData);
|
||||
|
||||
if (!runResponse.success) {
|
||||
Alert.alert('错误', '生成任务创建失败');
|
||||
return;
|
||||
}
|
||||
|
||||
const generationId = runResponse.data;
|
||||
|
||||
// 4. 跳转到结果页面
|
||||
Alert.alert('成功', '视频生成任务已创建', [
|
||||
{
|
||||
text: 'OK',
|
||||
text: '查看结果',
|
||||
onPress: () => {
|
||||
router.push(`/templates/${id}/run`);
|
||||
router.push(`/result?generationId=${generationId}`);
|
||||
},
|
||||
},
|
||||
]);
|
||||
} catch (error) {
|
||||
console.error('Submission failed:', error);
|
||||
Alert.alert('Error', 'Submission failed. Please retry later.');
|
||||
Alert.alert('错误', '提交失败，请稍后重试');
|
||||
} finally {
|
||||
setIsSubmitting(false);
|
||||
}
|
||||
};
|
||||
|
||||
const handleImagePick = async (field: UploadFieldKey) => {
|
||||
try {
|
||||
const permission = await ImagePicker.requestMediaLibraryPermissionsAsync();
|
||||
const renderFormFields = () => {
|
||||
if (!template?.formSchema?.startNodes) return null;
|
||||
|
||||
if (!permission.granted) {
|
||||
Alert.alert(
|
||||
'Permission Required',
|
||||
'Please allow photo library access in Settings to upload images.',
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const result = await ImagePicker.launchImageLibraryAsync({
|
||||
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
||||
allowsEditing: true,
|
||||
quality: 0.9,
|
||||
});
|
||||
|
||||
if (result.canceled || !result.assets || result.assets.length === 0) {
|
||||
return;
|
||||
}
|
||||
|
||||
const uri = result.assets[0].uri;
|
||||
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
step1: {
|
||||
...prev.step1,
|
||||
[field]: uri,
|
||||
},
|
||||
}));
|
||||
|
||||
if (errors[field]) {
|
||||
setErrors(prev => ({
|
||||
...prev,
|
||||
[field]: '',
|
||||
}));
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to pick image:', error);
|
||||
Alert.alert('Error', 'Unable to pick image. Please try again later.');
|
||||
}
|
||||
};
|
||||
|
||||
const renderUploadCard = (
|
||||
field: UploadFieldKey,
|
||||
label: string,
|
||||
description: string,
|
||||
) => {
|
||||
const value = formData.step1[field];
|
||||
|
||||
return (
|
||||
<View style={styles.uploadItem}>
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.9}
|
||||
onPress={() => handleImagePick(field)}
|
||||
style={[
|
||||
styles.uploadCard,
|
||||
value && styles.uploadCardFilled,
|
||||
errors[field] && styles.uploadCardError,
|
||||
]}
|
||||
>
|
||||
{value ? (
|
||||
<Image source={{ uri: value }} style={styles.uploadImage} />
|
||||
) : (
|
||||
<>
|
||||
<View style={styles.uploadIconWrap}>
|
||||
<UploadCloud size={26} color="#D1FF00" strokeWidth={1.4} />
|
||||
</View>
|
||||
<Text style={styles.uploadLabel}>{label}</Text>
|
||||
<Text style={styles.uploadDescription}>{description}</Text>
|
||||
</>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
{errors[field] ? (
|
||||
<Text style={styles.inlineError}>{errors[field]}</Text>
|
||||
) : null}
|
||||
</View>
|
||||
);
|
||||
return template.formSchema.startNodes.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 renderStep1 = () => {
|
||||
@@ -259,11 +210,10 @@ export default function TemplateFormScreen() {
|
||||
</View>
|
||||
|
||||
<Text style={styles.heroTitle}>
|
||||
{(template?.title ?? 'Insert your product into an ASMR video').toUpperCase()}
|
||||
{(template?.title ?? 'AI视频生成').toUpperCase()}
|
||||
</Text>
|
||||
<Text style={styles.heroSubtitle}>
|
||||
{template?.description ||
|
||||
'ASMR-Add-On keeps your original image the same while seamlessly adding our uploaded product into the ASMR scene.'}
|
||||
{template?.description || '使用AI技术快速生成专业视频内容'}
|
||||
</Text>
|
||||
|
||||
<View style={styles.previewStage}>
|
||||
@@ -273,130 +223,27 @@ export default function TemplateFormScreen() {
|
||||
</View>
|
||||
</View>
|
||||
|
||||
<View style={styles.uploadRow}>
|
||||
{renderUploadCard(
|
||||
'characterImage',
|
||||
'UPLOAD CHARACTER IMAGE',
|
||||
'PNG, JPG or Paste from clipboard',
|
||||
)}
|
||||
{renderUploadCard(
|
||||
'productImage',
|
||||
'UPLOAD CHARACTER IMAGE',
|
||||
'PNG, JPG or Paste from clipboard',
|
||||
)}
|
||||
</View>
|
||||
|
||||
<View style={styles.promptField}>
|
||||
<TextInput
|
||||
style={[styles.promptInput, errors.script && styles.promptInputError]}
|
||||
placeholder="What should your character say?"
|
||||
placeholderTextColor="rgba(255, 255, 255, 0.5)"
|
||||
value={formData.step1.script}
|
||||
onChangeText={text => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
step1: {
|
||||
...prev.step1,
|
||||
script: text,
|
||||
},
|
||||
}));
|
||||
if (errors.script) {
|
||||
setErrors(prev => ({
|
||||
...prev,
|
||||
script: '',
|
||||
}));
|
||||
}
|
||||
}}
|
||||
multiline
|
||||
textAlignVertical="top"
|
||||
/>
|
||||
{errors.script ? <Text style={styles.inlineError}>{errors.script}</Text> : null}
|
||||
</View>
|
||||
{renderFormFields()}
|
||||
|
||||
<TouchableOpacity
|
||||
style={styles.generateButton}
|
||||
style={[styles.generateButton, isSubmitting && styles.generateButtonDisabled]}
|
||||
activeOpacity={0.88}
|
||||
onPress={handleStep1Next}
|
||||
onPress={handleSubmit}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
<Feather name="star" size={20} color="#050505" />
|
||||
<Text style={styles.generateLabel}>Generate Video</Text>
|
||||
{isSubmitting ? (
|
||||
<ActivityIndicator size="small" color="#050505" />
|
||||
) : (
|
||||
<>
|
||||
<Feather name="star" size={20} color="#050505" />
|
||||
<Text style={styles.generateLabel}>生成视频</Text>
|
||||
</>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
);
|
||||
};
|
||||
|
||||
const renderStep2 = () => (
|
||||
<View style={styles.step2Wrapper}>
|
||||
<View style={styles.topBar}>
|
||||
<BackButton onPress={handleStep2Prev} />
|
||||
<Text style={styles.stepIndicator}>STEP 2 OF 2</Text>
|
||||
</View>
|
||||
|
||||
<Text style={styles.step2Title}>Run Parameters</Text>
|
||||
<Text style={styles.step2Subtitle}>
|
||||
Fine-tune the details so the ASMR video delivers the mood you expect.
|
||||
</Text>
|
||||
|
||||
<View style={styles.step2FormShell}>
|
||||
{formSchema.fields.length > 0 ? (
|
||||
<DynamicForm
|
||||
schema={formSchema}
|
||||
initialData={formData.step2}
|
||||
onDataChange={data => {
|
||||
setFormData(prev => ({
|
||||
...prev,
|
||||
step2: data,
|
||||
}));
|
||||
}}
|
||||
/>
|
||||
) : (
|
||||
<View style={styles.emptyState}>
|
||||
<Text style={styles.emptyIcon}>📋</Text>
|
||||
<Text style={styles.emptyText}>No extra parameters</Text>
|
||||
<Text style={styles.emptyDescription}>
|
||||
This template is ready to go—start generating the ASMR experience instantly.
|
||||
</Text>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
const renderBottomActions = () => {
|
||||
if (currentStep !== 2) {
|
||||
return null;
|
||||
}
|
||||
|
||||
return (
|
||||
<SafeAreaView edges={['bottom']} style={styles.bottomSafeArea}>
|
||||
<View style={styles.bottomActions}>
|
||||
<TouchableOpacity
|
||||
style={styles.secondaryButton}
|
||||
activeOpacity={0.85}
|
||||
onPress={handleStep2Prev}
|
||||
>
|
||||
<Text style={styles.secondaryLabel}>Back</Text>
|
||||
</TouchableOpacity>
|
||||
<TouchableOpacity
|
||||
style={styles.submitButton}
|
||||
activeOpacity={0.9}
|
||||
onPress={handleStep2Submit}
|
||||
disabled={isSubmitting}
|
||||
>
|
||||
{isSubmitting ? (
|
||||
<ActivityIndicator color="#050505" />
|
||||
) : (
|
||||
<>
|
||||
<Feather name="zap" size={18} color="#050505" />
|
||||
<Text style={styles.submitLabel}>Generate Video</Text>
|
||||
</>
|
||||
)}
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
};
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<>
|
||||
@@ -420,9 +267,8 @@ export default function TemplateFormScreen() {
|
||||
|
||||
<View style={styles.canvas}>
|
||||
<SafeAreaView style={styles.safeArea} edges={['top', 'left', 'right']}>
|
||||
{currentStep === 1 ? renderStep1() : renderStep2()}
|
||||
{renderStep1()}
|
||||
</SafeAreaView>
|
||||
{renderBottomActions()}
|
||||
</View>
|
||||
</>
|
||||
);
|
||||
@@ -512,86 +358,6 @@ const styles = StyleSheet.create({
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
uploadRow: {
|
||||
flexDirection: 'row',
|
||||
gap: 18,
|
||||
marginBottom: 24,
|
||||
},
|
||||
uploadItem: {
|
||||
flex: 1,
|
||||
},
|
||||
uploadCard: {
|
||||
borderRadius: 28,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.08)',
|
||||
backgroundColor: 'rgba(17, 19, 24, 0.95)',
|
||||
paddingHorizontal: 20,
|
||||
paddingVertical: 28,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
minHeight: 188,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
uploadCardFilled: {
|
||||
paddingHorizontal: 0,
|
||||
paddingVertical: 0,
|
||||
},
|
||||
uploadCardError: {
|
||||
borderColor: '#FF6B6B',
|
||||
},
|
||||
uploadIconWrap: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 22,
|
||||
backgroundColor: 'rgba(209, 255, 0, 0.12)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
marginBottom: 16,
|
||||
},
|
||||
uploadLabel: {
|
||||
fontSize: 14,
|
||||
fontWeight: '700',
|
||||
letterSpacing: 0.6,
|
||||
color: '#FFFFFF',
|
||||
textAlign: 'center',
|
||||
textTransform: 'uppercase',
|
||||
marginBottom: 6,
|
||||
},
|
||||
uploadDescription: {
|
||||
fontSize: 12,
|
||||
lineHeight: 16,
|
||||
color: 'rgba(255, 255, 255, 0.55)',
|
||||
textAlign: 'center',
|
||||
},
|
||||
uploadImage: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
resizeMode: 'cover',
|
||||
},
|
||||
promptField: {
|
||||
marginBottom: 18,
|
||||
},
|
||||
promptInput: {
|
||||
borderRadius: 28,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.08)',
|
||||
backgroundColor: 'rgba(17, 19, 24, 0.95)',
|
||||
minHeight: 140,
|
||||
paddingHorizontal: 22,
|
||||
paddingVertical: 22,
|
||||
fontSize: 15,
|
||||
lineHeight: 22,
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
promptInputError: {
|
||||
borderColor: '#FF6B6B',
|
||||
},
|
||||
inlineError: {
|
||||
marginTop: 8,
|
||||
fontSize: 12,
|
||||
color: '#FF6B6B',
|
||||
letterSpacing: 0.2,
|
||||
},
|
||||
generateButton: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
@@ -601,100 +367,13 @@ const styles = StyleSheet.create({
|
||||
backgroundColor: '#D1FF00',
|
||||
gap: 10,
|
||||
},
|
||||
generateButtonDisabled: {
|
||||
opacity: 0.6,
|
||||
},
|
||||
generateLabel: {
|
||||
fontSize: 17,
|
||||
fontWeight: '700',
|
||||
letterSpacing: 0.4,
|
||||
color: '#050505',
|
||||
},
|
||||
step2Wrapper: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 24,
|
||||
paddingBottom: 24,
|
||||
},
|
||||
step2Title: {
|
||||
fontSize: 22,
|
||||
fontWeight: '700',
|
||||
color: '#FFFFFF',
|
||||
letterSpacing: 0.6,
|
||||
marginBottom: 10,
|
||||
},
|
||||
step2Subtitle: {
|
||||
fontSize: 13,
|
||||
lineHeight: 18,
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
marginBottom: 20,
|
||||
},
|
||||
step2FormShell: {
|
||||
flex: 1,
|
||||
borderRadius: 32,
|
||||
backgroundColor: 'rgba(17, 19, 24, 0.78)',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
emptyState: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 32,
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
emptyIcon: {
|
||||
fontSize: 48,
|
||||
marginBottom: 16,
|
||||
color: '#FFFFFF',
|
||||
},
|
||||
emptyText: {
|
||||
fontSize: 18,
|
||||
fontWeight: '600',
|
||||
color: '#FFFFFF',
|
||||
marginBottom: 8,
|
||||
},
|
||||
emptyDescription: {
|
||||
fontSize: 14,
|
||||
lineHeight: 20,
|
||||
color: 'rgba(255, 255, 255, 0.6)',
|
||||
textAlign: 'center',
|
||||
},
|
||||
bottomSafeArea: {
|
||||
backgroundColor: '#050505',
|
||||
},
|
||||
bottomActions: {
|
||||
flexDirection: 'row',
|
||||
gap: 16,
|
||||
paddingHorizontal: 24,
|
||||
paddingTop: 12,
|
||||
paddingBottom: 24,
|
||||
borderTopWidth: 1,
|
||||
borderTopColor: 'rgba(255, 255, 255, 0.08)',
|
||||
},
|
||||
secondaryButton: {
|
||||
flex: 1,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255, 255, 255, 0.2)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
secondaryLabel: {
|
||||
fontSize: 15,
|
||||
fontWeight: '600',
|
||||
color: 'rgba(255, 255, 255, 0.78)',
|
||||
letterSpacing: 0.2,
|
||||
},
|
||||
submitButton: {
|
||||
flex: 1.6,
|
||||
height: 56,
|
||||
borderRadius: 28,
|
||||
backgroundColor: '#D1FF00',
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
gap: 10,
|
||||
},
|
||||
submitLabel: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
color: '#050505',
|
||||
letterSpacing: 0.3,
|
||||
},
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user