Какая архитектура лучше всего подходит для объединения локального ИИ и облачного ИИ в приложении React/JS, не превращая ⇐ Javascript

[Anonymous]

Я пытаюсь создать «защищенную от будущего» настройку React/JS, в которой приложение сможет переключаться между различными серверными модулями искусственного интеллекта (локальными моделями, такими как WebGPU/WebLLM, моделями API, такими как OpenAI/Gemini, и, возможно, даже пользовательскими рабочими процессами), не переписывая половину проекта каждый раз, когда появляется новая модель.
Я не говорю о простом переключении «if (provider === x)». Я имею в виду настоящую архитектуру, которая делает все чистым, тестируемым и не привязанным жестко к какому-либо отдельному поставщику ИИ.
Вещи, о которых я думал и которые мне не очень понравились:

• написание одного класса «AIService» с огромными блоками условий
• подключение всех поставщиков к контексту React, и это очень быстро становится беспорядочным
• создаю оболочку для каждой модели, но потом дублирую логику.
• маршрутизирую все через один серверный API, но тогда теряю производительность WebGPU и возможность работы в автономном режиме.
• использую что-то вроде RxJS или Zustand для управления потоками, но все равно кажется излишним

Основные цели:

• горячая замена между поставщиками во время выполнения (OpenAI → Gemini → локальная модель)
• унифицированная обработка потоковых ответов
• избегание шаблонов кода блокировки поставщика внутри компонентов
• сохранение предсказуемости, если Я добавляю больше моделей позже.
• хорошо работают с Suspense, Server Components или React Native, если это возможно.

Я видел, как некоторые команды создавали полный «уровень адаптера AI», но, кажется, все делают это по-разному.

Итак, какова лучшая практика в 2025 году?

Как опытные разработчики структурировать это так, чтобы их проект не взорвался, поскольку поставщики ИИ меняются каждые 2 месяца?
Любые шаблоны архитектуры, структуры папок или примеры из реальной жизни очень приветствуются.

Код: Выделить всё

// something like this but not terrible
export class AIProvider {
constructor(config) { this.config = config }
stream(prompt) { throw new Error("not implemented") }
info() { return { name: "base" } }
}

// OpenAI impl
export class OpenAIProvider extends AIProvider {
async *stream(prompt) {
// call openai api...
}
}

// Local WebGPU impl
export class LocalModelProvider extends AIProvider {
async *stream(prompt) {
// call webgpu model...
}
}

Я хочу знать, как люди, которые действительно создают продукты искусственного интеллекта, поддерживают их чистоту и расширяемость.

Подробнее здесь: https://stackoverflow.com/questions/798 ... eact-js-ap