Leaning in for HuggingFace Spaces
Published: 2022-07-25 09:00:08

---
title: Leaning in for HuggingFace Spaces
published: true
date: 2022-07-25 03:57:00 UTC
tags: 
canonical_url: https://dataroots.io/research/contributions/discovering-hugging-face
---

Deploying your Machine Learning model is often the cherry on the cake   
for a Machine Learning Engineer. After putting a lot of effort in building  
your model, it is immensely satisfying to be able to send it off on an   
adventure of its own, hoping it conquers the world. However, the size of the   
world is vast, so we better equip our model with a quick and able ride. The   
question of whether to build our own horse in the cloud or borrow   
someone else’s horse for the trip?

I recently faced this question myself when looking for an easy way to host a   
demo of my application and share it within my company and, by   
extension, the world. Luckily, I found a readily-saddled noble steed in   
the HuggingFace community stables. (We all knew HuggingFace as a   
friendly-emoji-branded platform/community that offers open-source   
solutions to explore, train, borrow and fine-tune deep learning models.   
Recently, HuggingFace also provides us with a platform to build and host   
our own cool applications. Let’s take you with me on how I mounted my   
app, dug my spurs in and rode the HuggingFace parade-horse, Space,   
to the horizon.

1. **Decide to go on an adventure: train a cool model**

First off, you need to have a model to showcase. For me, that was the   
easiest part. During my AI-internship at [dataroots](https://dataroots.io/), I developed and trained   
a segmentation model that detects sofas on images and then changes their style, using a Style-Transfer model, extracting the style from a general image.   
I baptized the model: SofaStyler (about which you can read more [here](dataroots.ghost.io/design-your-dream-home-with-your-personal-ai)).

After developing my deep learning model, I needed a good way to   
showcase it to the company. I figured that the best way to showcase my   
model was to allow my colleagues to explore and play around with the model.   
Note to myself: remember it is always fun to see your model being used for what it is supposed for... and having it's limits tested in the most creative ways:

[![](https://dataroots.ghost.io/content/images/2022/05/Screenshot-2022-05-19-at-14.13.06.png)](https://www.youtube.com/embed/ub82Xb1C8os)

All frolicking aside, I needed my demo to be practical and interactive, and I needed it quickly! Being a machine learning engineer and not a front-end developer, I wanted to avoid turning and twisting the knobs of HTML and CSS. Luckily, that’s exactly what your options are for your HuggingFace Space; it integrates perfectly with both [Streamlit](https://streamlit.io/) and [Gradio](https://gradio.app/).

**2. Getting starting directions: creating a HuggingFace Space**

Next, we create our own HuggingFace Space, which requires only as much   
as signing up for an account via [https://huggingface.co/join](https://huggingface.co/join), and creating your own Space.

The only knobs to turn here are:

- giving your space a name
- choosing an SDK for the front-end
- choosing whether to immediately make your space available to the public or not.

![Graphical user interface, application, website

Description automatically generated](https://lh4.googleusercontent.com/HgSH_DiZuaid3eAoFrvNa6l2-ba6arrknlTZsPRQuHc9uTy9hCrP5fWEhwA0pAL5UoVZgti5_4svSzR3791LsbGq85VUCv6Xj0ZHnBnErR5a-ZMe5YZQz_zJACc-xfIc9XjC2jUZOM1bTbcuAbnSvbSZHshk)

Your HuggingFace Space is basically a Git-repository for hosting your model. You only need to add the following files to make it run smoothly:

1. A _ **requirements.txt** _ file containing all packages to (pip) install to make sure all model dependencies are covered. 
2. A (few) _ **folders** _ containing your saved models (or model checkpoints) and some Python files to be used for making predictions/using the model. You can skip this step if your model is available on PyPi. 
3. An **_app.py_** file to design and launch your application. HuggingFace Spaces will automatically host your model using this file.

So, let's dig deeper in what creating this _app.py_ file actually entails:

**3. Taking your first steps: building the front-end**

I started off building my application with [Gradio](https://gradio.app/), an open-source python library which allows you to create front-end UIs for your application in just a few lines of code. There are many tutorials available online, but the image below shows how easy it really is.

- You import gradio and all model functions to use your model (from the provided files). 
- You define a prediction function that uses your model to some input data.
- You define the interface which applies the prediction function to some input data. In this, you are basically building an interface to facilitate users to (1) feed the input data into the model and (2) define what the output should look like. 
- Finally, you launch the interface by just calling the launch() method on your interface. 

![Graphical user interface, text, application, email

Description automatically generated](https://lh4.googleusercontent.com/Reg2yy4G4_eCs1IeF6WdtbZ5ljabOcLICNu2a2BBVazQ1HtpNmhEdMVkXr20pWWr_IQsgOIOPfN9JpQaY3zvhjMyO5ppAPh4l-wYTjD0lN6pEQuY2G9z9YOkyXPSI7nTwm4xi3BfVp0xpmSCKIkLWZkdvbsk)

HuggingFace immediately deploys your application as you drop the _app.py_ file in your file repository. It is really that easy!  
Below you can see a demo of the front-end that I build for my own SofaStyler application.

<video src="https://dataroots.ghost.io/content/media/2022/05/gradio_laptop-1.mp4" poster="https://img.spacergif.org/v1/1280x620/0a/spacer.png" width="1280" height="620" loop autoplay muted playsinline preload="metadata" style="background: transparent url('https://dataroots.ghost.io/content/images/2022/05/media-thumbnail-ember57.jpg') 50% 50% / cover no-repeat;"></video>
<button><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M23.14 10.608 2.253.164A1.559 1.559 0 0 0 0 1.557v20.887a1.558 1.558 0 0 0 2.253 1.392L23.14 13.393a1.557 1.557 0 0 0 0-2.785Z"></path></svg></button>

<button><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M23.14 10.608 2.253.164A1.559 1.559 0 0 0 0 1.557v20.887a1.558 1.558 0 0 0 2.253 1.392L23.14 13.393a1.557 1.557 0 0 0 0-2.785Z"></path></svg></button><button><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><rect x="3" y="1" width="7" height="22" rx="1.5" ry="1.5"></rect><rect x="14" y="1" width="7" height="22" rx="1.5" ry="1.5"></rect></svg></button>0:00
/
<input type="range" max="100" value="0"><button>1×</button><button><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M15.189 2.021a9.728 9.728 0 0 0-7.924 4.85.249.249 0 0 1-.221.133H5.25a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h1.794a.249.249 0 0 1 .221.133 9.73 9.73 0 0 0 7.924 4.85h.06a1 1 0 0 0 1-1V3.02a1 1 0 0 0-1.06-.998Z"></path></svg></button><button><svg xmlns="http://www.w3.org/2000/svg" viewbox="0 0 24 24"><path d="M16.177 4.3a.248.248 0 0 0 .073-.176v-1.1a1 1 0 0 0-1.061-1 9.728 9.728 0 0 0-7.924 4.85.249.249 0 0 1-.221.133H5.25a3 3 0 0 0-3 3v2a3 3 0 0 0 3 3h.114a.251.251 0 0 0 .177-.073ZM23.707 1.706A1 1 0 0 0 22.293.292l-22 22a1 1 0 0 0 0 1.414l.009.009a1 1 0 0 0 1.405-.009l6.63-6.631A.251.251 0 0 1 8.515 17a.245.245 0 0 1 .177.075 10.081 10.081 0 0 0 6.5 2.92 1 1 0 0 0 1.061-1V9.266a.247.247 0 0 1 .073-.176Z"></path></svg></button><input type="range" max="100" value="100">

_A demo of the front-end I build for my SofaStyler app, coded with Gradio_

I already told your that your HuggingFace Space was basically a Git-repository for hosting your model. Well, if it walks like Git and it talks like Git, it’s probably Git. As such, it’s quite easy to [maintain](https://huggingface.co/docs/hub/spaces#manage-app-with-github-actions) your HuggingFace Space (in a CI/CD way) from Github using GitHub Actions, treating your HuggingFace Space as a remote to your existing Git repository.

**4. Dig your spurs and off you go-oh-oh-oh!**

I just created a demo application for my model which everyone can immediately interact and play around with it! Such a great feeling! HuggingFace takes care of all the rest!

In the back, HuggingFace provides you a compute instance with 8CPU cores and 16GB of RAM, entirely free of cost! Hence, you are fully equipped to ride fast into the horizon… **but maybe not that far…**

There are some limitations to using HuggingFace Space compute instances. Any interactive job submitted through the interface gets **_exactly 1 minute of computing time_** before your oh-so-noble steed bucks and throws you out of the saddle!   
This one-minute time-out can be avoided by allowing jobs to queue up. This queueing process, however, comes at the cost of much higher latency of your application as concurrent users of your app will find their jobs run sequentially through the compute. It's needless to say that popular apps might start to face quite some waiting time.

How about putting our inference on **GPU-steroids**? The answer, my friend, is yes we can! Well, you can if you have a [paid subscription](https://huggingface.co/pricing). Upon request, you can get yourself a T4 GPU to be used on a case-by-case basis. So you can be sure that your application will run blazingly fast! This increased the horsepower of our application up to six times!

Alas, so it will your bill. HuggingFace provisions the GPU to any single space you like for a whopping $150 per month (paid up front)! You read it well: to any single space. This means you can nor share GPU power among multiple spaces or applications, nor reassign it to another space at will. So for each space you want to put on steroids, you will need to cough up quite the budget each month. So you better make sure your app conquers the world quickly with heavy usage to get your money’s worth!

In the end, I still love the way HuggingFace is making it possible to easily develop a user interface for my models and to host these models free of cost. It's a great way to get models out of your Git-repos and show what they are capable of!

Try out the SofaStyler app (on steroids during June 2022) using the link below:

[

SofaStyler - a Hugging Face Space by dataroots

Discover amazing ML apps made by the community

 ![](https://huggingface.co/favicon.ico)a Hugging Face Space by dataroots

 ![](https://thumbnails.huggingface.co/social-thumbnails/spaces/dataroots/SofaStyler.png)
](https://huggingface.co/spaces/dataroots/SofaStyler)