App for study
Budget: $250 – $750 USD
// SnapStudy - Basic UI with Language Toggle (React Native with Expo)
import React, { useState } from 'react'; import { Text, View, Button, Image, TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native'; import * as ImagePicker from 'expo-image-picker';
export default function App() { const [image, setImage] = useState(null); const [loading, setLoading] = useState(false); const [summary, setSummary] = useState(''); const [language, setLanguage] = useState('en'); // 'en' or 'ne'
const pickImage = async () => { let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images, quality: 1, base64: true, });
if (!result.cancelled) {
setImage(result.uri);
summarizeImage(result.base64);
}
};
const summarizeImage = async (base64) => { setLoading(true); setSummary('');
try {
const response = await fetch('https://your-api-url.com/summarize', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ image: base64, language: language })
});
const data = await response.json();
setSummary(data.summary);
} catch (error) {
setSummary(language === 'ne' ? 'त्रुटि भयो।' : 'Something went wrong.');
}
setLoading(false);
};
const toggleLanguage = () => { setLanguage(language === 'en' ? 'ne' : 'en'); };
return ( <View style={styles.container}> <TouchableOpacity onPress={toggleLanguage} style={styles.langBtn}> <Text style={styles.langText}>{language === 'en' ? 'Switch to Nepali' : 'अंग्रेजीमा स्विच गर्नुहोस्'}</Text> </TouchableOpacity>
<Button title={language === 'en' ? 'Pick an Image' : 'तस्बिर छान्नुहोस्'} onPress={pickImage} />
{image && <Image source={{ uri: image }} style={styles.image} />}
{loading && <ActivityIndicator size="large" color="#0000ff" />}
<Text style={styles.summary}>{summary}</Text>
</View>
); }
const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 20 }, image: { width: 250, height: 250, marginVertical: 20 }, summary: { fontSize: 16, marginTop: 20, textAlign: 'center' }, langBtn: { padding: 10, backgroundColor: '#ddd', marginBottom: 15, borderRadius: 8 }, langText: { fontSize: 16 }, });
import React, { useState } from 'react'; import { Text, View, Button, Image, TouchableOpacity, StyleSheet, ActivityIndicator } from 'react-native'; import * as ImagePicker from 'expo-image-picker';
export default function App() { const [image, setImage] = useState(null); const [loading, setLoading] = useState(false); const [summary, setSummary] = useState(''); const [language, setLanguage] = useState('en'); // 'en' or 'ne'
const pickImage = async () => { let result = await ImagePicker.launchImageLibraryAsync({ mediaTypes: ImagePicker.MediaTypeOptions.Images, quality: 1, base64: true, });
if (!result.cancelled) {
setImage(result.uri);
summarizeImage(result.base64);
}
};
const summarizeImage = async (base64) => { setLoading(true); setSummary('');
try {
const response = await fetch('https://your-api-url.com/summarize', {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ image: base64, language: language })
});
const data = await response.json();
setSummary(data.summary);
} catch (error) {
setSummary(language === 'ne' ? 'त्रुटि भयो।' : 'Something went wrong.');
}
setLoading(false);
};
const toggleLanguage = () => { setLanguage(language === 'en' ? 'ne' : 'en'); };
return ( <View style={styles.container}> <TouchableOpacity onPress={toggleLanguage} style={styles.langBtn}> <Text style={styles.langText}>{language === 'en' ? 'Switch to Nepali' : 'अंग्रेजीमा स्विच गर्नुहोस्'}</Text> </TouchableOpacity>
<Button title={language === 'en' ? 'Pick an Image' : 'तस्बिर छान्नुहोस्'} onPress={pickImage} />
{image && <Image source={{ uri: image }} style={styles.image} />}
{loading && <ActivityIndicator size="large" color="#0000ff" />}
<Text style={styles.summary}>{summary}</Text>
</View>
); }
const styles = StyleSheet.create({ container: { flex: 1, alignItems: 'center', justifyContent: 'center', padding: 20 }, image: { width: 250, height: 250, marginVertical: 20 }, summary: { fontSize: 16, marginTop: 20, textAlign: 'center' }, langBtn: { padding: 10, backgroundColor: '#ddd', marginBottom: 15, borderRadius: 8 }, langText: { fontSize: 16 }, });