Un chat boosté à l'IA

Dans le précédent article de ce blog, j'évoquais mes récents déboires avec OpenAI et leur API. Je ne reviendrai pas sur le sujet spécifique de leur attitude pour le moins autoritaire, mais sur la méthode permettant d'ajouter un chat boosté avec une intelligence artificielle. Heureusement, il existe désormais de nombreuses solutions pour éviter OpenAI et leurs méthodes discourtoises. Dans un premier temps, j'évoquerai les solutions existantes en signalant leurs principaux avantages et inconvénients. Puis, je détaillerai le codage de la solution retenue. Il convient toutefois de noter que les API sont très proches les unes des autres et qu'il est assez facile de passer de l'une à l'autre.

Les solutions existantes

OpenAI (ChatGPT via API)

Avantages

Modèles puissants (GPT-3.5, GPT-4, GPT-4o) avec des capacités conversationnelles avancées
Simple à intégrer via API, documentation riche, nombreuses bibliothèques disponibles
Personnalisation possible du comportement du bot
Large écosystème de plugins et d’intégrations

Inconvénients

Coût à l’usage (facturation à la requête ou à l’abonnement pour les modèles avancés)
Peut générer des erreurs factuelles ou des réponses hors contexte et nécessite une vérification humaine
Peut interrompre le service sans réelle explication de façon autoritaire tout en conservant le solde du compte

Google Gemini (ex-Bard)

Avantages

Prise en charge multimodale (texte, images, sons, vidéos)
API performante, faible latence, intégration avec l’écosystème Google
Fonctionnalités avancées : appels de fonctions, exécution de code, ancrage sur des recherches réelles

Inconvénients

Peut nécessiter un compte Google Cloud et une configuration technique
Tarification à l’usage selon le volume

Perplexity API

Avantages

Accès à plusieurs modèles avancés (Mistral, Llama 2, Sonar…)
Certains modèles permettent la recherche web en temps réel pour des réponses actualisées
Intégration très facile (compatible avec les clients OpenAI)
Tarification flexible à l’usage, documentation claire

Inconvénients

Moins connu que OpenAI ou Google, communauté plus restreinte
Fonctionnalités avancées parfois réservées aux offres payantes
Support technique moins développé que les géants du secteur

DeepSeek

Avantages

Deux modèles spécialisés (général et raisonnement/mathématique/codage)
Compatible avec le format OpenAI, donc facile à intégrer si vous avez déjà une intégration OpenAI
Efficace et rentable selon les usages

Inconvénients

Moins de documentation et de support communautaire que les leaders du marché

Plateformes open source (Botpress, Tock, BotMan, Claudia Bot Creator)

Avantages

Open source, donc personnalisable et sans coût de licence
Hébergement sur vos propres serveurs possible (respect de la confidentialité)
Support de nombreux canaux (Messenger, WhatsApp, Slack, etc.)

Inconvénients

Nécessite des compétences techniques pour l’installation, la configuration et la maintenance
Moins de fonctionnalités avancées “out of the box” par rapport aux solutions commerciales

Conclusion

J'aime bien utiliser Perplexity mais j'ai finalement opté pour DeepSeek pour le chat de ce blog, c'est donc cette API que je vais présenter ici.

DeepSeek et son API

Pour utiliser cette API, la première chose à faire est de créer un compte développeur sur leur site. Il faut ensuite alimenter votre compte sur cette page :

Vous pouvez ensuite (ou avant, il n'y a pas d'ordre) générer une clé pour votre API :

Mettez la clé en lieu sûr parce qu'elle ne vous sera plus présentée !

Vous êtes maintenant prêt à utiliser l'API ! La documentation se trouve ici. Il est à noter que cette documentation n'est pas très étoffée. Mais si vous utilisez leur URL https://api.deepseek.com/v1 tout est compatible avec OpenAI, ce qui est bien pratique. Comme j'avais déjà mon codage pour OpenAI la migration a été facilitée.

Cas d'implémentation

Je vais donc évoquer le cas de ce blog avec son chat que vous pouvez utiliser en cliquant la petite icône en haut dans le menu. Pour rappel, l'intégralité du code du blog est sur GitHub. L'architecture utilise Volt de Livewire. Le fichier pour le chat est ici.

La configuration

Il est judicieux de placer la configuration dans le fichier .env. Pour l'API, j'y ai mis deux informations :

GPT_API_KEY=sk-b8d3f*********************a9d3
GPT_MODEL="deepseek-chat"

Donc la clé d'API et le modèle utilisé. DeepSeek ne propose que deux modèles :

deepseek-chat
- Modèle conversationnel généraliste
- Optimisé pour les discussions et assistants virtuels
- Capacité de compréhension et génération de texte avancée
deepseek-coder
- Modèle spécialisé dans le code et l'assistance aux développeurs
- Excellente compréhension et génération de code dans de multiples langages
- Capacités de debug, explication et refactoring de code

