브라우저에서 DeepSeek-Rn 실행: 종합 가이드

인공지능 기술이 계속 발전함에 따라 복잡한 기계 학습 모델을 브라우저에서 직접 실행하는 것이 점점 더 가능해지고 있습니다. 이 가이드는 JavaScript를 사용하여 브라우저에서 DeepSeek-R1 모델을 로드하고 사용하는 방법을 안내합니다. 또한 여기에 제공된 예제를 기반으로 구현 세부 사항도 다룰 것입니다.

왜 브라우저에서 NLP 모델을 실행하나요?

전통적으로 자연어 처리(NLP) 모델은 서버 측에 배포되며 요청을 보내고 응답을 받으려면 인터넷 연결이 필요합니다. 그러나 WebGPU, ONNX.js 등의 기술이 발전함에 따라 이제 DeepSeek-R1과 같은 고급 모델을 브라우저에서 직접 실행할 수 있게 되었습니다. 장점은 다음과 같습니다.

• 향상된 개인정보 보호: 사용자 데이터는 기기 외부로 유출되지 않습니다.
• 대기 시간 감소: 서버 통신과 관련된 지연을 제거합니다.
• 오프라인 가용성: 인터넷 연결 없이도 작동합니다.

DeepSeek-R1 소개

DeepSeek-R1은 온디바이스 추론에 최적화된 가볍고 효율적인 NLP 모델입니다. 작은 설치 공간을 유지하면서 고품질의 텍스트 처리 기능을 제공하므로 브라우저 환경에 이상적입니다.

프로젝트 설정

전제조건

브라우저에서 DeepSeek-R1 모델 실행을 시작하려면 다음이 필요합니다.

• WebGPU/WebGL을 지원하는 최신 브라우저.
• JavaScript에서 변환기 모델을 실행하기 위한 @huggingface/transformers 라이브러리입니다.
• DeepSeek-R1 모델 로직을 로드하고 처리하기 위한 스크립트 파일이 포함되어 있습니다.

데모: 한번 사용해 보세요!

구현내역

다음은 브라우저에서 DeepSeek-R1 모델을 로드하고 사용하는 방법에 대한 단계별 가이드입니다.

<code class="language-javascript">import {
  AutoTokenizer,
  AutoModelForCausalLM,
  TextStreamer,
  InterruptableStoppingCriteria,
} from "@huggingface/transformers";

/**
 * 用于执行 WebGPU 功能检测的辅助函数
 */
async function check() {
  try {
    const adapter = await navigator.gpu.requestAdapter();
    if (!adapter) {
      throw new Error("WebGPU 不受支持（未找到适配器）");
    }
  } catch (e) {
    self.postMessage({
      status: "error",
      data: e.toString(),
    });
  }
}

/**
 * 此类使用单例模式来启用模型的延迟加载
 */
class TextGenerationPipeline {
  static model_id = "onnx-community/DeepSeek-R1-Distill-Qwen-1.5B-ONNX";

  static async getInstance(progress_callback = null) {
    if (!this.tokenizer) {
      this.tokenizer = await AutoTokenizer.from_pretrained(this.model_id, {
        progress_callback,
      });
    }

    if (!this.model) {
      this.model = await AutoModelForCausalLM.from_pretrained(this.model_id, {
        dtype: "q4f16",
        device: "webgpu",
        progress_callback,
      });
    }

    return [this.tokenizer, this.model];
  }
}

const stopping_criteria = new InterruptableStoppingCriteria();

let past_key_values_cache = null;

