0:00
um so this is getting started with WinUI and the Windows app SDK and also with uh .NET because this is all using uh .NET
0:07
if you're doing C# projects So a little bit about me I've been in the industry for uh almost 30
0:14
years now I have a blog The Morning Dew It's at alvinshcraft.com A lot of you
0:19
may be familiar with that I post uh links to uhnet resources for developers every day I've also written uh three
0:27
books for pack publishing uh two of them are two editions of learnui3 and then I
0:32
have another one that's on parallel programming and concurrency withnet and like I said I've been at
0:39
Microsoft since 2022 just over three years now content developer working on the Windows developer docs on Microsoft
0:46
learn and I'm an organizer too of a de developer conference the tech bash
0:51
conference happens every fall in the Poconos's in the Pocono mountains in
0:56
Pennsylvania so That's TechBash We're in November this year If you're in the area you should join us We're going to have a
1:04
lot of great speakers We'll be announcing some keynotes very soon And the agenda So I've got a couple
1:11
of things struck through here I normally do about a 60 to 75 minute version of
1:16
this talk So I've cut out a few things for this uh version of the talk but all of the slides for everything and all of
1:24
the code samples are all up in my GitHub repo It's just Alvin Ashcraftspeaking So you can go up to
1:30
GitHub and uh get the resources for all of these
1:36
demos So let's start with a quick overview of WinUI and then we'll get in some code quickly here Uh so WinUI is
1:44
part of the Windows app SDK Um the first release was in March of 2021 That was
1:50
1.0 Uh 1 UI3 they call it WinUI3 but it's not really a version number uh it's
1:55
kind of the successor to WinUI 2 which was an add-on to UWP to add some
2:01
additional controls and libraries And when UI3 is completely its own thing with the Windows app SDK it's very
2:08
similar to UWP If you've done a UWP apps on Windows 10 uh what they did was they
2:13
took those controls and libraries and extracted them from the Windows SDK so
2:19
that they could version these components independent of Windows they used to be stuck with waiting for a new Windows
2:25
release before you could get new UWP features and now it's all uh separated out Uh the main difference between UWP
2:34
and Win UI as far as looking at the code is uh the name spaces are changed So everything starts with Microsoft dot
2:40
instead of Windows dot in the name spaces Um it's built on the latest .NET
2:46
runtime Right now you can build WinUI apps with .NET 9 or .NET 8 Both are still supported
2:52
um you create apps with ZAML and either C or C++ and if you use C you're also
2:59
using uh .NET and you have access to the full uh at libraries runtimes everything
3:05
And the latest release of Windows app SDK is 1.7 that just came out about 3
3:10
weeks ago And it's open source on GitHub not full open source You can't uh contribute
3:17
code yourself but they do publish readonly um versions of the code so that it helps with debugging You can get
3:23
access to all the source And let's see we're going to dive
3:29
into the first demo here Uh so there's going to be uh two parts to this demo So I'm going to create a new WinUI project
3:35
from scratch and then show you how you can add a couple of things to make it look a little bit nicer And then I will
3:41
open up another project that's got uh an MVVM implementation model view view model And it's also got some controls
3:49
and some styles added So you can see uh the difference between the the basic out of the box and what you can do pretty
3:55
easily just adding a few uh styles and controls to your app But let's start with a new project dialogue We'll create
4:02
a new project in Visual
4:09
Studio And we're going to pick a blank app packaged Win UI3 And this is
4:18
C And we'll just leave the name app 3 for now And hit create
4:33
So this loads up a couple of files here in your your project
4:40
See if we zoom in a little bit there you can see this better Um so we've got an
4:46
app manifest We've got an app.zaml which is the part of the program that launches
4:52
your app So it goes into the app class first and then launches the main window from there And the main window is
4:59
exactly at the main window Let's take a look in the app.zaml just for a second to see how that's
5:07
created So in the on launch method it just creates a new instance of the main
5:12
window and activates it And then in the main
5:18
window new project just gives you a blank window with single stack panel
5:24
Stack panel just uh does exactly that Anything you put inside there it'll just stack the controls either horizontally
5:30
or vertically depending how you set that up So this one is horizontal So it would
5:36
stack things um left right And then in the code
5:42
behind each ZAML file has a C# code behind file where you can put code Um so
5:49
here there's just a buttonclick event handler So when you click the button that's in this UI file it'll call that
5:56
event handler Let's just run this I'm going to change this to ARM 64 I have an ARM laptop
6:02
here Run it with no changes and see how it looks
6:11
It's building and deploying And it's pretty basic It's a
6:18
big empty window except for the one click me button there And you can see it's got a title bar with a no icon yet
6:26
I click that it just changes it to clicked And now I want to show you a couple of
6:33
quick things you can do to make your window look a little bit nicer I have this other app
6:40
here And this is exactly the same code except I've added a few extra things So
6:45
the first thing I've added is this Micah backdrop And what that does is it gives it a little bit more of that Windows 11
6:53
look and feel I'm going to take that and just paste it in our new project and run
6:59
this again So you can see the difference that one little uh attribute makes
7:05
there You can see it kind of has that pinkish hue now So it's almost like a
7:10
it's picking up the color of your wallpaper in the background So I've got a a purplish hazy background and it's
7:17
pulling that into the window here Let's stop this and go grab the
7:22
other piece that I have here So the rest of this so instead of just the stack
7:28
panel I have a grid wrapping it and I have two rows in the grid The first one has a custom title bar And this is a new
7:36
thing in Windows App SDK 1.7 It's a title bar that looks a little bit more like what you see in other Windows apps
7:42
Uh you can add more things into the the title bar like you'll see in this WinUI3
7:50
gallery app You know it looks like a little bit bigger It's got a nice icon here It's
7:56
got a back button in here And you'll see some apps like the store they each they
8:01
even have like a search box up in your title bar You can do all that with this new title bar control Let's go back to
8:08
this app Copy this and put it in
8:15
here So we've added this new title bar I'll call this sample app that we'll
8:22
put that in the title bar I'm hiding the back button and I'm not making it a tab stop because we
8:29
don't have any controls up there that we want the user to be able to tab into And I have to get one other piece
8:36
to make that work in the code behind There's a set title bar method
8:43
that we're going to copy and call that from the constructor
8:50
So let's paste that in
8:56
here and call it And so here you'll see I'm setting
9:02
the icon I'm telling it to make it the taller
9:08
height and setting the display name here as well Let's run this again
9:18
And if we did everything right we should have this nice fall title bar But we don't have the icon yet because I forgot
9:25
that step Let's get our icon in here Add it to the assets
9:30
folder We're going to add an existing item
9:35
gonna browse out to this other place where I have an
9:42
icon and it's a winui icon Now we've got
9:49
that I got to do one more thing We'll stop that
9:56
We have to go and set the properties on this so that we set it as
10:03
content Instead of build action none we're going to say build action content so that we can reference it in the
10:14
code Now we should have an icon when this launches There it is We've got the
10:19
larger title bar Looks a little bit nicer And we got the icon set there
10:27
and it still works just like expected When you hit the button it says
10:33
clicked So that's a basic app I'm going to pull up something with a little bit more to it
10:41
Now these are all the samples that are out of my GitHub repo We're going to start with this controls and MVBM
10:55
And in here you can see I've got a lot more going on So we have still have a main window and an app.zaml but we also
11:02
have some other views and view models So in the main window
11:09
now you'll see there's nothing in there It's just a window with the micica backdrop
11:16
So in here instead of having the uh everything in the main window we're loading each of these other views as a
11:23
page inside the window All of my markup for what we're
11:31
going to be launching is here in the main page And this main page will get loaded I believe in the app.zaml Let's
11:44
So on launched we're creating main window and we're adding a frame to the
11:49
window and then we're adding we're telling it to navigate to the main page within that
11:56
frame So let's before we dive into any more code let's just launch this and show you what we're dealing
12:07
with So this is a media collection app So you can enter in your CDs you know
12:13
books Blu-rays DVDs You can enter all that media here and create your
12:19
collection It's got a drop-own box to filter by type So if you only want to see books it'll show that or I can go
12:25
back and show all I can select items and I can edit it
12:31
or I can delete it If I don't have anything selected I can add items Let's hit edit
12:38
And one of the other cool controls here is this teaching tip So what you can do with a teaching tip uh by default it'll
12:44
show every time but you can add a user preference um to save whether the user has already
12:50
seen this tip So once they've seen it one time you don't show it to them again It's just telling them how this drop
12:56
down button works So they can save and create new or save and return once they've made a change here So let's say
13:02
this is no longer in my collection I've loaned it to somebody So now I can hit this So I can
13:07
either save and create a new item or I can save and return to the
13:18
new And we'll add an alien movie to our list A
13:24
video Let's say it's a Blu-ray And it's in our collection Now I can save and
13:30
return And we've got all four items here
13:36
But let's take a look at some of the code for this and see how this works So in the
13:43
main page we've got separate grid for the
13:49
stuff at the top So in the top we've got the header We've got a stack panel that
13:54
stacks horizontally for the uh the label for the drop-own box that filters by
14:01
type and then the combo box itself And this is using uh data binding So we can
14:06
bind to things in our view model to show them in the UI So I'm binding the list
14:12
of items to this list of mediums in the view model And then I set the selected
14:17
item based on that property And then for the bottom part I'm using a list view control And inside
14:25
the list view I have both a template for the header and a template for each item in the list
14:34
And you can see for the styling uh we're using theme resources This will make
14:39
sure it'll pick up the light and dark mode or any other color changes that the user makes in their system If you wanted
14:45
to instead brand it your own company colors or something you could hardcode or create your own theme based on your
14:52
your company uh logos and things
14:58
And at the bottom we have another stack panel that's got the buttons And these are both
15:06
regular standard buttons And these are binding a command to the view model So
15:13
the um the command is what's going to be executed when the user clicks on there So it'll go into this addedit
15:21
functionality or the delete Let's take a look at the uh the view model that corresponds to
15:28
this So if you've done any uh ZAML development and used model view model you may may have uh done your own
15:35
implementation of uh an observable class or a bindable class Uh I'm using the
15:43
MVVM toolkit which is part of the net community toolkit It's uh open source
15:48
available up on GitHub You can get references into your project through um
15:54
Nougat So if I look at our Nougat packages
15:59
here let's see I've got the MVVM toolkit and these are all other standard
16:07
Win UI packages that you'll have here So by using the MVVM toolkit it
16:14
reduces a lot of code that you normally have in your your view model All I need to do is make my view model a partial
16:22
class and inherit from observable object By doing that it's going to create it's
16:29
use the source generators to create another partial class with the imple implementation of all the public members
16:35
So for a property I only need to create the private member the selected medium in this case and when it builds and runs
16:44
it's going to create a public property called selected medium with a capital
16:49
S So anything that's decorated with observable property will create a
16:55
corresponding public property for you for data binding And I can also if I go down to
17:03
uh my commands here So I've got here's the addedit You see this is private and
17:08
it's just called addedit but I've got this relay command decorating it So that creates the addedit command that's
17:15
public that'll be bound in the uh main page here So this
17:22
addedit command is created by the source
17:27
generator and then within that command it calls this private method So when I hit the button all of this
17:34
executes and if I hit delete this is the code that gets executed and I've got some code to
17:41
validate whether the delete button should be enabled Anytime that this
17:48
um can delete item is called it's going to check if there are any selected items So I can only hit delete if there's an
17:55
item selected in my list Let's take a quick look at the item
18:03
details view and view model We'll look at the view first Uh we'll go down to that teaching tip So here's the teaching
18:10
tip and the split button So the split button has the drop down with the two buttons inside of it And to show those
18:17
it uses a flyyou with a stack panel and the two buttons inside
18:23
there And the teaching tip here
18:29
We just data bind that to the save button and that will
18:41
that And in the back here we have some uh little bit of navigation logic so
18:47
that uh when we open up here we're setting the uh the teaching tip This is where it's if you had some local
18:56
settings you can check whether the view the user has already viewed that teaching tip and you can set whether
19:01
it's visible or not I just have it hardcoded to false so that we'll see it every time that I do this
19:08
demo And the other bit that's important in the code behind here is whenever we navigate to this page um we're just
19:15
populating the initial data if there's already a an item selected So if there's an item ID then we're
19:22
going to be editing If there's no item ID then we know we're adding a new item and we should have an empty
19:30
form So that's the basics of some controls Let's jump back to the slides
19:36
and get to another demo here So the next one will be the uh
19:42
using the Windows community toolkit So there's the there are different uh community toolkits available from
19:47
Microsoft that are open source There's the .NET community toolkit I mentioned with the MVVM stuff in it The Windows
19:53
community toolkit Um there's some Windows specific stuff Uh you can use the things in there for UWP uh when UUI3
20:01
and also Uno platform So there are animations triggers uh behaviors controls and other
20:08
helper classes in the toolkit It's open source on GitHub here Um there's
20:13
documentation on Microsoft Learn about the controls and things in the toolkit And there's a gallery app on the
20:19
Microsoft Store We'll take a look at that quick I've got that open here So
20:25
within the gallery you can explore everything in the toolkit and see things working in the UI to see how they look
20:32
If I go to go to items view So it shows you what the items view
20:39
looks like It's running live here in the app
20:45
So if I expand the source code it shows me the code that was used to create that So you can copy and paste from here to
20:51
get started quickly Shows you the ZAML code for that and also the C for any
20:58
stuff in the code behind And with some of the samples in the toolkit app you can change some
21:05
properties to see how it will look in uh different layouts So it's got three different layouts that you can pick from
21:11
here You can change the number of amount of space between them and
21:17
space these out a little
21:25
farther And we can change the selection mode for this item So right now it's multiple I can select multiple items You
21:34
can change that to single So checkboxes are gone You just select one at a time
21:44
So let's take a look at um a sample app that's got this in
21:53
it So I've got a community toolkit solution here And you'll notice for some
21:58
of these solutions I have both an a solution and a solution x slmx Some
22:04
people are calling these slinks files Uh it's a new solution format that's currently in preview Uh it works with
22:11
the Visual Studio 2022 uh preview version And these are a lot nicer to
22:16
look at if you ever open the solution file and you've seen all the goods in there The solution X
22:22
files have no goods and they're they're much simpler to look at but we won't demo that here but you should go check
22:28
it out So here I have a hardware supplies
22:33
app Let's run it first to see what this looks like Call it hardware supplies but it's
22:40
uh got a list of hardware items and then another color picker control here So
22:46
you'll see I've got a data grid with some hardware items in it And
22:52
this control I can resize the columns nicely like a basic data grid functionality And you'll see I've also
22:59
got a little shadow around here And I've got some text here with a shadow on it
23:06
And my color picker control I'm using data binding to bind to this shadow color So if I
23:12
change the color that I've picked here it changes my shadows in real
23:21
time Anything I change there changes You can change the uh type of selection
23:33
And that's uh one of the controls in the community toolkit Let's take a look at um the code for
23:49
window there we go So I've got the Micah backdrop on here as well
23:56
And for the drop shadow using an attached drop shadow from the toolkit I named it common
24:04
shadow And I'm binding that to the uh the color
24:11
picker and setting the path to color So that's telling it to pick up the color
24:17
property from the color picker and use that for the shadow color
24:23
And then down here this header content control that's the uh that was the header at the
24:30
top And I've got a drop shadow panel which is also binding to the color
24:37
picker to pick up that shadow color And this is my data grid All I'm
24:45
doing here is binding the item source to a list of hardware items that are hardcoded in the the back
24:52
go behind here It's got some code to add a bunch
24:58
of items to that list And then finally got a grid at the
25:06
bottom that contains the uh text block for the uh
25:12
the final shadow says I love hardware and all related supplies And I set the uh effects.shadow
25:19
shadow property to the common shadow that's up in the resource at the
25:26
top And finally the color picker It's got a lot of different properties you can set So I'm setting the spectrum
25:34
shape to a ring You can enable and disable some
25:39
different things about whether you want to have the different sliders and other picking elements available
25:45
And then I'm setting the default color when it launches to be my system accent color So whatever the user's uh system
25:52
accent color is in Windows that'll be the the color of the shadows when you first
26:00
launch And in the code behind like I said there's just the hardware items and then we've got the code to set the uh
26:13
All right let's move on to another demo here We should have time to get to a
26:23
notifications So the uh notifications API in the Windows app SDK lets you use
26:29
uh toast notifications in Windows And there's a couple different types that we can create here Let's uh pop open that
26:42
And most of these demos are adapted from samples in my book I've got that chapter on notifications that I pulled this demo
26:53
from So we've got the media collection app again but it's been enhanced a little
26:59
bit Let's launch this We've got a couple of extra buttons
27:05
at the bottom when this opens up
27:12
So we don't have the uh special title bar here It's got the standard title bar that you get out of
27:18
the box but we do have some new buttons down here for notifications So we can
27:24
send a notification or we can send a notification that will also have a text box for a reply So let's try the initial
27:32
regular notification You can see pops up a toast And if your
27:38
app is behind something I can click open app and it brings it to the front and I get a popup saying we
27:46
received this notification to open the app We'll hit okay there I'm also using
27:53
a status bar to show the uh current status Last thing that happened was the notification was
27:59
received The next notification we'll send will have that text box
28:04
Here's our toast And now I can enter a
28:18
reply So I've received that If your app was in the back it would have brought it to the front again but our app was at
28:24
the front Here's the uh reply It says input received was hello C# TV
28:33
we click okay there So let's take a quick look at how that code is implemented But um there's
28:41
a link in my uh list of links in GitHub that points you to the Microsoft learn
28:46
article that could walk you through all of this step by step So we have a few extra classes here
28:53
Let's go to the helpers We've got toast with text and toast with avatar These
28:59
are two different uh they're like templates for creating your
29:05
toast So here when I send the toast I'm adding arguments
29:12
for the different scenarios I have Um I'm telling
29:17
it to use this icon cropping the image to a circle when
29:24
it appears on the toast Here's the text that will appear on the
29:29
toast And this is the uh text box We're adding a text box to it And this is the
29:38
pre-populated text that will show in the text box for the user And there's a button So the button
29:44
on the toast says reply and the action is reply And that's what we got back in
29:50
the message that appeared on the screen If we look at the other one the one
29:56
without the text box it looks pretty similar but we don't have we just go from text to button We
30:02
don't have the text box in this
30:08
one And then we've got a notification
30:13
manager This is where we register to receive notifications
30:22
So in the initialize here we're setting up an event handler
30:28
to find out when notifications are invoked and calling this register on the
30:34
the handler When messages are received we're going to process them
30:40
here Send the notification out to Windows And then this is this
30:47
notification shared These are all the updates that we
30:53
received in that status bar So the status bar in the app gets updated based on which one of these we've called from
30:58
the manager class And
31:04
finally notification received If there's any issues we just pop up a
31:12
message saying there was some uh unrecognized message that was
31:20
received And like I said this is all out on learn Uh this is my speaking repo but
31:27
this is the page within this conferences stuff So I've got all the links for all
31:32
this And if you go to the notifications here Windows App SDK app
31:43
notifications So this overview gives you a little info but then there's a a quick start that walks you through all of this
31:50
on how to set up the uh notifications for your own
32:00
apps All right Next we don't probably have time to go through all the interop
32:06
uh demos but there are a couple different ways that you can do interop So there's ZAML Islands So this
32:14
was added in Windows App SDK 1.4 four And uh right now they're still working
32:20
on enhancing this but you can only use the ZAML islands to uh
32:26
show uh Windows app SDK Win UI stuff within a C++ app So you can't use this
32:32
in other uh Windforms or WPF apps yet Um but there there's a sample up on GitHub
32:38
from the team that shows you how to implement this in a C++ app And I do also have the code in my repo
32:47
And we don't have time to walk through the code but I can run this quickly and show you how it
32:59
works Let's run this So this is a a C++ project and it's within here it's got a
33:06
couple of Win32 buttons These are C++ buttons and then within there it's also
33:13
got the Win UI content So everything from this toolbar down is all WinUI
33:20
content So we've got a web view control that's when UUI It's got some
33:25
uh WinUI buttons text
33:31
box So all this is embedded within the C++
33:40
app And the other way that you can do interop let's go back to PowerPoint
33:46
So you can use the web view control to embed uh web content within your WinUI
33:51
apps And I have a sample that embeds a Blazer app inside there So let's run
33:58
that quickly just to show you what that looks like So I've got two projects in here
34:04
I've got a Blazer project that uses web assembly and I have that running out on the web so we don't have to kick that
34:11
off here This is my Win UI project And this will just load up our Blazer
34:16
content from the web Let's run
34:25
this And when this opens it's just going to be a WinUI shell with your basic uh
34:31
Blazer Hello World app This is what you get when you create a new Blazer project
34:36
Most of you are probably familiar with this This is all running in the
34:42
web Take a look at this code
34:48
quickly Crl + C So the only thing in here is the web
34:53
view control And I'm just pointing it out to where my Blazer app is running
34:58
online Nothing else here Nothing in the code behind It's just loading up the Blazer app
35:08
Let's jump back to the slides and see if we can get through a couple more quick things Uh deployment options So there
35:15
are different ways that you can package your app your WinUI apps Um you can make them framework dependent or
35:22
self-contained So framework dependent apps depend on the Windows app SDK runtime being on the client machine Um
35:30
and self-contained apps you when you deploy your app you're deploying the Windows app SDK runtime with your app So
35:36
you have more control over uh the size of or you have more control over the
35:41
versioning of your package that your app has Uh but the the size is going to be
35:46
obviously much bigger when you're deploying the uh whole runtime along with your app Uh you can deploy out to the
35:53
Microsoft Store Uh you can deploy through winget So up on the winget
35:59
repository you can put your app up there Uh there's ways that you can sideloadad Um I've got a link here for instructions
36:06
of how Net Maui Windows apps can be sideloaded and that same process works
36:12
for any WinUI app And there are also thirdparty installers So install shield uh advanced
36:19
installer all those things can work with your WinUI apps
36:27
And we won't be able to get into Uno platform but uh I can explain quickly So
36:33
Uno platform is um multiplatform solution kind of like net maui but they
36:39
can also run on Linux and on the web with web assembly So you can create a single codebase that runs on iOS Android
36:46
Windows Linux uh just about any platform all from the single uh codebase And the
36:52
ZAML used in UNO platform is WinUI ZAML uh in my book in the one chapter where I
36:58
show an UNO platform demo I just take my WinUI code and I copy and paste it into an UNO solution and it's the exact same
37:05
code that I can now run on any platform And the latest releases of Uno
37:12
also have a hot design which lets you um drag and drop design your apps at
37:17
runtime So while you're running your app you can open up this designer and make changes and it'll save those changes
37:23
back to your project and see them uh at
37:30
runtime and we're not doing the demo of Uno Uh final thing here the WinUI road
37:37
map So Windows app SDK 1.7 was just released and 1.8 is up next Uh they just
37:45
released the first experimental release of 1.8 8 Uh the new things in 1.7 were a lot of
37:52
things that people had in UWP that were missing Um background task manager is
37:58
now available in WinUI Uh camera capture UI so you can use the camera in your PC
38:04
to capture images Uh the new title bar we saw and the ooth manager so you can
38:10
do ooth authentication in your apps and they're working on a ZAML designer
38:16
The right now there's no UI designer for WinUI apps You have to handcode all your
38:22
ZAML Uh but they have started work on a ZAML designer in 1.7 and they'll
38:27
continue that work in 1.8 And this QR code goes out to the
38:33
road map for Windows App SDK And let's see if we have a minute
38:40
left I have one other demo that's not part of the slides but it's pretty cool Um in the current experimental releases
38:47
of Windows App SDK there's some AI stuff that you can do So this Windows C-Pilot
38:57
runtime This uh project can only run if you have a Copilot Plus PC that's got the local uh FICA AI model on it
39:07
So what this has let's just run it and you'll see
39:12
what we've got So this is going to use the local model on my machine And if I pop up test manager we
39:20
can watch the uh MPU do its work So here's
39:27
my MPU my neural processing unit on my
39:32
machine and you'll be able to see the uh the GPU and CPU activity as well as we
39:39
run this demo Let's see if we can resize this a little bit to get everything to
39:51
fit All right So here I have a prompt provide the
39:56
molecular formula for glucose and explain its properties and we're asking it to please u give us some markdown
40:04
formatting to make it easy to read So in these APIs there are different kinds of queries that you can
40:10
run against the local model You can do a general query which is just uh you know your usual questions that you'd ask the
40:15
AI Um you can ask it to rewrite your text summarize text if you have a a
40:20
multi-page item that you'd um paste into here You can ask it to summarize it and
40:26
you can also do text to table which will create a table of items from whatever you paste in there But we just do a
40:32
general query quickly here And it's thinking and we should see the MPU start
40:39
to take off a little bit Starting to get busy There it goes Meanwhile my CPU is pretty flat Not
40:48
much going on there GPU is also not working Everything's happening on the
40:53
MPU And in the code here I'm telling it to read the data
40:59
back to me as it's being generated So we don't have to wait a long time for the whole thing to be created before I show
41:06
you the output We're getting this streamed back to the app
41:13
asynchronously So we'll wait for this to finish up There should just be a couple more lines and then I'll show you the
41:18
code and we'll wrap up
41:27
This checkbox show progress This is what controls whether it feeds it back as it's going or if it just does one call
41:34
and wait for everything to come back And while we wait Oh there we go
41:41
It's finished The other thing I have here is a checkbox to say use a strict content filter So that will filter
41:47
content um has violence filters has different filters that I'll show you in the code
41:54
here super quick Let's close
42:00
that So here's where I'm checking if we want to um show progress So if we want to show
42:08
progress it uses this generate response with progress And then we've got a call
42:14
back to show the results as they're coming in If I want to see everything at
42:20
once I just make a single call to generate response async and I get everything in the result and populate
42:26
that at the end Uh the other thing I've got is the like I mentioned content
42:34
filters and I've got a thing down here apply content filters So if the check box is checked it's
42:41
setting all these filter options for violence uh hate content sexual content self harm content So all of that can be
42:48
filtered out with these filters And this is all running locally
42:56
nothing pinging the web for this AI call So like I said that's in the
43:03
experimental release Um hopefully it'll make it out to a stable release very soon