function MainComponent() { const [file, setFile] = React.useState(null); const [language, setLanguage] = React.useState(''); const [isDetectingLanguage, setIsDetectingLanguage] = React.useState(false); const [fontSize, setFontSize] = React.useState('12'); const [fontType, setFontType] = React.useState('font-roboto'); const [margins, setMargins] = React.useState({ top: '2cm', right: '2cm', bottom: '2cm', left: '2cm' }); const [documentSize, setDocumentSize] = React.useState('10cm x 15cm'); const [translatedText, setTranslatedText] = React.useState(''); const [processedFile, setProcessedFile] = React.useState(null); const [isTranslating, setIsTranslating] = React.useState(false); const [flapLeftText, setFlapLeftText] = React.useState(''); const [flapRightText, setFlapRightText] = React.useState(''); const [summary, setSummary] = React.useState(''); const [chatMessages, setChatMessages] = React.useState([]); const [isChatting, setIsChatting] = React.useState(false); function handleDragOver(event) { event.preventDefault(); } function handleDrop(event) { event.preventDefault(); if (event.dataTransfer.items && event.dataTransfer.items[0]) { const droppedFile = event.dataTransfer.items[0].getAsFile(); validateAndSetFile(droppedFile); } } function validateAndSetFile(uploadedFile) { if (uploadedFile && (uploadedFile.type === 'application/pdf' || uploadedFile.type === 'application/msword')) { setIsDetectingLanguage(true); setFile(uploadedFile); } } function handleFileUpload(event) { const uploadedFile = event.target.files[0]; validateAndSetFile(uploadedFile); } function handleLanguageSelection(event) { setLanguage(event.target.value); } function handleFontSizeChange(event) { setFontSize(event.target.value); } function handleFontTypeChange(event) { setFontType(event.target.value); } function handleMarginChange(event) { const { name, value } = event.target; setMargins((prev)=>({ ...prev, [name]: value })); } function handleDocumentSizeChange(event) { setDocumentSize(event.target.value); } function handleTranslateAndReview() { setIsTranslating(true); const requestBody = { q: file.name, target: 'pt-BR' }; fetch('/integrations/google-translate/language/translate/v2', { method: 'POST', headers: { 'Content-Type': 'application/x-www-form-urlencoded;charset=UTF-8' }, body: new URLSearchParams(requestBody) }).then((response)=>response.json()).then((data)=>{ setTranslatedText(data.data.translations[0].translatedText); }).finally(()=>{ setIsTranslating(false); }); } function handleFlapTextChange(event) { const { name, value } = event.target; if (name === 'flapLeftText') { setFlapLeftText(value); } else if (name === 'flapRightText') { setFlapRightText(value); } } function handleGenerateSummary() { setIsChatting(true); const requestBody = { messages: [ { "role": "system", "content": file.name } ], system_prompt: 'Summarize the book with traditional Catholic themes inspired by Dom Marcel Lefebvre.', max_tokens: 500 }; fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(requestBody) }).then((response)=>response.json()).then((data)=>{ setSummary(data.result); }).finally(()=>{ setIsChatting(false); }); } function handleGenerateFile() { const htmlContent = createHtmlDocument(); fetch('/integrations/pdf-generation/pdf', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ source: { html: htmlContent } }) }).then((response)=>response.blob()).then((blob)=>{ setProcessedFile(URL.createObjectURL(blob)); }); } function createHtmlDocument() { return ` ${translatedText} `; } return /*#__PURE__*/ React.createElement("div", { className: "container mx-auto p-4", onDragOver: handleDragOver, onDrop: handleDrop, __source: { fileName: "", lineNumber: 152, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 157, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("section", { className: "border-2 border-dashed p-4 text-center cursor-pointer", __source: { fileName: "", lineNumber: 158, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", name: "file", onChange: handleFileUpload, className: "hidden", __source: { fileName: "", lineNumber: 159, columnNumber: 11 }, __self: this }), "Drag and drop your file here or click to select a file"), isDetectingLanguage && /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 163, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 164, columnNumber: 13 }, __self: this }, "Language detected: ", language), /*#__PURE__*/ React.createElement("button", { onClick: ()=>setIsDetectingLanguage(false), __source: { fileName: "", lineNumber: 165, columnNumber: 13 }, __self: this }, "Correct Language")), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 168, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("select", { name: "documentSize", value: documentSize, onChange: handleDocumentSizeChange, className: "border p-2 m-1", __source: { fileName: "", lineNumber: 169, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("option", { value: "10cm x 15cm", __source: { fileName: "", lineNumber: 170, columnNumber: 13 }, __self: this }, "10cm x 15cm"), /*#__PURE__*/ React.createElement("option", { value: "14cm x 21cm", __source: { fileName: "", lineNumber: 171, columnNumber: 13 }, __self: this }, "14cm x 21cm"), /*#__PURE__*/ React.createElement("option", { value: "16cm x 23cm", __source: { fileName: "", lineNumber: 172, columnNumber: 13 }, __self: this }, "16cm x 23cm"))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 175, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("textarea", { name: "flapLeftText", value: flapLeftText, onChange: handleFlapTextChange, className: "border p-2 m-1", placeholder: "Left flap text", maxLength: "120", __source: { fileName: "", lineNumber: 176, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("textarea", { name: "flapRightText", value: flapRightText, onChange: handleFlapTextChange, className: "border p-2 m-1", placeholder: "Right flap text", maxLength: "120", __source: { fileName: "", lineNumber: 177, columnNumber: 11 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "flex justify-between", __source: { fileName: "", lineNumber: 178, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 179, columnNumber: 13 }, __self: this }, 120 - flapLeftText.length, " words remaining"), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 180, columnNumber: 13 }, __self: this }, 120 - flapRightText.length, " words remaining"))), /*#__PURE__*/ React.createElement("section", { __source: { fileName: "", lineNumber: 183, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 184, columnNumber: 11 }, __self: this }, summary), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateSummary, className: `bg-[#0000ff] text-[#ffffff] p-2 m-1 ${isChatting ? 'cursor-not-allowed' : ''}`, disabled: isChatting, __source: { fileName: "", lineNumber: 185, columnNumber: 11 }, __self: this }, "Generate Summary")), /*#__PURE__*/ React.createElement("section", { className: "text-center", __source: { fileName: "", lineNumber: 187, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleTranslateAndReview, className: `border bg-[#008000] text-[#ffffff] p-2 m-1 ${isTranslating ? 'cursor-not-allowed' : ''}`, disabled: isTranslating, __source: { fileName: "", lineNumber: 188, columnNumber: 11 }, __self: this }, "Translate & Review"), /*#__PURE__*/ React.createElement("button", { onClick: handleGenerateFile, className: "border bg-[#f0ad4e] text-[#ffffff] p-2 m-1", __source: { fileName: "", lineNumber: 191, columnNumber: 11 }, __self: this }, processedFile ? 'Download File' : 'Generate File'), processedFile && /*#__PURE__*/ React.createElement("a", { href: processedFile, download: true, className: "p-2", __source: { fileName: "", lineNumber: 194, columnNumber: 29 }, __self: this }, "Download")))); }