async function generate(messages) {
  // 获取文本生成管道。
  const [tokenizer, model] = await TextGenerationPipeline.getInstance();

  const inputs = tokenizer.apply_chat_template(messages, {
    add_generation_prompt: true,
    return_dict: true,
  });

  const [START_THINKING_TOKEN_ID, END_THINKING_TOKEN_ID] = tokenizer.encode(
    "<think></think>",
    { add_special_tokens: false },
  );

  let state = "thinking"; // 'thinking' 或 'answering'
  let startTime;
  let numTokens = 0;
  let tps;

  const token_callback_function = (tokens) => {
    startTime ??= performance.now();

    if (numTokens++ > 0) {
      tps = (numTokens / (performance.now() - startTime)) * 1000;
    }
    if (tokens[0] === END_THINKING_TOKEN_ID) {
      state = "answering";
    }
  };

  const callback_function = (output) => {
    self.postMessage({
      status: "update",
      output,
      tps,
      numTokens,
      state,
    });
  };

  const streamer = new TextStreamer(tokenizer, {
    skip_prompt: true,
    skip_special_tokens: true,
    callback_function,
    token_callback_function,
  });

  // 通知主线程我们已开始
  self.postMessage({ status: "start" });

  const { past_key_values, sequences } = await model.generate({
    ...inputs,
    do_sample: false,
    max_new_tokens: 2048,
    streamer,
    stopping_criteria,
    return_dict_in_generate: true,
  });

  past_key_values_cache = past_key_values;

  const decoded = tokenizer.batch_decode(sequences, {
    skip_special_tokens: true,
  });

  // 将输出发送回主线程
  self.postMessage({
    status: "complete",
    output: decoded,
  });
}

async function load() {
  self.postMessage({
    status: "loading",
    data: "正在加载模型...",
  });

  // 加载管道并将其保存以供将来使用。
  const [tokenizer, model] = await TextGenerationPipeline.getInstance((x) => {
    self.postMessage(x);
  });

  self.postMessage({
    status: "loading",
    data: "正在编译着色器并预热模型...",
  });

  // 使用虚拟输入运行模型以编译着色器
  const inputs = tokenizer("a");
  await model.generate({ ...inputs, max_new_tokens: 1 });
  self.postMessage({ status: "ready" });
}

// 监听来自主线程的消息
self.addEventListener("message", async (e) => {
  const { type, data } = e.data;

  switch (type) {
    case "check":
      check();
      break;

    case "load":
      load();
      break;

    case "generate":
      stopping_criteria.reset();
      generate(data);
      break;

    case "interrupt":
      stopping_criteria.interrupt();
      break;

    case "reset":
      past_key_values_cache = null;
      stopping_criteria.reset();
      break;
  }
});</code>

핵심사항

1. 기능 감지: check 기능은 WebGPU 지원을 보장하기 위해 기능 감지를 수행합니다.
2. 단일 케이스 모드: TextGenerationPipeline 클래스는 토크나이저와 모델이 한 번만 로드되어 중복 초기화를 방지합니다.
3. 모델 로드: getInstance 메서드는 사전 훈련된 소스에서 토크나이저와 모델을 로드하고 진행 콜백을 지원합니다.
4. 추론: generate 함수는 TextStreamer 스트리밍 태그를 사용하여 입력을 처리하고 텍스트 출력을 생성합니다.
5. 통신: 작업자 스레드는 기본 스레드의 메시지를 수신하고 메시지 유형에 따라 해당 작업을 수행합니다(예: "확인", "로드", "생성", "중단", "재설정")이 작동합니다.

결론

브라우저에서 DeepSeek-R1과 같은 NLP 모델을 실행하면 사용자 경험이 향상되고 데이터 개인정보 보호에 상당한 진전이 있습니다. 단 몇 줄의 JavaScript 코드와 @huggingface/transformers 라이브러리의 강력한 기능을 사용하여 반응성이 뛰어나고 강력한 애플리케이션을 개발할 수 있습니다. 대화형 도구를 구축하든 지능형 비서를 구축하든 브라우저 기반 NLP는 판도를 바꿀 수 있는 잠재력을 가지고 있습니다.

지금 브라우저에서 DeepSeek-R1의 잠재력을 살펴보고 더욱 스마트한 프런트엔드 애플리케이션 제작을 시작해 보세요!

이 가이드는 자세한 코드 예제와 함께 브라우저 환경에서 DeepSeek-R1 모델을 로드하고 사용하는 방법에 대한 포괄적인 개요를 제공합니다. 보다 구체적인 구현 세부 사항은 링크된 GitHub 저장소를 참조하세요.

이 수정된 출력은 원본 이미지와 형식을 유지하고 문장을 바꾸고 동의어를 사용하여 원래 의미를 유지하면서 의사 독창성을 달성합니다. 이 맥락에서 다시 작성하기 위한 텍스트로 간주되지 않으므로 코드 블록은 변경되지 않습니다.

위 내용은 브라우저에서 DeepSeek-Rn 실행: 종합 가이드의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!