function VideoUploadInterface({ name, onChange }) { return /*#__PURE__*/ React.createElement("input", { type: "file", className: "border border-gray-300 p-2 w-full rounded mb-4", name: name, accept: "video/*", onChange: onChange, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }); } function VideoUploadInterfaceStory() { return /*#__PURE__*/ React.createElement("div", { className: "p-4", __source: { fileName: "", lineNumber: 15, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(VideoUploadInterface, { name: "videoFile", onChange: ()=>{}, __source: { fileName: "", lineNumber: 16, columnNumber: 7 }, __self: this })); } function MainComponent() { const [captions, setCaptions] = React.useState(""); const [sceneDescription, setSceneDescription] = React.useState(""); const handleConvert = async (event)=>{ event.preventDefault(); const formData = new FormData(event.target); const file = formData.get("videoFile"); if (file) { const response = await fetch("/api/convert-audio-to-captions", { method: "POST", body: formData }); const result = await response.json(); setCaptions(result.captions); setSceneDescription(result.sceneDescription); } }; return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100 p-4", __source: { fileName: "", lineNumber: 23, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-[600px] bg-white p-6 rounded-lg shadow-lg", __source: { fileName: "", lineNumber: 24, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-2xl font-roboto font-bold mb-4", __source: { fileName: "", lineNumber: 25, columnNumber: 9 }, __self: this }, "Audio to Closed Captions Converter"), /*#__PURE__*/ React.createElement("p", { className: "font-roboto mb-4", __source: { fileName: "", lineNumber: 26, columnNumber: 9 }, __self: this }, "Upload a video file and convert its audio to closed captions."), /*#__PURE__*/ React.createElement("form", { className: "w-full", onSubmit: handleConvert, __source: { fileName: "", lineNumber: 27, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(VideoUploadInterface, { name: "videoFile", onChange: ()=>{}, __source: { fileName: "", lineNumber: 28, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full bg-blue-500 text-white p-2 rounded-lg font-roboto hover:bg-blue-600", __source: { fileName: "", lineNumber: 29, columnNumber: 11 }, __self: this }, "Convert")), /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 33, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto font-semibold", __source: { fileName: "", lineNumber: 34, columnNumber: 11 }, __self: this }, "Conversion Result"), /*#__PURE__*/ React.createElement("textarea", { className: "border border-gray-300 p-2 w-full rounded mt-2 h-[200px]", name: "captions", placeholder: "Closed captions will appear here...", readOnly: true, value: captions, __source: { fileName: "", lineNumber: 35, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("h2", { className: "text-xl font-roboto font-semibold mt-4", __source: { fileName: "", lineNumber: 42, columnNumber: 11 }, __self: this }, "Scene Description"), /*#__PURE__*/ React.createElement("textarea", { className: "border border-gray-300 p-2 w-full rounded mt-2 h-[200px]", name: "sceneDescription", placeholder: "Scene description will appear here...", readOnly: true, value: sceneDescription, __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this })))); }