State.init({ imgUrl: "", fetchStatusError: false, prompt: "", isLoading: false, }); const uploadFileUpdateState = (prompt) => { asyncFetch("https://genadrop.onrender.com/api/v1/general/generate-image", { method: "POST", mode: "cors", credentials: "same-origin", headers: { "Content-Type": "application/json", Authorization: "Basic dXNlcm5hbWViYXNpYzpwYXNzd29yZGJhc2lj", }, body: JSON.stringify({ prompt, n: 1, size: "512x512", }), }) .then((res) => { console.log(res); State.update({ prompt: "", isLoading: false }); if (res.body.resultCode === 0) { State.update({ imgUrl: res.body.content[0].url }); } }) .catch((err) => { State.update({ fetchStatusError: true }); }); }; const filesOnChange = () => { State.update({ imgUrl: "", isLoading: true }); if (state.prompt) { uploadFileUpdateState(state.prompt); } else { uploadFileUpdateState("a man in blue sky"); } }; const handleInputChange = (event) => { State.update({ prompt: event.target.value }); }; const Container = styled.div` display: flex; flex-direction: column; align-items: center; padding-top: 100px; `; const ImageContainer = styled.div` width: 100%; max-width: 400px; margin-bottom: 20px; `; const Images = styled.img` width: 100%; height: auto; object-fit: cover; `; const DefaultImage = styled.div` width: 100%; height: 512px; background-color: #f0f0f0; display: flex; justify-content: center; align-items: center; `; const DefaultImageText = styled.span` font-size: 18px; color: #555; `; const TextArea = styled.textarea` width: 100%; max-width: 400px; height: 150px; padding: 10px; font-size: 16px; border: 1px solid #ccc; border-radius: 4px; resize: vertical; @media (max-width: 768px) { max-width: 300px; height: 100px; font-size: 14px; } `; const Button = styled.button` padding: 10px 20px; padding-top: 10px; font-size: 16px; border: none; border-radius: 4px; background-color: #0d99ff; color: #fff; cursor: pointer; @media (max-width: 768px) { padding: 8px 16px; font-size: 14px; } `; return ( <Container> <ImageContainer> {state.imgUrl ? ( <Images src={state.imgUrl} alt="Preview" /> ) : ( <DefaultImage> {state.fetchStatusError ? ( <DefaultImageText>Failed generate image!</DefaultImageText> ) : ( <DefaultImageText> Generated image will appear here! </DefaultImageText> )} </DefaultImage> )} </ImageContainer> <TextArea placeholder="a man in blue sky...." value={state.prompt} onChange={handleInputChange} /> <div style={{ paddingTop: 20, paddingBottom: 20 }}> <Button onClick={filesOnChange}> {state.isLoading ? "Generating Image...." : "Generate Image"} </Button> </div> </Container> );