Il est évident qu'on utilise le premier pour le chat.

Le composant Volt

Voici le code complet de ce composant :

<?php

use Illuminate\Support\Facades\Http;
use Livewire\Attributes\{Layout, Rule};
use Livewire\Volt\Component;
use Mary\Traits\Toast;

// Définition du composant avec les attributs de titre et de mise en page
new #[Title('Chat')] #[Layout('components.layouts.app')] class extends Component
{
	use Toast;

	#[Rule('required|max:1000')]
	public string $question = '';

	public string $answer = '';

	public function getAnswer()
	{
		// Validation des données du formulaire
		$data = $this->validate();

		// Récupération de la clé API depuis l'environnement
		$token = env('GPT_API_KEY');

		// Récupération du modèle GPT depuis l'environnement
		$gptModel = env('GPT_MODEL', 'deepseek-chat'); // Utilisation par défaut si la clé n'est pas définie

		// Définition du prompt
		$prompt = __("You're an expert in the Laravel framework, renowned for your ability to explain every concept clearly and patiently. Your aim is to provide detailed and understandable explanations, adapted to all skill levels.");

		// Création du message à envoyer
		$messageContent = $prompt . "\nThe question is: " . $data['question'];

		// Préparation de la requête
		$payload = [
			'model'    => $gptModel,
			'messages' => [
				[
					'role'    => 'user',
					'content' => $messageContent,
				],
			],
			"stream" => false
		];

		// Envoi de la requête à l'API DeepSeek
		$response = null;
		try
		{
			$response = Http::withToken($token)
				->timeout(60)
				->withHeaders([
					'Content-Type' => 'application/json',
				])
				->post('https://api.deepseek.com/v1/chat/completions', $payload);

			// Vérification du statut de la réponse
			if ($response->successful())
			{
				// Décodage de la réponse et récupération du contenu
				$answer = json_decode($response->body())->choices[0]->message->content;

				// Affecte la réponse formatée à la variable Livewire
				$parsedown = new Parsedown();
				$this->answer = $parsedown->text($answer);

				// Sauvegarde dans la base de données
				auth()->user()->chats()->create([
					'answer'   => $answer,
					'question' => $data['question'],
				]);
			}
			else
			{
				// Gestion des erreurs
				throw new Exception(__('Error in API response: ') . $response->body());
			}
		}
		catch (Exception $e)
		{
			Log::error('Failed to get answer from DeepSeek: ' . $e->getMessage());

			$errorMessage = __('An error occurred while trying to retrieve the answer');

			if ($response) {
				$errorBody = json_decode($response->body());
				if ($errorBody && isset($errorBody->error->code)) {
					$errorMessage .= ' (' . __($errorBody->error->code) . ')';
				}
			}

			$this->answer = $errorMessage . "\n";
		}
	}
}; ?>

<div>
    <!-- Formulaire de contact encapsulé dans une carte -->
    <x-card title="{{ __('You have a question about Laravel?') }}" subtitle="{{ __('Use this form to ask me!') }}" shadow
        separator progress-indicator>
        <x-form wire:submit="getAnswer">
            <!-- Champ de message -->
            <x-textarea wire:model="question" rows="5" placeholder="{{ __('Your question here...') }}" hint="{{ __('Max 1000 chars') }}" inline />
            <!-- Boutons d'actions -->
            <x-slot:actions>
                <x-button label="{{ __('Send') }}" type="submit" icon="o-paper-airplane" class="btn-primary"
                    spinner="login" />
            </x-slot:actions>
        </x-form>
    </x-card>
	<x-card title="{{ __('Your answer') }}" shadow separator progress-indicator>
		{!! $answer !!}
	</x-card>
</div>

Le formulaire se présente au départ ainsi :

Pour vérifier si ça fonctionne on lui pose cette question :

Et voici la réponse :

Voici comment intégrer simplement un chat utilisant l'API Deepseek dans votre blog Laravel avec Volt:

Étapes principales
Installer le client HTTP:
composer require guzzlehttp/guzzle
Créer un composant Livewire/Volt:
php artisan make:livewire ChatComponent
Modifier le composant (app/Livewire/ChatComponent.php):
use Livewire\Component;
use GuzzleHttp\Client;
class ChatComponent extends Component { public $messages = []; public $newMessage = ''; public $isTyping = false;
public function sendMessage()
{
    $this->isTyping = true;
    $this->messages[] = ['role' => 'user', 'content' => $this->newMessage];

    $client = new Client();
    $response = $client->post('https://api.deepseek.com/v1/chat/completions', [
        'headers' => [
            'Authorization' => 'Bearer '.env('DEEPSEEK_API_KEY'),
            'Content-Type' => 'application/json',
        ],
        'json' => [
            'model' => 'deepseek-chat',
            'messages' => $this->messages,
            'temperature' => 0.7,
        ],
    ]);

    $response = json_decode($response->getBody(), true);
    $this->messages[] = $response['choices'][0]['message'];
    $this->newMessage = '';
    $this->isTyping = false;
}

public function render()
{
    return view('livewire.chat-component');
}
}
4. **Créer la vue** (`resources/views/livewire/chat-component.blade.php`):
```html
<div class="chat-container">
    <div class="chat-messages">
        @foreach($messages as $message)
            <div class="message {{ $message['role'] }}">
                {{ $message['content'] }}
            </div>
        @endforeach
        @if($isTyping)
            <div class="message assistant typing">Deepseek réfléchit...</div>
        @endif
    </div>

    <form wire:submit.prevent="sendMessage">
        <input type="text" wire:model="newMessage" placeholder="Posez votre question...">
        <button type="submit">Envoyer</button>
    </form>
</div>
Ajouter le CSS (dans votre fichier CSS principal):
.chat-container {
max-width: 600px;
margin: 0 auto;
border: 1px solid #ddd;
border-radius: 8px;
padding: 20px;
}
.chat-messages { height: 400px; overflow-y: auto; margin-bottom: 20px; }

.message { padding: 10px; margin: 5px 0; border-radius: 5px; }

.message.user { background-color: #e3f2fd; margin-left: 20%; }

.message.assistant { background-color: #f1f1f1; margin-right: 20%; }

.typing { font-style: italic; color: #666; }
6. **Ajouter le composant à votre vue**:
```php
@livewire('chat-component')
Configuration supplémentaire
Ajoutez votre clé API dans .env:
DEEPSEEK_API_KEY=votre_clé_api_ici
Pour une meilleure expérience, vous pouvez:

Ajouter l'historique des conversations

Implémenter le streaming des réponses

Ajouter des indicateurs de statut
Cette implémentation de base vous permet d'avoir un chat fonctionnel avec l'API Deepseek dans votre blog Laravel utilisant Volt.

On voit qu'on obtient une réponse intéressante. Mais je m'y suis pris un peu différemment par rapport à leur suggestion...

Analyse sommaire du code

La requête est préparée ici :

// Récupération du modèle GPT depuis l'environnement
$gptModel = env('GPT_MODEL', 'deepseek-chat'); // Utilisation par défaut si la clé n'est pas définie

// Création du message à envoyer
$messageContent = $prompt . "\nThe question is: " . $data['question'];

// Préparation de la requête
$payload = [
	'model'    => $gptModel,
	'messages' => [
		[
			'role'    => 'user',
			'content' => $messageContent,
		],
	],
	"stream" => false
];

La requête est envoyée avec ce code :

$response = Http::withToken($token)
	->timeout(60)
	->withHeaders([
		'Content-Type' => 'application/json',
	])
	->post('https://api.deepseek.com/v1/chat/completions', $payload);

J'ai été obligé d'ajouter un délai de 60 secondes parce qu'avec les 30 secondes par défaut ce n'était pas suffisant et il m'a fallu un moment pour cerner le problème. DeepSeek est plus lent que GPT.

Ensuite, on traite la réponse :

if ($response->successful())
{
	// Décodage de la réponse et récupération du contenu
	$answer = json_decode($response->body())->choices[0]->message->content;

	// Affecte la réponse formatée à la variable Livewire
	$parsedown = new Parsedown();
	$this->answer = $parsedown->text($answer);

	// Sauvegarde dans la base de données
	auth()->user()->chats()->create([
		'answer'   => $answer,
		'question' => $data['question'],
	]);
}

Parsedown est une bibliothèque PHP qui permet de convertir du texte en Markdown en HTML. Cela signifie qu'elle prend du texte avec des balises Markdown et le transforme en HTML, qui peut être rendu par un navigateur web pour afficher du texte formaté. Elle n'est pas par défaut dans Laravel, il faut donc l'ajouter. En convertissant le Markdown en HTML, vous vous assurez que le texte sera correctement formaté et affiché dans le navigateur. Par exemple, les titres, les listes, les liens et les emphases seront rendus comme prévu.

La mémorisation dans la base de données est évidemment optionnelle.

Il y a ensuite la gestion des erreurs que je ne commenterai pas.

Conclusion

Vous voyez qu'il n'est pas bien difficile d'ajouter un chat boosté à l'intelligence artificielle. Vous avez le choix de la solution à utiliser !

LARAVEL

Les solutions existantes

OpenAI (ChatGPT via API)

Avantages

Inconvénients

Google Gemini (ex-Bard)

Avantages

Inconvénients

Perplexity API

Avantages

Inconvénients

DeepSeek

Avantages

Inconvénients

Plateformes open source (Botpress, Tock, BotMan, Claudia Bot Creator)

Avantages

Inconvénients

Conclusion

DeepSeek et son API

Cas d'implémentation

La configuration

Le composant Volt

Étapes principales

Configuration supplémentaire

Analyse sommaire du code

Conclusion