For all the self-taught geeks out there, here is our content library with most of the learning materials we have produced throughout the years.
It makes sense to start learning by reading and watching videos about fundamentals and how things work.
Data Science and Machine Learning - 16 wks
Full-Stack Software Developer - 16w
Search from all Lessons
Curated list of small interactive and incremental exercises you can take to get better at any coding skill.
Curated section of projects to build while learning with simple instructions, videos, solutions, and more.
Guides on different topics related to the technologies that we teach in our courses
Social & live learning
The most efficient way to learn: Join a cohort with classmates just like you, live streams, impromptu coding sessions, live tutorials with real experts, and stay motivated.
After the model development phase, we will have a model that meets our expectations and satisfies our needs. For this model to be useful and fulfill the function for which it has been trained, we must make it available in an environment that allows us to use it. Here we propose a free environment called
Render, but it can be transferred to other environments, free or paid.
Render is a cloud computing platform that facilitates the deployment, hosting and execution of applications, databases, scheduled tasks and other services. It is often described as an easy-to-use platform that combines the ease of platforms like Heroku with the power and flexibility of more traditional cloud providers like AWS.
Some key features and offerings of Render include:
Render has earned a positive reputation for being an attractive option for developers and startups looking for a quick and easy way to deploy and scale applications without the administrative overhead of more traditional solutions.
In order to access Render you must have an account. To register you must access the following link. Once you have an account, you will have access to all the Render functionality:
We can create database services, web deployment services, scheduled tasks...
In this lesson we will integrate the classification model we have developed in the decision trees module.
decision_tree_classifier_default_42.sav model has been saved in a
Pickle object so that it can be used, for example, to deploy it in a web service like this case.
To integrate something into Render we must first have created a Git repository. The Git we are going to generate in this lesson can be found here, which is derived from 4Geeks' Machine Learning Template.
We will now generate a simple application using the
Flask library. In the
src directory, we create a new file named
hello.py which we will modify with the following code:
The created file will serve as a minimal example of how to handle HTTP requests. It imports the
Flask object and creates a function that returns an HTTP response.
Right now the repository looks like this:
To run the application locally we need the Python library
gunicorn. We just need to install it, access with the console to the directory where the script is located and run
When finished, an address will be available through which we can access the web application:
In this case, as we are developing it in a Codespace, the link is different from the one that would be generated locally, which would be
At this point we have a small Flask web application with little or no functionality. Next, we will add HTML files to customize the application.
As we mentioned at the beginning of the lesson, we want to integrate the decision tree trained for the Iris dataset from the Machine Learning UCI repository. This dataset has 4 predictor variables: petal width (
petal width (cm)), petal length (
petal length (cm)), sepal width (
sepal width (cm)) and sepal length (
sepal length (cm)).
We will create an HTML that allows us to enter a value for each variable in order to carry out the prediction:
This HTML contains a title and a form in which the values associated with each field must be entered. Then, by clicking on the
Predict button, an element containing the prediction of the model will appear, depending on the values entered. In the HTML there are some sentences between braces that are pure Python code, a curious syntax used by Flask to enter values dynamically.
All the HTML templates that we generate must go in a
templates folder that must be created at the same level as the
app.py. We call this file
index.html and store it in the folder.
In addition to creating the above template, we must update the code so that it is fed from the HTML, receives the fields and can return a prediction. Thus, the
app.py file would be updated:
We have created the
index function, which replaces the old
hello_world and is fed by the values entered in the HTML to trigger the prediction process. This is because when the
Predict button is clicked, a POST request is sent to the script and the values entered in the HTML form are read to perform the prediction.
Ultimately, the method returns the rendered HTML, in this case with the value of the prediction based on the values.
Right now the repository looks like this:
If we save the changes and run the application again (
gunicorn app:app), after navigating to our local web application we will see the following:
After filling in the values and clicking on
Predict, the result is also displayed in the interface itself:
Entering any value predicts a class. Moreover, the effectiveness of the model is as observed in the past module.
The web interface seems very simple and unattractive to users. The next step is to give it some styling.
An easy way to add styles is to use CSS. We can add a
<style> block directly to the above HTML to enhance it visually. The
CSS code we will include is as follows:
The above code sets a light background for the entire page, and highlights the form and header with a white background and smoothly rounded edges. The input fields are more spacious and visual, with appropriate borders and padding, and the submit button features a color change when hovered over, providing visual feedback. In addition, more legible typography is used and elements are appropriately spaced with margins to prevent them from feeling cramped.
When inserted into the HTML, the code would look like this:
After re-running the application and accessing the web interface again, this is its new appearance:
And again, when filling in the values and launching the prediction, this is how it is displayed on the front end:
After developing the desired functionality and having a front end that meets our needs, we will integrate all this into Render.
The last step is to configure the service in Render and connect it to our Git repository. We must go to the Render Dashboard, select the
Web Services section and choose the repository where we have uploaded all the code and the previous folders.
Once we select it, a form like the following one will appear:
We will have to fill it with the following information:
Name: The name we want our service to have. In this case we will introduce
Branch: The branch where our updated code is located, always in the latest version. We will have to leave the default value,
Root Directory: In this case we have developed the code inside the
srcfolder, which includes the Python script, the HTML template and the project libraries (file
requirements.txt), so we should enter
Runtime: The code is Python, so we will leave the default value,
Build Command: We will leave the default value,
pip install -r requirements.txt.
Start Command: We are already friendly with this command. We have used in the development gunicorn, so we will leave the default value,
Finally, we will choose the free rate. The form, once filled in, should have the following information:
In the next step we will see a console with the logs of the application deployment. The deployment is done step by step, first cloning the repository, building it (build), installing the dependencies, and, finally, executing the command to launch the web application.
Because the Render environment is different from our development environment (especially in the Python version, since 3.7 is used by default and in this case we use 3.10 and up), we may get an error in the build of the project. In this case its resolution is very simple:
We have to access, in the same screen where the execution log is opened, to the
Environment section and enter a new environment variable. In this case we have the
3.11.4 version of Python but you could enter any other (as long as it is from 3.7).
We re-launch the deployment and now it should work.
Once the deployment has been successful, this is the log that will be displayed:
In fact, a section is available in which we can visualize the different deployments of our web application and the status of each one of them:
Once the deployment has been successful, we access the application from the link just below the name of the service, and we can now use the application and share it with our friends/colleagues/clients. The one we have created in this lesson is accessible at the following link:
NOTE: As you have used the free plan, Render may throw the application away if it is not used. Depending on when you read this the application will be operational or not.