First of all, I'd like to introduce you to a very useful study address:/columns
Today, we're finally done with the chapter on classifiers, and as with regression, the last chapter is devoted to building web applications, where we'll review what we've learned and add a new web application to allow the model to interact with the user. So today's topic is food recommendations.
Gourmet Recommendations Web Application
First of all, please don't worry, this chapter will not cover too many front-end knowledge points. Our focus this time around is on machine learning itself, so our goal is to package the model in a way that allows front-end users to interact with the model in a direct interface that no longer relies on a form of back-end input.
In the previous regression section, we learned how to use third-party dependency packagespickle to create a backend-generated.pkl suffixed model file and load that model through the Flask framework, thereby exposing the interface for calls and analysis in the backend. Today, we will explore a new piece of knowledge, ONNX Web, which will further broaden our horizons in the deployment and application of machine learning models.
ONNX Web
ONNX Web is a tool and library for running ONNX models in a browser, primarily for inference of deep learning models.ONNX (Open Neural Network Exchange) is an open deep learning model exchange format that allows models to be shared between different deep learning frameworks.ONNX Web enables developers to run ONNX models directly on a web page, typically used in front-end applications for machine learning and deep learning.
development step
- Preparing the ONNX model: First, a trained and exported ONNX model is needed.
- Introducing ONNX Web libraries: Introduce ONNX Web's JavaScript libraries in your front-end project. You can install it via npm or use the CDN directly in HTML.
<script src="/npm/[email protected]/dist/"></script>
- Load Model: Use the ONNX Web API to load the model and perform inference.
const session = await ('./');
- Perform inference: prepare the input data and perform inference using the loaded model.
- Processing Output: Process the results according to the output format of the model and present them in the application.
Okay, after a thorough understanding of the development steps, let's start building a fully functional web application step-by-step.
build a model
First, we will train a classification model using the previously cleaned dish dataset.
import pandas as pd
from sklearn.model_selection import train_test_split
from import SVC
from sklearn.model_selection import cross_val_score
from import accuracy_score,precision_score,confusion_matrix,classification_report
data = pd.read_csv('../data/cleaned_cuisines.csv')
X = [:,2:]
y = data[['cuisine']]
X_train, X_test, y_train, y_test = train_test_split(X,y,test_size=0.3)
model = SVC(kernel='linear', C=10, probability=True,random_state=0)
(X_train,y_train.())
y_pred = (X_test)
print(classification_report(y_test,y_pred))
You may already have some idea about this code flow above, so I will not explain it separately.
The results of the run are shown below: the accuracy of the model performs relatively satisfactorily and reaches a good level.
precision recall f1-score support
chinese 0.71 0.72 0.72 238
indian 0.90 0.86 0.88 259
japanese 0.76 0.75 0.75 248
korean 0.83 0.78 0.80 233
thai 0.73 0.82 0.77 221
accuracy 0.79 1199
macro avg 0.79 0.79 0.78 1199
weighted avg 0.79 0.79 0.79 1199
Model Conversion to Onnx
Since we are using a third-party dependency library, we need to install it with the following command:
! pip install skl2onnx
from skl2onnx import convert_sklearn
from .data_types import FloatTensorType
initial_type = [('float_input', FloatTensorType([None, 380]))]
options = {id(model): {'nocl': True, 'zipmap': False}}
onx = convert_sklearn(model, initial_types=initial_type, options=options)
with open("./", "wb") as f:
(())
The overall purpose of this code is to prepare the process of converting a Scikit-Learn model to ONNX format, defining the structure of the input data as well as some configuration options for the conversion.
-
initial_typeis a list that defines the input features of the model and their data types. -
'float_input'is the name of the input, which can be any string, used to identify the input. -
FloatTensorType([None, 380])Specifies the shape of the input data. Here the[None, 380]indicated:- The first dimension is
None, indicating that an arbitrary number of samples (i.e., batch size) can be accepted. - The second dimension is
380The number of features per sample is 380, which means that there are 380 features per sample.
- The first dimension is
-
optionsis a dictionary that specifies some options for the conversion process.-
id(model)Gets the unique identifier (ID) of the model to be used as the key of the dictionary. - Options in:
-
'nocl': TrueIndicates that Class Label Mapping is not used in the conversion. -
'zipmap': FalseIndicates that the ZipMap function is not used in the output ONNX model, which means that the output will be a multidimensional array rather than a dictionary structure. Normally when dealing with categorization problems, ZipMap may convert the category labels to dictionary form, but here the choice is to keep the original output.
-
-
The final step is to simply write the model to a file.
Visual Modeling Tool - Netron
Netron is an open source tool for visualizing and analyzing deep learning models that supports a wide range of model formats, including ONNX, TensorFlow, Keras, PyTorch, and more. It provides an intuitive graphical interface to help users understand and examine model structure, layers, parameters, and other information.
Open source address:/lutzroeder/Netron?tab=readme-ov-file
It contains a variety of installation versions of the system, making it easy for users to choose and install according to their needs. In addition, it provides an online web application that users can access directly through the browser without the need to install any additional software.
The online web application address is below:/
After we upload the model we just trained, we can clearly view the details of the model.
Again, you can explore the model further by clicking on each box. For example, if we click on the "SVMClassifier" option, a detailed dialog box will pop up on the screen as shown below.
Well, in the future, if you want to see specific information about the model and its performance, you can certainly use this visualization tool as a reference.
web application
This time, instead of using a Python backend to launch the application, we'll rely entirely on a front-end static page for all functionality.
<!DOCTYPE html>
<html>
<header>
<title>Cuisine Matcher</title>
</header>
<body>
<h1>Check your refrigerator. What can you create?</h1>
<div >
<div class="boxCont">
<input type="checkbox" value="4" class="checkbox">
<label>apple</label>
</div>
<div class="boxCont">
<input type="checkbox" value="247" class="checkbox">
<label>pear</label>
</div>
<div class="boxCont">
<input type="checkbox" value="77" class="checkbox">
<label>cherry</label>
</div>
<div class="boxCont">
<input type="checkbox" value="126" class="checkbox">
<label>fenugreek</label>
</div>
<div class="boxCont">
<input type="checkbox" value="302" class="checkbox">
<label>sake</label>
</div>
<div class="boxCont">
<input type="checkbox" value="327" class="checkbox">
<label>soy sauce</label>
</div>
<div class="boxCont">
<input type="checkbox" value="112" class="checkbox">
<label>cumin</label>
</div>
</div>
<div style="padding-top:10px">
<button onClick="startInference()">What kind of cuisine can you make?</button>
</div>
<!-- import ONNXRuntime Web from CDN -->
<script src="/npm/[email protected]/dist/"></script>
<script>
const ingredients = Array(380).fill(0);
const checks = [...('.checkbox')];
(check => {
('change', function() {
// toggle the state of the ingredient
// based on the checkbox's value (1 or 0)
ingredients[] = ? 1 : 0;
});
});
function testCheckboxes() {
// validate if at least one checkbox is checked
return (check => );
}
async function startInference() {
let atLeastOneChecked = testCheckboxes()
if (!atLeastOneChecked) {
alert('Please select at least one ingredient.');
return;
}
try {
// create a new session and load the model.
const session = await ('./');
const input = new (new Float32Array(ingredients), [1, 380]);
const feeds = { float_input: input };
// feed inputs and run
const results = await (feeds);
// read from results
alert('You can enjoy ' + [0] + ' cuisine today!')
} catch (e) {
(`failed to inference ONNX model`);
(e);
}
}
</script>
</body>
</html>
Roughly explain the js part of the code:
- Create an array ingredients of length 380 with an initial value of 0 to represent the status of the selected ingredient.
- Get all the checkboxes and add a change event listener for each one. When the state of the checkboxes changes, update the ingredients array according to the value of the checkboxes, which is 1 for checked and 0 for unchecked.
- The testCheckboxes function is used to check if at least one checkbox is checked.
- The startInference function first checks to see if at least one ingredient is selected. If not, it pops up a hint box.
- Load the ONNX model asynchronously () if there are selected ingredients.
- Create a tensor input of shape [1, 380] to store the ingredient information.
- Call the run method of the model to perform inference and get the result.
- The label data in the results is used to display the recommended dishes.
Let's run it. The http-server dependency is used here:
npm install --global http-server
After running it, it is shown in the figure:
At this point, we have completed the entire process of building the web application.
summarize
In this learning journey, we successfully built a food recommendation web application that explores the intersection of machine learning and web development. By using ONNX Web, we were able to integrate the trained model directly into the browser, allowing users to interact with the model without relying on the backend, which greatly improves the user experience. Combined with Netron, a powerful visualization tool, we are able to not only analyze and understand the internal structure of the model, but also intuitively display the performance and characteristics of the model.
This concludes our chapter on categorization, and we thank you for your careful study and participation. In our next course, we will dive into clustering techniques and understand their important applications in data analysis and machine learning.
I'm Rain, a Java server-side coder, studying the mysteries of AI technology. I love technical communication and sharing, and I am passionate about open source community. I am also a Tencent Cloud Creative Star, Ali Cloud Expert Blogger, Huawei Cloud Enjoyment Expert, and Nuggets Excellent Author.
💡 I won't be shy about sharing my personal explorations and experiences on the path of technology, in the hope that I can bring some inspiration and help to your learning and growth.
🌟 Welcome to the effortless drizzle! 🌟