BrowserAI 项目使用教程

BrowserAI 项目使用教程

BrowserAI Run local LLMs inside your browser 项目地址: https://gitcode.com/gh_mirrors/br/BrowserAI

1. 项目的目录结构及介绍

BrowserAI 项目的目录结构如下：

.
├── .github/              # GitHub 工作流和配置文件
│   └── workflows/
├── assets/               # 静态资源文件
├── docs/                 # 文档资料
├── examples/             # 使用示例
├── extensions/           # 浏览器扩展相关文件
│   └── chrome/
├── src/                  # 源代码目录
├── .gitignore            # Git 忽略文件
├── .prettierrc           # Prettier 配置文件
├── ATTRIBUTION.md        # 项目归属信息
├── LICENSE               # 项目许可证
├── README.md             # 项目说明文件
├── SECURITY.md           # 安全协议文件
├── eslint.config.js      # ESLint 配置文件
├── eslintrc.config.js    # ESLint 配置文件
├── package.json          # 项目包配置文件
├── tsconfig.json         # TypeScript 配置文件
├── tsup.config.ts        # Tsup 配置文件
└── vite.config.js        # Vite 配置文件

每个目录和文件的功能如下：

• .github/workflows/：存放 GitHub Actions 的自动化脚本。
• assets/：存放项目所需的静态资源，如图标、图片等。
• docs/：存放项目文档。
• examples/：提供项目使用示例。
• extensions/chrome/：存放 Chrome 浏览器扩展的相关文件。
• src/：源代码目录，包含项目的核心代码。
• .gitignore：指定 Git 忽略的文件和目录。
• .prettierrc：Prettier 代码格式化配置。
• ATTRIBUTION.md：记录项目贡献者和归属信息。
• LICENSE：项目使用的许可证。
• README.md：项目说明文件，包含项目信息、安装和使用方法。
• SECURITY.md：项目安全协议。
• eslint.config.js：ESLint 代码检查配置。
• eslintrc.config.js：ESLint 代码检查配置。
• package.json：项目依赖和脚本配置。
• tsconfig.json：TypeScript 配置。
• tsup.config.ts：Tsup 打包工具配置。
• vite.config.js：Vite 配置。

2. 项目的启动文件介绍

项目的启动主要通过 package.json 文件中的脚本进行。以下是 package.json 中的几个关键脚本：

{
  "scripts": {
    "dev": "vite",
    "build": "vite build",
    "serve": "vite preview",
    ...
  }
}

• "dev"：启动本地开发服务器，使用 Vite 作为构建工具。
• "build"：构建项目，生成生产环境所需的静态文件。
• "serve"：启动一个本地服务器，用于预览构建后的项目。

要启动项目，可以在项目根目录下运行以下命令：

npm run dev

这将启动开发服务器，并在浏览器中自动打开一个新标签页，显示项目内容。

3. 项目的配置文件介绍

项目的主要配置文件包括：

• tsconfig.json：TypeScript 配置文件，用于配置 TypeScript 编译选项。
• vite.config.js：Vite 配置文件，用于自定义 Vite 的行为，如指定入口文件、输出目录等。
• .prettierrc：Prettier 配置文件，用于统一代码格式。
• eslint.config.js：ESLint 配置文件，用于代码质量和风格检查。

tsconfig.json 的基本配置如下：

{
  "compilerOptions": {
    "target": "es2018",
    "module": "esnext",
    "moduleResolution": "node",
    "lib": ["esnext", "dom"],
    "strict": true,
    "jsx": "react",
    ...
  },
  ...
}

这里配置了 TypeScript 的编译目标、模块系统、模块解析策略、库以及是否开启严格模式等。

vite.config.js 的基本配置如下：

import { defineConfig } from 'vite';

export default defineConfig({
  plugins: [],
  base: '/',
  build: {
    outDir: 'dist',
    ...
  },
  ...
});

这里可以配置 Vite 插件、项目的基本 URL、输出目录等。

通过以上三个模块的介绍，您应该对 BrowserAI 项目有了基本的了解，并能够开始进行本地开发。

BrowserAI Run local LLMs inside your browser 项目地址: https://gitcode.com/gh_mirrors/br/BrowserAI