Build robust front-end Python web applications with Streamlit. Explore integrating Python libraries, creating visualizations, interactive widgets, and deploying on Streamlit cloud.

“Building web appsUIs with Python and Streamlit”.png

finalStreamlitDocker1.0.tar.gz

streamlit

streamlitcode

train

SPAUIModel

Challenge1

Challenge1Code

Chapter2SPA

chapter2SPAplot

SPAPLOT

classifierStreamlit

Challenge2

SPAHTML

Chapter3SPA

AssemblyAI

WordCloudsSPA

WordCloudsSPA-copy

YoutubeSTreamlitSPA

YoutubeSTreamlit

YoutubeSTreamlitSPA-copy

YoutubeCode

streamlitHello

WordCloud

WordCloudsSPAFinal

Python is the premier programming language for data science and machine learning, but its native strengths for back-end development can leave developers scrambling for a front-end solution. Enter Streamlit, a robust open-source library for developing front-end applications with Python.

This course is a comprehensive introduction to building Streamlit applications integrated with different Python libraries. You’ll be walked through successive projects to create visualizations, display interactive widgets, and customize layouts. You won’t just display data but work on data transformations using Streamlit interfaces and become familiar with basic functionality for native Python applications like caching and placeholders. You’ll wrap up with deploying your application using the Streamlit cloud.

By the end of this course, you’ll be ready to give your Python-based data science and machine learning applications robust user interfaces using Streamlit.

Building the Frontend of Python Web Applications with Streamlit

## Scrape GitHub data
Create a function to get the data:
```python
def getData(userName):
   pass
```
The URL `https://github.com/{user_name}?tab=repositories` contains the user’s information and their recent public repositories. We’ll use the `requests` library to get the contents of the page.








Let’s run the following code to scrape the user’s data:

import requests
userName = input("Enter Github user name:  ")
url = "https://github.com/{}?tab=repositories".format(userName)
page = requests.get(url)
decoded = page.content.decode("utf-8") # Converting content into HTML
# Creating and saving html file
f = open("index.html",'w')
f.write(decoded)
f.close()

import React from 'react';
import { shallow, configure } from 'enzyme';
import Adapter from 'enzyme-adapter-react-16';

configure({ adapter: new Adapter() });

import HelloWorld from './app';

var TestResult = function() {
    this.succeeded = false;
    this.reason = "";
    this.input = "";
    this.expected_output = "";
    this.actual_output = "";
}

export const executeTests = function() {

  var results = [];

  result = new TestResult();
  result.input = 'HelloWorld Component';
  result.expected_output = "span containing text 'Hello World'"

  let wrapper = shallow(<HelloWorld />);

  // Call your Challenge function here.

  let type = wrapper.type();
  let testSuccessful = true;
  let failureReason;

  if (type !== 'span') {
    testSuccessful = false;
    failureReason = "You need to render exactly one span HTML element";
  } else if (wrapper.props().children != "Hello World") {
     testSuccessful = false;
     failureReason = "You have rendered wrong message in your span element";
  }

  result.actual_output = wrapper.html();

  if (testSuccessful) {
    result.succeeded = true;
    result.reason = "Succeeded"
  } else {
    result.succeeded = false;
    result.reason = failureReason;
  }

  results.push(result);

  return results;
}


React

Dart

GoJS React

Typescript React

Vue.js

Next, we create an instance of `BeautifulSoup` and pass `page.content` as the parameter. We create an empty dictionary to store the user information.

```python
soup = BeautifulSoup(page.content , 'html.parser')
info = {}
```
We’ll scrape the following information:
Full name
- Image
- Number of followers
- Number of users following
- Location (if it exists)
- Portfolio URL (if it exists)
- Repo name, repo link, repo last update, repo programming language, repo description


### Full name
The full name is inside an element with class name `vcard-fullname`. 
```Python
#full Name
info['name'] = soup.find(class_ = 'vcard-fullname').get_text()
```
The `.get_text()` method retrieves the relevant text inside the element.

We use Beautiful Soup’s `.find()` method and pass the class name.

### Image
Similar to the full name, the image is inside an element with the class name `avatar-user`.
```python
#image
info['image_url'] =  soup.find(class_ = 'avatar-user')['src']
```
Since we’re only interested in the image source, we store only the `href` value.

### Number of followers/following
To get the followers/following information, we can use CSS attribute selectors. If we use the inspect element feature on the number of followers and users following, we’ll see that they have an `href` tag that contains the word `followers` and `following` respectively. We’ll use Beautiful Soup’s `.select_one()` method to get the required data.

```python
#followers and following
info['followers'] = soup.select_one("a[href*=followers]").get_text().strip().split('\n')[0]
info['following'] = soup.select_one("a[href*=following]").get_text().strip().split('\n')[0]
```
Since we’re only interested in the number, we need to manipulate the text and extract the number out of it.

