gradio-app / gradio

Build and share delightful machine learning apps, all in Python. 🌟 Star to support our work!
http://www.gradio.app
Apache License 2.0
30.56k stars 2.27k forks source link

Cannot load file or recording into Audio component. #8534

Closed ronak0624 closed 2 weeks ago

ronak0624 commented 2 weeks ago

Describe the bug

I have been using gradio cc create MyProject --template Audio to make custom components. It has been working fine for a while, but a few hours ago, I lost the ability to upload a file to the component. Whenever a blob is supposed to load into the underlying component, it throws an error.
I ran the above template command again in a fresh directory, with no code edits, and got the exact same errors. I then checked https://www.gradio.app/docs/gradio/audio#demos and, though I can't see the container logs in my console, the container crashes when I stop recording audio to the reverse_audio component, which seems like the exact same issue. The generate_tone demo works fine, and also the reverse_audio demo is the only place that I see a full on page crash. When running the dev server locally, it's just a no-op with some errors and an unplayable track with no waveform.

As of this morning, this was not happening as far as I can recall. Also, I had an old demo tab open, and the cached container could handle my recording, but the second I refreshed and it rebuilt, it started crashing.

I can reproduce this on my Mac (with Safari, and Brave) and WSL2 Ubuntu (with Brave and Microsoft Edge) environments. Have not tried Windows.

Have you searched existing issues? 🔎

Reproduction

gradio cc create MyProject --template Audio
cd MyProject
gradio cc dev

Then try to upload any kind of audio file to the demo component.

or go to https://www.gradio.app/docs/gradio/audio#demos and click on the reverse_audio demo, record some audio, and your tab will crash when you Stop recording.

Screenshot

No response

Logs

Uncaught (in promise) TypeError: Cannot set properties of undefined (setting 'abort_controller')
    at stream (index.js:2242:10)
    at UploadProgress.svelte:1:18
    at Generator.next (<anonymous>)
    at UploadProgress.svelte:1:18
    at new Promise (<anonymous>)
    at __awaiter (UploadProgress.svelte:1:18)
    at UploadProgress.svelte:1:18
    at run (svelte.js:41:9)
    at Array.map (<anonymous>)
    at svelte.js:3182:48
lifecycle.js:11 Uncaught (in promise) Error: Function called outside component initialization
    at get_current_component (lifecycle.js:11:32)
    at getContext (lifecycle.js:141:9)
    at getWorkerProxyContext (context.ts:11:9)
    at resolve_wasm_src (file-url.ts:30:27)
    at create_waveform (AudioPlayer.svelte:1:18)
    at $$self.$$.update (AudioPlayer.svelte:168:33)
    at update (svelte.js:2157:6)
    at flush (svelte.js:2121:5)
lifecycle.js:11 Uncaught (in promise) Error: Function called outside component initialization
    at get_current_component (lifecycle.js:11:32)
    at getContext (lifecycle.js:141:9)
    at getWorkerProxyContext (context.ts:11:9)
    at resolve_wasm_src (file-url.ts:30:27)
    at AudioPlayer.svelte:1:18
    at Generator.next (<anonymous>)
    at AudioPlayer.svelte:1:18
    at new Promise (<anonymous>)
    at __awaiter (AudioPlayer.svelte:1:18)
    at load_audio (AudioPlayer.svelte:1:18)

System Info

Gradio Environment Information:
------------------------------
Operating System: Darwin
gradio version: 4.36.1
gradio_client version: 1.0.1

------------------------------------------------
gradio dependencies in your environment:

aiofiles: 23.2.1
altair: 5.3.0
fastapi: 0.111.0
ffmpy: 0.3.2
gradio-client==1.0.1 is not installed.
httpx: 0.27.0
huggingface-hub: 0.23.3
importlib-resources: 6.4.0
jinja2: 3.1.2
markupsafe: 2.1.2
matplotlib: 3.6.3
numpy: 1.23.5
orjson: 3.10.4
packaging: 23.2
pandas: 1.5.3
pillow: 9.4.0
pydantic: 2.7.1
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0
ruff: 0.4.8
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.12.3
typing-extensions: 4.11.0
urllib3: 2.2.1
uvicorn: 0.30.1
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.

gradio_client dependencies in your environment:

fsspec: 2024.6.0
httpx: 0.27.0
huggingface-hub: 0.23.3
packaging: 23.2
typing-extensions: 4.11.0
websockets: 11.0.3

Severity

Blocking usage of gradio

ronak0624 commented 2 weeks ago

Closing cause I didn't fully grasp how all these containers were working. I am going to rewrite this after I do a bit more exploration + fresh installations on my local machines.