Hugging Face's logo

Spaces:
webai-community
/
demos
Running

App Files Community
Yang Gu commited on
Commit
3a049d1
·
1 Parent(s): b24610e

Adjust style

Browse files
Files changed (2) hide show
  1. demos.js +42 -42
  2. gallery.html +12 -4
demos.js CHANGED
@@ -1,46 +1,4 @@
1
  const categoryDemos = [
2
- {
3
- name: `ONNX Runtime`,
4
- description: `ONNX Runtime`,
5
- demos: {
6
- 'ort-phi3': {
7
- name: 'phi3',
8
- description: `phi3 from Microsoft`,
9
- filename: "ort-phi3",
10
- },
11
- 'ort-sam': {
12
- name: 'Segment Anything',
13
- description: `Segment Anything from https://github.com/guschmue/ort-webgpu/tree/master/segment-anything`,
14
- filename: "ort-sam",
15
- },
16
- 'ort-sdturbo': {
17
- name: 'Stable Diffusion Turbo',
18
- description: `Stable Diffusion Turbo from https://github.com/guschmue/ort-webgpu/tree/master/sd-turbo`,
19
- filename: "ort-sdturbo",
20
- },
21
- 'ort-tinyllama': {
22
- name: 'Tiny Llama',
23
- description: `Tiny Llama from https://github.com/guschmue/ort-webgpu/tree/master/chat`,
24
- filename: "ort-tinyllama",
25
- },
26
- 'ort-yolo': {
27
- name: 'Yolo',
28
- description: `Yolo V9 from https://github.com/guschmue/ort-webgpu/tree/master/yolov9`,
29
- filename: "ort-yolo",
30
- },
31
- },
32
- },
33
- {
34
- name: `TFLite`,
35
- description: `TFLite`,
36
- demos: {
37
- 'tflite-gemma': {
38
- name: 'Gemma',
39
- description: `Gemma with TFLite and MediaPipe from https://github.com/googlesamples/mediapipe/tree/main/examples/llm_inference/js, <a href=https://developers.googleblog.com/2024/03/running-large-language-models-on-device-with-mediapipe-andtensorflow-lite.html>more info.</a>`,
40
- filename: "tflite-gemma",
41
- },
42
- },
43
- },
44
  {
45
  name: 'Transformers.js',
46
  description: 'Transformers.js',
@@ -95,6 +53,48 @@ const categoryDemos = [
95
  },
96
  },
97
  },
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
98
  {
99
  name: 'TVM',
100
  description: 'TVM',
 
1
  const categoryDemos = [
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
2
  {
3
  name: 'Transformers.js',
4
  description: 'Transformers.js',
 
53
  },
54
  },
55
  },
56
+ {
57
+ name: `ONNX Runtime`,
58
+ description: `ONNX Runtime`,
59
+ demos: {
60
+ 'ort-phi3': {
61
+ name: 'phi3',
62
+ description: `phi3 from Microsoft`,
63
+ filename: "ort-phi3",
64
+ },
65
+ 'ort-sam': {
66
+ name: 'Segment Anything',
67
+ description: `Segment Anything from https://github.com/guschmue/ort-webgpu/tree/master/segment-anything`,
68
+ filename: "ort-sam",
69
+ },
70
+ 'ort-sdturbo': {
71
+ name: 'Stable Diffusion Turbo',
72
+ description: `Stable Diffusion Turbo from https://github.com/guschmue/ort-webgpu/tree/master/sd-turbo`,
73
+ filename: "ort-sdturbo",
74
+ },
75
+ 'ort-tinyllama': {
76
+ name: 'Tiny Llama',
77
+ description: `Tiny Llama from https://github.com/guschmue/ort-webgpu/tree/master/chat`,
78
+ filename: "ort-tinyllama",
79
+ },
80
+ 'ort-yolo': {
81
+ name: 'Yolo',
82
+ description: `Yolo V9 from https://github.com/guschmue/ort-webgpu/tree/master/yolov9`,
83
+ filename: "ort-yolo",
84
+ },
85
+ },
86
+ },
87
+ {
88
+ name: `TFLite`,
89
+ description: `TFLite`,
90
+ demos: {
91
+ 'tflite-gemma': {
92
+ name: 'Gemma',
93
+ description: `Gemma with TFLite and MediaPipe from https://github.com/googlesamples/mediapipe/tree/main/examples/llm_inference/js, <a href=https://developers.googleblog.com/2024/03/running-large-language-models-on-device-with-mediapipe-andtensorflow-lite.html>more info.</a>`,
94
+ filename: "tflite-gemma",
95
+ },
96
+ },
97
+ },
98
  {
99
  name: 'TVM',
100
  description: 'TVM',
gallery.html CHANGED
@@ -1,6 +1,6 @@
1
  <style>
2
  h1 {
3
- align: center;
4
  }
5
 
6
  ul {
@@ -21,17 +21,24 @@
21
  video {
22
  width: 480px;
23
  height: 320px;
24
- border:2px solid black;
25
  box-shadow: 0px 3px 17px -3px rgba(0,0,0,0.36);
26
  -webkit-box-shadow: 0px 3px 17px -3px rgba(0,0,0,0.36);
27
  -moz-box-shadow: 0px 3px 17px -3px rgba(0,0,0,0.36);
28
  object-fit: cover !important;
29
- border-radius: 20px !important;
 
 
 
 
 
 
 
30
  }
31
  </style>
32
 
33
  <body>
34
- <h1 align="center">WebAI Demos (Gallery Mode)</h1>
35
  <script src="demos.js"></script>
36
  <script>
37
  "use strict";
@@ -45,6 +52,7 @@
45
  const ul = document.createElement('ul');
46
  const h2 = document.createElement('h2');
47
  h2.textContent = name;
 
48
  ul.appendChild(h2);
49
  for (const [key, demoInfo] of Object.entries(demos)) {
50
  const li = document.createElement('li');
 
1
  <style>
2
  h1 {
3
+ text-align: center;
4
  }
5
 
6
  ul {
 
21
  video {
22
  width: 480px;
23
  height: 320px;
24
+ border:2px solid lightgreen;
25
  box-shadow: 0px 3px 17px -3px rgba(0,0,0,0.36);
26
  -webkit-box-shadow: 0px 3px 17px -3px rgba(0,0,0,0.36);
27
  -moz-box-shadow: 0px 3px 17px -3px rgba(0,0,0,0.36);
28
  object-fit: cover !important;
29
+ border-radius: 50px !important;
30
+ }
31
+
32
+ .category {
33
+ background-color:lightgreen;
34
+ font-size: 36px;
35
+ color: black;
36
+ text-align: center;
37
  }
38
  </style>
39
 
40
  <body>
41
+ <h1>WebAI Demos (Gallery Mode)</h1>
42
  <script src="demos.js"></script>
43
  <script>
44
  "use strict";
 
52
  const ul = document.createElement('ul');
53
  const h2 = document.createElement('h2');
54
  h2.textContent = name;
55
+ h2.className = 'category';
56
  ul.appendChild(h2);
57
  for (const [key, demoInfo] of Object.entries(demos)) {
58
  const li = document.createElement('li');