Spaces:
Runtime error
Runtime error
import { useState } from 'react'; | |
import { ActivityIndicator, Button, Image, StyleSheet, TextInput } from 'react-native'; | |
import { Text, View } from '../components/Themed'; | |
import { RootTabScreenProps } from '../types'; | |
function blobToBase64(blob: Blob): Promise<string | ArayBuffer> { | |
return new Promise((resolve, reject) => { | |
const reader = new FileReader(); | |
reader.onloadend = () => resolve(reader.result); | |
reader.readAsDataURL(blob); | |
reader.onerror = error => reject(error) | |
}); | |
} | |
export default function TabOneScreen({ navigation }: RootTabScreenProps<'TabOne'>) { | |
const [text, setText] = useState(''); | |
const [imageData, setImageData] = useState<string | null>(null); | |
const [isLoading, setIsLoading] = useState<bool>(false); | |
const onPress = () => { | |
const prompt = text; | |
const seed = 1337; | |
const steps = 30; | |
const url = `http://78.83.125.177:5000/generate-image?seed=${seed}&steps=${steps}&prompt=${prompt}`; | |
// const url = 'http://localhost:3000/ava.jpeg' | |
console.log('fetching'); | |
setIsLoading(true); | |
fetch(url) | |
.then(async response => { | |
// debugger; | |
const blob = await response.blob(); | |
const base64Blob = await blobToBase64(blob) | |
const validBlob = "data:image/png;base64," + base64Blob.substr(base64Blob.indexOf(',') + 1); | |
setImageData(validBlob); | |
console.log('done!'); | |
setIsLoading(false); | |
}) | |
.catch(error => { | |
console.error(error); | |
setIsLoading(false); | |
}); | |
} | |
return ( | |
<View style={styles.container}> | |
<Text style={styles.title}>Generate AI Image</Text> | |
<TextInput | |
style={styles.input} | |
placeholder="Write a prompt! (e.g. cute cat on mars)" | |
onChangeText={newText => setText(newText)} | |
onSubmitEditing={_ => onPress()} | |
defaultValue={text} | |
/> | |
<Button title="Generate" onPress={onPress}></Button> | |
<View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" /> | |
{imageData && <Image source={{uri: imageData, scale: 1}} style={styles.image} />} | |
{isLoading && ( | |
<View style={styles.loading}> | |
<ActivityIndicator size='large' /> | |
</View> | |
)} | |
</View> | |
); | |
} | |
const styles = StyleSheet.create({ | |
image: { | |
width: 512, | |
height: 512, | |
maxWidth: '100%', | |
resizeMode: 'contain', | |
}, | |
input: { | |
borderWidth: 3, | |
borderRadius: 3, | |
padding: '10px', | |
width: '100%', | |
margin: '10px', | |
}, | |
container: { | |
padding: 10, | |
flex: 1, | |
alignItems: 'center', | |
justifyContent: 'center', | |
}, | |
title: { | |
fontSize: 20, | |
fontWeight: 'bold', | |
}, | |
separator: { | |
marginVertical: 30, | |
height: 1, | |
width: '80%', | |
}, | |
loading: { | |
backgroundColor: 'rgba(255, 255, 255, 0.5)', | |
position: 'absolute', | |
left: 0, | |
right: 0, | |
top: 0, | |
bottom: 0, | |
alignItems: 'center', | |
justifyContent: 'center' | |
}, | |
}); | |