README.md

---
title: README
emoji: 💻
colorFrom: indigo
colorTo: gray
sdk: static
pinned: false
---

<div class="grid lg:grid-cols-2 gap-x-4">
   <h2 class="my-8 lg:col-span-2" style="font-size:20px; font-weight:bold">
        Welcome to the <a href="https://gradio.app/" target="_blank" style="text-decoration: underline">Gradio</a> Blocks Party 🥳  
   </h2>
   <br />
   <p class="lg:col-span-2">
    Happy to invite you to the Gradio Blocks Party - a community event in which we will setup spaces for models using the new Gradio Blocks API. Blocks allows you to build web-based demos in a flexible way using the Gradio library. The event will take place from May 11th to 31st. We will be organizing this event on github and the huggingface discord channel.
   </p>
   <br />
   <video class="lg:col-span-2"
 controls autoplay>
   <source src="https://huggingface.co/spaces/Gradio-Blocks/README/resolve/main/dalle.mov" type="video/mp4">
   Your browser does not support the video tag.
   </video>
   <br />   
   <h3  class="my-8 lg:col-span-2" style="font-size:20px; font-weight:bold">What is Gradio?</h3>
   <br />
   <p class="lg:col-span-2">
     Gradio is a Python library that allows you to quickly build web-based machine learning demos, data science dashboards, or other kinds of web apps, entirely in Python. These web apps can be launched from wherever you use Python (jupyter notebooks, colab notebooks, Python terminal, etc.) and shared with anyone instantly using Gradio's auto-generated share links. To learn more about Gradio see the Getting Started Guide:  <a href="https://gradio.app/getting_started/" target="_blank" style="text-decoration: underline">https://gradio.app/getting_started/</a>
   </p>
   <br />
   <h3  class="my-8 lg:col-span-2" style="font-size:20px; font-weight:bold">What is Blocks?</h3>
   <br />
   <p class="lg:col-span-2">
     <code>gradio.Blocks</code> is a low-level API that allows you to have full control over the data flows and layout of your application. You can build very complex, multi-step applications using Blocks.
     If you have already used gradio.Interface, you know that you can easily create fully-fledged machine learning demos with just a few lines of code. The Interface API is very convenient but in some cases may not be sufficiently flexible for your needs. For example, you might want to:
   </p>
   <ul class="lg:col-span-2" style="list-style: circle inside">
         <li class="my-4">Group together related demos as multiple tabs in one web app</li>
         <li class="my-4">Change the layout of your demo instead of just having all of the inputs on the left and outputs on the right</li>
         <li class="my-4">Have multi-step interfaces, in which the output of one model becomes the input to the next model, or have more flexible data flows in general</li>
         <li class="my-4">Change a component's properties (for example, the choices in a Dropdown) or its visibilty based on user input</li>
   </ul>
   <br />
   <p class="lg:col-span-2">to learn more about Blocks see the guide <a href="   https://www.gradio.app/introduction_to_blocks/" target="_blank" style="text-decoration: underline">https://www.gradio.app/introduction_to_blocks/</a></p> 
   <br />
   <h3  class="my-8 lg:col-span-2" style="font-size:20px; font-weight:bold">How Does Gradio and Hugging Face work together?</h3>
   <br />
   <p class="lg:col-span-2">
      Hugging Face Spaces is a free hosting option for Gradio demos. Spaces comes with 3 SDK options: Gradio, Streamlit and Static HTML demos. Spaces can be public or private and the workflow is similar to github repos. There are over 2000+ Gradio spaces currently on Hugging Face. Learn more about spaces here:  <a href="https://huggingface.co/docs/hub/spaces" target="_blank" style="text-decoration: underline">https://huggingface.co/docs/hub/spaces</a> 
   </p>
   <br />
   <h3 class="my-8 lg:col-span-2" style="font-size:20px; font-weight:bold">Event Plan</h3>
   <p class="lg:col-span-2">main components of the event consist of:</p>
   <ul class="lg:col-span-2" style="list-style: circle inside">
      <li class="my-4">1. Learning about Gradio and the new Blocks Feature</li>
      <li class="my-4">2. Building your own Blocks demo using Gradio and Hugging Face Spaces</li>
      <li class="my-4">3. Submitting your demo on Spaces to the Gradio Blocks Party Organization</li>
   </ul>
   <br />
   <h3 class="my-8 lg:col-span-2" style="font-size:20px; font-weight:bold">Example spaces using Blocks</h3>
   <ul class="lg:col-span-2" style="list-style: circle inside">
      <li class="my-4"><a href="https://huggingface.co/spaces/akhaliq/ArcaneGAN-blocks" target="_blank" style="text-decoration: underline">https://huggingface.co/spaces/akhaliq/ArcaneGAN-blocks</a></li>
      <li class="my-4"><a href="https://huggingface.co/spaces/merve/gr-blocks" target="_blank" style="text-decoration: underline">https://huggingface.co/spaces/merve/gr-blocks</a></li>
      <li class="my-4"><a href="https://huggingface.co/spaces/osanseviero/tortoisse-tts" target="_blank" style="text-decoration: underline">https://huggingface.co/spaces/osanseviero/tortoisse-tts</a></li>
      <li class="my-4"><a href="https://huggingface.co/spaces/akhaliq/CaptchaCracker" target="_blank" style="text-decoration: underline">https://huggingface.co/spaces/akhaliq/CaptchaCracker</a></li>
   </ul>
   <br />
   <p class="lg:col-span-2">To participate in the event</p>
   <ul class="lg:col-span-2" style="list-style: circle inside">
      <li class="my-4">Join the organization for Blocks event:<a href="https://huggingface.co/Gradio-Blocks" style="text-decoration: underline">https://huggingface.co/Gradio-Blocks</a></li>
      <li class="my-4">Join the discord:<a href="https://discord.com/invite/feTf9x3ZSB" style="text-decoration: underline">https://discord.com/invite/feTf9x3ZSB</a> </li>
   </ul>
   <p class="lg:col-span-2">Participants will have a month to build and share Gradio demos using the Blocks feature. We will share a list of ideas of spaces that can be created using blocks or participants are free to try out their own ideas. At the end of the event, spaces will be evaluated for creativity and prizes will be given </p>
   <br />
   <p class="lg:col-span-2">potential ideas for creating spaces: </p>
   <br />
   <ul class="lg:col-span-2" style="list-style: circle inside">
      <li class="my-4">papers from <a href="https://paperswithcode.com/" style="text-decoration: underline">https://paperswithcode.com/</a></li>
      <li class="my-4">themed spaces: Vision, NLP, Audio based spaces</li>
      <li class="my-4">Models from huggingface model hub</li>
      <li class="my-4">Models from other model hubs
         <ul class="lg:col-span-2" style="list-style: circle inside">
            <li class="my-4">Tensorflow Hub: see example Gradio demos at <a href="https://huggingface.co/tensorflow" style="text-decoration: underline">https://huggingface.co/tensorflow</a></li>
            <li class="my-4">Pytorch Hub: see example Gradio demos at <a href="https://huggingface.co/pytorch" style="text-decoration: underline">https://huggingface.co/pytorch</a></li>
            <li class="my-4">ONNX model Hub: see example Gradio demos at <a href="https://huggingface.co/onnx" style="text-decoration: underline">https://huggingface.co/onnx</a></li>
            <li class="my-4">PaddlePaddle Model Hub: see example Gradio demos at <a href="https://huggingface.co/PaddlePaddle" style="text-decoration: underline">https://huggingface.co/PaddlePaddle</a></li>
         </ul>
      </li>
      <li class="my-4">participant ideas</li>
   </ul>
   <br />
   <br />
   <h3 class="my-8 lg:col-span-2" style="font-size:20px; font-weight:bold">Prizes</h3>
   <br />
   <ul class="lg:col-span-2" style="list-style: circle inside">
   <li class="my-4"><a href="https://huggingface.co/pricing">Hugging Face PRO subscription</a> 1 month for top 25 winners and 1 year for 1st place winner!</li>
   <li class="my-4"><a href="https://huggingface.co/pricing">Hugging Face PRO subscription</a> badge on Hugging Face for winners</li>
   <li class="my-4">Gradio badge for everyone participating!</li>
   <li class="my-4">Blocks event badge on HF for all participants!</li>
   <li class="my-4">Swag from <a href="https://huggingface.myshopify.com/">Hugging Face merch shop</a>: t-shirts, hoodies, mugs of your choice for top 10 winners!</li>
   <li class="my-4">Embedding your Gradio Blocks demo in the Gradio Blog for 1st place winner</li>
   <li class="my-4">Gradio Team Office Hour for 1st place winner</li>
   </ul>
   <br />
   <h3 class="my-8 lg:col-span-2" style="font-size:20px; font-weight:bold">Prizes Criteria</h3>
   <ul class="lg:col-span-2" style="list-style: circle inside">
      <li class="my-4">Staff Picks</li>
      <li class="my-4">Most liked Spaces</li>
      <li class="my-4">Community Pick (voting)</li>
      <li class="my-4">Most Creative Space (voting)</li>
   </ul>
   <br />
   <h3 class="my-8 lg:col-span-2" style="font-size:20px; font-weight:bold">Creating a Gradio demo on Hugging Face Spaces</h3>
   <p class="lg:col-span-2">Once a model has been picked from the choices above, you can share a model in a Space using Gradio. Read more about how to add Gradio spaces: <a href="https://huggingface.co/blog/gradio-spaces" style="text-decoration: underline">https://huggingface.co/blog/gradio-spaces</a></p>
   <br />

   <p class="lg:col-span-2">Steps to add Gradio Spaces to the Gradio Blocks Party org</p>
   <br />
   <ul class="lg:col-span-2" style="list-style: circle inside">
      <li class="my-4">Create a account on Hugging Face</li>
      <li class="my-4">Join the Gradio Blocks Party Organization by clicking Join Organization Button in the Org Page</li>
      <li class="my-4">Once approved add your space using the Gradio SDK</li>
   </ul>
</div>