Spaces:
Running
Running
| <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.skypack.dev/@huggingface/hub@0.2.2" | |
| } | |
| } | |
| </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> | |