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.76k stars 2.56k forks source link

Gallery front-end cannot display a url from web #5127

Closed kaleidoscopical closed 1 year ago

kaleidoscopical commented 1 year ago

Describe the bug

I found the Gallery front-end cannot display a url from web. It seems a strange prefix url is added to the front.

example:

<src="https://zb-dsw-dsw32719-80.pcs-svr.alibaba-inc.com/dsw32719/proxy/7862/file=https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80">

The image I want to reach is from the url https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80. But the prefix added prevents the browser to render the image correctly.

Have you searched existing issues? 🔎

Reproduction

import random
import gradio as gr

with gr.Blocks() as demo:
    gallery = gr.Gallery(value=["https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80"], preview=True)

demo.launch(root_path='')

Screenshot

No response

Logs

No response

System Info

any

Severity

Blocking usage of gradio

freddyaboulton commented 1 year ago

Works for me @kaleidoscopical !

image
kaleidoscopical commented 1 year ago

hi @freddyaboulton ! Thanks for quick reply : )

It also works in my local environment with url http://127.0.0.1:7860/file=https://images.unsplash.com/photo-1554151228-14d9def656e4?ixlib=rb-1.2.1&ixid=MnwxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8&auto=format&fit=crop&w=386&q=80, but a prefix is also added, e.g. http://127.0.0.1:7860/file=.

My demo environment is a little bit tricky, the prefix becomes https://zb-dsw-dsw32719-80.pcs-svr.alibaba-inc.com/dsw32719/proxy/7862/file= which prevents the browser to render the image correctly. It works fine if I manually remove the prefix in the browser console. Could you suggest any action to remove the prefix in my demo environment once for all?

luoweb commented 1 year ago

prefix

i have the same problem

luoweb commented 1 year ago

prefix

i have the same problem

finally i use the _js function return image array solved the problem.

freddyaboulton commented 1 year ago

Are you using nginx? This may come in handy: https://www.gradio.app/guides/running-gradio-on-your-web-server-with-nginx

ivan-mihailov commented 1 year ago

I have the same issue on HF Space: Gallery component adds https://{HF SPACE NAME}.hf.space/proxy=https://{HF SPACE NAME}--mgwbh.hf.space/ before the file location URL. When I remove this prefix manually in Chrome Dev Tools and leave src as "file=/tmp/gradio/31eb62425f47ccdf1436dc19af0e6db0db487298/image.png" then the image displays properly. Similarly to @kaleidoscopical the image display works perfectly when tested locally and displays properly.

freddyaboulton commented 1 year ago

Hi @ivan-mihailov ! That seems like it's caused by your space having more than one replica. That should have been fixed in https://github.com/gradio-app/gradio/pull/5668 which got released in 3.45.2. It's a separate issue from the other comments in this thread.

abidlabs commented 1 year ago

The original issue should be fixed now on the latest version of gradio -- @kaleidoscopical

ivan-mihailov commented 1 year ago

Hi @freddyaboulton, thanks for the quick response!

I looked at the issue you referenced and also upgraded the Space to gradio~=3.45.2 and gradio_client~=0.5.3 but this did not solve my issue.

On the Chrome Dev Tools console the link to the temporary image is generated as follows: src="/proxy={HF-SPACE-NAME}.cp2tp.hf.space/file=/tmp/gradio/3dd85e3902c13b7b6f2e2c4eb137a6f0e2114707/image.png" and that results in a broken link even for me (the original user who created the Space). Per #5668, the correct path should be: src="https://{HF-SPACE-NAME}.hf.space/proxy=https://{HF-SPACE-NAME}--cp2tp.hf.space/file=/tmp/gradio/3dd85e3902c13b7b6f2e2c4eb137a6f0e2114707/image.png". So the newest version is not generating the path that it should.

I then manually modified the generated path to the path prescribed in #5668 and that still did not work--image link remained broken.

What actually worked and displayed the image correctly was removing "/proxy=" and removing the hash for the space "--cp2tp" (in this case). So the correct image link that works is src="https://{HF-SPACE-NAME}.hf.space/file=/tmp/gradio/3dd85e3902c13b7b6f2e2c4eb137a6f0e2114707/image.png"

Let me know if you would like me to set up a demo public HF Space so that you can see the error in action.

freddyaboulton commented 1 year ago

Hi @ivan-mihailov. Thanks for the follow-up. You're right, there is a bug in gradio/HF Spaces that's causing the issue.

Will look into this!

CC @abidlabs this seems related to #5668 (now the X-Direct-URL gets sent with every request)

ivan-mihailov commented 1 year ago

@freddyaboulton Sorry to bug you again. I upgraded to Gradio 3.46.1 but the issue is still not fixed for me. The URL for the images still has "/proxy=" in it. When that is removed, the image appears.

