如何用簡單的Python編寫Web應用程序？

全文共6260字，預計學習時長13分鐘

不瞭解任何網頁框架？不要緊，本文將教你如何輕鬆搞定從數據科學項目到超棒程序的無縫轉換。

圖片來源：Cody Black Unsplash

稍做休息，開始編碼。

機器學習項目只有充分展現給公衆時才稱得上是完整的項目。

過去在介紹數據科學項目時，選擇合適的可視化操做或簡單的PPT就足夠了，但如今隨着像RShiny和Dash這類儀表盤化工具的出現，一名合格的數據科學家也須要掌握必定的Web框架的知識。

可Web框架也不是塊好啃的骨頭。筆者在嘗試一些看似簡單的操做時，仍會被HTML、CSS和Javascript等搞得暈頭轉向，於數次實踐中嚐遍失敗的滋味。

對數據科學同胞們來講，Web開發只是次要技能，因此更別提嘗試多種途徑作這一件事了，會讓這些人不知所措的。

那咱們就註定避免不了Web框架的學習之路嗎？仍是說大半夜的給開發人員打電話問一些很蠢的問題？

因而StreamLit帶着自身的使命出現了，它僅藉助Python就可以建立Web應用程序。

Python的宗旨：簡單勝於複雜，而Streamlit建立應用程序則完美地詮釋了其易操做性。

這篇文將爲你們講解何使用Streamlit來建立支持數據科學項目的應用程序。

安裝

安裝步驟跟運行指令同樣簡單：

pip install streamlit

查看是否安裝成功時只需運行：

streamlit hello

屏幕上應該顯示的是：

能夠在瀏覽器中訪問本地URL：localhost:8501，來查看執行中的Streamlit應用程序。開發人員那裏也有許多很棒的樣本可供嘗試。

Streamlit「你好，世界」

Streamlit旨在經過簡單的Python代碼實現簡單的程序開發。

那就設計一款簡單的應用程序，看看它是否真的像它說的那樣。

從Streamlit的名爲「hello，world」的程序入手，這個程序並不複雜。只須要複製粘貼下面這個代碼到「helloworld.py」的文件夾中便可。

import streamlit as st

x = st.slider('x')

st.write(x, 'squared is', x * x)

而後到最後運行階段時：

streamlit run helloworld.py

看吧，瀏覽器鏈接到localhost:8501，就能夠看到執行中的程序，滑動鼠標就能夠獲得結果。

簡單的滑塊插件應用程序

操做很是簡單。在構建上圖應用程序時，用到了Streamlit的兩個特性：

• st.slider插件——滑動改變Web應用程序的輸出內容。

• 以及通用的st.write 指令。筆者對於它能從圖標、數據框和簡單的文本中編寫任何東西感到驚訝。後面會有詳細介紹。

敲黑板：你們要記住每次改變插件值時，整個應用程序都會由上至下運行。

Streamlit插件

插件提供了控制應用程序的方法，閱讀了解插件的最佳選擇就是API參考文檔，不過筆者這裏也會講解一些插件，它們都是用戶在操做後期會用的最主要的插件。

1. 滑塊

streamlit.slider(label, min_value=None, max_value=None, value=None, step=None, format=None)

在上文已經目擊了st.slider的執行過程，它能夠結合min_value、max_value使用，用於進一步獲得必定範圍內的輸入內容。

2. 文本輸入

獲取用戶輸入最簡單的方式是輸入URL或一些用於分析情緒的文本內容，須要的只是一個用來命名文本框的標籤。

import streamlit as st

url = st.text_input('Enter URL')

st.write('The Entered URL is', url)

看到的程序將是這樣：

簡單的text_input widget程序

貼士：能夠只改變helloworld.py文件而後刷新頁面。筆者的作法是打開該文件而後在文本編輯器中改動，再一點一點查看變更的地方。

3. 複選框

複選框的一個功能就是隱藏或顯示/隱藏程序中的特定區域，另外一個用途是設置函數的布爾參數值。st.checkbox() 須要一個參數，即插件標籤。在該應用程序中，複選框會用來切換條件語句。

