Siempre he querido desarrollar una aplicación completa de aprendizaje automático en la que tuviera una interfaz de usuario para incorporar algunas variables de entrada y un modelo de aprendizaje automático para predecir esos valores. La semana pasada, hice justo eso. En el proceso, creé una plantilla fácil de usar en React y Flask, que cualquiera puede modificar para crear su propia aplicación en cuestión de minutos.

1. El front-end se desarrolla en React y comprendería una sola página con un formulario para presentar los valores de entrada

2. El back-end se desarrolla en Flask que expone los puntos finales de la predicción para predecir usando un clasificador entrenado y enviar el resultado de vuelta al front-end para su fácil consulta

El repo de GitHub está abajo. Forquea el proyecto y crea tu propia aplicación hoy!

Lea También: Mejorar Tu Modelo De Machine Learning Probando Diferentes Enfoques

Plantilla 

Descripción 

Usé create-react-app para crear una aplicación básica de React para empezar. Luego, cargué el bootstrap que nos permite crear sitios web receptivos para cada tamaño de pantalla. Actualizé el archivo App.js para añadir un formulario con desplegables y botones de Predicción y Reinicio de Predicción. Añadí cada propiedad del formulario al estado y al pulsar el botón de Predicción, envío los datos al backend de Flask. También he actualizado el archivo App.css para añadir estilo a la página.

La aplicación Flask tiene un punto final POST / predicción. Acepta los valores de entrada como un json, lo convierte en un array y vuelve a la UI. En la aplicación real, usaremos los mismos datos para hacer la predicción usando el clasificador almacenado en classifier.joblib y retorna la predicción.

Reiniciar la predicción eliminará la predicción de la UI.


Le puede interesar leer también: Comprensión de la Matriz de Confusión y Cómo Implementarla en Python

Iniciando la Plantilla 

npm install -g serve
npm run build
serve -s build -l 3000

Ahora puedes ir al localhost:3000 para ver que la UI está en funcionamiento. Pero no interactuará con el servicio de Flask que aún no está funcionando. Así que, hagamos eso.

Preparando el servicio

En la segunda terminal, muévase dentro de la carpeta de service usando cd service. Empezamos creando un entorno virtual usando virtualenv y Python 3. Puedes leer sobre virtualenv aquí. Después de activar el entorno, instalaremos todas las dependencias necesarias usando pip. Finalmente, ejecutaremos la aplicación Flask.

virtualenv -p Python3 .
source bin/activate
pip install -r requirements.txt
FLASK_APP=app.py flask run

Esto iniciará el servicio en 127.0.0.1:5000.

¡Voila! La aplicación completa ahora funcionará correctamente. ¡Yaay!

Usando la plantilla para el caso de uso propio

prediction = classifier.predict(np.array(data).reshape(1, -1))
 | types = { 0: "Iris Setosa", 1: "Iris Versicolour ", 2: "Iris Virginica"}
 | response = jsonify({
 | 				"statusCode": 200,
 | 				"status": "Prediction made",
 | 				"result": "The type of iris plant is: " + types[prediction[0]]
 | 				})

model = app.model('Prediction params', 
 | 				  {'sepalLength': fields.Float(required = True, 
 | 				  							   description="Sepal Length", 
 |     					  				 	   help="Sepal Length cannot be blank"),
 | 				  'sepalWidth': fields.Float(required = True, 
 | 				  							   description="Sepal Width", 
 |     					  				 	   help="Sepal Width cannot be blank"),
 | 				  'petalLength': fields.Float(required = True, 
 | 				  							description="Petal Length", 
 |     					  				 	help="Petal Length cannot be blank"),
 | 				  'petalWidth': fields.Float(required = True, 
 | 				  							description="Petal Width", 
 |     					  				 	help="Petal Width cannot be blank")})

Como se puede ver en la esencia, he actualizado los nombres de los campos, su tipo a Float, la descripción y el texto de ayuda. Lo mismo se reflejará ahora en el Swagger también.

Actualizar la interfaz de usuario 

var sepalLengths = []
 | for (var i = 4; i <= 7; i = +(i + 0.1).toFixed(1)) {
 |   sepalLengths.push(<option key = {i} value = {i}>{i}</option>);
 | }
 | var sepalWidths = []
 | for (var i = 2; i <= 4; i = +(i + 0.1).toFixed(1)) {
 |   sepalWidths.push(<option key = {i} value = {i}>{i}</option>);
 | }
 | var petalLengths = []
 | for (var i = 1; i <= 6; i = +(i + 0.1).toFixed(1)){
 |   petalLengths.push(<option key = {i} value = {i}>{i}</option>);
 | }
 | var petalWidths = []
 | for (var i = 0.1; i <= 3; i = +(i + 0.1).toFixed(1)) {
 |   petalWidths.push(<option key = {i} value = {i}>{i}</option>);
 | }

<Form.Group as={Col}>
 |   <Form.Label>Petal Length</Form.Label>
 |   <Form.Control 
 |     as="select"
 |     value={formData.petalLength}
 |     name="petalLength"
 |     onChange={this.handleChange}>
 |     {petalLengths}
 |   </Form.Control>
 | </Form.Group>

constructor(props) {
 |   super(props);
 | 

 |   this.state = {
 |     isLoading: false,
 |     formData: {
 |       sepalLength: 4,
 |       sepalWidth: 2,
 |       petalLength: 1,
 |       petalWidth: 0
 |     },
 |     result: ""
 |   };
 | }

Resultado

La aplicación ya está lista para usar el modelo. Reinicie ambos servicios después de construir la UI usando npm run build. La aplicación tiene el aspecto que se muestra a continuación:

Con algunos valores de características, al pulsar el botón de predecir, el modelo lo clasifica como Iris Setosa.

Con los nuevos valores de las características, el modelo predice que la planta es Iris Versicolor.

Conclusión