Allow `Gallery` to display images in full resolution when clicked

[FurkanGozukara]

Describe the bug

I am looking options here but can't find it When image is clicked I want it to be displayed in full size or like pop up and display full resolution etc

is that possible?

https://www.gradio.app/docs/gallery

As you see in below screenshot images are displayed really low resolution

When clicked on them display full size somehow

output_gallery = gr.Gallery(label="Generated Images")

Have you searched existing issues? 🔎

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

Reproduction

output_gallery = gr.Gallery(label="Generated Images")

Screenshot

No response

Logs

No response

System Info

(venv) G:\IP-Adapter-FaceID\venv\Scripts>pip freeze
accelerate==0.25.0
aiofiles==23.2.1
albumentations==1.3.1
altair==5.2.0
annotated-types==0.6.0
anyio==4.2.0
attrs==23.2.0
certifi==2022.12.7
charset-normalizer==2.1.1
click==8.1.7
colorama==0.4.6
coloredlogs==15.0.1
contourpy==1.2.0
cycler==0.12.1
Cython==3.0.7
diffusers==0.25.0
easydict==1.11
einops==0.7.0
exceptiongroup==1.2.0
fastapi==0.108.0
ffmpy==0.3.1
filelock==3.9.0
flatbuffers==23.5.26
fonttools==4.47.0
fsspec==2023.12.2
gradio==4.12.0
gradio_client==0.8.0
h11==0.14.0
httpcore==1.0.2
httpx==0.26.0
huggingface-hub==0.20.1
humanfriendly==10.0
idna==3.4
imageio==2.33.1
importlib-metadata==7.0.1
importlib-resources==6.1.1
insightface==0.7.3
ip-adapter @ git+https://github.com/tencent-ailab/IP-Adapter.git@9d8960cbe87977df258a0fb441fd3eba1e5efca8
Jinja2==3.1.2
joblib==1.3.2
jsonschema==4.20.0
jsonschema-specifications==2023.12.1
kiwisolver==1.4.5
lazy_loader==0.3
markdown-it-py==3.0.0
MarkupSafe==2.1.3
matplotlib==3.8.2
mdurl==0.1.2
mpmath==1.3.0
networkx==3.0
numpy==1.24.1
onnx==1.15.0
onnxruntime-gpu==1.16.3
opencv-python-headless==4.9.0.80
orjson==3.9.10
packaging==23.2
pandas==2.1.4
Pillow==9.3.0
prettytable==3.9.0
protobuf==4.25.1
psutil==5.9.7
pydantic==2.5.3
pydantic_core==2.14.6
pydub==0.25.1
Pygments==2.17.2
pyparsing==3.1.1
pyreadline3==3.4.1
python-dateutil==2.8.2
python-multipart==0.0.6
pytz==2023.3.post1
PyYAML==6.0.1
qudida==0.0.4
referencing==0.32.0
regex==2023.12.25
requests==2.28.1
rich==13.7.0
rpds-py==0.16.2
safetensors==0.4.1
scikit-image==0.22.0
scikit-learn==1.3.2
scipy==1.11.4
semantic-version==2.10.0
shellingham==1.5.4
six==1.16.0
sniffio==1.3.0
starlette==0.32.0.post1
sympy==1.12
threadpoolctl==3.2.0
tifffile==2023.12.9
tokenizers==0.15.0
tomlkit==0.12.0
toolz==0.12.0
torch==2.1.2+cu118
torchaudio==2.1.2+cu118
torchvision==0.16.2+cu118
tqdm==4.66.1
transformers==4.36.2
typer==0.9.0
typing_extensions==4.9.0
tzdata==2023.4
urllib3==1.26.13
uvicorn==0.25.0
wcwidth==0.2.12
websockets==11.0.3
zipp==3.17.0

(venv) G:\IP-Adapter-FaceID\venv\Scripts>

Severity

Blocking usage of gradio

[shubhamofbce]

@abidlabs What do you suggest ?? We should show the image in full resolution by default or we should give our user an option to view it in fulll resolution ??

[FurkanGozukara]

I wish there was an option that when people click on image or double click, it will popup and show full size

[abidlabs]

Thanks folks. I'd suggest the following UI/UX:

I'd add another small button to the left of the download button that has the standard "fullscreen" icon. When this button is clicked, the displayed image is made full screen in a pop-up modal. We could add the same icon to gr.Image() as requested here: https://github.com/gradio-app/gradio/issues/4908 for consistency

[FurkanGozukara]

Thanks folks. I'd suggest the following UI/UX:

I'd add another small button to the left of the download button that has the standard "fullscreen" icon. When this button is clicked, the displayed image is made full screen in a pop-up modal. We could add the same icon to gr.Image() as requested here: #4908 for consistency

this sounds great. so in gallery after clicking it and displaying full size, can people use arrow keys or arrow on screen to navigate between each image?

[ffahmed]

Thanks folks. I'd suggest the following UI/UX:

I'd add another small button to the left of the download button that has the standard "fullscreen" icon. When this button is clicked, the displayed image is made full screen in a pop-up modal. We could add the same icon to gr.Image() as requested here: #4908 for consistency

Is it implemented yet in latest gradio? Any alternative till then?

Thanks Faisal

[FurkanGozukara]

we still lacking full screen feature :(

[nairoj]

I wonder how sd-webui does this, I found the code for their ui, but not how they set up their Gallery

[FurkanGozukara]

I wonder how sd-webui does this, I found the code for their ui, but not how they set up their Gallery

ye i also wonder

but this is a very fundamental feature to be added to the gradio