import streamlit as st

import pandas as pd

import numpy as np

df = pd.read_csv("football_data.csv")

if st.checkbox('Show dataframe'):

st.write(df)

簡單的複選框插件應用程序

4. 下拉框插件

經過st.selectbox能夠在一系列選項或列表中進行選擇。常見的用法是將其做爲下拉項而後從名單中挑選值。

import streamlit as st

import pandas as pd

import numpy as np

df = pd.read_csv("football_data.csv")option = st.selectbox(

'Which Club do you like best?',

df['Club'].unique())

'You selected: ', option

簡單的下拉框/複選框插件程序

5. 多選插件

也能夠用下拉框內的多個值。這裏講的是使用 st.multiselect在變量選選中獲取多個值做爲列表。

import streamlit as st

import pandas as pd

import numpy as np

df = pd.read_csv("football_data.csv")

options = st.multiselect(

'What are your favorite clubs?', df['Club'].unique())

st.write('You selected:', options)

簡單的下拉框插件應用程序

一步步建立應用程序

重要插件瞭解的也差很少了，如今立刻要用多個插件建立應用程序。

從簡單的步驟入門，嘗試使用Streamlit對足球數據進行可視化。有了上面那些插件，這個步驟執行起來會容易不少。

import streamlit as st

import pandas as pd

import numpy as np

df = pd.read_csv("football_data.csv")

clubs = st.multiselect('Show Player for clubs?', df['Club'].unique())

nationalities = st.multiselect('Show Player from Nationalities?', df['Nationality'].unique())

# Filter dataframe

new_df = df[(df['Club'].isin(clubs)) & (df['Nationality'].isin(nationalities))]

# write dataframe to screen

st.write(new_df)

簡單的應用程序會是這樣的：

同時使用多個插件

這一點也不難，但目前看起來彷佛太基礎了。是否能夠考慮加入一些圖表呢？

Streamlit當前支持許多用於繪圖的庫，其中就有Plotly, Bokeh, Matplotlib, Altair和Vega圖表。Plotly Express也能夠，只不過沒有詳細說明。也存在一些內嵌式圖表，至關於Streamlit「自帶」的，好比st.line_chart 和st.area_chart.

此時會用到plotly_express，下面是設計程序會用到的代碼。該過程只會調用Streamlit四次。剩下的都是一些簡單的Python代碼操做。

import streamlit as st

import pandas as pd

import numpy as np

import plotly_express as px

df = pd.read_csv("football_data.csv")

clubs = st.multiselect('Show Player for clubs?', df['Club'].unique())

nationalities = st.multiselect('Show Player from Nationalities?', df['Nationality'].unique())new_df = df[(df['Club'].isin(clubs)) & (df['Nationality'].isin(nationalities))]

st.write(new_df)

# create figure using plotly express

fig = px.scatter(new_df, x ='Overall',y='Age',color='Name')

# Plot!

st.plotly_chart(fig)

添加圖表

改進

在本文一開始有提到插件每次發生變更時，整個應用程序就會由上至下地運行。其實並不可行，由於建立的應用程序會保留下深度學習模型或複雜的機器學習模型。接下來在講Streamlit的緩存時會向讀者闡釋這一點。

1. 緩存

在這個簡單的程序裏，但凡值有所變更時，數據科學家們就會反覆瀏覽數據框。它比較適用於用戶手中的小規模數據，至於大規模或須要進行不少步處理的數據，它是不予理睬的。接下來在Streamlit中經過st.cache裝飾器函數體驗緩存的功能吧。

import streamlit as st

import pandas as pd

import numpy as np

import plotly_express as px

df = st.cache(pd.read_csv)("football_data.csv")

或者是複雜一些、時間耗費久一些的函數，只須要運行一次，此時能夠用：

@st.cache

def complex_func(a,b):

DO SOMETHING COMPLEX

# Won't run again and again.

complex_func(a,b)

