Textinput sends a empty string or "[" string first time panel is built

ejgutierrez74 · March 19, 2024, 4:33pm

Hi dont know why …in this code i have this problem…dont know why…seems that panel is calling the callback function without any content…or “[” character…
Im trying to customize a chat gui for my IA:

Code:


inp = pn.widgets.TextInput(value="Hi", placeholder='Enter text here…')
button_conversation = pn.widgets.Button(name="Chat!")

interactive_conversation = pn.bind(collect_messages, button_conversation)

dashboard = pn.Column(
     inp,
     pn.Row(button_conversation),
     pn.panel(interactive_conversation, loading_indicator=True, height=300)   
)

dashboard

And the collect message:

#Esta funcion gestiona GUI: obtenemos el prompt de la caja de texto, y cuando damos enter, envia el contenido del
#texto como prompt al sistema LLM, y publica la respuesta....

def collect_messages(_):
    promptActualGUI = inp.value_input
    inp.value = ''
    promptsGUI.append(promptActualGUI)
  
    response = llama_chat_openaiGUI(promptsGUI, responsesGUI) 
    responsesGUI.append(response)
    
    panels.append(
        pn.Row('User:', pn.pane.Markdown(promptActualGUI, width=600, styles=user_style)))
    panels.append(
        pn.Row('Assistant:', pn.pane.Markdown(response, width=600, styles=assistant_style)))
 
    return pn.Column(*panels)

Seems that when i create the pane and button, somehow it calls the collectmessage binded function, with the text empty ( at least should be empty) but it says i submitted a "[· text to AI…Its clear that sending the claudator to the AI, it doesnt understand anything and returns the answer…

By the way if i have a get a long response, the background square in grey color, is smaller than the text…so long text more than 10 lines, the text is bigger than the “box” which is very ugly as UI, Any solution to this ?

ahuang11 · March 19, 2024, 10:31pm

Based on the code, not enough info to reproduce.

I’d recommend using ChatInterface instead of reinventing the wheel.

ejgutierrez74 · March 20, 2024, 12:14pm

Thanks to response, but id like to make a more customizable chat, and also learn Panel…

Perhaps this could help, enough code…in theory you write a question or whatever and clic button Chat…, then the binding should call the function collect messages and return a “hola” message…A user line with the question, and assistant response with “hola” should be added below…and thats every time you ask a new question.

But something is wrong as i got an empty, blank output

# Esta funcion gestiona GUI: obtenemos el prompt de la caja de texto, y cuando damos enter, envia el contenido del
# texto como prompt al sistema LLM, y publica la respuesta....

def collect_messages(_):
    promptActualGUI = inp.value_input
    inp.value = ''
    #  promptsGUI.append(promptActualGUI)

    response = "hola"
    #  responsesGUI.append(response)

    panels.append(
        pn.Row('User:', pn.pane.Markdown(promptActualGUI, width=600)))
    panels.append(
        pn.Row('Assistant:', pn.pane.Markdown(response, width=600)))

    return pn.Column(*panels)


import panel as pn

pn.extension()

panels = []

inp = pn.widgets.TextInput(value="Hi", placeholder='Enter text here…')
button_conversation = pn.widgets.Button(name="Chat!")

interactive_conversation = pn.bind(collect_messages, button_conversation)

dashboard = pn.Column(
    inp,
    pn.Row(button_conversation),
    pn.panel(interactive_conversation, loading_indicator=True, height=300)
)

dashboard

ahuang11 · March 20, 2024, 3:56pm

Use value instead of value_input

value_input watches on character.

ejgutierrez74 · March 20, 2024, 8:20pm

Im having blank output…it does nothing…

ahuang11 · March 21, 2024, 3:18pm

Try restaritng the kernel.

ejgutierrez74 · March 23, 2024, 10:07am

Hi, it worked at 50%

#Esta funcion gestiona GUI: obtenemos el prompt de la caja de texto, y cuando damos enter, envia el contenido del
#texto como prompt al sistema LLM, y publica la respuesta....

def collect_messages(_):
    promptActualGUI = inp.value
    inp.value = ''
    promptsGUI.append(promptActualGUI)
  
   # response = llama_openai(promptActualGUI)
    response="Prueba"
    responsesGUI.append(response)
    
    panels.append(
        pn.Row('User:', pn.pane.Markdown(promptActualGUI, width=600)))
    panels.append(
        pn.Row('Assistant:', pn.pane.Markdown(response, width=600)))
 
    return pn.Column(*panels)

import panel as pn

pn.extension()

panels =[]

inp = pn.widgets.TextInput(value="Hi", placeholder='Enter text here…')
button_conversation = pn.widgets.Button(name="Chat!")

interactive_conversation = pn.bind(collect_messages, button_conversation)

dashboard = pn.Column(
     inp,
     pn.Row(button_conversation),
     pn.panel(interactive_conversation, loading_indicator=True, height=300)   
)

dashboard

The problem is customize the names of users and their own avatars…

And specially that as you can see id like an first message without response of the system/callback. A presentation chat message as i explain in other post…dont know if its possible to do it actually in Panel.

ahuang11 · March 25, 2024, 10:29pm

Again, I recommend you using panel chat interface instead of reinventing the wheel.

ejgutierrez74 · March 29, 2024, 11:09am

Yes, but i want to learn…

You also have a post in ChatInterface with similar problem, the user name is in the setup but Panel uses another name.

In concrete in callback function i use the name Asker, and in the chatmessage appears the user “User”, so seems a bug…

Thanks for your help

ahuang11 · March 29, 2024, 6:07pm

To help triage, can you help me create a minimal reproducible example How to create a Minimal, Reproducible Example - Help Center - Stack Overflow

ejgutierrez74 · March 30, 2024, 11:48am

gui = pnci.chat.ChatInterface( message_params=message_params,
                             show_rerun=False, show_undo=False,show_stop=False,
                             stylesheets=[STYLE],
                             #css_classes=[STYLE],
                             widgets=pnci.widgets.TextAreaInput(  placeholder="Escribe tu pregunta aqui", auto_grow=True, max_rows=5 ),
                             height=400,
                             callback=system_response,
                            # avatar = pnci.pane.PNG('https://panel.pyviz.org/_images/JPG.png'),
                             user="Asker",
                             callback_user="EduBot"
                           )

# sending messages
initialmsg = gui.send( pnci.chat.ChatMessage( welcome,
                 avatar          = "🤖",
                 stylesheets     = [STYLE],
                 show_user       = True,
                 show_timestamp  = False,
                 show_copy_icon  = False,
                 show_reaction_icons=False,
                 sizing_mode     = "stretch_width",
                 user="EduBot",
))


initialmsg

gui


And this is the result:

The name of User should be “Asker” and appears User…in callback in ChatInterface

As feature request would be nice an option, to send the Assistant an initial or presentation message without any response of the callback function.

ea42gh · March 30, 2024, 7:08pm

Please review how to create a minimal reproducible example:
you forgot to define system_response. You also forgot to define welcome.
Further, panel is usually imported as pn…

When you constructed the message to be displayed, you specified
user="EduBot",avatar="🤖" so that is what was displayed.

I suggest setting different combinations of user name and avatar,
as well as removing either the user and/or the avatar setting to see what they do.
You will find the call arguments that generate the display you want to see:
I am guessing user='"Asker", but it is not quite clear to me from what you wrote.