Part 2: AutoGen REST API Integration: Seamless Frontend Conversations
Feb 19, 2024
In our last session, we cracked the code on how AutoGen agents can sift through the web and converse in a group chat. Today, we're stepping up the game. We'll weave these skills into the fabric of web apps using a RESTful touch. Gear up to take AutoGen's savvy chat from the command line to the frontline of user interaction. Let’s dive in.
Flask Setup
Let's start by installing flask. Flask serves as the lightweight and flexible backbone of our web application, effortlessly bridging the gap between AutoGen's AI functionalities and user interactions.
pip install flask
Next, we need to import Flask into our app.py, along with a few other comrades-in-arms: jsonify, request, and render_template. These are the building blocks for handling HTTP requests and responses, and for serving up HTML templates. Here’s how you get the ball rolling in your app.py:
from flask import Flask, jsonify, request, render_template
app = Flask(__name__)
Now, let's tell the app where to make its stage debut. Setting debug=True keeps you sane during development by providing useful error messages. And port=8080? That's your digital real estate where your app will listen for incoming visitors.
if __name__ == '__main__':
app.run(debug=True, port=8080)
Serving index page
To serve our index.html, we first need to construct an endpoint that responds to web requests. Flask simplifies this through the @app.route() decorator, which maps a URL to a Python function. Here's how to set up a basic route to serve our HTML page:
@app.route('/')
def index():
return render_template('index.html')
In this snippet, @app.route('/') defines the root of the website. The index function then invokes render_template, which looks for the specified HTML file within a folder named templates.
Flask expects HTML files to reside in a folder named templates located within the root directory of your project. Following this convention, create a templates folder and place your index.html file inside. This organization is crucial for Flask to locate and render your HTML templates correctly.
mkdir templates
touch templates/index.html
Group Chat Endpoint
We now focus on introducing a dynamic endpoint. This endpoint's purpose is to initiate AutoGen group chats through the web interface, specifically tailored to perform stock searches and respond the results back as JSON.
To achieve this, we'll define a new route in our Flask app that listens for requests and triggers the group chat accordingly. Therefore we can delete or comment out the existing initate_chat call and replace it with the following code:
@app.route('/run')
def run():
stockname = request.args.get('stock')
user_proxy.initiate_chat(
groupchat_manager,
message=f"Find the latest stock price of {stockname}"
)
messages = user_proxy.chat_messages[groupchat_manager]
return jsonify(messages)
With the endpoints configured and index.html in place, initiate your Flask application by running the app.py script with:
python app.py
Navigate to http://localhost:8080 in your web browser. You should see your blank index.html page rendered.
JavaScript Backend Communication
We will now use JavaScript to interact with the backend seamlessly. We add an input for the stock name, a button to trigger the chat, and a section to display results. We also Implement a JavaScript function to send the stock name to the Flask endpoint and display chat results.
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Stock Price Query</title>
<script>
function triggerEndpoint() {
var stockName = document.getElementById('stockName').value;
fetch('/run?stock=' + stockName)
.then(response => response.json())
.then(data => {
document.getElementById('result').innerText = JSON.stringify(data, null, 2);
}) .catch(error => console.error('Error:', error)); }
</script>
</head>
<body>
<h1>Query Stock Price</h1>
<input type="text" id="stockName" placeholder="Enter stock name (e.g., AAPL)">
<button onclick="triggerEndpoint()">Get Stock Price</button> <pre id="result"></pre>
</body>
</html>
Automating Group Chats
Automating the chat requires setting the human input mode to a state where it doesn't pause for manual inputs. In the Flask backend, adjust the UserProxyAgent configuration to change its human input mode to NEVER. This ensures the chat flows continuously, processing inputs and generating responses without waiting for human interaction.
To effectively manage chat sessions, especially in an automated setup, it's essential to establish termination criteria. This can be done by defining a function or a condition that evaluates chat messages to determine if the conversation has reached its conclusion.
def is_termination_msg(data):
has_content = "content" in data and data["content"] is not None
return has_content and "TERMINATE" in data["content"]
user_proxy = UserProxyAgent(
'user_proxy',
is_termination_msg=is_termination_msg,
human_input_mode='NEVER',
function_map={"Search": search}
)
Conclusion
Concluding our exploration, we put our enhanced web application through its paces, and it performed flawlessly, automating group chats with AutoGen without a hitch. This test underscores the seamless integration of AI chat functionality into web interfaces, a testament to the power and versatility of AutoGen.
For further exploration and to access the complete code, visit our GitHub repository. Whether you're a seasoned developer or new to the AI space, Happy coding, and remember—the possibilities are as limitless as your imagination.
