Вступ

ЗАУВАЖЕННЯ: статтю ви можете створити як частину мого пакунка nuget як документацію для випуску. Це досить цікаво, тому я поставив її тут, але якщо це проблема для вас, будь ласка, проігноруйте її.

Як частина мого Пакунок Nuget LLMApi / mathlucid.mockllmapi Мені потрібна була сторінка, щоб увімкнути використання можливостей UNTR (вона може симулювати подачі GNR за допомогою LLM для надання даних).

Ви можете знайти GitHub тут для проекту, для всіх публічних доменів і т. д....

Це досить легко стало досить гарним інструментом!

Якщо вам коли-небудь потрібно було побудувати панель приладів або графічний інтерфейс у реальному часі до того, як з'явиться справжнє джерело даних, ви знатимете проблему. В результаті ви пишете складні фіксації JSON або деталі. setInterval() петлі, які обертаються на ту саму ж долю об' єктів.

Я створив цю демонстрацію сигналів, щоб розв' язати цю проблему більш гнучким способом. Ви описуєте потрібні вам дані простою англійською мовою, а місцевий LLM створює реалістичний, різноманітний JSON, який тече до вашого переглядача у режимі реального часу.

Дозвольте мені показати вам, як це працює і як отримати найбільше користі від цього.

Що робить цей інструмент

Сторінка демонстрацій SignR (Index.cshtml) - це панель керування для керування потоками даних у режимі реального часу. Ось базовий потік даних:

1. Ви створюєте " контекст " (позначений потік даних)
2. Ви описуєте, які дані ви хочете бачити у звичайній англійській
3. LLM створює відповідний JSON на основі вашого опису
4. За кожні 5 секунд сигналізація надсилає свіжу інформацію до вашого переглядача
5. Ви бачите результати з підсвічуванням синтаксису у режимі реального часу

Це особливо корисно, якщо ви створюєте прототипи, створюєте демонстрації або працюєте над можливостями інтерфейсу програми, чекаючи, щоб програмний інтерфейс сервера був готовий. Дані виглядають реалістично, оскільки LLM розуміє контекст і створює відповідні значення.

Великий малюнок

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

Чому сигналізація для оновлення реального часу?

SignR підтримує постійне з' єднання WebSocket між вашим переглядачем і сервером. Замість опитування кінцевої точки кожні декілька секунд з запитами HTTP, сервер надсилає дані, коли він готовий. Таким чином, ви зможете отримувати дійсно реальні оновлення з мінімальним накладним накладним.

З' єднання залишається відкритим, дані з' являються миттєво, і ваш комп' ютер відчуває себе набагато чутливішим. Це та сама технологія, яку використовують у програмах для обміну повідомленнями, у реальних панельх і у програмах для миттєвих оновлень.

Швидкий запуск: Запуск за 5 хвилин

Давайте почнемо з найшвидшого шляху, щоб побачити, як це працює. Я покажу вам приклад даних фондового ринку.

Крок 1: Запустити програму

dotnet run --project LLMApi/LLMApi.csproj

Перейти до http://localhost:5116 (Перевірте вивід консолі для поточного порту).

Крок 2: Використовуйте приклад швидкого початку

Ви побачите п' ять попередньо налаштованих прикладів з зеленими кнопками " Лаunch ." Натисніть кнопку " Стоковий ринок " і завершіть роботу. Сторінка автоматично:

• Створює контекст даних фондового ринку
• Підписується на ваш переглядач для отримання оновлень
• Починає показувати дані про акції з цінами, об' ємами та змінами

Крок 3. Спостерігати за потоком даних

Кожні 5 секунд з' являються нові дані з підсвічуванням синтаксису. Кожне оновлення показує різні акції з реалістичними цінами і томи торгівлі. За допомогою LLM кожен раз створюються свіжі дані, отже ви можете спостерігати за різноманітністю під час збереження послідовної структури.

І все! щоб побачити різні шаблони даних.

Створення ваших власних власних потоків даних

Кнопки швидкого запуску є зручними, але справжню силу можна отримати, якщо описати саме те, що вам потрібно. Створіть власний приклад.

Приклад: телеметрія кави.

Скажімо, ви будуєте панель приладу IoT і потребуєте симуляції даних про кавову машину.

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

Натисніть кнопку " Створити і підписатися ," - програма вимкнено.

Що відбувається за сценами

