9/7/2023 0 Comments T3 stack![]() ![]() I only work evenings and Saturdays on the project (because I have a full-time job). This platform will be used on one hand by students during revision periods and on another hand, by teachers who can share homework with their students. The idea is to allow people to build exercises with questions and responses on the platform and share this with other people who can practice. The projectĪs the title said, I'm building a SaaS as a side project (maybe I can call it SaaSaSP □). As you can see, the state has been updated to have formData with new keys.Before starting I want to thank Hashnode and point out that my article for Dev Retro 2022 was nominated among the winners, very happy. The state must also be updated with the same names inside formData with the default values as the smallest value of the respective dropdowns. Two such groups inside a will make our UI. In the post method, I made the following updates: prediction = classifier.predict(np.array(data).reshape(1, -1)) I uncommented the line classifier = joblib.load(‘classifier.joblib’) so that the variable classifier now holds the trained model. Next, I opened the file app.py in a text editor (Sublime Text is one). The classifier can now be used to predict on new data. Then, I saved the model to classifier.joblib using joblib.dump(). I trained a DecisionTreeClassifier on the iris dataset which requires 4 features - Sepal Length, Sepal Width, Petal Length and Petal Width. This example is also available in the example folder in the project. To understand the process of using the template for any model, I’ll use the iris dataset and create a model for the same. Yaay!! Using the template for own use case Voila! The complete application will now be working properly. This will start up the service on 127.0.0.1:5000. We will then install all the required dependencies using pip after activating the environment. We begin by creating a virtual environment using virtualenv and Python 3. On the second terminal, move inside the service folder using cd service. But it won’t interact with the Flask service which is still not up. You can now go to localhost:3000 to see that the UI is up and running. We will begin by installing the serve globally, post which, we’ll build our application and then finally run the UI using serve on port 3000. To run the UI on server, we will use serve. ![]() Once inside the folder, run the command yarn install to install all dependencies. ![]() Make sure you are using the node version 10.4.1. In the first terminal, go inside the ui folder using cd ui. Starting the templateĬlone the repo to your computer and go inside it and open two terminals here. ![]() Reset Prediction will remove the prediction from the UI. In actual application, we’ll use the same data to make prediction using the classifier stored in classifier.joblib and return the prediction. It accepts the input values as a json, converts it into an array and returns to the UI. The Flask app has a POST endpoint /prediction. I also updated the App.css file to add style to the page. I added each form property to state and on pressing the Predict button, I send the data to the Flask backend. I updated the App.js file to add a form with dropdowns and Predict and Reset Prediction buttons. Next, I loaded bootstrap which allows us to create responsive websites for each screen size. I used create-react-app to create a basic React app to begin with. You can learn more about developing a Flask app from my article below. Flask and Flask-RESTPlusįlask and Flask-RESTPlus allow us to define a service in Python which will have endpoints which we can call from the UI. The best resource to learn about React is its documentation itself which is very comprehensive and easy to grasp. It’s one of the leading languages for front-end development. React is a JavaScript library created by Facebook to help make working with User interfaces simple and easy to develop and use. Fork the project and create your own application today! Template React The back-end is developed in Flask which exposes prediction endpoints to predict using a trained classifier and send the result back to the front-end for easy consumption.The front-end is developed in React and would include a single page with a form to submit the input values.In the process, I created an easy to use template in React and Flask, that anyone can modify to create their own application in a matter of minutes. I have always wanted to develop a complete Machine learning application where I would have a UI to feed in some inputs and the Machine learning model to predict on those values. ![]()
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. ArchivesCategories |