broken UI for `ChatInterface` in spaces

not-lain commented 5 months ago

Describe the bug

the app does not take into account the length of the page when I have both a title and a really long description. basically i can't scroll up to see the rest of the page not sure if this is a huggingface problem or a gradio problem tbh

tried running the same code in colab and it's running like it's supposed to, only problem when running from huggingface

Have you searched existing issues? 🔎

[X] I have searched and found no existing issues

Reproduction

link for space : https://huggingface.co/spaces/not-lain/chatinterface-test-ui

import gradio as gr

def talk(message, history):
    return "hi"

DESCRIPTION = """
# This is a very long description
A rag pipeline with a chatbot feature

Resources used to build this project :

* embedding model : https://huggingface.co/mixedbread-ai/mxbai-embed-large-v1
* dataset : https://huggingface.co/datasets/not-lain/wikipedia-small-3000-embedded (used mxbai-colbert-large-v1 to create the embedding column )
* faiss docs : https://huggingface.co/docs/datasets/v2.18.0/en/package_reference/main_classes#datasets.Dataset.add_faiss_index 
* chatbot : https://huggingface.co/google/gemma-7b-it

If you want to support my work consider clicking on the heart react button ❤️🤗

(testing the ui)
"""

demo = gr.ChatInterface(
    fn=talk,
    chatbot=gr.Chatbot(
    ),
    description=DESCRIPTION,
)
demo.launch(debug=True)

Screenshot

Logs

===== Application Startup at 2024-04-06 04:43:21 =====

Running on local URL:  http://0.0.0.0:7860

To create a public link, set `share=True` in `launch()`.

nothing ＼(ﾟｰﾟ＼)

System Info

gradio==4.25.0 (i pinned it in the requirements.txt)

Severity

I can work around it

abidlabs commented 5 months ago

@not-lain here's what I see when I open the Space:

What browser / OS are you using?

not-lain commented 5 months ago

Windows 11 Home Single Language
version 23H2
OS build 22631.3296

I've tried it on :

chrome : 123.0.6312.106 (Official Build) (64-bit)
firefox : 124.0.2 (64-bit)
and operagx : LVL5 (core: 107.0.5045.86) that has Chromium version:121.0.6167.186

and it is still the same

not-lain commented 5 months ago

also @abidlabs are you sure you checked the huggingface url https://huggingface.co/spaces/not-lain/chatinterface-test-ui and not running locally ? coz when i ran this on colab the ui was working perfectly

not-lain commented 5 months ago

I presume the problem is from huggingface spaces and not from gradio, if you do have the same problem too do let me know and i'll create a separate issue on the appropriate repo

not-lain commented 5 months ago

i've tried embedding the previous space into another HTML app and the embedding works fine the only problem is with huggingface spaces can someone point me at their github repo so i can open an issue there and close this one (since this is not related to gradio) also pic as a reference after embedding the space into an html website :

not-lain commented 5 months ago

also the ui is different between these 2 links

dawoodkhan82 commented 5 months ago

@not-lain I see the issue on chrome but not on safari. Seems like an issue with the height of the iframe. @pngwn Any idea why this might be happening?

not-lain commented 5 months ago

i'm keeping this open, and I opened a report at https://huggingface.co/spaces/not-lain/chatinterface-test-ui/discussions/1 referencing what i've tried in here, hope they fix it soon

pngwn commented 5 months ago

Any idea why this might be happening?

Because iframes have a personal vendetta against me.

There are a variety of small issues around the iframe not resizing correctly. I'll try to take a look as soon as i can.

This is probably related to the iframe resizing heuristic (we've changed it a bunch of times and never managed to solve it properly) but it could also be related to how we allow chatbots to 'flex' to fill the content height. Or some combination of the two.

gradio-app / gradio