You’ve likely heard the buzz around AI agents, but finding clear, practical instructions on how to build one can be surprisingly difficult. In this article, we’ll cut through the noise and build a functional agent from the ground up, step by step.
Our project for today is a text-improving agent complete with a Python API and a simple HTML user interface. This agent is designed to run entirely offline on your local machine. However, you can enhance its capabilities by adding an OpenAI key, giving it a significant intelligence boost. The user interface remains consistent, whether you’re running it locally or deploying it online—the switch is as simple as changing a single URL.
When we switch to the online mode, the AI processes the text and returns a cleaner, sharper sentence.
How Does It All Work?
So, what’s happening behind the scenes? Let’s break down the architecture.
The system consists of two main components. First, a simple HTML page serves as the front end. This is where you input your text. When you click the ‘Improve’ button, a request containing your text is sent to a local Python service.
The Python service has two modes of operation:
- Offline Mode: It uses a set of predefined rules to perform basic text cleanup without needing an internet connection.
- Online Mode: It forwards the text to the OpenAI API, leveraging a powerful language model to provide more sophisticated improvements.
The HTML Front End
The HTML structure is minimal, containing just the essentials: a text area for input, a button to trigger the action, and a small JavaScript snippet to handle the communication.
Here is a basic example of the HTML code:
<!DOCTYPE html>
<html>
<head>
<title>Text Improver</title>
</head>
<body>
<textarea id="text-input" rows="10" cols="50"></textarea>
<br>
<button onclick="improveText()">Improve Text</button>
<script>
const API_URL = 'http://localhost:5000/generate';
async function improveText() {
const textArea = document.getElementById('text-input');
const response = await fetch(API_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json' },
body: JSON.stringify({ text: textArea.value })
});
const data = await response.json();
textArea.value = data.generated_text;
}
</script>
</body>
</html>
The script is configured with the API’s address. It performs a quick check to ensure the service is running, and on a button click, it sends the user’s text to our Python agent. The improved text returned by the agent is then displayed back in the text area.
The Python Back End: Offline Mode
For the offline functionality, we use a lightweight Flask server. Here is a simplified example of the code:
from flask import Flask, request, jsonify
app = Flask(__name__)
@app.route('/generate', methods=['POST'])
def generate_offline():
text = request.json.get('text', '')
# Apply basic, rule-based text cleaning
improved_text = text.strip().capitalize()
return jsonify({'generated_text': improved_text})
if __name__ == '__main__':
app.run(port=5000)
This server has a single endpoint, /generate, which accepts text, applies some basic cleaning rules, and sends the result back. It operates entirely without an internet connection or external AI services.
The Python Back End: Online Mode
To enable online capabilities, we modify the server to communicate with OpenAI’s API. Here’s how that might look:
from flask import Flask, request, jsonify
import openai
app = Flask(__name__)
# Make sure to set your OpenAI API key
# openai.api_key = 'YOUR_OPENAI_API_KEY'
@app.route('/generate-online', methods=['POST'])
def generate_online():
text = request.json.get('text', '')
try:
response = openai.Completion.create(
engine="text-davinci-003",
prompt=f"Improve this text: {text}",
max_tokens=60
)
improved_text = response.choices[0].text.strip()
except Exception as e:
improved_text = f"Error: {e}"
return jsonify({'generated_text': improved_text})
if __name__ == '__main__':
app.run(port=5001)
In this version, the same Flask framework is used, but the endpoint now sends the text to OpenAI. The powerful AI model processes it, and the polished result is sent directly back to the user’s browser.
With these fundamental components, you now have a clear blueprint for building your own text-processing AI agent. In a future article, we will explore how to connect and deploy these components in a real-world scenario.