How to access local media (image/audio/video) within gradio-lite?

[Jason-cs18]

• I have searched to see if a similar issue already exists.
  I want to access the local media within <gradio-lite> but I cannot find solutions. I go through all relevant documents. As shown above, I create an audio component within <gradio-lite> and want to set the default value to a local media (sample_output.mp3). However, I meet 404 error.

environments

• Ubuntu 20.04 LTS
• Python: 3.9.19
• Gradio: 4.31.4

<gradio-lite>
        import gradio as gr
        audio=gr.Audio(label="数字人", scale=0.5, interactive=False, value="/home/ecs-user/web_data/sample_output.mp3")
</gradio-lite>

Is your feature request related to a problem? Please describe.
A clear and concise description of what the problem is. Ex. I'm always frustrated when [...]

Describe the solution you'd like
A clear and concise description of what you want to happen.

Additional context
Add any other context or screenshots about the feature request here.

[Jason-cs18]

@whitphx

[whitphx]

Thank you for this post, but unfortunately it is not possible to access local files from Gradio-Lite apps running in the browser because the browser environment (precisely, the Python/Pyodide environment in the browser in which Gradio-Lite runs) is completely isolated from the host OS.

An alternative solution is:

1. serve the file through a web server so users can access it via a URL, e.g. http://your-host/sample.mp3
2. mount it onto the Python env on the browser by using the gradio-file tag as below:

<gradio-lite>
import gradio as gr

demo = gr.Interface(
  fn=lambda x: x,
  inputs=gr.Audio(value="sample.mp3"),
  outputs=gr.Audio()
)

demo.launch()

<gradio-file name="sample.mp3" url="http://your-host/sample.mp3" />

</gradio-lite>

[Jason-cs18]

Thank you for this post, but unfortunately it is not possible to access local files from Gradio-Lite apps running in the browser because the browser environment (precisely, the Python/Pyodide environment in the browser in which Gradio-Lite runs) is completely isolated from the host OS.

An alternative solution is:

1. serve the file through a web server so users can access it via a URL, e.g. http://your-host/sample.mp3
2. mount it onto the Python env on the browser by using the gradio-file tag as below:

<gradio-lite>
import gradio as gr

demo = gr.Interface(
  fn=lambda x: x,
  inputs=gr.Audio(value="sample.mp3"),
  outputs=gr.Audio()
)

demo.launch()

<gradio-file name="sample.mp3" url="http://your-host/sample.mp3" />

</gradio-lite>

Thanks for your reply. If I use requests to get a video (named example.mp4) from remote API, how to access it?

<gradio-lite>
    audio_response = requests.post("https://xxxx/app/audio", json=myobj)
    audio_path = f"sample_output.mp3"
    with open(audio_path, 'wb') as file:
        for chunk in audio_response.iter_content(chunk_size=1024):
            file.write(chunk)

    # how to access sample_output.mp3?
</gradio-lite>

[whitphx]

In that case, your Gradio-Lite app should be able to access the locally saved file "sample_output.mp3" by simply opening it, e.g. open("sample_output.mp3") or gr.Audio(value="sample_output.mp3").

[abidlabs]

Thanks @whitphx and @Jason-cs18, I'll go ahead and close this.