File size: 2,888 Bytes
19e25f3 |
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, FormEvent } from 'react';
interface InputData {
prompt: string;
width: number;
height: number;
steps: number;
fps: number;
seed?: number;
}
const IndexPage = () => {
const [inputData, setInputData] = useState<InputData>({
prompt: '',
width: 1024,
height: 576,
steps: 40,
fps: 15,
seed: undefined,
});
const [output, setOutput] = useState<any>(null);
const [isLoading, setIsLoading] = useState(false);
const handleChange = (e: React.ChangeEvent<HTMLInputElement>) => {
const { name, value } = e.target;
setInputData((prevData) => ({ ...prevData, [name]: value }));
};
const handleSubmit = async (e: FormEvent) => {
e.preventDefault();
setIsLoading(true);
console.log("Making API call with payload:", inputData);
try {
const response = await fetch('/api/replicate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify(inputData),
});
const result = await response.json();
console.log("API call response:", result);
if (response.ok) {
setIsLoading(false);
setOutput(result.prediction); // Updated this line to set the prediction object
} else {
setIsLoading(false);
console.error("API returned an error:", result);
}
} catch (error) {
setIsLoading(false);
console.error("An error occurred:", error);
}
};
return (
<div>
<form onSubmit={handleSubmit}>
<input
type="text"
name="prompt"
value={inputData.prompt}
onChange={handleChange}
placeholder="Enter your prompt"
/>
<input
type="number"
name="width"
value={inputData.width}
onChange={handleChange}
/>
<input
type="number"
name="height"
value={inputData.height}
onChange={handleChange}
/>
<input
type="number"
name="steps"
value={inputData.steps}
onChange={handleChange}
/>
<input
type="number"
name="fps"
value={inputData.fps}
onChange={handleChange}
/>
<input
type="number"
name="seed"
value={inputData.seed || ''}
onChange={handleChange}
placeholder="Seed (Optional)"
/>
<button type="submit">Submit</button>
</form>
{isLoading && <div>Processing...</div>}
{output && output.output && (
<div>
<h2>Generated Video:</h2>
<video controls width="500">
<source src={output.output} type="video/mp4" />
Your browser does not support the video tag.
</video>
</div>
)}
</div>
);
};
export default IndexPage;
|