React Native Transformers 开源项目教程-优快云博客

本文链接：https://blog.youkuaiyun.com/gitblog_00811/article/details/148297036

React Native Transformers 开源项目教程

react-native-transformers Run local LLM from Huggingface in React-Native or Expo using onnxruntime. 项目地址: https://gitcode.com/gh_mirrors/re/react-native-transformers

1. 项目介绍

react-native-transformers 是一个开源项目，它允许开发者在 React Native 和 Expo 应用程序中直接运行基于 ONNX Runtime 的 Hugging Face 转换器模型。通过在设备上进行推理，这个库为移动应用提供了 AI 能力，可以实现文本生成、回答问题以及处理语言等功能，而无需将数据发送到外部服务器，从而增强隐私性，减少延迟，并支持离线功能。

2. 项目快速启动

安装依赖

首先，确保安装了必要的 peer dependencies：

npm install onnxruntime-react-native

然后，安装 react-native-transformers：

对于 React Native：

npm install react-native-transformers

对于 Expo：

npx expo install react-native-transformers

平台配置

React Native CLI：链接 onnxruntime-react-native 库：

npx react-native link onnxruntime-react-native

Expo：在 app.json 或 app.config.js 中添加 Expo 插件配置：

{
  "expo": {
    "plugins": [
      "onnxruntime-react-native"
    ]
  }
}

Babel 配置

添加 babel-plugin-transform-import-meta 插件到 Babel 配置中：

// babel.config.js
module.exports = {
  // ... 你现有的配置
  plugins: [
    // ... 你现有的插件
    "babel-plugin-transform-import-meta"
  ]
};

之后，运行以下命令清除 Metro bundler 缓存：

npx expo start --clear

开发环境设置

由于 ONNX Runtime 和 react-native-transformers 包含原生代码，开发和使用时需要使用开发客户端而不是 Expo Go。

可以使用以下方法之一设置开发客户端：

EAS Development Build：使用 EAS Build 创建自定义开发客户端。
Expo Prebuild：弹出为裸机工作流程以访问原生代码。

使用示例

以下是一个简单的 React 组件，它加载了一个文本生成模型，并使用该模型生成文本：

import React, { useState, useEffect } from 'react';
import { View, Text, Button } from 'react-native';
import { Pipeline } from 'react-native-transformers';

export default function App() {
  const [output, setOutput] = useState('');
  const [isLoading, setIsLoading] = useState(false);
  const [isModelReady, setIsModelReady] = useState(false);

  // 在组件挂载时加载模型
  useEffect(() => {
    loadModel();
  }, []);

  const loadModel = async () => {
    setIsLoading(true);
    try {
      // 加载一个小型 Llama 模型
      await Pipeline.TextGeneration.init(
        "Felladrin/onnx-Llama-160M-Chat-v1",
        "onnx/decoder_model_merged.onnx",
        {
          // 需要一个 fetch 函数来下载模型文件
          fetch: async (url) => {
            // 在真实应用中，你可能想要缓存下载的文件
            const response = await fetch(url);
            return response.url;
          }
        }
      );
      setIsModelReady(true);
    } catch (error) {
      console.error("Error loading model:", error);
      alert("Failed to load model: " + error.message);
    } finally {
      setIsLoading(false);
    }
  };

  const generateText = () => {
    setOutput('');
    // 从提示生成文本并更新 UI
    Pipeline.TextGeneration.generate(
      "Write a short poem about programming:",
      (text) => setOutput(text)
    );
  };

  return (
    <View style={{ padding: 20 }}>
      <Button
        title={isModelReady ? "Generate Text" : "Load Model"}
        onPress={isModelReady ? generateText : loadModel}
        disabled={isLoading}
      />
      <Text style={{ marginTop: 20 }}>
        {output || "Generated text will appear here"}
      </Text>
    </View>
  );
}