Spaces:
Runtime error
Runtime error
File size: 2,958 Bytes
0924f9b |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 |
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'
},
});
|