Utilisation de l'API dans les applications web
Chapitre 18: Utilisation de l'API dans les Applications Web
18.1 Introduction
L'intégration de l'API Chat GPT d'OpenAI dans les applications web peut améliorer considérablement l'interactivité et l'expérience utilisateur en fournissant des fonctionnalités avancées de traitement du langage naturel. Ce chapitre explore comment utiliser l'API dans des applications web, avec des exemples concrets en utilisant JavaScript (Node.js) et le framework Express.js pour le backend, et React pour le frontend.
18.2 Configuration du Projet
18.2.1 Pré-requis
- Node.js et npm installés sur votre machine.
- Une clé API OpenAI valide.
18.2.2 Initialisation du Projet
Créez un nouveau répertoire pour votre projet et initialisez-le avec npm.
mkdir my-openai-webapp
cd my-openai-webapp
npm init -y
18.2.3 Installation des Dépendances
Installez les dépendances nécessaires pour le backend.
npm install express openai dotenv cors 18.3 Création du Serveur Backend avec Express.js
18.3.1 Configuration de Base
Créez un fichier index.js à la racine de votre projet et configurez Express.js avec OpenAI.
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/generate', async (req, res) => {
const { prompt } = req.body;
try {
const response = await openai.createChatCompletion({
model: "gpt-4",
messages: [{ role: "user", content: prompt }],
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}`);
});
18.4 Création du Frontend avec React
18.4.1 Initialisation du Projet React
Créez un nouveau projet React en utilisant Create React App.
npx create-react-app client
cd client
18.4.2 Configuration de Base
Modifiez src/App.js pour ajouter un formulaire permettant de saisir un prompt et d'afficher la réponse de l'API.
import React, { useState } from 'react';
import './App.css';
function App() {
const [prompt, setPrompt] = useState('');
const [response, setResponse] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
try {
const res = await fetch('http://localhost:3001/api/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ prompt }),
});
const data = await res.json();
setResponse(data.message);
} catch (error) {
console.error("Erreur :", error);
}
};
return (
<div className="App">
<header className="App-header">
<h1>Chat GPT Web App</h1>
<form onSubmit={handleSubmit}>
<textarea
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
placeholder="Enter your prompt here..."
/>
<button type="submit">Generate</button>
</form>
<div className="response">
<h2>Response:</h2>
<p>{response}</p>
</div>
</header>
</div>
);
}
export default App;
18.5 Lancer l'Application
18.5.1 Lancer le Serveur Backend
Dans le répertoire racine de votre projet, lancez le serveur backend.
node index.js 18.5.2 Lancer l'Application React
Dans le répertoire client, lancez l'application React.
npm start 18.6 Exemple Complet de Code
18.6.1 Code Complet du Serveur Backend (index.js)
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/generate', async (req, res) => {
const { prompt } = req.body;
try {
const response = await openai.createChatCompletion({
model: "gpt-4",
messages: [{ role: "user", content: prompt }],
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}`);
});
18.6.2 Code Complet du Frontend React (src/App.js)
import React, { useState } from 'react';
import './App.css';
function App() {
const [prompt, setPrompt] = useState('');
const [response, setResponse] = useState('');
const handleSubmit = async (e) => {
e.preventDefault();
try {
const res = await fetch('http://localhost:3001/api/generate', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ prompt }),
});
const data = await res.json();
setResponse(data.message);
} catch (error) {
console.error("Erreur :", error);
}
};
return (
<div className="App">
<header className="App-header">
<h1>Chat GPT Web App</h1>
<form onSubmit={handleSubmit}>
<textarea
value={prompt}
onChange={(e) => setPrompt(e.target.value)}
placeholder="Enter your prompt here..."
/>
<button type="submit">Generate</button>
</form>
<div className="response">
<h2>Response:</h2>
<p>{response}</p>
</div>
</header>
</div>
);
}
export default App;
Conclusion
Intégrer l'API Chat GPT d'OpenAI dans une application web peut améliorer significativement l'interactivité et l'expérience utilisateur. En utilisant Express.js pour le backend et React pour le frontend, vous pouvez créer une application web complète qui utilise les capacités avancées de traitement du langage naturel de GPT. Ce chapitre vous a guidé à travers les étapes nécessaires pour configurer et lancer une telle application.