Can't get live transcription to work

[DonaldNgai]

I am trying to setup a simple live transcription app with React in the frontend and Flask in the backend. I used the example provided to send the blob to the backend:

const onTranscribe = async (blob: Blob) => {

        const audiofile = new File([blob], "audiofile.mpeg", {
            type: "audio/mpeg",
        });
        const formData = new FormData();
        formData.append("file", audiofile);
        formData.append("model", "whisper-1");

        const config = {
            headers: {
                'content-type': 'multipart/form-data'
            }
        };

        const response = await axios.post(
            `${FLASK_ENDPOINT}/transcribe/file`,
            formData,
            config,
        )

        const { text } = await response.data

        return {
            blob,
            text,
        }
    }

and I have the following in Flask to receive the audio:

@transcript_api_bp.route('/file', methods=['POST'])
def transcribe_from_file():
    print("Form Data Received")

    if "file" not in request.files:
        return redirect(request.url)
    
    file = request.files['file']
    if file.filename == "":
        return redirect(request.url)
    
    # print(file)
    filename, file_extension = os.path.splitext(file.filename)
    temp = tempfile.NamedTemporaryFile(suffix=file_extension)
    print(temp.name)
    file.save(temp)

    audio_file = open(temp.name, "rb")
    transcript = openai.Audio.transcribe("whisper-1", audio_file)
    print (transcript)
    return {"message": transcript}

I keep getting an error for invalid file format from open ai though. So my question is, am I doing this incorrectly? How is the front end constantly sending audio? Does it pause after a few seconds and sends a new audio file to the backend? Am I sending the data to the Flask server incorrectly? Any help would be appreciated!