Hugging Face's logo

Spaces:
webai-community
/
demos
Running

App Files Community
Yang Gu commited on
Commit
7be4bb6
·
1 Parent(s): 4535423

Report model download progress

Browse files
Files changed (4) hide show
  1. index.html +3 -2
  2. llm-inference/index.html +2 -0
  3. llm-inference/index.js +0 -55
  4. util.js +76 -0
index.html CHANGED
@@ -1,6 +1,7 @@
1
- <title>WebGPU AI Demos</title>
2
  <body>
3
- <h1 align="center">WebGPU AI Demos</h1>
 
4
  <script>
5
  "use strict";
6
  const demos = [
 
1
+ <title>WebAI Demos</title>
2
  <body>
3
+ <h1 align="center">WebAI Demos</h1>
4
+ <script src="util.js"></script>
5
  <script>
6
  "use strict";
7
  const demos = [
llm-inference/index.html CHANGED
@@ -18,7 +18,9 @@ limitations under the License. -->
18
  <title>LLM Inference Web Demo</title>
19
  </head>
20
  <body>
 
21
  <div style="text-align: center">
 
22
  Input<br />
23
  <textarea id="input" style="height: 100px; width: 80%;"></textarea><br />
24
  <input type="button" id="submit" value="Get Response" disabled /><br />
 
18
  <title>LLM Inference Web Demo</title>
19
  </head>
20
  <body>
21
+ <script src="../util.js"></script>
22
  <div style="text-align: center">
23
+ <text id="model-progress">Downloading model</text><br />
24
  Input<br />
25
  <textarea id="input" style="height: 100px; width: 80%;"></textarea><br />
26
  <input type="button" id="submit" value="Get Response" disabled /><br />
llm-inference/index.js CHANGED
@@ -43,61 +43,6 @@ function displayPartialResults(partialResults, complete) {
43
  }
44
  }
45
 
46
- // Get model via Origin Private File System
47
- async function getModelOPFS(name, url, updateModel) {
48
- const root = await navigator.storage.getDirectory();
49
- let fileHandle;
50
-
51
- async function updateFile() {
52
- const response = await fetch(url);
53
- const buffer = await readResponse(response);
54
- fileHandle = await root.getFileHandle(name, {create: true});
55
- const writable = await fileHandle.createWritable();
56
- await writable.write(buffer);
57
- await writable.close();
58
- return buffer;
59
- }
60
-
61
- if (updateModel) {
62
- return await updateFile();
63
- }
64
-
65
- try {
66
- fileHandle = await root.getFileHandle(name);
67
- const blob = await fileHandle.getFile();
68
- return await blob.arrayBuffer();
69
- } catch (e) {
70
- return await updateFile();
71
- }
72
- }
73
-
74
- async function readResponse(response) {
75
- const contentLength = response.headers.get('Content-Length');
76
- let total = parseInt(contentLength ?? '0');
77
- let buffer = new Uint8Array(total);
78
- let loaded = 0;
79
-
80
- const reader = response.body.getReader();
81
- async function read() {
82
- const {done, value} = await reader.read();
83
- if (done) return;
84
-
85
- let newLoaded = loaded + value.length;
86
- if (newLoaded > total) {
87
- total = newLoaded;
88
- let newBuffer = new Uint8Array(total);
89
- newBuffer.set(buffer);
90
- buffer = newBuffer;
91
- }
92
- buffer.set(value, loaded);
93
- loaded = newLoaded;
94
- return read();
95
- }
96
-
97
- await read();
98
- return buffer;
99
- }
100
-
101
  /**
102
  * Main function to run LLM Inference.
103
  */
 
43
  }
44
  }
45
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
46
  /**
47
  * Main function to run LLM Inference.
48
  */
util.js ADDED
@@ -0,0 +1,76 @@
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
+ function updateGetModelProgress(loaded, total) {
2
+ const progressElement = document.getElementById('model-progress');
3
+ if (total === 0) {
4
+ progressElement.innerHTML = "Model is already in local cache";
5
+ return;
6
+ }
7
+ const percent = ((loaded / total) * 100).toFixed(2);
8
+ let progress;
9
+ if (loaded >= total) {
10
+ progress = "Downloaded";
11
+ } else {
12
+ progress = "Downloading";
13
+ }
14
+ progressElement.innerHTML = `${progress} model: Total ${total} bytes, loaded ${loaded} bytes, ${percent}%`;
15
+ }
16
+
17
+ // Get model via Origin Private File System
18
+ async function getModelOPFS(name, url, updateModel) {
19
+ const root = await navigator.storage.getDirectory();
20
+ let fileHandle;
21
+
22
+ async function updateFile() {
23
+ const response = await fetch(url);
24
+ const buffer = await readResponse(response, updateGetModelProgress);
25
+ fileHandle = await root.getFileHandle(name, {create: true});
26
+ const writable = await fileHandle.createWritable();
27
+ await writable.write(buffer);
28
+ await writable.close();
29
+ return buffer;
30
+ }
31
+
32
+ if (updateModel) {
33
+ return await updateFile();
34
+ }
35
+
36
+ try {
37
+ fileHandle = await root.getFileHandle(name);
38
+ const blob = await fileHandle.getFile();
39
+ updateGetModelProgress(0, 0);
40
+ return await blob.arrayBuffer();
41
+ } catch (e) {
42
+ return await updateFile();
43
+ }
44
+ }
45
+
46
+ async function readResponse(response, progressCallback) {
47
+ const contentLength = response.headers.get('Content-Length');
48
+ let total = parseInt(contentLength ?? '0');
49
+ let buffer = new Uint8Array(total);
50
+ let loaded = 0;
51
+
52
+ const reader = response.body.getReader();
53
+ async function read() {
54
+ const {done, value} = await reader.read();
55
+ if (done) return;
56
+
57
+ let newLoaded = loaded + value.length;
58
+ if (newLoaded > total) {
59
+ total = newLoaded;
60
+ let newBuffer = new Uint8Array(total);
61
+ newBuffer.set(buffer);
62
+ buffer = newBuffer;
63
+ }
64
+ buffer.set(value, loaded);
65
+ loaded = newLoaded;
66
+
67
+ if (progressCallback) {
68
+ progressCallback(loaded, total);
69
+ }
70
+
71
+ return read();
72
+ }
73
+
74
+ await read();
75
+ return buffer;
76
+ }