sequenceDiagram
    participant Browser
    participant API
    participant Manager
    participant BG as Background Service
    participant LLM
    participant Hub

    Browser->>API: POST /api/mock/contexts<br/>{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'<br/>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

Система:

1. Створює контекст сервера
2. Підписується на ваш переглядач для отримання оновлень за допомогою OSDR
3. Починає створення даних на основі вашого опису
4. Перемикає оновлення кожні 5 секунд

Ви побачите такий результат:

{
  "machineId": "CM-2847",
  "beansRemaining": 67,
  "waterTemp": 94.5,
  "cupsBrewed": 142,
  "lastMaintenance": "2025-01-03T08:23:00Z"
}

Кожне оновлення має різні значення, але підтримує структуру. LLM розуміє " телеметрію комп' ютера- коффі " і створює числа, які мають сенс у цьому контексті.

Розуміння контексту

А context є налаштуванням потоку даних з назвою. Вважайте його каналом або темою.

Під час створення одного з них ви вказуєте:

• Назва: унікальний ідентифікатор (наприклад, weather, stock-market, sensors)
• Опис: структуру даних, яку ви бажаєте бачити простою англійською

Сервер тоді:

• Створює групу SignR з такою назвою
• Побудова запиту на LLM на основі вашого опису
• Час від часу створює свіжі дані (типово кожні 5 секунд)
• Трансляція повідомлення всім клієнтам, на які було оформлено підписку

Декілька переглядачів можуть підписатися на один і той самий контекст, і всі вони отримують однакові дані одночасно. Це чудово, якщо ви перевіряєте панелі приладів, які потребують синхронізованих оновлень на різних екранах або компонентах.

Державна машина " Контекстний життєвий цикл" Image/ info menu item (should be translated)

stateDiagram-v2
    [*] --> Created: Create Context<br/>(POST /contexts)

    Created --> Active: Start<br/>(auto or manual)
    Active --> Stopped: Stop<br/>(POST /stop)
    Stopped --> Active: Start<br/>(POST /start)

    Created --> Subscribed: Client Subscribes
    Active --> Subscribed: Client Subscribes
    Stopped --> Subscribed: Client Subscribes<br/>(no data sent)

    Subscribed --> Receiving: Data Push<br/>(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

Розуміння формату інтерфейсу користувача

Інтерфейс має три панелі для того, щоб все було впорядковано:

Ліворуч: Створити контекст

Тут ви можете визначити нові потоки даних. Вам потрібно:

• Назва контексту: Робите його унікальним і описовим.
• Опис: Будьте конкретними щодо того, що вам потрібно. LLM найкраще працює з чіткими описами, такими як " Профілі користувачів з ім' ям, електронною поштою, віком і булевим станом преміалів ."

Вам не потрібно писати схеми JSON або пояснювати типи даних. Структура LLM складається з описів природної мови, на диво, добре.

Посередині: Активні контексти

Показує всі встановлені вами контексти за допомогою:

• Назва і значок стану (Active/ Зупинка)
• Кількість з' єднань (кількість клієнтів зараз підписані)
• Кнопки керування: З' єднатися, Роз' єднати, Почати, Зупинити, Вилучити

З' єднати/ Роз' єднати керує підпискою навігатора. Натисніть кнопку З' єднатися, щоб розпочати отримання даних, а потім від' єднайте, щоб зупинити роботу без вилучення контексту.

Почати/ Зупинити керує створенням даних сервера. Це корисно, якщо ви бажаєте призупинити потік, не знищуючи налаштування контексту.

Вилучити повністю вилучає контекст. Скористайтеся цим пунктом, щоб очистити дані, коли ви завершите з певним потоком даних.

Праворуч: Дані, що зберігаються

Тут ви можете бачити оновлення у режимі реального часу:

• Індикатор стану з' єднання (З' єднано)
• Поточна назва контексту, на яку було оформлено підписку
• Останні 10 повідомлень з часовими штампами і підсвічуванням синтаксису

Дані з' являються першими нагорі, отже, ви завжди побачите останні оновлення без гортання.

Шаблон з' єднання JavaScript

На сторінці буде використано HTMX для надсилання форм і сигналізатора для реального зв' язку. Якщо ви створюєте ваш власний клієнт, ось вам і потрібен шаблон SignR:

Потік з' єднання клієнта

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()<br/>.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

Налаштування з' єднання:

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();

Підписка на отримані дані:

await connection.invoke('SubscribeToContext', 'my-context-name');

Скасувати підписку після завершення:

await connection.invoke('UnsubscribeFromContext', 'my-context-name');

Сторінка демонстрацій керує всім цим автоматично, але ці три шаблони - все, що вам потрібно для нетипової реалізації.

Практичні випадки використання

Ось декілька сценаріїв, у яких цей інструмент справді сяє:

1 Будівництво інтерфейсів до API

Ви працюєте над панеллю приладів, а команда серверів все ще проектує схему API. Замість блокування їх роботи, опишіть структуру даних, яку ви очікуєте, і збудуйте ваш комп' ютер з зображеним потоком. Після того, як реальний API буде готовий, ви просто поміняєте кінцеву точку.

2. Демонстрації клієнта

Ви демонструєте програму спостереження за клієнтом, але фактично канал даних ще не готовий. Створіть контексти, які відповідають вашій запланованій структурі даних і показу реалістичних, змінених даних під час презентації. Він виглядає професійним і допомагає клієнту візуалізувати кінцевий продукт.

3. Розробка і тестування передньої сторони

Для того, щоб перевірити, як ваші діаграми, таблиці та компоненти працюють з оновленнями, вам потрібні реалістичні, різноманітні дані. Створіть контекст з структурами, які вам потрібні, і розробіть ваш інтерфейс з упевненістю, що він керує шаблонами даних реального світу.

4. Перевірка можливостей завантаження у режимі реального часу

Вам слід переглянути спосіб, у який ваш інтерфейс користувача працює під швидкими оновленнями. Створіть контекст високочастотності і подивіться, як ваші компоненти працюють з потоком даних. Таким чином ви зможете визначити проблеми швидкодії перед виробництвом.

5 Навчання веб-кетів і реального часу

Ви навчаєте концепцій SnectR або WebSocket і хочете, щоб студенти бачили оновлення у режимі реального часу без створення повного сервера. Демонстрація є робочим прикладом, з яким вони можуть експериментувати і вчитися.

Приклади швидкого запуску пояснені

П' ять попередньо налаштованих прикладів показують різні спільні шаблони даних:

Датчики IoT: Читати цифрові датчики з метаданими пристроїв Фондовий ринок: Фінансові дані з цінами, об' ємами та змінами у відсотках Замовлення електронного зв' язку: Вкладених об' єктів з масивами елементів порядку Метрики сервера: Керування системою з декількома показниками швидкодії Іграшкова дошка: Оцінки гравців за умовами і станами

Ці приклади готові до запуску. Натисніть кнопку Запустити, перегляньте дані і скористайтеся ними як шаблонами для вашого власного контексту.

Кінцеві точки API для інтеграції

Якщо ви збираєте нетиповий клієнт або об' єднуєте цей клієнт з іншою програмою, ось список кінцевих точок HTTP:

Створити контекст:

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"}'

Показати список всіх контекстів:

curl http://localhost:5116/api/mock/contexts

Отримати специфічний контекст:

curl http://localhost:5116/api/mock/contexts/sensors

Почати або зупинити створення даних:

curl -X POST http://localhost:5116/api/mock/contexts/sensors/start
curl -X POST http://localhost:5116/api/mock/contexts/sensors/stop

Вилучити контекст:

curl -X DELETE http://localhost:5116/api/mock/contexts/sensors

Після створення контексту з' єднатися з центром сигналів у /hub/mock і підписатися на початок отримання оновлень.

Як працює створення LLM

Коли ви створюєте контекст, система:

1. Забирає ваш опис
2. Побудова запиту, що включає випадковість (GUID насіння + часовий штамп для різноманітності)
3. Запитує LLM створити відповідний JSon, що відповідає вашому опису
4. Перевіряє відповідь на це питання (у разі потреби).
5. Кешує декілька відповідей для швидкої доставки
6. Створює додаткові елементи у тлі для зберігання заповнення кешу

Температура встановлено у значення 1. 2 (♪ High) для забезпечення різноманітності. Коли ви запитуєте про " дані користувача ," ви кожного разу отримуєте різні назви і значення, але не ті самі суми, які зчитуються нескінченно. Дані залишаються структурно послідовними, хоча мають різні реалістичні можливості.

Швидкодія і кмітливе кешування

Створення даних відбувається у фоновому режимі, а не на- деменд за натискання. Таким чином, оновлення залишається послідовним і зменшує навантаження LLM.

Ось як це працює:

• Після запуску система попередньо заповнює кеш відповідями на кожен активний контекст
• Вона вимірює тривалість створення (скажімо, 500 мс на запит)
• Обчислює оптимальний пакетний розмір: просування між періодами породження (5000 мм = 10 елементів)
• За допомогою цього пункту можна створювати пакети у тлі, за використання яких кеш буде перевищено
• Коли час натискати, він негайно витягується з кешу

Результат: Ваше перше повідомлення з'являється миттєво, наступні повідомлення надсилаються послідовно кожні 5 секунд, і LLM не з'являється безперервно.

Смарт - кочовий потік

graph LR
    subgraph Startup
        A[App Starts] --> B[Pre-fill Cache]
        B --> C[Measure Gen Time<br/>500ms]
        C --> D[Calculate Batch<br/>5000ms / 500ms = 10]
    end

    subgraph Runtime Loop
        E[Timer Tick<br/>Every 5s] --> F{Cache > 50%?}
        F -->|Yes| G[Pop from Cache]
        F -->|No| H[Generate Batch<br/>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

Вирішення загальних питань

З' єднання показує " Роз' єднано " і не з' єднуватиметься

• Перевірте, чи запущено вашу службу LLM (Ollama/OpenAI)
• Типові налаштування очікують Ollama at http://localhost:11434
• Запустити ollama list щоб перевірити, чи встановлено моделі
• Перевірте консоль переглядача помилок з' єднання SnectR

Контекст створено, але не з' являється даних

• Подивіться на активну панель контексту, це контекст, що показує "Дивний"?
• Натисніть кнопку З' єднатися, якщо ви ще не підписалися
• Перевірити стан з' єднання показує зелений (З' єднано) на панелі даних Live
• Позначте журнали серверів, щоб перевірити, чи працює створення LLM

Структура даних не збігається з очікуваною вами

• Щоб ваш опис був більш конкретним і конкретним
• Приклад: "прискорення як число між 0 і 100" працює краще, ніж просто "прискорення"
• Спробуйте відтворити ваш опис - це стимульна інженерія на роботі.
• Перевірте створені дані і вдосконалюйте опис на основі того, що ви бачите

Консоль навігатора показує спроби з' єднання SignR

• Сервер, можливо, не запущено} Перевірте ваш термінал
• Ви, можливо, змінили адресу " пороза ," якщо це потрібно.
• Перевірте на брандмауер або мережеві проблеми (особливо у середовищах Docker/ WSL)

