Chapitre 28: Projet Pratique: Création d'une Application Innovante

28.1 Introduction

Dans ce chapitre, nous allons mettre en pratique les concepts appris en créant une application innovante utilisant l'API GPT d'OpenAI. Nous développerons une application de "Journal Intime Virtuel" qui permet aux utilisateurs de saisir leurs pensées et sentiments, et reçoit en retour des analyses et suggestions pour améliorer leur bien-être. Cette application combinera des aspects de traitement du langage naturel, de recommandation et de gestion des données utilisateur.

28.2 Spécifications du Projet

28.2.1 Fonctionnalités Principales

  1. Saisie des Entrées : Les utilisateurs peuvent écrire leurs pensées et sentiments dans l'application.
  2. Analyse du Texte : L'application analyse le texte pour détecter des sentiments et des thèmes.
  3. Suggestions de Bien-être : L'application fournit des suggestions pour améliorer le bien-être basées sur l'analyse.
  4. Historique : Les utilisateurs peuvent consulter l'historique de leurs entrées et suggestions.

28.3 Configuration du Projet

28.3.1 Initialisation du Backend avec Express

  1. Création du répertoire du projet :

    mkdir journal-virtuel
    cd journal-virtuel

  2. Initialisation du projet npm :

    npm init -y

  3. Installation des dépendances :

    npm install express openai dotenv cors

  4. Création du fichier .env pour la clé API :

    touch .env

  5. Ajout de la clé API dans le fichier .env :

    OPENAI_API_KEY=your_api_key_here

  6. Création du fichier index.js pour configurer le serveur Express :

    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/analyze', async (req, res) => {
  const { entry } = req.body;

  try {
    const response = await openai.createChatCompletion({
      model: "gpt-4",
      messages: [
        { role: "system", content: "You are a helpful assistant that analyzes journal entries and provides suggestions for well-being." },
        { role: "user", content: `Analyze the following journal entry and provide suggestions for improving well-being: ${entry}` }
      ],
      max_tokens: 200,
      temperature: 0.7,
    });

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

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

28.4 Développement du Frontend avec React

28.4.1 Initialisation du Projet React

  1. Création d'un nouveau projet React en utilisant Create React App :

    npx create-react-app client
    cd client

  2. Installation d'Axios pour les requêtes HTTP :

    npm install axios

28.4.2 Développement de l'Interface Utilisateur

  1. Modification de src/App.js pour créer le frontend de l'application :

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

function App() {
  const [entry, setEntry] = useState('');
  const [analysis, setAnalysis] = useState('');

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

  return (
    <div className="App">
      <header className="App-header">
        <h1>Journal Intime Virtuel</h1>
        <form onSubmit={handleSubmit}>
          <textarea
            value={entry}
            onChange={(e) => setEntry(e.target.value)}
            placeholder="Écrivez vos pensées ici..."
          />
          <button type="submit">Analyser</button>
        </form>
        <div className="response">
          <h2>Analyse et Suggestions :</h2>
          <p>{analysis}</p>
        </div>
      </header>
    </div>
  );
}

export default App;

  2. Ajout de styles de base dans src/App.css :

    .App {
  text-align: center;
  padding: 20px;
}

.App-header {
  background-color: #282c34;
  padding: 20px;
  color: white;
}

textarea {
  width: 100%;
  height: 150px;
  margin: 10px 0;
  padding: 10px;
  border-radius: 5px;
  border: 1px solid #ccc;
}

button {
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
  background-color: #61dafb;
  color: white;
  font-size: 16px;
  cursor: pointer;
}

.response {
  margin-top: 20px;
}

.response h2 {
  margin: 0;
}

.response p {
  background: #f1f1f1;
  padding: 10px;
  border-radius: 5px;
}

28.5 Test de l'Application

28.5.1 Lancement du Serveur Backend

Dans le répertoire racine de votre projet, lancez le serveur backend.

node index.js 

28.5.2 Lancement de l'Application React

Dans le répertoire client, lancez l'application React.

npm start 

28.6 Fonctionnalités Avancées

28.6.1 Historique des Entrées

Pour permettre aux utilisateurs de consulter l'historique de leurs entrées et analyses, ajoutez une fonctionnalité de stockage des entrées.

Backend (Express.js) : Modifiez le gestionnaire de requêtes pour stocker les entrées dans une base de données simple (par exemple, en utilisant un fichier JSON).

const fs = require('fs');
const entriesFile = './entries.json';

const saveEntry = (entry, analysis) => {
  const entries = JSON.parse(fs.readFileSync(entriesFile, 'utf-8'));
  entries.push({ entry, analysis, date: new Date().toISOString() });
  fs.writeFileSync(entriesFile, JSON.stringify(entries, null, 2));
};

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

  try {
    const response = await openai.createChatCompletion({
      model: "gpt-4",
      messages: [
        { role: "system", content: "You are a helpful assistant that analyzes journal entries and provides suggestions for well-being." },
        { role: "user", content: `Analyze the following journal entry and provide suggestions for improving well-being: ${entry}` }
      ],
      max_tokens: 200,
      temperature: 0.7,
    });

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

Frontend (React) : Ajoutez une section pour afficher l'historique des entrées.

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

function App() {
  const [entry, setEntry] = useState('');
  const [analysis, setAnalysis] = useState('');
  const [history, setHistory] = useState([]);

  const fetchHistory = async () => {
    try {
      const res = await axios.get('http://localhost:3001/api/history');
      setHistory(res.data);
    } catch (error) {
      console.error("Erreur :", error);
    }
  };

  useEffect(() => {
    fetchHistory();
  }, []);

  const handleSubmit = async (e) => {
    e.preventDefault();
    try {
      const res = await axios.post('http://localhost:3001/api/analyze', { entry });
      setAnalysis(res.data.analysis);
      fetchHistory();
    } catch (error) {
      console.error("Erreur :", error);
    }
  };

  return (
    <div className="App">
      <header className="App-header">
        <h1>Journal Intime Virtuel</h1>
        <form onSubmit={handleSubmit}>
          <textarea
            value={entry}
            onChange={(e) => setEntry(e.target.value)}
            placeholder="Écrivez vos pensées ici..."
          />
          <button type="submit">Analyser</button>
        </form>
        <div className="response">
          <h2>Analyse et Suggestions :</h2>
          <p>{analysis}</p>
        </div>
        <div className="history">
          <h2>Historique :</h2>
          {history.map((item, index) => (
            <div key={index} className="entry">
              <p><strong>Entrée:</strong> {item.entry}</p>
              <p><strong>Analyse:</strong> {item.analysis}</p>
              <p><strong>Date:</strong> {item.date}</p>
            </div>
          ))}
        </div>
      </header>
    </div>
  );
}

export default App;

28.7 Conclusion

Ce projet pratique vous a guidé à travers la création d'une application innovante utilisant l'API GPT d'OpenAI. En combinant les fonctionnalités de saisie de texte, d'analyse, de recommandation et d'historique, vous avez appris à développer une application complète et utile. Ce projet peut être étendu et personnalisé pour répondre à divers besoins et offrir des fonctionnalités supplémentaires, telles que des graphiques de bien-être, des rappels et des intégrations avec d'autres services.

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