Skip to content

Commit 5277a51

Browse files
committed
Create Llama-3.2 WebGPU demo
1 parent 9106d50 commit 5277a51

21 files changed

+6991
-0
lines changed

llama-3.2-webgpu/README.md

+55
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,55 @@
1+
---
2+
title: Llama 3.2 WebGPU
3+
emoji: 🦙
4+
colorFrom: green
5+
colorTo: pink
6+
sdk: static
7+
pinned: false
8+
license: apache-2.0
9+
models:
10+
- onnx-community/Llama-3.2-1B-Instruct-q4f16
11+
short_description: A powerful AI chatbot that runs locally in your browser
12+
thumbnail: https://huggingface.co/spaces/webml-community/llama-3.2-webgpu/resolve/main/banner.png
13+
---
14+
15+
# Llama-3.2 WebGPU
16+
17+
A simple React + Vite application for running [Llama-3.2-1B-Instruct](https://huggingface.co/onnx-community/Llama-3.2-1B-Instruct-q4f16), a powerful small language model, locally in the browser using Transformers.js and WebGPU-acceleration.
18+
19+
## Getting Started
20+
21+
Follow the steps below to set up and run the application.
22+
23+
### 1. Clone the Repository
24+
25+
Clone the examples repository from GitHub:
26+
27+
```sh
28+
git clone https://github.com/huggingface/transformers.js-examples.git
29+
```
30+
31+
### 2. Navigate to the Project Directory
32+
33+
Change your working directory to the `llama-3.2-webgpu` folder:
34+
35+
```sh
36+
cd transformers.js-examples/llama-3.2-webgpu
37+
```
38+
39+
### 3. Install Dependencies
40+
41+
Install the necessary dependencies using npm:
42+
43+
```sh
44+
npm i
45+
```
46+
47+
### 4. Run the Development Server
48+
49+
Start the development server:
50+
51+
```sh
52+
npm run dev
53+
```
54+
55+
The application should now be running locally. Open your browser and go to `http://localhost:5173` to see it in action.

llama-3.2-webgpu/eslint.config.js

+38
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,38 @@
1+
import js from "@eslint/js";
2+
import globals from "globals";
3+
import react from "eslint-plugin-react";
4+
import reactHooks from "eslint-plugin-react-hooks";
5+
import reactRefresh from "eslint-plugin-react-refresh";
6+
7+
export default [
8+
{ ignores: ["dist"] },
9+
{
10+
files: ["**/*.{js,jsx}"],
11+
languageOptions: {
12+
ecmaVersion: 2020,
13+
globals: globals.browser,
14+
parserOptions: {
15+
ecmaVersion: "latest",
16+
ecmaFeatures: { jsx: true },
17+
sourceType: "module",
18+
},
19+
},
20+
settings: { react: { version: "18.3" } },
21+
plugins: {
22+
react,
23+
"react-hooks": reactHooks,
24+
"react-refresh": reactRefresh,
25+
},
26+
rules: {
27+
...js.configs.recommended.rules,
28+
...react.configs.recommended.rules,
29+
...react.configs["jsx-runtime"].rules,
30+
...reactHooks.configs.recommended.rules,
31+
"react/jsx-no-target-blank": "off",
32+
"react-refresh/only-export-components": [
33+
"warn",
34+
{ allowConstantExport: true },
35+
],
36+
},
37+
},
38+
];

llama-3.2-webgpu/index.html

+32
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,32 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/png" href="/logo.png" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Llama-3.2 WebGPU</title>
8+
</head>
9+
10+
<body>
11+
<div id="root"></div>
12+
13+
<script>
14+
window.MathJax = {
15+
tex: {
16+
inlineMath: [
17+
["$", "$"],
18+
["\\(", "\\)"],
19+
],
20+
},
21+
svg: {
22+
fontCache: "global",
23+
},
24+
};
25+
</script>
26+
<script
27+
id="MathJax-script"
28+
src="https://cdn.jsdelivr.net/npm/mathjax@3/es5/tex-mml-chtml.js"
29+
></script>
30+
<script type="module" src="/src/main.jsx"></script>
31+
</body>
32+
</html>

0 commit comments

Comments
 (0)