Spaces:
Runtime error
Runtime error
File size: 1,858 Bytes
a6439b7 |
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 |
import React, { useState } from "react";
import Api from './api';
const Original = () => {
const [loading, setLoading] = useState(false);
const [output, setOutput] = useState(null);
const handleSubmit = async (event) => {
event.preventDefault();
setLoading(true);
const input = event.target.elements.input.value;
const imageInput = event.target.elements.imageInput.files[0];
const negativePrompt = event.target.elements.negativePrompt.value;
const response = await fetch(
"https://79c67b7467ac6c1889.gradio.live/",
{
method: "POST",
headers: {
"Content-Type": "application/json",
Authorization: `Bearer ${Api}`,
},
body: JSON.stringify({ inputs: input, imageInput, negativePrompt }),
}
);
console.log('response', response);
if (!response.ok) {
throw new Error("Failed to generate image");
}
const blob = await response.blob();
setOutput(URL.createObjectURL(blob));
setLoading(false);
};
return (<div className="container al-c mt-3">
<h1>Stable <span>Diffusion</span></h1>
<p>Pellentesque vulputate dignissim enim, et sollicitudin massa pellentesque ut. Proin luctus dui ut sem varius eleifend.</p>
<form className="gen-form" onSubmit={handleSubmit}>
<input type="text" name="input" placeholder="type your prompt here..." />
<input type="file" name="imageInput" accept="image/*" />
<input type="text" name="negativePrompt" placeholder="type your negativity here..." />
<button type="submit">Generate</button>
</form>
<div>
{loading && <div className="loading">Loading...</div>}
{!loading && output && (
<div className="result-image">
<img src={output} alt="art" />
</div>
)}
</div>
</div>);
};
export default Original; |