Параметри налаштування

Ви можете налаштувати поведінку у appsettings.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
      }
    ]
  }
}

SignRPushIntervalMs: Встановити нижнє для швидких оновлень, вище, щоб зменшити навантаження LLM Температура: Вищі значення дають більше креативних/ випадкових даних, нижні дають більш послідовні результати HubContexts: Визначає контексти, які запускатимуться автоматично під час запуску програми

Інтеграція з вашою програмою

Якщо ви будуєте панель приладів і бажаєте скористатися цим під час розробки, ось приклад повторення:

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');

Коли ви будете готові перемикатися на виробництво, просто змініть URL-угу. інтерфейс SignR (GenchR)on() і invoke()) працює у подібний спосіб з справжніми серверами.

Чому слід будувати це?

Існують хороші інсценовані бібліотеки даних. Фіктивні.js чудові. Mockaroo чудово працює. Навіщо будувати інший інструмент?

Цей інструмент вирішує специфічні проблеми:

1. Потоковий потік у режимі реального часу: Більшість інструментів надають вам статичні набір даних або кінцеві точки, а не живі струмки WebSocket
2. Інтерфейс для рідної мови: Опишіть те, що ви хочете, замість написання схем JSON
3. Контекстні відповідні дані: LLM створює реалістичні значення, які мають сенс разом, а не просто випадкові рядки, які відповідають типу
4. Самодокументування: Опис - це документація щодо вашої структури даних
5. гнучка структура: Зміна моделі даних середина розробки без оновлення імітаторів

