A weired flicker on the start of the audio bytes playing

[adam-demir-msit]

Describe the bug

Here I am attaching screen recording video to show case the results. there is flicker at the start to... today which is weired. Let me know if more details is required. Thanks!

https://github.com/user-attachments/assets/bdfef273-dfdc-4b2b-a019-f6706a5e129b

Have you searched existing issues? 🔎

• [X] I have searched and found no existing issues

Reproduction

import gradio as gr
def transcribe_audio(audio_file_path, language, additional_text):
    bytes_data = open('sure.mp3', 'rb').read()
    yield "Checking ...", bytes_data

def speach_to_text():
    # List of supported languages (this is an example, adjust based on Groq's actual supported languages)
    languages = ["en", "ba", "ms", "is", "no", "id"]

    # Create Gradio interface
    iface = gr.Interface(
        fn=transcribe_audio,
        inputs=[
            gr.Audio(type="filepath", label="Upload Audio File"),
            gr.Dropdown(choices=languages, label="Select Language", value="en"),
            # gr.Radio(["standard", "high"], label="Transcription Quality", value="standard"),
            gr.Textbox(label="Additional Text", placeholder="Enter any additional context or instructions here...")
        ],
        outputs=[
            gr.Textbox(label="Response"),
            gr.Audio(label="Audio Stream", autoplay=True, format="mp3")
        ],
        title="Groq Speech-to-Text Transcription",
        description="Upload an audio file, set parameters, and provide additional text for context in the "
                    "transcription process."
    )

    # Launch the interface
    iface.launch()

# Press the green button in the gutter to run the script.
if __name__ == '__main__':    
    speach_to_text()

Screenshot

No response

Logs

No response

System Info

gradio==4.41.0
gradio_client==1.3.0

Severity

I can work around it

[abidlabs]

Hi @adam-demir-msit we've made major changes to streaming in this PR here: https://github.com/gradio-app/gradio/pull/8843

Would you be able to install Gradio from that PR (instructions are in the link) and see if it resolves the issue for you?

[freddyaboulton]

Make sure you install the client from that PR as well otherwise you will get an error!

[adam-demir-msit]

Tried installing package from this PR, Now I am getting this issue

    from gradio import (
  File "{project}/.venv/lib/python3.12/site-packages/gradio/networking.py", line 15, in <module>
    from gradio.routes import App  # HACK: to avoid circular import # noqa: F401
    ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
  File "{}/.venv/lib/python3.12/site-packages/gradio/routes.py", line 92, in <module>
    from gradio.server_messages import (
  File "{}/.venv/lib/python3.12/site-packages/gradio/server_messages.py", line 51, in <module>
    class ProcessGeneratingMessage(BaseMessage):
  File "{}/.venv/lib/python3.12/site-packages/gradio/server_messages.py", line 52, in ProcessGeneratingMessage
    msg: Literal[ServerMessage.process_generating, ServerMessage.process_streaming] = (  # type: ignore
                                                   ^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^^
AttributeError: type object 'ServerMessage' has no attribute 'process_streaming'. Did you mean: 'process_generating'?

here is installed packages. I'm not sure if the client is installed from the PR run this command for client

pip install "gradio-client @ git+https://github.com/gradio-app/gradio@3dbb412d75a463affc00898b24ade9eb5116e07b#subdirectory=client/python"

[freddyaboulton]

Try uninstalling gradio_client before installing the new version from github

[adam-demir-msit]

@freddyaboulton @abidlabs I have installed the gradio and client with the PR but still getting the same issue.

requirements.txt

gradio @ https://gradio-pypi-previews.s3.amazonaws.com/3dbb412d75a463affc00898b24ade9eb5116e07b/gradio-4.41.0-py3-none-any.whl#sha256=c6a08ed04050cbf8c8d17a5ee3d23af8dc2d793bef53a3a519c299f8a84f07dc
gradio_client @ git+https://github.com/gradio-app/gradio@4bc495cb68aec014cffffce16c14ee1ddaacf7a3#subdirectory=client/python
groq==0.9.0

gradio app deployed on huggingface https://github.com/user-attachments/assets/c286b8a9-c307-4f55-a2b7-d526bcd1ffea

[adam-demir-msit]

Here I have deployed a simple app on huggingface. Its just read the mp3 file and plays it. You will notice that flicker. just hit submit and see the results. you can go to caller_v2.py in files to see the code.

https://huggingface.co/spaces/grayphite/api_caller_v2

[freddyaboulton]

Thank you for the detailed demo and responses @adam-demir-msit .I just tried and I'm not seeing a very noticeable flicker. In any event though, does this flicker impact the audio playback or is it a visual issue, i.e. it may be distracting for users?

[adam-demir-msit]

@freddyaboulton Its audio playback. just like I have explained in previous messages. its audio seems to be little bit disturbing when you play first time. Here I am uploading screen recording video again, you'll see it'll say su sure thats what I am talking about. its very frustrating in term of clients view. we are trying to make a demo but this issue really giving us hard time for the demo.

https://github.com/user-attachments/assets/40e178db-9770-4265-a7f9-d0db985897b9

the same issue you can encounter on the above deployed version everytime you try

[adam-demir-msit]

Any update on this?

[freddyaboulton]

Very strange I don't see or hear the flicker when I run your demo @adam-demir-msit

https://github.com/user-attachments/assets/9d554c27-dd0a-4b11-9680-c077f63c3380

[adam-demir-msit]

Thats very strange. I am getting it everytime after reloading the page? can you retry and check, also what will be the possible solution for this.

[freddyaboulton]

Very odd I still don't see it @adam-demir-msit . What browser are you using?

[adam-demir-msit]

Sorry to get this late. I tried on different browsers. On firefox its working fine, definetly not on chrome and arc.

https://github.com/user-attachments/assets/9e0f2758-35eb-402a-b92b-b5301addcbed