iT邦幫忙

2026 iThome 鐵人賽

DAY 3
0

Streamlit

這次專案的前端選擇就決定是Streamlit了!

為何會選擇Streamlit呢
由於他有以下的優點:

  • 純 Python 開發:完全不用寫網頁前端程式碼,UI 元件直接用 Python 函式生成。
  • 極簡程式碼:通常只需十幾行程式碼,就能做出帶有輸入框、按鈕、圖表與側邊欄的完整頁面。
  • 即時熱重載:修改並儲存 Python 程式碼後,瀏覽器頁面會立刻自動更新顯示結果。
  • 內建數據表格、各類圖表、滑桿、檔案上傳器,甚至是現成的 AI 聊天對話框元件
  • 免費額度:沒錯!又是免費,客家工程師可不是叫假的。雖然每天只有大概二十次的呼叫次數,但是基本上只要確定程式碼沒問題再跑就不會把額度揮霍殆盡。

這麼簡單這麼方便的工具簡直是從四次元口袋翻出來的

但身為 AI 大雄的我該怎麼利用這項神器呢?

https://ithelp.ithome.com.tw/upload/images/20260917/20183876k75VMd2un0.jpg

使用 Streamlit 建立 Web 應用程式非常簡單,只需三個核心步驟:

  • 下指令安裝 Streamlit。
  • 撰寫 Python 程式碼
  • 啟動應用程式(streamlit run app.py)

下指令安裝 Streamlit:

pip install streamlit

啟動應用程式:

#請勿直接用 python app.py 執行
streamlit run app.py

app.py程式碼

import streamlit as st

# 設定網頁標題
st.title("我的第一個 Streamlit App")

# 顯示文字與輸入框
name = st.text_input("請輸入你的名字:")

# 互動按鈕
if st.button("打個招呼"):
    if name:
        st.success(f"你好,{name}!歡迎使用 Streamlit。")
    else:
        st.warning("請先輸入名字喔!")

那我們來看看執行結果吧大雄!!

https://ithelp.ithome.com.tw/upload/images/20260917/20183876ugbJXi2VIq.png

目前只是先測試Streamlit確定可用以及有哪些語法,之後會想用它來完成更具美感的前端畫面,敬請期待。


上一篇
Day 2 :虛擬環境的建置及API
下一篇
Day 4 :嘗試精進前端畫面
系列文
基於 Multi-Agent 協作之蘇格拉底式程式學習與自動化評測系統7
圖片
  熱門推薦
圖片
{{ item.channelVendor }} | {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

尚未有邦友留言

立即登入留言