Hugging Face's logo

Spaces:
ichko
/
text-brush
Runtime error

App Files Community
text-brush
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'
  },
});