Building a Data Upload and Processing Web Page with PyWebIO Without Writing Front-End Code
This tutorial demonstrates how to use the Python PyWebIO library to create a web interface for uploading, cleaning, and querying pandas data—adding buttons, displaying tables, and handling continuous input—without writing any front-end HTML or JavaScript code.
Many Python developers repeatedly write similar pandas data‑processing scripts and often resort to PyInstaller for packaging, which can be cumbersome; an alternative is to expose the functionality as a web page that can be accessed from any device with a public IP.
Using the PyWebIO library, you can build such a page with less than 100 lines of Python code and no front‑end markup. First, add a file upload widget with a single line of code:
file = file_upload('请选择需要加载的数据')After uploading, read the file name and load the data with pandas:
df = read_file(file['filename'])Next, create buttons that trigger data‑processing functions. PyWebIO’s put_buttons combined with the onclick callback lets you bind actions such as removing duplicate rows, checking missing values, or detecting outliers. Example:
put_buttons(['关闭'], onclick=lambda _: close_popup())For multiple related actions, pass a list of button labels and a matching list of lambda functions:
put_buttons(['检查重复值','删除重复值','检查缺失值','删除缺失值','检查异常值','删除异常值'],
onclick=[lambda: chongfu(df,res_table),
lambda: chongfuchuli(df,res_table),
lambda: other(),
lambda: other(),
lambda: other(),
lambda: other()])To display the processed results, convert a pandas DataFrame to HTML and embed it with put_scrollable and put_html :
put_scrollable(res_table, horizon_scroll=True, height=450)
res_table.reset(put_html(df1.to_html(border=0)))Because PyWebIO runs synchronously, later UI elements are hidden until earlier inputs are provided. The pin API enables asynchronous‑like behavior: create an input box and a submit button, then bind the button to a function that queries the data based on the entered keyword.
put_markdown('## 数据查询')
pin.put_input('res', label='请在下方输入框要查询的关键字', type=TEXT)
put_buttons(['提交查询'], lambda _: chaxun(res_table, df, pin.pin['res']))By following these steps, you can build a functional data‑analysis web page without touching HTML, CSS, or JavaScript, though the resulting UI is simple and may lack custom styling.
The tutorial concludes that PyWebIO’s strength lies in rapid prototyping of data‑driven interfaces, while its limitation is the inability to fine‑tune appearance without writing front‑end code.
Sohu Tech Products
A knowledge-sharing platform for Sohu's technology products. As a leading Chinese internet brand with media, video, search, and gaming services and over 700 million users, Sohu continuously drives tech innovation and practice. We’ll share practical insights and tech news here.
How this landed with the community
Was this worth your time?
0 Comments
Thoughtful readers leave field notes, pushback, and hard-won operational detail here.