Creare un chatBot integrato con chatGPT
Ecco il codice diviso in tre parti: HTML, JavaScript, e PHP.
Codice HTML
Salva questo contenuto nel file chiamato `index.php`.
<!DOCTYPE html>
<html lang="it">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Chatbot con GPT-3.5</title>
<link rel="stylesheet" href="styles.css">
</head>
<body>
<div id="chatbot">
<div id="chat-window">
<div id="chat-messages"></div>
</div>
<textarea id="user-input" placeholder="Scrivi un messaggio..."></textarea>
<button id="send-button">Invia</button>
</div>
<script src="script.js"></script>
</body>
</html>
Spiegazione
- Contenitore del chatbot: La `<div id="chatbot">` include il contenitore per i messaggi e l'input.
- Finestra della chat: `<div id="chat-window">` mostra i messaggi, sia dell'utente che del bot.
- Input utente: `<textarea id="user-input">` è il campo di testo dove l'utente inserisce i messaggi. - Bottone di invio: `<button id="send-button">` invia il messaggio dell'utente.
- Collegamenti:
- `styles.css`: File CSS per lo stile.
- `script.js`: File JavaScript per la logica della chat.
Codice CSS
Salva questo contenuto in un file chiamato `styles.css`.
/* Stile generale per il chatbot */
#chatbot {
width: 350px;
border: 1px solid #ccc;
padding: 10px;
background-color: #f9f9f9;
position: fixed;
bottom: 10px;
right: 10px;
font-family: Arial, sans-serif;
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}
#chat-window {
height: 400px;
overflow-y: auto;
margin-bottom: 10px;
border: 1px solid #ccc;
padding: 5px;
background-color: white;
}
#chat-messages {
font-size: 14px;
}
#user-input {
width: calc(100% - 60px);
height: 30px;
border: 1px solid #ccc;
border-radius: 3px;
padding: 5px;
}
#send-button {
width: 50px;
height: 30px;
border: none;
background-color: #007BFF;
color: white;
border-radius: 3px;
cursor: pointer;
}
#send-button:hover {
background-color: #0056b3;
}
.user-message {
color: blue;
}
.bot-message {
color: green;
}
.error-message {
color: red;
}
Spiegazione
- Contenitore principale: `#chatbot` definisce l'aspetto del contenitore.
- Finestra dei messaggi: `#chat-window` permette di scorrere i messaggi.
- Input e bottone: Stili per l'area di testo e il pulsante.
- Colori distintivi: Differenzia i messaggi dell'utente, del bot e gli errori.
Codice JavaScript
Salva questo contenuto in un file chiamato `script.js`.
document.getElementById('send-button').addEventListener('click', function () {
const userInput = document.getElementById('user-input');
const message = userInput.value.trim();
const chatMessages = document.getElementById('chat-messages');
if (message) {
// Aggiungi il messaggio dell'utente
const userMessageElement = document.createElement('div');
userMessageElement.textContent = 'Utente: ' + message;
userMessageElement.classList.add('user-message');
chatMessages.appendChild(userMessageElement);
// Invia il messaggio al server
fetch('chatbot.php', {
method: 'POST',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
},
body: new URLSearchParams({
message: message
})
})
.then(response => response.text())
.then(reply => {
const botMessageElement = document.createElement('div');
botMessageElement.textContent = 'ChatGPT: ' + reply;
botMessageElement.classList.add('bot-message');
chatMessages.appendChild(botMessageElement);
chatMessages.scrollTop = chatMessages.scrollHeight; // Scroll automatico
})
.catch(error => {
console.error('Errore:', error);
const errorMessageElement = document.createElement('div');
errorMessageElement.textContent = 'Errore nella comunicazione con il server.';
errorMessageElement.classList.add('error-message');
chatMessages.appendChild(errorMessageElement);
});
userInput.value = ''; // Pulisci l'input
}
});
Spiegazione
1. Event Listener: Quando il bottone è cliccato, invia il messaggio.2. Messaggio utente: Aggiunge il messaggio dell'utente alla finestra della chat.
3. Richiesta al server: Usa `fetch` per inviare il messaggio a `chatbot.php`.
4. Gestione della risposta:
- Mostra la risposta del bot.
- Se c'è un errore, lo visualizza come messaggio di errore.
Codice PHP
Salva questo contenuto in un file chiamato `chatbot.php`.
<?php
$api_key = 'YOUR_API_KEY_HERE';
$user_message = $_POST['message'] ?? '';
if (!empty($user_message)) {
$endpoint = 'https://api.openai.com/v1/chat/completions';
$data = [
'model' => 'gpt-3.5-turbo',
'messages' => [
['role' => 'system', 'content' => 'Sei un assistente virtuale.'],
['role' => 'user', 'content' => $user_message],
],
'temperature' => 0.7,
'max_tokens' => 300,
];
$ch = curl_init($endpoint);
curl_setopt($ch, CURLOPT_HTTPHEADER, [
'Content-Type: application/json',
'Authorization: Bearer ' . $api_key,
]);
curl_setopt($ch, CURLOPT_POST, true);
curl_setopt($ch, CURLOPT_POSTFIELDS, json_encode($data));
curl_setopt($ch, CURLOPT_RETURNTRANSFER, true);
$response = curl_exec($ch);
curl_close($ch);
if ($response) {
$response_data = json_decode($response, true);
if (isset($response_data['choices'][0]['message']['content'])) {
echo $response_data['choices'][0]['message']['content'];
} elseif (isset($response_data['error'])) {
echo 'Errore API: ' . $response_data['error']['message'];
} else {
echo 'Errore: Risposta inattesa dall\'API.';
}
} else {
echo 'Errore nella comunicazione con l\'API.';
}
} else {
echo 'Messaggio non valido.';
}
?>
Spiegazione
1. Chiave API: Sostituisci `YOUR_API_KEY_HERE` con la tua chiave OpenAI.
Tale KEY è disponibile al sito piattaforma AI
2. Validazione del messaggio: Controlla che il messaggio dell'utente non sia vuoto.
3. Richiesta API: - Usa `cURL` per inviare la richiesta. - Configura il modello `gpt-3.5-turbo` e i parametri.
4. Gestione della risposta:
- Risponde con il contenuto generato dal bot.
- Gestisce errori dell'API e connessione.
