How to Create an Interactive Web UI for CrewAI Applications By Panel

hello and welcome to Yeyu lab in a previous video  we walked through app development with the crew   AI framework using streamlit however the app we  built was quite basic which only demonstrated crew   AI workflow visualization triggered by an initial  prompt at a user inputs it's lacked interaction   between humans and agent Group after the workflow  began in a typical multi-agent application human   input is critical to ensure each step generated  by AI agents can be reviewed and approved today   we will create a new version of the crewAI app  that enables agents to request human input in   the visualized chat box and allows humans to  provide feedback through the chat input widget   on the web specifically in this new UI design  I opt to move away from streamlit as the UI   Builder I'll explain the rationale behind this  decision later instead I'll be utilizing panel   a framework I previously used for autogen  projects to reconstruct the entire crew AI   visualization design and expand human interaction  capabilities so why not use streamlit if you look   at the chat boot demo code for streamlit you will  continuously find snippets similar to this at the   middle of every program this Loop is responsible  for recursively displaying all the historical chat messages as a python based web framework  streamlit operates on a refresh concept this means   every interaction with streamlit widgets such  as message input or manual selection triggers   an internal refresh that reruns the application  from the first line consequently any interim   data must be stored in a cache object session  state to ensure its existence upon reset this   approach works fine for simple llm power chat  boot applications we can append user input to   the chat history and prompt the language model  for inference regardless of app resets however   it becomes impractical for complex Llm powered  applications like crewAI structured multi-agent   apps the collaborative nature of internal thought  decision action process within a multiple agent   workflow doesn't align well with the  stream lit uh structure especially   when human interaction is involved in  crew AI when an agent request a human input it holds the entire workflow and utilizes   the standard input function input  to await user input on the terminal if we were to replace the standard input with  streamlet chart input widget in our design any   user input would trigger a workflow restart  causing the generated sorts and actions to   vanish therefore we need a more suitable framework  capable of maintaining the in runtime session of   both the app web interface across multiple rounds  of input and output now let's move our Focus to   panel and explore how it achieves UI design with  seamless human agent interaction within our crew   AI application before we dive into the code of  the entire crew AI process let's quickly explore   the panel framework panel provides a series of  powerful but easy to use widgets to help data   app developers quickly visualize their sorts  experiments and final projects without any HTML   knowledge background to meet the explosive  requirements of LM apps they expanded their   widgets library with chat boot templates called  chart interface which will be used in This Crew   AI demo project unlike streamlit panel works  as a server in the background without actively   resetting the app so we can put the function  logic sequentially in the main body or callbacks   like a normal Python program to start a simple  panel server firstly input the package panel   select the style of overall UI appearance  here we use the design style as material   Define a callback function that handle the  user input and start the server with chat   interface Widget the main function of our crewAI  application will be implemented in the Callback   that will be introduced later to add messages  in the chat area just use the send message   after the program runs by the command then we  can run the panel command panel serve in the terminal you will find this output on your  terminal indicating the successful app running then you will have a  decent panel based Echo chatbot knowing how to create a panel app let's  see how to integrate crew AI workflow   into it our demo workflow will Implement  a copywriting studio that allows the user   to input the topic for writing task then  the UI will display how the orchestrator   agent prompts the writer agent and  the reviewer agent to generate text in   sequence then have human input interacted to  provide confirmation before the final result generated to implement this workflow  we just simply follow the guidance   of the crew II of the crew AI framework to  create the to create the agent task crew and process now let's dive deeper to the code firstly   we should import the crew AI packages  together with the langchain open ai package then we Define the LLM object  with chat open AI uh model GPT 3.5 turbo here we create two agents to  writing and reviewing the generated   articles in your own project make sure  you have a refined role backstory and   go to prompt agents as its system definition  to redirect the output from the agents here   we Define a c custom callback Handler my  custom Handler to print out our preferred   output to the panel interface now let's  see how to implement the class my custom Handler the Callback handle my custom  Handler is from a class that derives   from Langchain class base call back base  callback Handler tracking the key stages   during the agent action process in our case we  display the instruct message from the from the   orchestrator by the onchain start event and the  response message from the relevant agent by the   onchain end event in the generation sequence  move forward let's define a function star   crew with a user instruction prompt to wrap  up the chat group Within These agents and orchestrators here we defined two  tasks related to the two agents and   consolidate them into the project crew  as well as the process as hierarchical   process please especially notice that you must  set human input as true in the task you want to   involve human interaction and mention in the task  description about checking with human for review   confirmation as well here I said make sure to  check with a human if your comment is good before   finalizing your answer so that's two steps will  trigger the human interaction we will not directly   call the star crew function in the main body it  is defined for being called in the Callback of panel if you you still remember we have a   callback function rejected with  initialization of the panel chat interface at the beginning triggered by each   message input now it's the  time to define the Callback function in this simple definition we use  threading mechanism to run the start crew   in the thread to prevent the Callback  function being blocked by the crew AI processing we use threading mechanism to run the  startcrew um function in a threat to prevent the   Callback function being uh blocked by the the  crew AI processing the threading is the key to   enabling human interaction because when the  processing of waiting for human input blocks   the process the Callback Handler can still  be triggered to handle the continuous human input now we should Implement  human input since the crew AI   does not provide an interface  to porting customer methods of input we have to perform a monkey patch to  temporarily overwrite the internal function   ask human input of the class crew agent  executor in this customized function we   first display the prompt message generated  by the orchestrator to notify the user to   input then the process released the running  uh resource into a sleep for user input from   the panel's Callback Handler by overwriting  the original standard input based crew agent   executer each time the workflow moves to the  human interaction it will show on the UI that's   all for the code now we can wrap up the code  and run our uh crew AI UI application uh let's say right uh travel block of bohol island this is the instruction   from the crew AI orchestrator now the writer  agent comes and generate the blog post the orchestrator send another instruction  to reviewer and reviewer generate comments then the orchestrator comes to the user  to tell user to ask a user to provide a feedback approved go then the final result is generated okay please try by yourself to  run your own crew AI application with your   refined agents and tasks on this decent web UI  powered by panel that's all for today for the   tutorial and source code you can find the link  in the description below don't forget to like   subscribe and hit the notification Bell keep  innovating and I'll catch you in the next one

Channel: Yeyu Lab

Views: 3,172

Keywords: Python, LLM, Open Source, Language Models, AutoGen, AI, huggingface, ai, llm, artificial intelligence, ai agents, crewai, streamlit, gpt 4, openai, panel, web, web development

Id: pODI1SWTVeo

Length: 15min 18sec (918 seconds)

Published: Sat Apr 27 2024