Что такое webllm – io tech_hub

WEBLLM: Запуск LLMS в браузере

Большие языковые модели (LLMS) изменили игру для обработки естественного языка (NLP), поскольку они помогают реализовать чат -боты, кодовые поколения и т. Д. По мере продвижения вперед модели становятся меньше и быстрее, и это открывает множество возможностей. Традиционно, LLMS приходилось служить из мощных облачных графических процессоров и мощных серверов, но недавний прогресс значительно облегчал возможность запуска в местном браузере на стороне клиента. В этой статье мы рассмотрим, как WEBLLM может помочь в этом процессе обслуживания модели на стороне клиента.

Что такое Webllm?

Webllm – это подход, реализованный MLC-AI команда, которая позволяет LLMS полностью работать локально в браузере, используя Webassembly (wasm)В Webgpuи другие современные веб -технологии. Когда используется WABLLM, сначала загружает выбранную модель и хранит ее локально в КэхестариджПолем С этого момента его можно использовать полностью в автономном режиме. Хотя это может быть немного дополнительной работой для загрузки и запуска модели локально, с ростом скорости в Интернете и возможностях устройства, это может быть хорошей идеей в ближайшем будущем.

Как работает Webllm

Технология, лежащая в основе WEBLLM, позволяет ему полностью работать в браузере без какой-либо серверной инфраструктуры. Но как это работает?

• Использование WebAssembly (WASM) и WebGPU: Он преобразует вычисления модели в конкретный формат, эффективен для модулей WebAssembly и использует WebGPU для ускорения для запуска модели.
• Работа на стороне клиента: В отличие от традиционных облачных LLM, WEBLLM работает полностью локально и в браузере, поэтому он не отправляет данные на удаленные серверы и обеспечивает конфиденциальность и безопасность.
• Оптимизированный размер модели: Webllm использует квантованную и оптимизированную версию моделей, поэтому она может быть более быстрой и эффективной в среде браузера.

Cloud vs. In-Browser LLMS

Сравнение Native LLM встраиваемого и веб-сайта LLM встраивание может быть хорошим способом понять различия между ними. Конечно, это может быть не идеально для всех проектов, но управление LLM в браузере является большим преимуществом для большинства проектов.

Имейте в виду, что использование WEBLLM потребует, чтобы модель была загружена и сохранена локально на клиенте. Поэтому важно рассмотреть размер модели и объем данных, которые необходимо загрузить.

Как я могу реализовать его на своем сайте?

WABLLM имеет пакет NPM (@MLC-AI/Web-LLM) работать с ним, и это может быть легко установлено в качестве пакета NPM:

Затем импортируйте модуль в свой код и используйте его. Он также может быть динамически импортирован:

const webllm = await import ("https://esm.run/@mlc-ai/web-llm");

Создать Mlcengine

Большинство операций в WABLLM выполняются через MLCengine. Вот пример фрагмента кода

Создайте свой двигатель LLM

import * as webllm from "@mlc-ai/web-llm";

const selectedModel = "Llama-3.1-8B-q4f32_1-MLC";

const engine: webllm.MLCEngineInterface = await webllm.CreateMLCEngine(
  selectedModel,
  {
    initProgressCallback: (initProgress) => {
      console.log(initProgress);
    },
    logLevel: "INFO",
  },
);

Как только у вас загружен двигатель, и готово к использованию, вы можете начать звонить в API. Обратите внимание, что создание двигателя является асинхронным, поэтому вам нужно подождать, пока он не завершит загрузку модели, прежде чем вы сможете ее использовать.

const messages = [
  { role: "system", content: "You are a helpful AI assistant." },
  { role: "user", content: "Hello!" },
]

const reply = await engine.chat.completions.create({
  messages,
});
console.log(reply.choices[0].message);
console.log(reply.usage);

Он также поддерживает потоковую передачу, и это можно легко сделать путем прохождения stream: true свойство в метод создания.

const chunks = await engine.chat.completions.create({
  messages,
  temperature: 1,
  stream: true, 
  stream_options: { include_usage: true },
});

let reply = "";
for await (const chunk of chunks) {
  reply += chunk.choices[0]?.delta.content || "";
  console.log(reply);
  if (chunk.usage) {
    console.log(chunk.usage); 
  }
}

Поскольку эти операции работают в одном и том же потоке браузера, запускать их в приложениях может быть немного сложно, и это может нанести вред производительности приложения. Таким образом, вместо того, чтобы использовать его напрямую, рекомендуется использовать его в отдельном потоке (рабочем).

В среде браузера у нас Веб -работникии Работники обслуживанияПолем К счастью, Webllm предоставляет обертку для этих API, поэтому вы можете использовать ее так же, как и нативный API.

import * as webllm from "@mlc-ai/web-llm";

const engine = new webllm.ServiceWorkerMLCEngine();
await engine.reload("Llama-3-8B-Instruct-q4f16_1-MLC");

async function main() {
  const stream = await engine.chat.completions.create({
    messages: [{ role: "user", content: "Hello!" }],
    stream: true,
  });
  
  for await (const chunk of stream) {
    updateUI(chunk.choices[0]?.delta?.content || ""); 
  }
}

Если вы ранее работали с библиотекой Openai, структура кода может выглядеть аналогично вам, причина в том, что они пытались сохранить ее аналогичным образом, так как она похоже на взаимодействие с сервером посредством отправки и получения JSON.

Он также поддерживает медиа -форматы, такие как URL -адреса изображения. Кроме того, есть некоторые примеры того, как использовать WEBLLM в разных проектах/структурах в репозитории команды MLC-AI для Web-LLM: примеры папка.

Попробуйте это

Команда MLC-AI разработала веб-сайт: https://chat.webllm.ai/ Позволяет загрузить и попробовать широкий диапазон LLM локально в браузере без какой -либо установки или конфигурации. Это может дать краткий обзор того, как работает Webllm и как его использовать.