-// Multi-language Object Recognition App using React Native (Expo)

import React, { useState } from "react"; import { View, Text, Button, Image, ActivityIndicator, ScrollView } from "react-native"; import * as ImagePicker from "expo-image-picker"; import * as FileSystem from "expo-file-system"; import * as Speech from "expo-speech";

export default function App() { const [image, setImage] = useState(null); const [label, setLabel] = useState(""); const [translations, setTranslations] = useState({}); const [loading, setLoading] = useState(false);

const supportedLanguages = ["en", "es", "fr", "de", "hi", "ar", "zh"];

const pickImage = async () => { const result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images, allowsEditing: true, quality: 1, }); if (!result.canceled) { setImage(result.assets[0].uri); processImage(result.assets[0].uri); } };

const processImage = async (uri) => { setLoading(true); try { const base64 = await FileSystem.readAsStringAsync(uri, { encoding: FileSystem.EncodingType.Base64, });

const visionResponse = await fetch( "https://vision.googleapis.com/v1/images:annotate?key=YOUR_GOOGLE_VISION_API_KEY", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ requests: [ { image: { content: base64 }, features: [{ type: "LABEL_DETECTION", maxResults: 1 }], }, ], }), } );

const visionData = await visionResponse.json(); const detectedLabel = visionData.responses[0]?.labelAnnotations?.[0]?.description || "Unknown"; setLabel(detectedLabel);

const translationPromises = supportedLanguages.map(async (lang) => { const response = await fetch( https://translation.googleapis.com/language/translate/v2?key=YOUR_GOOGLE_TRANSLATE_API_KEY, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ q: detectedLabel, target: lang }), } ); const data = await response.json(); return { [lang]: data.data.translations[0].translatedText }; });

const results = await Promise.all(translationPromises); const finalTranslations = Object.assign({}, ...results); setTranslations(finalTranslations); } catch (e) { console.error(e); } setLoading(false);

};

return ( <ScrollView contentContainerStyle={{ flexGrow: 1, justifyContent: "center", padding: 20 }}> {image && <Image source={{ uri: image }} style={{ width: 300, height: 300, marginTop: 20 }} />} {loading ? ( <ActivityIndicator size="large" color="#0000ff" style={{ marginTop: 20 }} /> ) : ( label && ( <View style={{ marginTop: 20 }}> <Text style={{ fontSize: 24, fontWeight: "bold" }}>Detected: {label} {Object.entries(translations).map(([lang, translated]) => ( <Text key={lang} style={{ fontSize: 18, marginTop: 5 }}> {lang.toUpperCase()}: {translated} ))} <Button title="Speak" onPress={() => Speech.speak(label)} /> ) )} ); }

👋 Hi, I’m @Optimus29

• 👀 I’m interested in ...
• 🌱 I’m currently learning ...
• 💞️ I’m looking to collaborate on ...
• 📫 How to reach me ...
• 😄 Pronouns: ...
• ⚡ Fun fact: ...