Hugging Face's logo

Spaces:
coyotte508
/
hub-sha256
Running

App Files Community
coyotte508 HF Staff commited on
Commit
6460fdc
·
verified ·
1 Parent(s): 03d6d6d

Update index.html

Browse files
Files changed (1) hide show
  1. index.html +23 -131
index.html CHANGED
@@ -20,139 +20,31 @@
20
  <script type="module" src="./dist/app.js"></script>
21
  </head>
22
  <body>
23
- <form class="container mx-auto pt-8">
24
- <h1 class="text-3xl font-bold">
25
- <span
26
- class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500"
27
- >
28
- How to push a ML model to the HF Hub from your browser</span
29
- >
30
- </h1>
31
-
32
- <p class="mt-8">
33
- Here is a sample ML model. We pick the TensorFlow.js version of
34
- Mobilenet as an example, but any model would work similarly:
35
- </p>
36
- <div class="mt-6">
37
- <a
38
- class="bg-gray-200 inline-block px-2 py-0 rounded"
39
- href="./mobilenet/model.json"
40
- >
41
- <svg
42
- xmlns="http://www.w3.org/2000/svg"
43
- xmlns:xlink="http://www.w3.org/1999/xlink"
44
- width="1em"
45
- height="1em"
46
- viewBox="0 0 32 32"
47
- class="inline"
48
- >
49
- <path
50
- fill="currentColor"
51
- d="m25.7 9.3l-7-7c-.2-.2-.4-.3-.7-.3H8c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V10c0-.3-.1-.5-.3-.7zM18 4.4l5.6 5.6H18V4.4zM24 28H8V4h8v6c0 1.1.9 2 2 2h6v16z"
52
- ></path>
53
- <path fill="currentColor" d="M10 22h12v2H10zm0-6h12v2H10z"></path>
54
- </svg>
55
- <code class="ml-2 text-gray-800">model.json</code>
56
- </a>
57
- <a
58
- class="bg-gray-200 inline-block px-2 py-0 rounded"
59
- href="./mobilenet/group1-shard1of2"
60
- >
61
- <svg
62
- xmlns="http://www.w3.org/2000/svg"
63
- xmlns:xlink="http://www.w3.org/1999/xlink"
64
- width="1em"
65
- height="1em"
66
- viewBox="0 0 32 32"
67
- class="inline"
68
- >
69
- <path
70
- fill="currentColor"
71
- d="m25.7 9.3l-7-7c-.2-.2-.4-.3-.7-.3H8c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V10c0-.3-.1-.5-.3-.7zM18 4.4l5.6 5.6H18V4.4zM24 28H8V4h8v6c0 1.1.9 2 2 2h6v16z"
72
- ></path>
73
- <path fill="currentColor" d="M10 22h12v2H10zm0-6h12v2H10z"></path>
74
- </svg>
75
- <code class="ml-2 text-gray-800">group1-shard1of2</code>
76
- </a>
77
- <a
78
- class="bg-gray-200 inline-block px-2 py-0 rounded"
79
- href="./mobilenet/group1-shard2of2"
80
- >
81
- <svg
82
- xmlns="http://www.w3.org/2000/svg"
83
- xmlns:xlink="http://www.w3.org/1999/xlink"
84
- width="1em"
85
- height="1em"
86
- viewBox="0 0 32 32"
87
- class="inline"
88
- >
89
- <path
90
- fill="currentColor"
91
- d="m25.7 9.3l-7-7c-.2-.2-.4-.3-.7-.3H8c-1.1 0-2 .9-2 2v24c0 1.1.9 2 2 2h16c1.1 0 2-.9 2-2V10c0-.3-.1-.5-.3-.7zM18 4.4l5.6 5.6H18V4.4zM24 28H8V4h8v6c0 1.1.9 2 2 2h6v16z"
92
- ></path>
93
- <path fill="currentColor" d="M10 22h12v2H10zm0-6h12v2H10z"></path>
94
- </svg>
95
- <code class="ml-2 text-gray-800">group1-shard2of2</code>
96
- </a>
97
- </div>
98
-
99
- <p class="mt-8">
100
- BTW, the TFJS demo of this model is
101
- <a
102
- href="https://storage.googleapis.com/tfjs-models/demos/mobilenet/index.html"
103
- class="underline"
104
- target="_blank"
105
- >here</a
106
- >.
107
- </p>
108
-
109
- <p class="mt-8">
110
- Now that we have the model files, we need to get a HF user's access
111
- token. You can create a token at
112
- <a
113
- target="_blank"
114
- href="https://huggingface.co/settings/tokens"
115
- class="underline text-blue-500"
116
- >hf.co/settings/tokens</a
117
- >
118
- (needs write access).
119
- </p>
120
-
121
- <input
122
- type="text"
123
- id="token"
124
- class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6"
125
- placeholder="token"
126
- required
127
- />
128
-
129
- <p class="mt-8">Finally, pick a repo name for your model:</p>
130
-
131
- <input
132
- type="text"
133
- id="repo_name"
134
- class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6"
135
- placeholder="repo name"
136
- required
137
- />
138
-
139
- <p class="mt-8">
140
- Press Upload to create a repo, and upload your files. It will also
141
- upload a model card for your model (you can then update it on your model
142
- page):
143
- </p>
144
-
145
- <button
146
- id="submit"
147
- class="my-8 bg-green-500 rounded py-3 px-5 text-white shadow-md disabled:bg-slate-300"
148
  >
149
- Upload
150
- </button>
151
-
152
- <p class="text-gray-400 text-sm">Output logs</p>
153
- <pre id="logs" class="bg-gray-100 rounded p-3 mb-8 text-sm">
 
 
 
 
 
 
 
 
154
  Output will be here</pre
155
  >
156
- </form>
157
  </body>
158
  </html>
 
20
  <script type="module" src="./dist/app.js"></script>
21
  </head>
22
  <body>
23
+ <div class="container mx-auto pt-8 flex flex-col gap-4">
24
+ <p class="text-gray-400 text-sm">https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/dist/browser/index.mjs</p>
25
+ <pre id="hub-unbundled" class="bg-gray-100 rounded p-3 mb-8 text-sm">
26
+ Output will be here</pre
27
+ >
28
+ <p class="text-gray-400 text-sm">https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/dist/browser/index.mjs</p>
29
+
30
+ <pre id="hub-unbundled-regular" class="bg-gray-100 rounded p-3 mb-8 text-sm">
31
+ Output will be here</pre
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
32
  >
33
+ <p class="text-gray-400 text-sm">https://esm.sh/@huggingface/[email protected]</p>
34
+
35
+ <pre id="hub-regular" class="bg-gray-100 rounded p-3 mb-8 text-sm">
36
+ Output will be here</pre
37
+ >
38
+ <p class="text-gray-400 text-sm">https://esm.sh/@huggingface/[email protected]</p>
39
+
40
+ <pre id="hub-esm" class="bg-gray-100 rounded p-3 mb-8 text-sm">
41
+ Output will be here</pre
42
+
43
+ <p class="text-gray-400 text-sm">https://cdn.jsdelivr.net/npm/@huggingface/[email protected]/+esm</p>
44
+ >
45
+ <pre id="hub" class="bg-gray-100 rounded p-3 mb-8 text-sm">
46
  Output will be here</pre
47
  >
48
+ </div>
49
  </body>
50
  </html>