WEBVTT 00:00.080 --> 00:00.920 Welcome back. 00:01.360 --> 00:04.240 The second step is to design our UI. 00:04.400 --> 00:08.960 So after adding the TensorFlow library we need to design our UI. 00:09.120 --> 00:16.160 Create a new Kotlin file inside this package and name it as House price screen. 00:16.200 --> 00:20.040 Inside this file we need to create a composable function. 00:20.040 --> 00:25.040 And let's start with function house price prediction. 00:25.040 --> 00:30.840 And inside this screen we need to create some variables. 00:30.880 --> 00:36.320 The input by remember mutable state of import function. 00:36.480 --> 00:40.560 Import the mutable state of and import by. 00:40.600 --> 00:47.200 We can um, make it like a size input, uh, or other in order to distinguish it. 00:47.200 --> 00:55.560 And in order to know what we're going to, to put as an input and what we need to get as an output. 00:55.560 --> 01:02.600 So here the price output by remember mutable state of empty string. 01:02.760 --> 01:08.200 We need to design our composable hierarchy and layout. 01:08.200 --> 01:12.400 So let me start with colon modifier fill. 01:12.440 --> 01:20.920 Maximum size I'm going to use the Gemini, which is an act which is active in Android Studio that suggested 01:20.920 --> 01:21.720 the codes. 01:21.720 --> 01:27.480 So Alt plus enter to import those and here fill maximum size. 01:27.520 --> 01:32.320 Set some Paddings to 20 dpi from all sides. 01:32.360 --> 01:39.040 Vertical arrangement arrangement center alignment center horizontally. 01:39.040 --> 01:44.200 And let me start adding some composables inside this column. 01:44.240 --> 01:51.960 Here we have the text TensorFlow Lite House Price Predictor and make the style headline small. 01:52.000 --> 01:53.520 Okay, this is that text. 01:53.560 --> 01:55.920 Make a spacer 24 dpi. 01:56.200 --> 02:05.720 And let me add the outlined text field for getting the out the input from the user outlined text field. 02:05.720 --> 02:09.560 Set the value the input size on value. 02:09.560 --> 02:12.880 Change the size equals to it. 02:12.920 --> 02:16.640 Label house size in square feet. 02:16.680 --> 02:25.400 Keyboard options just allow the numbers so keyboard options in order to prevent any error. 02:25.560 --> 02:36.080 So maybe the user enters um, string letters or or any special character in the field of numbers. 02:36.080 --> 02:38.200 And this will crash your app. 02:38.360 --> 02:49.880 Then we're going to use the modifier equals to modifier dot fill maximum size another spacer and a button. 02:49.880 --> 02:55.520 So inside this button we need to configure the on click event. 02:55.520 --> 03:04.970 So val x equals to input size, dot to float or null if x doesn't equal to null. 03:05.130 --> 03:10.170 We need to predict the price using the TensorFlow model. 03:10.210 --> 03:14.890 I'll skip this step for later use. 03:14.930 --> 03:22.290 I'll continue with this else statement inference error or enter a valid number here. 03:22.330 --> 03:26.490 Okay so this is our on click event. 03:26.490 --> 03:31.250 Set a text for the button predict house price. 03:31.250 --> 03:38.090 Nothing to lecture I'm just creating our UI our user interface. 03:38.130 --> 03:41.770 We've already done a lot of things like this. 03:41.770 --> 03:45.770 Now let's call our screen inside this theme. 03:45.930 --> 03:50.010 So house price house price screen. 03:52.690 --> 03:59.290 House price not screen prediction I'm calling this composable run. 03:59.290 --> 04:05.930 Our application to solve this error could not find TensorFlow Lite 2.20.0. 04:06.290 --> 04:12.010 Let me go back and here with the latest versions 2.20.0. 04:12.210 --> 04:15.130 But maybe this is for the Lite RT. 04:15.530 --> 04:23.730 And the latest stable version that doesn't support RT is 17.0 sink. 04:23.730 --> 04:28.050 Now run the application and everything is working fine. 04:28.050 --> 04:28.810 And here we go. 04:28.850 --> 04:30.730 This is our application. 04:30.890 --> 04:36.890 But I missed I, I made this full size outline text. 04:36.930 --> 04:38.250 This is not good. 04:38.290 --> 04:40.490 Fill maximum width. 04:40.530 --> 04:41.770 Fill maximum width. 04:41.890 --> 04:43.050 Run again. 04:43.050 --> 04:43.970 And here we go. 04:44.010 --> 04:53.570 This is our application TensorFlow Lite house prediction or house price predictor okay so congratulations 04:53.570 --> 04:56.290 we created our UI.