全文共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學習與發展的干貨

如需轉載，請后臺留言，遵守轉載規范