Desktop Apps Made Easy: Python Web UI Frameworks with Streamlit and Stlite

Slide 1

Slide 1 text

copyright © 2025 CMS Communications Inc. all rights reserved. Empowering Python with Web UI Frameworks ─From Streamlit to Stlite─ CMS Communications Inc. CEO Manabu TERADA PyCon APAC 2025 March 2nd 2025

Slide 2

Slide 2 text

Slide 3

Slide 3 text

copyright © 2025 CMS Communications Inc. all rights reserved. For those who prefer to read in text In Japanese gihyo.jp Python Monthly Topics April 2024 Building Desktop Applications with Python Web UI Frameworks https://gihyo.jp/article/2024/04/monthly-python-2404

Slide 4

Slide 4 text

copyright © 2025 CMS Communications Inc. all rights reserved. Presentation Outline ● What is a Python Web UI Framework? ● Comparison of Python Web UI Frameworks ● How to Create a Streamlit Application ● Applying to Multi-platform Desktop Application ● About the Build Environment Slide

Slide 5

Slide 5 text

Slide 6

Slide 6 text

copyright © 2025 CMS Communications Inc. all rights reserved. Self Introduction 寺田学 (Manabu TERADA) ● Python engineer ● Podcast in Japanese「terapyon channel」(https://podcast.terapyon.net) ● Related Publications (Co-author/Supervision) in Japanese ○ Pythonデータ分析実践ハンドブック (インプレス: 2023年9月) ○ Pythonによるあたらしいデータ分析の教科書第 2版（翔泳社:2022年10月） ○ Python実践レシピ (技術評論社: 2022年1月) ○ スラスラわかるPython第2版（翔泳社:2021年11月） ○ 機械学習図鑑（翔泳社 : 2019年4月）

Slide 7

Slide 7 text

copyright © 2025 CMS Communications Inc. all rights reserved. Titles 寺田学 (Manabu TERADA) ● CEO of CMS Communications Inc. ● PyCon JP Association Board member ● Python Asia Organization Founder and Board member ● PSF Fellow

Slide 8

Slide 8 text

Slide 9

Slide 9 text

Slide 10

Slide 10 text

copyright © 2025 CMS Communications Inc. all rights reserved. What is Python Web UI Framework? Features ● Composed only of Python code ● No knowledge of front-end (HTML/CSS/JavaScript) ● No knowledge of back-end APIs, communications, etc. ● Interactive, from form input to result display ● Interactive display of graphical representations, etc.

Slide 11

Slide 11 text

copyright © 2025 CMS Communications Inc. all rights reserved. Framework Application Comparison Web UI Frameworks ● Streamlit ● Gradio ● Dash ● Panel ● etc Server side Frameworks ● Django ● Flask ● FastAPI ● Pyramid ● Zope ● etc vs

Slide 12

Slide 12 text

copyright © 2025 CMS Communications Inc. all rights reserved. Framework Application Comparison Web UI Frameworks ● Python Code Only ● Masking the front-end ● Hiding communication details ● Limited ﬂexibility Server side Frameworks ● Separate front-end ● Decide on communication method ● Often works with RDB ● High degree of freedom vs

Slide 13

Slide 13 text

copyright © 2025 CMS Communications Inc. all rights reserved. Beneﬁts of Python Web UI Frameworks ● Quickly create web apps ● Can be created using only Python code ● Easy to convert JupyterLab and other code into web apps ● Easy hosting and no complicated conﬁguration

Slide 14

Slide 14 text

Slide 15

Slide 15 text

copyright © 2025 CMS Communications Inc. all rights reserved. Types of Python Web UI Frameworks ● There are more than 10 projects ● Last year was like a festival of Web UI frameworks ● Find one you like and give it a try!

Slide 16

Slide 16 text

copyright © 2025 CMS Communications Inc. all rights reserved. Streamlit Overview ● Standard Tools ML Models from PoC to Automation Developed by Snowflake Inc. Official Site https://streamlit.io/ PyPI https://pypi.org/project/streamlit/ Latest Version 1.42.0 Server side Tornado Front-end React License Apache Software License

Slide 17

Slide 17 text

copyright © 2025 CMS Communications Inc. all rights reserved. Gradio Overview ● Popular in AI systems From AI/ML demos to apps Developed by Hugging Face Official Site https://www.gradio.app/ PyPI https://pypi.org/project/gradio/ Latest Version 5.16.0 Server side FastAPI Front-end Svelte License Apache Software License

Slide 18

Slide 18 text

copyright © 2025 CMS Communications Inc. all rights reserved. Dash Overview ● Popular on dashboards Data stream support Developed by Plotly Official Site https://plotly.com/dash/ PyPI https://pypi.org/project/dash/ Latest Version 2.18.2 Server side Flask Front-end React License MIT License

Slide 19

Slide 19 text

copyright © 2025 CMS Communications Inc. all rights reserved. Panel Overview ● PyData-based development Panel application for data systems Developed by Holoviz Official Site https://panel.holoviz.org/ PyPI https://pypi.org/project/panel/ Latest Version 1.6.1 Server side Tornado Front-end React License BSD License

Slide 20

Slide 20 text

Slide 21

Slide 21 text

Slide 22

Slide 22 text

copyright © 2025 CMS Communications Inc. all rights reserved. Creating a Streamlit Sample Application sample app ● Name：st-matrix-chart ● Goal: Displaying a 2D matrix with Streamlit ● Function: ○ Select columns from Excel data and create a two-dimensional visualization such as a priority matrix ● Repo: ○ https://github.com/terapyon/st-matrix-chart

Slide 23

Slide 23 text

Slide 24

Slide 24 text

Slide 25

Slide 25 text

copyright © 2025 CMS Communications Inc. all rights reserved. Streamlit start sample app $ pip install -r requirements.txt Starting command $ streamlit run st_matrix_chart/streamlit_app.py Shown app in your browser

Slide 26

Slide 26 text

Slide 27

Slide 27 text

Slide 28

Slide 28 text

Slide 29

Slide 29 text

copyright © 2025 CMS Communications Inc. all rights reserved. Desktop Application Conversion Methods for Desktop Application Conversion ● Tool: @stlite/desktop ○ https://github.com/whitphx/stlite/blob/main/packages/desktop/README.md ● Using Pyodide to run Python code inside a web browser ● Bundled as an Electron app ● Conﬁguration: Writing package.json ○ https://github.com/terapyon/st-matrix-chart/blob/main/package.json

Slide 30

Slide 30 text

copyright © 2025 CMS Communications Inc. all rights reserved. Desktop application commands $ npm install Build and Starting command $ npm run dump st_matrix_chart -- -r requirements.txt $ npm run serve The application will be launched.

Slide 31

Slide 31 text

Slide 32

Slide 32 text

Slide 33

Slide 33 text

Slide 34

Slide 34 text

copyright © 2025 CMS Communications Inc. all rights reserved. Build Environment Build with GitHub Actions ● Local environment is difficult to support multiple OS ● Convenient to build in the cloud ● Configuration: build.yml ○ https://github.com/terapyon/st-matrix-chart/blob/main/.github/workflows/build.yml ● Put the file in a GitHub release

Slide 35

Slide 35 text

copyright © 2025 CMS Communications Inc. all rights reserved. Desktop Applikation Commands Release Procedure % git tag v2.0.0 # Create a tag % git push origin v2.0.0 # Push tag Create release v2.0.0 in the Web UI