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
32.25k stars 2.41k forks source link

gradio 4 chatbot: Uncaught (in promise) DOMException: Failed to execute 'insertBefore' on 'Node': The node before which the new node is to be inserted is not a child of this node. #7587

Closed pseudotensor closed 6 months ago

pseudotensor commented 6 months ago

Describe the bug

When not in exact user-bot turn order and html content in chatbot, hit this. Entire UI breaks. Difficulty reproducing in isolated case (spend 5 hours trying so far).

Have you searched existing issues? 🔎

Reproduction

WIP

Screenshot

image

Logs

No response

System Info

gradio 4.19.2

Severity

Blocking usage of gradio

pseudotensor commented 6 months ago

Having a hard time reproducing in separate code outside h2oGPT:

import gradio as gr
import random
import time

with gr.Blocks() as demo:
    chatbot = gr.Chatbot(render_markdown=True,
        likeable=True,
                         show_copy_button=True,
                         )
    msg = gr.Textbox()
    clear = gr.ClearButton([msg, chatbot])

    def respond(message, chat_history):
        #chat_history = [['foo', 'bar'], [None, 'bot'], ['bot2', None]]
        #chat_history = [['summarize', "Chirpy, a bird with a unique gift of singing any bird's voice, embarked on a journey to find the enchanting melody he had heard. Along the way, he met various birds who taught him their songs, but none satisfied his search. Finally, he encountered the legendary Phoenix, who taught him the true meaning of a song—a story of love, courage, and hope. Chirpy learned that a song is not just a melody but a powerful force that can heal, strengthen, and bring joy. From then on, Chirpy used his gift to spread love, courage, and hope through his songs, becoming a legend in the Whispering Woods."]]
        #yield "", chat_history

        #chat_history = [['summarize', "Chirpy, a bird with a unique gift of singing any bird's voice, embarked on a journey to find the enchanting melody he had heard. Along the way, he met various birds who taught him their songs, but none satisfied his search. Finally, he encountered the legendary Phoenix, who taught him the true meaning of a song—a story of love, courage, and hope. Chirpy learned that a song is not just a melody but a powerful force that can heal, strengthen, and bring joy. From then on, Chirpy used his gift to spread love, courage, and hope through his songs, becoming a legend in the Whispering Woods."], [None, '<details><summary><font size="2">Sources</font></summary><font size="2"><font size="2">Sources [Score | Link]:<ul></font><font size="2"><li>0.79 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">The text itself is a mix of paragraphs a</font></summary><font size="2">The text itself is a mix of paragraphs and sentences, with some words highlighted in yellow, indicating that they may be selected or in focus. The overall style of the image is informational and functional, typical of a software interface used for document creation or editing.</font></details></font><font size="2"><li>0.76 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">Chat Document Selection Document Viewer </font></summary><font size="2">Chat Document Selection Document Viewer Chat History Expert Models System Login\n Ask <40> Submit <31> Redo\n or Ingest <30> Ingest <19> Upload\n EntertoS Submit, Shift-Enter adds lines. JustClick Submit1 for simple Clicking Ingest adds texta asURLIArXwYouTuberText. Stop Undo\n <45> Save <37> Clear\n Query Summarize Extract\n - h2oGPT| [Model: mistral-large-I latest]\n Tellav very long kid\'s story about birds. 8</font></details></font><font size="2"><li>0.75 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">The image appears to be a screenshot of </font></summary><font size="2">The image appears to be a screenshot of a text editor or word processing software interface, showing a document with text. The document is titled "Chip\'s Story" and contains a narrative that seems to be a fictional or creative piece about a bird named Chip. The text describes Chip as a cheerful bird with a beautiful melody, who lives in Whispering Woods. It mentions that Chip is not like other birds in the forest and that he has a unique gift—he can sing any bird\'s voice. The text also mentions that Chip is</font></details></font><font size="2"><li>0.75 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">And so, Chirpy became al legendi in the </font></summary><font size="2">And so, Chirpy became al legendi in the Whispering Woods, known for his beautiful songs and his kind heart. His story wast toldf from generation to generation, reminding everyone that nor matter how small they may be, they have the power to make\n a difference with love, courage, and hope.\n And they all lived happily ever after. The end.\n (v)</font></details></font><font size="2"><li>0.74 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">Phoenix.  From that day forward, Chirpy </font></summary><font size="2">Phoenix.\n From that day forward, Chirpy used his gift to sing songs of love, courage, and hope. He sang to heal the wounded, give strength to the weak, and bringj joyt to the sad. And every time he sang, he remembered hisj journey and the lesson he had\n learned- that as songi is notj just ar melody, but a story that comes from the heart.</font></details></font><font size="2"><li>0.73 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">The text editor interface includes vario</font></summary><font size="2">The text editor interface includes various tabs and buttons at the top, such as "File," "Edit," "View," "Insert," "Tools," "Help," and "Web." There are also tabs for "Document," "Document View," "Chat History," "Chat," and "System." The interface suggests that this is a collaborative document editing platform, possibly used for writing or editing documents in a team setting.</font></details></font><font size="2"><li>0.73 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">Once upon at time, inal land filled with</font></summary><font size="2">Once upon at time, inal land filled with vibrant colors and enchanting melodies, there was a vast forest known as the Whispering Woods. This forest was home to countless creatures, but the most remarkable of all were the birds. They filled the sky\n with a symphony of songs and a kaleidoscope of colors, each one unique and beautiful ini its own way.</font></details></font><font size="2"><li>0.72 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">One day, Chirpy heard a beautiful song t</font></summary><font size="2">One day, Chirpy heard a beautiful song that he had never heard before. Itwas ar melody 50 enchanting thati itr made the flowers bloom and the sun shine brighter. Chirpy was determined to learn this news song. He decided to embark on aj journey to\n findt the bird who sang this beautiful melody.</font></details></font><font size="2"><li>0.72 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">and magical powers.  Chirpy approached t</font></summary><font size="2">and magical powers.\n Chirpy approached the Phoenix and asked,\' "Oh great Phoenix, will you teach mey your beautiful: song?\' The Phoenix looked at Chirpy and said, "1will teach you the song, but first, your must learn the true meaning of the song."\n The Phoenix explained that the song was notj just a melody, butas story- as story of love, courage, and hope. Itwas a song that could healt the wounded, give strength to the weak, and bringj joyt to the sad. The Phoenix told Chirpyt that to sing this</font></details></font><font size="2"><li>0.71 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">Chirpy flew for miles, crossing rivers, </font></summary><font size="2">Chirpy flew for miles, crossing rivers, mountains, and meadows. He met many birds along the way, each one teaching him ar news song. Hel learned the song oft the nightingale, the lark, the swan, and the parrot. But none oft them were the song he\n was lookingf for.\n After many days and nights, Chirpy reached the edge of the forest. There, he saw a beautiful bird with golden feathers, singing the enchanting melody he had been searching for. The bird was the legendary Phoenix, known fori its beautiful song</font></details></font>Total Time: 4 [s]<p>Total document chunks used: 10<p><font size="2"></ul></p>End Sources<p></font></font></details>'], ['teeth', None]]
        #yield "", chat_history

        #chat_history = [['summarize', "Chirpy, a bird with a unique gift of singing any bird's voice, embarked on a journey to find the enchanting melody he had heard. Along the way, he met various birds who taught him their songs, but none satisfied his search. Finally, he encountered the legendary Phoenix, who taught him the true meaning of a song—a story of love, courage, and hope. Chirpy learned that a song is not just a melody but a powerful force that can heal, strengthen, and bring joy. From then on, Chirpy used his gift to spread love, courage, and hope through his songs, becoming a legend in the Whispering Woods."], [None, None], ['teeth', None]]
        #return "", chat_history

        chat_history = [['Summarize',
          "Once upon a time, in a forest called the Whispering Woods, there was a cheerful bird named Chirpy. Chirpy had a unique gift: he could sing any bird's voice. One day, he heard a beautiful song that he had never heard before and decided to find the bird who sang it. After a long journey, he met the legendary Phoenix, who taught him that a song is not just a melody, but a story of love, courage, and hope. Chirpy learned many songs from other birds along the way, but none were the song he was looking for. Finally, he reached the edge of the forest and heard the enchanting melody he had been searching for. It was the Phoenix, a beautiful bird with golden feathers. The Phoenix taught Chirpy the true meaning of the song and how to use it to heal the wounded, give strength to the weak, and bring joy to the sad. From that day forward, Chirpy used his gift to sing songs of love, courage, and hope, becoming a legend in the Whispering Woods."],
         [None,
          '<details><summary><font size="2">Sources</font></summary><font size="2"><font size="2">Sources [Score | Link]:<ul></font><font size="2"><li>0.78 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">The text itself is a mix of paragraphs a</font></summary><font size="2">The text itself is a mix of paragraphs and sentences, with some words highlighted in yellow, indicating that they may be selected or in focus. The overall style of the image is informational and functional, typical of a software interface used for document creation or editing.</font></details></font><font size="2"><li>0.75 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">Chat Document Selection Document Viewer </font></summary><font size="2">Chat Document Selection Document Viewer Chat History Expert Models System Login\n Ask <40> Submit <31> Redo\n or Ingest <30> Ingest <19> Upload\n EntertoS Submit, Shift-Enter adds lines. JustClick Submit1 for simple Clicking Ingest adds texta asURLIArXwYouTuberText. Stop Undo\n <45> Save <37> Clear\n Query Summarize Extract\n - h2oGPT| [Model: mistral-large-I latest]\n Tellav very long kid\'s story about birds. 8</font></details></font><font size="2"><li>0.73 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">The image appears to be a screenshot of </font></summary><font size="2">The image appears to be a screenshot of a text editor or word processing software interface, showing a document with text. The document is titled "Chip\'s Story" and contains a narrative that seems to be a fictional or creative piece about a bird named Chip. The text describes Chip as a cheerful bird with a beautiful melody, who lives in Whispering Woods. It mentions that Chip is not like other birds in the forest and that he has a unique gift—he can sing any bird\'s voice. The text also mentions that Chip is</font></details></font><font size="2"><li>0.72 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">And so, Chirpy became al legendi in the </font></summary><font size="2">And so, Chirpy became al legendi in the Whispering Woods, known for his beautiful songs and his kind heart. His story wast toldf from generation to generation, reminding everyone that nor matter how small they may be, they have the power to make\n a difference with love, courage, and hope.\n And they all lived happily ever after. The end.\n (v)</font></details></font><font size="2"><li>0.71 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">The text editor interface includes vario</font></summary><font size="2">The text editor interface includes various tabs and buttons at the top, such as "File," "Edit," "View," "Insert," "Tools," "Help," and "Web." There are also tabs for "Document," "Document View," "Chat History," "Chat," and "System." The interface suggests that this is a collaborative document editing platform, possibly used for writing or editing documents in a team setting.</font></details></font><font size="2"><li>0.71 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">Phoenix.  From that day forward, Chirpy </font></summary><font size="2">Phoenix.\n From that day forward, Chirpy used his gift to sing songs of love, courage, and hope. He sang to heal the wounded, give strength to the weak, and bringj joyt to the sad. And every time he sang, he remembered hisj journey and the lesson he had\n learned- that as songi is notj just ar melody, but a story that comes from the heart.</font></details></font><font size="2"><li>0.7 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">Once upon at time, inal land filled with</font></summary><font size="2">Once upon at time, inal land filled with vibrant colors and enchanting melodies, there was a vast forest known as the Whispering Woods. This forest was home to countless creatures, but the most remarkable of all were the birds. They filled the sky\n with a symphony of songs and a kaleidoscope of colors, each one unique and beautiful ini its own way.</font></details></font><font size="2"><li>0.69 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">One day, Chirpy heard a beautiful song t</font></summary><font size="2">One day, Chirpy heard a beautiful song that he had never heard before. Itwas ar melody 50 enchanting thati itr made the flowers bloom and the sun shine brighter. Chirpy was determined to learn this news song. He decided to embark on aj journey to\n findt the bird who sang this beautiful melody.</font></details></font><font size="2"><li>0.69 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">Chirpy flew for miles, crossing rivers, </font></summary><font size="2">Chirpy flew for miles, crossing rivers, mountains, and meadows. He met many birds along the way, each one teaching him ar news song. Hel learned the song oft the nightingale, the lark, the swan, and the parrot. But none oft them were the song he\n was lookingf for.\n After many days and nights, Chirpy reached the edge of the forest. There, he saw a beautiful bird with golden feathers, singing the enchanting melody he had been searching for. The bird was the legendary Phoenix, known fori its beautiful song</font></details></font><font size="2"><li>0.69 | <font size="2"><a href="file//tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png" target="_blank"  rel="noopener noreferrer">/tmp/gradio/49e4a92dfdc17d3f950e2e3116181964a240e0e1/Screenshot from 2024-02-26 08-52-47.png</a></font></li><details><summary><font size="2">and magical powers.  Chirpy approached t</font></summary><font size="2">and magical powers.\n Chirpy approached the Phoenix and asked,\' "Oh great Phoenix, will you teach mey your beautiful: song?\' The Phoenix looked at Chirpy and said, "1will teach you the song, but first, your must learn the true meaning of the song."\n The Phoenix explained that the song was notj just a melody, butas story- as story of love, courage, and hope. Itwas a song that could healt the wounded, give strength to the weak, and bringj joyt to the sad. The Phoenix told Chirpyt that to sing this</font></details></font>Total Time: 4 [s]<p>Total document chunks used: 10<p><font size="2"></ul></p>End Sources<p></font></font></details>'],
         ['teeth', None]]
        return "", chat_history

    msg.submit(respond, [msg, chatbot], [msg, chatbot], api_name='submit')

