File size: 1,460 Bytes
90ea418
62c0c16
90ea418
 
 
62c0c16
 
 
 
 
 
90ea418
 
62c0c16
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
---
emoji: "\U0001F440"
sdk: static
pinned: false
license: mit
title: SmolVLM Realtime WebGPU (Vue)
colorFrom: blue
colorTo: green
models:
  - HuggingFaceTB/SmolVLM-Instruct
short_description: 'Yet another WebGPU based SmolVLM, re-implemented in Vue'
---

<h1 align="center">SmolVLM Realtime WebGPU (Vue)</h1>

<p align="center">
  [<a href="https://smolvlm-realtime-webgpu-vue.netlify.app/">Try it</a>]
</p>

> Heavily inspired by [ngxson/smolvlm-realtime-webcam: Real-time webcam demo with SmolVLM and llama.cpp server](https://github.com/ngxson/smolvlm-realtime-webcam?tab=readme-ov-file)

# SmolVLM Realtime WebGPU

## Getting Started

Follow the steps below to set up and run the application.

### 1. Clone the Repository

Clone the examples repository from GitHub:

```sh
git clone https://github.com/proj-airi/webai-examples.git
```

### 2. Navigate to the Project Directory

Change your working directory to the `moonshine-web` folder:

```sh
cd apps/smolvlm-realtime-webgpu
```

### 3. Install Dependencies

Install the necessary dependencies using npm:

```sh
npm i
```

### 4. Run the Development Server

Start the development server:

```sh
npm run dev
```

The application should now be running locally. Open your browser and go to `http://localhost:5175` to see it in action.

## Acknowledgements

Great thanks to what Xenova have done.

> [Source code](https://huggingface.co/spaces/webml-community/smolvlm-realtime-webgpu/blob/main/index.html)