GUI for Workflow

[Arturro-98]

Hi,
I've implemented a fully working backend chatbot that analyses user queries (from input() ), collects related information from three different sources, and provides relevant answers.
My problem is that I'm unable to implement a simple GUI for it. I have tried Gradio and Streamlit already but without any success.

From a link like this: https://towardsdatascience.com/building-an-interactive-ui-for-llamaindex-workflows-842dd7abedde/
I was trying to implement Field(). I know the issue is in handling inputs and outputs since the Workflow is encapsulated itself and I have user input inside.

Here is my highly simplified Workflow, without using LLMs and functions, but with all the steps, Events, and user input:

class InputEvent(Event):
    query: str

class TestQueryEvent(Event):
    query: str

class RAG_Event(Event):
    query: str

class SourceTwoCollectionEvent(Event):
    query: str

class SourceThreeCollectionEvent(Event):
    query: dict

class FinalAnalyseEvent(Event):
    query: str 
    source: str 
    response: str 

class Simplified_Chatbot(Workflow):
    def __init__(self, *args, **kwargs):
        super().__init__(*args, **kwargs)
        # Removed OpenAI and query engine since simplified version
             
    @step(pass_context=True)
    async def input_extraction(self, ctx: Context, ev: StartEvent | TestQueryEvent) -> InputEvent:
        if isinstance(ev, StartEvent):
            if not hasattr(ctx.data, "input_data"):
                ctx.data["input_data"] = {}

            # Expecting input in the form: "Name , id , email"
            input_str = ev.input
            inp_extraction = input_str.split(' , ')

            ctx.data["input_data"]["Hardcoded Input"] = input_str
            ctx.data["input_data"]["Name Input"] = inp_extraction[0]
            ctx.data["input_data"]["user_id Input"] = inp_extraction[1]
            ctx.data["input_data"]["user_email Input"] = inp_extraction[2] 

            return InputEvent(query=input_str)

        return InputEvent(query=ev.query)

    @step(pass_context=True)
    async def query_processing(self, ctx: Context, ev: InputEvent) -> RAG_Event | SourceTwoCollectionEvent | SourceThreeCollectionEvent | TestQueryEvent:
        user_name = ctx.data["input_data"]["Name Input"]
        print(f"\n{'####'*20}\n\nHello {user_name}, please provide detailed information regarding your problem:\n")
        user_query = input("Your input: ")

        # Simplified query analysis - just check if input is "good" or "bad"
        if user_query.strip().lower() != 'good':
            print(f"\nYour query: '{user_query}' doesn't contain enough information to provide an answer.\n")
            return TestQueryEvent(query=user_query)

        # Store query data
        if not hasattr(ctx.data, "query_data"):
            ctx.data["query_data"] = {}

        ctx.data["query_data"].update({
            "Original Query": "Original Query EXAMPLE",
            "Enhanced Query": "Enhanced Query EXAMPLE",
            "Source Two Query": "Source Two Query EXAMPLE",
            "Source Three Query": "Source Three Query EXAMPLE"
        })

        # Send all events
        ctx.send_event(RAG_Event(query=user_query))
        ctx.send_event(SourceTwoCollectionEvent(query=user_query))
        ctx.send_event(SourceThreeCollectionEvent(query={"query": user_query}))
        
        return None  # Return None since we're using send_event

    @step(pass_context=True)
    async def rag_agent(self, ctx: Context, ev: RAG_Event) -> FinalAnalyseEvent:
        return FinalAnalyseEvent(query=ev.query, source="RAG", response="This is dummy RAG response")

    @step(pass_context=True)
    async def pubmed_agent(self, ctx: Context, ev: SourceTwoCollectionEvent) -> FinalAnalyseEvent:
        return FinalAnalyseEvent(query="Pass", source="Source Two", response="This is dummy Source Two response")

    @step(pass_context=True)
    async def internet_source_agent(self, ctx: Context, ev: SourceThreeCollectionEvent) -> FinalAnalyseEvent:
        return FinalAnalyseEvent(query="Pass", source="Source Three", response="This is dummy Source Three response")

    @step(pass_context=True)
    async def analyse_agent(self, ctx: Context, ev: FinalAnalyseEvent) -> StopEvent | None:
        ready = ctx.collect_events(ev, [FinalAnalyseEvent] * 3)
        if ready is None:
            return None

        responses = {
            response.source: response.response 
            for response in ready
        }

        # Create final response without LLM
        final_response = f"Combined responses:\n{json.dumps(responses, indent=2)}\n"
        disclaimer = "\n\nThis analysis and recommendations are provided by an AI..."
        
        return StopEvent(result=final_response + disclaimer)

Called and fully working in backend here:

chatbot_test = Simplified_Chatbot(timeout=None, verbose=False)
name = "John"
user_id = "01018863" 
email = "example_email.something.com"  
input_str = f"{name} , {user_id} , {email}"
result = await chatbot_test.run(input=input_str)
print(result)

Can anyone help me, please? Are there any tutorials, links, or advice?
Thank you in advance!

[dosubot[bot]]

Hey there, @Arturro-98! 👋 I'm here to help you with any bugs, questions, or contributions while you're waiting for a human maintainer.

To implement a simple GUI for your backend chatbot using techniques similar to those described in the article about building an interactive UI for LlamaIndex workflows, you can use Streamlit to create an interactive interface. Here's a basic outline of how you can achieve this:

1. Set Up Streamlit: Install Streamlit if you haven't already, and use it to create interactive components for your chatbot.

2. Create a Chat Interface: Use Streamlit's st.chat_input to take user queries and st.chat_message to display both user queries and model responses.

3. Integrate with Your Workflow: Use your existing workflow logic to process user inputs and generate responses.

Here's a simplified example using Streamlit:

import streamlit as st
from llama_index import LlamaIndex

# Initialize LlamaIndex and load your data
index = LlamaIndex()
index.load_data('path_to_your_data')

# Create a chat engine
chat_engine = index.create_chat_engine()

# Streamlit app
st.title("Simple Chatbot")

# Chat interface
if 'chat_history' not in st.session_state:
    st.session_state['chat_history'] = []

user_input = st.chat_input("Your Message:")
if user_input:
    st.session_state['chat_history'].append(f"User: {user_input}")
    response = chat_engine.query(user_input)
    st.session_state['chat_history'].append(f"Bot: {response}")

for message in st.session_state['chat_history']:
    st.chat_message(message)

This example creates a simple chat interface using Streamlit where user messages are processed by the LlamaIndex-powered chat engine. You can expand this by integrating your backend chatbot logic to generate more sophisticated responses ^[1].

If you encounter issues with input handling, ensure that your workflow is correctly integrated with the Streamlit interface, and that user inputs are being passed to your workflow as expected.

To continue talking to Dosu, mention @dosu.

---

^{Help Dosu learn! Give it feedback: Great Response | Irrelevant Answer | Incorrect Sources | Too Verbose | Hallucination | Bug Report | Other}

[logan-markewich]

Yea I don't see why streamlit or gradio wouldn't work here honestly

[Arturro-98]

The issue was as I was expecting with input/output handling. Llamaindex Workflow is encapsulated itself so if you are passing any data between steps and Events and trying to use print() or input() it won't be 'visible outside' for GUI. I managed to implement InputRequiredEvent and HumanResponseEvent, and with long support and debugging with Sonnet 3.7, I finally managed to have working GUI in Gradio.