Buckets:

hf-doc-build
/

doc-dev

Files

xet

hf-doc-build/doc-dev / 101-course /pr_4 /en /chapter1 /4.html

rtrm

about 1 month ago

download

raw

44 kB

	<meta charset="utf-8" /><meta name="hf:doc:metadata" content="{"title":"Sharing What You’ve Built","local":"sharing-what-youve-built","sections":[{"title":"What You Can Share","local":"what-you-can-share","sections":[],"depth":2},{"title":"Creating Your First Space","local":"creating-your-first-space","sections":[],"depth":2},{"title":"Sharing your first dataset","local":"sharing-your-first-dataset","sections":[],"depth":2},{"title":"Exercise: Duplicate a Community Space","local":"exercise-duplicate-a-community-space","sections":[],"depth":2},{"title":"Exercise: Build a Dataset Visualization Space","local":"exercise-build-a-dataset-visualization-space","sections":[{"title":"What We’re Building","local":"what-were-building","sections":[],"depth":3},{"title":"Step 1: Create Your Space","local":"step-1-create-your-space","sections":[],"depth":3},{"title":"Step 2: Write the Code","local":"step-2-write-the-code","sections":[],"depth":3},{"title":"Step 3: Add Dependencies","local":"step-3-add-dependencies","sections":[],"depth":3},{"title":"Step 4: Customize Your Space","local":"step-4-customize-your-space","sections":[],"depth":3},{"title":"Step 5: Test and Deploy","local":"step-5-test-and-deploy","sections":[],"depth":3},{"title":"Bonus Challenges","local":"bonus-challenges","sections":[],"depth":3},{"title":"Share and Engage","local":"share-and-engage","sections":[],"depth":3},{"title":"Track Your Impact","local":"track-your-impact","sections":[],"depth":3}],"depth":2},{"title":"What’s Next?","local":"whats-next","sections":[],"depth":2}],"depth":1}">
	<link href="/docs/101-course/pr_4/en/_app/immutable/assets/0.e3b0c442.css" rel="modulepreload">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/entry/start.b6742992.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/chunks/scheduler.1d51f4c0.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/chunks/singletons.023d1c68.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/chunks/index.fa8592cf.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/chunks/paths.daa2f795.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/entry/app.8b986792.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/chunks/index.fda43871.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/nodes/0.b5fb3b56.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/chunks/each.e59479a4.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/nodes/6.a9b387c8.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/chunks/Tip.e808fe4c.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/chunks/CodeBlock.16130beb.js">
	<link rel="modulepreload" href="/docs/101-course/pr_4/en/_app/immutable/chunks/getInferenceSnippets.58a43ad0.js"><!-- HEAD_svelte-u9bgzb_START --><meta name="hf:doc:metadata" content="{"title":"Sharing What You’ve Built","local":"sharing-what-youve-built","sections":[{"title":"What You Can Share","local":"what-you-can-share","sections":[],"depth":2},{"title":"Creating Your First Space","local":"creating-your-first-space","sections":[],"depth":2},{"title":"Sharing your first dataset","local":"sharing-your-first-dataset","sections":[],"depth":2},{"title":"Exercise: Duplicate a Community Space","local":"exercise-duplicate-a-community-space","sections":[],"depth":2},{"title":"Exercise: Build a Dataset Visualization Space","local":"exercise-build-a-dataset-visualization-space","sections":[{"title":"What We’re Building","local":"what-were-building","sections":[],"depth":3},{"title":"Step 1: Create Your Space","local":"step-1-create-your-space","sections":[],"depth":3},{"title":"Step 2: Write the Code","local":"step-2-write-the-code","sections":[],"depth":3},{"title":"Step 3: Add Dependencies","local":"step-3-add-dependencies","sections":[],"depth":3},{"title":"Step 4: Customize Your Space","local":"step-4-customize-your-space","sections":[],"depth":3},{"title":"Step 5: Test and Deploy","local":"step-5-test-and-deploy","sections":[],"depth":3},{"title":"Bonus Challenges","local":"bonus-challenges","sections":[],"depth":3},{"title":"Share and Engage","local":"share-and-engage","sections":[],"depth":3},{"title":"Track Your Impact","local":"track-your-impact","sections":[],"depth":3}],"depth":2},{"title":"What’s Next?","local":"whats-next","sections":[],"depth":2}],"depth":1}"><!-- HEAD_svelte-u9bgzb_END --> <p></p> <h1 class="relative group"><a id="sharing-what-youve-built" 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="#sharing-what-youve-built"><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>Sharing What You’ve Built</span></h1> <p data-svelte-h="svelte-zblck4">Ready to contribute to the AI community? Sharing your work on Hugging Face helps others learn and gives you useful feedback. Whether you’ve created a cool demo, fine-tuned a model, or collected a useful dataset, the community wants to see what you’ve built!</p> <p data-svelte-h="svelte-1dj6j5c">Sharing your work helps others learn, gives you feedback to improve, and builds your reputation in the AI community. Plus, it’s easier than you might think.</p> <h2 class="relative group"><a id="what-you-can-share" 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="#what-you-can-share"><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>What You Can Share</span></h2> <p data-svelte-h="svelte-1kkw9oc">There are three main ways to share your AI work on Hugging Face:</p> <p data-svelte-h="svelte-131zf20"><strong>Models</strong> - Share trained or fine-tuned models that others can use directly or build upon</p> <p data-svelte-h="svelte-13et3f5"><strong>Datasets</strong> - Upload datasets you’ve collected, cleaned, or created for others to use in their projects</p> <p data-svelte-h="svelte-1wueozu"><strong>Spaces</strong> - Create interactive demos that let people try your AI applications in their browser</p> <div class="course-tip bg-gradient-to-br dark:bg-gradient-to-r before:border-green-500 dark:before:border-green-800 from-green-50 dark:from-gray-900 to-white dark:to-gray-950 border border-green-50 text-green-700 dark:text-gray-400"><p data-svelte-h="svelte-17lru2v">Spaces are a visible way to share your work. Interactive demos are useful for portfolios and feedback.</p></div> <h2 class="relative group"><a id="creating-your-first-space" 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="#creating-your-first-space"><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>Creating Your First Space</span></h2> <p data-svelte-h="svelte-ngg7ts">Spaces are the easiest and most visible way to share your AI work. Here’s how to create one:</p> <p data-svelte-h="svelte-x9mag4"><strong>1. Choose Your Framework</strong></p> <ul data-svelte-h="svelte-fgru5b"><li><strong>Gradio</strong>: Best for beginners - creates interfaces with just a few lines of Python</li> <li><strong>Streamlit</strong>: Great for data apps and dashboards</li> <li><strong>Static HTML</strong>: Full control for custom web experiences</li> <li><strong>Docker</strong>: Maximum flexibility for complex applications</li></ul> <p data-svelte-h="svelte-11f0eni"><strong>2. Create Your Space</strong></p> <ol data-svelte-h="svelte-bkh5q8"><li>Go to <a href="https://huggingface.co/new-space" rel="nofollow">huggingface.co/new-space</a></li> <li>Choose your framework and visibility (public or private)</li> <li>Write your app code in the main file (for example, an <code>index.html</code> with <code><h1>Hello World</h1></code>)</li> <li>Push your changes - your Space will build and deploy automatically!</li></ol> <p data-svelte-h="svelte-1i5z3g"><strong>3. Make It Great</strong></p> <ul data-svelte-h="svelte-sefc6k"><li>Add a clear title and description</li> <li>Include example inputs so users know what to try</li> <li>Write a good README explaining what your Space does</li> <li>Add screenshots or GIFs to show it in action</li></ul> <h2 class="relative group"><a id="sharing-your-first-dataset" 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="#sharing-your-first-dataset"><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>Sharing your first dataset</span></h2> <p data-svelte-h="svelte-10m7cbc">You can share small datasets too — they don’t need to be large LLM training corpora.</p> <p data-svelte-h="svelte-1vuuxmj"><strong>Uploading Datasets:</strong></p> <ol data-svelte-h="svelte-r2uz89"><li>Go to <a href="https://huggingface.co/new-dataset" rel="nofollow">huggingface.co/new-dataset</a></li> <li>Upload your data files (CSV, JSON, Parquet, etc.)</li> <li>Write a Dataset Card describing the data and how it was collected</li> <li>Include licensing information and any usage restrictions</li></ol> <p data-svelte-h="svelte-1qmbfb7"><strong>Documentation tips:</strong></p> <ul data-svelte-h="svelte-1g84as5"><li>Explain what your model/dataset does in simple terms</li> <li>Include example usage code</li> <li>Be honest about limitations and potential biases</li> <li>Add evaluation metrics if you have them</li> <li>Specify the license clearly</li></ul> <h2 class="relative group"><a id="exercise-duplicate-a-community-space" 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="#exercise-duplicate-a-community-space"><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>Exercise: Duplicate a Community Space</span></h2> <p data-svelte-h="svelte-17upw1g">The easiest way to get started is to duplicate a community space. This is handy if you want to use your own credits, do some private testing, or just customize the space to your liking.</p> <ol data-svelte-h="svelte-1xm27yb"><li>Go to the space you want to duplicate</li> <li>Click the menu icon in the top right and select “Duplicate this space”</li> <li>Name it something like <code>my-duplicate-space</code></li> <li>Click “Create Space”</li> <li>You can now edit the space and deploy it to your own account.</li></ol> <p data-svelte-h="svelte-1b6zc1e">For example, why not duplicate <a href="https://huggingface.co/spaces/nvidia/canary-1b-v2" rel="nofollow">this transcription space</a> from Nvidia and use it to transcribe your own audio files?</p> <h2 class="relative group"><a id="exercise-build-a-dataset-visualization-space" 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="#exercise-build-a-dataset-visualization-space"><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>Exercise: Build a Dataset Visualization Space</span></h2> <p data-svelte-h="svelte-1nuwt3s">Let’s put your knowledge into practice! We’ll create a simple Gradio Space that visualizes data from a Hugging Face dataset. This exercise will teach you the basics of Spaces while creating something useful.</p> <h3 class="relative group"><a id="what-were-building" 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="#what-were-building"><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>What We’re Building</span></h3> <p data-svelte-h="svelte-1wogy9z">A data explorer that lets users:</p> <ul data-svelte-h="svelte-p55umb"><li>Select different countries from a dataset</li> <li>View population statistics</li> <li>See results in both table and chart format</li></ul> <h3 class="relative group"><a id="step-1-create-your-space" 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="#step-1-create-your-space"><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>Step 1: Create Your Space</span></h3> <ol data-svelte-h="svelte-mpnr3s"><li>Go to <a href="https://huggingface.co/new-space" rel="nofollow">huggingface.co/new-space</a></li> <li>Name it something like <code>my-data-explorer</code></li> <li>Choose <strong>Gradio</strong> as your SDK</li> <li>Make it <strong>Public</strong> so others can see your work</li> <li>Click <strong>Create Space</strong></li></ol> <h3 class="relative group"><a id="step-2-write-the-code" 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="#step-2-write-the-code"><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>Step 2: Write the Code</span></h3> <p data-svelte-h="svelte-y8bppo">Replace the contents of <code>app.py</code> with this code:</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=""><!-- HTML_TAG_START --><span class="hljs-keyword">import</span> gradio <span class="hljs-keyword">as</span> gr
	<span class="hljs-keyword">import</span> pandas <span class="hljs-keyword">as</span> pd

	<span class="hljs-comment"># Sample dataset - in a real app, you'd load from Hugging Face datasets</span>
	data = {
	<span class="hljs-string">'Country'</span>: [<span class="hljs-string">'USA'</span>, <span class="hljs-string">'China'</span>, <span class="hljs-string">'India'</span>, <span class="hljs-string">'Germany'</span>, <span class="hljs-string">'Japan'</span>, <span class="hljs-string">'Brazil'</span>],
	<span class="hljs-string">'Population'</span>: [<span class="hljs-number">331</span>, <span class="hljs-number">1439</span>, <span class="hljs-number">1380</span>, <span class="hljs-number">83</span>, <span class="hljs-number">125</span>, <span class="hljs-number">213</span>],
	<span class="hljs-string">'GDP'</span>: [<span class="hljs-number">21.43</span>, <span class="hljs-number">14.34</span>, <span class="hljs-number">3.17</span>, <span class="hljs-number">3.84</span>, <span class="hljs-number">4.94</span>, <span class="hljs-number">1.61</span>],
	<span class="hljs-string">'Area'</span>: [<span class="hljs-number">9.8</span>, <span class="hljs-number">9.6</span>, <span class="hljs-number">3.3</span>, <span class="hljs-number">0.36</span>, <span class="hljs-number">0.38</span>, <span class="hljs-number">8.5</span>]
	}

	df = pd.DataFrame(data)

	<span class="hljs-keyword">def</span> <span class="hljs-title function_">explore_data</span>(<span class="hljs-params">country, show_chart</span>):
	<span class="hljs-string">"""Function to filter and display data based on user selection"""</span>

	<span class="hljs-keyword">if</span> country == <span class="hljs-string">"All"</span>:
	filtered_df = df
	title = <span class="hljs-string">"All Countries Data"</span>
	<span class="hljs-keyword">else</span>:
	filtered_df = df[df[<span class="hljs-string">'Country'</span>] == country]
	title = <span class="hljs-string">f"Data for <span class="hljs-subst">{country}</span>"</span>

	<span class="hljs-comment"># Create a simple text summary</span>
	summary = <span class="hljs-string">f"Showing data for <span class="hljs-subst">{<span class="hljs-built_in">len</span>(filtered_df)}</span> country(ies)"</span>

	<span class="hljs-keyword">if</span> show_chart <span class="hljs-keyword">and</span> <span class="hljs-built_in">len</span>(filtered_df) > <span class="hljs-number">1</span>:
	<span class="hljs-comment"># Create a simple bar chart using Gradio's built-in plotting</span>
	chart_data = filtered_df[[<span class="hljs-string">'Country'</span>, <span class="hljs-string">'Population'</span>]].values.tolist()
	<span class="hljs-keyword">return</span> filtered_df, summary, chart_data
	<span class="hljs-keyword">else</span>:
	<span class="hljs-keyword">return</span> filtered_df, summary, <span class="hljs-literal">None</span>

	<span class="hljs-comment"># Create the Gradio interface</span>
	<span class="hljs-keyword">with</span> gr.Blocks(title=<span class="hljs-string">"Data Explorer"</span>) <span class="hljs-keyword">as</span> demo:
	gr.Markdown(<span class="hljs-string">"# 📊 Country Data Explorer"</span>)
	gr.Markdown(<span class="hljs-string">"Explore population and economic data for different countries!"</span>)

	<span class="hljs-keyword">with</span> gr.Row():
	<span class="hljs-keyword">with</span> gr.Column():
	country_dropdown = gr.Dropdown(
	choices=[<span class="hljs-string">"All"</span>] + df[<span class="hljs-string">'Country'</span>].tolist(),
	value=<span class="hljs-string">"All"</span>,
	label=<span class="hljs-string">"Select Country"</span>,
	info=<span class="hljs-string">"Choose a country to explore its data"</span>
	)

	show_chart = gr.Checkbox(
	label=<span class="hljs-string">"Show Population Chart"</span>,
	value=<span class="hljs-literal">True</span>,
	info=<span class="hljs-string">"Display a chart when viewing multiple countries"</span>
	)

	explore_btn = gr.Button(<span class="hljs-string">"Explore Data"</span>, variant=<span class="hljs-string">"primary"</span>)

	<span class="hljs-keyword">with</span> gr.Column():
	summary_text = gr.Textbox(
	label=<span class="hljs-string">"Summary"</span>,
	interactive=<span class="hljs-literal">False</span>
	)

	<span class="hljs-keyword">with</span> gr.Row():
	data_table = gr.Dataframe(
	value=df,
	label=<span class="hljs-string">"Country Data"</span>,
	interactive=<span class="hljs-literal">False</span>
	)

	<span class="hljs-keyword">with</span> gr.Row():
	chart_plot = gr.BarPlot(
	x=<span class="hljs-string">"Country"</span>,
	y=<span class="hljs-string">"Population"</span>,
	title=<span class="hljs-string">"Population by Country (Millions)"</span>,
	label=<span class="hljs-string">"Population Chart"</span>,
	visible=<span class="hljs-literal">True</span>
	)

	<span class="hljs-comment"># Set up the interaction</span>
	explore_btn.click(
	fn=explore_data,
	inputs=[country_dropdown, show_chart],
	outputs=[data_table, summary_text, chart_plot]
	)

	<span class="hljs-comment"># Also trigger on dropdown change</span>
	country_dropdown.change(
	fn=explore_data,
	inputs=[country_dropdown, show_chart],
	outputs=[data_table, summary_text, chart_plot]
	)

	<span class="hljs-comment"># Launch the app</span>
	<span class="hljs-keyword">if</span> __name__ == <span class="hljs-string">"__main__"</span>:
	demo.launch()<!-- HTML_TAG_END --></pre></div> <h3 class="relative group"><a id="step-3-add-dependencies" 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="#step-3-add-dependencies"><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>Step 3: Add Dependencies</span></h3> <p data-svelte-h="svelte-1p5veb8">Create a <code>requirements.txt</code> file with:</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=""><!-- HTML_TAG_START --><span class="hljs-attribute">gradio
	pandas</span><!-- HTML_TAG_END --></pre></div> <h3 class="relative group"><a id="step-4-customize-your-space" 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="#step-4-customize-your-space"><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>Step 4: Customize Your Space</span></h3> <ol data-svelte-h="svelte-1769xyc"><li><strong>Update the README.md</strong> with a description:</li></ol> <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=""><!-- HTML_TAG_START --><span class="hljs-section"># Country Data Explorer</span>

	A simple Gradio app that lets you explore country statistics including population, GDP, and area data.

	<span class="hljs-section">## Features</span>
	<span class="hljs-bullet">-</span> Filter data by country
	<span class="hljs-bullet">-</span> View data in table format
	<span class="hljs-bullet">-</span> Visualize population with charts

	Built as part of the Hugging Face 101 course!<!-- HTML_TAG_END --></pre></div> <ol start="2" data-svelte-h="svelte-zr3b9l"><li><strong>Add example data</strong> in the description so users know what to expect</li></ol> <h3 class="relative group"><a id="step-5-test-and-deploy" 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="#step-5-test-and-deploy"><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>Step 5: Test and Deploy</span></h3> <ol data-svelte-h="svelte-1jkahom"><li>Commit your changes (the Space will automatically rebuild)</li> <li>Wait for the build to complete (check the logs if there are errors)</li> <li>Test your Space by trying different country selections</li> <li>Share the link with friends!</li></ol> <h3 class="relative group"><a id="bonus-challenges" 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="#bonus-challenges"><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>Bonus Challenges</span></h3> <p data-svelte-h="svelte-di614u">Once your basic Space is working, try these improvements:</p> <ol data-svelte-h="svelte-l5zasn"><li><strong>Real Dataset</strong>: Replace the sample data with a real dataset from <a href="https://huggingface.co/datasets" rel="nofollow">Hugging Face Datasets</a></li> <li><strong>More Visualizations</strong>: Add different chart types (pie charts, scatter plots)</li> <li><strong>Better Styling</strong>: Customize the appearance with CSS</li> <li><strong>More Interactions</strong>: Add filtering by population range or GDP</li></ol> <div class="course-tip bg-gradient-to-br dark:bg-gradient-to-r before:border-green-500 dark:before:border-green-800 from-green-50 dark:from-gray-900 to-white dark:to-gray-950 border border-green-50 text-green-700 dark:text-gray-400">Space not working? Check the "Logs" tab in your Space for errors. Common issues include missing dependencies in `requirements.txt` or syntax errors.</div> <h3 class="relative group"><a id="share-and-engage" 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="#share-and-engage"><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>Share and Engage</span></h3> <p data-svelte-h="svelte-558ks0">Once your Space is working, promoting it helps you get feedback and connect with the community. Share the link in the Hugging Face Discord to get immediate feedback from experienced developers. Post about it on social media with #HuggingFace to reach a broader audience. Add it to your portfolio or resume as a concrete demonstration of your AI skills.</p> <p data-svelte-h="svelte-lefrdj">Connecting with others in the community enhances your learning and opens collaboration opportunities. Browse other data visualization Spaces for inspiration and to understand different approaches to similar problems. Comment on Spaces you find interesting - creators appreciate feedback and it often leads to interesting conversations.</p> <h3 class="relative group"><a id="track-your-impact" 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="#track-your-impact"><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>Track Your Impact</span></h3> <p data-svelte-h="svelte-mn3yzx">Understanding how your Space performs helps you improve and learn what works. Monitor how many people have tried your Space using the analytics available in your Space settings. Pay attention to the feedback you’re getting in comments and discussions. Notice whether people are finding it useful for exploring data or if they’re using it in ways you didn’t expect.</p> <h2 class="relative group"><a id="whats-next" 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="#whats-next"><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>What’s Next?</span></h2> <p data-svelte-h="svelte-6d4n99">Ready to build more advanced applications? In the next chapters, we’ll explore how to combine multiple AI models, work with APIs, and create more sophisticated demos. The foundation you’ve built here will serve you well as we move into more complex territory.</p> <a class="!text-gray-400 !no-underline text-sm flex items-center not-prose mt-4" href="https://github.com/huggingface/101-course/blob/main/chapters/en/chapter1/4.mdx" 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_kib1ob = {
	assets: "/docs/101-course/pr_4/en",
	base: "/docs/101-course/pr_4/en",
	env: {}
	};

	const element = document.currentScript.parentElement;

	const data = [null,null];

	Promise.all([
	import("/docs/101-course/pr_4/en/_app/immutable/entry/start.b6742992.js"),
	import("/docs/101-course/pr_4/en/_app/immutable/entry/app.8b986792.js")
	]).then(([kit, app]) => {
	kit.start(app, element, {
	node_ids: [0, 6],
	data,
	form: null,
	error: null
	});
	});
	}
	</script>

Xet Storage Details

Size:: 44 kB
Xet hash:: 9a743f1062b98003821d6ffd019d4c7f561a40ed82c1b6d451a2d3b79a14722f

Xet efficiently stores files, intelligently splitting them into unique chunks and accelerating uploads and downloads. More info.