# LLMApi: Real-Time Mock Data with LLMs and SignalRM SK2 A Practical Guide # Introduction [![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: Cet article est principalement AI généré dans le cadre de mon paquet nuget en tant que documentation de diffusion. En tant que partie de mon [Nuget package LLMApi / mostlylucid.mockllmapi ](https://www.nuget.org/packages/mostlylucid.mockllmapi) J’avais besoin d’une page pour permettre l’utilisation des fonctionnalités de SignalR qu’il possède (il peut simuler les feeds de signalR en utilisant les LLMs pour fournir des données). C’est ce que j’ai trouvé . Vous pouvez trouver le[ GitHub ici ](https://github.com/scottgal/LLMApi)pour le projet, tous les domaines publics, etc. C'est quicly devenu un très bon outil! ![Simulateur de SignalR](signalrsimulator.png) Si vous ' avez déjà besoin de construire un tableau de bord ou une interface réelle -time UI avant que la source de données réelle n’existe M SK2 vous connaissez le défi . Vous terminez par écrire des fixtures JSON hardcoded ou élaborer `setInterval()` les boucles qui tournent par la même poignée d'objets. J’ai construit cette démonstration de SignalR pour résoudre ce problème d’une manière plus souple. Vous décritez les données dont vous avez besoin en anglais simple, et un LLM local génère des JSON réalistes , variés qui s’acheminent dans votre navigateur en temps réelMSC3timeM SK4 Aucune réparation à entretenirMska5 aucun fichier de semences à mettre à jourM Ska6 simplement décrivez ce que vous voulez et regardez le déroulement de l’applicationMka7 Permettez-moi de vous montrer comment il fonctionne et comment en tirer le meilleur parti. [TOC] ## Ce que fait cet outil La page de démonstration SignalR (`Index.cshtml`) est un panneau de commande pour la gestion des flux de données réels. 1. Vous créez un flux de données nommé "contexteM SK1 ( 2. Vous décrivez quel type de données vous voulez en anglais 3. Un LLM génère un JSON approprié en fonction de votre description 4. SignalR transmet des données fraîches à votre navigateur tous les 5 secondes 5. Vous voyez les résultats avec l'affichage de la syntaxe en temps réel- Il est particulièrement utile' lorsqu’il s’agit d’établir des prototypes, de faire des démonstrations ou de travailler sur les fonctionnalités de frontend en attendant que les API de backend soient prêts. ### Le grand tableau ```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 le réel-Mises à jour du temps? SignalR entretient une connexion WebSocket persistante entre votre navigateur et le serveur. Au lieu d’interroger un point final tous les quelques secondes avec des demandes HTTP, le serveur pousse les données lorsqu’elle est prêteM SK2 . Cela vous donne vraiment des mises à jour réellesMSC4 temps avec minimales frais généraux La connexion demeure ouverte, les données circulent instantanément , et votre interface se sent beaucoup plus réceptive. C’est la même technologie que celle utilisée dans les applications de chatM SK4 les tableaux de bord en directMSC5 et les outils collaboratifs où les mises à jour immédiates sont importantesMST6 ## Démarrage rapide: Faire courir en 5 minutes Je vais vous montrer un exemple de données sur le marché des actions. **Étape 1: Lancer l'application** ```bash dotnet run --project LLMApi/LLMApi.csproj ``` Naviger vers `http://localhost:5116` (vérifier la sortie de console pour le port réel **Étape 2: Utiliser un exemple de démarrage rapide** Vous verrez cinq exemples préconfigurés de - avec des boutons verts "LaunchM SK3 buttons. Cliquez sur "Stock MarketMSC6 et vous verrez la page - Crée un contexte de données sur le marché des actions - Inscrire votre navigateur pour recevoir des mises à jour - Début de l'affichage des données sur les stocks en direct avec les prix, volumesM SK1 et changements **Étape 3: Voir le flux de données** Chaque 5 secondes , de nouvelles données apparaissent avec une mise en évidence de la syntaxe. Chaque mise à jour montre des stocks différents avec des prix réalistes et des volumes commerciaux. Que'c'est ça!Vous 'enregistrez maintenant des données de marchés monétaires modèlesM SK3 Vous êtes libre d'explorer les autres exemples de démarrage rapide pour voir différents patrons de données. ## Créer vos propres flux de données personnalisés Les boutons de démarrage rapide sont utiles, mais le pouvoir réel provient d’expliquer exactement ce que vous avez besoin. LaissezM SK2s créer un exemple personnalisé . **Exemple: télémétrie de la machine à café** Supposons que vous construisez un tableau de bord IoT et avez besoin de données simulées sur la machine à café. ``` 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 "Create & Subscribe" et vousM SK3sterez à l’écart de la liste ### Ce qui se passe derrière les scènes ```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 la backend 2. Inscrivez votre navigateur pour recevoir des mises à jour via SignalR 3. Commence à produire des données en fonction de votre description 4. Met à jour tous les 5 secondes Vous verrez la sortie comme suit : ```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 elle maintient la structure. ## Comprendre les contextes A **contexte** est une configuration de flux de données dénommée. Pensez à elle comme un canal ou un sujet. Lorsque vous créez un ,, vous spécifiez - **Nom**: Un identificateur unique (eM SK2g., `weather`, `stock-market`, `sensors`) - **Description**: La structure de données que vous voulez, en français Le backend alors: - Crée un groupe SignalR avec ce nom - Crée un prompt pour le LLM en fonction de votre description - Génie périodiquement des données fraîches (par défaut toutes les 5 secondes - La diffusion à tous les clients abonnés Plusieurs navigateurs peuvent s'abonner au même contexte et ils reçoivent tous les mêmes données simultanément. C'est un bon outil pour tester des tableaux de bord qui doivent montrer des mises à jour synchronisées sur différents écrans ou composants. ### Contexte Machine 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 conception de l'UI L'interface a trois panneaux pour garder les choses organisées: ### gauche: Créer un contexte C'est là où vous définissez les nouveaux flux de données. VousM SK1Vous aurez besoin: - **Nom du contexte**: Rendre unique et descriptifM SK1 Utiliser la case inférieure -avec-les barres fonctionnent bienMSC4 - **Description**: Être précis sur ce que vous voulez. Le LLM fonctionne le mieux avec des descriptions claires comme " profils d'utilisateurs avec un nomM SK3 courrielMNK4 âgeMRK5 et statut de prime booleanMSC6 Il n’est pas nécessaire de rédiger des schémas JSON ou d’expliquer les types de données. ### Moyen: Contextes actifs Affiche tous vos contextes en cours avec: - Nom et badge de situation (Active/StoppedM SK2 - Cote des connexions ( Combien de clients sont actuellement abonnés) - boutons de commande: Connexion, Déconnection , DémarrageM SK3 StopMSC4 Supprimer **Connect/Disconnect** Contrôle de votre navigateur's abonnement. Cliquer Connect pour commencer à recevoir les donnéesM SK2 Déconnecter pour arrêter sans supprimer le contexteMSC3 **Démarrage/Stop** contrôle la production de données en backend. Il s'agit d'un outil utile lorsque vous voulez interrompre un flux sans détruire la configuration contextuelle. **Supprimer** supprime complètement le contexte. Utilisez ce paramètre pour nettoyer lorsque vous effectuez un transfert de données particulier ### Right: Données en direct C'est là que vous voyez les mises à jour de temps réels. - Indicateur de l'état de la connexion (Connexe/DisconnectéeM SK2 - Nom du contexte actuellement abonné - Les derniers messages 10 comportant des crochets de temps et une mise en valeur syntaxique Les données apparaissent les plus récentes-premièrement en haut de la pageM SK1 vous pouvez donc toujours voir les dernières mises à jour sans parcourir la page ## Le modèle de connexion JavaScript La page utilise HTMX pour soumettre le formulaire et SignalR pour la connectivité réelle. ### Flux de connexion du 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 ``` **Démarrage 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(); ``` **Souscrire pour recevoir des données:** ```javascript await connection.invoke('SubscribeToContext', 'my-context-name'); ``` **Désousscription lorsque terminée:** ```javascript await connection.invoke('UnsubscribeFromContext', 'my-context-name'); ``` La page de démonstration traite tout cela automatiquement, mais ces trois modèles sont tous ceux dont vous avez besoin pour une mise en œuvre personnalisée. ## Exemples d'utilisation pratiques Voici quelques scénarios où cet outil brille vraiment: **1. Établir des UI avant que les API ne soient existants** Vous ' travaillez sur un tableau de bord et l’équipe de backend est encore en train de concevoir le schéma d’API . Au lieu de bloquer leur travail, vous décritez la structure des données que vous attendez et construisez votre UI à partir du flux de modèle M SK3 Lorsque l’API réel est prêt , vous MSC5 échangerez simplement le point final. **2. Démonstrations des clients** Vous effectuez la démonstration d’un panneau de surveillance en direct à un client, mais le pipeline réel des données n’est pas disponible. **3. Développement et essais de frontend** Vous avez besoin de données réalistes, variées pour tester la façon dont vos graphiquesM SK1 tables , et les composantes traitent des mises à jour. Créer des contextes avec les structures dont vous avez besoin et développer votre interface avec confiance qu’elle traite des données réellesMSC4patronaux de données du mondeMNK5 **4. Essais de chargement réels-Fechatures du temps** Vous voulez voir comment votre interface fonctionne sous des mises à jour rapides. Créer un contexte de fréquence élevéeM SK1 et suivre la façon dont vos composantes gèrent le flux de données. Cela permet d’identifier les problèmes de performance avant la productionMSC3 **5. Apprentissage des sockets Web et du temps réel** Vous enseignez les concepts de SignalR ou WebSocket et vous voulez que les étudiants voient des mises à jour réelles en temps réel sans construire un backend complet. ## Exemples de démarrage rapide expliqués Les cinq exemples préconfigurés - démontrent différents modèles de données communs **Sensors IoT**: Les lectures numériques des capteurs avec les métadonnées de l'appareil **Marché des actions**: Données financières avec les prix , volumes M SK2 et variation en pourcentage **E-ordonnances de commerce**: Objets nichés avec des tableaux d'articles de commande **Métrique du serveur**: Surveillance du système avec plusieurs mesures de rendement **Tableau de classement des jeux**: Classement des joueurs avec statistiques et statuts Ces exemples sont prêts à partir. Cliquez sur LancerM SK1 regardez les données, et les utilisez comme templates pour vos propres contextes . ## API Endpoints pour l'intégration Si vous ' construisez un client personnalisé ou l'intégrez à une autre application , voici les points d'entrée 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"}' ``` **Liste de 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 production 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 vous abonner 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 un prompt qui inclut l'aléacité (Seed GUID +Zeuble de temps pour la variété) 3. Demande au LLM de produire un JSON approprié correspondant à votre description 4. Valide que la réponse est JSON réelle (inscrit le marquage en cas de besoin) 5. Caches de réponses multiples pour une livraison rapide 6. génère plus dans l'arrière-plan pour garder le cache rempli La température est fixée à 1.2 ( relativement élevéeM SK2 pour garantir la diversité. Quand vous demandez des données sur les utilisateursMSC4, vous obtiendrez différents noms et valeurs chaque foisMNK6 pas les mêmes quelques-uns recyclés sans cesseMMK7 Les données demeurent structurellement cohérentes tout en variant de façon réalisteMRK8 ## Performance et Caching intelligent La production de données se fait dans le contexte, non sur l’écran-demand par pousséeM SK2 Cela maintient les mises à jour cohérentes et réduit la charge LLM . Voici comment il fonctionne' : - Au démarrage, le système pré- remplit un cache avec des réponses pour chaque contexte actif - Il mesure combien de temps la génération prend (sayM SK1 500ms par demande) - Il calcule la taille optimale des lots: l'intervalle d'impulsion M SK1 le temps de génération (5000ms - Il génère des lots dans l'arrière-plan pour maintenir le cache à niveau - Lorsque c’est le moment de pousser ', il retire immédiatement du cache. Résultat: Votre premier message arrive instantanément , les messages subséquents arrivent constamment tous les M SK2 secondes M SK3 et le LLM n’est pas' ne fait pas l’objet d’un marquage continu ### Le flux de cachement 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 ``` ## Troubleshooting Common Issues **La connexion indique "Disconnected" et wonM SK2t reconnect** - Vérifiez que votre service LLM (Ollama/OpenAIM SK2 est en cours - Configuration par défaut attend Ollama à `http://localhost:11434` - Faire courir `ollama list` pour vérifier si vous avez installé des modèles - Vérifier la console du navigateur pour les erreurs de connexion SignalR **Contexte créé mais aucune donnée n'apparaît** - Voir le panneau Contextes actifs—est le contexte qui montre M SK1Active"? - Cliquez sur le bouton Connexion si vous n’avez pas encore subscrit' - Vérifier que l'état de la connexion montre vert (Connected) dans le panneau des données en direct - Vérifier les registres du serveur pour voir si la génération LLM fonctionne **Structure des données ne correspond pas à ce que vous attendiez** - Rendre votre description plus précise et concrète - Exemple: M SK1la température, en tant que nombre entre 0 et - Essayez de redéfinir votre description—il s'agit d'une ingénierie rapide au travail - Vérifiez les données générées et perfectionnez votre description en fonction de ce que vous voyez **La console du navigateur montre les tentatives de reconnection SignalR** - Le backend ne fonctionne peut-être pas—veuillez vérifier votre terminal - Vous avez peut-être changé le port—actualiser l'URL du hub SignalR si nécessaire - Vérifier les problèmes de pare-feu ou de réseau (en particulier dans le Docker /Environnements STL) ## Options de configuration Vous pouvez personnaliser le comportement en `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 } ] } } ``` **SignalRPushIntervalMs**: Établir une valeur inférieure pour des mises à jour plus rapides , une valeur supérieure pour réduire la charge de LLM **Température**: Les valeurs plus élevées donnent un résultat plus créatif **Contextes Hub**: Définir les contextes qui commencent automatiquement lors du lancement de l'application ## Intégration avec votre application Si vous' construisez un tableau de bord réel et que vous voulez l’utiliser pendant le développement , ici M SK2 est un exemple 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êts à passer à la production, changez simplement l’URL du hub.`on()` et `invoke()`) fonctionne de la même façon avec les backends réels. ## Pourquoi construire ce modèle? Il y a de bonnes bibliothèques de données mock là-bas. Faker.js est excellentM SK2 Mockaroo fait un grand travail . Alors pourquoi construire une autre outilMSC4 Cet outil permet de résoudre des problèmes spécifiques: 1. **Enregistrement en temps réel**: La plupart des outils vous donnent des ensembles de données statiques ou des points finals RESTM SK1 pas les flux WebSocket en direct 2. **Liens linguistiques naturels**: Décrivez ce que vous voulez au lieu de rédiger des schémas JSON 3. **Données pertinentes du contexte**: Les LLM génèrent des valeurs réalistes qui ont un sens ensemble , non seulement des chaînes aléatoires qui se trouvent à l'intérieur d'un type 4. **Self-documentation**: La description est la documentation pour votre structure de données 5. **Structure flexible**: Modifier votre modèle de données à la mi-parcours de l’élaboration - sans mettre à jour les fixtures Il' est conçu pour un flux de travail spécifique: bâtir des interfaces réelles - à temps lorsque vous avez besoin de données réalistes variées ## Démarrage La meilleure façon de comprendre cet outil est d'en utiliser. 1. Démarrer l’application: `dotnet run --project LLMApi` 2. Ouvrir votre navigateur à `http://localhost:5116` 3. Cliquez sur l’un des boutons verts "Launch" 4. Voir le flux de données dans De là, essayez de créer votre propre contexte avec une description qui correspond à votre projetM SK1s besoins. L'outil est le plus précieux lorsque vous l'utilisez pour des travaux de développement réels . Je l’ai construit parce que je continuais à faire face au même problème. --- ## Référence rapide **Démarrage:** ```bash dotnet run --project LLMApi ``` **URL par défaut:** `http://localhost:5116` **SignalR Hub:** `/hub/mock` **Méthodes clés:** - `SubscribeToContext(name)` - Commencer à recevoir les données - `UnsubscribeFromContext(name)` - Supprimer la réception des données **Activités clés:** - `DataUpdate` - Nouveaux données sont arrivées - `Subscribed` - L'abonnement est confirmé - `Unsubscribed` - Confirmation de non-abonnement Il s’agit de tout ce que vous devez savoir. Le reste est d’explorer ce qu’on peut y construire.