|
<!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> |
|
|
|
<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> |
|
|
