File Upload/Download in Streamlit/Python

File upload/download is supported by Streamlit out of the box. There are a few hints to share about more effective file upload implementation. You will learn how to wrap the file upload widget with Streamlit form, use Submit button to confirm the upload and reinitialize the upload widget. Additionally, I will show you an example of how to download JSON file from the server with Streamlit download component.

 

Dependent UI Widgets in Streamlit/Python

This video explains how to implement dependent UI widgets refresh in Streamlit/Python, when the value changes. I'm using Streamlit Empty widget as a placeholder to update selectbox with a new entry, after the new file upload. Selectbox displays the list of uploaded files.

 

Invoice Annotation with Sparrow/Python

I explain our Streamlit component for invoice/receipt document annotation and labeling. It can be used either to create new annotations or review and edit existing ones. With this component you can add new annotations directly on top of the document image. Existing annotations can be resized/moved and values/labels assigned. 

This component is part of Sparrow - our open-source solution for data extraction from invoices/receipts with ML.

 

Responsive UI with Streamlit/Python

I explain how to get current UI width info in Streamlit and use this value to calculate number of columns to be generated for the form block. Streamlit is server side UI framework and it runs on Python.

 

Calling JavaScript from Streamlit/Python

Streamlit is Python framework, it helps to build UI with low code approach. Code runs on server and there is no functionality, which would allow to inject client side events with JavaScript. Luckily there is a 3rd-party Streamlit component, it allows to make JavaScript calls from server side Python code. Response from such JavaScript call is received within the same Streamlit execution, this makes it possible to use values returned from JavaScript in Python logic. In this example, I show one liner JavaScript call to get UI screen width, to be able to calculate layout structure adjustments in Python, based on the screen size.

 

Building Streamlit/Python Dynamic Forms

Streamlit is great to build Web UIs for data apps. Dynamic UIs are common requirement for data apps. Data structures usually dynamic, set of attributes is changing and this requires dynamic UI. I explain how to generate dynamic forms with Streamlit. It works very smooth.

 

Streamlit/Python Drawable Canvas - Element Selection (React JS)

With Streamlit component you can render canvas and draw. I explain how this canvas component implements object selection and passes data from React canvas to Streamlit.

 

Understanding Streamlit/Python Application Flow

Streamlit re-executes Python script, each time when the request is sent to the server. You should keep this in mind when building Streamlit apps. There are scenarios when you want to make sure code is not executed on subsequent call. You can control this with Streamlit session object.

 

Streamlit/Python Handling Fast Data Entry

I explain how to enable fast data entry in Streamlit with form component. By default, Streamlit input components execute server call on data change. When wrapped by form component, changes are sent to the server in batch, when Save button is pressed.

 

Streamlit Python/React for Image Annotation

Data annotation is important step in ML model training process. With data annotation tool you can build a dataset and use it to train or finetune the model. There are Streamlit components available to draw on top of images using canvas. In this video I explain how to use these components. How to run them locally to be able to add changes based on your own functionality requirements.

 

Streamlit Python App Setup

I explain my experience setting up the new Streamlit app for development. I share several best practices and hints on how to make application code readable and maintainable. I talk about the development process with Streamlit and why it is a good choice to build UI for new products.

 

Django Python with Oracle JET UI Table

Oracle JET provides a large set of UI components for enterprise apps. I explain how you can display data from Django with Oracle JET table. Data is injected into Django HTML template on the server side and later consumed by JET UI component.

 

HTMX: Events and Triggers - Django CRUD, part 5

Refreshing dependent fragments with data is a very common use case in enterprise applications. In this example, data is changed in editable form. If data is saved to DB successfully through Django backend, we raise HTMX event and with HTMX trigger refresh dependent readonly table to display the latest data.

 

HTMX: Saving Form Changes - Django CRUD, part 4

I explain how to run POST request through HTMX attribute on HTML form tag to save form changes to the backend. You will see how to report validation errors through HTMX response.

 

HTMX: Fetch Edit Form Data - Django CRUD, part 3

HTMX makes it possible to call the backend from HTML without JavaScript. You can add HTMX attribute to HTML tag, for example, button, and call backend endpoint. HTMX can process HTML fragment response and inject it into the Web page. This allows achieving partial page refresh, without full page reload.

Python Django Model Form - Django CRUD, part 2

I explain how to generate UI in Django on top of Model Form. You can define Model Form with Django Model and inherit model attributes and constraints. Model Form makes it simple not only to render the form, but also control validation and data processing phases.

 

