OpenAI Assistants avec interface Chat UI
Comment déployer des assistants OpenAI avec une interface chat sur Heroku
Les assistants OpenAI offrent des possibilités puissantes pour créer des agents conversationnels intelligents. Dans ce tutoriel, nous allons voir comment les déployer facilement avec une interface chat via Heroku.
Qu'est-ce que les assistants OpenAI ?
Les assistants d'OpenAI sont une fonctionnalité qui permet de créer des agents conversationnels personnalisés avec diverses capacités :
- Accès à une base de connaissances via des fichiers
- Exécution de code
- Appels de fonctions pour interagir avec des API externes
- Mémoire des conversations passées
Ces assistants sont particulièrement utiles pour créer des applications conversationnelles sophistiquées sans avoir à gérer toute la complexité des LLMs.
Prérequis
- Un compte OpenAI avec accès à l'API
- Un compte Heroku
- Python et pip installés localement
- Git installé sur votre machine
Étape 1 : Créer un assistant OpenAI
Commencez par créer un assistant via l'API OpenAI ou l'interface web. Notez l'ID de l'assistant que vous avez créé, vous en aurez besoin plus tard.
import openai
client = openai.OpenAI()
assistant = client.beta.assistants.create(
name="Chat UI Assistant",
instructions="You are a helpful assistant deployed with a chat UI interface.",
tools=[{"type": "code_interpreter"}],
model="gpt-4-turbo"
)
print(f"Assistant ID: {assistant.id}")
Étape 2 : Créer l'application Flask
Créez un nouveau dossier pour votre projet et mettez en place une application Flask de base qui servira notre interface chat.
mkdir openai-assistant-chat
cd openai-assistant-chat
Créez un fichier app.py avec le code suivant :
import os
from flask import Flask, render_template, request, jsonify
import openai
import time
app = Flask(__name__)
openai.api_key = os.environ.get("OPENAI_API_KEY")
ASSISTANT_ID = os.environ.get("ASSISTANT_ID")
@app.route('/')
def index():
return render_template('index.html')
@app.route('/api/chat', methods=['POST'])
def chat():
data = request.json
message = data.get('message')
thread_id = data.get('thread_id')
client = openai.OpenAI()
# Create a new thread if none exists
if not thread_id:
thread = client.beta.threads.create()
thread_id = thread.id
# Add the user message to the thread
client.beta.threads.messages.create(
thread_id=thread_id,
role="user",
content=message
)
# Run the assistant on the thread
run = client.beta.threads.runs.create(
thread_id=thread_id,
assistant_id=ASSISTANT_ID
)
# Wait for the run to complete
while run.status != "completed":
time.sleep(0.5)
run = client.beta.threads.runs.retrieve(
thread_id=thread_id,
run_id=run.id
)
# Get the messages from the thread
messages = client.beta.threads.messages.list(
thread_id=thread_id
)
# Return the latest assistant message
latest_message = None
for message in messages.data:
if message.role == "assistant":
latest_message = message.content[0].text.value
break
return jsonify({
'response': latest_message,
'thread_id': thread_id
})
if __name__ == '__main__':
port = int(os.environ.get("PORT", 5000))
app.run(host='0.0.0.0', port=port)
Étape 3 : Créer l'interface utilisateur
Créez un dossier templates et un fichier index.html pour notre interface chat.
mkdir templates
Créez un fichier templates/index.html avec une interface chat simple :
<!DOCTYPE html>
<html>
<head>
<title>Assistant Chat</title>
<style>
body {
font-family: Arial, sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
}
.chat-container {
border: 1px solid #ccc;
border-radius: 5px;
padding: 10px;
height: 400px;
overflow-y: auto;
margin-bottom: 10px;
}
.message {
margin-bottom: 10px;
padding: 8px 15px;
border-radius: 20px;
max-width: 70%;
}
.user-message {
background-color: #DCF8C6;
margin-left: auto;
}
.assistant-message {
background-color: #F2F2F2;
}
.input-container {
display: flex;
}
#user-input {
flex-grow: 1;
padding: 10px;
border: 1px solid #ccc;
border-radius: 5px;
margin-right: 10px;
}
button {
padding: 10px 20px;
background-color: #4CAF50;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
}
</style>
</head>
<body>
<h1>Assistant Chat</h1>
<div class="chat-container" id="chat-container"></div>
<div class="input-container">
<input type="text" id="user-input" placeholder="Type your message..." />
<button onclick="sendMessage()">Send</button>
</div>
<script>
let threadId = null;
function addMessage(message, isUser) {
const chatContainer = document.getElementById('chat-container');
const messageDiv = document.createElement('div');
messageDiv.className = isUser ? 'message user-message' : 'message assistant-message';
messageDiv.textContent = message;
chatContainer.appendChild(messageDiv);
chatContainer.scrollTop = chatContainer.scrollHeight;
}
async function sendMessage() {
const userInput = document.getElementById('user-input');
const message = userInput.value.trim();
if (!message) return;
addMessage(message, true);
userInput.value = '';
try {
const response = await fetch('/api/chat', {
method: 'POST',
headers: {
'Content-Type': 'application/json'
},
body: JSON.stringify({
message: message,
thread_id: threadId
})
});
const data = await response.json();
threadId = data.thread_id;
if (data.response) {
addMessage(data.response, false);
}
} catch (error) {
console.error('Error:', error);
addMessage('An error occurred while fetching response.', false);
}
}
// Allow sending message with Enter key
document.getElementById('user-input').addEventListener('keypress', function(e) {
if (e.key === 'Enter') {
sendMessage();
}
});
</script>
</body>
</html>
Étape 4 : Préparer les fichiers pour Heroku
Créez les fichiers nécessaires pour le déploiement sur Heroku.
Créez un fichier requirements.txt :
flask==2.0.1
openai==1.3.0
gunicorn==20.1.0
Créez un Procfile pour Heroku :
web: gunicorn app:app
Étape 5 : Déployer sur Heroku
Initialisez un dépôt Git et déployez votre application sur Heroku.
git init
git add .
git commit -m "Initial commit"
Créez une nouvelle application Heroku et configurez les variables d'environnement :
heroku create
heroku config:set OPENAI_API_KEY=your_openai_api_key
heroku config:set ASSISTANT_ID=your_assistant_id
Déployez l'application :
git push heroku main
Heroku will take care of the rest, install the required dependencies from the requirements.txt, and run the app as stated in the procfile. And voilà !
Conclusion
Vous avez maintenant une application chat fonctionnelle qui utilise les assistants OpenAI, déployée sur Heroku. Cette configuration simple peut être étendue pour inclure :
- Une authentification utilisateur
- Des thèmes personnalisés pour l'interface
- La prise en charge des pièces jointes
- L'intégration avec d'autres services via les appels de fonctions
Les possibilités sont infinies. N'hésitez pas à personnaliser cette base selon vos besoins spécifiques.
Elliot Vaucher
Fondateur de RITSL
