File size: 4,498 Bytes
1f05f10 e0d4ec0 1f05f10 b165c8b 1f05f10 3dadf94 1f05f10 3dadf94 1f05f10 |
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 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 |
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<script src="https://cdn.tailwindcss.com"></script>
<!-- polyfill for firefox + import maps -->
<script src="https://unpkg.com/es-module-shims@1.7.0/dist/es-module-shims.js"></script>
<script type="importmap">
{
"imports": {
"@huggingface/hub": "https://cdn.jsdelivr.net/npm/@huggingface/hub@0.3.3/+esm"
}
}
</script>
<script type="module" src="./dist/app.js"></script>
</head>
<body>
<form class="container mx-auto pt-8">
<h1 class="text-3xl font-bold">
<span
class="bg-clip-text text-transparent bg-gradient-to-r from-pink-500 to-violet-500"
>
How to push a ML model to the HF Hub from your browser</span
>
</h1>
<p class="mt-8">
Here is a sample ML model. We pick the TensorFlow.js version of
Mobilenet as an example, but any model would work similarly:
</p>
<div class="mt-6">
<a
class="bg-gray-200 inline-block px-2 py-0 rounded"
href="./mobilenet/model.json"
>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1em"
height="1em"
viewBox="0 0 32 32"
class="inline"
>
<path
fill="currentColor"
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"
></path>
<path fill="currentColor" d="M10 22h12v2H10zm0-6h12v2H10z"></path>
</svg>
<code class="ml-2 text-gray-800">model.json</code>
</a>
<a
class="bg-gray-200 inline-block px-2 py-0 rounded"
href="./mobilenet/group1-shard1of2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1em"
height="1em"
viewBox="0 0 32 32"
class="inline"
>
<path
fill="currentColor"
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"
></path>
<path fill="currentColor" d="M10 22h12v2H10zm0-6h12v2H10z"></path>
</svg>
<code class="ml-2 text-gray-800">group1-shard1of2</code>
</a>
<a
class="bg-gray-200 inline-block px-2 py-0 rounded"
href="./mobilenet/group1-shard2of2"
>
<svg
xmlns="http://www.w3.org/2000/svg"
xmlns:xlink="http://www.w3.org/1999/xlink"
width="1em"
height="1em"
viewBox="0 0 32 32"
class="inline"
>
<path
fill="currentColor"
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"
></path>
<path fill="currentColor" d="M10 22h12v2H10zm0-6h12v2H10z"></path>
</svg>
<code class="ml-2 text-gray-800">group1-shard2of2</code>
</a>
</div>
<p class="mt-8">
BTW, the TFJS demo of this model is
<a
href="https://storage.googleapis.com/tfjs-models/demos/mobilenet/index.html"
class="underline"
target="_blank"
>here</a
>.
</p>
<p class="mt-8">
Now that we have the model files, we need to get a HF user's access
token. You can create a token at
<a
target="_blank"
href="https://huggingface.co/settings/tokens"
class="underline text-blue-500"
>hf.co/settings/tokens</a
>
(needs write access).
</p>
<input
type="text"
id="token"
class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6"
placeholder="token"
required
/>
<p class="mt-8">Finally, pick a repo name for your model:</p>
<input
type="text"
id="repo_name"
class="rounded border-2 border-blue-500 shadow-md px-3 py-2 w-96 mt-6"
placeholder="repo name"
required
/>
<p class="mt-8">
Press Upload to create a repo, and upload your files. It will also
upload a model card for your model (you can then update it on your model
page):
</p>
<button
id="submit"
class="my-8 bg-green-500 rounded py-3 px-5 text-white shadow-md disabled:bg-slate-300"
>
Upload
</button>
<p class="text-gray-400 text-sm">Output logs</p>
<pre id="logs" class="bg-gray-100 rounded p-3 mb-8 text-sm">
Output will be here</pre
>
</form>
</body>
</html>
|