feat: add food camera and recognition features
- Implemented FoodCameraScreen for capturing food images with meal type selection. - Created FoodRecognitionScreen for processing and recognizing food images. - Added Redux slice for managing food recognition state and results. - Integrated image upload functionality to cloud storage. - Enhanced UI components for better user experience during food recognition. - Updated FloatingFoodOverlay to navigate to the new camera screen. - Added food recognition service for API interaction. - Improved styling and layout for various components.
This commit is contained in:
richarjiang
426
app/food/camera.tsx
Normal file
426
app/food/camera.tsx
Normal file
@@ -0,0 +1,426 @@
|
||||
import { HeaderBar } from '@/components/ui/HeaderBar';
|
||||
import { Colors } from '@/constants/Colors';
|
||||
import { Ionicons } from '@expo/vector-icons';
|
||||
import { CameraType, CameraView, useCameraPermissions } from 'expo-camera';
|
||||
import * as ImagePicker from 'expo-image-picker';
|
||||
import { useLocalSearchParams, useRouter } from 'expo-router';
|
||||
import React, { useRef, useState } from 'react';
|
||||
import {
|
||||
Alert,
|
||||
Dimensions,
|
||||
StatusBar,
|
||||
StyleSheet,
|
||||
Text,
|
||||
TouchableOpacity,
|
||||
View,
|
||||
} from 'react-native';
|
||||
import { SafeAreaView } from 'react-native-safe-area-context';
|
||||
|
||||
type MealType = 'breakfast' | 'lunch' | 'dinner' | 'snack';
|
||||
|
||||
const { width: screenWidth, height: screenHeight } = Dimensions.get('window');
|
||||
|
||||
export default function FoodCameraScreen() {
|
||||
const router = useRouter();
|
||||
const params = useLocalSearchParams<{ mealType?: string }>();
|
||||
const cameraRef = useRef<CameraView>(null);
|
||||
|
||||
const [currentMealType, setCurrentMealType] = useState<MealType>(
|
||||
(params.mealType as MealType) || 'dinner'
|
||||
);
|
||||
const [facing, setFacing] = useState<CameraType>('back');
|
||||
const [permission, requestPermission] = useCameraPermissions();
|
||||
|
||||
// 餐次选择选项
|
||||
const mealOptions = [
|
||||
{ key: 'breakfast' as const, label: '早餐', icon: '☀️' },
|
||||
{ key: 'lunch' as const, label: '午餐', icon: '🌤️' },
|
||||
{ key: 'dinner' as const, label: '晚餐', icon: '🌙' },
|
||||
{ key: 'snack' as const, label: '加餐', icon: '🍎' },
|
||||
];
|
||||
|
||||
if (!permission) {
|
||||
// 权限仍在加载中
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<HeaderBar
|
||||
title="食物拍摄"
|
||||
onBack={() => router.back()}
|
||||
transparent={true}
|
||||
/>
|
||||
<View style={styles.loadingContainer}>
|
||||
<Text style={styles.loadingText}>正在加载相机...</Text>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
if (!permission.granted) {
|
||||
// 没有相机权限
|
||||
return (
|
||||
<SafeAreaView style={styles.container}>
|
||||
<HeaderBar
|
||||
title="食物拍摄"
|
||||
onBack={() => router.back()}
|
||||
backColor='#ffffff'
|
||||
/>
|
||||
<View style={styles.permissionContainer}>
|
||||
<Ionicons name="camera-outline" size={64} color="#999" />
|
||||
<Text style={styles.permissionTitle}>需要相机权限</Text>
|
||||
<Text style={styles.permissionText}>
|
||||
为了拍摄食物，需要访问您的相机
|
||||
</Text>
|
||||
<TouchableOpacity
|
||||
style={styles.permissionButton}
|
||||
onPress={requestPermission}
|
||||
>
|
||||
<Text style={styles.permissionButtonText}>授权访问</Text>
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</SafeAreaView>
|
||||
);
|
||||
}
|
||||
|
||||
// 切换相机前后摄像头
|
||||
function toggleCameraFacing() {
|
||||
setFacing(current => (current === 'back' ? 'front' : 'back'));
|
||||
}
|
||||
|
||||
// 拍摄照片
|
||||
const takePicture = async () => {
|
||||
if (cameraRef.current) {
|
||||
try {
|
||||
const photo = await cameraRef.current.takePictureAsync({
|
||||
quality: 0.8,
|
||||
base64: false,
|
||||
});
|
||||
|
||||
if (photo) {
|
||||
// 跳转到食物识别页面
|
||||
console.log('照片拍摄成功:', photo.uri);
|
||||
router.replace(`/food/food-recognition?imageUri=${encodeURIComponent(photo.uri)}&mealType=${currentMealType}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('拍照失败:', error);
|
||||
Alert.alert('拍照失败', '请重试');
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// 从相册选择照片
|
||||
const pickImageFromGallery = async () => {
|
||||
try {
|
||||
const result = await ImagePicker.launchImageLibraryAsync({
|
||||
mediaTypes: ImagePicker.MediaTypeOptions.Images,
|
||||
allowsEditing: true,
|
||||
aspect: [4, 3],
|
||||
quality: 0.8,
|
||||
});
|
||||
|
||||
if (!result.canceled && result.assets[0]) {
|
||||
const imageUri = result.assets[0].uri;
|
||||
console.log('从相册选择的照片:', imageUri);
|
||||
router.push(`/food/food-recognition?imageUri=${encodeURIComponent(imageUri)}&mealType=${currentMealType}`);
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('选择照片失败:', error);
|
||||
Alert.alert('选择失败', '请重试');
|
||||
}
|
||||
};
|
||||
|
||||
// AR功能（暂时显示提示）
|
||||
const handleARPress = () => {
|
||||
Alert.alert('AR功能', 'AR食物识别功能即将推出');
|
||||
};
|
||||
|
||||
// 餐次选择
|
||||
const handleMealTypeChange = (mealType: MealType) => {
|
||||
setCurrentMealType(mealType);
|
||||
};
|
||||
|
||||
return (
|
||||
<View style={styles.container}>
|
||||
<StatusBar barStyle="light-content" backgroundColor="transparent" translucent />
|
||||
|
||||
{/* 头部导航 */}
|
||||
<HeaderBar
|
||||
title=""
|
||||
onBack={() => router.back()}
|
||||
transparent={true}
|
||||
backColor={'#fff'}
|
||||
/>
|
||||
|
||||
{/* 主要内容区域 */}
|
||||
<View style={styles.contentContainer}>
|
||||
{/* 取景框容器 */}
|
||||
<View style={styles.cameraFrameContainer}>
|
||||
<Text style={styles.hintText}>确保食物在取景框内</Text>
|
||||
|
||||
{/* 相机取景框 */}
|
||||
<View style={styles.cameraFrame}>
|
||||
<CameraView
|
||||
ref={cameraRef}
|
||||
style={styles.cameraView}
|
||||
facing={facing}
|
||||
>
|
||||
{/* 取景框装饰 */}
|
||||
<View style={styles.viewfinderOverlay}>
|
||||
<View style={[styles.corner, styles.topLeft]} />
|
||||
<View style={[styles.corner, styles.topRight]} />
|
||||
<View style={[styles.corner, styles.bottomLeft]} />
|
||||
<View style={[styles.corner, styles.bottomRight]} />
|
||||
</View>
|
||||
</CameraView>
|
||||
</View>
|
||||
</View>
|
||||
|
||||
{/* 餐次选择器 */}
|
||||
<View style={styles.mealTypeContainer}>
|
||||
{mealOptions.map((option) => (
|
||||
<TouchableOpacity
|
||||
key={option.key}
|
||||
style={[
|
||||
styles.mealTypeButton,
|
||||
currentMealType === option.key && styles.mealTypeButtonActive
|
||||
]}
|
||||
onPress={() => handleMealTypeChange(option.key)}
|
||||
>
|
||||
<Text style={styles.mealTypeIcon}>{option.icon}</Text>
|
||||
<Text style={[
|
||||
styles.mealTypeText,
|
||||
currentMealType === option.key && styles.mealTypeTextActive
|
||||
]}>
|
||||
{option.label}
|
||||
</Text>
|
||||
</TouchableOpacity>
|
||||
))}
|
||||
</View>
|
||||
|
||||
{/* 底部控制栏 */}
|
||||
<View style={styles.bottomContainer}>
|
||||
<View style={styles.controlsContainer}>
|
||||
{/* 拍照按钮 */}
|
||||
<TouchableOpacity style={styles.captureButton} onPress={takePicture}>
|
||||
<View style={styles.captureButtonInner} />
|
||||
</TouchableOpacity>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
</View>
|
||||
);
|
||||
}
|
||||
|
||||
const styles = StyleSheet.create({
|
||||
container: {
|
||||
flex: 1,
|
||||
backgroundColor: '#000',
|
||||
},
|
||||
contentContainer: {
|
||||
flex: 1,
|
||||
paddingTop: 100,
|
||||
},
|
||||
cameraFrameContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 20,
|
||||
},
|
||||
cameraFrame: {
|
||||
width: 300,
|
||||
height: 300,
|
||||
borderRadius: 20,
|
||||
overflow: 'hidden',
|
||||
borderWidth: 3,
|
||||
borderColor: '#FFF',
|
||||
backgroundColor: '#000',
|
||||
},
|
||||
cameraView: {
|
||||
flex: 1,
|
||||
},
|
||||
viewfinderOverlay: {
|
||||
flex: 1,
|
||||
position: 'relative',
|
||||
},
|
||||
camera: {
|
||||
flex: 1,
|
||||
},
|
||||
loadingContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#000',
|
||||
},
|
||||
loadingText: {
|
||||
color: '#FFF',
|
||||
fontSize: 16,
|
||||
},
|
||||
permissionContainer: {
|
||||
flex: 1,
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
backgroundColor: '#000',
|
||||
paddingHorizontal: 40,
|
||||
},
|
||||
permissionTitle: {
|
||||
color: '#FFF',
|
||||
fontSize: 20,
|
||||
fontWeight: '600',
|
||||
marginTop: 20,
|
||||
marginBottom: 10,
|
||||
},
|
||||
permissionText: {
|
||||
color: '#CCC',
|
||||
fontSize: 16,
|
||||
textAlign: 'center',
|
||||
marginBottom: 30,
|
||||
lineHeight: 22,
|
||||
},
|
||||
permissionButton: {
|
||||
backgroundColor: Colors.light.primary,
|
||||
paddingHorizontal: 24,
|
||||
paddingVertical: 12,
|
||||
borderRadius: 24,
|
||||
},
|
||||
permissionButtonText: {
|
||||
color: '#FFF',
|
||||
fontSize: 16,
|
||||
fontWeight: '600',
|
||||
},
|
||||
header: {
|
||||
position: 'absolute',
|
||||
top: 0,
|
||||
left: 0,
|
||||
right: 0,
|
||||
zIndex: 10,
|
||||
},
|
||||
hintText: {
|
||||
color: '#FFF',
|
||||
fontSize: 16,
|
||||
fontWeight: '500',
|
||||
marginBottom: 20,
|
||||
textAlign: 'center',
|
||||
},
|
||||
corner: {
|
||||
position: 'absolute',
|
||||
width: 30,
|
||||
height: 30,
|
||||
borderColor: '#FFF',
|
||||
borderWidth: 3,
|
||||
},
|
||||
topLeft: {
|
||||
top: 0,
|
||||
left: 0,
|
||||
borderRightWidth: 0,
|
||||
borderBottomWidth: 0,
|
||||
},
|
||||
topRight: {
|
||||
top: 0,
|
||||
right: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderBottomWidth: 0,
|
||||
},
|
||||
bottomLeft: {
|
||||
bottom: 0,
|
||||
left: 0,
|
||||
borderRightWidth: 0,
|
||||
borderTopWidth: 0,
|
||||
},
|
||||
bottomRight: {
|
||||
bottom: 0,
|
||||
right: 0,
|
||||
borderLeftWidth: 0,
|
||||
borderTopWidth: 0,
|
||||
},
|
||||
mealTypeContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
paddingHorizontal: 20,
|
||||
marginVertical: 20,
|
||||
},
|
||||
mealTypeButton: {
|
||||
alignItems: 'center',
|
||||
paddingHorizontal: 16,
|
||||
paddingVertical: 8,
|
||||
marginHorizontal: 8,
|
||||
borderRadius: 20,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
minWidth: 70,
|
||||
},
|
||||
mealTypeButtonActive: {
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.9)',
|
||||
},
|
||||
mealTypeIcon: {
|
||||
fontSize: 20,
|
||||
marginBottom: 2,
|
||||
},
|
||||
mealTypeText: {
|
||||
color: '#FFF',
|
||||
fontSize: 12,
|
||||
fontWeight: '500',
|
||||
},
|
||||
mealTypeTextActive: {
|
||||
color: '#333',
|
||||
},
|
||||
bottomContainer: {
|
||||
paddingBottom: 40,
|
||||
},
|
||||
controlsContainer: {
|
||||
flexDirection: 'row',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
paddingVertical: 20,
|
||||
paddingHorizontal: 40,
|
||||
},
|
||||
controlButton: {
|
||||
alignItems: 'center',
|
||||
},
|
||||
controlButtonText: {
|
||||
color: '#FFF',
|
||||
fontSize: 12,
|
||||
marginTop: 8,
|
||||
fontWeight: '500',
|
||||
},
|
||||
albumButton: {
|
||||
width: 50,
|
||||
height: 50,
|
||||
borderRadius: 10,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderWidth: 2,
|
||||
borderColor: '#FFF',
|
||||
},
|
||||
captureButton: {
|
||||
width: 80,
|
||||
height: 80,
|
||||
borderRadius: 40,
|
||||
backgroundColor: '#FFF',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderWidth: 4,
|
||||
borderColor: 'rgba(255, 255, 255, 0.3)',
|
||||
},
|
||||
captureButtonInner: {
|
||||
width: 60,
|
||||
height: 60,
|
||||
borderRadius: 30,
|
||||
backgroundColor: '#FFF',
|
||||
borderWidth: 2,
|
||||
borderColor: '#333',
|
||||
},
|
||||
arButton: {
|
||||
width: 50,
|
||||
height: 50,
|
||||
borderRadius: 25,
|
||||
backgroundColor: 'rgba(255, 255, 255, 0.2)',
|
||||
justifyContent: 'center',
|
||||
alignItems: 'center',
|
||||
borderWidth: 2,
|
||||
borderColor: '#FFF',
|
||||
},
|
||||
arButtonText: {
|
||||
color: '#FFF',
|
||||
fontSize: 14,
|
||||
fontWeight: 'bold',
|
||||
},
|
||||
});
|
||||
Reference in New Issue
Block a user