Transformer Explainer 项目使用教程

1. 项目目录结构及介绍

transformer-explainer 项目是一个交互式可视化工具，用于帮助用户学习基于 Transformer 的模型（如 GPT）的工作原理。以下是项目的目录结构及其简要介绍：

transformer-explainer/
├── src/                     # 源代码目录
│   ├── static/              # 静态文件目录
│   ├── .eslintignore        # ESLint 忽略文件
│   ├── .eslintrc.cjs        # ESLint 配置文件
│   ├── .gitignore           # Git 忽略文件
│   ├── .npmrc               # npm 配置文件
│   ├── .prettierignore      # Prettier 忽略文件
│   ├── .prettierrc          # Prettier 配置文件
│   ├── LICENSE              # 项目许可证文件
│   ├── README.md            # 项目说明文件
│   ├── package-lock.json    # npm 包锁文件
│   ├── package.json         # npm 包配置文件
│   ├── postcss.config.js    # PostCSS 配置文件
│   ├── svelte.config.js     # Svelte 配置文件
│   ├── tailwind.config.js   # Tailwind CSS 配置文件
│   ├── tsconfig.json        # TypeScript 配置文件
│   └── vite.config.ts       # Vite 配置文件

2. 项目的启动文件介绍

项目的启动主要通过 package.json 中的脚本实现。以下是一些主要的启动脚本：

• npm run dev: 启动开发服务器，通常用于本地开发。
• npm run build: 构建项目，用于生产环境部署。

在开发模式下，可以运行以下命令启动项目：

cd transformer-explainer
npm install
npm run dev

启动后，在浏览器中访问 http://localhost:5173 即可看到项目的运行效果。

3. 项目的配置文件介绍

以下是项目中一些主要的配置文件及其功能：

• .eslintrc.cjs: ESLint 配置文件，用于定义代码质量标准和规则。
• .prettierrc: Prettier 配置文件，用于统一代码风格。
• postcss.config.js: PostCSS 配置文件，用于处理 CSS。
• svelte.config.js: Svelte 配置文件，用于配置 Svelte 的编译选项。
• tailwind.config.js: Tailwind CSS 配置文件，用于自定义 Tailwind 的设计系统。
• tsconfig.json: TypeScript 配置文件，用于配置 TypeScript 编译选项。
• vite.config.ts: Vite 配置文件，用于配置 Vite 的构建和开发服务器选项。

通过这些配置文件，开发者可以定制化项目以满足特定的开发需求。