-
Notifications
You must be signed in to change notification settings - Fork 29
/
createimage.js
120 lines (111 loc) · 2.62 KB
/
createimage.js
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
108
109
110
111
112
113
114
115
116
117
118
119
120
import React, { useState } from 'react';
import {
View,
TextInput,
ScrollView,
Image,
StyleSheet,
} from 'react-native';
import colors from '../components/colors';
import Button_1 from '../components/button1';
import { calcHeight } from '../utility/utilities-funtions';
const CreateImage = () => {
//
// useState
const [prompt, setPrompt] = useState('');
const [images, setImages] = useState([]);
//
// Funtion
const generateImages = async () => {
try {
const response = await fetch(
'https://openai80.p.rapidapi.com/images/generations',
{
method: 'POST',
headers: {
'content-type': 'application/json',
'X-RapidAPI-Key':
'525dd849e4msh114d97f8b5be502p15edc0jsn0846420c16a0',
'X-RapidAPI-Host': 'openai80.p.rapidapi.com',
},
body: JSON.stringify({
prompt,
n: 2,
size: '1024x1024',
}),
}
);
const json = await response.json();
setImages(json.data);
} catch (error) {
console.error(error);
}
};
//
// render
return (
<View style={styles.container}>
<ScrollView showsVerticalScrollIndicator={false}>
<View style={styles.innerContainer}>
{images &&
images.map((image, index) => (
<View style={styles.imageContainer} key={index}>
<Image source={{ uri: image.url }} style={styles.image} />
</View>
))}
</View>
<TextInput
style={styles.input}
placeholder='Enter a prompt for the image'
value={prompt}
editable={true}
onChangeText={(text) => setPrompt(text)}
placeholderTextColor={'#ffffff'}
/>
<Button_1
title='Generate Images'
onPress={generateImages}
style={styles.button}
/>
</ScrollView>
</View>
);
};
const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#F5F5F5',
padding: 10,
},
innerContainer: {
height: calcHeight(0.85),
backgroundColor: '#F5F5F5',
padding: 10,
},
input: {
width: '100%',
borderWidth: 1,
borderColor: '#ccc',
paddingHorizontal: 16,
paddingVertical: 12,
marginBottom: 16,
borderRadius: 4,
backgroundColor: colors.darkGrey,
fontSize: 18,
color: colors.white,
},
button: {
marginBottom: 10,
},
imageContainer: {
flex: 1,
alignItems: 'center',
marginTop: 10,
},
image: {
width: 300,
height: 300,
resizeMode: 'contain',
},
});
export default CreateImage;