How to make content updated by live stream

Below is the dash interface to show the chat between human and AI, and I would like to use live stream to update AI answers.

I set the dcc interval in the layout section, and the question AI is initiated by function “def run_chatbot(n_clicks, n_submit, user_input, chat_history):”

Log stores answer generated from machine, and I would like if log got new content and should be updated to the chatdisplay, and if no update from log, then the livestream should not work

I am confusing about callback function for dcc.interval, tried a couple times cannot make it work, so any advice would be great to me.

import os
import time
from textwrap import dedent
import dash
from dash import html
from dash import dcc
import dash_bootstrap_components as dbc
from dash.dependencies import Input, Output, State
from PIL import Image
import openai


def Header(name, app):
    app.title = 'ChatHub'
    title = html.H1(name, style={"margin-top": 5})
    logo = html.Img(
        src=app.get_asset_url("logo.png"), style={"float": "right", "height": 60}
    )
    return dbc.Row([dbc.Col(title, md=8), dbc.Col(logo, md=4)])


def intersperse(lst, item):
    result = [item] * (len(lst) * 2 - 1)
    result[0::2] = lst
    return result

# Define app
app = dash.Dash(__name__, external_stylesheets=[dbc.themes.BOOTSTRAP])
server = app.server


# Define Layout
conversation = html.Div(
    html.Div(id="display-conversation"),

)

controls = dbc.InputGroup(
    [
        dbc.Input(id="user-input", placeholder="Write to the chatbot...", type="text"),
        dbc.Button("Submit", id="submit", n_clicks=0), 
    ]
)

app.layout = dbc.Container(
    fluid=False,
    children=[
        Header("ChatBot", app),
        html.Hr(),
        dcc.Store(id="store-conversation", data=""),
        conversation,
        controls,

        dcc.Interval(
            id='interval-component',
            interval=1*1000,  # in milliseconds
            n_intervals=0 )
    ],
)



@app.callback(
    Output("display-conversation", "children"), [Input("store-conversation", "data")]
)
def update_display(chat_history):
    return [
        textbox(x, box="user") if i % 2 == 0 else textbox(x, box="AI")
        for i, x in enumerate(chat_history.split("<split>")[:-1])
    ]

@app.callback(
    Output("user-input", "value"),
    [Input("submit", "n_clicks"), Input("user-input", "n_submit")],
)
def clear_input(n_clicks, n_submit):
    return ""

@app.callback(
    [Output("store-conversation", "data"), Output("loading-component", "children")],
    [Input("submit", "n_clicks"), Input("user-input", "n_submit")],
    [State("user-input", "value"), State("store-conversation", "data")],
)
def run_chatbot(n_clicks, n_submit, user_input, chat_history):
    if n_clicks == 0 and n_submit is None:
        return "", None

    if user_input is None or user_input == "":
        return chat_history, None

    name = 'AI'

    # First add the user input to the chat history
    chat_history += f"You: {user_input}<split>"

    model_input = prompt + chat_history.replace("<split>", "\n")
    print(model_input)
    output_stream = run_query(graph, model_input)
    log=[]
    model_output = '\n'.join(list1)
    #model_output = conversation_chain.predict(input=user_input)
    #model_output = conversation.choices[0].text.strip()

    chat_history += f"{model_output}<split>"

    return chat_history, None


if __name__ == "__main__":
    app.run_server(debug=True, host='127.0.0.1', port=8000)

Hey @Jonison welcome to the community.

Take a look here:

1 Like