l'API Chat GPT d'OpenAI: Cas pratiques et démonstrations

Chapitre 20: Cas Pratiques et Démonstrations

20.1 Introduction

Les cas pratiques et les démonstrations sont essentiels pour comprendre comment appliquer les concepts théoriques dans des scénarios réels. Ce chapitre présente plusieurs cas pratiques de l'utilisation de l'API Chat GPT d'OpenAI, démontrant comment intégrer et utiliser cette technologie pour résoudre des problèmes spécifiques et améliorer diverses applications.

20.2 Cas Pratique 1: Chatbot de Support Client

20.2.1 Description

Un chatbot de support client peut répondre automatiquement aux questions fréquentes des clients, réduisant ainsi la charge sur le service client et améliorant la satisfaction des utilisateurs.

20.2.2 Implémentation

Backend avec Express.js :
- Configuration de l'API Chat GPT pour répondre aux questions des clients.

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/support', async (req, res) => {
  const { question } = req.body;
  
  try {
    const response = await openai.createChatCompletion({
      model: "gpt-4",
      messages: [{ role: "user", content: question }],
      max_tokens: 150,
      temperature: 0.7,
    });

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

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

Frontend avec React :
- Interface utilisateur pour saisir des questions et afficher les réponses du chatbot.

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

function App() {
  const [question, setQuestion] = useState('');
  const [response, setResponse] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await fetch('http://localhost:3001/api/support', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ question }),
      });
      const data = await res.json();
      setResponse(data.message);
    } catch (error) {
      console.error("Erreur :", error);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Support Client</h1>
        <form onSubmit={handleSubmit}>
          <textarea
            value={question}
            onChange={(e) => setQuestion(e.target.value)}
            placeholder="Posez votre question ici..."
          />
          <button type="submit">Envoyer</button>
        </form>
        <div className="response">
          <h2>Réponse :</h2>
          <p>{response}</p>
        </div>
      </header>
    </div>
  );
}

export default App;

20.3 Cas Pratique 2: Générateur de Contenu pour Blog

20.3.1 Description

Un générateur de contenu pour blog peut aider les auteurs à créer des articles en fournissant des idées, des introductions, ou même des articles complets basés sur des prompts spécifiques.

20.3.2 Implémentation

Backend avec Express.js :
- Configuration de l'API Chat GPT pour générer du contenu de blog.

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/blog', async (req, res) => {
  const { topic } = req.body;
  
  try {
    const response = await openai.createChatCompletion({
      model: "gpt-4",
      messages: [{ role: "user", content: `Écrivez un article de blog sur le sujet suivant : ${topic}` }],
      max_tokens: 300,
      temperature: 0.7,
    });

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

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

Frontend avec React :
- Interface utilisateur pour saisir le sujet du blog et afficher l'article généré.

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

function App() {
  const [topic, setTopic] = useState('');
  const [article, setArticle] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await fetch('http://localhost:3001/api/blog', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ topic }),
      });
      const data = await res.json();
      setArticle(data.article);
    } catch (error) {
      console.error("Erreur :", error);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Générateur de Blog</h1>
        <form onSubmit={handleSubmit}>
          <textarea
            value={topic}
            onChange={(e) => setTopic(e.target.value)}
            placeholder="Entrez le sujet du blog ici..."
          />
          <button type="submit">Générer</button>
        </form>
        <div className="response">
          <h2>Article :</h2>
          <p>{article}</p>
        </div>
      </header>
    </div>
  );
}

export default App;

20.4 Cas Pratique 3: Assistant Virtuel pour l'Éducation

20.4.1 Description

Un assistant virtuel pour l'éducation peut aider les étudiants en répondant à des questions, en expliquant des concepts et en fournissant des ressources d'apprentissage.

20.4.2 Implémentation

Backend avec Express.js :
- Configuration de l'API Chat GPT pour répondre aux questions éducatives.

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/education', async (req, res) => {
  const { question } = req.body;
  
  try {
    const response = await openai.createChatCompletion({
      model: "gpt-4",
      messages: [{ role: "user", content: question }],
      max_tokens: 150,
      temperature: 0.7,
    });

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

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

Frontend avec React :
- Interface utilisateur pour poser des questions éducatives et afficher les réponses.

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

function App() {
  const [question, setQuestion] = useState('');
  const [response, setResponse] = useState('');

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await fetch('http://localhost:3001/api/education', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
        },
        body: JSON.stringify({ question }),
      });
      const data = await res.json();
      setResponse(data.message);
    } catch (error) {
      console.error("Erreur :", error);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Assistant Éducatif</h1>
        <form onSubmit={handleSubmit}>
          <textarea
            value={question}
            onChange={(e) => setQuestion(e.target.value)}
            placeholder="Posez votre question ici..."
          />
          <button type="submit">Envoyer</button>
        </form>
        <div className="response">
          <h2>Réponse :</h2>
          <p>{response}</p>
        </div>
      </header>
    </div>
  );
}

export default App;

Conclusion

Les cas pratiques démontrent comment l'API Chat GPT d'OpenAI peut être intégrée dans diverses applications pour résoudre des problèmes spécifiques et améliorer l'expérience utilisateur. En suivant ces exemples, vous pouvez adapter et étendre ces concepts à d'autres domaines d'application. Ce chapitre vous a fourni une base solide pour mettre en œuvre des solutions pratiques utilisant l'API Chat GPT.

Modifié le: lundi 1 juillet 2024, 08:08