Python Django CRUD part 1 - Data Model and Constraints

In this episode of Django CRUD, I will explain how to define a data model in Django and set up constraints to ensure data validity. These constraints will be applied automatically when data will be updated from the UI.

 

Dynamic UI in Django with Alpine.js

Django generates static HTML UI, this requires a full request submit to the server. But you can build dynamic UI's, by including and using Alpine.js library. With Alpine.js you can open dialogs, hide content or disable UI controls. This helps to improve Django app UI usability.

 

The old old coolness - HTMX | Execute HTTP request directly from HTML tag

Developing a modern Web app with Django and Tailwind? Thinking of using React, Vue, or another fancy JS library for UI implementation? I would recommend spending some time and trying HTMX. With HTMX you can execute partial requests and return HTML content to replace web page regions. HTMX properties are defined directly on HTML tags, this makes it easy to use and flexible.

 

GitHub Copilot with Django Python: Create Django Model

GitHub Copilot helps to save developer time, it can suggest common utility functions code quite well. There is no need to spend time searching on Google or StackOverflow. I love it and it works very well with Python.

 

Oracle JavaScript (JET) UI rendered in single HTML file

Oracle JavaScript Extension Toolkit (JET) comes with a strong set of UI components for enterprise. You can reuse these components in other UI toolkits/frameworks. In this video I show how you can run JET table components in a single HTML file, without any additional configuration in separate files.

 

Tailwind UI in Django with Flowbite Accordion, Table, Form

I explain my experience working with Flowbite to build prototype UI for data mapping screen with accordion, table and form components.

 

MLUI: Webpack, Django, JavaScript

This quick video explains how to run Webpack inside Django project to package JavaScript files into a single bundle.

 

MLUI: Django HTML Template Tags

Django HTML template tags help to implement dynamic logic, processed on the server-side and rendered through HTML response on the client. This helps to integrate HTML structure with Django backend. In this video I explain how to use Django built-in tags in HTML.

 

MLUI: Django, Tailwind and Flowbite (Katana ML Sparrow)

This video is about Tailwind and Flowbite integration with Django Python project. With Tailwind and Flowbite you can build modern UIs with Django HTML templates, without using React or Vue.

 

MLUI: Django HTML Templates

I explain how to create a Web page in Django using HTML templates and add URL routing to Django view.

 

MLUI: Django App Setup

UI plays an essential part for ML apps, it helps build access to ML model API. With friendly and usable UI there are more chances for ML project to be successful. I'm building UI for our ML product Sparrow (data extraction from the documents). I will be explaining in the series of videos, how to build UI (including security, data model, etc.) for ML project. Stay tuned, it will be fun and lots to learn.

 

MLOps: Simple Kubernetes with Skipper

Kubernetes can be very complex, this is why we created Skipper. Simple and flexible MLOps workflow engine, it helps to run ML (and not only) workloads on Kubernetes. Skipper comes with all the scripts to setup and run microservices infrastructure on Kubernetes. Try it and enjoy!

 

File Upload with PyScript

I explain how to implement file upload functionality with PyScript in the browser. File content is converted to Pandas and displayed in the table. All UI components are native Python. I show how to interact with HTML DOM structure from PyScript.

 

Data Annotation with SVG and JavaScript

I explain how to build a simple data annotation tool with SVG and JavaScript in HTML page. The sample code renders two boxes in SVG on top of the receipt image. You will learn how to select and switch between annotation boxes. Enjoy!

 

PyScript - Deep Dive for Developer

PyScript was announced last week at PyCon US 2022. Good news for all Python developers, now we can run Python logic serverless in the browser. This video is deep dive, with a step-by-step explanation of the sample application code. It includes an input component, chart, and table. I explain how to update UI when the input component changes. Hope this will be useful for your practical knowledge.

 

PyScript - Python in the Browser

Exciting times! On PyCon US 2022 it was announced about PyScript. With PyScript framework, we can run regular Python code directly in the browser, included in py-script tag. This opens lots of new possibilities for serverless Python applications, using the same API and libraries you used to code on the server-side. Think about the browser as VM that runs your code.

 

UI for ML - Django, React or Streamlit?

UI is an important part for ML app to be successful. In this video I discuss multiple UI options I was looking into to build UI for our ML product. While deciding on which UI framework or library to use, you should point your attention to multiple things - such as ease of data transfer, UI flexibility, and ability to build user-friendly functionality.

 

