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> | |
| <script src="./dist/app.js"></script> | |
| </head> | |
| <body> | |
| <div 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">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> | |
| </div> | |
| </body> | |
| </html> | |