if __name__ == "__main__":
    demo.load(queue=True)
    demo.launch()

But can reproduce inside h2oGPT with same exact gradio every time. Happens as soon as the yield or return happens that updates the chatbot. And oddly the source accordion goes away too. Odd stuff.

pseudotensor commented 6 months ago

Related:

https://github.com/gradio-app/gradio/issues/6613

But above issue is markdown, this one is html

pseudotensor commented 6 months ago

Same on firefox and chrome.

firefox:

image

pseudotensor commented 6 months ago

sanitize=False or other options have no effect.

abidlabs commented 6 months ago

Potentially related: https://github.com/gradio-app/gradio/issues/7569

pseudotensor commented 6 months ago

Ya perhaps, the above issue and its code reproduces for me.

dawoodkhan82 commented 6 months ago

@pseudotensor I can't seem to reproduce the issue, but can you check if this PR fixes the bug for you?

pseudotensor commented 6 months ago

@dawoodkhan82 But can you reproduce the code from #7569 ? I can. Not sure related, but maybe.

pseudotensor commented 6 months ago

Note that in my case I don't have an image tag in the html in the chatbot.

abidlabs commented 6 months ago

@pseudotensor does the issue get resolved for you if you install gradio with this command:

pip install https://gradio-builds.s3.amazonaws.com/01b1d1d5224413fed31baa9cba8a441a1009c743/gradio-4.20.1-py3-none-any.whl
pseudotensor commented 6 months ago

@abidlabs Yes! That fixed it! I can continue to repro the problem and it goes away only when using the build you shared.

image

abidlabs commented 6 months ago

Nice we'll get this PR in soon

pseudotensor commented 6 months ago

I also confirmed that latex_delimiters=[], as work-around worked.

abidlabs commented 6 months ago

Closed via https://github.com/gradio-app/gradio/pull/7623