Mindee docTR - Probably the Best Open-Source OCR

Do you want to build ML pipeline to automate data extraction from business documents (receipts, invoices, forms)? Then your first step should be to integrate OCR for text extraction. OCR extraction quality must be good, the whole pipeline will depend on initial text data extraction quality. If extracted data will be accurate, this means ML models will be able to run proper classification. I spent time researching available solutions for OCR and I think Mindee docTR currently is one of the best open-source OCR solutions available. Check the video, where I run and show multiple tests.

 

Document Information Extraction Demo on Hugging Face Spaces

This video shows how fine-tuned LayoutLMv2 document understanding and information extraction model runs on Hugging Face Spaces demo environment. I show how data extraction works for different receipts and why you should not rely on OCR which comes pre-configured together with LayoutLMv2 model.

 

Hugging Face LayoutLMv2 Model True Inference

I explain why OCR quality matters for Hugging Face LayoutLMv2 model performance, related to document data classification. If input from OCR is poor, ML classification inference results will be low quality too. This is why it is important to use high quality OCR system to extract text and coordinates from the document, before applying ML solution.

 

Get Receipt Data with Hugging Face ML Model

This tutorial is about how to use fine-tuned Hugging Face model to extract data from scanned receipt documents. We are executing inference action - passing receipt image, along with words and coordinates to the model. As a result, we get back predictions - class labels assigned to each input. This helps to classify document elements and extract correct data. I share a hint on how to match input words with classified labels. Input words and coordinates are expected to be retrieved from separate OCR.

 

Fine-Tuning with Hugging Face Trainer

In this tutorial, I explain how I was using Hugging Face Trainer with PyTorch to fine-tune LayoutLMv2 model for data extraction from the documents (based on CORD dataset with receipts). The advantage of Hugging Face Trainer - it simplifies model fine-tuning pipeline and you can easily upload the model to Hugging Face model hub.

 

Hugging Face Datasets - Example with Receipts Data

Hugging Face Datasets library provides a useful API to work with data for ML model fine tuning. It allows you to load and process any external datasets with your own Python functions. As a result, you will get a unified data interface and could reuse the same API for fine-tuning various Hugging Face models.

 

How To Evaluate Hugging Face Saved Model

You fine-tuned Hugging Face model on Colab GPU and want to evaluate it locally? I explain how to avoid the mistake with labels mapping array. The same labels mapping you used to fine-tune the model, should be used when evaluating (or doing inference) this model on the local environment (or in another Colab session).

Development Workflow with Hugging Face Transformer Model

This tutorial explains how I do app development with Hugging Face Transformer model. Typically the flow involves model fine-tuning on Colab GPU. Fine-tuned model is downloaded to my local development workstation where I continue development and use the model for inference task. To be able to run complex library dependencies locally, my development environment is setup with a remote Python interpreter through PyCharm and Docker.

 

What is Blockchain?

There is a lot of buzz around blockchain, Web3 and crypto. When studying blockchain concepts I found this demo app, it was very useful to me. This app demonstrates how blockchain works. I thought to share it with you, it really helps to understand the foundation and concepts.

 

Ethereum Test ETH for Web3/Blockchain Development

This is my first tutorial about Web3 and Ethereum Blockchain. I explain how to get test Ethereum token, review your wallet on Metamask and transfer tokens between accounts.

 

Hugging Face Gradio App on Docker

This quick tutorial is to explain and show how to run Hugging Face model with Gradio UI on Docker.

 

Running Hugging Face LayoutLM Model with PyCharm and Docker

This tutorial explains how to run Hugging Face LayoutLM model locally with PyCharm remote interpreter. This is cool, because a remote interpreter allows you to run and debug your custom logic, while running Hugging Face model and its dependencies in Docker container. I share Dockerfile, which helps to setup all dependencies. Enjoy!

 

Table Query with Hugging Face ML

Yes, you can do a search through a table data with Hugging Face model called TAPAS. I show how it works with sample CSV and example queries. The app runs on Hugging Face Spaces and you can play and upload your own CSV files for a test. Give it a try, maybe ML can replace SQL?

 

Hugging Face Gradio Python UI and CSV Processing

Explaining how to process CSV file uploaded through Gradio UI in Python. Gradio is part of Hugging Face. You will also learn how to define inputs and outputs for Gradio, to render UI components out of the box. Towards the end of the video, I will share a tip on how to read an error message, if the error happens during app development.