search

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
33.98k stars 2.58k forks source link

Gradio audio's starting position in the timeline move along with the cursor in textbox. #7499

Open kexul opened 8 months ago

kexul commented 8 months ago

Describe the bug

When I move the cursor in the textbox by pressing left and right arrow key, the starting position of the audio timeline is moved.

Have you searched existing issues? šŸ”Ž

Reproduction

import gradio as gr

with gr.Blocks() as app:
    audio = gr.Audio('https://github.com/gradio-app/gradio/raw/main/test/test_files/audio_sample.wav', label='Test')
    text = gr.Textbox()

app.launch()

Screenshot

gradio

Logs

No response

System Info

Gradio Environment Information:
------------------------------
Operating System: Linux
gradio version: 4.19.1
gradio_client version: 0.10.0

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

aiofiles: 23.2.1
altair: 5.2.0
fastapi: 0.109.2
ffmpy: 0.3.2
gradio-client==0.10.0 is not installed.
httpx: 0.26.0
huggingface-hub: 0.20.3
importlib-resources: 6.1.1
jinja2: 3.1.3
markupsafe: 2.1.5
matplotlib: 3.8.3
numpy: 1.26.4
orjson: 3.9.14
packaging: 23.2
pandas: 2.2.0
pillow: 10.2.0
pydantic: 2.6.1
pydub: 0.25.1
python-multipart: 0.0.9
pyyaml: 6.0.1
ruff: 0.2.2
semantic-version: 2.10.0
tomlkit==0.12.0 is not installed.
typer: 0.9.0
typing-extensions: 4.9.0
uvicorn: 0.27.1
authlib; extra == 'oauth' is not installed.
itsdangerous; extra == 'oauth' is not installed.

gradio_client dependencies in your environment:

fsspec: 2024.2.0
httpx: 0.26.0
huggingface-hub: 0.20.3
packaging: 23.2
typing-extensions: 4.9.0
websockets: 11.0.3

Severity

I can work around it

kexul commented 8 months ago 
import gradio as gr

js = '''
function disablePropagation(){
    var textarea = document.querySelector('textarea[data-testid="textbox"]');
    if (textarea) {
        textarea.addEventListener('keydown', function(event) {
            if (event.key === 'ArrowLeft' || event.key === 'ArrowRight') {
                event.stopPropagation();
            }
        });
    }
}
'''
with gr.Blocks(js=js) as app:
    audio = gr.Audio('https://github.com/gradio-app/gradio/raw/main/test/test_files/audio_sample.wav', label='Test')
    text = gr.Textbox()

app.launch()

Here is the solution provided by chatgpt, works very well for my case, hopefully it helps others meet the same problem.

pngwn commented 8 months ago

Reopening as this is a bug we should fix.

abidlabs commented 4 weeks ago

Hi, apologies for the late follow up. We haven't had a chance to look into this issue, but the Gradio codebase has changed quite significantly since this issue was created, particularly with the release of Gradio 5. Could you let us know if this is still an issue in the latest version of Gradio (pip install --upgrade gradio)? Thanks!

kexul commented 4 weeks ago

@abidlabs Yes, It's still an issue. ad