Вона створена для конкретного робочого процесу: створення реальних комп'ютерів, коли вам потрібні різноманітні, реалістичні дані без додаткового налаштування.

Початок роботи

Найкращий спосіб зрозуміти цей інструмент - використати його:

1. Запустити програму: dotnet run --project LLMApi
2. Відкрити ваш переглядач http://localhost:5116
3. Натисніть одну з зелених кнопок " Запуск "
4. Спостерігати за потоком даних всередину

З цього списку спробуйте створити власний контекст з описом, який відповідає потребам вашого проекту. Цей інструмент буде дуже цінним, якщо ви використовуватимете його для розробки.

Я створив це, тому що я продовжував стикатися з тією ж проблемою: потреба у реалістичній, зміні даних для демонстрацій і розробки. Якщо ви зустрінете цей виклик, я сподіваюся, що цей інструмент допоможе вам у роботі.

Швидке посилання

Запуск:

dotnet run --project LLMApi

Типова адреса URL: http://localhost:5116

Хаб сигнала: /hub/mock

Методи:

• SubscribeToContext(name) - Почати отримання даних
• UnsubscribeFromContext(name) - Припинити отримання даних

Події ключів:

• DataUpdate - Надійшли нові дані
• Subscribed - Подпись подписана
• Unsubscribed - Непідписана підписка підтверджена

Це все, що вам потрібно знати, решта просто досліджує те, що ви можете створити з ним.