Initial commit: expo-popcore project
This commit is contained in:
imeepos
597
app/template/[id]/run.tsx
Normal file
597
app/template/[id]/run.tsx
Normal file
@@ -0,0 +1,597 @@
|
||||
import Ionicons from '@expo/vector-icons/Ionicons';
|
||||
import { ResultDisplay } from '@/components/template-run/result-display';
|
||||
import { ThemedText } from '@/components/themed-text';
|
||||
import { ThemedView } from '@/components/themed-view';
|
||||
import { useTemplateRun } from '@/hooks/use-template-run';
|
||||
import { getTemplateById } from '@/lib/api/templates';
|
||||
import { subscription } from '@/lib/auth/client';
|
||||
import { Template } from '@/lib/types/template';
|
||||
import { RunTemplateData } from '@/lib/types/template-run';
|
||||
import { Image } from 'expo-image';
|
||||
import { LinearGradient } from 'expo-linear-gradient';
|
||||
import { Stack, useGlobalSearchParams, useLocalSearchParams, useRouter } from 'expo-router';
|
||||
import { useCallback, useEffect, useMemo, useState } from 'react';
|
||||
import { Alert, BackHandler, ScrollView, StyleSheet, TouchableOpacity, View } from 'react-native';
|
||||
import { useSafeAreaInsets } from 'react-native-safe-area-context';
|
||||
|
||||
type RunStep = 'progress' | 'result';
|
||||
|
||||
function transformFormData(formData: RunTemplateData): RunTemplateData {
|
||||
const transformed: RunTemplateData = {};
|
||||
|
||||
Object.entries(formData).forEach(([fieldName, value]) => {
|
||||
if (fieldName.startsWith('image_')) {
|
||||
transformed[fieldName] = {
|
||||
url: value,
|
||||
type: 'image',
|
||||
};
|
||||
} else if (fieldName.startsWith('text_')) {
|
||||
transformed[fieldName] = {
|
||||
content: value,
|
||||
type: 'text',
|
||||
};
|
||||
} else if (fieldName.startsWith('video_')) {
|
||||
transformed[fieldName] = {
|
||||
url: value,
|
||||
type: 'video',
|
||||
};
|
||||
} else if (fieldName.startsWith('color_')) {
|
||||
transformed[fieldName] = {
|
||||
value,
|
||||
type: 'color',
|
||||
};
|
||||
} else {
|
||||
transformed[fieldName] = value;
|
||||
}
|
||||
});
|
||||
|
||||
return transformed;
|
||||
}
|
||||
|
||||
export default function TemplateRunScreen() {
|
||||
const { id } = useLocalSearchParams<{ id: string }>();
|
||||
const router = useRouter();
|
||||
const globalParams = useGlobalSearchParams<{ formData?: string }>();
|
||||
const insets = useSafeAreaInsets();
|
||||
|
||||
const [template, setTemplate] = useState<Template | null>(null);
|
||||
const [loading, setLoading] = useState(true);
|
||||
const [currentStep, setCurrentStep] = useState<RunStep>('progress');
|
||||
const [hasStarted, setHasStarted] = useState(false);
|
||||
const [formImageUrls, setFormImageUrls] = useState<string[]>([]);
|
||||
|
||||
const {
|
||||
progress,
|
||||
result,
|
||||
error,
|
||||
isLoading,
|
||||
executeTemplate,
|
||||
cancelRun,
|
||||
cleanup,
|
||||
} = useTemplateRun({
|
||||
onSuccess: () => {
|
||||
setCurrentStep('result');
|
||||
},
|
||||
onError: (runError) => {
|
||||
Alert.alert('运行失败', runError.message);
|
||||
},
|
||||
});
|
||||
|
||||
useEffect(() => {
|
||||
const loadTemplate = async () => {
|
||||
if (!id) return;
|
||||
|
||||
try {
|
||||
setLoading(true);
|
||||
const response = await getTemplateById(id);
|
||||
if (response && response.success && response.data) {
|
||||
setTemplate(response.data as any);
|
||||
} else {
|
||||
throw new Error('模板不存在');
|
||||
}
|
||||
} catch (templateError) {
|
||||
console.error('加载模板失败:', templateError);
|
||||
Alert.alert('错误', '无法加载模板，请稍后重试。');
|
||||
router.back();
|
||||
} finally {
|
||||
setLoading(false);
|
||||
}
|
||||
};
|
||||
|
||||
loadTemplate();
|
||||
}, [id, router]);
|
||||
|
||||
useEffect(() => {
|
||||
if (template && !hasStarted && globalParams.formData) {
|
||||
try {
|
||||
const formData = JSON.parse(globalParams.formData) as RunTemplateData;
|
||||
const images = Object.entries(formData)
|
||||
.filter(([fieldName, value]) => fieldName.startsWith('image_') && typeof value === 'string' && value.length > 0)
|
||||
.map(([, value]) => value as string);
|
||||
setFormImageUrls(images);
|
||||
setHasStarted(true);
|
||||
|
||||
const executeWithData = async () => {
|
||||
try {
|
||||
const list = await subscription.list();
|
||||
const listData = list.data ?? [];
|
||||
if (listData.length === 0) {
|
||||
Alert.alert('未检测到订阅', '请先完成订阅后再尝试生成内容。');
|
||||
router.back();
|
||||
return;
|
||||
}
|
||||
|
||||
const subscriptionId = listData[0]?.stripeSubscriptionId;
|
||||
if (!subscriptionId) {
|
||||
Alert.alert('订阅信息缺失', '当前订阅缺少 Stripe 订阅标识，无法记录用量。');
|
||||
router.back();
|
||||
return;
|
||||
}
|
||||
|
||||
const identify = await subscription.meterEvent({
|
||||
event_name: 'token_usage',
|
||||
payload: {
|
||||
value: '100',
|
||||
},
|
||||
});
|
||||
|
||||
const identifier = identify.data?.identifier;
|
||||
if (!identifier) {
|
||||
Alert.alert('用量记录失败', '无法生成用量凭证，请稍后重试。');
|
||||
router.back();
|
||||
return;
|
||||
}
|
||||
|
||||
const transformedData = transformFormData(formData);
|
||||
await executeTemplate(template.id, transformedData);
|
||||
} catch (executeError) {
|
||||
console.error('执行模板失败:', executeError);
|
||||
Alert.alert('执行失败', '运行模板时出现异常，请稍后重试。');
|
||||
router.back();
|
||||
}
|
||||
};
|
||||
|
||||
executeWithData();
|
||||
} catch (parseError) {
|
||||
console.error('解析表单数据失败:', parseError);
|
||||
Alert.alert('数据错误', '表单数据格式错误，请重新提交。');
|
||||
router.back();
|
||||
}
|
||||
}
|
||||
}, [template, hasStarted, globalParams.formData, executeTemplate, router]);
|
||||
|
||||
const handleRequestExit = useCallback(() => {
|
||||
if (currentStep === 'progress' && isLoading) {
|
||||
Alert.alert(
|
||||
'确认退出',
|
||||
'任务正在运行中，确定要退出吗？',
|
||||
[
|
||||
{ text: '继续等待', style: 'cancel' },
|
||||
{
|
||||
text: '停止并返回',
|
||||
style: 'destructive',
|
||||
onPress: () => {
|
||||
cancelRun();
|
||||
router.back();
|
||||
},
|
||||
},
|
||||
]
|
||||
);
|
||||
return true;
|
||||
}
|
||||
|
||||
router.back();
|
||||
return true;
|
||||
}, [cancelRun, currentStep, isLoading, router]);
|
||||
|
||||
useEffect(() => {
|
||||
const subscription = BackHandler.addEventListener('hardwareBackPress', handleRequestExit);
|
||||
return () => subscription.remove();
|
||||
}, [handleRequestExit]);
|
||||
|
||||
useEffect(() => cleanup, [cleanup]);
|
||||
|
||||
const handleRerun = useCallback(() => {
|
||||
router.back();
|
||||
}, [router]);
|
||||
|
||||
const progressMeta = useMemo(() => {
|
||||
const rawProgress = typeof progress.progress === 'number' ? progress.progress : 0;
|
||||
const normalized = Math.max(0, Math.min(rawProgress, 100));
|
||||
return {
|
||||
normalized,
|
||||
percentLabel: Math.round(normalized),
|
||||
fillWidth: normalized <= 0 ? 0 : Math.min(Math.max(normalized, 8), 100),
|
||||
};
|
||||
}, [progress.progress]);
|
||||
|
||||
const narrative = useMemo(() => {
|
||||
const fallbackTitle = 'Insert Your Product Into An ASMR Video';
|
||||
const fallbackDescription =
|
||||
'ASMR-Add-On keeps your original image the same while seamlessly adding our uploaded product into the ASMR scene.';
|
||||
|
||||
const rawTitle = template?.titleEn ?? template?.title ?? fallbackTitle;
|
||||
const rawDescription = template?.descriptionEn ?? template?.description ?? fallbackDescription;
|
||||
|
||||
return {
|
||||
title: rawTitle.toUpperCase(),
|
||||
description: rawDescription,
|
||||
};
|
||||
}, [template]);
|
||||
|
||||
const imagery = useMemo(() => {
|
||||
const fallback = template?.previewUrl ?? template?.coverImageUrl ?? undefined;
|
||||
const primary = formImageUrls[0] ?? fallback;
|
||||
const secondary = formImageUrls[1] ?? template?.previewUrl ?? primary;
|
||||
|
||||
return {
|
||||
hero: primary,
|
||||
overlay: secondary,
|
||||
preview: template?.previewUrl ?? primary ?? fallback,
|
||||
};
|
||||
}, [formImageUrls, template]);
|
||||
|
||||
const renderProgressStep = () => (
|
||||
<ScrollView
|
||||
style={styles.scroll}
|
||||
contentContainerStyle={[
|
||||
styles.progressContent,
|
||||
{
|
||||
paddingTop: insets.top + 16,
|
||||
paddingBottom: insets.bottom + 40,
|
||||
},
|
||||
]}
|
||||
showsVerticalScrollIndicator={false}
|
||||
>
|
||||
<TouchableOpacity
|
||||
onPress={handleRequestExit}
|
||||
activeOpacity={0.8}
|
||||
style={[styles.backButton, styles.backButtonProgress]}
|
||||
>
|
||||
<Ionicons name="chevron-back" size={22} color="#FFFFFF" />
|
||||
</TouchableOpacity>
|
||||
|
||||
<View style={styles.titleSection}>
|
||||
<ThemedText style={styles.title} lightColor="#FFFFFF" darkColor="#FFFFFF">
|
||||
{narrative.title}
|
||||
</ThemedText>
|
||||
<ThemedText
|
||||
style={styles.subtitle}
|
||||
lightColor="rgba(255,255,255,0.68)"
|
||||
darkColor="rgba(255,255,255,0.68)"
|
||||
>
|
||||
{narrative.description}
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.heroContainer}>
|
||||
{imagery.hero ? (
|
||||
<Image source={{ uri: imagery.hero }} style={styles.heroImage} contentFit="cover" />
|
||||
) : (
|
||||
<View style={styles.heroPlaceholder} />
|
||||
)}
|
||||
|
||||
{imagery.overlay && (
|
||||
<View style={styles.overlayImageFrame}>
|
||||
<Image source={{ uri: imagery.overlay }} style={styles.overlayImage} contentFit="cover" />
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
|
||||
<LinearGradient colors={['#1E1E21', '#101015']} start={{ x: 0, y: 0 }} end={{ x: 1, y: 1 }} style={styles.progressCard}>
|
||||
{imagery.preview ? (
|
||||
<View style={styles.previewFrame}>
|
||||
<Image source={{ uri: imagery.preview }} style={styles.previewImage} contentFit="cover" />
|
||||
</View>
|
||||
) : (
|
||||
<View style={[styles.previewFrame, styles.previewPlaceholder]} />
|
||||
)}
|
||||
|
||||
<View style={styles.progressCopy}>
|
||||
<ThemedText style={styles.progressHeadline} lightColor="#FFFFFF" darkColor="#FFFFFF">
|
||||
✨ 正在加载生成中...
|
||||
</ThemedText>
|
||||
<ThemedText
|
||||
style={styles.progressMessage}
|
||||
lightColor="rgba(255,255,255,0.72)"
|
||||
darkColor="rgba(255,255,255,0.72)"
|
||||
>
|
||||
{progress.message || '正在为你织造 ASMR 场景，请稍候片刻。'}
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.progressBarArea}>
|
||||
<View style={styles.progressTrack}>
|
||||
{progressMeta.fillWidth > 0 && (
|
||||
<View style={[styles.progressFill, { width: `${progressMeta.fillWidth}%` }]}>
|
||||
<LinearGradient
|
||||
colors={['#78F8FF', '#49A7FF']}
|
||||
start={{ x: 0, y: 0 }}
|
||||
end={{ x: 1, y: 0 }}
|
||||
style={StyleSheet.absoluteFill}
|
||||
/>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
<ThemedText
|
||||
style={styles.progressPercent}
|
||||
lightColor="rgba(255,255,255,0.6)"
|
||||
darkColor="rgba(255,255,255,0.6)"
|
||||
>
|
||||
{progressMeta.percentLabel}%
|
||||
</ThemedText>
|
||||
</View>
|
||||
</LinearGradient>
|
||||
|
||||
<TouchableOpacity
|
||||
activeOpacity={0.85}
|
||||
style={styles.primaryButton}
|
||||
onPress={() => {
|
||||
Alert.alert('生成进行中', '系统正在为你制作视频，请耐心等待。');
|
||||
}}
|
||||
>
|
||||
<ThemedText style={styles.primaryButtonText} lightColor="#050505" darkColor="#050505">
|
||||
Generate Video
|
||||
</ThemedText>
|
||||
</TouchableOpacity>
|
||||
</ScrollView>
|
||||
);
|
||||
|
||||
const renderResultStep = () => (
|
||||
<View
|
||||
style={[
|
||||
styles.resultContainer,
|
||||
{
|
||||
paddingTop: insets.top + 16,
|
||||
paddingBottom: Math.max(insets.bottom, 24),
|
||||
},
|
||||
]}
|
||||
>
|
||||
<View style={styles.resultHeader}>
|
||||
<TouchableOpacity
|
||||
onPress={handleRequestExit}
|
||||
activeOpacity={0.8}
|
||||
style={[styles.backButton, styles.backButtonResult]}
|
||||
>
|
||||
<Ionicons name="chevron-back" size={22} color="#FFFFFF" />
|
||||
</TouchableOpacity>
|
||||
<ThemedText style={styles.resultTitle} lightColor="#FFFFFF" darkColor="#FFFFFF">
|
||||
生成结果
|
||||
</ThemedText>
|
||||
</View>
|
||||
|
||||
<View style={styles.resultBody}>
|
||||
{result ? (
|
||||
<ResultDisplay result={result} onRerun={handleRerun} />
|
||||
) : (
|
||||
<View style={styles.stateContainer}>
|
||||
<ThemedText style={styles.stateText} lightColor="rgba(255,255,255,0.7)" darkColor="rgba(255,255,255,0.7)">
|
||||
正在整理结果，请稍候...
|
||||
</ThemedText>
|
||||
</View>
|
||||
)}
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
|
||||
if (loading) {
|
||||
return (
|
||||
<ThemedView style={styles.screen} lightColor="#050505" darkColor="#050505">
|
||||
<Stack.Screen options={{ headerShown: false }} />
|
||||
<View style={styles.stateContainer}>
|
||||
<ThemedText style={styles.stateText} lightColor="rgba(255,255,255,0.7)" darkColor="rgba(255,255,255,0.7)">
|
||||
加载中...
|
||||
</ThemedText>
|
||||
</View>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
if (error && !template) {
|
||||
return (
|
||||
<ThemedView style={styles.screen} lightColor="#050505" darkColor="#050505">
|
||||
<Stack.Screen options={{ headerShown: false }} />
|
||||
<View style={styles.stateContainer}>
|
||||
<ThemedText style={styles.stateText} lightColor="rgba(255,255,255,0.7)" darkColor="rgba(255,255,255,0.7)">
|
||||
{error.message}
|
||||
</ThemedText>
|
||||
</View>
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
return (
|
||||
<ThemedView style={styles.screen} lightColor="#050505" darkColor="#050505">
|
||||
<Stack.Screen
|
||||
options={{
|
||||
headerShown: false,
|
||||
gestureEnabled: currentStep !== 'progress' || !isLoading,
|
||||
}}
|
||||
/>
|
||||
|
||||
{currentStep === 'progress' && renderProgressStep()}
|
||||
{currentStep === 'result' && renderResultStep()}
|
||||
</ThemedView>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
screen: {
|
||||
flex: 1,
|
||||
backgroundColor: '#050505',
|
||||
},
|
||||
scroll: {
|
||||
flex: 1,
|
||||
},
|
||||
progressContent: {
|
||||
paddingHorizontal: 24,
|
||||
gap: 28,
|
||||
},
|
||||
backButton: {
|
||||
width: 44,
|
||||
height: 44,
|
||||
borderRadius: 22,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.08)',
|
||||
backgroundColor: 'rgba(255,255,255,0.05)',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
},
|
||||
backButtonProgress: {
|
||||
alignSelf: 'flex-start',
|
||||
},
|
||||
backButtonResult: {
|
||||
marginRight: 12,
|
||||
},
|
||||
titleSection: {
|
||||
gap: 12,
|
||||
},
|
||||
title: {
|
||||
fontSize: 20,
|
||||
fontWeight: '700',
|
||||
letterSpacing: 0.8,
|
||||
lineHeight: 28,
|
||||
},
|
||||
subtitle: {
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
},
|
||||
heroContainer: {
|
||||
position: 'relative',
|
||||
borderRadius: 24,
|
||||
overflow: 'hidden',
|
||||
backgroundColor: '#121212',
|
||||
},
|
||||
heroImage: {
|
||||
width: '100%',
|
||||
aspectRatio: 1.58,
|
||||
},
|
||||
heroPlaceholder: {
|
||||
width: '100%',
|
||||
aspectRatio: 1.58,
|
||||
backgroundColor: '#1F1F20',
|
||||
},
|
||||
overlayImageFrame: {
|
||||
position: 'absolute',
|
||||
left: 18,
|
||||
bottom: 18,
|
||||
width: 72,
|
||||
height: 72,
|
||||
borderRadius: 18,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 2,
|
||||
borderColor: '#050505',
|
||||
shadowColor: '#000000',
|
||||
shadowOpacity: 0.4,
|
||||
shadowRadius: 8,
|
||||
shadowOffset: { width: 0, height: 6 },
|
||||
elevation: 6,
|
||||
},
|
||||
overlayImage: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
progressCard: {
|
||||
borderRadius: 28,
|
||||
paddingVertical: 28,
|
||||
paddingHorizontal: 24,
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.06)',
|
||||
gap: 24,
|
||||
},
|
||||
previewFrame: {
|
||||
alignSelf: 'center',
|
||||
width: 96,
|
||||
height: 148,
|
||||
borderRadius: 24,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 1,
|
||||
borderColor: 'rgba(255,255,255,0.12)',
|
||||
backgroundColor: '#0F0F12',
|
||||
},
|
||||
previewImage: {
|
||||
width: '100%',
|
||||
height: '100%',
|
||||
},
|
||||
previewPlaceholder: {
|
||||
backgroundColor: '#18181C',
|
||||
},
|
||||
progressCopy: {
|
||||
alignItems: 'center',
|
||||
gap: 6,
|
||||
paddingHorizontal: 8,
|
||||
},
|
||||
progressHeadline: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
},
|
||||
progressMessage: {
|
||||
fontSize: 13,
|
||||
lineHeight: 20,
|
||||
textAlign: 'center',
|
||||
},
|
||||
progressBarArea: {
|
||||
gap: 12,
|
||||
},
|
||||
progressTrack: {
|
||||
height: 8,
|
||||
borderRadius: 4,
|
||||
backgroundColor: 'rgba(255,255,255,0.08)',
|
||||
overflow: 'hidden',
|
||||
},
|
||||
progressFill: {
|
||||
height: '100%',
|
||||
borderRadius: 4,
|
||||
overflow: 'hidden',
|
||||
},
|
||||
progressPercent: {
|
||||
fontSize: 12,
|
||||
fontWeight: '600',
|
||||
textAlign: 'right',
|
||||
},
|
||||
primaryButton: {
|
||||
height: 60,
|
||||
borderRadius: 30,
|
||||
backgroundColor: '#D7FF1F',
|
||||
alignItems: 'center',
|
||||
justifyContent: 'center',
|
||||
shadowColor: '#D7FF1F',
|
||||
shadowOpacity: 0.4,
|
||||
shadowRadius: 16,
|
||||
shadowOffset: { width: 0, height: 12 },
|
||||
elevation: 4,
|
||||
},
|
||||
primaryButtonText: {
|
||||
fontSize: 16,
|
||||
fontWeight: '700',
|
||||
letterSpacing: 0.6,
|
||||
},
|
||||
resultContainer: {
|
||||
flex: 1,
|
||||
paddingHorizontal: 24,
|
||||
gap: 24,
|
||||
},
|
||||
resultHeader: {
|
||||
flexDirection: 'row',
|
||||
alignItems: 'center',
|
||||
},
|
||||
resultTitle: {
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
letterSpacing: 0.4,
|
||||
},
|
||||
resultBody: {
|
||||
flex: 1,
|
||||
},
|
||||
stateContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 32,
|
||||
},
|
||||
stateText: {
|
||||
fontSize: 15,
|
||||
lineHeight: 22,
|
||||
textAlign: 'center',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user