function MainComponent() { const [translation, setTranslation] = React.useState(""); const [loading, setLoading] = React.useState(false); const [error, setError] = React.useState(""); const [videoId, setVideoId] = React.useState(""); const extractVideoId = (url)=>{ const regExp = /^.*((youtu.be\/)|(v\/)|(\/u\/\w\/)|(embed\/)|(watch\?))\??v?=?([^#&?]*).*/; const match = url.match(regExp); return match && match[7].length === 11 ? match[7] : false; }; const translateVideo = async (event)=>{ event.preventDefault(); setLoading(true); setError(""); setTranslation(""); setVideoId(""); const videoUrl = event.target.videoUrl.value; const videoId = extractVideoId(videoUrl); setVideoId(videoId); const targetLanguage = event.target.targetLanguage.value; const requestBody = { messages: [ { role: "user", content: `Translate the following YouTube video: ${videoUrl} to ${targetLanguage}` } ] }; try { const response = await fetch('/integrations/anthropic-claude/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(requestBody) }); const data = await response.json(); if (response.ok) { setTranslation(data.choices[0].message.content); } else { throw new Error(data.choices[0]?.message.content || "Failed to translate video. Please try again."); } } catch (err) { setError(err.message); } finally{ setLoading(false); } }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-[#101010] flex flex-col items-center justify-center text-white", __source: { fileName: "", lineNumber: 58, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("header", { className: "w-full py-6 px-4 bg-[#202020] text-center", __source: { fileName: "", lineNumber: 59, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-roboto", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, "YouTube Video Translator")), /*#__PURE__*/ React.createElement("main", { className: "flex-1 w-full max-w-4xl px-4 mt-10", __source: { fileName: "", lineNumber: 62, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("form", { className: "flex flex-col space-y-4", onSubmit: translateVideo, __source: { fileName: "", lineNumber: 63, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 items-center", __source: { fileName: "", lineNumber: 64, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto flex-1", htmlFor: "video-url", __source: { fileName: "", lineNumber: 65, columnNumber: 13 }, __self: this }, "Video URL:"), /*#__PURE__*/ React.createElement("input", { type: "url", id: "video-url", name: "videoUrl", className: "font-roboto flex-1 p-2 bg-[#303030] text-white border border-[#505050] rounded", placeholder: "Enter YouTube video URL", required: true, __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this })), /*#__PURE__*/ React.createElement("div", { className: "flex flex-col md:flex-row gap-4 items-center", __source: { fileName: "", lineNumber: 75, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("label", { className: "font-roboto flex-1", htmlFor: "target-language", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, "Target Language:"), /*#__PURE__*/ React.createElement("select", { name: "targetLanguage", id: "target-language", className: "font-roboto flex-1 p-2 bg-[#303030] text-white border border-[#505050] rounded", required: true, __source: { fileName: "", lineNumber: 77, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "es", __source: { fileName: "", lineNumber: 83, columnNumber: 15 }, __self: this }, "Spanish"), /*#__PURE__*/ React.createElement("option", { value: "fr", __source: { fileName: "", lineNumber: 84, columnNumber: 15 }, __self: this }, "French"), /*#__PURE__*/ React.createElement("option", { value: "de", __source: { fileName: "", lineNumber: 85, columnNumber: 15 }, __self: this }, "German"), /*#__PURE__*/ React.createElement("option", { value: "it", __source: { fileName: "", lineNumber: 86, columnNumber: 15 }, __self: this }, "Italian"), /*#__PURE__*/ React.createElement("option", { value: "jp", __source: { fileName: "", lineNumber: 87, columnNumber: 15 }, __self: this }, "Japanese"), /*#__PURE__*/ React.createElement("option", { value: "cn", __source: { fileName: "", lineNumber: 88, columnNumber: 15 }, __self: this }, "Chinese"))), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full py-3 bg-[#00CCFF] text-black font-roboto rounded hover:bg-[#00B2E6]", __source: { fileName: "", lineNumber: 91, columnNumber: 11 }, __self: this }, loading ? "Translating..." : "Translate Video")), translation && /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-[#303030] text-center rounded", __source: { fileName: "", lineNumber: 95, columnNumber: 25 }, __self: this }, translation), error && /*#__PURE__*/ React.createElement("div", { className: "mt-6 p-4 bg-red-600 text-center rounded", __source: { fileName: "", lineNumber: 96, columnNumber: 19 }, __self: this }, error), videoId && /*#__PURE__*/ React.createElement("iframe", { className: "mt-6 w-full h-[500px]", src: `https://www.youtube.com/embed/${videoId}`, title: "YouTube video player", frameBorder: "0", allow: "accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture", allowFullScreen: true, __source: { fileName: "", lineNumber: 97, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("footer", { className: "w-full py-4 bg-[#202020] text-center", __source: { fileName: "", lineNumber: 99, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "font-roboto", __source: { fileName: "", lineNumber: 100, columnNumber: 9 }, __self: this }, "© 2023 YouTube Video Translator. All rights reserved."))); }