I have created a flask app using which takes audio files and audio recording as input and gives output as a transcription of that file using the open ai whisper model. So for small files it works well but for large file then it takes time to process, transcribe and return the response to the client through the flask app.
And after 5 minutes it gives an error in chrome console which was POST https://magicaibox.up.railway.app/whisper-results 504 Error Message
But the flask is still processing the transcription and after 10 minutes it completes the transcription but the client is no more taking the response.
I tried to use Socket.io but i'm new to this that'w why i'm not able to implement and getting error, I also tried Asynchronous programming by using async await in my fetch method but still gives same error, I tried to increase the timeout in fetch method but still gives me error and i don't know how to use celery.
Here's my flask code
@app.route('/whisper-results', methods=["POST"])
def WhisperAI():
'''SOme previous code'''
if minutes_count <= float(minutes_total):
if len(audioFile.read()) != 0:
# Model Running
try:
output = replicate.run("openai/whisper:e39e354773466b955265e969568deb7da217804d8e771ea8c9cd0cef6591f8bc",
input={"audio": audioFile,
# "model": model,
"transcription": transcription,
"translate": to_translate,
})
# We are again establishing a connection because large file give connection lost error
cnx = ms.connect(user='****', password='****',
host='***', database='****')
cursor = cnx.cursor()
update_minutes_query = f"UPDATE `user` SET `minutes_count` = '{minutes_to_update+minutes_count}' WHERE `email` = '{email}';"
cursor.execute(update_minutes_query)
cnx.commit()
cursor.close()
cnx.close()
print("The total minutes will be : ",minutes_count+minutes_to_update)
minutes_to_show = str(minutes_count+minutes_to_update)
return jsonify({"outputData":output['transcription'],'translate':output['translation'],'language_detect':output['detected_language'],'minutes_count':minutes_to_show,"minutes_total":minutes_total})
except Exception as e:
print(e)
return jsonify({"outputData":"There is some problem in Whisper Model or Your Audio is too Large",'translate':"",'language_detect':"",'minutes_count':minutes_count,"minutes_total":minutes_total})
# return render_template('whisper.html',data=["","","","","",""])
else:
# Model Running
try:
output = replicate.run("openai/whisper:e39e354773466b955265e969568deb7da217804d8e771ea8c9cd0cef6591f8bc",
input={"audio": audioRecords,
"model": 'large-v2',
"transcription": transcription,
"translate": to_translate,
})
cursor = cnx.cursor()
update_minutes_query = f"UPDATE `user` SET `minutes_count` = '{minutes_to_update+minutes_count}' WHERE `email` = '{email}';"
cursor.execute(update_minutes_query)
cnx.commit()
cursor.close()
cnx.close()
print("The total minutes will be : ",minutes_count+minutes_to_update)
minutes_to_show = str(minutes_count+minutes_to_update)
return jsonify({"outputData":output['transcription'],'translate':output['translation'],'language_detect':output['detected_language'],'minutes_count':minutes_to_show,"minutes_total":minutes_total})
except Exception as e:
print(e)
return jsonify({"outputData":"There is some problem in Whisper Model or Your Audio is too Large",'translate':"",'language_detect':"",'minutes_count':minutes_count,"minutes_total":minutes_total})
else:
return render_template('whisper-results.html', data=["", "", "", "", "", "You Have Used All Your Minutes"])
Here's my JavaScript Code
// Getting Function output through WhisperAI endpoint in python
const to_translate = document.getElementById("inlineCheckbox1").value;
// console.log(to_translate)
const formData = new FormData()
formData.append('to_translate',to_translate);
async function WhisperAI() {
// Collect user input data
// Send HTTP request to Python backend
try {
const response = await fetch("/whisper-results", {
method: "POST",
body: formData,
timeout: 30000000 // Set timeout to larger value
});
const data = await response.json();
// Update HTML with output data returned by Python function
const outputData = document.getElementById("outputData");
const translated = document.getElementById("translated");
const language_detect = document.getElementById("language_detect");
const loader = document.getElementById("loader");
const minutesUpdate = document.getElementById('minutesUpdate');
const ouputDisplay = document.getElementById('outputToggle');
ouputDisplay.style.display = 'flex';
loader.style.display = 'none';
outputData.innerHTML = data.outputData;
translated.innerHTML = data.translate;
language_detect.innerHTML = "Detected Language : "+data.language_detect;
minutesUpdate.innerHTML = data.minutes_count +" / "+ data.minutes_total;
// console.log(data)
} catch (error) {
// Handle the error response here
}
}
And the code works perfect on development server but when i deployed it to railway.app production server then this gives error or simply client side timeout.
Let me know if anything is not clear.
Someone please give me some suggestion or solutions as i'm new to this. Thanks
