Real-time browser-ready computer vision apps with Streamlit
This is a modal window.
Das Video konnte nicht geladen werden, da entweder ein Server- oder Netzwerkfehler auftrat oder das Format nicht unterstützt wird.
Formale Metadaten
| Titel |
| |
| Serientitel | ||
| Anzahl der Teile | 112 | |
| Autor | ||
| Lizenz | CC-Namensnennung - keine kommerzielle Nutzung - Weitergabe unter gleichen Bedingungen 4.0 International: Sie dürfen das Werk bzw. den Inhalt zu jedem legalen und nicht-kommerziellen Zweck nutzen, verändern und in unveränderter oder veränderter Form vervielfältigen, verbreiten und öffentlich zugänglich machen, sofern Sie den Namen des Autors/Rechteinhabers in der von ihm festgelegten Weise nennen und das Werk bzw. diesen Inhalt auch in veränderter Form nur unter den Bedingungen dieser Lizenz weitergeben. | |
| Identifikatoren | 10.5446/60846 (DOI) | |
| Herausgeber | ||
| Erscheinungsjahr | ||
| Sprache |
Inhaltliche Metadaten
| Fachgebiet | ||
| Genre | ||
| Abstract |
|
EuroPython 202281 / 112
5
10
14
17
19
23
25
29
31
32
34
44
47
51
53
54
57
61
69
70
82
83
88
93
94
97
101
105
106
00:00
MagnetbandlaufwerkComputerBrowserReelle ZahlGoogolMeterStreaming <Kommunikationstechnik>ComputervisualistikDatenfeldFokalpunktBildverarbeitungAlgorithmische LerntheorieBildverstehenEchtzeitsystemComputerFamilie <Mathematik>SchaltnetzBildgebendes VerfahrenVirtuelle MaschineWeb-DesignerSoftwareentwicklerComputeranimation
00:29
Maschinelles SehenBildverarbeitungStreaming <Kommunikationstechnik>Funktion <Mathematik>Ein-AusgabeModul <Datentyp>Graphische BenutzeroberflächeBimodulLesen <Datenverarbeitung>DifferenteBildgebendes VerfahrenPerspektiveStreaming <Kommunikationstechnik>FokalpunktSoftwareentwicklerEchtzeitsystemKartesische KoordinatenEin-AusgabeDomain <Netzwerk>Funktion <Mathematik>CodeEndliche ModelltheorieBildverstehenDemoszene <Programmierung>ProgrammbibliothekBenutzeroberflächeBimodulObjektorientierte ProgrammierspracheWeb-ApplikationÄhnlichkeitsgeometrieComputervisualistikLoopDatensichtgerätAlgorithmische LerntheorieStellenringGraphische BenutzeroberflächeBildschirmfensterApp <Programm>Demo <Programm>RahmenproblemVirtuelle MaschineInverser LimesProgrammierumgebungBenutzerbeteiligungFramework <Informatik>Physikalische TheorieGemeinsamer SpeicherSichtenkonzeptPunktUltraviolett-PhotoelektronenspektroskopieNabel <Mathematik>MultiplikationsoperatorComputeranimation
03:23
Reelle ZahlSchwellwertverfahrenLokales MinimumSchwebungBaum <Mathematik>Endliche ModelltheorieObjekt <Kategorie>VersionsverwaltungRechter WinkelBenutzerbeteiligungElement <Gruppentheorie>Inhalt <Mathematik>MeterResultanteBildschirmmaskeRahmenproblemTabelleApp <Programm>Streaming <Kommunikationstechnik>Ein-AusgabeBildverstehenSchwellwertverfahrenFunktion <Mathematik>PunktwolkeWeb-SeiteMultiplikationsoperatorMathematikEchtzeitsystemParametersystemComputervisualistikBenutzeroberflächeZusammenhängender GraphViewerKonditionszahlDebuggingWebcamAlgorithmische LerntheorieStellenringLaufzeitfehlerMetadatenKlasse <Mathematik>QuaderWeb-ApplikationDemo <Programm>Kartesische KoordinatenInteraktives FernsehenComputeranimation
05:14
Web-ApplikationBrowserCASE <Informatik>MathematikVerschlingungKartesische KoordinatenApp <Programm>ForcingVersionsverwaltungGebäude <Mathematik>Zusammenhängender GraphBenutzerfreundlichkeitURLSmartphoneGemeinsamer SpeicherEinsGraphische BenutzeroberflächeComputeranimation
06:12
HebelStreaming <Kommunikationstechnik>EchtzeitsystemRechnernetzBaum <Mathematik>Web-ApplikationKartesische KoordinatenBenutzerbeteiligungStreaming <Kommunikationstechnik>EchtzeitsystemZusammenhängender Graphp-BlockGebäude <Mathematik>BrowserCodeKonstruktor <Informatik>Framework <Informatik>AdditionCharakteristisches PolynomMaßerweiterungQuellcodeBildverstehenCodierung <Programmierung>ComputervisualistikSchaltnetzComputeranimation
07:32
Demoszene <Programmierung>Streaming <Kommunikationstechnik>Konstruktor <Informatik>Endliche ModelltheorieKartesische KoordinatenWeb-ApplikationFront-End <Software>BildverstehenComputervisualistikAlgorithmische LerntheorieStreaming <Kommunikationstechnik>SchaltnetzComputeranimation
07:57
Streaming <Kommunikationstechnik>Installation <Informatik>Modul <Datentyp>Graphische BenutzeroberflächeSpezialrechnerDigitalfilterSoftwareentwicklerKartesische KoordinatenProzess <Informatik>EchtzeitsystemStreaming <Kommunikationstechnik>ModallogikMehrschichten-PerzeptronPhysikalische TheorieGraphische BenutzeroberflächeBimodulVersionsverwaltungBildgebendes VerfahrenElektronische PublikationFunktionalComputerspielEndliche ModelltheorieDämpfungPunktTexteditorComputeranimation
08:59
VakuumStichprobeMehrwertnetzURLRechnernetzBimodulInstallation <Informatik>Streaming <Kommunikationstechnik>MakrobefehlQuellcodeNormierter RaumRechenzentrumKommutativgesetzATMAggregatzustandLokales MinimumWeg <Topologie>WMLGerichtete MengeProgrammbibliothekRahmenproblemTransformation <Mathematik>AbstraktionsebeneService providerEin-AusgabeFront-End <Software>BenutzerbeteiligungZusammenhängender GraphElement <Gruppentheorie>Einfache GenauigkeitCodeGeradeRahmenproblemZeichenketteParametersystemProzess <Informatik>Objekt <Kategorie>Web-SeiteQuellcodeMagnetbandlaufwerkStreaming <Kommunikationstechnik>Web-ApplikationBrowserProgrammbibliothekApp <Programm>FunktionalBildverstehenElektronische PublikationHypermediaComputervisualistikInhalt <Mathematik>StichprobenumfangEchtzeitsystemNabel <Mathematik>Bildgebendes VerfahrenVersionsverwaltungSoundverarbeitungImplementierungMathematikRechter WinkelSoftwareSoftwareentwicklerSchreiben <Datenverarbeitung>Kartesische KoordinatenSkriptspracheIdentifizierbarkeitPi <Zahl>URLSchlussregelEigentliche AbbildungInterface <Schaltung>MinimumPunktSystemaufrufDivergente ReiheInstantiierungKlasse <Mathematik>Gewicht <Ausgleichsrechnung>AliasingZahlenbereichUnrundheitComputeranimation
14:17
BimodulTransformation <Mathematik>RahmenproblemAbstraktionsebeneService providerGerichtete MengeWeg <Topologie>Streaming <Kommunikationstechnik>MagnetbandlaufwerkFront-End <Software>Software EngineeringPersönliche IdentifikationsnummerE-MailSpezialrechnerGruppenoperationNichtlinearer OperatorLokales MinimumSchmelze <Betrieb>VakuumAggregatzustandCOMTurm <Mathematik>Finite-Elemente-MethodeAliasingFunktionalZusammenhängender GraphParametersystemBildgebendes VerfahrenDefaultLokales MinimumVariableFunktion <Mathematik>Web-ApplikationEin-AusgabeEinfache GenauigkeitGraphfärbungBildverstehenOrdnung <Mathematik>Umsetzung <Informatik>SchwellwertverfahrenWeb-SeiteRahmenproblemFront-End <Software>BenutzerbeteiligungGamecontrollerInteraktives FernsehenSoftwareentwicklerDatenflussAdditionKartesische KoordinatenStreaming <Kommunikationstechnik>MathematikInterface <Schaltung>CodeWrapper <Programmierung>DateiformatBitComputervisualistikStichprobenumfangGeradeWidgetKlasse <Mathematik>SkalarproduktGraphische BenutzeroberflächeEchtzeitsystemProgrammbibliothekRechenschieberObjekt <Kategorie>SystemaufrufInstantiierungPunktBildschirmsymbolEgo-ShooterZahlenbereichAusnahmebehandlungFehlertoleranzSchwebungLie-GruppeInhalt <Mathematik>TermFlächeninhaltPhysikalische TheorieImplementierungComputeranimation
19:35
Befehl <Informatik>ComputervirusHill-DifferentialgleichungEndliche ModelltheorieStreaming <Kommunikationstechnik>RahmenproblemWeg <Topologie>Endliche ModelltheorieKartesische KoordinatenCodeRechenschieberComputervisualistikBildverstehenVirtuelle MaschineComputeranimation
20:00
Endliche ModelltheorieEndliche ModelltheorieAlgorithmische LerntheorieNeuronales NetzHypermediaObjekt <Kategorie>ComputervisualistikWärmeübergangWeb-ApplikationSchätzfunktionBildverstehenSoftwareComputeranimation
20:23
Streaming <Kommunikationstechnik>FreewarePunktwolkeProgrammierumgebungKartesische KoordinatenPunktwolkeStreaming <Kommunikationstechnik>Cloud ComputingOffice-PaketProzess <Informatik>MultiplikationDienst <Informatik>LaufzeitfehlerComputeranimation
20:54
Web-SeiteStichprobeDokumentenserverElektronische PublikationPunktwolkeTopologieRPCProzess <Informatik>BootenMailing-ListeDefaultProgrammierumgebungModallogikStreaming <Kommunikationstechnik>Beobachtungsstudie
21:37
URLStreaming <Kommunikationstechnik>HypermediaStreaming <Kommunikationstechnik>PunktwolkeBrowserZahlenbereichProgrammierumgebungRechter WinkelKartesische KoordinatenURLGüte der AnpassungAutorisierungDokumentenserverElektronisches ForumHypermediaMinimumZusammenhängender GraphClique <Graphentheorie>Arithmetisches MittelProzess <Informatik>EchtzeitsystemMultiplikationsoperatorMessage-PassingWhiteboardGarbentheorieBenutzerbeteiligungRPCApp <Programm>EindeutigkeitDemo <Programm>CodeComputeranimation
24:23
Güte der AnpassungVirtuelle MaschinePunktInstantiierungEndliche ModelltheorieCoxeter-GruppeZentrische StreckungClientComputerVorlesung/Konferenz
24:55
KanalkapazitätDemo <Programm>PrototypingKartesische KoordinatenInstantiierungProdukt <Mathematik>ServerPunktÜberlagerung <Mathematik>Einfache GenauigkeitComputeranimation
25:22
GammafunktionRahmenproblemStreaming <Kommunikationstechnik>Weg <Topologie>BEEPStichprobeComputervirusElektronische PublikationStreaming <Kommunikationstechnik>Diskrete-Elemente-MethodeComputerspielDemoszene <Programmierung>VerschlingungQuellcodeDokumentenserverObjekt <Kategorie>CodeDemo <Programm>Web SiteWärmeübergangÜberlagerung <Mathematik>Monster-GruppePi <Zahl>MultiplikationsoperatorData DictionaryCookie <Internet>AggregatzustandVorlesung/KonferenzComputeranimation
27:01
SprachsyntheseDatenmodellRahmenproblemVakuumDemoszene <Programmierung>Streaming <Kommunikationstechnik>ROM <Informatik>WärmeübertragungNormierter RaumKonfiguration <Informatik>ModallogikDemo <Programm>Streaming <Kommunikationstechnik>Endliche ModelltheorieSprachsyntheseHalbleiterspeicherVektorpotenzialMultiplikationsoperatorProzess <Informatik>App <Programm>Kartesische KoordinatenWärmeübergangDienst <Informatik>Projektive EbeneEchtzeitsystemWeb SiteBestimmtheitsmaßZellularer AutomatGoogolComputeranimation
Transkript: Englisch(automatisch erzeugt)
00:05
I'm Yushuo Sachebana. I'm a Python developer who is involving some web development and sometimes in machine learning, computer application, and sometimes the combination of all of them. So I will stop watch timer.
00:22
And thank you for being at this room. Welcome to my talk, Real-Time Browser-Ready Computer Vision Apps with Streamlit. So as we know, nowadays Python is very, very widely used in many fields, including computer vision, image processing, and machine learning, of course. However, in this talk, our main focus
00:41
is not the model development or some theoretical things around it, but we are going to focus on the video input and video output on top of such models. This layer is important, as it is what we have to consider when we want to create some applications with computer vision or machine learning models, or for example, when we want to create some demos or user
01:00
interfaces on top of such models. By the way, yesterday, there was a great talk about a similar topic provided by a developer from Hugging Face, the preceded recorded video. And it became available for some reasons why creating demos on ML models is important. So by the way, in this talk, I'm going to talk about similar topic from different perspective
01:23
and in different situation, especially for video data. By the way, I think one of the most famous and popular and widely used libraries for that purpose, to create some video data demos, is OpenCV, GUI, and VideoIO modules.
01:41
I think especially the developers and researchers in the computer vision domain have seen the code snippets like this example many, many times, where, for example, cv2.vue-capture is used to get input real-time video stream from some camera devices, and cv2.im show to display output image frames
02:00
continuously in the while loop as a output real-time video stream on the local desktop GUI window like this example. So now a show of hands, who has used OpenCV for this kind of purpose? So to create some demos or user interfaces, oh, great. Thank you very much. So some of you already know something around it.
02:20
But please do not get afraid if you do not have experiences around it. This talk is, of course, also for you. Oh, oops. Anyway, we know that we can create such desktop GUI-based applications by using OpenCV or similar libraries. But this kind of approach has some limitations.
02:42
For example, we cannot easily or simply share such applications with our users because such applications, you know, desktop GUI-based applications, can run only on your local environment where you already have installed necessary packages or you already have set up necessary environments. So in this talk, I would like to introduce a brand new way
03:03
to create a shareable and easy-to-use web-based user interfaces or web applications on top of computer vision or machine learning models by using a Python web framework Streamlit. I think this new approach can replace such conventional way of creating GUIs using OpenCV because it has some advantages or benefits.
03:21
So at this point, I am going to show the demo app that shows what's possible with this new approach. Oh, now I can use this cloud-based version of this demo app thanks to the great Wi-Fi condition. And thank you for the tech team from your Python. Thanks. And anyway, as you see, this is a web app.
03:42
You know, I'm using this app. It's on the web front page. Oh, it stopped. Right. And this app is now consuming the input real-time video stream from my local web camera like this. And on the back-end server, some ML machine learning or computer vision model is running, which is, in this example, object detection.
04:00
That detects me as a person like this and this object as bottles, you know, this object that I love. I bought a souvenir from Dublin. I love this town. Anyway, all right. The object detection result is rendered
04:21
as bounding boxes on the output video frames. And this output, real-time output video stream is now being rendered on the web front end in real time as a live video stream. And the object detection result metadata is also being displayed in the table form, including
04:42
class name or probability. And this app also has interactive web UI components like Slider here through which users can change model parameter like object detection threshold interactively, even during model execution at runtime. So you see that the object detection result changes when I control the threshold by using this slider.
05:03
I think this feature is so convenient for users because they can control some application values or model parameters on web user interface with live video stream. So then, as I have explained in this example,
05:20
web apps have some advantage of the benefits compared to conventional GUI applications like OpenCV-based ones. For example, web apps are easier to share user updates, which means that web apps can be easily shared with your users just by sending the links or URLs. And the users can also try out these applications just by opening the links or URLs with their web browsers.
05:43
And whenever you make any changes or updates on the applications, users can access and use the latest versions of that application any time. And web apps can be also used on smartphones because, of course, smartphones have web browsers. And as we have seen in the previous example,
06:02
web apps can have some interactive and modern and cool-looking and user-friendly UI components that OpenCV-based applications do not have. So until now, I have been explaining why this new approach to create web-based applications is preferable.
06:20
And from now on, I would like to explain and demonstrate how we can create such applications and how easy it is. To do so, first of all, I'm going to introduce Streamlit. Who knows Streamlit? Or I just heard a lot of it. Thank you. Many of you already know about it.
06:40
That's great. Streamlit is a Python web framework. And its unique characteristic is that we can create web applications just by writing only Python code. It does not require any front-end coding. And it provides many various predefined, ready-to-use UI components.
07:02
And there are also many third-party components that we can make use of as building blocks to construct rich web applications with a small amount of code. And in addition to Streamlit, we are also going to use Streamlit WebRTC package. That is an extension of Streamlit, or it can be also called as custom component of Streamlit.
07:23
It enhances Streamlit to be able to deal with real-time media streams through web browsers on Streamlit applications. So with the combination of these packages, we can create various kind of web-based computer vision or machine learning applications with a small amount of code,
07:42
like these examples. Since Streamlit and Streamlit WebRTC are only for UI construction and media stream IO, we can use arbitrary kind of MLCV models at the application backend. So from now on, I'd like to provide a step-by-step tutorial
08:01
where we are going to walk through the development and deployment process of a Streamlit application with real-time video streaming capability. The first thing we have to do is to install necessary packages that, of course, include Streamlit and Streamlit WebRTC package. And in this tutorial, we're also
08:21
going to use OpenCV Python package, but it's a headless version in this tutorial because here in this tutorial, we are going to use OpenCV only for image filter functions, and we do not need the GUI module from it because we are going to use Streamlit
08:40
for that purpose of creating GUIs. So I selected the headless version of it. Now, after installing these necessary packages, let's start coding from scratch with an empty file named Streamlit underscore app.py. So from this point, I'm going to demonstrate the coding here.
09:02
In this editor, there is already an empty file is opened with a named Streamlit WebRTC. So I'm going to write a call, for example, importing Streamlit package at st-alias. And for example, I'm going to call st.title function with some argument, for example, my first app.
09:21
By the way, in the Streamlit world, we call these functions as components. So let's say here st.title component is used. And similarly, I'm going to also use st.markdown component where the string argument, for example, that contains some markdown content like hello, your Python 2022.
09:44
And then I am going to save it. Then I move to the shell and run Streamlit, run command with an argument pointing to the input file named Streamlit underscore app.py. With this command, the Streamlit server-side process spins up.
10:01
And the web app is now opened on the web browser tab like this. And you see that the content of this web page is based on the source file that I have written. And each element is properly decorated according to the component that I have used, like this is the title component,
10:23
and the next is the markdown component. And after that, let's make some changes on the source file, like inserting emojis like this, for example. And I save it. After saving it, the Streamlit server-side process detects the file change and shows these two buttons. So I'm going to click the right one all the way
10:40
through one button. Now, after that, you see that the front-end page is updated to be synchronized to a source file like this. After that, whenever I make some changes on the source file and save it, the front-end page is automatically hot reloaded to be synchronized to the source file.
11:01
So you see that whenever I make some changes on the source file, the front-end content is automatically updated. This is a convenient and quick development process. This is a basic development process of Streamlit applications, where all we have to do,
11:20
all developers have to do is just write Python code. And the Streamlit command will do all the rest, including serving and hot reloading the web front-end page like this. So now we have learned how developers can create Streamlit applications. So let's move to development of computer vision application. Now I've cleaned up the previous example and start writing a new code, where
11:43
I'm going to use Streamlit WebRTC package and also going to import WebRTC streamer component from that package and simply use it here. And as a rule, Streamlit WebRTC package here requires a key argument as a unique identifier across this script. So please pass some arbitrary string value to this argument.
12:03
Here I pass the string literal sample simply like this. Then I saved it here. And as I said, this web front-end page is now automatically updated and new element and a new component has appeared. And let's see what happens when I click Start button. You see that?
12:22
All right. We have successfully embedded a new component that deal with real-time video streams on our web page just by adding a single line of code. This is quick and easy. But as you see, this is a very basic version of video streaming components that does not have any image filter, I mean, any video effect.
12:44
So this is kind of a boring or trivial example. So what we want to do next is to add some image filter into this video stream, right? So to do so, I'm going to define a callback function that
13:00
accept one argument, one input argument frame. And at this point, I will leave the implementation implementation of this callback empty and make it simply return the input frame without any processing like this. And I'm going to also pass this callback function object to the video frame callback keyword
13:21
argument of the video, sorry, WebRT streamer component like this and save it. Then I will also import the heavy package. And please note here that the input argument and the return value of this callback is an instance of heavy dot video frame class.
13:42
That is not a NumPy array. This is an important point of around this callback. By the way, what is the heavy package at the first place? This heavy package is now here as importable because it's already being installed at the dependency of stream with WebRTC. But what's heavy?
14:01
This heavy package is from this high heavy library. That is a Pythonic binding for FFmpeg. And FFmpeg is software to manipulate some image, you know, not image, not just image, like a media file or media streams like video and audio. And stream read WebRT package is using FFmpeg as in its internal.
14:25
So that's why the reason why its wrapper library PyAV appears on the interface of this callback function, callback object here. So what we have to do next is to convert this variable frame into a NumPy array by using two NDRI method with the keyword
14:43
argument format specified as BGR24. That represents a three channel color image both in the color order BGR and eight bits for each color channel, so in total 24 bits. So I'm gonna assign the return value from this method to a new variable IMG.
15:01
And here, let me show this page, and here I'm gonna create a new instance of heavy dot video frame class to be returned from this callback function by using from NDRI method that accepts input NumPy array and also a format keyword argument
15:21
specified as BGR24 like this. So now we have obtained a variable IMG that is a NumPy array. So now we are ready to implement some image filter inside this callback, so I'm gonna do that. In this tutorial, I'm going to use CV2, sorry,
15:41
a CV2 dot canny function that accepts one input argument NumPy array and it also accepts two parameters, sorry, although I do not explain the details about this. And here, at this point, I will pass just two fixed, ad hoc fixed values to this parameter like this.
16:02
Although I do not explain the details about CV2 dot canny or the canny filter, but in short, it is kind of a edge extraction filter and that is sometimes used in beginner classes of computer vision courses, so I selected it as a sample image filter here.
16:20
After that, I also have to use CV2 dot convert color with color code, color gray to BGL because the return value from CV2 to canny here is a single channel grayscale image blob that has to be converted into three channel color image blob by using CV2 to convert color
16:42
in order to be fed into from NDRA here. Anyway, now I have implemented a simple but fully functional image filter callback here, so let's see what happens with this new code. So now, I have successfully injected
17:00
the CV2 dot canny image filter into this video stream, real-time video stream running on our webpage, right? This is quick and easy implementation, don't you think so? But it will be better if users can control some underlying parameters like these parameters
17:22
that are now fixed value from the web front-end controllers. So to do so, I'm going to use some stream-read components again, so I'm gonna import stream-read package as ST alias again here. I'm going to use ST dot slider component.
17:41
This slider is the first argument threshold one and the minimum value is zero and the maximum value is, for example, 1,000 and the default value is, for example, 100 and I'm gonna assign the return value from this slider to the variable TH1 and I'm gonna do the same for threshold two like this
18:01
and I will pass these two variables into this canny filter parameters. I mean, I will going to simply replace the fixed values with these variables, then I'm gonna save it. So after I saved it, as I said, the front-end page is now automatically hot reloaded
18:23
and new sliders, two sliders, have appeared on our webpage, right? Then now users can change the parameters of the canny filter by using these sliders interactively. Now you see that the canny filter output changes and I control the parameters by using this slider.
18:43
This is very interactive steps, interactive flow of development and also usage. And in addition to that, what's interesting or surprising and exciting here is that we could implement a fully functional web-based computer vision application
19:00
that has real-time video streaming capability and some interactive input UI widgets only with approximately 10 or 20 lines of code. So this is easy and I think it will be a great deal to switch from the conventional way of creating GUIs using OpenCV to this new approach that is based on Streamlit
19:22
because this Streamlit-based approach does not require additional effort or additional steps, but it provides some more advantage of the benefits. And, okay, I'm going to back to the slide here. I'll use this one. And please note again here that you can use any models
19:44
at the application background, which means that you can put any code inside this callback. I mean, you can replace this simple canny filter with any model that you like, no matter how simple, no matter complicated it is. So you have freedom or you have flexibility
20:03
to create any kind of web-based computer vision or machine learning models. Of course, including these examples in the slide, for example, pose estimation with media pipe or some style transfer or object detection with some deep neural networks and anything else, whatever you like.
20:23
Right now, we have developed the application in our local environment. So what's next is to deploy that application to the cloud environment. Although there are various cloud services where Python runtime is available, especially for Streamlit applications, Streamlit cloud is the way to go.
20:43
As its name implies, Streamlit cloud is a managed cloud service to deploy Streamlit applications that is provided by the official Streamlit team. And the deployment process to Streamlit cloud is very quick and easy. So let's see that.
21:01
Here, oh, and at first, please note that I added requirements of text that represents the necessary packages to be installed at the booting process on the cloud environment. Although this list does not contain the Streamlit package that will be automatically installed in the Streamlit cloud environment by default.
21:21
Anyway, after adding these necessary packages, I am going to add these files to the Gator work tree and create a commit with these files and push that commit to the remote GitHub repository. Then I'm going to navigate to the Streamlit cloud dashboard
21:41
and click the new app button here and select the GitHub repository name here and click the deploy button here. Then after a couple of seconds, a couple of minutes of the booting process, the Streamlit cloud will start serving the applications that we have developed and pushed from the cloud environment
22:05
with a globally unique URL so that users can now access and use this application from anywhere only with their web browsers. Now you see that our application is now being served from the cloud environment, cloud server,
22:22
and now is accessible and usable only with web browsers. Right, so now I have shown the quick deployment process demonstration to the Streamlit cloud. Please note here that actually there are some additional
22:40
things that you have to take care of when you actually deploy Streamlit applications that use Streamlit web RTC package to some cloud environment, including Streamlit cloud. I'm sorry that I could not explain all about it in this talk because I do not have enough time so please refer, you know, please read the official readme
23:02
of the Streamlit web RTC package and its corresponding section that explains the remote host deployment. It does not require so much additional steps that there isn't some necessary things. Right, now we have reached to the last two slides. So my message, you know, the take away message
23:22
from this talk session is please enjoy creating real-time major streaming component, ah, no, no, so real-time major streaming applications that can be used on web browsers, which means that applications that can be easily shared with your friends or users worldwide,
23:40
and it does not require so much effort, so much amount of code as we have seen in this previous demo. And, all right, so you can find my username, Witwix on GitHub or some SNS and the official Streamlit online forum, so please follow me or contact me for any comments,
24:01
questions, discussions, feature requests or something else, whatever. I'm so welcome, I'm open to all of such things. And importantly, please put a star to the repository of Streamlit web RTC package as the author of it. Me, will be so glad if the number of star grows, right?
24:21
Thank you very much for listening to my talk. Any questions? Can you say questions? First of all, very good presentation, thank you.
24:41
I'm just wondering how well the whole thing scales with having multiple clients connect to the same URL? That's a great point, you know. As you imagine, the machine learning computation model, I mean the computationally expensive model is running in a single instance of the server, so this is not scalable.
25:01
So I think it's better for you to think about this new approach to create only kind of a prototype demo or some even production lady application that is only for focusing on small amount of users at single, you know, at some point. So it depends on the server capacity.
25:22
Okay, makes sense, thanks. Thank you. Hello, hello. Thank you very much for the talk. I actually had the same question but I also have a second one. Can you supply a video file to this as a demo as well, not only live video? Oh, thank you very much. That's what I forgot to tell.
25:43
Thank you very much. You can find all of the code from my GitHub repository, like, you know, the source code of the demo that I have demonstrated in this talk is found something like, you can,
26:01
URL, Python, something, something, something. All right, your Python Streamlit WebRTC repository contains the code that I have written in this talk. And also, I have shown some demos or examples like object detection or site transfer or something else. That is also linked from the official
26:24
Streamlit WebRTC package repository. And you can find all the links from all the examples I have demonstrated in this talk. So please check out. Thank you.
26:40
But there's still time, so let's see some more demos. I'm not sure it properly work. Oh, I will, sorry, I will. Access it from private hub because it's some cookie issues.
27:03
This is the demo that I haven't shown in this talk. This is the real-time speech to text app. You know, audio data is not the main topic in this, main topic of this, my talk. But please note that Streamlit WebRTC is able to deal
27:21
with not only video stream, but also audio stream. And probably it work. Now loading, and hello, hello, hello Europe. Sorry, I think this is due to my non-native English.
27:42
The audio model is trained in the English native speakers. So, I'm sorry. But the interesting thing about this demo is that this server-side process does not depend on any external API like Google Speech or something like that.
28:00
This server-side process is hosting the speech to text model on its own memory. And the model itself is provided by Mozilla, their great project, Big Speech. But you can create such self-contained applications by using these kind of technologies, right?
28:23
Hey, do not see that, the translated text. And actually I'm not a professional audio field, so probably I will go to ask someone who are familiar in audio technologies,
28:41
like a Spotify guy who presented the talk yesterday. Anyway, please do not see that. And let's see other examples. Like this is a style transfer that I have shown in the other screenshot.
29:04
I hope it work, it will be working well. And anyway, there is one minute left. I think that is a good time to show one demo.
29:21
Sorry, it doesn't work. I haven't checked it for this session. Okay, but I'm sorry for failing this last demo in this talk session, but I hope you feel some potential of this.