### Location and portfolio URL
Upon inspecting the location and URL, we’ll notice that they are stored inside a `<li>` tag and have an attribute `itemprop`. The `itemprop` value for location contains the word `home` and for the URL, it contains `url`. We need to ensure that the case of the string matches. We’ll use the `.select_one()` method to get the relevant information.

> **Note:** The method `select_one()` finds only the first `tag` that matches a selector.


```python
#location
try:
   info['location'] = soup.select_one('li[itemprop*=home]').get_text().strip()
except:
   info['location'] = ''

#url
try:
   info['url'] = soup.select_one('li[itemprop*=url]').get_text().strip()
except:
   info['url'] = ''
```
Since not all users might have their `location` and `url`, we need to put our code inside a `try`-`except` block.

### User’s recent public repositories
All the repositories are stored inside a parent element which has a class name `source`. First, we’ll get the parent element. We will also declare an empty list to store all the repo information.

```python
#get Repositories as a dataframe
repos = soup.find_all(class_ = 'source')
repo_info = []
```
Below are the elements where you will find the necessary information.

- The **repo name** is stored inside an `<a>` tag with and attribute `itemprop` containing the word `codeRepository`
- The repo link can be formed in the following format: `https://github.com/{user_name}/{repo_name}`
- The repo update date is inside a `relative-time` tag, which is `<relative-time>`.
- The repo programming language is inside a `<span>` tag with the attribute `itemprop` that has the value `programmingLanguage`.
- The repo description is inside a `<p>` tag with the attribute `itemprop` that has the value `description`.

Let’s run the code snippet below to get the repo information.



# Scrape GitHub data
Create a function to get the data:
```python
def getData(userName):
   pass
```
The URL `https://github.com/{user_name}?tab=repositories` contains the user’s information and their recent public repositories. We’ll use the `requests` library to get the contents of the page.








## Full name
The full name is inside an element with class name `vcard-fullname`. 
```Python
#full Name
info['name'] = soup.find(class_ = 'vcard-fullname').get_text()
```
The `.get_text()` method retrieves the relevant text inside the element.

We use Beautiful Soup’s `.find()` method and pass the class name.

## Image
Similar to the full name, the image is inside an element with the class name `avatar-user`.
```python
#image
info['image_url'] =  soup.find(class_ = 'avatar-user')['src']
```
Since we’re only interested in the image source, we store only the `href` value.

## Number of followers/following
To get the followers/following information, we can use CSS attribute selectors. If we use the inspect element feature on the number of followers and users following, we’ll see that they have an `href` tag that contains the word `followers` and `following` respectively. We’ll use Beautiful Soup’s `.select_one()` method to get the required data.

```python
#followers and following
info['followers'] = soup.select_one("a[href*=followers]").get_text().strip().split('\n')[0]
info['following'] = soup.select_one("a[href*=following]").get_text().strip().split('\n')[0]
```
Since we’re only interested in the number, we need to manipulate the text and extract the number out of it.

## Location and portfolio URL
Upon inspecting the location and URL, we’ll notice that they are stored inside a `<li>` tag and have an attribute `itemprop`. The `itemprop` value for location contains the word `home` and for the URL, it contains `url`. We need to ensure that the case of the string matches. We’ll use the `.select_one()` method to get the relevant information.

> **Note:** The method `select_one()` finds only the first `tag` that matches a selector.


```python
#location
try:
   info['location'] = soup.select_one('li[itemprop*=home]').get_text().strip()
except:
   info['location'] = ''

#url
try:
   info['url'] = soup.select_one('li[itemprop*=url]').get_text().strip()
except:
   info['url'] = ''
```
Since not all users might have their `location` and `url`, we need to put our code inside a `try`-`except` block.

## User’s recent public repositories
All the repositories are stored inside a parent element which has a class name `source`. First, we’ll get the parent element. We will also declare an empty list to store all the repo information.

```python
#get Repositories as a dataframe
repos = soup.find_all(class_ = 'source')
repo_info = []
```
Below are the elements where you will find the necessary information.

- The **repo name** is stored inside an `<a>` tag with and attribute `itemprop` containing the word `codeRepository`
- The repo link can be formed in the following format: `https://github.com/{user_name}/{repo_name}`
- The repo update date is inside a `relative-time` tag, which is `<relative-time>`.
- The repo programming language is inside a `<span>` tag with the attribute `itemprop` that has the value `programmingLanguage`.
- The repo description is inside a `<p>` tag with the attribute `itemprop` that has the value `description`.

Let’s run the code snippet below to get the repo information.



Learn how to scrape Github data using Beautiful Soup.

Introduction

Build a UI for a Model Using Streamlit

Sentiment Analysis Using Multinomial Logistic Regression

Build a Classification Web App using Streamlit and Sklearn

Build a Streamlit App to Scrape Github Profiles

Build a Web App to Transcribe Audio using Python and AssemblyAI

Build a Web App to Generate and Display a Word Cloud of Trending

Build a Web App to Download YouTube Videos in 30 Lines of Code

Deploy Streamlit Apps

Wrapping Up

Web Scraping using Beautiful Soup

Scrape GitHub data

Full name