Gain insights into building 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

# Streamlit apps
To run a Streamlit app, type the following command: `streamlit run app.py`.

Since we don’t have any components yet, we should see a blank screen.. At the top right corner in the interface of the output, the “Rerun” button in the drop-down menu tells Streamlit to reload each time we change our code.





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

# Title and input DataFrame

We’ll use the following functions for this part of our web app:

* **`title(str)`**: This method is like a `<h1>` tag. It takes a string as a parameter and displays the text as a title.

* **`subheader(str)`**: It’s like the title method, but the font of the text displayed is smaller than the title’s font.

* **`table(dataframe)`**: The `table()` method takes a DataFrame as a parameter and displays it. We can also use the `.dataframe()` method, however, the `.table()` method displays a much more visually appealing table.


The following code can be used to display the `title`, `subheader`, and `table` on Streamlit UI:
```python
st.title("Would you have survived the Titanic Disaster?")
st.subheader("This model will predict if a passenger would survive the Titanic Disaster or not")
st.table(train_df.head(5))
```

> **Note:** An alternative to `st.table()` is `st.dataframe()`. Both methods support DataFrames and can display them. However, we’ll use `st.table()` because it looks better.




Learn how to run a logistic regression model in Streamlit UI.

Build the DataFrame and Model Performance UI with Streamlit

Introduction

Build a UI for a Model Using Streamlit

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

Build the DataFrame and Model Performance UI with Streamlit

Streamlit apps

Title and input DataFrame