Créer un Assistant Personnel IA

1. Introduction

Dans ce tutoriel, nous allons créer un assistant personnel en utilisant HTML, CSS, et JavaScript. Cet assistant pourra répondre à des commandes vocales (via l'API de reconnaissance vocale) ou via une interface de chat, donnant l'impression d'interagir avec une véritable IA, comme Alexa ou Jarvis.

Prérequis :

Outils utilisés :

2. Création de l'Interface Utilisateur

a. Fichier HTML : index.html

Commençons par créer l'interface de l'assistant personnel. Cette interface inclura un bouton pour activer la reconnaissance vocale et un champ de chat où l'utilisateur pourra taper ses questions.

<!DOCTYPE html>
<html lang="fr">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Assistant Personnel IA</title>
    <link rel="stylesheet" href="styles.css">
</head>
<body>
    <div class="container">
        <h1>Assistant Personnel IA</h1>
        <div id="chatbox">
            <div id="messages"></div>
        </div>
        <div class="input-section">
            <input type="text" id="userInput" placeholder="Tapez un message..." autocomplete="off">
            <button id="sendButton">Envoyer</button>
        </div>
        <div class="voice-control">
            <button id="voiceButton">🎤 Parler</button>
        </div>
    </div>
    <script src="script.js"></script>
</body>
</html>

b. Fichier CSS : styles.css

Ajoutez une feuille de style pour rendre l'interface visuellement attrayante. Ce fichier stylise l'interface de l'assistant avec un design propre et moderne.

body {
    font-family: Arial, sans-serif;
    background-color: #f4f4f4;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    height: 100vh;
}

.container {
    width: 100%;
    max-width: 500px;
    background-color: #fff;
    border-radius: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    padding: 20px;
}

h1 {
    text-align: center;
}

#chatbox {
    height: 300px;
    overflow-y: scroll;
    border: 1px solid #ddd;
    padding: 10px;
    margin-bottom: 15px;
    background-color: #f9f9f9;
}

#messages {
    display: flex;
    flex-direction: column;
}

.message {
    margin: 5px 0;
}

.input-section {
    display: flex;
}

input[type="text"] {
    width: 80%;
    padding: 10px;
    border: 1px solid #ddd;
    border-radius: 5px;
}

button {
    width: 20%;
    background-color: #5cb85c;
    color: white;
    border: none;
    padding: 10px;
    cursor: pointer;
    border-radius: 5px;
}

button:hover {
    background-color: #4cae4c;
}

.voice-control {
    text-align: center;
    margin-top: 15px;
}

#voiceButton {
    background-color: #428bca;
    color: white;
    border: none;
    padding: 10px 20px;
    cursor: pointer;
    border-radius: 5px;
}

#voiceButton:hover {
    background-color: #357ebd;
}

3. Ajout de la Logique JavaScript

Maintenant, nous allons ajouter la logique JavaScript pour gérer à la fois la reconnaissance vocale et les réponses via le chat. L'API Web Speech permet de convertir les commandes vocales en texte, tandis que le chat gère les commandes textuelles entrées par l'utilisateur.

a. Fichier JavaScript : script.js

// Sélection des éléments DOM
const userInput = document.getElementById("userInput");
const sendButton = document.getElementById("sendButton");
const messages = document.getElementById("messages");
const voiceButton = document.getElementById("voiceButton");

// Intégration de l'API Web Speech pour la reconnaissance vocale
const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
const recognition = new SpeechRecognition();

recognition.onstart = function() {
    addMessage("IA", "Je vous écoute...");
};

recognition.onspeechend = function() {
    recognition.stop();
};

recognition.onresult = function(event) {
    const resultText = event.results[0][0].transcript;
    addMessage("Utilisateur", resultText);
    processUserInput(resultText);
};

// Événements pour envoyer des messages et activer la reconnaissance vocale
sendButton.addEventListener("click", function() {
    const message = userInput.value;
    if (message) {
        addMessage("Utilisateur", message);
        processUserInput(message);
        userInput.value = ""; // Effacer l'input après l'envoi
    }
});

voiceButton.addEventListener("click", function() {
    recognition.start();
});

// Ajouter un message au chat
function addMessage(sender, text) {
    const message = document.createElement("div");
    message.classList.add("message");
    message.textContent = `${sender}: ${text}`;
    messages.appendChild(message);
    messages.scrollTop = messages.scrollHeight;
}

// Logique simple pour répondre aux messages utilisateurs
function processUserInput(input) {
    const lowerInput = input.toLowerCase();
    if (lowerInput.includes("bonjour")) {
        addMessage("IA", "Bonjour, comment puis-je vous aider aujourd'hui ?");
    } else if (lowerInput.includes("temps")) {
        addMessage("IA", "Je ne peux pas vérifier la météo pour le moment, désolé.");
    } else if (lowerInput.includes("heure")) {
        const currentTime = new Date().toLocaleTimeString();
        addMessage("IA", `Il est actuellement ${currentTime}.`);
    } else {
        addMessage("IA", "Je ne comprends pas cette commande.");
    }
}

Ce code utilise l'API Web Speech pour capturer la voix de l'utilisateur et la transcrire en texte. Ensuite, la commande est analysée pour répondre à certaines questions comme "Bonjour", l'heure actuelle ou la météo.

4. Extension des Fonctionnalités

Vous pouvez facilement ajouter d'autres fonctionnalités à cet assistant personnel :

a. Commandes vocales supplémentaires

Vous pouvez améliorer la logique pour gérer des commandes plus complexes, par exemple :

b. Amélioration de l'interface

Pour donner un look plus "futuriste" à l'interface comme Jarvis, vous pouvez ajouter des animations CSS, un fond animé, ou même un mode sombre pour rendre l'interface plus moderne.

5. Conclusion

Vous avez maintenant un assistant personnel basique capable de comprendre des commandes vocales et de répondre via un chat. Ce projet peut être étendu et personnalisé pour offrir des fonctionnalités plus avancées comme la domotique ou l'interaction avec des services en ligne.

N'hésitez pas à explorer davantage les possibilités de l'API Web Speech et des intégrations avec des API externes pour rendre votre assistant IA encore plus puissant.