The full URL is as follows: src="/proxy=https://{HF-SPACE-NAME.hf.space/--replicas/hc4dm/file=/tmp/gradio/2df69fe7039199c1060a36b8508856124a981c2a/image.png"

Is there something I can do on my end to force the words "/proxy=" not to be added to the URL?

abidlabs commented 1 year ago

Can you try with Gradio 3.47.1?

ivan-mihailov commented 1 year ago

Can you try with Gradio 3.47.1?

I just did. Same result as to Gradio 3.46.1. src="/proxy=https://{HF-SPACE-NAME.hf.space/--replicas/hc4dm/file=/tmp/gradio/2df69fe7039199c1060a36b8508856124a981c2a/image.png"

abidlabs commented 1 year ago

Can you link to your Space, or provide us with a minimal example we can use to debug?

ivan-mihailov commented 1 year ago

Can you link to your Space, or provide us with a minimal example we can use to debug?

@abidlabs I could not link you to our Space (proprietary algo/data). So I made a minimal example--and that one worked like a charm with Gradio 3.47.1.

I dug into the Build Logs for our original Space and determined that for some reason, even when I change the Gradio/Gradio-Client versions to 3.47.1/0.6.0, those versions get installed and then a separate pip install command is run that downloads Gradio version 3.45.2 which then uninstalls Gradio version 3.47.1. I spent hours trying to determine if another library in the requirements.txt file is forcing this un-installation but to no avail. Build_Log_06_10_23_20_56.txt

Successfully installed Jinja2-3.1.2 Pillow-9.5.0 PyPDF2-3.0.1 aiofiles-23.2.1 altair-5.1.2 anyio-4.0.0 authlib-1.2.1 azure-ai-formrecognizer-3.3.0 azure-common-1.1.28 azure-core-1.29.4 cffi-1.16.0 contourpy-1.1.1 cryptography-41.0.4 cycler-0.12.0 exceptiongroup-1.1.3 fastapi-0.100.1 ffmpy-0.3.1 fonttools-4.43.1 gradio-3.47.1 gradio_client-0.6.0 httpcore-0.18.0 httpx-0.25.0 importlib-resources-6.1.0 isodate-0.6.1 itsdangerous-2.1.2 jsonschema-4.19.1 jsonschema-specifications-2023.7.1 kiwisolver-1.4.5 markupsafe-2.1.3 matplotlib-3.8.0 msrest-0.7.1 oauthlib-3.2.2 openai-0.27.10 orjson-3.9.7 pdf2image-1.16.3 psutil-5.9.5 pycparser-2.21 pydub-0.25.1 pyparsing-3.1.1 python-dotenv-1.0.0 python-multipart-0.0.6 referencing-0.30.2 regex-2023.8.8 reportlab-4.0.5 requests-oauthlib-1.3.1 rpds-py-0.10.4 semantic-version-2.10.0 sniffio-1.3.0 spaces-0.16.1 starlette-0.27.0 toolz-0.12.0 websockets-11.0.3

[notice] A new release of pip available: 22.3.1 -> 23.2.1
[notice] To update, run: python -m pip install --upgrade pip
DONE 16.2s

--> RUN pip install --no-cache-dir  gradio[oauth]==3.45.2   spaces==0.16.1
Defaulting to user installation because normal site-packages is not writeable
Collecting gradio[oauth]==3.45.2
  Downloading gradio-3.45.2-py3-none-any.whl (20.2 MB)
     ━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━━ 20.2/20.2 MB 188.9 MB/s eta 0:00:00
. . .
Installing collected packages: gradio-client, gradio
  Attempting uninstall: gradio-client
    Found existing installation: gradio_client 0.6.0
    Uninstalling gradio_client-0.6.0:
      Successfully uninstalled gradio_client-0.6.0
  Attempting uninstall: gradio
    Found existing installation: gradio 3.47.1
    Uninstalling gradio-3.47.1:
      Successfully uninstalled gradio-3.47.1
Successfully installed gradio-3.45.2 gradio-client-0.5.3

I am attaching the latest Build Log in case you can see something in there that I am missing.

abidlabs commented 1 year ago

Hi @ivan-mihailov, I think I know the issue. To set the version of gradio on Hugging Face Spaces, you actually need to set the sdk_version in the README.md file, not in the requirement.txt. The sdk_version takes priority. If you set it to 3.47.1, it should work!

ivan-mihailov commented 1 year ago

OMG! You are the best, @abidlabs !!!! Thank you so much! I spent so many hours trying to figure this out! I must have re-written the requirements.txt file at least 10 times thinking one of the other libraries was forcing the un-install! Problem has been solved and the Space looks and functions great!