NLP and Web Applications

Python and Web Applications

謝舒凱 GIL,NTU

NLP and Web Applications

Week2

NLP and Web Applications

TOC

  • Crash course

    • command-line
    • VS-code (and Jupyter Notebook)
    • Git and Github

  • Creating Basic Python Streamlit Applications

    • Basics
    • Exploration
    • NLP and ML
NLP and Web Applications

Web Apps with NLP plugins

  • 課堂主要目的是利用 NLP 讓網路應用更多元。最後的成品類似這樣的
NLP and Web Applications

  • 理想的 Web 應用開發設計全端。但專業分工下，ML/NLP 工程師不見得有時間專研，因此某種 (不是 jupyter notebook) 符合下列條件的前端是需要的。

    • 快速與有效與客戶端互動 much faster and more productive interaction with your end users
    • 方便標記/標註 easier data annotation/labeling
    • 迅速除錯 faster debugging
NLP and Web Applications

我們一開始先用你熟悉的方式快速上手 web apps 的概念

  • Streamlit 與 Gradio 都是選項之一。
NLP and Web Applications

Streamlit 是什麼

  • Streamlit 是一個 python-based web application 架構，可以很快上手建立原型，探索互動經驗，與機器學習模型成果。

  • 我們先學習來如何安裝、創建一個 web app 來感覺一下。妳需要安好：

    • python 3.7 (or later)
    • VS code
NLP and Web Applications

快速上手 VS code

常用指令快速鍵 (可參考別人並建立自己的清單)，例如

  • Cmd+j(Ctrl+j) 開啟/關閉終端機

  • Cmd+b 開啟/關閉檔案總管

  • Cmd+SHIFT 切換檔案；Cmd+SHIFT+p 執行常用任務

目的在於加速開發速度，而已。

NLP and Web Applications

快速上手指令列

參考：語言計算技能入門

NLP and Web Applications

指令列萬萬歲

Building the future of the command line

NLP and Web Applications

先在終端機用指令建立新目錄，進入。

mkdir nlpWeb
cd nlpWeb

那就開始進入Streamlit 的世界了。

NLP and Web Applications

安裝

pip install streamlit

# check four demos
streamlit hello &
NLP and Web Applications

稍微改一下 demos 的程式

mkdir plot_demo_app
cd plot_demo_app
touch plot_demo_app.py
NLP and Web Applications
  • 程式開頭加上
import streamlit as st
import time
import numpy as np

  • 複製網頁上的 plotting demo 程式碼到 plot_demo_app

  • 終端機執行 streamlit run plot_demo_app.py

Voila！

NLP and Web Applications

Exercise1: Making an app from scratch

如法炮製

  • 建立一個目錄 (e.g., myApp)。
  • 在目錄裡建立一個 python 檔案 (e.g. myApp.py)。
  • 在這個 python 檔案中先打入
import streamlit as st
st.write('我的第一個')
  • 終端機執行 streamlit run myApp.py （可以用 Ctrl+c 關掉）
NLP and Web Applications

[可以來看看 Streamlit 說明文件了]

先玩玩 Gallery 中的相關 apps

https://docs.streamlit.io/

NLP and Web Applications

探索資料與視覺化

Exploratory data analysis and Visualization

NLP and Web Applications

Git and Github

crash course

NLP and Web Applications

先準備好

  • A GitHub user account
  • A terminal running bash, and
  • git installed and configured on your computer.
NLP and Web Applications

先學會

  • Create a new repository on GitHub
  • Clone class repository to your local computer
  • Modify files in your repository and track changes using commits with git
  • Push your changes back to GitHub
NLP and Web Applications

課堂 repository

https://github.com/lopentu/nlp_web

git clone https://github.com/lopentu/nlp_web.git
NLP and Web Applications

Exercise.2: 建立一個你的課堂用 repository

  • 一樣 clone 下來。
  • 把 myApp.py 複製到這個 repo 目錄下。
  • 終端機執行
git add .
git commit -m 'added my script'
git push

在 sli.do (#nlpweb) 打入你的 repo link

NLP and Web Applications

用南極洲的帕默群島 (Palmer Archipelago) 企鵝來練習

The data contains size measurements for three penguin species

  • 建立目錄、程式碼、下載數據 (penguins.csv)
> mkdir pengu_app
> cd pengu_app
> touch pengu.py
NLP and Web Applications

開啟與編輯檔案

pengu.py

import streamlit as st
import pandas as pd

st.title('Penguins')

# import data
pengu_df = pd.read_csv('penguins.csv')
st.write(pengu_df.head(10))
  • 在終端機執行 streamlit run pengu.py
NLP and Web Applications

調整

  • 使用 st.selectbox() 讓使用者可以選擇不同變項。

  • 選擇後要執行的函式（如 scatterplot）。

  • 調整視覺（如：色調與形狀）

NLP and Web Applications

如何除錯

  • st.write() prints out nearly any Python objects

  • 可以使用 jupyter notebook 先確認後 (忽略 st.)，再複製到 streamlit。

    • Crash course for Jupyter notebook in VS code
NLP and Web Applications

探索資料

Data manipulation in Streamlit

  • 可以用慣用的資料探索函式庫（如 pandas）。
NLP and Web Applications

課堂練習

Allow the user to filter out penguins based on their gender?

NLP and Web Applications

Caching

  • 在定義的函式之前加上 @st.cache() 這一行，有助加速。
NLP and Web Applications

資料的視覺呈現

  • Visualization is fundamental to Data Science and related fields.

  • 可以利用 streamlit原生的(Native graphics functions)，和第三方的圖形函示庫。包括：
    (a) Seaborn + Matplotlab: 統計製圖
    (b) Plotly：互動式
    (c) Bokeh：特別適合在瀏覽器呈現的互動視覺
    (d) Vega-Altair: 宣告式視覺化
    (e) PyDeck: 與地圖有關

short term memory