function MainComponent() { const [audioUrl, setAudioUrl] = React.useState(""); const [verse, setVerse] = React.useState("Cargando..."); const [aiText, setAiText] = React.useState(""); const [isRecording, setIsRecording] = React.useState(false); const audioPlayerRef = React.useRef(); const mediaRecorderRef = React.useRef(null); const recordingRef = React.useRef([]); React.useEffect(()=>{ const fetchVerse = async ()=>{ const requestData = { versiculo: "ocupo el versículo" }; const maxRetries = 3; let attempts = 0; while(attempts < maxRetries){ try { const response = await fetch("https://hook.us1.make.com/drqzd7s4jdcyww4gsoj0p1pgpxybe11w", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(requestData) }); if (response.ok) { const data = await response.json(); if (data.versiculo) { setVerse(data.versiculo); } else { setVerse("No se encontró un versículo válido."); } break; } else { setVerse("Error al cargar el versículo"); break; } } catch (error) { attempts++; if (attempts < maxRetries) { await new Promise((resolve)=>setTimeout(resolve, 1000)); } else { setVerse("Error de conexión"); } } } }; fetchVerse(); }, []); const handleRecord = async ()=>{ if (!isRecording) { try { const stream = await navigator.mediaDevices.getUserMedia({ audio: true }); const mediaRecorder = new MediaRecorder(stream); mediaRecorderRef.current = mediaRecorder; mediaRecorder.ondataavailable = (event)=>{ recordingRef.current.push(event.data); }; mediaRecorder.onstop = async ()=>{ const audioBlob = new Blob(recordingRef.current, { type: "audio/webm" }); const audioUrl = URL.createObjectURL(audioBlob); setAudioUrl(audioUrl); audioPlayerRef.current.src = audioUrl; await sendAudioToServer(audioBlob); recordingRef.current = []; }; mediaRecorder.start(); setIsRecording(true); } catch (error) { alert("Error al acceder al micrófono."); console.error(error); } } else { mediaRecorderRef.current.stop(); setIsRecording(false); } }; async function sendAudioToServer(audioBlob) { const formData = new FormData(); formData.append("audio_file", audioBlob, "recording.webm"); const maxRetries = 3; let attempts = 0; let success = false; while(attempts < maxRetries && !success){ try { const response = await fetch("https://hook.us1.make.com/8vv6uydegjv1vkjqk4r6b6jqlrtkgvey", { method: "POST", body: formData }); if (response.ok) { const data = await response.json(); if (data.texto) { setAiText(data.texto); } else { setAiText("No se recibió una respuesta válida del servidor."); } success = true; } else { setAiText("Error al comunicarse con el servidor."); break; } } catch (error) { attempts++; if (attempts < maxRetries) { await new Promise((resolve)=>setTimeout(resolve, 1000)); } else { setAiText("Error de conexión al enviar el audio."); console.error(error); } } } } return /*#__PURE__*/ React.createElement("div", { className: "font-roboto bg-[#f5e7fb] min-h-screen", __source: { fileName: "", lineNumber: 127, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "text-center p-10", __source: { fileName: "", lineNumber: 128, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl text-[#7d2ae8] font-bold", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-microphone-alt", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }), " Speaking"), /*#__PURE__*/ React.createElement("p", { className: "text-xl text-[#5c4a72] mt-2", __source: { fileName: "", lineNumber: 132, columnNumber: 9 }, __self: this }, "Lee versículos de la Biblia. Podrás leer lo que entendió nuestro profesor de IA y escuchar tu pronunciación."), /*#__PURE__*/ React.createElement("p", { className: "text-sm text-[#5c4a72] mt-1", __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this }, "* Grabar no funciona en el navegador preview de Instagram.")), /*#__PURE__*/ React.createElement("div", { className: "bg-white rounded-lg shadow-md p-8 text-center mx-4 max-w-lg mx-auto", __source: { fileName: "", lineNumber: 141, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-2xl text-gray-800 mb-4", __source: { fileName: "", lineNumber: 142, columnNumber: 9 }, __self: this }, "Versículo al azar para practicar:"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-gray-700 mb-6", __source: { fileName: "", lineNumber: 145, columnNumber: 9 }, __self: this }, verse), /*#__PURE__*/ React.createElement("button", { onClick: handleRecord, className: "bg-gradient-to-r from-[#ff7eb3] to-[#87cefa] text-white rounded-full py-2 px-4 text-lg font-bold inline-flex items-center shadow-md transition-opacity duration-200 hover:opacity-90", __source: { fileName: "", lineNumber: 146, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-microphone mr-2", __source: { fileName: "", lineNumber: 150, columnNumber: 11 }, __self: this }), isRecording ? "Detener" : "Grabar"), /*#__PURE__*/ React.createElement("div", { className: "mt-4", style: { display: audioUrl ? "block" : "none" }, __source: { fileName: "", lineNumber: 153, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h5", { className: "text-lg font-bold mt-4 mb-2", __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, "Previsualización del audio:"), /*#__PURE__*/ React.createElement("audio", { ref: audioPlayerRef, controls: true, className: "w-full", __source: { fileName: "", lineNumber: 157, columnNumber: 11 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "bg-[#fff0f5] rounded-lg p-8 mt-8 mx-4 max-w-lg mx-auto", style: { display: aiText ? "block" : "none" }, __source: { fileName: "", lineNumber: 161, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h4", { className: "text-[#7d2ae8] font-bold mb-4", __source: { fileName: "", lineNumber: 165, columnNumber: 9 }, __self: this }, "Lo que entendió el profesor de IA:"), /*#__PURE__*/ React.createElement("p", { className: "text-lg text-gray-800", __source: { fileName: "", lineNumber: 168, columnNumber: 9 }, __self: this }, aiText)), /*#__PURE__*/ React.createElement("div", { className: "text-center mt-10 p-8 bg-[#7d2ae8] text-white text-sm", __source: { fileName: "", lineNumber: 171, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 172, columnNumber: 9 }, __self: this }, "© RLTec -", " ", /*#__PURE__*/ React.createElement("a", { href: "https://www.iapersonalizada.com/ai-for-good", className: "underline", __source: { fileName: "", lineNumber: 174, columnNumber: 11 }, __self: this }, "IA for Good")), /*#__PURE__*/ React.createElement("p", { __source: { fileName: "", lineNumber: 181, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("a", { href: "https://iapersonalizada.com/tiempo-con-dios-ingles", className: "underline", __source: { fileName: "", lineNumber: 182, columnNumber: 11 }, __self: this }, "Volver a Inglés con la Biblia")))); }