DEV Community: Yuichiro Tachibana (Tsuchiya)

Limit concurrent execution of compute-intensive code in a Streamlit app

Yuichiro Tachibana (Tsuchiya) — Tue, 27 Feb 2024 08:44:09 +0000

Co-written and improved by @multimodalart.

Update: concurrency_limiter in streamlit-extras is now available for this purpose.

When you are developing a Streamlit app that includes a compute- or resource-intensive task, such as machine learning inference using a GPU,
you may want to ensure that such a piece of the code only runs in a single thread (session) at a time, even when multiple users are accessing the app at the same time.

In such a case, using a lock is a solution.
Streamlit creates a separate thread for each user session, so you can use a lock shared among the threads to control the execution of the compute-intensive code.

(For Gradio users: queue is a well-known solution for this problem in the case of Gradio.)

Here is an example of how to use a lock in a Streamlit app.
st.cache_resource is used to create a global lock that is shared among the threads,
and the lock is used to ensure that compute_intensive_task() is executed by only one thread at a time (if compute_intensive_task() is defined in another module, see the last section).

import streamlit as st
import threading


def compute_intensive_task():
    " Your compute-intensive code here "


@st.cache_resource
def get_global_lock():
    return threading.Lock()


global_lock = get_global_lock()

with st.spinner("Running a compute-intensive task"):
    with global_lock:
        st.write("Task started")
        compute_intensive_task()

st.write("Task completed")

Note that, with this lock-based approach, the concurrency of the locked task is limited to 1 per lock, while the queue and worker pattern can be used to control the concurrency to any number.

Practically, it would be a good idea to add a button to manually trigger the compute-intensive task in such cases. Without it, the task would be executed every time a new user accesses the app or the app is reloaded, which is not efficient.

import streamlit as st
import threading


def compute_intensive_task():
    " Your compute-intensive code here "


@st.cache_resource
def get_global_lock():
    return threading.Lock()


global_lock = get_global_lock()

if st.button("Run a compute-intensive task"):
    with st.spinner("Running a compute-intensive task"):
        with global_lock:
            st.write("Task started")
            compute_intensive_task()

    st.write("Task completed")

If you want something like a "concurrency group", you can create multiple locks and use them in the same way as below. To do so, get_global_lock() is changed to take a key argument so it returns different locks for different keys, as the st.cache_resource decorator controls the cache with the func arguments (and the func's source code).

import streamlit as st
import threading


@st.cache_resource
def get_global_lock(key):
    return threading.Lock()


global_lock_A = get_global_lock("A")

with st.spinner("Running a compute-intensive task A"):
    with global_lock_A:
        st.write("Task A started")
        compute_intensive_task_A()

global_lock_B = get_global_lock("B")

with st.spinner("Running a compute-intensive task B"):
    with global_lock_B:
        st.write("Task B started")
        compute_intensive_task_B()

st.write("Task completed")

If the task is defined in another module and the Streamlit app script imports it, you can define the lock object in the module scope and simply use it in the function. This lock object will be shared among the threads.
This is because, while Streamlit runs the main app script in a separate namespace in a different thread for each user session, the imported modules are loaded only once and shared among the threads like normal Python module usage.

# app.py (main Streamlit app script)
import streamlit as st

from foo import compute_intensive_task


with st.spinner("Running a compute-intensive task"):
    compute_intensive_task()

st.write("Task completed")

# foo.py (module containing the compute-intensive task)
import threading


lock = threading.Lock()


def compute_intensive_task():
    with lock:
        " Your compute-intensive code here "

Are multiple submissions to PyCon (or tech conferences) OK?

Yuichiro Tachibana (Tsuchiya) — Tue, 24 Oct 2023 15:04:52 +0000

YES✅

Different from academia

Unlike academic conferences and journals , it is common to submit the same talk proposal to multiple PyCon held in different countries/places simultaneously.

For other tech conferences, I have neither participated in nor submitted a talk proposal, so I don’t know the situation. You should check the conference’s website or ask the organizer or experienced people around you.

My case

In 2022, I presented a talk titled “Real-time browser-ready computer vision apps with Streamlit” at EuroPython 2022 and PyCon APAC 2022. This time, I first submitted the talk proposal to PyCon US 2022, then before the result came out, I submitted the same talk proposal to EuroPython and PyCon APAC as well. Because it was my first time to submit a talk proposal to PyCon, I was not sure if it was OK to submit the same talk proposal to multiple PyCon, so I asked the EuroPython and PyCon APAC organizers via e-mails. Then they said it was OK.

After I entered the PyCon sphere, I found that it is actually common. Many people do this, and it is sometimes a good strategy for them to make travel to many countries! (See my related post👉 Conf-driven Traveling✈️.

I wrote this post because I couldn’t find any information clearly answering this question on the Internet.

In 2023, I actually submitted the same talk proposal to multiple PyCon and it was accepted by PyCon DE & PyData Berlin 2023, PyCon LT, PyCon TW, and PyCon APAC🎉

Find VSCode's undocumented when clause contexts

Yuichiro Tachibana (Tsuchiya) — Thu, 16 Feb 2023 16:09:41 +0000

Command to get the VSCode's when clause contexts

VSCode has many undocumented when clause contexts that still can be used in the when clauses in keybindings.json.

You can get the list of when clause contexts including such undocumented ones by running the following steps.

Clone the VSCode repository.
Run the command below at the repository root.

   grep -rni -E "RawContextKey(<.*>)?\('.*\)" src/* | sed -E "s/^.*RawContextKey(<.*>)?\(([^)]*)\).*/\2/" | sed -E "s/^.*RawContextKey(<.*>)?\(([^)]*)\).*/\2/" | sed -E "s/'([^']*)'.*/\1/" | uniq | sort

You can see the result at the bottom of this page.

We can get only the context names with this command, so we have to infer what each one is from its name or by reading the code.

What it does

It looks like the RawContextKey class is used to register the contexts in the VSCode source code, so this command extracts the literal arguments passed to that class.

Some exceptions

Some arguments passed to new RawContextKey() are not literals but variables that the command can't extract, so we have to read the code to get the context names in such cases.

The following command returns all such lines at least.

