React LLM 项目教程

颜德崇

于 2024-09-25 07:39:46 发布

阅读量947

点赞数 19

本文链接：https://blog.csdn.net/gitblog_00195/article/details/142505986

版权

React LLM 项目教程

react-llm Easy-to-use headless React Hooks to run LLMs in the browser with WebGPU. Just useLLM(). 项目地址: https://gitcode.com/gh_mirrors/re/react-llm

1. 项目目录结构及介绍

react-llm/
├── github/
│   └── workflows/
├── assets/
├── packages/
│   ├── headless/
│   ├── retro-ui/
│   ├── extension/
│   └── model/
├── .gitignore
├── LICENSE
├── README.md
├── package.json
├── pnpm-lock.yaml
├── pnpm-workspace.yaml
├── tsconfig.base.json

目录结构介绍

github/workflows/: 包含GitHub Actions的工作流配置文件。
assets/: 存放项目所需的静态资源文件。
packages/: 包含项目的各个子包，如headless、retro-ui、extension和model。
- headless/: 包含无头React Hooks，用于在浏览器中运行LLMs。
- retro-ui/: 包含复古主题的UI组件。
- extension/: 包含Chrome扩展的代码。
- model/: 包含LLM模型和分词器的代码。
.gitignore: Git忽略文件配置。
LICENSE: 项目许可证文件。
README.md: 项目说明文档。
package.json: 项目的npm配置文件。
pnpm-lock.yaml: pnpm的锁定文件，用于版本控制。
pnpm-workspace.yaml: pnpm的工作区配置文件。
tsconfig.base.json: TypeScript的基础配置文件。

2. 项目启动文件介绍

项目的启动文件主要位于packages/retro-ui/目录下。以下是主要的启动文件：

packages/retro-ui/src/index.tsx: 这是项目的入口文件，负责初始化React应用并渲染根组件。
packages/retro-ui/src/App.tsx: 这是主要的应用组件，包含了应用的逻辑和UI结构。

启动步骤

进入packages/retro-ui/目录：
```
cd packages/retro-ui
```
安装依赖：
```
pnpm install
```
启动开发服务器：
```
pnpm dev
```

3. 项目配置文件介绍

package.json

package.json文件位于项目根目录下，包含了项目的元数据和依赖配置。以下是一些关键配置项：

{
  "name": "@react-llm/headless",
  "version": "1.0.0",
  "main": "index.js",
  "scripts": {
    "dev": "pnpm run dev",
    "build": "pnpm run build"
  },
  "dependencies": {
    "react": "^17.0.2",
    "react-dom": "^17.0.2"
  },
  "devDependencies": {
    "typescript": "^4.5.2"
  }
}

tsconfig.base.json

tsconfig.base.json文件位于项目根目录下，包含了TypeScript的基础配置。以下是一些关键配置项：

{
  "compilerOptions": {
    "target": "ES6",
    "module": "ESNext",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  },
  "include": ["packages/**/*"],
  "exclude": ["node_modules"]
}