Embed your Space in another website

<!doctype html> <html class=""> <head> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no" /> <meta name="description" content="We’re on a journey to advance and democratize artificial intelligence through open source and open science." /> <meta property="fb:app_id" content="1321688464574422" /> <meta name="twitter:card" content="summary_large_image" /> <meta name="twitter:site" content="@huggingface" /> <meta name="twitter:image" content="https://huggingface.co/front/thumbnails/docs/hub.png" /> <meta property="og:title" content="Embed your Space in another website" /> <meta property="og:type" content="website" /> <meta property="og:url" content="https://huggingface.co/docs/hub/spaces-embed" /> <meta property="og:image" content="https://huggingface.co/front/thumbnails/docs/hub.png" /> <link rel="stylesheet" href="/front/build/kube-a5b3b1c/style.css" /> <link rel="preconnect" href="https://fonts.gstatic.com" /> <link href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:ital,wght@0,200;0,300;0,400;0,600;0,700;0,900;1,200;1,300;1,400;1,600;1,700;1,900&display=swap" rel="stylesheet" /> <link href="https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;600;700&display=swap" rel="stylesheet" /> <link rel="preload" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/katex.min.css" as="style" onload="this.onload=null;this.rel='stylesheet'" /> <noscript> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/KaTeX/0.12.0/katex.min.css" /> </noscript> <link rel="canonical" href="https://huggingface.co/docs/hub/spaces-embed"> <link rel="alternate" hreflang="en" href="https://huggingface.co/docs/hub/en/spaces-embed"> <link rel="alternate" hreflang="x-default" href="https://huggingface.co/docs/hub/spaces-embed"> <title>Embed your Space in another website</title> <script defer data-domain="huggingface.co" event-loggedIn="false" src="/js/script.pageview-props.js" ></script> <script> window.plausible = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments); }; </script> <script> window.hubConfig = {"features":{"signupDisabled":false},"sshGitUrl":"git@hf.co","moonHttpUrl":"https:\/\/huggingface.co","captchaApiKey":"bd5f2066-93dc-4bdd-a64b-a24646ca3859","captchaDisabledOnSignup":true,"datasetViewerPublicUrl":"https:\/\/datasets-server.huggingface.co","stripePublicKey":"pk_live_x2tdjFXBCvXo2FFmMybezpeM00J6gPCAAc","environment":"production","userAgent":"HuggingFace (production)","spacesIframeDomain":"hf.space","spacesApiUrl":"https:\/\/api.hf.space","docSearchKey":"ece5e02e57300e17d152c08056145326e90c4bff3dd07d7d1ae40cf1c8d39cb6","logoDev":{"apiUrl":"https:\/\/img.logo.dev\/","apiKey":"pk_UHS2HZOeRnaSOdDp7jbd5w"}}; </script> <script type="text/javascript" src="https://de5282c3ca0c.edge.sdk.awswaf.com/de5282c3ca0c/526cf06acb0d/challenge.js" defer></script> </head> <body class="flex flex-col min-h-dvh bg-white dark:bg-gray-950 text-black DocBuilderPage"> <div class="flex min-h-dvh flex-col"> <div class="SVELTE_HYDRATER contents" data-target="MainHeader" data-props="{"classNames":"","isWide":true,"isZh":false}"><header class="border-b border-gray-100 "><div class="w-full px-4 flex h-16 items-center"><div class="flex flex-1 items-center"><a class="mr-5 flex flex-none items-center lg:mr-6" href="/"><img alt="Hugging Face's logo" class="w-7 md:mr-2" src="/front/assets/huggingface_logo-noborder.svg"> <span class="hidden whitespace-nowrap text-lg font-bold md:block">Hugging Face</span></a> <div class="relative flex-1 lg:max-w-sm mr-2 sm:mr-4 md:mr-3 xl:mr-6"><input autocomplete="off" class="w-full dark:bg-gray-950 pl-8 form-input-alt h-9 pr-3 focus:shadow-xl " name="" placeholder="Search models, datasets, users..." spellcheck="false" type="text" value=""> <svg class="absolute left-2.5 text-gray-400 top-1/2 transform -translate-y-1/2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z" fill="currentColor"></path></svg> </div> <div class="flex flex-none items-center justify-center p-0.5 place-self-stretch lg:hidden"><button class="relative z-40 flex h-6 w-8 items-center justify-center" type="button"><svg width="1em" height="1em" viewBox="0 0 10 10" class="text-xl" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" preserveAspectRatio="xMidYMid meet" fill="currentColor"><path fill-rule="evenodd" clip-rule="evenodd" d="M1.65039 2.9999C1.65039 2.8066 1.80709 2.6499 2.00039 2.6499H8.00039C8.19369 2.6499 8.35039 2.8066 8.35039 2.9999C8.35039 3.1932 8.19369 3.3499 8.00039 3.3499H2.00039C1.80709 3.3499 1.65039 3.1932 1.65039 2.9999ZM1.65039 4.9999C1.65039 4.8066 1.80709 4.6499 2.00039 4.6499H8.00039C8.19369 4.6499 8.35039 4.8066 8.35039 4.9999C8.35039 5.1932 8.19369 5.3499 8.00039 5.3499H2.00039C1.80709 5.3499 1.65039 5.1932 1.65039 4.9999ZM2.00039 6.6499C1.80709 6.6499 1.65039 6.8066 1.65039 6.9999C1.65039 7.1932 1.80709 7.3499 2.00039 7.3499H8.00039C8.19369 7.3499 8.35039 7.1932 8.35039 6.9999C8.35039 6.8066 8.19369 6.6499 8.00039 6.6499H2.00039Z"></path></svg> </button> </div></div> <nav aria-label="Main" class="ml-auto hidden lg:block"><ul class="flex items-center space-x-1.5 2xl:space-x-2"><li class="hover:text-indigo-700"><a class="group flex items-center px-2 py-0.5 dark:hover:text-gray-400" href="/models"><svg class="mr-1.5 text-gray-400 group-hover:text-indigo-500" style="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path class="uim-quaternary" d="M20.23 7.24L12 12L3.77 7.24a1.98 1.98 0 0 1 .7-.71L11 2.76c.62-.35 1.38-.35 2 0l6.53 3.77c.29.173.531.418.7.71z" opacity=".25" fill="currentColor"></path><path class="uim-tertiary" d="M12 12v9.5a2.09 2.09 0 0 1-.91-.21L4.5 17.48a2.003 2.003 0 0 1-1-1.73v-7.5a2.06 2.06 0 0 1 .27-1.01L12 12z" opacity=".5" fill="currentColor"></path><path class="uim-primary" d="M20.5 8.25v7.5a2.003 2.003 0 0 1-1 1.73l-6.62 3.82c-.275.13-.576.198-.88.2V12l8.23-4.76c.175.308.268.656.27 1.01z" fill="currentColor"></path></svg> Models</a> </li><li class="hover:text-red-700"><a class="group flex items-center px-2 py-0.5 dark:hover:text-gray-400" href="/datasets"><svg class="mr-1.5 text-gray-400 group-hover:text-red-500" style="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 25 25"><ellipse cx="12.5" cy="5" fill="currentColor" fill-opacity="0.25" rx="7.5" ry="2"></ellipse><path d="M12.5 15C16.6421 15 20 14.1046 20 13V20C20 21.1046 16.6421 22 12.5 22C8.35786 22 5 21.1046 5 20V13C5 14.1046 8.35786 15 12.5 15Z" fill="currentColor" opacity="0.5"></path><path d="M12.5 7C16.6421 7 20 6.10457 20 5V11.5C20 12.6046 16.6421 13.5 12.5 13.5C8.35786 13.5 5 12.6046 5 11.5V5C5 6.10457 8.35786 7 12.5 7Z" fill="currentColor" opacity="0.5"></path><path d="M5.23628 12C5.08204 12.1598 5 12.8273 5 13C5 14.1046 8.35786 15 12.5 15C16.6421 15 20 14.1046 20 13C20 12.8273 19.918 12.1598 19.7637 12C18.9311 12.8626 15.9947 13.5 12.5 13.5C9.0053 13.5 6.06886 12.8626 5.23628 12Z" fill="currentColor"></path></svg> Datasets</a> </li><li class="hover:text-blue-700"><a class="group flex items-center px-2 py-0.5 dark:hover:text-gray-400" href="/spaces"><svg class="mr-1.5 text-gray-400 group-hover:text-blue-500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" viewBox="0 0 25 25"><path opacity=".5" d="M6.016 14.674v4.31h4.31v-4.31h-4.31ZM14.674 14.674v4.31h4.31v-4.31h-4.31ZM6.016 6.016v4.31h4.31v-4.31h-4.31Z" fill="currentColor"></path><path opacity=".75" fill-rule="evenodd" clip-rule="evenodd" d="M3 4.914C3 3.857 3.857 3 4.914 3h6.514c.884 0 1.628.6 1.848 1.414a5.171 5.171 0 0 1 7.31 7.31c.815.22 1.414.964 1.414 1.848v6.514A1.914 1.914 0 0 1 20.086 22H4.914A1.914 1.914 0 0 1 3 20.086V4.914Zm3.016 1.102v4.31h4.31v-4.31h-4.31Zm0 12.968v-4.31h4.31v4.31h-4.31Zm8.658 0v-4.31h4.31v4.31h-4.31Zm0-10.813a2.155 2.155 0 1 1 4.31 0 2.155 2.155 0 0 1-4.31 0Z" fill="currentColor"></path><path opacity=".25" d="M16.829 6.016a2.155 2.155 0 1 0 0 4.31 2.155 2.155 0 0 0 0-4.31Z" fill="currentColor"></path></svg> Spaces</a> </li><li class="hover:text-yellow-700 max-xl:hidden"><a class="group flex items-center px-2 py-0.5 dark:hover:text-gray-400" href="/posts"><svg class="mr-1.5 text-gray-400 group-hover:text-yellow-500 !text-yellow-500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" viewBox="0 0 12 12" preserveAspectRatio="xMidYMid meet"><path fill="currentColor" fill-rule="evenodd" d="M3.73 2.4A4.25 4.25 0 1 1 6 10.26H2.17l-.13-.02a.43.43 0 0 1-.3-.43l.01-.06a.43.43 0 0 1 .12-.22l.84-.84A4.26 4.26 0 0 1 3.73 2.4Z" clip-rule="evenodd"></path></svg> Posts</a> </li><li class="hover:text-yellow-700"><a class="group flex items-center px-2 py-0.5 dark:hover:text-gray-400" href="/docs"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" class="mr-1.5 text-gray-400 group-hover:text-yellow-500" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path opacity="0.5" d="M20.9022 5.10334L10.8012 10.8791L7.76318 9.11193C8.07741 8.56791 8.5256 8.11332 9.06512 7.7914L15.9336 3.73907C17.0868 3.08811 18.5002 3.26422 19.6534 3.91519L19.3859 3.73911C19.9253 4.06087 20.5879 4.56025 20.9022 5.10334Z" fill="currentColor"></path><path d="M10.7999 10.8792V28.5483C10.2136 28.5475 9.63494 28.4139 9.10745 28.1578C8.5429 27.8312 8.074 27.3621 7.74761 26.7975C7.42122 26.2327 7.24878 25.5923 7.24756 24.9402V10.9908C7.25062 10.3319 7.42358 9.68487 7.74973 9.1123L10.7999 10.8792Z" fill="currentColor" fill-opacity="0.75"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M21.3368 10.8499V6.918C21.3331 6.25959 21.16 5.61234 20.8346 5.03949L10.7971 10.8727L10.8046 10.874L21.3368 10.8499Z" fill="currentColor"></path><path opacity="0.5" d="M21.7937 10.8488L10.7825 10.8741V28.5486L21.7937 28.5234C23.3344 28.5234 24.5835 27.2743 24.5835 25.7335V13.6387C24.5835 12.0979 23.4365 11.1233 21.7937 10.8488Z" fill="currentColor"></path></svg> Docs</a> </li><li class="hover:text-green-700"><a class="group flex items-center px-2 py-0.5 dark:hover:text-gray-400" href="/enterprise"><svg class="mr-1.5 text-gray-400 group-hover:text-green-500" xmlns="http://www.w3.org/2000/svg" fill="none" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 33 27"><path fill="currentColor" fill-rule="evenodd" d="M13.5.7a8.7 8.7 0 0 0-7.7 5.7L1 20.6c-1 3.1.9 5.7 4.1 5.7h15c3.3 0 6.8-2.6 7.8-5.7l4.6-14.2c1-3.1-.8-5.7-4-5.7h-15Zm1.1 5.7L9.8 20.3h9.8l1-3.1h-5.8l.8-2.5h4.8l1.1-3h-4.8l.8-2.3H23l1-3h-9.5Z" clip-rule="evenodd"></path></svg> Enterprise</a> </li> <li><a class="group flex items-center px-2 py-0.5 hover:text-gray-500 dark:hover:text-gray-400" href="/pricing">Pricing </a></li> <li><div class="relative group"> <button class="px-2 py-0.5 hover:text-gray-500 dark:hover:text-gray-600 flex items-center " type="button"> <svg class=" text-gray-500 w-5 group-hover:text-gray-400 dark:text-gray-300 dark:group-hover:text-gray-400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" viewBox="0 0 32 18" preserveAspectRatio="xMidYMid meet"><path fill-rule="evenodd" clip-rule="evenodd" d="M14.4504 3.30221C14.4504 2.836 14.8284 2.45807 15.2946 2.45807H28.4933C28.9595 2.45807 29.3374 2.836 29.3374 3.30221C29.3374 3.76842 28.9595 4.14635 28.4933 4.14635H15.2946C14.8284 4.14635 14.4504 3.76842 14.4504 3.30221Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M14.4504 9.00002C14.4504 8.53382 14.8284 8.15588 15.2946 8.15588H28.4933C28.9595 8.15588 29.3374 8.53382 29.3374 9.00002C29.3374 9.46623 28.9595 9.84417 28.4933 9.84417H15.2946C14.8284 9.84417 14.4504 9.46623 14.4504 9.00002Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M14.4504 14.6978C14.4504 14.2316 14.8284 13.8537 15.2946 13.8537H28.4933C28.9595 13.8537 29.3374 14.2316 29.3374 14.6978C29.3374 15.164 28.9595 15.542 28.4933 15.542H15.2946C14.8284 15.542 14.4504 15.164 14.4504 14.6978Z" fill="currentColor"></path><path fill-rule="evenodd" clip-rule="evenodd" d="M1.94549 6.87377C2.27514 6.54411 2.80962 6.54411 3.13928 6.87377L6.23458 9.96907L9.32988 6.87377C9.65954 6.54411 10.194 6.54411 10.5237 6.87377C10.8533 7.20343 10.8533 7.73791 10.5237 8.06756L6.23458 12.3567L1.94549 8.06756C1.61583 7.73791 1.61583 7.20343 1.94549 6.87377Z" fill="currentColor"></path></svg> </button> </div></li> <li><hr class="h-5 w-0.5 border-none bg-gray-100 dark:bg-gray-800"></li> <li><a class="block cursor-pointer whitespace-nowrap px-2 py-0.5 hover:text-gray-500 dark:hover:text-gray-400" href="/login">Log In </a></li> <li><a class="whitespace-nowrap rounded-full border border-transparent bg-gray-900 px-3 py-1 leading-none text-white hover:border-black hover:bg-white hover:text-black" href="/join">Sign Up </a></li></ul></nav></div></header></div> <div class="SVELTE_HYDRATER contents" data-target="SSOBanner" data-props="{}"></div> <main class="flex flex-1 flex-col"><div class="relative lg:flex" id="hf-doc-container"><div class="sticky top-0 z-20 self-start"><div class="SVELTE_HYDRATER contents" data-target="SideMenu" data-props="{"chapters":[{"title":"🤗 Hugging Face Hub","id":"index","url":"/docs/hub/index"},{"title":"Repositories","isExpanded":true,"id":"repositories","url":"/docs/hub/repositories","sections":[{"title":"Getting Started with Repositories","id":"repositories-getting-started","url":"/docs/hub/repositories-getting-started"},{"title":"Repository Settings","id":"repositories-settings","url":"/docs/hub/repositories-settings"},{"title":"Pull Requests & Discussions","id":"repositories-pull-requests-discussions","url":"/docs/hub/repositories-pull-requests-discussions"},{"title":"Notifications","id":"notifications","url":"/docs/hub/notifications"},{"title":"Collections","id":"collections","url":"/docs/hub/collections"},{"title":"Webhooks","isExpanded":false,"id":"webhooks","url":"/docs/hub/webhooks","sections":[{"title":"How-to: Automatic fine-tuning with Auto-Train","id":"webhooks-guide-auto-retrain","url":"/docs/hub/webhooks-guide-auto-retrain"},{"title":"How-to: Build a Discussion bot based on BLOOM","id":"webhooks-guide-discussion-bot","url":"/docs/hub/webhooks-guide-discussion-bot"},{"title":"How-to: Create automatic metadata quality reports","id":"webhooks-guide-metadata-review","url":"/docs/hub/webhooks-guide-metadata-review"}]},{"title":"Notebooks","id":"notebooks","url":"/docs/hub/notebooks"},{"title":"Repository size recommendations","id":"repositories-recommendations","url":"/docs/hub/repositories-recommendations"},{"title":"Next Steps","id":"repositories-next-steps","url":"/docs/hub/repositories-next-steps"},{"title":"Licenses","id":"repositories-licenses","url":"/docs/hub/repositories-licenses"}]},{"title":"Models","isExpanded":true,"id":"models","url":"/docs/hub/models","sections":[{"title":"The Model Hub","id":"models-the-hub","url":"/docs/hub/models-the-hub"},{"title":"Model Cards","isExpanded":false,"id":"model-cards","url":"/docs/hub/model-cards","sections":[{"title":"Annotated Model Card","id":"model-card-annotated","url":"/docs/hub/model-card-annotated"},{"title":"Carbon Emissions","id":"model-cards-co2","url":"/docs/hub/model-cards-co2"},{"title":"Model Card Guidebook","id":"model-card-guidebook","url":"/docs/hub/model-card-guidebook"},{"title":"Landscape Analysis","id":"model-card-landscape-analysis","url":"/docs/hub/model-card-landscape-analysis"},{"title":"Card Components","id":"model-cards-components","url":"/docs/hub/model-cards-components"}]},{"title":"Gated Models","id":"models-gated","url":"/docs/hub/models-gated"},{"title":"Uploading Models","id":"models-uploading","url":"/docs/hub/models-uploading"},{"title":"Downloading Models","id":"models-downloading","url":"/docs/hub/models-downloading"},{"title":"Integrated Libraries","isExpanded":false,"id":"models-libraries","url":"/docs/hub/models-libraries","sections":[{"title":"Adapters","id":"adapters","url":"/docs/hub/adapters"},{"title":"AllenNLP","id":"allennlp","url":"/docs/hub/allennlp"},{"title":"BERTopic","id":"bertopic","url":"/docs/hub/bertopic"},{"title":"Asteroid","id":"asteroid","url":"/docs/hub/asteroid"},{"title":"Diffusers","id":"diffusers","url":"/docs/hub/diffusers"},{"title":"ESPnet","id":"espnet","url":"/docs/hub/espnet"},{"title":"fastai","id":"fastai","url":"/docs/hub/fastai"},{"title":"Flair","id":"flair","url":"/docs/hub/flair"},{"title":"Keras","id":"keras","url":"/docs/hub/keras"},{"title":"TF-Keras (legacy)","id":"tf-keras","url":"/docs/hub/tf-keras"},{"title":"ML-Agents","id":"ml-agents","url":"/docs/hub/ml-agents"},{"title":"mlx-image","id":"mlx-image","url":"/docs/hub/mlx-image"},{"title":"MLX","id":"mlx","url":"/docs/hub/mlx"},{"title":"OpenCLIP","id":"open_clip","url":"/docs/hub/open_clip"},{"title":"PaddleNLP","id":"paddlenlp","url":"/docs/hub/paddlenlp"},{"title":"peft","id":"peft","url":"/docs/hub/peft"},{"title":"RL-Baselines3-Zoo","id":"rl-baselines3-zoo","url":"/docs/hub/rl-baselines3-zoo"},{"title":"Sample Factory","id":"sample-factory","url":"/docs/hub/sample-factory"},{"title":"Sentence Transformers","id":"sentence-transformers","url":"/docs/hub/sentence-transformers"},{"title":"SetFit","id":"setfit","url":"/docs/hub/setfit"},{"title":"spaCy","id":"spacy","url":"/docs/hub/spacy"},{"title":"SpanMarker","id":"span_marker","url":"/docs/hub/span_marker"},{"title":"SpeechBrain","id":"speechbrain","url":"/docs/hub/speechbrain"},{"title":"Stable-Baselines3","id":"stable-baselines3","url":"/docs/hub/stable-baselines3"},{"title":"Stanza","id":"stanza","url":"/docs/hub/stanza"},{"title":"TensorBoard","id":"tensorboard","url":"/docs/hub/tensorboard"},{"title":"timm","id":"timm","url":"/docs/hub/timm"},{"title":"Transformers","id":"transformers","url":"/docs/hub/transformers"},{"title":"Transformers.js","id":"transformers-js","url":"/docs/hub/transformers-js"},{"title":"Unity Sentis","id":"unity-sentis","url":"/docs/hub/unity-sentis"}]},{"title":"Model Widgets","isExpanded":false,"id":"models-widgets","url":"/docs/hub/models-widgets","sections":[{"title":"Widget Examples","id":"models-widgets-examples","url":"/docs/hub/models-widgets-examples"}]},{"title":"Inference API docs","id":"models-inference","url":"/docs/hub/models-inference"},{"title":"Models Download Stats","id":"models-download-stats","url":"/docs/hub/models-download-stats"},{"title":"Frequently Asked Questions","id":"models-faq","url":"/docs/hub/models-faq"},{"title":"Advanced Topics","isExpanded":false,"id":"models-advanced","url":"/docs/hub/models-advanced","sections":[{"title":"Integrate a library with the Hub","id":"models-adding-libraries","url":"/docs/hub/models-adding-libraries"},{"title":"Tasks","id":"models-tasks","url":"/docs/hub/models-tasks"},{"title":"GGUF","isExpanded":false,"id":"gguf","url":"/docs/hub/gguf","sections":[{"title":"GGUF usage with llama.cpp","id":"gguf-llamacpp","url":"/docs/hub/gguf-llamacpp"},{"title":"GGUF usage with GPT4All","id":"gguf-gpt4all","url":"/docs/hub/gguf-gpt4all"},{"title":"GGUF usage with Ollama","id":"ollama","url":"/docs/hub/ollama"}]}]}]},{"title":"Datasets","isExpanded":true,"id":"datasets","url":"/docs/hub/datasets","sections":[{"title":"Datasets Overview","id":"datasets-overview","url":"/docs/hub/datasets-overview"},{"title":"Dataset Cards","id":"datasets-cards","url":"/docs/hub/datasets-cards"},{"title":"Gated Datasets","id":"datasets-gated","url":"/docs/hub/datasets-gated"},{"title":"Uploading Datasets","id":"datasets-adding","url":"/docs/hub/datasets-adding"},{"title":"Downloading Datasets","id":"datasets-downloading","url":"/docs/hub/datasets-downloading"},{"title":"Integrated Libraries","isExpanded":false,"id":"datasets-libraries","url":"/docs/hub/datasets-libraries","sections":[{"title":"Argilla","id":"datasets-argilla","url":"/docs/hub/datasets-argilla"},{"title":"Dask","id":"datasets-dask","url":"/docs/hub/datasets-dask"},{"title":"Datasets","id":"datasets-usage","url":"/docs/hub/datasets-usage"},{"title":"Distilabel","id":"datasets-distilabel","url":"/docs/hub/datasets-distilabel"},{"title":"DuckDB","isExpanded":false,"id":"datasets-duckdb","url":"/docs/hub/datasets-duckdb","sections":[{"title":"Authentication for private and gated datasets","id":"datasets-duckdb-auth","url":"/docs/hub/datasets-duckdb-auth"},{"title":"Query datasets","id":"datasets-duckdb-select","url":"/docs/hub/datasets-duckdb-select"},{"title":"Perform SQL operations","id":"datasets-duckdb-sql","url":"/docs/hub/datasets-duckdb-sql"},{"title":"Combine datasets and export","id":"datasets-duckdb-combine-and-export","url":"/docs/hub/datasets-duckdb-combine-and-export"},{"title":"Perform vector similarity search","id":"datasets-duckdb-vector-similarity-search","url":"/docs/hub/datasets-duckdb-vector-similarity-search"}]},{"title":"FiftyOne","id":"datasets-fiftyone","url":"/docs/hub/datasets-fiftyone"},{"title":"Pandas","id":"datasets-pandas","url":"/docs/hub/datasets-pandas"},{"title":"Polars","isExpanded":false,"id":"datasets-polars","url":"/docs/hub/datasets-polars","sections":[{"title":"Authentication for private and gated datasets","id":"datasets-polars-auth","url":"/docs/hub/datasets-polars-auth"},{"title":"Supported file formats","id":"datasets-polars-file-formats","url":"/docs/hub/datasets-polars-file-formats"},{"title":"Performing data transformations","id":"datasets-polars-operations","url":"/docs/hub/datasets-polars-operations"},{"title":"Performance optimizations","id":"datasets-polars-optimizations","url":"/docs/hub/datasets-polars-optimizations"}]},{"title":"Spark","id":"datasets-spark","url":"/docs/hub/datasets-spark"},{"title":"WebDataset","id":"datasets-webdataset","url":"/docs/hub/datasets-webdataset"}]},{"title":"Dataset Viewer","isExpanded":false,"id":"datasets-viewer","url":"/docs/hub/datasets-viewer","sections":[{"title":"Configure the Dataset Viewer","id":"datasets-viewer-configure","url":"/docs/hub/datasets-viewer-configure"},{"title":"Embed the Dataset Viewer in a webpage","id":"datasets-viewer-embed","url":"/docs/hub/datasets-viewer-embed"},{"title":"SQL Console","id":"datasets-viewer-sql-console","url":"/docs/hub/datasets-viewer-sql-console"}]},{"title":"Datasets Download Stats","id":"datasets-download-stats","url":"/docs/hub/datasets-download-stats"},{"title":"Data files Configuration","isExpanded":false,"id":"datasets-data-files-configuration","url":"/docs/hub/datasets-data-files-configuration","sections":[{"title":"File names and splits","id":"datasets-file-names-and-splits","url":"/docs/hub/datasets-file-names-and-splits"},{"title":"Manual Configuration","id":"datasets-manual-configuration","url":"/docs/hub/datasets-manual-configuration"},{"title":"Audio Dataset","id":"datasets-audio","url":"/docs/hub/datasets-audio"},{"title":"Image Dataset","id":"datasets-image","url":"/docs/hub/datasets-image"}]}]},{"title":"Spaces","isExpanded":true,"id":"spaces","url":"/docs/hub/spaces","sections":[{"title":"Spaces Overview","isExpanded":false,"id":"spaces-overview","url":"/docs/hub/spaces-overview","sections":[{"title":"Handling Spaces Dependencies","id":"spaces-dependencies","url":"/docs/hub/spaces-dependencies"},{"title":"Spaces Settings","id":"spaces-settings","url":"/docs/hub/spaces-settings"},{"title":"Using Spaces for Organization Cards","id":"spaces-organization-cards","url":"/docs/hub/spaces-organization-cards"}]},{"title":"Spaces GPU Upgrades","id":"spaces-gpus","url":"/docs/hub/spaces-gpus"},{"title":"Spaces ZeroGPU","id":"spaces-zerogpu","url":"/docs/hub/spaces-zerogpu"},{"title":"Spaces Dev Mode","id":"spaces-dev-mode","url":"/docs/hub/spaces-dev-mode"},{"title":"Spaces Persistent Storage","id":"spaces-storage","url":"/docs/hub/spaces-storage"},{"title":"Gradio Spaces","id":"spaces-sdks-gradio","url":"/docs/hub/spaces-sdks-gradio"},{"title":"Streamlit Spaces","id":"spaces-sdks-streamlit","url":"/docs/hub/spaces-sdks-streamlit"},{"title":"Static HTML Spaces","id":"spaces-sdks-static","url":"/docs/hub/spaces-sdks-static"},{"title":"Docker Spaces","isExpanded":false,"id":"spaces-sdks-docker","url":"/docs/hub/spaces-sdks-docker","sections":[{"title":"Your first Docker Spaces","id":"spaces-sdks-docker-first-demo","url":"/docs/hub/spaces-sdks-docker-first-demo"},{"title":"Example Docker Spaces","id":"spaces-sdks-docker-examples","url":"/docs/hub/spaces-sdks-docker-examples"},{"title":"JupyterLab on Spaces","id":"spaces-sdks-docker-jupyter","url":"/docs/hub/spaces-sdks-docker-jupyter"},{"title":"Argilla on Spaces","id":"spaces-sdks-docker-argilla","url":"/docs/hub/spaces-sdks-docker-argilla"},{"title":"Livebook on Spaces","id":"spaces-sdks-docker-livebook","url":"/docs/hub/spaces-sdks-docker-livebook"},{"title":"Label Studio on Spaces","id":"spaces-sdks-docker-label-studio","url":"/docs/hub/spaces-sdks-docker-label-studio"},{"title":"Aim on Spaces","id":"spaces-sdks-docker-aim","url":"/docs/hub/spaces-sdks-docker-aim"},{"title":"Shiny on Spaces","id":"spaces-sdks-docker-shiny","url":"/docs/hub/spaces-sdks-docker-shiny"},{"title":"ZenML on Spaces","id":"spaces-sdks-docker-zenml","url":"/docs/hub/spaces-sdks-docker-zenml"},{"title":"ChatUI on Spaces","id":"spaces-sdks-docker-chatui","url":"/docs/hub/spaces-sdks-docker-chatui"},{"title":"Panel on Spaces","id":"spaces-sdks-docker-panel","url":"/docs/hub/spaces-sdks-docker-panel"},{"title":"Tabby on Spaces","id":"spaces-sdks-docker-tabby","url":"/docs/hub/spaces-sdks-docker-tabby"},{"title":"Giskard on Spaces","id":"spaces-sdks-docker-giskard","url":"/docs/hub/spaces-sdks-docker-giskard"},{"title":"Evidence on Spaces","id":"spaces-sdks-docker-evidence","url":"/docs/hub/spaces-sdks-docker-evidence"},{"title":"marimo on Spaces","id":"spaces-sdks-docker-marimo","url":"/docs/hub/spaces-sdks-docker-marimo"}]},{"title":"Embed your Space","isExpanded":true,"id":"spaces-embed","url":"/docs/hub/spaces-embed"},{"title":"Run Spaces with Docker","id":"spaces-run-with-docker","url":"/docs/hub/spaces-run-with-docker"},{"title":"Spaces Configuration Reference","id":"spaces-config-reference","url":"/docs/hub/spaces-config-reference"},{"title":"Sign-In with HF button","id":"spaces-oauth","url":"/docs/hub/spaces-oauth"},{"title":"Spaces Changelog","id":"spaces-changelog","url":"/docs/hub/spaces-changelog"},{"title":"Advanced Topics","isExpanded":false,"id":"spaces-advanced","url":"/docs/hub/spaces-advanced","sections":[{"title":"Using OpenCV in Spaces","id":"spaces-using-opencv","url":"/docs/hub/spaces-using-opencv"},{"title":"More ways to create Spaces","id":"spaces-more-ways-to-create","url":"/docs/hub/spaces-more-ways-to-create"},{"title":"Managing Spaces with Github Actions","id":"spaces-github-actions","url":"/docs/hub/spaces-github-actions"},{"title":"Managing Spaces with CircleCI Workflows","id":"spaces-circleci","url":"/docs/hub/spaces-circleci"},{"title":"Custom Python Spaces","id":"spaces-sdks-python","url":"/docs/hub/spaces-sdks-python"},{"title":"How to Add a Space to ArXiv","id":"spaces-add-to-arxiv","url":"/docs/hub/spaces-add-to-arxiv"},{"title":"Cookie limitations in Spaces","id":"spaces-cookie-limitations","url":"/docs/hub/spaces-cookie-limitations"},{"title":"Set URL query and hash","id":"spaces-handle-url-parameters","url":"/docs/hub/spaces-handle-url-parameters"}]}]},{"title":"Other","isExpanded":true,"id":"other","url":"/docs/hub/other","sections":[{"title":"Organizations","isExpanded":false,"id":"organizations","url":"/docs/hub/organizations","sections":[{"title":"Managing Organizations","id":"organizations-managing","url":"/docs/hub/organizations-managing"},{"title":"Organization Cards","id":"organizations-cards","url":"/docs/hub/organizations-cards"},{"title":"Access Control in Organizations","id":"organizations-security","url":"/docs/hub/organizations-security"}]},{"title":"Enterprise Hub","isExpanded":false,"id":"enterprise-hub","url":"/docs/hub/enterprise-hub","sections":[{"title":"Single Sign-On (SSO)","id":"enterprise-sso","url":"/docs/hub/enterprise-sso"},{"title":"Audit Logs","id":"audit-logs","url":"/docs/hub/audit-logs"},{"title":"Storage Regions","id":"storage-regions","url":"/docs/hub/storage-regions"},{"title":"Dataset viewer for Private datasets","id":"enterprise-hub-datasets","url":"/docs/hub/enterprise-hub-datasets"},{"title":"Resource Groups (Access Control)","id":"enterprise-hub-resource-groups","url":"/docs/hub/enterprise-hub-resource-groups"},{"title":"Advanced Compute Options","id":"advanced-compute-options","url":"/docs/hub/advanced-compute-options"},{"title":"Advanced Security","id":"enterprise-hub-advanced-security","url":"/docs/hub/enterprise-hub-advanced-security"},{"title":"Tokens Management","id":"enterprise-hub-tokens-management","url":"/docs/hub/enterprise-hub-tokens-management"},{"title":"Analytics","id":"enterprise-hub-analytics","url":"/docs/hub/enterprise-hub-analytics"},{"title":"Network Security","id":"enterprise-hub-network-security","url":"/docs/hub/enterprise-hub-network-security"}]},{"title":"Billing","id":"billing","url":"/docs/hub/billing"},{"title":"Security","isExpanded":false,"id":"security","url":"/docs/hub/security","sections":[{"title":"User Access Tokens","id":"security-tokens","url":"/docs/hub/security-tokens"},{"title":"Two-Factor Authentication","id":"security-2fa","url":"/docs/hub/security-2fa"},{"title":"Git over SSH","id":"security-git-ssh","url":"/docs/hub/security-git-ssh"},{"title":"Signing Commits with GPG","id":"security-gpg","url":"/docs/hub/security-gpg"},{"title":"Single Sign-On (SSO)","isExpanded":false,"id":"security-sso","url":"/docs/hub/security-sso","sections":[{"title":"How to configure OIDC with Okta in the Hub","id":"security-sso-okta-oidc","url":"/docs/hub/security-sso-okta-oidc"},{"title":"How to configure SAML with Okta in the Hub","id":"security-sso-okta-saml","url":"/docs/hub/security-sso-okta-saml"},{"title":"How to configure SAML with Azure in the Hub","id":"security-sso-azure-saml","url":"/docs/hub/security-sso-azure-saml"},{"title":"How to configure OIDC with Azure in the Hub","id":"security-sso-azure-oidc","url":"/docs/hub/security-sso-azure-oidc"}]},{"title":"Advanced Access Control (Resource Groups)","id":"security-resource-groups","url":"/docs/hub/security-resource-groups"},{"title":"Malware Scanning","id":"security-malware","url":"/docs/hub/security-malware"},{"title":"Pickle Scanning","id":"security-pickle","url":"/docs/hub/security-pickle"},{"title":"Secrets Scanning","id":"security-secrets","url":"/docs/hub/security-secrets"},{"title":"Protect AI","id":"security-protectai","url":"/docs/hub/security-protectai"}]},{"title":"Moderation","id":"moderation","url":"/docs/hub/moderation"},{"title":"Paper Pages","id":"paper-pages","url":"/docs/hub/paper-pages"},{"title":"Search","id":"search","url":"/docs/hub/search"},{"title":"Digital Object Identifier (DOI)","id":"doi","url":"/docs/hub/doi"},{"title":"Hub API Endpoints","id":"api","url":"/docs/hub/api"},{"title":"Sign-In with HF","id":"oauth","url":"/docs/hub/oauth"}]}],"chapterId":"spaces-embed","docType":"docs","isLoggedIn":false,"lang":"en","langs":["en"],"library":"hub","theme":"light","version":"main","versions":[{"version":"main"}],"title":"Embed your Space in another website"}"> <div class="z-2 w-full flex-none lg:flex lg:h-dvh lg:w-[270px] lg:flex-col 2xl:w-[300px] false"><div class="shadow-alternate flex h-auto w-full items-center rounded-b-xl border-b bg-white py-2 text-lg leading-tight lg:hidden"> <div class="flex flex-1 cursor-pointer flex-col justify-center self-stretch pl-6"><p class="text-sm text-gray-400 first-letter:capitalize">Hub documentation </p> <div class="mr-2 flex items-center"><p class="font-semibold">Embed your Space in another website</p> <svg class="text-xl false" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M16.293 9.293L12 13.586L7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z" fill="currentColor"></path></svg></div></div> <button class="hover:shadow-alternate group ml-auto mr-6 inline-flex flex-none cursor-pointer rounded-xl border p-2"><svg class="text-gray-500 group-hover:text-gray-700" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z" fill="currentColor"></path></svg></button></div> <div class="hidden flex-col justify-between border-b border-r bg-white bg-gradient-to-r p-4 lg:flex from-yellow-50 to-white dark:from-gray-900 dark:to-gray-950"><div class="group relative mb-2 flex min-w-[50%] items-center self-start text-lg font-bold leading-tight first-letter:capitalize"><div class="mr-1.5 h-1.5 w-1.5 rounded-full bg-yellow-500 flex-none"></div> <h1>Hub</h1> <svg class="opacity-50 ml-0.5 flex-none group-hover:opacity-100" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M16.293 9.293L12 13.586L7.707 9.293l-1.414 1.414L12 16.414l5.707-5.707z" fill="currentColor"></path></svg> <select class="absolute inset-0 border-none bg-white text-base opacity-0 outline-none"><option value="/docs">🏡 View all docs</option><option value="/docs/optimum-neuron" >AWS Trainium & Inferentia</option><option value="/docs/accelerate" >Accelerate</option><option value="/docs/sagemaker" >Amazon SageMaker</option><option value="https://argilla-io.github.io/argilla/" >Argilla</option><option value="/docs/autotrain" >AutoTrain</option><option value="/docs/bitsandbytes" >Bitsandbytes</option><option value="/docs/chat-ui" >Chat UI</option><option value="/docs/competitions" >Competitions</option><option value="/docs/dataset-viewer" >Dataset viewer</option><option value="/docs/datasets" >Datasets</option><option value="/docs/diffusers" >Diffusers</option><option value="https://distilabel.argilla.io/" >Distilabel</option><option value="/docs/evaluate" >Evaluate</option><option value="/docs/google-cloud" >Google Cloud</option><option value="/docs/optimum-tpu" >Google TPUs</option><option value="https://www.gradio.app/docs/" >Gradio</option><option value="/docs/hub" selected>Hub</option><option value="/docs/huggingface_hub" >Hub Python Library</option><option value="/docs/hugs" >Hugging Face Generative AI Services (HUGS)</option><option value="/docs/huggingface.js" >Huggingface.js</option><option value="/docs/api-inference" >Inference API (serverless)</option><option value="/docs/inference-endpoints" >Inference Endpoints (dedicated)</option><option value="/docs/leaderboards" >Leaderboards</option><option value="/docs/optimum" >Optimum</option><option value="/docs/peft" >PEFT</option><option value="/docs/safetensors" >Safetensors</option><option value="https://sbert.net/" >Sentence Transformers</option><option value="/docs/trl" >TRL</option><option value="/tasks" >Tasks</option><option value="/docs/text-embeddings-inference" >Text Embeddings Inference</option><option value="/docs/text-generation-inference" >Text Generation Inference</option><option value="/docs/tokenizers" >Tokenizers</option><option value="/docs/transformers" >Transformers</option><option value="/docs/transformers.js" >Transformers.js</option><option value="/docs/timm" >timm</option></select></div> <button class="shadow-alternate mb-2 flex w-full items-center rounded-full border bg-white px-2 py-1 text-left text-sm text-gray-400 ring-indigo-200 hover:bg-indigo-50 hover:ring-2 dark:border-gray-700 dark:ring-yellow-600 dark:hover:bg-gray-900 dark:hover:text-yellow-500"><svg class="flex-none mr-1.5" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M30 28.59L22.45 21A11 11 0 1 0 21 22.45L28.59 30zM5 14a9 9 0 1 1 9 9a9 9 0 0 1-9-9z" fill="currentColor"></path></svg> <div>Search documentation</div> </button> <div class="flex items-center"> <select class="form-input mr-1 rounded border-gray-200 p-1 text-xs dark:!text-gray-400 !w-12 !mt-0 !border"><option value="en" selected>EN</option></select> <div class="relative inline-block"> <button class="rounded-full border border-gray-100 p-1.5 flex items-center text-sm text-gray-500 bg-white hover:bg-yellow-50 hover:border-yellow-200 dark:hover:bg-gray-800 dark:hover:border-gray-950 " type="button"> <svg class=" text-yellow-500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" fill="currentColor"><path d="M6.05 4.14l-.39-.39a.993.993 0 0 0-1.4 0l-.01.01a.984.984 0 0 0 0 1.4l.39.39c.39.39 1.01.39 1.4 0l.01-.01a.984.984 0 0 0 0-1.4zM3.01 10.5H1.99c-.55 0-.99.44-.99.99v.01c0 .55.44.99.99.99H3c.56.01 1-.43 1-.98v-.01c0-.56-.44-1-.99-1zm9-9.95H12c-.56 0-1 .44-1 .99v.96c0 .55.44.99.99.99H12c.56.01 1-.43 1-.98v-.97c0-.55-.44-.99-.99-.99zm7.74 3.21c-.39-.39-1.02-.39-1.41-.01l-.39.39a.984.984 0 0 0 0 1.4l.01.01c.39.39 1.02.39 1.4 0l.39-.39a.984.984 0 0 0 0-1.4zm-1.81 15.1l.39.39a.996.996 0 1 0 1.41-1.41l-.39-.39a.993.993 0 0 0-1.4 0c-.4.4-.4 1.02-.01 1.41zM20 11.49v.01c0 .55.44.99.99.99H22c.55 0 .99-.44.99-.99v-.01c0-.55-.44-.99-.99-.99h-1.01c-.55 0-.99.44-.99.99zM12 5.5c-3.31 0-6 2.69-6 6s2.69 6 6 6s6-2.69 6-6s-2.69-6-6-6zm-.01 16.95H12c.55 0 .99-.44.99-.99v-.96c0-.55-.44-.99-.99-.99h-.01c-.55 0-.99.44-.99.99v.96c0 .55.44.99.99.99zm-7.74-3.21c.39.39 1.02.39 1.41 0l.39-.39a.993.993 0 0 0 0-1.4l-.01-.01a.996.996 0 0 0-1.41 0l-.39.39c-.38.4-.38 1.02.01 1.41z"></path></svg> </button> </div> <a href="https://github.com/huggingface/hub-docs" class="group ml-auto text-xs text-gray-500 hover:text-gray-700 hover:underline dark:hover:text-gray-300"><svg class="inline-block text-gray-500 group-hover:text-gray-700 dark:group-hover:text-gray-300 mr-1.5 -mt-1 w-4 h-4" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1.03em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 250"><path d="M128.001 0C57.317 0 0 57.307 0 128.001c0 56.554 36.676 104.535 87.535 121.46c6.397 1.185 8.746-2.777 8.746-6.158c0-3.052-.12-13.135-.174-23.83c-35.61 7.742-43.124-15.103-43.124-15.103c-5.823-14.795-14.213-18.73-14.213-18.73c-11.613-7.944.876-7.78.876-7.78c12.853.902 19.621 13.19 19.621 13.19c11.417 19.568 29.945 13.911 37.249 10.64c1.149-8.272 4.466-13.92 8.127-17.116c-28.431-3.236-58.318-14.212-58.318-63.258c0-13.975 5-25.394 13.188-34.358c-1.329-3.224-5.71-16.242 1.24-33.874c0 0 10.749-3.44 35.21 13.121c10.21-2.836 21.16-4.258 32.038-4.307c10.878.049 21.837 1.47 32.066 4.307c24.431-16.56 35.165-13.12 35.165-13.12c6.967 17.63 2.584 30.65 1.255 33.873c8.207 8.964 13.173 20.383 13.173 34.358c0 49.163-29.944 59.988-58.447 63.157c4.591 3.972 8.682 11.762 8.682 23.704c0 17.126-.148 30.91-.148 35.126c0 3.407 2.304 7.398 8.792 6.14C219.37 232.5 256 184.537 256 128.002C256 57.307 198.691 0 128.001 0zm-80.06 182.34c-.282.636-1.283.827-2.194.39c-.929-.417-1.45-1.284-1.15-1.922c.276-.655 1.279-.838 2.205-.399c.93.418 1.46 1.293 1.139 1.931zm6.296 5.618c-.61.566-1.804.303-2.614-.591c-.837-.892-.994-2.086-.375-2.66c.63-.566 1.787-.301 2.626.591c.838.903 1 2.088.363 2.66zm4.32 7.188c-.785.545-2.067.034-2.86-1.104c-.784-1.138-.784-2.503.017-3.05c.795-.547 2.058-.055 2.861 1.075c.782 1.157.782 2.522-.019 3.08zm7.304 8.325c-.701.774-2.196.566-3.29-.49c-1.119-1.032-1.43-2.496-.726-3.27c.71-.776 2.213-.558 3.315.49c1.11 1.03 1.45 2.505.701 3.27zm9.442 2.81c-.31 1.003-1.75 1.459-3.199 1.033c-1.448-.439-2.395-1.613-2.103-2.626c.301-1.01 1.747-1.484 3.207-1.028c1.446.436 2.396 1.602 2.095 2.622zm10.744 1.193c.036 1.055-1.193 1.93-2.715 1.95c-1.53.034-2.769-.82-2.786-1.86c0-1.065 1.202-1.932 2.733-1.958c1.522-.03 2.768.818 2.768 1.868zm10.555-.405c.182 1.03-.875 2.088-2.387 2.37c-1.485.271-2.861-.365-3.05-1.386c-.184-1.056.893-2.114 2.376-2.387c1.514-.263 2.868.356 3.061 1.403z" fill="currentColor"></path></svg> </a></div></div> <nav class="hidden flex-auto lg:flex bottom-0 left-0 w-full flex-col overflow-y-auto border-r px-4 pb-16 pt-3 text-[0.95rem] lg:w-[270px] 2xl:w-[300px]"> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 mb-2 ml-0 " href="/docs/hub/index" id="index"> 🤗 Hugging Face Hub </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-0 " href="/docs/hub/repositories" id="repositories"><svg class="mr-1 text-orange-500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path fill="currentColor" d="M2.6 10.59L8.38 4.8l1.69 1.7c-.24.85.15 1.78.93 2.23v5.54c-.6.34-1 .99-1 1.73a2 2 0 0 0 2 2a2 2 0 0 0 2-2c0-.74-.4-1.39-1-1.73V9.41l2.07 2.09c-.07.15-.07.32-.07.5a2 2 0 0 0 2 2a2 2 0 0 0 2-2a2 2 0 0 0-2-2c-.18 0-.35 0-.5.07L13.93 7.5a1.98 1.98 0 0 0-1.15-2.34c-.43-.16-.88-.2-1.28-.09L9.8 3.38l.79-.78c.78-.79 2.04-.79 2.82 0l7.99 7.99c.79.78.79 2.04 0 2.82l-7.99 7.99c-.78.79-2.04.79-2.82 0L2.6 13.41c-.79-.78-.79-2.04 0-2.82Z"></path></svg> Repositories </a> <div class="flex flex-col"><a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/repositories-getting-started" id="repositories-getting-started"> Getting Started with Repositories </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/repositories-settings" id="repositories-settings"> Repository Settings </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/repositories-pull-requests-discussions" id="repositories-pull-requests-discussions"> Pull Requests & Discussions </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/notifications" id="notifications"> Notifications </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/collections" id="collections"> Collections </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 after:absolute after:right-4 after:text-gray-500 hover:after:content-['▶']" href="/docs/hub/webhooks" id="webhooks"> Webhooks </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/notebooks" id="notebooks"> Notebooks </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/repositories-recommendations" id="repositories-recommendations"> Repository size recommendations </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/repositories-next-steps" id="repositories-next-steps"> Next Steps </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/repositories-licenses" id="repositories-licenses"> Licenses </a> </div><a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-0 " href="/docs/hub/models" id="models"><svg class="mr-1 text-indigo-500" style="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path class="uim-quaternary" d="M20.23 7.24L12 12L3.77 7.24a1.98 1.98 0 0 1 .7-.71L11 2.76c.62-.35 1.38-.35 2 0l6.53 3.77c.29.173.531.418.7.71z" opacity=".25" fill="currentColor"></path><path class="uim-tertiary" d="M12 12v9.5a2.09 2.09 0 0 1-.91-.21L4.5 17.48a2.003 2.003 0 0 1-1-1.73v-7.5a2.06 2.06 0 0 1 .27-1.01L12 12z" opacity=".5" fill="currentColor"></path><path class="uim-primary" d="M20.5 8.25v7.5a2.003 2.003 0 0 1-1 1.73l-6.62 3.82c-.275.13-.576.198-.88.2V12l8.23-4.76c.175.308.268.656.27 1.01z" fill="currentColor"></path></svg> Models </a> <div class="flex flex-col"><a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/models-the-hub" id="models-the-hub"> The Model Hub </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 after:absolute after:right-4 after:text-gray-500 hover:after:content-['▶']" href="/docs/hub/model-cards" id="model-cards"> Model Cards </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/models-gated" id="models-gated"> Gated Models </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/models-uploading" id="models-uploading"> Uploading Models </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/models-downloading" id="models-downloading"> Downloading Models </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 after:absolute after:right-4 after:text-gray-500 hover:after:content-['▶']" href="/docs/hub/models-libraries" id="models-libraries"> Integrated Libraries </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 after:absolute after:right-4 after:text-gray-500 hover:after:content-['▶']" href="/docs/hub/models-widgets" id="models-widgets"> Model Widgets </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/models-inference" id="models-inference"> Inference API docs </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/models-download-stats" id="models-download-stats"> Models Download Stats </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/models-faq" id="models-faq"> Frequently Asked Questions </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 after:absolute after:right-4 after:text-gray-500 hover:after:content-['▶']" href="/docs/hub/models-advanced" id="models-advanced"> Advanced Topics </a> </div><a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-0 " href="/docs/hub/datasets" id="datasets"><svg class="mr-1 text-red-500" style="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 25 25"><ellipse cx="12.5" cy="5" fill="currentColor" fill-opacity="0.25" rx="7.5" ry="2"></ellipse><path d="M12.5 15C16.6421 15 20 14.1046 20 13V20C20 21.1046 16.6421 22 12.5 22C8.35786 22 5 21.1046 5 20V13C5 14.1046 8.35786 15 12.5 15Z" fill="currentColor" opacity="0.5"></path><path d="M12.5 7C16.6421 7 20 6.10457 20 5V11.5C20 12.6046 16.6421 13.5 12.5 13.5C8.35786 13.5 5 12.6046 5 11.5V5C5 6.10457 8.35786 7 12.5 7Z" fill="currentColor" opacity="0.5"></path><path d="M5.23628 12C5.08204 12.1598 5 12.8273 5 13C5 14.1046 8.35786 15 12.5 15C16.6421 15 20 14.1046 20 13C20 12.8273 19.918 12.1598 19.7637 12C18.9311 12.8626 15.9947 13.5 12.5 13.5C9.0053 13.5 6.06886 12.8626 5.23628 12Z" fill="currentColor"></path></svg> Datasets </a> <div class="flex flex-col"><a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/datasets-overview" id="datasets-overview"> Datasets Overview </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/datasets-cards" id="datasets-cards"> Dataset Cards </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/datasets-gated" id="datasets-gated"> Gated Datasets </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/datasets-adding" id="datasets-adding"> Uploading Datasets </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/datasets-downloading" id="datasets-downloading"> Downloading Datasets </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 after:absolute after:right-4 after:text-gray-500 hover:after:content-['▶']" href="/docs/hub/datasets-libraries" id="datasets-libraries"> Integrated Libraries </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 after:absolute after:right-4 after:text-gray-500 hover:after:content-['▶']" href="/docs/hub/datasets-viewer" id="datasets-viewer"> Dataset Viewer </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/datasets-download-stats" id="datasets-download-stats"> Datasets Download Stats </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 after:absolute after:right-4 after:text-gray-500 hover:after:content-['▶']" href="/docs/hub/datasets-data-files-configuration" id="datasets-data-files-configuration"> Data files Configuration </a> </div><a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-0 " href="/docs/hub/spaces" id="spaces"><svg class="mr-1 text-blue-500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" viewBox="0 0 25 25"><path opacity=".5" d="M6.016 14.674v4.31h4.31v-4.31h-4.31ZM14.674 14.674v4.31h4.31v-4.31h-4.31ZM6.016 6.016v4.31h4.31v-4.31h-4.31Z" fill="currentColor"></path><path opacity=".75" fill-rule="evenodd" clip-rule="evenodd" d="M3 4.914C3 3.857 3.857 3 4.914 3h6.514c.884 0 1.628.6 1.848 1.414a5.171 5.171 0 0 1 7.31 7.31c.815.22 1.414.964 1.414 1.848v6.514A1.914 1.914 0 0 1 20.086 22H4.914A1.914 1.914 0 0 1 3 20.086V4.914Zm3.016 1.102v4.31h4.31v-4.31h-4.31Zm0 12.968v-4.31h4.31v4.31h-4.31Zm8.658 0v-4.31h4.31v4.31h-4.31Zm0-10.813a2.155 2.155 0 1 1 4.31 0 2.155 2.155 0 0 1-4.31 0Z" fill="currentColor"></path><path opacity=".25" d="M16.829 6.016a2.155 2.155 0 1 0 0 4.31 2.155 2.155 0 0 0 0-4.31Z" fill="currentColor"></path></svg> Spaces </a> <div class="flex flex-col"><a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 after:absolute after:right-4 after:text-gray-500 hover:after:content-['▶']" href="/docs/hub/spaces-overview" id="spaces-overview"> Spaces Overview </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/spaces-gpus" id="spaces-gpus"> Spaces GPU Upgrades </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/spaces-zerogpu" id="spaces-zerogpu"> Spaces ZeroGPU </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/spaces-dev-mode" id="spaces-dev-mode"> Spaces Dev Mode </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/spaces-storage" id="spaces-storage"> Spaces Persistent Storage </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/spaces-sdks-gradio" id="spaces-sdks-gradio"> Gradio Spaces </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/spaces-sdks-streamlit" id="spaces-sdks-streamlit"> Streamlit Spaces </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/spaces-sdks-static" id="spaces-sdks-static"> Static HTML Spaces </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 after:absolute after:right-4 after:text-gray-500 hover:after:content-['▶']" href="/docs/hub/spaces-sdks-docker" id="spaces-sdks-docker"> Docker Spaces </a> <a class="flex items-center rounded-xl bg-gradient-to-br from-black to-gray-900 py-1 pl-2 pr-2 text-white transition-colors first:mt-1 last:mb-4 dark:from-gray-800 dark:to-gray-900 ml-2 " href="/docs/hub/spaces-embed" id="spaces-embed"> Embed your Space </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/spaces-run-with-docker" id="spaces-run-with-docker"> Run Spaces with Docker </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/spaces-config-reference" id="spaces-config-reference"> Spaces Configuration Reference </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/spaces-oauth" id="spaces-oauth"> Sign-In with HF button </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/spaces-changelog" id="spaces-changelog"> Spaces Changelog </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 after:absolute after:right-4 after:text-gray-500 hover:after:content-['▶']" href="/docs/hub/spaces-advanced" id="spaces-advanced"> Advanced Topics </a> </div><a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-0 " href="/docs/hub/other" id="other"><svg class="mr-1 text-green-500" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24" fill="currentColor"><path d="M8.892 21.854a6.25 6.25 0 0 1-4.42-10.67l7.955-7.955a4.5 4.5 0 0 1 6.364 6.364l-6.895 6.894a2.816 2.816 0 0 1-3.89 0a2.75 2.75 0 0 1 .002-3.888l5.126-5.127a1 1 0 1 1 1.414 1.414l-5.126 5.127a.75.75 0 0 0 0 1.06a.768.768 0 0 0 1.06 0l6.895-6.894a2.503 2.503 0 0 0 0-3.535a2.56 2.56 0 0 0-3.536 0l-7.955 7.955a4.25 4.25 0 1 0 6.01 6.01l6.188-6.187a1 1 0 1 1 1.414 1.414l-6.187 6.186a6.206 6.206 0 0 1-4.42 1.832z"></path></svg> Other </a> <div class="flex flex-col"><a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 after:absolute after:right-4 after:text-gray-500 hover:after:content-['▶']" href="/docs/hub/organizations" id="organizations"> Organizations </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 after:absolute after:right-4 after:text-gray-500 hover:after:content-['▶']" href="/docs/hub/enterprise-hub" id="enterprise-hub"> Enterprise Hub </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/billing" id="billing"> Billing </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 after:absolute after:right-4 after:text-gray-500 hover:after:content-['▶']" href="/docs/hub/security" id="security"> Security </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/moderation" id="moderation"> Moderation </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/paper-pages" id="paper-pages"> Paper Pages </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/search" id="search"> Search </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/doi" id="doi"> Digital Object Identifier (DOI) </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/api" id="api"> Hub API Endpoints </a> <a class="flex transform items-center py-1 pl-2 pr-2 text-gray-500 first:mt-1 last:mb-4 hover:translate-x-px hover:text-black dark:hover:text-gray-300 ml-2 " href="/docs/hub/oauth" id="oauth"> Sign-In with HF </a> </div></nav></div></div></div> <div class="z-1 min-w-0 flex-1"> <div class="px-6 pt-6 md:px-12 md:pb-16 md:pt-16"><div class="max-w-4xl mx-auto mb-10"><div class="relative overflow-hidden rounded-xl bg-gradient-to-br from-orange-300/10 px-4 py-5 ring-1 ring-orange-100/70 md:px-6 md:py-8"><img alt="Hugging Face's logo" class="absolute -bottom-6 -right-6 w-28 -rotate-45 md:hidden" src="/front/assets/huggingface_logo-noborder.svg"> <div class="mb-2 text-2xl font-bold dark:text-gray-200 md:mb-0">Join the Hugging Face community</div> <p class="mb-4 text-lg text-gray-400 dark:text-gray-300 md:mb-8">and get access to the augmented documentation experience </p> <div class="mb-8 hidden space-y-4 md:block xl:flex xl:space-x-6 xl:space-y-0"><div class="flex items-center"><div class="mr-3 flex h-9 w-9 flex-none items-center justify-center rounded-lg bg-gradient-to-br from-indigo-100 to-indigo-100/20 dark:to-indigo-100"><svg class="text-indigo-400 group-hover:text-indigo-500" style="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path class="uim-quaternary" d="M20.23 7.24L12 12L3.77 7.24a1.98 1.98 0 0 1 .7-.71L11 2.76c.62-.35 1.38-.35 2 0l6.53 3.77c.29.173.531.418.7.71z" opacity=".25" fill="currentColor"></path><path class="uim-tertiary" d="M12 12v9.5a2.09 2.09 0 0 1-.91-.21L4.5 17.48a2.003 2.003 0 0 1-1-1.73v-7.5a2.06 2.06 0 0 1 .27-1.01L12 12z" opacity=".5" fill="currentColor"></path><path class="uim-primary" d="M20.5 8.25v7.5a2.003 2.003 0 0 1-1 1.73l-6.62 3.82c-.275.13-.576.198-.88.2V12l8.23-4.76c.175.308.268.656.27 1.01z" fill="currentColor"></path></svg></div> <div class="text-smd leading-tight text-gray-500 dark:text-gray-300 xl:max-w-[200px] 2xl:text-base">Collaborate on models, datasets and Spaces </div></div> <div class="flex items-center"><div class="mr-3 flex h-9 w-9 flex-none items-center justify-center rounded-lg bg-gradient-to-br from-orange-100 to-orange-100/20 dark:to-orange-50"><svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" class="text-xl text-yellow-400" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 24 24"><path d="M11 15H6l7-14v8h5l-7 14v-8z" fill="currentColor"></path></svg></div> <div class="text-smd leading-tight text-gray-500 dark:text-gray-300 xl:max-w-[200px] 2xl:text-base">Faster examples with accelerated inference </div></div> <div class="flex items-center"><div class="mr-3 flex h-9 w-9 flex-none items-center justify-center rounded-lg bg-gradient-to-br from-gray-500/10 to-gray-500/5"><svg class="text-gray-400" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M14.9804 3C14.9217 3.0002 14.8631 3.00555 14.8054 3.016C11.622 3.58252 8.76073 5.30669 6.77248 7.85653C4.78422 10.4064 3.80955 13.6016 4.03612 16.8271C4.26268 20.0525 5.67447 23.0801 7.99967 25.327C10.3249 27.5738 13.3991 28.8811 16.6304 28.997C16.7944 29.003 16.9584 28.997 17.1204 28.997C19.2193 28.9984 21.2877 28.4943 23.1507 27.5274C25.0137 26.5605 26.6164 25.1592 27.8234 23.442C27.9212 23.294 27.9783 23.1229 27.9889 22.9458C27.9995 22.7687 27.9633 22.592 27.884 22.4333C27.8046 22.2747 27.6848 22.1397 27.5367 22.0421C27.3887 21.9444 27.2175 21.8875 27.0404 21.877C25.0426 21.7017 23.112 21.0693 21.3976 20.0288C19.6832 18.9884 18.231 17.5676 17.1533 15.8764C16.0756 14.1852 15.4011 12.2688 15.1822 10.2754C14.9632 8.28193 15.2055 6.26484 15.8904 4.38C15.9486 4.22913 15.97 4.06652 15.9527 3.90572C15.9354 3.74492 15.8799 3.59059 15.7909 3.45557C15.7019 3.32055 15.5819 3.20877 15.4409 3.12952C15.2999 3.05028 15.142 3.00587 14.9804 3Z" fill="currentColor"></path></svg></div> <div class="text-smd leading-tight text-gray-500 dark:text-gray-300 xl:max-w-[200px] 2xl:text-base">Switch between documentation themes </div></div></div> <div class="flex items-center space-x-2.5"><a href="/join"><button class="rounded-lg bg-white bg-gradient-to-br from-gray-100/20 to-gray-200/60 px-5 py-1.5 font-semibold text-gray-700 shadow-sm ring-1 ring-gray-300/60 hover:to-gray-100/70 hover:ring-gray-300/30 active:shadow-inner">Sign Up</button></a> <p class="text-gray-500 dark:text-gray-300">to get started</p></div></div></div> <div class="prose-doc prose relative mx-auto max-w-4xl break-words"> <link href="/docs/hub/main/en/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload"> <link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/entry/start.2759ecb3.js"> <link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/chunks/scheduler.d6170356.js"> <link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/chunks/singletons.cfbc5757.js"> <link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/chunks/paths.b3d34257.js"> <link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/entry/app.838cc47c.js"> <link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/chunks/index.fcd4cc08.js"> <link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/nodes/0.6498845b.js"> <link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/nodes/140.0a3d5865.js"> <link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/chunks/CodeBlock.7b16bdef.js"> <link rel="modulepreload" href="/docs/hub/main/en/_app/immutable/chunks/EditOnGithub.da2b595c.js"><meta name="hf:doc:metadata" content="{"title":"Embed your Space in another website","local":"embed-your-space-in-another-website","sections":[{"title":"Direct URL","local":"direct-url","sections":[],"depth":2},{"title":"Embedding with IFrames","local":"embedding-with-iframes","sections":[],"depth":2},{"title":"Embedding with WebComponents","local":"embedding-with-webcomponents","sections":[],"depth":2}],"depth":1}"> <p></p> <h1 class="relative group"><a id="embed-your-space-in-another-website" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#embed-your-space-in-another-website"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Embed your Space in another website</span></h1> <p data-svelte-h="svelte-q4v8fy">Once your Space is up and running you might wish to embed it in a website or in your blog. Embedding or sharing your Space is a great way to allow your audience to interact with your work and demonstrations without requiring any setup on their side. To embed a Space its visibility needs to be public.</p> <h2 class="relative group"><a id="direct-url" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#direct-url"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Direct URL</span></h2> <p data-svelte-h="svelte-matlhr">A Space is assigned a unique URL you can use to share your Space or embed it in a website.</p> <p data-svelte-h="svelte-1a5w9hu">This URL is of the form: <code>"https://<space-subdomain>.hf.space"</code>. For instance, the Space <a href="https://huggingface.co/spaces/NimaBoscarino/hotdog-gradio" rel="nofollow">NimaBoscarino/hotdog-gradio</a> has the corresponding URL of <code>"https://nimaboscarino-hotdog-gradio.hf.space"</code>. The subdomain is unique and only changes if you move or rename your Space.</p> <p data-svelte-h="svelte-ibgv73">Your space is always served from the root of this subdomain.</p> <p data-svelte-h="svelte-694fn6">You can find the Space URL along with examples snippets of how to embed it directly from the options menu:</p> <div class="flex justify-center" data-svelte-h="svelte-8bvj0n"><img class="block dark:hidden" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/spaces-embed-option.png"> <img class="hidden dark:block" src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/spaces-embed-option-dark.png"></div> <h2 class="relative group"><a id="embedding-with-iframes" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#embedding-with-iframes"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Embedding with IFrames</span></h2> <p data-svelte-h="svelte-v1m8yz">The default embedding method for a Space is using IFrames. Add in the HTML location where you want to embed your Space the following element:</p> <div class="code-block relative"><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><span class="hljs-tag"><<span class="hljs-name">iframe</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://<space-subdomain>.hf.space"</span> <span class="hljs-attr">frameborder</span>=<span class="hljs-string">"0"</span> <span class="hljs-attr">width</span>=<span class="hljs-string">"850"</span> <span class="hljs-attr">height</span>=<span class="hljs-string">"450"</span> ></span><span class="hljs-tag"></<span class="hljs-name">iframe</span>></span></pre></div> <p data-svelte-h="svelte-1n1xt40">For instance using the <a href="https://huggingface.co/spaces/NimaBoscarino/hotdog-gradio" rel="nofollow">NimaBoscarino/hotdog-gradio</a> Space:</p> <iframe src="https://nimaboscarino-hotdog-gradio.hf.space" frameborder="0" width="850" height="500"></iframe> <h2 class="relative group"><a id="embedding-with-webcomponents" class="header-link block pr-1.5 text-lg no-hover:hidden with-hover:absolute with-hover:p-1.5 with-hover:opacity-0 with-hover:group-hover:opacity-100 with-hover:right-full" href="#embedding-with-webcomponents"><span><svg class="" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" aria-hidden="true" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 256 256"><path d="M167.594 88.393a8.001 8.001 0 0 1 0 11.314l-67.882 67.882a8 8 0 1 1-11.314-11.315l67.882-67.881a8.003 8.003 0 0 1 11.314 0zm-28.287 84.86l-28.284 28.284a40 40 0 0 1-56.567-56.567l28.284-28.284a8 8 0 0 0-11.315-11.315l-28.284 28.284a56 56 0 0 0 79.196 79.197l28.285-28.285a8 8 0 1 0-11.315-11.314zM212.852 43.14a56.002 56.002 0 0 0-79.196 0l-28.284 28.284a8 8 0 1 0 11.314 11.314l28.284-28.284a40 40 0 0 1 56.568 56.567l-28.285 28.285a8 8 0 0 0 11.315 11.314l28.284-28.284a56.065 56.065 0 0 0 0-79.196z" fill="currentColor"></path></svg></span></a> <span>Embedding with WebComponents</span></h2> <p data-svelte-h="svelte-cbdhda">If the Space you wish to embed is Gradio-based, you can use Web Components to embed your Space. WebComponents are faster than IFrames and automatically adjust to your web page so that you do not need to configure <code>width</code> or <code>height</code> for your element. First, you need to import the Gradio JS library that corresponds to the Gradio version in the Space by adding the following script to your HTML.</p> <div class="flex justify-center" data-svelte-h="svelte-ykrzzo"><img src="https://huggingface.co/datasets/huggingface/documentation-images/resolve/main/hub/spaces-embed-gradio-module.png"></div> <p data-svelte-h="svelte-191yan5">Then, add a <code>gradio-app</code> element where you want to embed your Space.</p> <div class="code-block relative"><div class="absolute top-2.5 right-4"><button class="inline-flex items-center relative text-sm focus:text-green-500 cursor-pointer focus:outline-none transition duration-200 ease-in-out opacity-0 mx-0.5 text-gray-600 " title="code excerpt" type="button"><svg class="" xmlns="http://www.w3.org/2000/svg" aria-hidden="true" fill="currentColor" focusable="false" role="img" width="1em" height="1em" preserveAspectRatio="xMidYMid meet" viewBox="0 0 32 32"><path d="M28,10V28H10V10H28m0-2H10a2,2,0,0,0-2,2V28a2,2,0,0,0,2,2H28a2,2,0,0,0,2-2V10a2,2,0,0,0-2-2Z" transform="translate(0)"></path><path d="M4,18H2V4A2,2,0,0,1,4,2H18V4H4Z" transform="translate(0)"></path><rect fill="none" width="32" height="32"></rect></svg> <div class="absolute pointer-events-none transition-opacity bg-black text-white py-1 px-2 leading-tight rounded font-normal shadow left-1/2 top-full transform -translate-x-1/2 translate-y-2 opacity-0"><div class="absolute bottom-full left-1/2 transform -translate-x-1/2 w-0 h-0 border-black border-4 border-t-0" style="border-left-color: transparent; border-right-color: transparent; "></div> Copied</div></button></div> <pre class=""><span class="hljs-tag"><<span class="hljs-name">gradio-app</span> <span class="hljs-attr">src</span>=<span class="hljs-string">"https://<space-subdomain>.hf.space"</span>></span><span class="hljs-tag"></<span class="hljs-name">gradio-app</span>></span></pre></div> <p data-svelte-h="svelte-vdczo2">Check out the <a href="https://gradio.app/sharing_your_app/#embedding-hosted-spaces" rel="nofollow">Gradio documentation</a> for more details.</p> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/hub-docs/blob/main/docs/hub/spaces-embed.md" target="_blank"><span data-svelte-h="svelte-1kd6by1"><</span> <span data-svelte-h="svelte-x0xyl0">></span> <span data-svelte-h="svelte-1dajgef"><span class="underline ml-1.5">Update</span> on GitHub</span></a> <p></p> <script> { __sveltekit_1m36b5r = { assets: "/docs/hub/main/en", base: "/docs/hub/main/en", env: {} }; const element = document.currentScript.parentElement; const data = [null,null]; Promise.all([ import("/docs/hub/main/en/_app/immutable/entry/start.2759ecb3.js"), import("/docs/hub/main/en/_app/immutable/entry/app.838cc47c.js") ]).then(([kit, app]) => { kit.start(app, element, { node_ids: [0, 140], data, form: null, error: null }); }); } </script> </div> <div class="SVELTE_HYDRATER contents" data-target="DocFooterNav" data-props="{"classNames":"mx-auto mt-16 flex max-w-4xl items-center pb-8 font-sans font-medium leading-6 xl:mt-32","chapterPrev":{"title":"marimo on Spaces","id":"spaces-sdks-docker-marimo","url":"/docs/hub/spaces-sdks-docker-marimo"},"chapterNext":{"title":"Run Spaces with Docker","id":"spaces-run-with-docker","url":"/docs/hub/spaces-run-with-docker"},"isCourse":false,"isLoggedIn":false}"><div class="mx-auto mt-16 flex max-w-4xl items-center pb-8 font-sans font-medium leading-6 xl:mt-32"><a href="/docs/hub/spaces-sdks-docker-marimo" class="mr-8 flex transform items-center text-gray-600 transition-all hover:-translate-x-px hover:text-gray-900 dark:hover:text-gray-300"><span class="mr-2 translate-y-px">←</span>marimo on Spaces</a> <a href="/docs/hub/spaces-run-with-docker" class="ml-auto flex transform items-center text-right text-gray-600 transition-all hover:translate-x-px hover:text-gray-900 dark:hover:text-gray-300">Run Spaces with Docker<span class="ml-2 translate-y-px">→</span></a></div></div></div></div> <div class="sticky top-0 self-start"><div class="SVELTE_HYDRATER contents" data-target="SubSideMenu" data-props="{"chapter":{"title":"Embed your Space in another website","isExpanded":false,"id":"embed-your-space-in-another-website","url":"#embed-your-space-in-another-website","sections":[{"title":"Direct URL","isExpanded":false,"id":"direct-url","url":"#direct-url","sections":[]},{"title":"Embedding with IFrames","isExpanded":false,"id":"embedding-with-iframes","url":"#embedding-with-iframes","sections":[]},{"title":"Embedding with WebComponents","isExpanded":false,"id":"embedding-with-webcomponents","url":"#embedding-with-webcomponents","sections":[]}]}}"> <nav class="hidden h-dvh w-[270px] flex-none flex-col space-y-3 overflow-y-auto break-words border-l pb-16 pl-6 pr-10 pt-24 text-sm lg:flex 2xl:w-[305px]"> <a href="#embed-your-space-in-another-website" class=" text-gray-400 transform hover:translate-x-px hover:text-gray-700 dark:hover:text-gray-300" id="nav-embed-your-space-in-another-website"><wbr>Embed your <wbr>Space in another website</a> <a href="#direct-url" class="pl-4 text-gray-400 transform hover:translate-x-px hover:text-gray-700 dark:hover:text-gray-300" id="nav-direct-url"><wbr>Direct URL</a> <a href="#embedding-with-iframes" class="pl-4 text-gray-400 transform hover:translate-x-px hover:text-gray-700 dark:hover:text-gray-300" id="nav-embedding-with-iframes"><wbr>Embedding with I<wbr>Frames</a> <a href="#embedding-with-webcomponents" class="pl-4 text-gray-400 transform hover:translate-x-px hover:text-gray-700 dark:hover:text-gray-300" id="nav-embedding-with-webcomponents"><wbr>Embedding with <wbr>Web<wbr>Components</a> </nav></div></div></div> <div id="doc-footer"></div></main> </div> <script> import("\/front\/build\/kube-a5b3b1c\/index.js"); window.moonSha = "kube-a5b3b1c\/"; window.__hf_deferred = {}; </script>  <script> if (["hf.co", "huggingface.co"].includes(window.location.hostname)) { const script = document.createElement("script"); script.src = "https://js.stripe.com/v3/"; script.async = true; document.head.appendChild(script); } </script> </body> </html>

CINXE.COM

Embed your Space in another website