# LLMApi: données de choc en temps réel avec LLMs et SignalR: un guide pratique # Présentation [![NuGet](https://img.shields.io/nuget/v/mostlylucid.mockllmapi.svg)](https://www.nuget.org/packages/mostlylucid.mockllmapi) [![NuGet](https://img.shields.io/nuget/dt/mostlylucid.mockllmapi.svg)](https://www.nuget.org/packages/mostlylucid.mockllmapi) > NOTE: Son article est principalement généré par l'IA dans le cadre de mon paquet nuget comme documentation de publication. C'est assez intéressant donc je l'ai mis ici mais si c'est un problème pour vous s'il vous plaît ignorez-le. Dans le cadre de mon [Paquet Nuget LLMApi / principalementlucide.mockllmapi ](https://www.nuget.org/packages/mostlylucid.mockllmapi) J'avais besoin d'avoir une page pour activer en utilisant les fonctionnalités SignalR qu'il possède (il peut simuler les flux SignalR en utilisant LLMs pour fournir des données). Vous pouvez trouver le[ GitHub ici ](https://github.com/scottgal/LLMApi)pour le projet, tout domaine public etc... C'est devenu un bel outil ! ![Simulateur de signalR](signalrsimulator.png) Si vous avez jamais eu besoin de construire un tableau de bord ou une interface utilisateur en temps réel avant l'existence de la source de données réelle, vous connaissez le défi. `setInterval()` boucles qui tournent à travers la même poignée d'objets. J'ai construit cette démo SignalR pour résoudre ce problème d'une manière plus flexible. Vous décrivez les données dont vous avez besoin en anglais simple, et un LLM local génère JSON réaliste et varié qui s'écoule vers votre navigateur en temps réel. Pas d'installation à maintenir, pas de fichiers de semences à mettre à jour, juste décrire ce que vous voulez et regarder son flux. Laissez-moi vous montrer comment ça marche et comment en tirer le meilleur parti. [TOC] ## Ce que cet outil fait La page de démonstration SignalR (`Index.cshtml`) est un panneau de contrôle pour la gestion des flux de données en temps réel. Voici le flux de base: 1. Vous créez un "contexte" (un flux de données nommé) 2. Vous décrivez le type de données que vous voulez en anglais simple 3. Un LLM génère JSON approprié en fonction de votre description 4. SignalR pousse des données fraîches sur votre navigateur toutes les 5 secondes 5. Vous voyez les résultats avec syntaxe mise en évidence en temps réel Il est particulièrement utile lorsque vous êtes prototypage, construire des démos, ou travailler sur des fonctionnalités frontend en attendant que les API backend soient prêtes. Les données semblent réalistes parce que le LLM comprend le contexte et génère des valeurs appropriées. ### La Grande Image ```mermaid graph TB Browser[Your Browser] UI[Demo UI] API[Management API] Hub[SignalR Hub] Manager[Context Manager] BG[Background Service] LLM[LLM Ollama/OpenAI] Cache[Response Cache] Browser -->|Create Context| API API -->|Store Config| Manager Browser -->|Connect Subscribe| Hub Hub -->|Register Client| Manager BG -->|Generate Data| LLM LLM -->|Return JSON| BG BG -->|Cache Responses| Cache BG -->|Push to Clients| Hub Hub -->|Real-time Updates| Browser ``` ## Pourquoi SignalR pour les mises à jour en temps réel? SignalR maintient une connexion WebSocket persistante entre votre navigateur et le serveur. Au lieu de scruter un paramètre toutes les quelques secondes avec les requêtes HTTP, le serveur pousse les données quand il est prêt. Cela vous donne vraiment des mises à jour en temps réel avec un minimum de frais généraux. La connexion reste ouverte, les flux de données instantanément, et votre interface utilisateur se sent beaucoup plus réactive. C'est la même technologie utilisée dans les applications de chat, les tableaux de bord en direct et les outils collaboratifs où les mises à jour instantanées comptent. ## Démarrage rapide: Courir dans 5 minutes Commençons par le chemin le plus rapide pour voir ce travail. Je vais vous montrer un exemple de données boursières. **Étape 1: Démarrer l'application** ```bash dotnet run --project LLMApi/LLMApi.csproj ``` Naviguez vers `http://localhost:5116` (vérifiez la sortie de la console pour le port réel). **Étape 2: Utilisez un exemple de démarrage rapide** Vous verrez cinq exemples préconfigurés avec des boutons verts "Launch". Cliquez sur "Stock Market" et vous avez terminé. La page automatiquement: - Crée un contexte de données boursières - S'abonner à votre navigateur pour recevoir des mises à jour - Début de l'affichage des données sur les stocks en direct avec les prix, les volumes et les changements **Étape 3: Regardez le flux de données** Toutes les 5 secondes, de nouvelles données apparaissent avec mise en évidence syntaxique. Chaque mise à jour montre différents stocks avec des prix réalistes et des volumes de trading. Le LLM génère des données fraîches à chaque fois, de sorte que vous voyez la variété tout en maintenant une structure cohérente. C'est tout ! Vous êtes maintenant en train de diffuser des données sur les marchés boursiers simulés. N'hésitez pas à explorer les autres exemples de démarrage rapide pour voir différents modèles de données. ## Créer vos propres flux de données personnalisés Les boutons de démarrage rapide sont pratiques, mais la puissance réelle vient de décrire exactement ce dont vous avez besoin. **Exemple: Télémétrie de la machine à café** Dites que vous construisez un tableau de bord IoT et avez besoin de données simulées de machine à café. Voici comment: ``` Context Name: coffee-machines Description: Coffee machine telemetry with machine ID, beans remaining percentage, water temperature in Celsius, cups brewed today, and last maintenance timestamp ``` Cliquez sur "Créer & S'abonner" et vous êtes désactivé. ### Ce qui se passe dans les coulisses ```mermaid sequenceDiagram participant Browser participant API participant Manager participant BG as Background Service participant LLM participant Hub Browser->>API: POST /api/mock/contexts
{name, description} API->>Manager: Store context config Manager-->>API: Context created ✓ API-->>Browser: 200 OK Browser->>Hub: invoke('SubscribeToContext', 'coffee-machines') Hub->>Manager: Register subscription Manager-->>Hub: Subscription confirmed Hub-->>Browser: on('Subscribed') Note over BG,LLM: Every 5 seconds... BG->>LLM: Generate data for 'coffee-machines'
Prompt includes description LLM-->>BG: JSON response BG->>Hub: Broadcast to 'coffee-machines' group Hub-->>Browser: on('DataUpdate', {data}) Browser->>Browser: Display with syntax highlighting ``` Le système: 1. Crée le contexte dans le backend 2. S'abonner à votre navigateur pour recevoir des mises à jour via SignalR 3. Commence à générer des données en fonction de votre description 4. Poussez les mises à jour toutes les 5 secondes Vous verrez la sortie comme ceci : ```json { "machineId": "CM-2847", "beansRemaining": 67, "waterTemp": 94.5, "cupsBrewed": 142, "lastMaintenance": "2025-01-03T08:23:00Z" } ``` Chaque mise à jour a des valeurs différentes mais maintient la structure. Le LLM comprend la télémétrie de la machine de café et génère des nombres qui ont un sens dans ce contexte. ## Comprendre les contextes A **contexte** est une configuration de flux de données nommée. Pensez-y comme un canal ou un sujet. Lorsque vous en créez un, vous spécifiez : - **Dénomination**: Un identificateur unique (par exemple, `weather`, `stock-market`, `sensors`) - **Désignation des marchandises**: La structure de données que vous voulez, en anglais clair Le moteur alors: - Crée un groupe SignalR avec ce nom - Construit une invite pour le LLM en fonction de votre description - Génére périodiquement des données fraîches (toutes les 5 secondes par défaut) - Le diffuse à tous les clients abonnés Plusieurs navigateurs peuvent s'abonner au même contexte et tous reçoivent les mêmes données simultanément. Ceci est idéal pour tester des tableaux de bord qui doivent afficher des mises à jour synchronisées sur différents écrans ou composants. ### Contexte Moteur d'état du cycle de vie ```mermaid stateDiagram-v2 [*] --> Created: Create Context
(POST /contexts) Created --> Active: Start
(auto or manual) Active --> Stopped: Stop
(POST /stop) Stopped --> Active: Start
(POST /start) Created --> Subscribed: Client Subscribes Active --> Subscribed: Client Subscribes Stopped --> Subscribed: Client Subscribes
(no data sent) Subscribed --> Receiving: Data Push
(if Active) Receiving --> Subscribed: Client Connected Subscribed --> Created: Unsubscribe Subscribed --> Active: Unsubscribe Subscribed --> Stopped: Unsubscribe Created --> [*]: Delete Active --> [*]: Delete Stopped --> [*]: Delete Subscribed --> [*]: Delete note right of Active Generates data Pushes to clients Shows "Active" badge end note note right of Stopped No data generation Clients stay connected Shows "Stopped" badge end note ``` ## Comprendre la disposition de l'assurance-chômage L'interface a trois panneaux pour garder les choses organisées: ### Gauche : Créer un contexte C'est là que vous définissez de nouveaux flux de données. Vous aurez besoin : - **Nom du contexte**: Faites-le unique et descriptif. L'utilisation de minuscules-avec-dessins fonctionne bien. - **Désignation des marchandises**: Soyez précis sur ce que vous voulez. Le LLM fonctionne mieux avec des descriptions claires comme "les profils d'utilisateur avec nom, email, âge, et booléen de statut premium." Vous n'avez pas besoin d'écrire des schémas JSON ou d'expliquer des types de données. La structure de LLM infère étonnamment bien à partir de descriptions de langage naturel. ### Milieu : contextes actifs Affiche tous vos contextes d'exécution avec : - Nom et badge d'état (Active/Emballé) - Nombre de connexions (nombre de clients actuellement abonnés) - Boutons de contrôle: Se connecter, Déconnecter, Démarrer, Stop, Supprimer **Connecter/désconnecter** Cliquez sur Se connecter pour commencer à recevoir les données, Déconnecter pour s'arrêter sans supprimer le contexte. **Démarrer/arrêter** contrôle la génération de données backend. Ceci est utile lorsque vous voulez interrompre un flux sans détruire la configuration du contexte. **Supprimer** supprime entièrement le contexte. Utilisez ceci pour nettoyer lorsque vous avez terminé avec un flux de données particulier. ### Droite : Données en direct C'est là que vous voyez des mises à jour en temps réel : - Indicateur d'état de connexion (Connected/Disconnected) - Nom du contexte actuellement souscrit - Les 10 derniers messages avec horodatage et mise en surbrillance syntaxique Les données apparaissent en premier en haut, donc vous voyez toujours les dernières mises à jour sans défiler. ## Le modèle de connexion JavaScript La page utilise HTMX pour la soumission de formulaire et SignalR pour la connectivité en temps réel. Si vous construisez votre propre client, voici le modèle SignalR dont vous aurez besoin : ### Flux de connexion client ```mermaid sequenceDiagram participant Page as Your Page participant SR as SignalR Client participant Hub as /hub/mock participant BG as Background Service Page->>SR: new HubConnectionBuilder()
.withUrl('/hub/mock') Page->>SR: connection.start() SR->>Hub: WebSocket connection Hub-->>SR: Connected ✓ SR-->>Page: Trigger 'connected' event Page->>SR: invoke('SubscribeToContext', 'weather') SR->>Hub: SubscribeToContext('weather') Hub->>Hub: Add to 'weather' group Hub-->>SR: on('Subscribed', {context: 'weather'}) SR-->>Page: Display "Subscribed" loop Every 5 seconds BG->>Hub: Broadcast to 'weather' group Hub->>SR: on('DataUpdate', {data, timestamp}) SR->>Page: Update UI with new data end Page->>SR: invoke('UnsubscribeFromContext', 'weather') SR->>Hub: UnsubscribeFromContext('weather') Hub->>Hub: Remove from 'weather' group ``` **Configuration de la connexion :** ```javascript const connection = new signalR.HubConnectionBuilder() .withUrl('/hub/mock') .withAutomaticReconnect() .build(); connection.on('DataUpdate', (message) => { // message.context: which context sent this // message.data: the actual JSON payload // message.timestamp: Unix timestamp in milliseconds }); await connection.start(); ``` **S'abonner pour recevoir des données:** ```javascript await connection.invoke('SubscribeToContext', 'my-context-name'); ``` **Se désabonner à la fin:** ```javascript await connection.invoke('UnsubscribeFromContext', 'my-context-name'); ``` La page de démonstration gère tout cela automatiquement, mais ces trois modèles sont tout ce dont vous avez besoin pour une implémentation personnalisée. ## Cas d'utilisation pratique Voici quelques scénarios où cet outil brille vraiment: **1. Construction d'interfaces utilisateur avant l'existence d'API** Vous travaillez sur un tableau de bord et l'équipe de backend est toujours en train de concevoir le schéma de l'API. Au lieu de bloquer leur travail, décrivez la structure de données que vous attendez et construisez votre interface utilisateur contre le flux simulé. **2. Démonstrations des clients** Vous démolisez un tableau de bord de surveillance en direct à un client, mais le pipeline de données n'est pas encore prêt. Créez des contextes qui correspondent à votre structure de données prévue et montrent des données réalistes et changeantes pendant la présentation. Il semble professionnel et aide le client à visualiser le produit final. **3. Développement et mise à l'essai de la façade** Vous avez besoin de données réalistes et variées pour tester comment vos graphiques, tables et composants gèrent les mises à jour. Créez des contextes avec les structures dont vous avez besoin et développez votre interface utilisateur avec confiance qu'elle gère les modèles de données du monde réel. **4. Essais de charge en temps réel** Vous voulez voir comment votre UI fonctionne dans le cadre de mises à jour rapides. Créez un contexte haute fréquence et regardez comment vos composants gèrent le flux de données. Cela aide à identifier les problèmes de performance avant la production. **5. Enseigner les concepts Web et les concepts en temps réel** Vous enseignez les concepts SignalR ou WebSocket et voulez que les étudiants voient des mises à jour en temps réel sans construire un backend complet. La démo fournit un exemple de travail avec lequel ils peuvent expérimenter et apprendre. ## Exemples de démarrage rapide expliqués Les cinq exemples préconfigurés montrent différents modèles de données communs : **Capteurs IdO**: Lectures de capteurs numériques avec métadonnées de l'appareil **Marché boursier**: Données financières avec prix, volumes et variations en pourcentage **Ordonnances de commerce électronique**: Objets imbriqués avec tableaux d'éléments de commande **Métriques du serveur**: Surveillance du système avec plusieurs paramètres de performance **Tableau de classement des jeux**: Classement des joueurs avec statistiques et statuts Ces exemples sont prêts à partir. Cliquez sur Lancer, regarder les données et les utiliser comme modèles pour vos propres contextes. ## API Endpoints pour l'intégration Si vous construisez un client personnalisé ou si vous l'intégrez dans une autre application, voici les paramètres HTTP : **Créer un contexte :** ```bash curl -X POST http://localhost:5116/api/mock/contexts \ -H "Content-Type: application/json" \ -d '{"name": "sensors", "description": "Temperature sensors with device ID and readings"}' ``` **Énumérez tous les contextes :** ```bash curl http://localhost:5116/api/mock/contexts ``` **Obtenir un contexte spécifique:** ```bash curl http://localhost:5116/api/mock/contexts/sensors ``` **Démarrer ou arrêter la génération de données :** ```bash curl -X POST http://localhost:5116/api/mock/contexts/sensors/start curl -X POST http://localhost:5116/api/mock/contexts/sensors/stop ``` **Supprimer un contexte:** ```bash curl -X DELETE http://localhost:5116/api/mock/contexts/sensors ``` Après avoir créé un contexte, connectez-vous au hub SignalR à `/hub/mock` et inscrivez-vous pour commencer à recevoir les mises à jour. ## Comment fonctionne la génération LLM Lorsque vous créez un contexte, le système : 1. Prend votre description 2. Construit une prompte qui inclut le hasard (semence GUID + horodatage pour la variété) 3. Demande au LLM de générer le JSON approprié correspondant à votre description 4. Valide la réponse est réelle JSON (stripsmarkdown si nécessaire) 5. Cache plusieurs réponses pour une livraison rapide 6. Génére plus en arrière-plan pour garder le cache rempli La température est de 1,2 (relativement élevée) pour assurer la variété. Lorsque vous demandez des « données utilisateur », vous obtenez des noms et des valeurs différents à chaque fois, pas les mêmes rares recyclés sans fin. Les données restent structurellement cohérentes tout en variant de façon réaliste. ## Performance et mise en cache intelligente La génération de données se produit en arrière-plan, pas à la demande par poussée. Cela maintient les mises à jour cohérentes et réduit la charge LLM. Voici comment ça marche : - Au démarrage, le système pré-remplit un cache avec des réponses pour chaque contexte actif - Il mesure la durée de la génération (par exemple 500ms par demande) - Il calcule la taille optimale du lot : intervalle de poussée ÷ temps de génération (5000ms ÷ 500ms = 10 items) - Il génère des lots en arrière-plan pour garder le cache - Quand il est temps de pousser, il tire du cache immédiatement Résultat : Votre premier message arrive instantanément, les messages suivants viennent régulièrement toutes les 5 secondes, et le LLM n'est pas martelé en continu. ### Le flux de cache intelligent ```mermaid graph LR subgraph Startup A[App Starts] --> B[Pre-fill Cache] B --> C[Measure Gen Time
500ms] C --> D[Calculate Batch
5000ms / 500ms = 10] end subgraph Runtime Loop E[Timer Tick
Every 5s] --> F{Cache > 50%?} F -->|Yes| G[Pop from Cache] F -->|No| H[Generate Batch
in Background] G --> I[Push to Clients] H --> J[Refill Cache] J --> G I --> E end D --> E style B stroke:#10b981,stroke-width:3px style G stroke:#0ea5e9,stroke-width:3px style H stroke:#ef4444,stroke-width:3px style I stroke:#f59e0b,stroke-width:3px ``` ## Dépannage de problèmes communs **La connexion affiche « Déconnecté » et ne se reconnectera pas** - Vérifiez que votre service LLM (Ollama/OpenAI) fonctionne - La configuration par défaut attend Ollama à `http://localhost:11434` - Exécuter `ollama list` pour vérifier que vous avez des modèles installés - Vérifiez la console du navigateur pour les erreurs de connexion SignalR **Contexte créé mais aucune donnée n'apparaît** - Regardez le panneau Contextes actifs — est-ce que le contexte montre "Active"? - Cliquez sur le bouton Connecter si vous n'avez pas encore souscrit - Vérifier l'état de la connexion affiche vert (Connecté) dans le panneau de données en direct - Vérifiez les journaux du serveur pour voir si la génération LLM fonctionne **La structure des données ne correspond pas à ce que vous attendiez** - Rendre votre description plus précise et plus concrète - Exemple: "température en nombre entre 0 et 100" fonctionne mieux que "température" - Essayez de reformuler votre description — c'est l'ingénierie rapide au travail - Vérifiez les données générées et affiner votre description en fonction de ce que vous voyez **La console du navigateur affiche les tentatives de reconnection SignalR** - Le moteur pourrait ne pas fonctionner—vérifiez votre terminal - Vous auriez pu modifier le port – mettre à jour l'URL du hub SignalR si nécessaire - Vérifier les problèmes de pare-feu ou de réseau (surtout dans les environnements Docker/WSL) ## Options de configuration Vous pouvez personnaliser le comportement dans `appsettings.json`: ```json { "MockLlmApi": { "SignalRPushIntervalMs": 5000, // How often to push data (milliseconds) "ModelName": "llama3", // Which LLM model to use "Temperature": 1.2, // Creativity level (0.0-2.0, higher = more varied) "BaseUrl": "http://localhost:11434", // LLM service URL "HubContexts": [ // Optional: pre-configured contexts { "Name": "weather", "Description": "Weather data with temperature, humidity, wind speed", "IsActive": true } ] } } ``` **SignalRPushIntervallesM**: Réglez plus bas pour des mises à jour plus rapides, plus haut pour réduire la charge LLM **Température**: Des valeurs plus élevées donnent des données plus créatives et plus aléatoires, plus faibles donne des résultats plus cohérents **HubContexts**: Définissez les contextes qui démarrent automatiquement lorsque l'application démarre ## Intégration à votre application Si vous construisez un tableau de bord réel et que vous voulez l'utiliser pendant le développement, voici un exemple de React : ```javascript import * as signalR from '@microsoft/signalr'; const connection = new signalR.HubConnectionBuilder() .withUrl('http://localhost:5116/hub/mock') .withAutomaticReconnect() .build(); connection.on('DataUpdate', (message) => { if (message.context === 'stock-market') { updateStockChart(message.data); } }); await connection.start(); await connection.invoke('SubscribeToContext', 'stock-market'); ``` Lorsque vous êtes prêt à passer à la production, il suffit de changer l'URL du hub. L'interface SignalR (`on()` et `invoke()`) fonctionne de la même façon avec les vrais moteurs. ## Pourquoi construire ça ? Il ya de bonnes bibliothèques de données simulées là-bas. Faker.js est excellent. Mockaroo fait du bon travail. Alors pourquoi construire un autre outil? Cet outil résout des défis spécifiques : 1. **Diffusion en temps réel**: La plupart des outils vous donnent des ensembles de données statiques ou des paramètres REST, pas des flux WebSocket en direct 2. **Interface en langage naturel**: Décrivez ce que vous voulez au lieu d'écrire des schémas JSON 3. **Données adaptées au contexte**: Les LLM génèrent des valeurs réalistes qui ont du sens ensemble, pas seulement des chaînes aléatoires qui s'adaptent à un type 4. **Auto-documentation**: La description est la documentation de votre structure de données 5. **Structure flexible**: Changez votre modèle de données à mi-développement sans mettre à jour les appareils Il est conçu pour un workflow spécifique : construire des UI en temps réel lorsque vous avez besoin de données variées et réalistes sans frais généraux de configuration. ## Commencer La meilleure façon de comprendre cet outil est de l'utiliser : 1. Démarrer l'application & #160;: `dotnet run --project LLMApi` 2. Ouvrez votre navigateur à `http://localhost:5116` 3. Cliquez sur l'un des boutons verts "Launch" 4. Regardez le flux de données dans À partir de là, essayez de créer votre propre contexte avec une description qui correspond aux besoins de votre projet. L'outil est le plus précieux lorsque vous l'utilisez pour un travail de développement réel. J'ai construit cela parce que j'ai continué à rencontrer le même problème: besoin de données réalistes, changeant pour les démos et le développement. Si vous faites face à ce défi aussi, j'espère que cet outil aide votre workflow. --- ## Référence rapide **Démarrage :** ```bash dotnet run --project LLMApi ``` **URL par défaut & #160;:** `http://localhost:5116` **Hub SignalR :** `/hub/mock` **Méthodes clés :** - `SubscribeToContext(name)` - Commencez à recevoir des données - `UnsubscribeFromContext(name)` - Arrêter de recevoir les données **Événements clés :** - `DataUpdate` - De nouvelles données sont arrivées - `Subscribed` - Abonnement confirmé - `Unsubscribed` - Non-abonnement confirmé C'est tout ce que vous devez savoir. Le reste est juste explorer ce que vous pouvez construire avec elle.