Convert Your AI Ideas into Working Demos on Hugging Face Spaces

Hugging Face Spaces is an open source app repository, that lets you create, host and demo your AI/ML applications for free!

Photo by Mika Baumeister on Unsplash

Introduction

Showing off your AI skills has never been easier! Just a couple of years back, if a Data Scientist had an idea, (s)he had to work on it from scratch, hustle to make it accurate, and then get the project hosted on the cloud for some price. A project needed a lot of effort, was more about a team effort and it was a time-consuming process. What about now? Well now the dynamics have completely changed and for the good. The complete process can be done within a couple of hours! And all of this is possible with the advent of generic AI models (like language models in NLP and CLIP for CV) and the availability of free application hosting platforms like Hugging Face Spaces.

In this article, I will showcase my journey of converting simple ideas into working demos, and all under 75 lines of code! For this, we will go through the ideation and development process of the two Spaces demos. Let’s get started! 💨

SummarizeLink

The problem

Internet is made up of web page links and hence it’s only fair that many articles, tweets, LinkedIn posts, etc contain links to other web pages as well. But isn’t it tedious to open and go through all the links on the page you are browsing? And if that link directs to a long article — good luck 🤯

The idea

How can we solve this problem? Ideally, wouldn’t it be great if we had an intelligent assistant who can magically summarize the content of a link for you? Let's create such an assistant!

The approach

Well to make this idea a reality, we need two things,

• A link crawler: a tool that will open the link (internally) and extract out all of the text from it. We can use newspaper3k python package for this.
• A text summarizer: an AI model that takes extracted text as input and generates a small summary. We can use transformers python package for this.

We also need to create a dashboard for the demo, for which we can use streamlit python package.

The code

The complete code is available here. It is also discussed below,

Code [Image by Author]

Let’s go through the code in detail,

• Line 1 to 5: importing the necessary libraries.
• Line 8 to 18: We start with setting the page title and layout. Then we create the transformers summarize pipeline function and use it to load the model.
• Line 20 to 38: We create a function that takes URL as an input and returns the crawled text (link content) as output.
• Line 42 to 50: we are just streamlit app design code to put texts, create edit text boxes and sidebar to for a couple of setting sliders.
• Line 53 to 69: this is where the main magic happens! We first check if the “Summarize” button is clicked. If yes, then we pass the text of the edit box (that contains the URL) to the URL content extracting function. We take the content output and call the summarization pipeline on it. Finally, we print the summary in the app.

The demo

The working demo with code is available here. Do check it out. Also, a sample image is provided below,

SummarizeLink demo available here [Image by Author]

EmojiFinder

The problem

Have you ever felt like completing your text with an emoji but couldn’t do so, as you don’t know which emoji to pick? And I can understand, as what we write doesn’t explicitly convey how we feel. That happened a lot with me, and I wished there was something to help me. But you know as they say, “God helps those who help themselves” ⛪ (fun fact: this church emoji was suggested by EmojiFinder if you use the quote!)

The idea

We need an app that takes text as input and provides the top “matching” emojis as output. Also, this “matching” needs to have some flavor of semantic similarity rather than a pure keyword match (from the above example, God → Church)

The approach

To make this idea a reality, we need two things,

• Emoji description data: where we have a large collection of emojis with their name and short description. UnicodeOrg provides such a list here, that could require some cleaning. A cleaned CSV version is provided here.
• A text similarity model: that will compare the input text against all of the emoji’s descriptions and return the top matching ones. We can use sentence_transformers python package for this, as they have lots of ready-made models that can perform the sentence similarity task. Some of the models are all-MiniLM-L6-v2, paraphrase-albert-small-v2, paraphrase-MiniLM-L3-v2, all-distilroberta-v1, all-mpnet-base-v2 . A complete list is provided here.

We also need to create a dashboard for the demo, for which we can use streamlit python package.

The code

The complete code is available here. It is also discussed below,

Code [Image by Author]

Let's go through the code in detail,

• Line 1 to 5: loading necessary python packages.
• Line 7 to 24: we start with setting the page title and layout. Next, we define the function that loads the sentence similarity model. Finally, we load the emoji description CSV and select only the necessary columns.
• Line 27 to 34: the function to clean the emoji so that it can be displayed in the app properly.
• Line 37 to 46: the function that takes the input text (query), target sentences (all emojis descriptions), and then embeds them using the sentence encoding model. Then the top N (here 5) most similar emoji descriptions are found for the query using cosine similarity. Their indices are returned back.
• Line 51 to 57: App designing lines including header, app description, sidebar sliders, etc.
• Line 60: loading the sentence similarity model.
• Line 63 to 74: We check if the button is clicked or not. If it is, we call the sentence similarity function and print the top matching emojis.

The demo

The working demo with code is available here. Do check it out. Also, a sample image is provided below,

EmojiFinder demo available here [Image by Author]

Conclusion

As we saw, it is super easy (at least the implementation part) to solve your daily life problems by creating AI-powered solutions and making them available to the world for free using Hugging Face Spaces. And both the examples had less than 75 lines of code (including the UI part, generous comments & formatting)! So if you also have a problem in mind, you just need to clear the huddle of formulating the approach, as after that, the AI community with its huge repository of open source models and tools, has got you covered! 😃

You can connect with me on LinkedIn or Twitter. To read more such articles, visit my Medium homepage or personal website.

Cheers.