Skip to content

Commit 272f2c0

Browse files
xenovaxenova
authored
Create Attention Visualization demo (huggingface#26)
* Create attention visualization demo * Use tailwind classes * Add multi-layer support * Add image to left of attention layers * Use easing function instead of threshold * Replace Html text elements with Text elements * Improve colour management * Modify animation settings * Working prototype * Finalize demo * Add fallback to WASM * Use tiger as example image * Cleanup * Re-order Suspense tag * Error handling & UI improvements * Fix mouse events * Fix mouse events for firefox * Update vite config * Formatting * Add banner * Add link to github * Update README * Default mouse active to true
1 parent 38a883d commit 272f2c0

File tree

13 files changed

+7277
-0
lines changed

13 files changed

+7277
-0
lines changed

‎attention-visualization/.gitignore‎

Lines changed: 24 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,24 @@
1+
# Logs
2+
logs
3+
*.log
4+
npm-debug.log*
5+
yarn-debug.log*
6+
yarn-error.log*
7+
pnpm-debug.log*
8+
lerna-debug.log*
9+
10+
node_modules
11+
dist
12+
dist-ssr
13+
*.local
14+
15+
# Editor directories and files
16+
.vscode/*
17+
!.vscode/extensions.json
18+
.idea
19+
.DS_Store
20+
*.suo
21+
*.ntvs*
22+
*.njsproj
23+
*.sln
24+
*.sw?

‎attention-visualization/README.md‎

Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
---
2+
title: Attention Visualization
3+
emoji: 🔥
4+
colorFrom: yellow
5+
colorTo: purple
6+
sdk: static
7+
pinned: false
8+
license: apache-2.0
9+
short_description: Vision Transformer Attention Visualization
10+
thumbnail: https://huggingface.co/spaces/webml-community/attention-visualization/resolve/main/banner.png
11+
header: mini
12+
---
13+
14+
# Attention Visualization
15+
16+
## Getting Started
17+
18+
Follow the steps below to set up and run the application.
19+
20+
### 1. Clone the Repository
21+
22+
Clone the examples repository from GitHub:
23+
24+
```sh
25+
git clone https://github.com/huggingface/transformers.js-examples.git
26+
```
27+
28+
### 2. Navigate to the Project Directory
29+
30+
Change your working directory to the `attention-visualization` folder:
31+
32+
```sh
33+
cd transformers.js-examples/attention-visualization
34+
```
35+
36+
### 3. Install Dependencies
37+
38+
Install the necessary dependencies using npm:
39+
40+
```sh
41+
npm i
42+
```
43+
44+
### 4. Run the Development Server
45+
46+
Start the development server:
47+
48+
```sh
49+
npm run dev
50+
```
51+
52+
The application should now be running locally. Open your browser and go to `http://localhost:5173` to see it in action.

‎attention-visualization/eslint.config.js‎

Lines changed: 38 additions & 0 deletions
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+
];

‎attention-visualization/index.html‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,13 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<link rel="icon" type="image/svg+xml" href="/hf-logo.svg" />
6+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
7+
<title>Attention Visualization</title>
8+
</head>
9+
<body>
10+
<div id="root"></div>
11+
<script type="module" src="/src/main.jsx"></script>
12+
</body>
13+
</html>

0 commit comments

Comments
 (0)