用Streamlit的緩存裝飾器標記函數時，不管這個函數是否執行，都會檢查輸入的參數值（由該函數處理的）。

若是Streamlit以前沒有處理過這些數據，它會調用函數並將運算結果存到本地緩存中。

下次再調用函數時，假若仍是這些參數，Streamlit就會徹底跳過這一塊的函數執行，直接用緩存器裏的結果數據。

2. 側邊欄

爲了根據我的的傾向需求使界面更加簡潔，用戶可能會想着把插件移動到側邊欄內，好比像Rshiny儀表盤。這很是簡單，只需在插件代碼中添加 st.sidebar便可。

import streamlit as st

import pandas as pd

import numpy as np

import plotly_express as px

df = st.cache(pd.read_csv)("football_data.csv")

clubs = st.sidebar.multiselect('Show Player for clubs?', df['Club'].unique())

nationalities = st.sidebar.multiselect('Show Player from Nationalities?', df['Nationality'].unique())

new_df = df[(df['Club'].isin(clubs)) & (df['Nationality'].isin(nationalities))]

st.write(new_df)

# Create distplot with custom bin_size

fig = px.scatter(new_df, x ='Overall',y='Age',color='Name')

# Plot!

st.plotly_chart(fig)

將插件移動到側邊欄內

3. Markdown標記語言能夠嗎？

筆者特別喜歡在Markdown裏編輯文字，由於發現相比HTML，它少了那些繁瑣的操做，並且更能勝任數據科學的任務。因此讀者也能在Streamlit程序中應用Markdown嗎？

答案是能夠。並且是有跡可循的。在筆者看來，最合適的就是調用Magic指令。經過該指令，用戶作標記語言就會像寫評論同樣簡單。用戶也可使用指令st.markdown。

import streamlit as st

import pandas as pd

import numpy as np

import plotly_express as px'''

# Club and Nationality App

This very simple webapp allows you to select and visualize players from certain clubs and certain nationalities.

'''

df = st.cache(pd.read_csv)("football_data.csv")

clubs = st.sidebar.multiselect('Show Player for clubs?', df['Club'].unique())

nationalities = st.sidebar.multiselect('Show Player from Nationalities?', df['Nationality'].unique())new_df = df[(df['Club'].isin(clubs)) & (df['Nationality'].isin(nationalities))]

st.write(new_df)

# Create distplot with custom bin_size

fig = px.scatter(new_df, x ='Overall',y='Age',color='Name')

'''

### Here is a simple chart between player age and overall

'''

st.plotly_chart(fig)

最終的樣品

總結

Streamlit已經介紹了整個建立應用程序的步驟，筆者真沒什麼可補充的了。

這篇文章中講述了一個簡單網頁程序的建立，但有太多未知數了。舉個例子，在Streamlit網站碰到GAN時，只會選擇插件和緩存的指導思想。

筆者對程序的默認顏色和風格很喜好，並且發現這用起來比Dash還順手，筆者建立新程序以前一直用的是Dash。讀者們也能夠在本身的Streamlit程序中加上音頻和視頻項。

最重要的是，Streamlit是一款免費的開源軟件，而不是開箱即用的私人網絡應用。

之前筆者遇到任何變更或問題，都須要請教身邊的程序猿朋友；而如今，徹底不會這麼麻煩了。

筆者的目標是從如今開始，在工做流中多用這個程序。即使是不難的任務，也會考慮用它，筆者以爲你也能夠。

雖然筆者還不曾想過在生產環境下它執行的好壞，但對於概念項目和演示的小型驗證來講，它算得上是福音了。筆者的目標是從如今開始，在工做流中多用這個程序。即使是不難的任務，也會考慮用它，筆者以爲你也能夠。

完整代碼：https://github.com/MLWhiz/streamlit_football_demo

留言 點贊 關注

咱們一塊兒分享AI學習與發展的乾貨
歡迎關注全平臺AI垂類自媒體 「讀芯術」

（添加小編微信：dxsxbb，加入讀者圈，一塊兒討論最新鮮的人工智能科技哦～）