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