Streamlit

1. Streamlit 簡介
2. 輸出
3. 輸入

2024pyb21826, 2024pyb21610, 2024pyb20828, 2024pyb21533, 2024pyb20434, 2024pyb20308, 2024pyb21503, 2024pyb21317, 2024pyb21003

1. Streamlit 簡介

一個開放原始碼工具，使用 Python 使用者能輕鬆地建立互動式網頁應用程式。其特色為：

簡單易用
即時更新

1.1. 模組安裝

1.1.1. 安裝

於 PyCharm 開啟一新 Project
打開 PyCharm 終端機
輸入下列命令
```
1: pip3 install streamlit
```

1.2. 使用方式

打開 PyCharm Project 中的 main.py

輸入以下 Python 程式

1: import streamlit as st
2: 
3: userName = st.text_input('君の名は')
4: st.write('Ohayō', userName)

切換至終端機，輸入下列命令
```
1: streamlit run main.py
```

1.3. 結束程式

於終端機模式按 Ctrl+C

2. 輸出

Streamlit 提供了多種方便的輸出功能，讓開發者能快速呈現數據、文字、圖片等，增強網頁互動性。

2.1. 文字

Streamlit 支援 st.write()、st.text() 來輸出各種文字內容：

1: import streamlit as st
2: 
3: # 使用 st.write() 輸出文字
4: st.write("Hello, Streamlit!")
5: st.text("這是基本的文字顯示")

2.2. 格式化文字輸出

可以使用 st.write() 來進行格式化的文字輸出。

1: import streamlit as st
2: 
3: name = "TNFSH"
4: score = 95
5: st.write(f"{name} 的期末成績為：{score}")

2.3. 標題

Streamlit 提供了 st.header() 和 st.subheader() 來顯示標題，並可以設定不同層次的標題以區分內容。

1: import streamlit as st
2: 
3: # 顯示標題
4: st.header("這是一個標題")
5: st.subheader("這是一個子標題")

2.4. 圖片

st.image() 可用來展示圖片。支援本地圖片和網址圖片。

1: import streamlit as st
2: 
3: st.image("https://example.com/your-image.png", caption="這是一張圖片", use_column_width=True)

2.5. 表格

Streamlit 提供 st.table() 與 st.dataframe() 來顯示資料表，st.dataframe() 支援互動功能。

 1: import streamlit as st
 2: import pandas as pd
 3: 
 4: # 建立一個簡單的資料框
 5: data = {
 6:     "學生": ["Alice", "Bob", "Cathy"],
 7:     "分數": [95, 88, 76]
 8: }
 9: df = pd.DataFrame(data)
10: 
11: # 顯示表格
12: st.table(df)
13: st.dataframe(df)

3. 輸入

3.1. 文字

3.1.1. 短字串

1: import streamlit as st
2: 
3: user_input = st.text_input("輸入你的名字")
4: st.write(user_input, '請認真上課')

3.1.2. 長文

1: import streamlit as st
2: 
3: user_text = st.text_area("輸入今天上課的心得500字")
4: st.write("看完後幫QQ：", user_text)

3.1.3. 密碼

1: import streamlit as st
2: 
3: st.text_input("請輸入密碼", type="password")
4: st.write("你的密碼：", user_text)

3.2. 時間日期

1: import streamlit as st
2: 
3: date = st.date_input("請選擇日期")
4: time = st.time_input("選擇時間")
5: 
6: st.write("你選擇的日期/時間為：", date, time)

3.3. 數字

1: import streamlit as st
2: 
3: a = st.number_input("輸入A", min_value=0, max_value=100)
4: b = st.number_input("輸入B", min_value=0, max_value=100)
5: st.write("A+B：", a+b)

3.4. 選項

3.4.1. radio

1: import streamlit as st
2: 
3: grade = st.radio("年級",["一","二","三"])
4: st.write("你的年級是：", grade)

3.4.2. toggle

1: import streamlit as st
2: 
3: toggle = st.checkbox("開啟/關閉")
4: st.write("Toggle狀態:", "已開啟" if toggle else "已關閉")

3.4.3. checkbox

1: import streamlit as st
2: 
3: check1 = st.checkbox("選擇A")
4: check2 = st.checkbox("選擇B")
5: 
6: if check1 == True:
7:     st.write('你選了A')
8: elif check2 == True:
9:     st.write('你選了B')

3.4.4. selectbox

單選

1: import streamlit as st
2: 
3: subject = st.selectbox("選擇科目", ["數學", "科學", "歷史"])
4: st.write("你選擇的科目是：", subject)

複選

1: import streamlit as st
2: 
3: subjects = st.multiselect("選擇多個科目", ["數學", "科學", "歷史", "體育"])
4: st.write("你選擇的科目有：", ", ".join(subjects))

3.5. 課堂作業 TNFSH

以 streamlit 撰寫一個 web-based 程式，該程式提供以下功能：

可選擇求圓面積或長方形面積
若使用者點選圓面積，則輸入半徑、輸出面積
若使用者點選長方形面積，則輸入長、寛、輸出面積

Figure 1: Streamlit課堂作業