function MainComponent() { const [transcription, setTranscription] = React.useState(''); const [inputText, setInputText] = React.useState(''); const [bleuScore, setBleuScore] = React.useState(null); const handleTranscribe = async (event)=>{ event.preventDefault(); const file = event.target.elements.audioInput.files[0]; if (file) { const formData = new FormData(); formData.append("file", file); const response = await fetch("https://api.cognitive.microsofttranslator.com/speechtotext/v3.0/transcriptions", { method: 'POST', headers: { 'Ocp-Apim-Subscription-Key': 'YOUR_SUBSCRIPTION_KEY', 'Content-Type': 'multipart/form-data' }, body: formData }); const data = await response.json(); setTranscription(data.DisplayText || 'Error transcribing audio'); } }; const calculateBleuScore = (transcription, reference)=>{ // Dummy function to simulate BLEU score calculation return Math.random().toFixed(2); }; const handleCalculateBleu = (event)=>{ event.preventDefault(); const score = calculateBleuScore(transcription, inputText); setBleuScore(score); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen flex flex-col items-center justify-center bg-gray-100", __source: { fileName: "", lineNumber: 39, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-roboto mb-6", __source: { fileName: "", lineNumber: 40, columnNumber: 7 }, __self: this }, "Transcribe Audio"), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md bg-white p-8 rounded-lg shadow-md", onSubmit: handleTranscribe, __source: { fileName: "", lineNumber: 41, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 42, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "audioInput", className: "block text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 43, columnNumber: 11 }, __self: this }, "Upload Audio File"), /*#__PURE__*/ React.createElement("input", { type: "file", id: "audioInput", name: "audioInput", accept: "audio/*", className: "w-full px-3 py-2 border rounded-lg focus:outline-none", __source: { fileName: "", lineNumber: 44, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full px-4 py-2 bg-blue-500 text-white font-semibold rounded-lg hover:bg-blue-600 focus:outline-none", __source: { fileName: "", lineNumber: 46, columnNumber: 9 }, __self: this }, "Transcribe")), /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mt-6 bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 48, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-3", __source: { fileName: "", lineNumber: 49, columnNumber: 9 }, __self: this }, "Transcription Result"), /*#__PURE__*/ React.createElement("textarea", { name: "transcriptionResult", rows: "10", className: "w-full p-2 border rounded-lg focus:outline-none", value: transcription, readOnly: true, __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this })), /*#__PURE__*/ React.createElement("form", { className: "w-full max-w-md mt-6 bg-white p-4 rounded-lg shadow-md", onSubmit: handleCalculateBleu, __source: { fileName: "", lineNumber: 52, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "mb-4", __source: { fileName: "", lineNumber: 53, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("label", { htmlFor: "referenceText", className: "block text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 54, columnNumber: 11 }, __self: this }, "Enter Reference Text"), /*#__PURE__*/ React.createElement("textarea", { id: "referenceText", name: "referenceText", rows: "4", className: "w-full p-2 border rounded-lg focus:outline-none", value: inputText, onChange: (e)=>setInputText(e.target.value), __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this })), /*#__PURE__*/ React.createElement("button", { type: "submit", className: "w-full px-4 py-2 bg-green-500 text-white font-semibold rounded-lg hover:bg-green-600 focus:outline-none", __source: { fileName: "", lineNumber: 57, columnNumber: 9 }, __self: this }, "Calculate BLEU Score")), bleuScore && /*#__PURE__*/ React.createElement("div", { className: "w-full max-w-md mt-6 bg-white p-4 rounded-lg shadow-md", __source: { fileName: "", lineNumber: 60, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-3", __source: { fileName: "", lineNumber: 61, columnNumber: 11 }, __self: this }, "BLEU Score"), /*#__PURE__*/ React.createElement("p", { className: "text-xl", __source: { fileName: "", lineNumber: 62, columnNumber: 11 }, __self: this }, bleuScore))); }