Conversations avancées avec l’API ChatGPT

Comprendre le système de messages

L’API ChatGPT utilise un système de messages pour gérer les conversations. Chaque message a un rôle et un contenu :

const messages = [
  { role: 'system', content: 'Vous êtes un assistant spécialisé en programmation JavaScript.' },
  { role: 'user', content: 'Comment déclarer une variable en JavaScript ?' },
  { role: 'assistant', content: 'En JavaScript, vous pouvez déclarer une variable de trois façons :\n\n1. Avec `var` (déconseillé) :\n```javascript\nvar maVariable = 10;\n```\n\n2. Avec `let` (recommandé pour les variables qui changent) :\n```javascript\nlet maVariable = 10;\n```\n\n3. Avec `const` (pour les valeurs constantes) :\n```javascript\nconst maVariable = 10;\n```' },
  { role: 'user', content: 'Et comment déclarer une fonction ?' }
];

Rôles des messages

L’API ChatGPT reconnaît trois rôles principaux :

system : Instructions globales pour définir le comportement de l’assistant
user : Messages envoyés par l’utilisateur
assistant : Réponses générées par le modèle

Gestion du contexte

Pour maintenir le contexte d’une conversation, vous devez conserver l’historique des messages :

// Historique de conversation
let conversationHistory = [
  { role: 'system', content: 'Vous êtes un assistant spécialisé en programmation JavaScript.' }
];

// Fonction pour ajouter un message utilisateur
function addUserMessage(content) {
  conversationHistory.push({ role: 'user', content });
}

// Fonction pour ajouter une réponse de l'assistant
function addAssistantMessage(content) {
  conversationHistory.push({ role: 'assistant', content });
}

// Fonction pour appeler l'API avec l'historique
async function chatWithHistory(userMessage) {
  // Ajouter le message de l'utilisateur à l'historique
  addUserMessage(userMessage);
  
  try {
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`
      },
      body: JSON.stringify({
        model: 'gpt-3.5-turbo',
        messages: conversationHistory,
        temperature: 0.7
      })
    });
    
    const data = await response.json();
    const assistantMessage = data.choices[0].message.content;
    
    // Ajouter la réponse à l'historique
    addAssistantMessage(assistantMessage);
    
    return assistantMessage;
  } catch (error) {
    console.error('Erreur lors de l\'appel à l\'API:', error);
    throw error;
  }
}

Limites du contexte

L’API ChatGPT a des limites concernant la longueur du contexte :

Token limit : Chaque modèle a une limite de tokens (environ 4000 pour gpt-3.5-turbo)
Coût : Plus le contexte est long, plus l’appel API coûte cher
Performance : Les réponses peuvent être plus lentes avec un contexte très long

Stratégies de gestion du contexte

1. Résumé périodique

// Fonction pour résumer la conversation
async function summarizeConversation() {
  const summaryPrompt = `Résumez les points clés de notre conversation jusqu'à présent.`;
  
  try {
    const response = await fetch('https://api.openai.com/v1/chat/completions', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
        'Authorization': `Bearer ${process.env.OPENAI_API_KEY}`
      },
      body: JSON.stringify({
        model: 'gpt-3.5-turbo',
        messages: [
          { role: 'system', content: 'Vous êtes un assistant qui résume les conversations.' },
          ...conversationHistory,
          { role: 'user', content: summaryPrompt }
        ],
        temperature: 0.3
      })
    });
    
    const data = await response.json();
    const summary = data.choices[0].message.content;
    
    // Réinitialiser l'historique avec le résumé
    conversationHistory = [
      { role: 'system', content: 'Vous êtes un assistant spécialisé en programmation JavaScript.' },
      { role: 'user', content: `Résumé de notre conversation précédente : ${summary}` }
    ];
    
    return summary;
  } catch (error) {
    console.error('Erreur lors de la création du résumé:', error);
    throw error;
  }
}

2. Fenêtre glissante

// Fonction pour maintenir une fenêtre glissante de messages
function maintainSlidingWindow(maxMessages = 10) {
  // Garder le message système
  const systemMessage = conversationHistory.find(msg => msg.role === 'system');
  
  // Prendre les N derniers messages (sans le système)
  const recentMessages = conversationHistory
    .filter(msg => msg.role !== 'system')
    .slice(-maxMessages);
  
  // Reconstruire l'historique
  conversationHistory = [
    systemMessage,
    ...recentMessages
  ];
}

3. Gestion des références

// Fonction pour référencer des parties spécifiques de la conversation
function referencePreviousMessage(messageIndex) {
  if (messageIndex >= 0 && messageIndex < conversationHistory.length) {
    const referencedMessage = conversationHistory[messageIndex];
    return `En référence à votre message précédent : "${referencedMessage.content.substring(0, 50)}..."`;
  }
  return '';
}

Exemple d’application : Assistant de programmation

// Configuration initiale
let conversationHistory = [
  { 
    role: 'system', 
    content: 'Vous êtes un assistant spécialisé en programmation JavaScript. Répondez de manière concise et avec des exemples de code.' 
  }
];

// Interface utilisateur simple
const chatInterface = {
  userInput: document.getElementById('user-input'),
  sendButton: document.getElementById('send-button'),
  chatContainer: document.getElementById('chat-container'),
  
  init() {
    this.sendButton.addEventListener('click', () => this.sendMessage());
    this.userInput.addEventListener('keypress', (e) => {
      if (e.key === 'Enter') this.sendMessage();
    });
  },
  
  async sendMessage() {
    const userMessage = this.userInput.value.trim();
    if (!userMessage) return;
    
    // Afficher le message de l'utilisateur
    this.addMessageToUI('user', userMessage);
    this.userInput.value = '';
    
    // Vérifier si nous devons résumer la conversation
    if (conversationHistory.length > 10) {
      await this.summarizeAndReset();
    }
    
    try {
      // Appeler l'API
      const response = await chatWithHistory(userMessage);
      
      // Afficher la réponse
      this.addMessageToUI('assistant', response);
    } catch (error) {
      this.addMessageToUI('error', 'Une erreur est survenue. Veuillez réessayer.');
    }
  },
  
  addMessageToUI(role, content) {
    const messageDiv = document.createElement('div');
    messageDiv.className = `message ${role}`;
    messageDiv.textContent = content;
    this.chatContainer.appendChild(messageDiv);
    this.chatContainer.scrollTop = this.chatContainer.scrollHeight;
  },
  
  async summarizeAndReset() {
    const summary = await summarizeConversation();
    this.addMessageToUI('system', `Résumé de la conversation : ${summary}`);
  }
};

// Initialiser l'interface
document.addEventListener('DOMContentLoaded', () => {
  chatInterface.init();
});

Bonnes pratiques

Définissez clairement le rôle du système pour guider le comportement de l’assistant
Limitez la taille de l’historique pour éviter de dépasser les limites de tokens
Utilisez des stratégies de résumé pour les conversations longues
Implémentez une gestion d’erreurs robuste pour gérer les problèmes d’API
Testez différents paramètres comme la température pour obtenir les résultats souhaités

Ressources supplémentaires

2. Premiers Pas 3. Interface Utilisateur