timmy / 📊 Streamlit + Tabulator：打造互動式資料表格超簡單
0 polubień
0 forków
1 plików
Ostatnio aktywne 8 months ago
用 Streamlit + Tabulator.js 展示 DataFrame，支援欄位過濾、分頁、編輯，前端美觀又實用 🚀
| 1 | import streamlit as st |
| 2 | import pandas as pd |
| 3 | import json |
| 4 | import streamlit.components.v1 as components |
| 5 | |
| 6 | # 假設有一個 DataFrame |
| 7 | df = pd.DataFrame({ |
| 8 | "訂單單別": ["A", "B", "C"], |
| 9 | "訂單單號": [101, 102, 103], |
| 10 | "客戶簡稱": ["客戶1", "客戶2", "客戶3"], |
Ostatnio aktywne 9 months ago
這是一個使用 Streamlit 實現的簡單計算器，支援中英文語系，提供加法和減法運算功能，適合快速數學計算。
| 1 | import streamlit as st |
| 2 | |
| 3 | # 多國語系字典 |
| 4 | LANGUAGES = { |
| 5 | "zh": { |
| 6 | "title": "簡單計算器", |
| 7 | "instruction": "請輸入兩個數字，選擇運算方式：", |
| 8 | "num1": "數字 1", |
| 9 | "num2": "數字 2", |
| 10 | "operation": "選擇運算方式", |
timmy / 使用 Streamlit st.session_state 管理可編輯 DataFrame
0 polubień
0 forków
1 plików
Ostatnio aktywne 9 months ago
透過 st.session_state 讓 Streamlit 應用能夠保存並管理可編輯的 DataFrame，避免頁面重整導致資料丟失，適用於數據管理與即時編輯應用。
| 1 | import streamlit as st |
| 2 | import pandas as pd |
| 3 | |
| 4 | def main(): |
| 5 | # 初始化 session_state |
| 6 | if "data" not in st.session_state: |
| 7 | st.session_state.data = pd.DataFrame({ |
| 8 | "ID": [1, 2, 3], |
| 9 | "Name": ["Alice", "Bob", "Charlie"], |
| 10 | "Age": [25, 30, 35], |
timmy / Streamlit 整合 Lit Web Component
0 polubień
0 forków
1 plików
Ostatnio aktywne 10 months ago
此範例展示如何在 Streamlit 應用中嵌入 Lit Web Component，而不依賴 CDN。使用 Web Components 技術，可封裝自訂 UI 元件，並透過 JavaScript 互動，適用於建立模組化的前端元件，提升 Web 應用的可維護性與重用性。
| 1 | import streamlit as st |
| 2 | import streamlit.components.v1 as components |
| 3 | |
| 4 | st.title("使用 Lit Web Component (無 CDN)") |
| 5 | |
| 6 | lit_component = """ |
| 7 | <script type="module"> |
| 8 | class MyLitComponent extends HTMLElement { |
| 9 | constructor() { |
| 10 | super(); |
timmy / Streamlit 聊天應用示範
0 polubień
0 forków
1 plików
Ostatnio aktywne 10 months ago
| 1 | import streamlit as st |
| 2 | import random |
| 3 | import time |
| 4 | |
| 5 | st.write("Streamlit loves LLMs! 🤖 [Build your own chat app](https://docs.streamlit.io/develop/tutorials/llms/build-conversational-apps) in minutes, then make it powerful by adding images, dataframes, or even input widgets to the chat.") |
| 6 | |
| 7 | st.caption("Note that this demo app isn't actually connected to any LLMs. Those are expensive ;)") |
| 8 | |
| 9 | # Initialize chat history |
| 10 | if "messages" not in st.session_state: |
timmy / Streamlit 大規模資料表格與互動編輯
0 polubień
0 forków
1 plików
Ostatnio aktywne 10 months ago
此範例展示如何使用 Streamlit 處理大量資料，並提供可視化表格 (dataframe) 和可編輯表格 (data_editor) 來動態調整資料。支援圖片預覽、進度條顯示及類別選擇，適用於資料分析與管理應用。
| 1 | import streamlit as st |
| 2 | import pandas as pd |
| 3 | import numpy as np |
| 4 | |
| 5 | st.write("Got lots of data? Great! Streamlit can show [dataframes](https://docs.streamlit.io/develop/api-reference/data) with hundred thousands of rows, images, sparklines – and even supports editing! ✍️") |
| 6 | |
| 7 | num_rows = st.slider("Number of rows", 1, 10000, 500) |
| 8 | np.random.seed(42) |
| 9 | data = [] |
| 10 | for i in range(num_rows): |
timmy / Streamlit 資料視覺化與互動選擇
0 polubień
0 forków
1 plików
Ostatnio aktywne 10 months ago
此範例展示如何使用 Streamlit 建立互動式數據視覺化，包含多重選擇 (multiselect) 和切換開關 (toggle) 來調整數據顯示，並透過 line_chart 繪製折線圖，讓使用者輕鬆分析數據趨勢。
| 1 | import streamlit as st |
| 2 | import pandas as pd |
| 3 | import numpy as np |
| 4 | |
| 5 | st.write("Streamlit supports a wide range of data visualizations, including [Plotly, Altair, and Bokeh charts](https://docs.streamlit.io/develop/api-reference/charts). 📊 And with over 20 input widgets, you can easily make your data interactive!") |
| 6 | |
| 7 | all_users = ["Alice", "Bob", "Charly"] |
| 8 | with st.container(border=True): |
| 9 | users = st.multiselect("Users", all_users, default=all_users) |
| 10 | rolling_average = st.toggle("Rolling average") |
timmy / Streamlit 顯示自訂物件的 HTML 表示
0 polubień
0 forków
1 plików
Ostatnio aktywne 10 months ago
此範例展示如何在 Streamlit 應用中，透過 st.write 和 unsafe_allow_html=True 來顯示自訂物件的 HTML 格式輸出，使物件能夠以自訂的 HTML 樣式呈現。
| 1 | import streamlit as st |
| 2 | |
| 3 | class MyObject: |
| 4 | def _repr_html_(self): |
| 5 | return "<h1 style='color:blue;'>這是一個自訂物件的 HTML 表示</h1>" |
| 6 | |
| 7 | obj = MyObject() |
| 8 | st.write(obj._repr_html_(), unsafe_allow_html=True) |
timmy / Streamlit 嵌入 HTML
0 polubień
0 forków
2 plików
Ostatnio aktywne 10 months ago
此範例展示如何在 Streamlit 應用中嵌入 HTML、CSS 和 JavaScript，允許自訂 UI 元素、樣式和互動功能，使 Web 應用更具靈活性和可視化效果。
| 1 | import streamlit as st |
| 2 | |
| 3 | st.title("嵌入 HTML 的範例") |
| 4 | |
| 5 | html_code = """ |
| 6 | <div style="border: 2px solid #4CAF50; padding: 10px; border-radius: 5px;"> |
| 7 | <h2 style="color: #4CAF50;">這是一個 HTML 區塊</h2> |
| 8 | <p>你可以在這裡嵌入 HTML, CSS, 甚至 JavaScript。</p> |
| 9 | <button onclick="alert('Hello, Streamlit!')">點擊我</button> |
| 10 | </div> |
Nowsze
Starsze