I am developing a Flask backend running in Google Colab, which serves an Angular frontend for uploading .wav files and receiving a stream of generated words via Server-Sent Events (SSE).
Problem: When the frontend tries to connect to the SSE endpoint, I get the following error in the browser console:
EventSource's response has a MIME type ("text/html") that is not "text/event-stream". Aborting the connection.
This is Frontend code
<input type="file" id="fileInput" accept=".wav">
<button onclick="uploadFile()">Upload</button>
<div id="status"></div>
<div id="output"></div>
<script>
async function uploadFile() {
const fileInput = document.getElementById('fileInput');
const statusDiv = document.getElementById('status');
const outputDiv = document.getElementById('output');
if (!fileInput.files.length) {
statusDiv.textContent = "Please select a file";
return;
}
const file = fileInput.files[0];
const formData = new FormData();
formData.append("file", file);
try {
statusDiv.textContent = "Uploading...";
const response = await fetch("https://<ngrok-url>/upload", {
method: "POST",
body: formData
});
const result = await response.json();
if (response.ok) {
statusDiv.textContent = "Upload successful! Receiving text...";
const sessionId = result.session_id;
const eventSource = new EventSource(`https://<ngrok-url>/stream/${sessionId}`);
eventSource.onmessage = (e) => {
outputDiv.innerHTML += `<div>${e.data}</div>`;
};
eventSource.onerror = (e) => {
console.error("SSE error", e);
eventSource.close();
};
} else {
statusDiv.textContent = result.error;
}
} catch (error) {
statusDiv.textContent = "Upload failed: " + error.message;
}
}
</script>