Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Desktop Apps Made Easy: Python Web UI Framework...

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

At PyCon APAC 2025 in Philippines
2025-03-02
by Manabu TERADA

Manabu TERADA

March 02, 2025
Tweet

More Decks by Manabu TERADA

Other Decks in Technology

Transcript

  1. 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
  2. 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
  3. 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
  4. 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月)
  5. 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
  6. copyright © 2025 CMS Communications Inc. all rights reserved. Python

    technical assistance consulting services Our Services
  7. copyright © 2025 CMS Communications Inc. all rights reserved. What

    is a Python Web UI Framework? • Only Python code • Frontend technologies are abstracted • Form input to results display
  8. 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.
  9. 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
  10. 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 flexibility Server side Frameworks • Separate front-end • Decide on communication method • Often works with RDB • High degree of freedom vs
  11. copyright © 2025 CMS Communications Inc. all rights reserved. Benefits

    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 configuration
  12. copyright © 2025 CMS Communications Inc. all rights reserved. Comparison

    of Python Web UI Frameworks • List of major frameworks • Brief introduction of features
  13. 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!
  14. 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
  15. 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
  16. 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
  17. 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
  18. copyright © 2025 CMS Communications Inc. all rights reserved. How

    to Create a Streamlit Application • Streamlit App • Run locally
  19. 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
  20. 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
  21. copyright © 2025 CMS Communications Inc. all rights reserved. Applying

    to Multi-platform Desktop Application • Making a desktop application • Build command
  22. 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 • Configuration: Writing package.json ◦ https://github.com/terapyon/st-matrix-chart/blob/main/package.json
  23. 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.
  24. copyright © 2025 CMS Communications Inc. all rights reserved. About

    the Build Environment • Build on GitHub Actions
  25. 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
  26. 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
  27. copyright © 2025 CMS Communications Inc. all rights reserved. Release

    Completed Package available for download at GitHub Releases https://github.com/terapyon/st-matrix-chart/releases
  28. copyright © 2025 CMS Communications Inc. all rights reserved. Summary

    • Let’s build a Streamlit app. • Let’s convert it to a desktop app with @stlite/desktop. • Let’s set up the build environment.
  29. copyright © 2025 CMS Communications Inc. all rights reserved. Special

    thanks • Stlite is created by whitphx (https://github.com/whitphx) • He is here today.