grep -rni -E "RawContextKey(<.*>)?\([^'].*\)" src/*

Disclaimer

These are not documented, so not official.

The result

Here is the list obtained from VSCode 1.75.0.

LinkedEditingInputVisible
acceptSuggestionOnEnter
accessibilityHelpWidgetVisible
accessibilityHelpWidgetVisible
accessibilityModeEnabled
activeAuxiliary
activeEditor
activeEditorAvailableEditorIds
activeEditorCanRevert
activeEditorCanSplitInGroup
activeEditorGroupEmpty
activeEditorGroupIndex
activeEditorGroupLast
activeEditorGroupLocked
activeEditorIsDirty
activeEditorIsFirstInGroup
activeEditorIsLastInGroup
activeEditorIsNotPreview
activeEditorIsPinned
activeEditorIsReadonly
activeLogOutput
activeLogOutput
activeOutputChannel
activePanel
activeViewlet
allWalkthroughsHidden
alwaysShowInlineSuggestionToolbar
atEndOfWord
autoSaveAfterShortDelayContext
auxiliaryBarFocus
auxiliaryBarVisible
bannerFocused
breadcrumbsActive
breadcrumbsPossible
breadcrumbsVisible
breakWhenValueChangesSupported
breakWhenValueIsAccessedSupported
breakWhenValueIsReadSupported
breakpointInputFocused
breakpointItemType
breakpointSupportsCondition
breakpointWidgetVisible
breakpointsExist
breakpointsFocused
builtInExtensions
callHierarchyDirection
callHierarchyVisible
callStackItemStopped
callStackItemType
callStackSessionHasOneThread
callStackSessionIsAttach
canNavigateBack
canNavigateBackInEditLocations
canNavigateBackInNavigationLocations
canNavigateForward
canNavigateForwardInEditLocations
canNavigateForwardInNavigationLocations
canNavigateToLastEditLocation
canNavigateToLastNavigationLocation
canRedo
canReopenClosedEditor
canToggleWordWrap
canUndo
canUndoInlineSuggestion
canViewMemory
cancellableOperation
codeActionMenuVisible
commentEditorFocused
commentIsEmpty
commentThreadIsEmpty
commentsFilterFocus
commentsView.hasComments
commentsView.showResolvedFilter
commentsView.showUnResolvedFilter
currentProfile
customExecutionSupported
customTreeView
debugConfigurationType
debugExtensionAvailable
debugProtocolVariableMenuContext
debugSetExpressionSupported
debugSetVariableSupported
debugState
debugType
debuggerInterestedInActiveEditor
debuggersAvailable
defaultExtensionViews
dirtyDiffVisible
dirtyEditorFocusedInOpenEditors
dirtyWorkingCopies
disassembleRequestSupported
disassemblyViewFocus
downloadUrl
editSessionsShowView
editorAreaVisible
editorColumnSelection
editorFocus
editorHasCallHierarchyProvider
editorHasCodeActionsProvider
editorHasCodeLensProvider
editorHasCompletionItemProvider
editorHasDeclarationProvider
editorHasDefinitionProvider
editorHasDocumentFormattingProvider
editorHasDocumentHighlightProvider
editorHasDocumentSelectionFormattingProvider
editorHasDocumentSymbolProvider
editorHasHoverProvider
editorHasImplementationProvider
editorHasInlayHintsProvider
editorHasMultipleDocumentFormattingProvider
editorHasMultipleDocumentSelectionFormattingProvider
editorHasMultipleSelections
editorHasReferenceProvider
editorHasRenameProvider
editorHasSelection
editorHasSignatureHelpProvider
editorHasTypeDefinitionProvider
editorHasTypeHierarchyProvider
editorHoverVisible
editorIsOpen
editorLangId
editorReadonly
editorSimpleInput
editorTabMovesFocus
editorTabsVisible
editorTextFocus
editorWordWrap
embedderIdentifier
emptyWorkspaceSupport
enterMultiRootWorkspaceSupport
exceptionWidgetVisible
explorerResourceAvailableEditorIds
explorerResourceCut
explorerResourceIsFolder
explorerResourceIsRoot
explorerResourceMoveableToTrash
explorerResourceReadonly
explorerViewletCompressedFirstFocus
explorerViewletCompressedFocus
explorerViewletCompressedLastFocus
explorerViewletFocus
explorerViewletVisible
expressionSelected
extensionHostProfileRecorded
extensionSearchHasText
extensionsSortByValue
fileCopied
fileMatchFocus
fileMatchOrFolderMatchFocus
fileMatchOrFolderMatchWithResourceFocus
fileMatchOrMatchFocus
filesExplorerFocus
findInputFocussed
findWidgetVisible
firstMatchFocus
focusedCustomEditorIsEditable
focusedSessionIsAttach
focusedStackFrameHasInstructionReference
focusedView
folderMatchFocus
folderMatchWithResourceFocus
foldingEnabled
forwardedPortsViewEnabled
groupEditorsCount
groupFocusedInOpenEditors
hasConflicts
hasDebugged
hasGallery
hasInstalledExtensions
hasLocalServer
hasMultipleNewFileEntries
hasNextTabstop
hasOtherSuggestions
hasOutdatedExtensions
hasPrevTabstop
hasProfiles
hasRemoteServer
hasSearchResult
hasSnippetCompletions
hasSymbols
hasWebFileSystemAccess
hasWebServer
hasWordHighlights
inBreakpointWidget
inCompositeEditor
inDebugMode
inDebugRepl
inDiffEditor
inKeybindings
inKeybindingsSearch
inOutput
inOutput
inReferenceSearchEditor
inSearchEditor
inSettingsEditor
inSettingsEditorUserTab
inSettingsJSONEditor
inSettingsSearch
inSnippetMode
inTreeView
inWelcome
inZenMode
inlineSuggestionHasIndentation
inlineSuggestionHasIndentationLessThanTabSize
inlineSuggestionVisible
inputBoxFocus
interactiveInputCursorAtBoundary
interactivePlaygroundFocus
interfaceOverviewVisible
isCenteredLayout
isCurrentProfileTransient
isDevelopment
isExtensionBisectActive
isFileSystemResource
isFullscreen
isIOS
isInEmbeddedEditor
isLinux
isMac
isMacNative
isMergeEditor
isMergeResultEditor
isMobile
isProfileExportInProgress
isProfileImportInProgress
isReadingLineWithInlayHints
isWeb
isWindows
isWorkspaceTrustEnabled
isWorkspaceTrusted
jumpToCursorSupported
keybindingFocus
languageSupportsDisassembleRequest
listDoubleSelection
listFocus
listHasSelectionOrFocus
listMultiSelection
listSelectionNavigation
listSupportsFind
listSupportsMultiselect
loadedScriptsItemType
loadedScriptsSupported
localHistoryItemSelectedForCompare
markersNavigationVisible
matchFocus
mergeEditorBaseUri
mergeEditorLayout
mergeEditorResultUri
mergeEditorShowBase
mergeEditorShowBaseAtTop
mergeEditorShowNonConflictingChanges
messageVisible
multiCursorModifier
multiSessionDebug
multiSessionRepl
multipleEditorGroups
notebookBreakpointMargin
notebookCellEditable
notebookCellEditorFocused
notebookCellExecuting
notebookCellExecutionState
notebookCellFocused
notebookCellHasOutputs
notebookCellInputIsCollapsed
notebookCellLineNumbers
notebookCellListFocused
notebookCellMarkdownEditMode
notebookCellOutputIsCollapsed
notebookCellResource
notebookCellToolbarLocation
notebookCellType
notebookCursorNavigationMode
notebookDiffCellInputChanged
notebookDiffCellPropertyChanged
notebookDiffCellPropertyExpanded
notebookEditable
notebookEditorCursorAtBoundary
notebookEditorFocused
notebookFindWidgetFocused
notebookHasOutputs
notebookHasRunningCell
notebookInterruptibleKernel
notebookKernel
notebookKernelCount
notebookKernelSelected
notebookKernelSourceCount
notebookLastCellFailed
notebookMissingKernelExtension
notebookOutputFocused
notebookType
notebookUseConsolidatedOutputButton
notificationCenterVisible
notificationFocus
notificationToastsVisible
openEditorsFocus
openEditorsVisible
openFolderWorkspaceSupport
openPreviewEnabled
outlineAllCollapsed
outlineFiltersOnType
outlineFollowsCursor
outlineSortMode
panelAlignment
panelFocus
panelMaximized
panelPosition
panelVisible
parameterHintsMultipleSignatures
parameterHintsVisible
patternExcludesInputBoxFocus
patternIncludesInputBoxFocus
portChangable
problemFocus
problems.filter.activeFile
problems.filter.errors
problems.filter.excludedFiles
problems.filter.info
problems.filter.warnings
problemsFilterFocus
problemsViewMode
problemsVisibility
processExecutionSupported
productQualityType
profileSessionState
profiles.enabled
readonlyEditorFocusedInOpenEditors
recommendedExtensions
refactorPreview.enabled
refactorPreview.groupByFile
refactorPreview.hasCategories
refactorPreview.hasCheckedChanges
referenceSearchVisible
relatedInformationFocus
releaseNotesUrl
remoteConnectionState
remoteFileDialogVisible
remoteName
renameInputVisible
replaceActive
replaceInputBoxFocus
replaceInputFocussed
resource
resourceDirname
resourceExtname
resourceFilename
resourceLangId
resourcePath
resourceScheme
resourceSelectedForCompare
resourceSet
restartFrameSupported
scmProvider
scmProviderHasRootUri
scmProviderRootUri
scmRepositoryCount
scmRepositorySortKey
scmRepositoryVisibleCount
scmViewModelAreAllRepositoriesCollapsed
scmViewModelIsAnyRepositoryCollapsible
scmViewModelMode
scmViewModelSortKey
searchBuiltInExtensions
searchDeprecatedExtensions
searchDisabledExtensions
searchEnabledExtensions
searchExtensionUpdates
searchInputBoxFocus
searchInstalledExtensions
searchMarketplaceExtensions
searchOutdatedExtensions
searchRecentlyUpdatedExtensions
searchState
searchUnsupportedWorkspaceExtensions
searchViewletFocus
searchViewletVisible
selectionAnchorSet
serverlessWebContext
settingRowFocus
settingsTocRowFocus
shellExecutionSupported
showPreReleaseVersion
sideBarFocus
sideBarVisible
sideBySideEditorActive
sortByUpdateDate
splitEditorsVertically
stackFrameSupportsRestart
statusBarFocused
stepBackSupported
stepIntoTargetsSupported
suggestWidgetDetailsVisible
suggestWidgetHasFocusedSuggestion
suggestWidgetMultipleSuggestions
suggestWidgetVisible
suggestWidgetVisible
suggestionCanResolve
suggestionHasInsertAndReplaceRange
suggestionInsertMode
suggestionMakesTextEdit
supportedCodeAction
suspendDebuggeeSupported
syncEnabled
syncStatus
taskCommandsRegistered
taskRunning
temporaryWorkspace
terminateDebuggeeSupported
testing.activeEditorHasTests
testing.autoRun
testing.canRefresh
testing.explorerViewMode
testing.explorerViewSorting
testing.hasAnyResults
testing.hasConfigurableProfile
testing.hasCoverableTests
testing.hasDebuggableTests
testing.hasNonDefaultProfile
testing.hasRunnableTests
testing.isContinuousModeOn
testing.isInPeek
testing.isPeekVisible
testing.isRefreshing
testing.isRunning
testing.providerCount
testing.supportsContinuousRun
textCompareEditorActive
textCompareEditorVisible
textInputFocus
timelineExcludeSources
timelineFollowActiveEditor
timelineHasProvider
treeElementCanCollapse
treeElementCanExpand
treeElementHasChild
treeElementHasParent
treeFindOpen
tunnelCloseable
tunnelPrivacy
tunnelPrivacyEnabled
tunnelProtocol
tunnelType
tunnelViewFocus
typeHierarchyDirection
typeHierarchyVisible
updateState
userDataSyncAccountStatus
userDataSyncTurningOn
userHasOpenedNotebook
variableEvaluateNamePresent
variableIsReadonly
variablesFocused
viewHasFilePattern
viewHasReplacePattern
viewHasSearchPattern
viewHasSomeCollapsibleItem
viewHasSomeCollapsibleResult
virtualWorkspace
watchExpressionsExist
watchExpressionsFocused
watchItemType
webviewFindWidgetEnabled
webviewFindWidgetFocused
webviewFindWidgetVisible
whenFocus
workbenchState
workspaceFolderCount
workspacePlatform

Streamlit meets WebAssembly - stlite

Yuichiro Tachibana (Tsuchiya) — Wed, 09 Nov 2022 07:58:09 +0000

TL;DR

I created a WebAssembly (Wasm) port of Streamlit, "stlite".
You can try it out and share your apps on "stlite sharing", the online code editor + app sharing platform for stlite.
The Wasm-based runtime provides many benefits such as offline capability, data privacy, and scalability.
In addition to stlite sharing, you can also host your Streamlit/stlite apps on your web site or create offline desktop applications. So you can create multi-platform apps only with Python coding.

Streamlit: a great Python web app framework

Streamlit is a web app framework with which we can create interactive web apps only with Python coding. It is especially famous and popular for data apps development as it well supports many data widgets cooperating the DS/ML Python ecosystem, while it also covers a wide range of general purpose web development.

When you run a Streamlit app, the Streamlit framework starts a web server and it serves a frontend app that is a single page application (SPA) whose contents are dynamically constructed according to your app script written in Python. Then the frontend app continuously communicates with the web server and triggers the Python code executions on the server upon some events to get some results that dynamically update the frontend view.
Due to this unique server-client architecture, we can construct interactive web apps only by writing the logics in the server-side Python code.

stlite: client-side Streamlit powered by Pyodide

There had been an epoch-making invent in the Python world - Pyodide. It is a CPython runtime compiled for WebAssembly (Wasm) that runs on web browsers (and NodeJS).

So I customized Streamlit to run on Pyodide runtime and released it as "stlite"!

On stlite, the entry point is a JavaScript file that mounts the Streamlit frontend SPA into the HTML page, loads the Pyodide environment, and launches the Streamlit Python server in the Pyodide environment on the web browser.

With this architecture, thanks to Pyodide, the Python runtime no longer exists on the server side since it runs on the web browser.
The web server is only for serving the static files such as HTML, JS, and CSS.

Pros and Cons

As it runs completely on the browsers, stlite has some benefits that the original Streamlit does not have.

Offline capability:
As even the Streamlit "server" runs on the browser, all the components resides on the client side, so once all the resources are loaded from the web server, the app can run offline.
Data privacy:
Since the entire app runs on your browser, even when you do "upload" some files from the file uploader on the page, these files are NEVER sent to any remote servers and only processed within your machine.
This feature is sometimes beneficial especially in the applications of data science, machine learning, or statistics where Streamlit is widely used, as these often have strict privacy rules.
Scalability:
The main workload such as machine learning computation written in Python moves from the server to each browser, so the system becomes scalable.
Multi-platform (web, desktop, mobile):
As it runs on web browsers, it can also be an installable app (PWA), and can be bundled into a desktop app with Electron. Building mobile apps is also on the read map.
As a result, you can create interactive apps only in Python with Streamlit and bundle them for each platform.
Online editing experience:
I developed the online editor & real-time preview service for Streamlit apps based on stlite - stlite sharing that we will see below soon.
Precisely, this is not purely because of WebAssembly, but the Wasm-based architecture made it easier to create such a service which could not have existed before.

On the other hand, stlite and Pyodide has some disadvantages as a tradeoff.

Some packages are not available:
Some C extension packages such as TensorFlow cannot be installed because C extensions must be compiled for the Pyodide runtime specifically, while many popular C extensions are already available such as NumPy or Pandas.
For more details, read the Pyodide articles such as this one.
Large initial payload:
A large amount of resources will be downloaded when the user opens the app because Pyodide loads the whole Python runtime and the standard libraries, and stlite also downloads the necessary wheel files including the streamlit package.
Network restriction:
For the security reasons, accessing remote resources from the stlite applications are restricted by the browser, e.g. CORS.
The source code is open:
Note that all the source code and hosted data are sent to the client side, so they are visible to the users. You must not put any secrets on the source code of the stlite apps.

(This section is highly inspired by the blog post about Shinylive.)

Online code editor + app sharing platform: stlite sharing

stlite sharing is an online code editor + app sharing platform for stlite. It is the easiest and fastest way to try out stlite.

The following screenshot is the online editing & app preview mode of stlite sharing. You can try it out at https://edit.share.stlite.net/ .

When you create/edit/delete the files on the left pane, those changes are applied to the virtual file system on top of which stlite runs, then the Streamlit server detects the file changes and recommends you to hot-reload the application, as shown in the screenshot below.
(The file change detection and hot-reloading is a part of the Streamlit core features. If you are not familiar with it, read the official document.)

The file changes are saved to the file system when the "Save" button is clicked.
You can also add or delete the files on the file tabs.

Shareable URLs

On stlite sharing, you can get the shareable URL of the current app displayed at top right. There is also the "Open App" link next to it, through which you can open the URL.

By navigating to the URL or clicking the link, the app opens in the sharing mode as below, where only the Streamlit app opens and there are not the editor, the sharing link, and any other widgets.

Its URL is https://share.stlite.net/ with a long hash like #!ChBz....

The host https://share.stlite.net/ is for the app sharing mode of stlite sharing while the editor mode we have seen above is at https://edit.share.stlite.net/.

In the long hash part of the URL like #!ChBz...,
all the source code and data edited on the editor are encoded and embedded, so you can share the app only by copying this URL.

Another good point of this approach is, since all the code and data are embedded into the URL hash, these data are never uploaded and saved to the remote server.

The encoded URL hash is also loadable on the editor mode, so if you open the editor mode URL, https://edit.share.stlite.net/ with the hash, the app data will be restored on the editor.

Note that some SNS and URL shortening services cut off the long URLs, so you should take care of it when sharing the URL on such platforms. For the details, read this part of the Shinylive article.

This URL mechanism is inspired by Shinylive.

Adding files

By clicking the "+" button at the file tabs area, you can create a new file.

You can also upload files from your local env (the files are never "uploaded" to any remote servers. They are just sent to the virtual file system on your browser.) Though this uploader, you can also add binary files.

Files in directories and Multipage apps support

You can edit the file name on the tab, and importantly, by inserting the file path delimiter, /, you can create files in directories.

With this feature, stlite sharing supports the Streamlit's Multipage apps.
In short, by creating a Python file in the pages/ directory (pages/*.py), you can add a new page in the app.
For the details, read the official document about Multipage apps.

Installing packages

When you need to install some packages, use the special "requirements" tab.

The package names written in the editor on this tab will be passed to the package installer micropip.install() internally (on the Pyodide runtime, micropip is used as a package manager) when clicking the "Save" button.
Write one package name per line.

This is a special tab in that the file content is not saved into the file system. It is used only for specifying the package names passed to micropip.install().

Please note again that some C extension packages cannot be installed. The following screenshot is the sample of such a case, where installing a C extension failed.

Samples

You can find some samples on the side menu, so check out these! I hope some inspire you.

For example, the "Streamlit Hello" demo runs the official Streamlit demo on stlite while it is available through the streamlit hello command with the original Streamlit.

With a recent release of Pyodide 0.21, many C-extensions became available including OpenCV.
stlite sharing includes the samples using OpenCV and scikit-image with real-time video streaming. Even these samples run on web browsers and nothing are sent to any remote servers!

// Detect dark theme var iframe = document.getElementById('tweet-1583352801195065346-643'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1583352801195065346&theme=dark" }

Loading apps from GitHub or Gist

Instead of the encoded URL hash explained above,
you can host your Python script somewhere and pass its URL to stlite sharing via the URL hash as below.

https://share.stlite.net/#https://...py

If the URL is of GitHub or Gist, you can pass the preview page URL instead of the raw file URL.
For example, https://share.stlite.net/#https://github.com/napoles-uach/test/blob/main/app.py works.

When you need to install some packages, use the following format instead.

https://share.stlite.net/#url=<Script URL>?req=<Package1>&req=<Package2>

The example of this format installing opencv-python and matplotlib follows: https://share.stlite.net/#url=https://github.com/whitphx/stlite-sample/blob/main/opencv-image-processing.py&req=opencv-python&req=matplotlib
There is also the Gist version: https://share.stlite.net/#url=https://gist.github.com/whitphx/f23b7b2bbda19cd421121bd72ebf2101&req=opencv-python&req=matplotlib

Host your Streamlit app on your web site

stlite also supports self-hosting the apps.

All you have to do is write and host a single HTML file.

It would be something like below, where you can embed the Python source code into the JS code as a string literal.

<!DOCTYPE html>
<html>
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, shrink-to-fit=no"
    />
    <title>stlite app</title>
    <link
      rel="stylesheet"
      href="https://cdn.jsdelivr.net/npm/@stlite/mountable@0.15.0/build/stlite.css"
    />
  </head>
  <body>
    <div id="root"></div>
    <script src="https://cdn.jsdelivr.net/npm/@stlite/mountable@0.15.0/build/stlite.js"></script>
    <script>
      stlite.mount(
        `
import streamlit as st

name = st.text_input('Your name')
st.write("Hello,", name or "world")
`,
        document.getElementById("root")
      );
    </script>
  </body>
</html>

If you need to install some packages, specify the entrypoint file name, and/or use multiple files, use the following more flexible API.

stlite.mount(
  {
    requirements: ["matplotlib"], // Packages to install
    entrypoint: "streamlit_app.py", // The target file of the `streamlit run` command
    files: {
      "streamlit_app.py": `
import streamlit as st
import matplotlib.pyplot as plt
import numpy as np

size = st.slider("Sample size", 100, 1000)

arr = np.random.normal(1, 1, size=size)
fig, ax = plt.subplots()
ax.hist(arr, bins=20)

st.pyplot(fig)
`,
    },
  },
  document.getElementById("root")
);

After writing the HTML file, host it wherever you like, such as GitHub Pages.
In your local env, you can test it with python -m http.server 8000.

This YouTube video may guide you to set it up on GitHub Pages (although the stlite API used in the video is out-dated now.)

https://youtu.be/VQdktxgbmmg

Please read the README for the details about self-hosting apps!

Bundle your Streamlit app as a desktop app

The stlite apps run on web browsers, so it is also possible to bundle them into desktop apps with Electron.

// Detect dark theme var iframe = document.getElementById('tweet-1577750208364134421-374'); if (document.body.className.includes('dark-theme')) { iframe.src = "https://platform.twitter.com/embed/Tweet.html?id=1577750208364134421&theme=dark" }

To create your own desktop app with stlite,
follow this instruction! -> https://github.com/whitphx/stlite/tree/main/packages/desktop-cli#readme

There is a sample app repository and its distributable files too.

A sample app repository
Distributable files (the macOS app file is not signed, so the security alert may be shown)

Tell us your story!

When you create some apps with stlite, please share it!

If it's on stlite sharing, all you have to do is copy and paste the URL 👍

These are good places to share your apps, samples, or case studies!

My talk at EuroPython 2022

Yuichiro Tachibana (Tsuchiya) — Sun, 17 Jul 2022 22:31:31 +0000

I presented a talk at EuroPython 2022 in Dublin.

The talk title was “real-time browser-ready computer vision apps with Streamlit.” It was on 14th July, and its description is linked below.https://ep2022.europython.eu/session/real-time-browser-ready-computer-vision-apps-with-streamlit

Its contents were mainly based on the Medium post I wrote with a similar title, “Developing Web-Based Real-Time Video/Audio Processing Apps Quickly with Streamlit”, but the talk contained live-demo, live-coding, and more storytelling introduction.

The live-stream archive that contains my talk has already published as linked below (this link is pointing to my talk time), while the edited version will be open later:

You can find my voice was so high-pitch and my hands moved randomly because I was so nervous, especially at the beginning… ironically, I could speck in such a high speed due to many practices I did 😂

(@takanory took this picture of me. Thanks.)

Regardless of that, I could successfully present all the contents as I planned and some people said it was informative nice talk which made me so glad.

It was nice that with this talk, I could (a bit) promote my OSS project that I’m dedicated to and have positive feedback.

A library for editable live samples of React components, React Runner

Yuichiro Tachibana (Tsuchiya) — Thu, 26 May 2022 07:37:40 +0000

I recently created a React component library and wanted to publish a demo page for it that shows what the library can do with sample code.

The actual demo page is like the following. There are a code editor with preset sample code and a rendering result of the React component side by side. Both are embedded in the demo page along with other elements.

The demo page of react-ymd-date-select

TL;DR

To do that, React Runner was the best in my situation, compared to the following alternatives.

React Live
- This does not support import statements in the sample code.
Sandpack (@codesandbox/sandpack-react)
- This does not support nested paths such as import Something from "package/subpath"
- https://github.com/codesandbox/codesandbox-client/issues/6499
Embedding sample code at build time with bundler’s setting as such as raw-loader for Webpack.
- This requires 2 imports per example as below, but I did not like that due to its redundancy.

  import SampleComponent from "./components/Sample"
  import SampleComponentCode from "./components/Sample?raw"

  ...

  <LivePreview
    component={SampleComponent}
    code={SampleComponentCode}
  />

Requirements/conditions

I wanted to show the sample code and the rendered React component side by side.
- It’s better if users can edit the code and the result changes dynamically.
Those samples should also be used as E2E test suites, so each sample code should be self-contained and executable without implicit dependencies.
- Each component file should import necessary packages and export a component.
The demo site is built with React.
- The actual code base is https://github.com/whitphx/react-ymd-date-select/tree/main/website
The target library is for React, so sample code is also written with React.
They are written in TypeScript.

Comparison

React Runner

React Runner satisfied all my needs.

One drawback of this is that it requires all the libraries that might be imported in the samples to be bundled into the web page. While it's natural and technically inevitable, it leads to bigger bundle size.
Sandpack below may not have this problem.

React Live

A popular library for this purpose. For example, Chakra UI’s doc is using this for its editable examples like the screenshot below.

The author of React Runner wrote that it was inspired by React Live. From its design, React Runner looks like a superset of React Live.

I did not use React Live because I wanted to show complete and self-contained sample code including import statements, but React Live did not support it.

Sandpack

A component library of the famous online code editor, CodeSandbox.

As my project was using React, its variant for React, @codesandbox/sandpack-react was the candidate.

This was also a nice library, but I could not choose it because it does not support imports from nested paths such as import Something from "package/subpath".

My library was built both for ESM and CommonJS and the CommonJS version allowed such nested imports, so I wanted to show that.

If this limitation is not a problem for you, Sandpack may be the best.

Embedding sample code at build time

Some bundlers allow to import the file contents as string instead of normal modules. There are raw-loader for Webpack and ?raw query for Vite.

This was also a nice solution as I could have each sample code as a separate *.jsx or *.tsx file and that was comfortable to write the code.

// Sample.tsx

function SampleComponent() {
  return (
    <div>This is a sample</div>
  )
}

export default SampleComponent;

// DemoSite.tsx

import SampleComponent from "./components/Sample"
import SampleComponentCode from "./components/Sample?raw"

...

export default function() {
  ...
  return (
    ...
    <LivePreview
      component={SampleComponent}
      code={SampleComponentCode}
    />
    ...
  )
}

However, it requires 2 imports per 1 sample code and it was redundant. Also, it does not provide live-editing experience.

A React library for Y-M-D dropdown date picker

Yuichiro Tachibana (Tsuchiya) — Wed, 11 May 2022 11:52:33 +0000

I created react-ymd-date-select, a React library for Year, Month, and Day dropdown UI.

whitphx/react-ymd-date-select - GitHub

We sometimes need Y-M-D dropdown UI like the screenshot above rather than calendar UI. For example, when asking users to select their birth dates, Y-M-D dropdown is preferable because calendar widgets are usually difficult to seek to far old years, and conversely, its benefits such as intuitively showing days-of-week are not needed.

I actually encountered such a situation, however, I could not find any existing packages that meet my needs. In turn, building it by myself looks simple, but actually, there are some nuts as below.

Generating the arrays of year, month, and day numbers and labels.
Validating the combination of Y-M-D. For example, 2022-02-29 (Feb 29, 2022) is an invalid combination - that date does not exist.
Combining the 3 values from Y, M, D <select >s into one date string, and integrating it with the form component state or form library, e.g. React Hook Form through value and onChange props.

And sometimes there come more requirements like

To set the default year.
To show only year and month selects (hide the day dropdown).

So, to handle these, I made a library react-ymd-date-select.

With the useDateSelect() hook provided by this library, you can create original Y-M-D components like the sample below, focusing on the view behavior as cumbersome logic has been encapsulated into the hook.

The value prop and the argument of onChange() are string formatted in yyyy-MM-DD, which is ISO8601 format, and the same as the value of the native <input type="date" />. See https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/date#value

See the demo page for more information.

import { useState } from "react";
import { useDateSelect } from "react-ymd-date-select";

interface CustomDateSelectProps {
  onChange: (value: string) => void;
  value: string;
}
function CustomDateSelect(props: CustomDateSelectProps) {
  const dateSelect = useDateSelect(props.value, props.onChange);

  return (
    <>
      <input
        type="date"
        value={dateSelect.dateValue || ""}
        onChange={dateSelect.onDateChange}
      />
      <label>
        Year
        <select value={dateSelect.yearValue} onChange={dateSelect.onYearChange}>
          {dateSelect.yearOptions.map((yearOption) => (
            <option key={yearOption.value} value={yearOption.value}>
              {yearOption.label}
            </option>
          ))}
        </select>
      </label>
      <label>
        Month
        <select
          value={dateSelect.monthValue}
          onChange={dateSelect.onMonthChange}
        >
          {dateSelect.monthOptions.map((monthOption) => (
            <option key={monthOption.value} value={monthOption.value}>
              {monthOption.label}
            </option>
          ))}
        </select>
      </label>
      <label>
        Day
        <select value={dateSelect.dayValue} onChange={dateSelect.onDayChange}>
          {dateSelect.dayOptions.map((dayOption) => (
            <option key={dayOption.value} value={dayOption.value}>
              {dayOption.label}
            </option>
          ))}
        </select>
      </label>
    </>
  );
}

How to ask about programming problems

Yuichiro Tachibana (Tsuchiya) — Tue, 15 Mar 2022 11:20:08 +0000

Updated: How do I ask a good question? - Help Center - Stack Overflow has already explained almost all things this article says.

Objective

This article explains some things you should know when asking programming problems such as “X is not working” or “What’s this error?“.

This article mainly explains superficial and formal techniques that make the questions readable and likely to get responses.
This article is NOT focusing on soft skills or moral advice like “be polite.”

The most important idea

The principle is to pay as much effort as possible to save the respondents’ time and effort to understand and solve the problem.

The problem-solving process they may do includes, for example,

reproducing the bug in their own environment by running the actual code
reading the logs
googling the error messages

Things to do and not to do

So, you should be aware of the following things to support solving the problem.

Do research and try possible solutions by yourself beforehand as much as possible, and post the progress and results.
- Information such as “I tried X but it didn’t work” or “I think Y may be the related topic, but couldn’t find a clear answer” is a good starting point for problem solving.
- Incidentally, such your effort motivates respondents. People want to support those who pay efforts.
Do provide all the information for the respondents to reproduce the problem.
- It includes, but is not limited to, source code, assets, and/or environment information.
- Think whether it’s possible to run the code and encounter the same problem from zero only with the information you post?
- If the amount is huge, consider to
- upload them to GitHub and post the link.
- create a shorter code snippet that reproduces the same problem and post it.
Do share the background or the high-level requirements.
- Why do you want to solve this problem? What do you want build after solving the problem? What kind of software/product are you developing?
- Such information is sometimes much important rather than the specific error description itself. Do not omit it just by your decision.
Do format the source code and the logs.
- For example, if Markdown can be used in the forum, put ````` (three backticks) surrounding the code or logs¹.
- Markdown can be used in many web forums. Learn Markdown syntax. You have to use at least code blocks. See https://www.markdownguide.org/extended-syntax/#fenced-code-blocks.
- Non-formatted code and logs are very hard to read.
Don’t post the source code or the logs as screenshots.
- They cannot be copied to the clipboard. It takes much effort to run the code or google the logs. It’s so annoying.
Do paste the images or the screenshots if you have visual results related to the problem.

I will be adding the list items. If you have ideas to add to the list, please let me know through Twitter or by creating GitHub Issues or Pull Requests.

More resources

Precisely, the code block with ` is an extended Markdown syntax, such as GitHub-flavored Markdown (GFM). Anyway, many web forums are supporting it.↩

How to install Python for Intel chip on M1 Mac

Yuichiro Tachibana (Tsuchiya) — Sun, 06 Feb 2022 08:37:59 +0000

TL;DR

To install Python 3.8.7 on M1 mac, for example,

arch -arch x86_64 env PATH=${PATH/\/opt\/homebrew\/bin:/} pyenv install 3.8.7

This is from M1版とIntel版のHomebrewを併用するときpyenvがうまく動かない問題を解決する - Qiita

If you encounter platform compatibility problems during package installation, upgrading pip sometimes resolves it.

$ pip install -U pip

Note that the solution above is valid on a shell running without Rosetta. You can check the architecture with arch command as below. It returns arm64 when running without Rosetta.

$ arch
arm64

Prerequisites

Install homebrew both for Arm and x86_64.
Set up pyenv

When is this necessary?

When you have to use Python versions that do not have Arm build

For example, Python <=3.8.

When you have to use packages that do not have Arm build

Some Python packages include binaries compiled for each specific platform. If you use such packages and they do not have Arm-compatible binaries, you have to use Intel-compatible Python runtime, even if the Python runtime itself has Arm-compatible version.

Example case

I tried to use streamlit-webrtc with Python 3.9 on M1 Mac.

NOTE: For app development using streamlit-webrtc, see this post.

At first, I installed Python 3.9.3 for Arm via pyenv.

$ arch # arm64
$ pyenv install 3.9.3
$ pyenv shell 3.9.3
$ python -V # Python 3.9.3

Then, inside a project directory, I set up a virtual env and installed necessary packages, streamlit and streamlit-webrtc.

$ python -m venv .venv
$ . .venv/bin/activate
$ pip install -U pip
$ pip install streamlit
$ pip install streamlit-webrtc

Next, I created an example app.py file as below (This is a Streamlit app script. See this post for the details),

from streamlit_webrtc import webrtc_streamer

webrtc_streamer(key="sample")

and run the Streamlit app with the command below.

$ streamlit run app.py

Then the following error occurred.

Traceback (most recent call last):
  File "/path/to/python39-m1test/.venv/bin/streamlit", line 5, in <module>
    from streamlit.cli import main
  File "/path/to/python39-m1test/.venv/lib/python3.9/site-packages/streamlit/ __init__.py", line 72, in <module>
    from streamlit.delta_generator import DeltaGenerator as _DeltaGenerator
  File "/path/to/python39-m1test/.venv/lib/python3.9/site-packages/streamlit/delta_generator.py", line 62, in <module>
    from streamlit.elements.image import ImageMixin
  File "/path/to/python39-m1test/.venv/lib/python3.9/site-packages/streamlit/elements/image.py", line 25, in <module>
    from PIL import Image, ImageFile
  File "/path/to/python39-m1test/.venv/lib/python3.9/site-packages/PIL/Image.py", line 89, in <module>
    from . import _imaging as core
ImportError: dlopen(/path/to/python39-m1test/.venv/lib/python3.9/site-packages/PIL/_imaging.cpython-39-darwin.so, 0x0002): symbol not found in flat namespace '_xcb_connect'

It seemed that the compiled binary in the PIL package was not working correctly in this platform.

So I removed the virtual evn and the installed Python runtime once,

$ rm -rf .venv

$ pyenv uninstall 3.9.3

and installed the Python runtime for Intel chip with the command described above.

$ arch -arch x86_64 env PATH=${PATH/\/opt\/homebrew\/bin:/} pyenv install 3.9.3

After that, I followed the same steps to set up venv and install the dependencies.

Finally, everything worked correctly.

5 mins talk about Streamlit and real-time video streaming at PyConJP 2021

Yuichiro Tachibana (Tsuchiya) — Fri, 07 Jan 2022 13:00:00 +0000

I had an opportunity to have a lightning talk at PyCon JP 2021¹ and its video has been recorded and published 😃

In this LT, I demonstrated live coding of a real-time video app using Streamlit. Its content is also a part of this post.

The LT also contains live demos of the example apps.

I constructed the talk only with live coding and live demos and did not use any slides.

The first reason is simple; I thought it would be attractive. I think the audience does not listen to the words so much, but they are focused if there are visual/moving things.

The second is that I didn’t have enough time to prepare the talk because the presenters had been selected by lottery about 3 hours before the session. So I decided just to gather existing materials to make the presentation to minimize the amount of time I would waste if I was not selected.

This was the first time for me to have an English talk in front of a public audience (even though it was online this time).

It was not perfect, but a good experience for me 😀 I look forward to the next chance.

https://2021.pycon.jp/↩

Developing web-based real-time video/audio processing apps quickly with Streamlit

Yuichiro Tachibana (Tsuchiya) — Fri, 31 Dec 2021 13:00:00 +0000

Overview

In this article, we will see how we can create browser-ready real-time video/audio processing apps with Streamlit.

Streamlit is a Python framework with which developers can quickly build web apps without frontend coding. On top of it, developers can make real-time video/audio processing apps that receive video/audio streams from users’ media devices, only with ~10 lines of code in the case of the simplest example.

Since such apps are web-based, they can be deployed to the cloud, shared with users easily, and have modern and user-friendly UIs.

This tech stack is useful for creating demos and prototyping ideas of video/audio apps such as human or object detection, style transfer, image filters, speech recognition, video chat apps, and more.

A sample web-based object detection app. Users can change the threshold interactively during execution. Online demo🎈

A sample web-based style transfer app. Users can change model type and model parameters interactively during execution. Online demo🎈

You can see more examples at the examples section

NOTE: These sample apps are hosted on the public cloud (Streamlit Cloud), and the video and audio streams are transmitted to and processed at the cloud server. While those data are only processed on memory and not saved to any storage, however, if you are concerned, please do not use them. As for the following contents in this article, we can execute all of them on our local. In addition, you can try the examples above on your local by following the instructions at the examples section.

NOTE:
I had a presentation about this topic at EuroPython 2022 titled as "Real-time browser-ready computer vision apps with Streamlit."
The talk video is available below:

https://www.youtube.com/watch?v=uVD6B8WLMTo&t=16118s

UPDATE:
This article has been updated on 2022/09/02 using the newly introduced API of streamlit-webrtc that has been available since v0.40.0.
The diff is here.

The advantages of web-based apps

We have been typically using OpenCV to build real-time demo apps of image or video processing. Some of you (especially developers or researchers in such fields) may have seen the following code or similar many times.

import cv2

cap = cv2.VideoCapture(0)

while True:
    ret, frame = cap.read()

    img = cv2.Canny(frame, 100, 200) # Some image processing

    cv2.imshow('frame', img)
    if cv2.waitKey(1) & 0xFF == ord('q'):
        break

cap.release()
cv2.destroyAllWindows()

Compared to the GUI apps like above using cv2.VideoCapture and cv2.imshow that run on local environments, web-based apps have some advantages like below.

Easy to share and run:
- If we deploy the apps on the cloud, we can share the apps with our users simply by sending the URLs.
- The users can use the apps only by accessing them through web browsers. It does not require any set-ups or external dependencies.
Usable on smartphones
- Because all the users need is web browsers, the users can use the apps on their smartphones. It’s convenient if we can show demos on such portable devices.
User-friendly UIs.
- Developers can use text inputs, sliders, or other web-based components to accept user inputs or show data. Such web-based UIs are more friendly for users than desktop GUIs in recent days.

Tutorial

We will create a simple web-based real-time video processing app with ~10 or 20 LoC. Please try this tutorial in an environment where a webcam and a microphone are available.

You can check the final result of this tutorial in this repository. The deployed online demo is here🎈

In this tutorial, we will write code in app.py. Please create an empty app.py at first.

$ touch app.py

Install necessary packages

Next, we have to install the packages necessary for this tutorial.

$ pip install -U streamlit streamlit-webrtc opencv-python-headless

streamlit: The Streamlit main package.
streamlit-webrtc: A custom component of Streamlit which deals with real-time video and audio streams.
opencv-python-headless: OpenCV. We choose the headless version here because we will construct the UI with Streamlit.

First contact with Streamlit

NOTE: Please skip this section if you have experience in Streamlit.

First of all, launch the Streamlit with the command below. Please run the command in the same directory to the app.py.

$ streamlit run app.py

After a while, the Streamlit server process will boot up. Then access http://localhost:8501 to see the page like below (or it will automatically open in the browser by default). The screenshot here is in dark-mode, and if you are using light-mode, it looks different.

At this moment, there is no content on the web page because app.py is empty. We will add lines of code in the app.py for the Streamlit app.

Open the app.py with your editor and write the code below.

import streamlit as st

st.title("My first Streamlit app")
st.write("Hello, world")

When you save the file, Streamlit will detect the file change and shows the “Rerun” and “Always rerun” buttons on the top right of the screen.

Click the “Rerun” button. Then the web page is reloaded, and the page content would be like below. The web page content is generated based on the app.py code.

If you had clicked the “Always rerun” button, the page would automatically be reloaded every time the file changed.

Note that you have to reload the page like above in the following instructions where you update the app.py.

Now we have walked through the basic development flow of Streamlit apps. You write Python code with Streamlit components like st.title() and st.write() and pass it to the streamlit run command, then Streamlit generates the corresponding frontend contents on the web page.

In the next section, we will see how to develop a real-time video processing app on top of Streamlit. Apart from that, Streamlit itself covers more use cases such as machine learning, data science, or more general purposes. For such use cases, please see the official Streamlit tutorial for example.

Introduce the real-time video/audio streaming component

Update the app.py as below.

import streamlit as st
from streamlit_webrtc import webrtc_streamer

st.title("My first Streamlit app")
st.write("Hello, world")

webrtc_streamer(key="example")

We have added a single line with webrtc_streamer(). The web app would be like the screenshot below.

At the first trial, it may take some time to compile the package so that the page keeps showing the “running” message for a while after clicking the “Rerun” button. In such a case, wait for the process to finish.

Click the “START” button to start the video and audio streaming. You may be asked for permission to access the webcam and microphone at the first trial. Grant permission in that case.

The webrtc_streamer(key="example") above is a Streamlit component which deals with video and audio real-time I/O through web browsers. The key argument is a unique ID in the script to identify the component instance. We have set it as "example" here, but you can use any string for it. The component in this example only receives video and audio from the client-side webcam and microphone and outputs the raw streams. It’s the most basic version of the component. We are going to enhance its functionality by adding other options in the following sections.

Development of a real-time video processing application

Update the app.py as follows.

import streamlit as st
from streamlit_webrtc import webrtc_streamer
import av
import cv2

st.title("My first Streamlit app")
st.write("Hello, world")


def callback(frame):
    img = frame.to_ndarray(format="bgr24")

    img = cv2.cvtColor(cv2.Canny(img, 100, 200), cv2.COLOR_GRAY2BGR)

    return av.VideoFrame.from_ndarray(img, format="bgr24")


webrtc_streamer(key="example", video_frame_callback=callback)

Try it out by clicking the “START” button like the previous section. With this new example, you can find that an image filter is applied to the video stream.

We have defined a callback that receives an input frame and returns an output frame. We also put image processing (edge detection in this example) code inside the callback. As a result, we have injected the image processing code into the real-time video app through the callback.

Detailed explanations about the code follow.

webrtc_streamer() can take a function object through the video_frame_callback argument as a callback.
The callback receives and returns input and output image frames. These are instances of the VideoFrame class from PyAV.
- The PyAV library is a Python binding of ffmpeg, which provides video and audio capabilities. It is installed as a dependency of streamlit-webrtc.
The argument of the callback is an image frame in the input video stream sourced from the webcam. It can be converted into a NumPy array with frame.to_ndarray().
The returned value from the callback is displayed on the screen. In the sample above, a new VideoFrame object to be returned is generated from a NumPy array, with av.VideoFrame.from_ndarray(img, format="bgr24")³.
Any code can be put inside the callback. In the example above, we have used an edge detection filter cv2.Canny(img, 100, 200) (and a grayscale converter cv2.cvtColor(img, cv2.COLOR_GRAY2BGR)) as an example.

Now, we have created a browser-ready real-time video processing app! We used a simple Canny edge detector in this example, and you can replace it with any image processing code in your original app.

If we use object detection or style transfer for that part, the app would be like the screenshots at the beginning of this article⁴.

Receive user inputs

Update the app.py as below.

import streamlit as st
from streamlit_webrtc import webrtc_streamer
import av
import cv2

st.title("My first Streamlit app")
st.write("Hello, world")

threshold1 = st.slider("Threshold1", min_value=0, max_value=1000, step=1, value=100)
threshold2 = st.slider("Threshold2", min_value=0, max_value=1000, step=1, value=200)


def callback(frame):
    img = frame.to_ndarray(format="bgr24")

    img = cv2.cvtColor(cv2.Canny(img, threshold1, threshold2), cv2.COLOR_GRAY2BGR)

    return av.VideoFrame.from_ndarray(img, format="bgr24")


webrtc_streamer(key="example", video_frame_callback=callback)

Then click the “START” button. You will find that there are 2 sliders in this example. You can modify the parameters of cv2.Canny() through the sliders, even during execution in real time.

With this update,

We added threshold1 and threshold2 variables.
We added two slider components with st.slider() and assigned their values to these variables.
- st.slider() is a built-in component of Streamlit. Its official API reference is https://docs.streamlit.io/library/api-reference/widgets/st.slider.
We then passed these variables to cv2.Canny() inside the callback as its parameters.

Now we have interactive inputs to control the real-time video filter!

Execution model of the callback and an important notice about it

Unlike OpenCV, streamlit-webrtc requires callbacks to process image and audio frames. This callback-based design is one major difference between OpenCV GUI and streamlit-webrtc, and there are a few things you have to be aware of about it.

Please note that the callback is executed in a forked thread different from the main thread where the Streamlit app code runs. It makes some restrictions as below.

The global keyword does not work as expected inside the callback.
Streamlit methods such as st.write() cannot be used inside the callback.
Communications between inside and outside the callback must be thread-safe.

Deploy the app to the cloud

We are going to make the web app available to everyone by deploying it to the cloud.

Configure WebRTC

To deploy the app to the cloud, we have to add rtc_configuration parameter to the webrtc_streamer().

webrtc_streamer(
    key="example",
    video_frame_callback=callback,
    rtc_configuration={  # Add this line
        "iceServers": [{"urls": ["stun:stun.l.google.com:19302"]}]
    }
)

This configuration is necessary to establish the media streaming connection when the server is on a remote host.

streamlit_webrtc uses WebRTC for its video and audio streaming. It has to access a “STUN server” in the global network for the remote peers (precisely, peers over the NATs) to establish WebRTC connections. While we don’t look at the details about STUN servers in this article, please google it with keywords such as STUN, TURN, or NAT traversal if interested.

We configured the code to use a free STUN server provided by Google in the example above. You can also use any other available STUN servers⁵.

The value of the rtc_configuration argument will be passed to the RTCPeerConnection constructor on the frontend.

HTTPS

We have to serve web apps on remote hosts via HTTPS to use webcams or microphones.

Not only the webrtc_streamer() component we used here but also any frontend apps that access the client-side webcams or microphones use MediaDevices.getUserMedia() API. This API does not work in an “insecure context.”

The document says

A secure context is, in short, a page loaded using HTTPS or the file:/// URL scheme, or a page loaded from localhost.MediaDevices.getUserMedia() - Privacy and security

As a result, we need HTTPS to serve web apps on remote hosts which access the client-side webcams or microphones.

Streamlit Cloud

I recommend Streamlit Cloud for Streamlit app hosting. You can deploy the apps from GitHub repositories with a few clicks, and it automatically serves the apps via HTTPS. And Streamlit Cloud seems to provide better runtime than Heroku free-tier, while Streamlit Cloud provides a large deployment capacity for free.

Please refer to the official document for its usage.

I actually deployed the app we have seen in this article on Streamlit Cloud: https://share.streamlit.io/whitphx/streamlit-webrtc-article-tutorial-sample/main/app.py .

Its GitHub repository is https://github.com/whitphx/streamlit-webrtc-article-tutorial-sample .

Note that requirements.txt has been added to install the necessary dependencies (streamlit-webrtc and opencv-python-headless) in the Streamlit Cloud environment: https://github.com/whitphx/streamlit-webrtc-article-tutorial-sample/blob/main/requirements.txt

Notice

As written above, the video and audio streams sourced from the client devices are transmitted to and processed at the server.

So, this library is not scalable and depends on network connectivity. You may think of it mainly for prototyping or demo purpose.

You also have to consider hosting the apps in local networks if there are concerns about transmitting media to the remote cloud server.

Examples

This section is a copy of the sample list at https://github.com/whitphx/streamlit-webrtc.

Showcase including following examples and more

⚡️Repository, 🎈Online demo

Object detection
OpenCV filter
Uni-directional video streaming
Audio processing

You can try out this sample app using the following commands on your local env.

$ pip install streamlit-webrtc opencv-python-headless matplotlib pydub
$ streamlit run https://raw.githubusercontent.com/whitphx/streamlit-webrtc-example/main/app.py

Real-time Speech-to-Text

⚡️Repository, 🎈Online demo

It converts your voice into text in real time. This app is self-contained; it does not depend on any external API.

Real-time video style transfer

⚡️Repository, 🎈Online demo

It applies a wide variety of style transfer filters to real-time video streams.

Video chat

⚡️Repository(Online demo not available)

You can create video chat apps with ~100 lines of Python code.

Tokyo 2020 Pictogram

⚡️Repository: 🎈Online demo

MediaPipe is used for pose estimation.

What about audio?

You can deal with audio streams in a similar way as video. If you define a callback function and pass it to the audio_frame_callback argument, the callback will be executed with audio frames. In the case of audio, the input argument and the returned value of the callback are instances of the AudioFrame class.

Please see the source code of a sample app changing the audio gain or the Speech-to-Text app in the examples above.

Some experienced readers have noticed that we have not set the timing information of each frame. streamlit-webrtc automatically sets such info to each frame when returned from the callback. It is also possible for the developers to set it manually, and streamlit-webrtc does nothing in that case.↩
The source code of the object detection app and the style transfer app.↩
I once received a report that it took so long to make a connection with the library. The reason was that the reporter used Google’s STUN server from the Chinese network. It was solved by changing the server. https://github.com/whitphx/streamlit-webrtc/issues/283#issuecomment-889753789↩

How to deploy Streamlit apps to Google App Engine

Yuichiro Tachibana (Tsuchiya) — Sun, 12 Dec 2021 13:51:12 +0000

Things to know

There are some things to know when you deploy Streamlit apps to App Engine.

The flexible environment is mandatory

You have to choose the flexible environment because it supports WebSockets and the standard environment does not.
Streamlit heavily relies on WebSockets for the communication between the server and the client.

This is a screenshot of https://cloud.google.com/appengine/docs/the-appengine-environments on 2021/12/12. The left is about the standard env and the right is the flexible env.

Custom runtime is not necessary

You do not have to use a custom runtime (a customized Docker image).
The flexible environment offers an official Python runtime as https://cloud.google.com/appengine/docs/flexible/python/runtime and you can use it.

You can also use a custom runtime. For example, it is a nice option when you want to use a different Python version from the one provided as the official runtime or when you already have a working Docker image.

NOTE:
As of 2021/12/12, the document says the Python version on the built-in Python3 runtime is 3.7.2, but it is actually 3.6.10 known from sys.version at least in the asia-northeast1 zone (Tokyo).
And Streamlit officially supports only Python>=3.7 while it is technically possible to be installed with Python 3.6, so maybe you should set up a custom runtime with Python>=3.7 following the section below.

The number of instances should be 1 if `st.file_uploader` or `st.download_button` is used

If your app contains st.file_uploader or st.download_button, you should set the maximum number of instances to 1. For that configuration, see https://cloud.google.com/appengine/docs/flexible/python/reference/app-yaml#services.

App Engine typically distributes the requests evenly among available instances so the file upload/download requests sometimes reach the instance different from the one where the session exists when there are multiple instances.

Errors as below appear in such cases.

When an error occurs with file upload: The file upload request reaches a server where the session does not exist and the server returns the 400 error code.

When an error occurs with file download: The file download request reaches a server where the session does not exist and the 404 response is returned.

This problem occurs with the file uploader/downloader components because they use normal stateless HTTP POST/GET requests while other components work on top of WebSocket connections consistent over sessions.

While I know this problem occurs at least with these components, I'm not sure whether there is another component which have this problem. I have not checked all.

NOTE:
Restricting the number of instances to 1 has a drawback as it may cause some downtimes.
As the document says, the flexible instances are restarted once a week, which leads to downtime when there are not multiple instances.
While this problem has already been stated in the following posts, the only solution suggested was to set the minimum number of instances as more than one, although it conflicts with the solution explained in this article. I could not find a solution that covers both problems.

NOTE:
App Engine offers the session affinity setting, but it does not help in this case because it is only for HTTP long polling like socket.io as documented though this problem is due to a different reason.

Recipes

I will show some examples deploying Streamlit apps to App Engine in different situations.

Each of them can be deployed with the command below.

$ gcloud app deploy

All sample resources are available at https://github.com/whitphx/streamlit-appengine-samples .

Basic setup

This is the simplest one.

No custom runtime
No config on the number of instances (scaling)
- This app is not using file uploader or downloader.

https://github.com/whitphx/streamlit-appengine-samples/tree/main/helloworld

File list

.
├── app.yaml
├── requirements.txt
└── streamlit-app.py

`app.yaml`

runtime: python
env: flex

runtime_config:
  python_version: 3

entrypoint: streamlit run streamlit-app.py --server.port $PORT

The flexible environment is selected.
The built-in Python3 runtime is used.
entrypoint is configured to run the Streamlit process with the specified port number via the $PORT environment variable.
- See https://cloud.google.com/appengine/docs/flexible/python/runtime#application_startup

`requirements.txt`

streamlit~=1.2.0

`streamlit-app.py`

import streamlit as st

st.title("App Engine sample app")

name = st.text_input("Your name?")

st.write(f"Hello, {name or 'world'}!")

File uploader and downloader

This is a sample with a file uploader and a downloader.

File list

.
├── app.yaml
├── requirements.txt
└── streamlit-app.py

`app.yaml`

runtime: python
env: flex

runtime_config:
  python_version: 3

entrypoint: streamlit run streamlit-app.py --server.port $PORT

automatic_scaling:
  max_num_instances: 1

# Or manual scaling as below:
# manual_scaling:
#   instances: 1

In addition to the basic set-up, automatic_scaling.max_num_instances is set to 1.
If you want to use the manual scaling, use manual_scaling.instances instead.

For these settings, see https://cloud.google.com/appengine/docs/flexible/python/reference/app-yaml#services.

`requirements.txt`

streamlit~=1.2.0

`streamlit-app.py`

import streamlit as st

st.title("App Engine sample app")

uploaded_file = st.file_uploader("Upload some file")
if uploaded_file:
    st.write(f"{uploaded_file.name} was uploaded.")

    st.download_button(f"Download {uploaded_file.name}", data=uploaded_file, file_name=uploaded_file.name)

Custom runtime

This sample uses a custom runtime with Dockerfile.

Ref: https://cloud.google.com/appengine/docs/flexible/custom-runtimes/build

.
├── Dockerfile
├── app.yaml
├── requirements.txt
└── streamlit-app.py

`app.yaml`

runtime: custom
env: flex

Set runtime: custom to use a custom runtime.
entrypoint is not needed as it is defined in Dockerfile.

`Dockerfile`

FROM gcr.io/google-appengine/python

# Ref:
# * https://github.com/GoogleCloudPlatform/python-runtime/blob/8cdc91a88cd67501ee5190c934c786a7e91e13f1/README.md#kubernetes-engine--other-docker-hosts
# * https://github.com/GoogleCloudPlatform/python-runtime/blob/8cdc91a88cd67501ee5190c934c786a7e91e13f1/scripts/testdata/hello_world_golden/Dockerfile
RUN virtualenv /env -p python3.7

ENV VIRTUAL_ENV /env
ENV PATH /env/bin:$PATH

ADD requirements.txt /app/
RUN pip install -r requirements.txt

ADD . /app
ENTRYPOINT [ "streamlit", "run", "streamlit-app.py", "--server.port", "8080" ]

Use the base image officially provided by Google for App Engine, gcr.io/google-appengine/python.
- App Engine has a health checking mechanism and the official base image is already configured for it.
- See https://cloud.google.com/appengine/docs/flexible/python/customizing-the-python-runtime
Specify the Python version at virtualenv creation.
- Follow the README.md on GoogleCloudPlatform/python-runtime
Some Dockerfiles of the test data in that repository can be references
The main process has to listen to the port 8080 in a custom runtime.
- See https://cloud.google.com/appengine/docs/flexible/custom-runtimes/build#listening_to_port_8080

`requirements.txt`

streamlit~=1.2.0

`streamlit-app.py`

import sys

import streamlit as st


st.write(sys.version)

DEV Community: Yuichiro Tachibana (Tsuchiya)

Limit concurrent execution of compute-intensive code in a Streamlit app

Are multiple submissions to PyCon (or tech conferences) OK?

Different from academia

My case

Find VSCode's undocumented when clause contexts

Command to get the VSCode's when clause contexts

What it does

Some exceptions

Disclaimer

The result

Streamlit meets WebAssembly - stlite

TL;DR

Streamlit: a great Python web app framework

stlite: client-side Streamlit powered by Pyodide

Pros and Cons

Online code editor + app sharing platform: stlite sharing

Shareable URLs

Adding files

Files in directories and Multipage apps support

Installing packages

Samples

Loading apps from GitHub or Gist

Host your Streamlit app on your web site

Bundle your Streamlit app as a desktop app

Tell us your story!

My talk at EuroPython 2022

A library for editable live samples of React components, React Runner

TL;DR

Requirements/conditions

Comparison

React Runner

React Live

Sandpack

Embedding sample code at build time

A React library for Y-M-D dropdown date picker

How to ask about programming problems

Objective

The most important idea

Things to do and not to do

More resources

How to install Python for Intel chip on M1 Mac

TL;DR

Prerequisites

When is this necessary?

When you have to use Python versions that do not have Arm build

When you have to use packages that do not have Arm build

Example case

5 mins talk about Streamlit and real-time video streaming at PyConJP 2021

Developing web-based real-time video/audio processing apps quickly with Streamlit

Overview

The advantages of web-based apps

Tutorial

Install necessary packages

First contact with Streamlit

Introduce the real-time video/audio streaming component

Development of a real-time video processing application

Receive user inputs

Execution model of the callback and an important notice about it

Deploy the app to the cloud

Configure WebRTC

HTTPS

Streamlit Cloud

Notice

Examples

Showcase including following examples and more

Real-time Speech-to-Text

Real-time video style transfer

Video chat

Tokyo 2020 Pictogram

What about audio?

How to deploy Streamlit apps to Google App Engine

Things to know

The flexible environment is mandatory

Custom runtime is not necessary

The number of instances should be 1 if st.file_uploader or st.download_button is used

Recipes

Basic setup

File list

app.yaml

The number of instances should be 1 if `st.file_uploader` or `st.download_button` is used

`app.yaml`

`requirements.txt`

`streamlit-app.py`

`app.yaml`

`requirements.txt`

`streamlit-app.py`

`app.yaml`

`Dockerfile`

`requirements.txt`

`streamlit-app.py`