Chapitre 27: Exemples d'Applications Avancées Utilisant GPT

27.1 Introduction

Les modèles GPT d'OpenAI offrent une multitude de possibilités pour développer des applications avancées. En exploitant leur capacité à comprendre et générer du langage naturel, vous pouvez créer des solutions innovantes et performantes dans divers domaines. Ce chapitre présente plusieurs exemples d'applications avancées utilisant GPT, avec des explications détaillées et des exemples de code.

27.2 Exemple 1 : Système de Recommandation de Contenu

27.2.1 Description

Un système de recommandation de contenu aide les utilisateurs à découvrir des articles, vidéos ou autres types de contenu basés sur leurs intérêts et préférences.

27.2.2 Implémentation

Backend (Express.js) : Créez un endpoint pour générer des recommandations de contenu.

const express = require('express');
const { Configuration, OpenAIApi } = require('openai');
const cors = require('cors');
require('dotenv').config();

const app = express();
const port = process.env.PORT || 3001;

app.use(cors());
app.use(express.json());

const configuration = new Configuration({
  apiKey: process.env.OPENAI_API_KEY,
});

const openai = new OpenAIApi(configuration);

app.post('/api/recommend', async (req, res) => {
  const { userPreferences } = req.body;

  try {
    const response = await openai.createChatCompletion({
      model: "gpt-4",
      messages: [
        { role: "system", content: "You are a helpful assistant that provides content recommendations." },
        { role: "user", content: `Based on the user's preferences: ${userPreferences}, what content would you recommend?` }
      ],
      max_tokens: 150,
      temperature: 0.7,
    });

    const recommendations = response.data.choices[0].message.content.trim();
    res.json({ recommendations });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

app.listen(port, () => {
  console.log(`Server is running on http://localhost:${port}`);
});

Frontend (React) : Créez une interface pour saisir les préférences de l'utilisateur et afficher les recommandations.

import React, { useState } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  const [preferences, setPreferences] = useState('');
  const [recommendations, setRecommendations] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post('http://localhost:3001/api/recommend', { userPreferences: preferences });
      setRecommendations(res.data.recommendations);
    } catch (error) {
      console.error("Erreur :", error);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Système de Recommandation de Contenu</h1>
        <form onSubmit={handleSubmit}>
          <textarea
            value={preferences}
            onChange={(e) => setPreferences(e.target.value)}
            placeholder="Entrez vos préférences ici..."
          />
          <button type="submit">Recommander</button>
        </form>
        <div className="response">
          <h2>Recommandations :</h2>
          <p>{recommendations}</p>
        </div>
      </header>
    </div>
  );
}

export default App;

27.3 Exemple 2 : Générateur de Code

27.3.1 Description

Un générateur de code aide les développeurs en générant automatiquement du code basé sur des descriptions ou des spécifications fournies par l'utilisateur.

27.3.2 Implémentation

Backend (Express.js) : Créez un endpoint pour générer du code.

app.post('/api/generate-code', async (req, res) => {
  const { description } = req.body;

  try {
    const response = await openai.createChatCompletion({
      model: "gpt-4",
      messages: [
        { role: "system", content: "You are a helpful assistant that generates code based on descriptions." },
        { role: "user", content: `Generate code for the following description: ${description}` }
      ],
      max_tokens: 300,
      temperature: 0.5,
    });

    const code = response.data.choices[0].message.content.trim();
    res.json({ code });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

Frontend (React) : Créez une interface pour saisir la description du code à générer et afficher le code généré.

import React, { useState } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  const [description, setDescription] = useState('');
  const [code, setCode] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post('http://localhost:3001/api/generate-code', { description });
      setCode(res.data.code);
    } catch (error) {
      console.error("Erreur :", error);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Générateur de Code</h1>
        <form onSubmit={handleSubmit}>
          <textarea
            value={description}
            onChange={(e) => setDescription(e.target.value)}
            placeholder="Entrez la description du code ici..."
          />
          <button type="submit">Générer</button>
        </form>
        <div className="response">
          <h2>Code Généré :</h2>
          <pre>{code}</pre>
        </div>
      </header>
    </div>
  );
}

export default App;

27.4 Exemple 3 : Assistant Personnel Virtuel

27.4.1 Description

Un assistant personnel virtuel peut gérer les tâches quotidiennes des utilisateurs, telles que la gestion des calendriers, la configuration de rappels et la fourniture de recommandations personnalisées.

27.4.2 Implémentation

Backend (Express.js) : Créez un endpoint pour l'assistant personnel.

app.post('/api/assistant', async (req, res) => {
  const { task } = req.body;

  try {
    const response = await openai.createChatCompletion({
      model: "gpt-4",
      messages: [
        { role: "system", content: "You are a personal assistant that helps manage tasks and schedules." },
        { role: "user", content: `Assist with the following task: ${task}` }
      ],
      max_tokens: 200,
      temperature: 0.7,
    });

    const assistantResponse = response.data.choices[0].message.content.trim();
    res.json({ message: assistantResponse });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

Frontend (React) : Créez une interface pour saisir les tâches à gérer par l'assistant personnel et afficher les réponses.

import React, { useState } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  const [task, setTask] = useState('');
  const [response, setResponse] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post('http://localhost:3001/api/assistant', { task });
      setResponse(res.data.message);
    } catch (error) {
      console.error("Erreur :", error);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Assistant Personnel Virtuel</h1>
        <form onSubmit={handleSubmit}>
          <textarea
            value={task}
            onChange={(e) => setTask(e.target.value)}
            placeholder="Entrez la tâche à gérer ici..."
          />
          <button type="submit">Envoyer</button>
        </form>
        <div className="response">
          <h2>Réponse :</h2>
          <p>{response}</p>
        </div>
      </header>
    </div>
  );
}

export default App;

27.5 Exemple 4 : Outil de Résumé de Documents

27.5.1 Description

Un outil de résumé de documents aide les utilisateurs à obtenir des résumés concis de textes longs, ce qui permet de gagner du temps et de mieux comprendre le contenu.

27.5.2 Implémentation

Backend (Express.js) : Créez un endpoint pour résumer des documents.

app.post('/api/summarize', async (req, res) => {
  const { document } = req.body;

  try {
    const response = await openai.createChatCompletion({
      model: "gpt-4",
      messages: [
        { role: "system", content: "You are a helpful assistant that summarizes long documents." },
        { role: "user", content: `Please summarize the following document: ${document}` }
      ],
      max_tokens: 200,
      temperature: 0.5,
    });

    const summary = response.data.choices[0].message.content.trim();
    res.json({ summary });
  } catch (error) {
    res.status(500).json({ error: error.message });
  }
});

Frontend (React) : Créez une interface pour saisir le document à résumer et afficher le résumé.

import React, { useState } from 'react';
import axios from 'axios';
import './App.css';

function App() {
  const [document, setDocument] = useState('');
  const [summary, setSummary] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post('http://localhost:3001/api/summarize', { document });
      setSummary(res.data.summary);
    } catch (error) {
      console.error("Erreur :", error);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Outil de Résumé de Documents</h1>
        <form onSubmit={handleSubmit}>
          <textarea
            value={document}
            onChange={(e) => setDocument(e.target.value)}
            placeholder="Collez votre document ici..."
          />
          <button type="submit">Résumer</button>
        </form>
        <div className="response">
          <h2>Résumé :</h2>
          <p>{summary}</p>
        </div>
      </header>
    </div>
  );
}

export default App;

Conclusion

Les modèles GPT d'OpenAI peuvent être utilisés pour développer une variété d'applications avancées qui améliorent l'expérience utilisateur et augmentent la productivité. En utilisant des exemples concrets tels que le système de recommandation de contenu, le générateur de code, l'assistant personnel virtuel et l'outil de résumé de documents, ce chapitre démontre comment exploiter les capacités de GPT pour créer des solutions innovantes et utiles. Ces exemples peuvent être étendus et personnalisés pour répondre à des besoins spécifiques et offrir des fonctionnalités encore plus avancées.

Modifié le: lundi 1 juillet 2024, 09:35