Aplicación de detección de máscaras en Flutter

Hoy en día en la situación de Covid, es muy importante usar una máscara y protegerse a sí mismo y a los demás. Entonces, esta aplicación ayuda a detectar si la persona ha usado la máscara o no. En esta aplicación, la detección de máscaras se realiza con la ayuda de TensorFlow Lite.

Sigue los pasos para implementar la Detección de Mascarillas en nuestra App Flutter

  • Agregue la dependencia al archivo pubspec.yaml .
  • Importe la dependencia al archivo main.dart

Paso 1: Primero agregue la siguiente dependencia en su archivo pubspec.yaml

Agregue la dependencia dada en el archivo pubspec.yaml

Dart

dependencies:
   
  cupertino_icons: ^1.0.2
  image_picker: ^0.7.4
  tflite:
  google_fonts:

Paso 2 : ahora navegue hasta el archivo main.dart() y devuelva Material App().

Primero, hemos declarado MyApp() en runApp en la función principal. Luego hemos creado StatelessWidget para MyApp en el que hemos devuelto MaterialApp(). En este MaterialApp() le hemos dado el título de nuestra aplicación y luego declaramos el tema de nuestra aplicación como color primario como azul. Luego le hemos dado nuestra primera pantalla o aplicación deslizante en el hogar: HomePage()

Dart

void main() {
  runApp(MyApp());
}
  
class MyApp extends StatelessWidget {
    
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
      
    // Material App
    return MaterialApp(
      debugShowCheckedModeBanner: false,
      title: 'Flutter Demo',
      theme: ThemeData(
      brightness: Brightness.dark,
        primaryColor: Color(0xff01AEBC),
      ),
        
      // Main Screen in our app
      home: HomePage(),
    );
  }
}

Paso 3: Ahora declare StatefulWidget() para la clase HomePage().

En este StatefulWidget() hemos declarado varias variables bajo la función de estado. Y después de eso, tenemos métodos de declaración para loadImageGallery() y loadImageCamera(). Estos métodos se utilizan para seleccionar las imágenes de la galería y la cámara con la ayuda de la biblioteca image_picker que hemos importado.

Dart

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State<HomePage> {
    
  // Variables Declared
  bool _loading = true;
  File _image;
  final imagePicker = ImagePicker();
  List _predictions = [];
  
  // Methods to pick the image  from Camera and Gallery
  Future loadImageGallery() async {
    final image = await imagePicker.getImage(source: ImageSource.gallery);
    detectImage(image);
  }
  
  Future loadImageCamera() async {
    final image = await imagePicker.getImage(source: ImageSource.camera);
    detectImage(image);
  }

Paso 4: ahora ve a Google Teachable Machine.

Ahora vaya a una máquina de enseñanza de Google . Donde tienes que entrenar el Modelo para la Detección de Mascarillas. Ahora haga clic en Proyecto de imagen. Aquí debe crear dos clases, una para máscara y la otra para sin máscara. Ahora, en la clase de máscara, haga clic en WebCam para grabar su máscara facial desde todos los ángulos. De la misma manera, grabará su rostro sin máscara en la clase sin máscara desde todos los ángulos. Ahora haga clic en Modelo de tren .

Después de completar eso, haga clic en Exportar modelo .

Paso 1:

Paso 2:

Paso 3:

Después de eso, haga clic en Tensorflow Lite y en eso seleccione Punto flotante y luego haga clic en Descargar mi modelo . Ahora, después de descargar el modelo, extraiga el archivo. Ahora agregue los archivos extraídos a la carpeta de activos en el archivo pubspec.yaml .

Paso 5: ahora agregue las siguientes líneas de código para importar su modelo a su aplicación.

Ahora hemos creado loadModel() en esto, hemos agregado archivos extraídos de nuestro archivo descargado en este método. Y hemos inicializado loadModel() en initState(). Después de eso, hemos creado detectImage() para detectar la imagen . Después de eso, hemos establecido el estado para actualizar la imagen.

Y hemos Finalizado la función usando dispose() .

Dart

//Initialize the state 
@override
  void initState() {
    // TODO: implement initState
    super.initState();
    loadModel();
  }
  
  // Added extracted files in loadModel() function
  loadModel() async{
    Tflite.close();
    await Tflite.loadModel(model: 'assets/model_unquant.tflite',
                           labels: 'assets/labels.txt');
  }
  
 // Created detectImage() for detecting the image
 Future detectImage(image) async {
    var prediction = await Tflite.runModelOnImage(
        path: image.path,
        numResults: 2,
        threshold: 0.6,
        imageMean: 127.5,
        imageStd: 127.5,
    );
    setState(() {
      _loading = false;
      if (image != null) {
        _image = File(image.path);
        _predictions = prediction;
      } else {
        print('No image selected.');
      }
    });
  }
  
  // Ended the function
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }

Paso 6: Después de eso, hemos dado la interfaz de usuario de nuestra aplicación.

En este StateFulWidget() hemos declarado Scaffold() . En el que hemos declarado Appbar() en esta barra de aplicaciones, hemos dado el título de nuestra aplicación en Text Widget. Después de la barra de aplicaciones en la sección del cuerpo, hemos declarado Column() en el que la imagen y los botones aparecerán uno debajo del otro. Cuando hacemos clic en el botón Capturar imagen se abrirá la cámara del dispositivo, y hay que capturar la imagen que detectará la máscara.

De la misma manera cuando haces clic en Seleccionar imagen de la galería . Su administrador de archivos se abrirá desde donde puede seleccionar la imagen que se utilizará para detectar la máscara.

Dart

@override
  Widget build(BuildContext context) {
    return Scaffold(
        
      // Appbar declared
      appBar: AppBar(
        title: Text('Mask Detection',
        style: GoogleFonts.robotoCondensed(),
        ),
      ),
      body: SingleChildScrollView(
          
        // Column containing images and buttons
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
              
            // Image will display here
            _loading == false ? Padding(
              padding: const EdgeInsets.all(10.0),
              child: Container(
                child: Column(
                  children: [
                    Container(
                      height: 280,
                      width: 220,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(25),
                      ),
                      child: ClipRRect(
                          borderRadius: BorderRadius.circular(25),
                          child: Image.file(_image)),
                    ),
                    SizedBox(height: 10),
  
                    Text(_predictions[0]['label'].toString().substring(2),
                      style: GoogleFonts.robotoCondensed(
                        fontSize: 20,
                      ),
                    ),
                    SizedBox(height: 10),
                    // Text('Safer: '+"${(_predictions[0]
                    // ['confidence']*100).toString()}%"),
                  ],
                ),
              ),
            ):Padding(
              padding: const EdgeInsets.all(10.0),
              child: Container(
                height: 300,
                width: 250,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(15),
                  color: Colors.grey,
                ),
                child: Center(child: Text('Image Appears here')),
              ),
            ),
            SizedBox(height: 10),
              
            // Capture Image from Camera
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: Container(
                height: 50,
                width: double.infinity,
                child: RaisedButton(
                    onPressed: (){
                        
                     // Methods we created above
                      loadImageCamera();
                    },
                child: Text('Capture Image'),
                  color: Color(0xff01AEBC),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15),
                  ),
                ),
              ),
            ),
            SizedBox(height: 10),
              
            // Capture Image from Gallery
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: Container(
                height: 50,
                width: double.infinity,
                child: RaisedButton(
                  onPressed: (){
                      
                    // Methods we created above
                    loadImageGallery();
                  },
                  child: Text('Pick Image from Gallery'),
                  color: Color(0xff01AEBC),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );

Código completo para la aplicación de detección de máscaras:

Dart

import 'dart:io';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:google_fonts/google_fonts.dart';
import 'package:image_picker/image_picker.dart';
import 'package:tflite/tflite.dart';
  
class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}
  
class _HomePageState extends State<HomePage> {
  bool _loading = true;
  File _image;
  final imagePicker = ImagePicker();
  List _predictions = [];
    
  // For picking image from Gallery
  Future loadImageGallery() async {
    final image = await imagePicker.getImage(source: ImageSource.gallery);
    detectImage(image);
  }
    
  // For picking image from Camera
  Future loadImageCamera() async {
    final image = await imagePicker.getImage(source: ImageSource.camera);
    detectImage(image);
  }
  
  @override
  void initState() {
    // TODO: implement initState
    super.initState();
    loadModel();
  }
    
  // LoadModel() for connection app with TensorFlow Lite
  loadModel() async{
    Tflite.close();
    await Tflite.loadModel(model: 'assets/model_unquant.tflite',
                           labels: 'assets/labels.txt');
  }
    
 // Method for Image detection
 Future detectImage(image) async {
    var prediction = await Tflite.runModelOnImage(
        path: image.path,
        numResults: 2,
        threshold: 0.6,
        imageMean: 127.5,
        imageStd: 127.5,
    );
    setState(() {
      _loading = false;
      if (image != null) {
        _image = File(image.path);
        _predictions = prediction;
      } else {
        print('No image selected.');
      }
    });
    // setState(() {
    //   _loading = false;
    //   _predictions = prediction;
    // });
  }
  @override
  void dispose() {
    // TODO: implement dispose
    super.dispose();
  }
  
  
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // Appbar displayed here
      appBar: AppBar(
        title: Text('Mask Detection',
        style: GoogleFonts.robotoCondensed(),
        ),
      ),
      body: SingleChildScrollView(
        child: Column(
          crossAxisAlignment: CrossAxisAlignment.center,
          children: [
              
             // Image will display here
            _loading == false ? Padding(
              padding: const EdgeInsets.all(10.0),
              child: Container(
                child: Column(
                  children: [
                    Container(
                      height: 280,
                      width: 220,
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(25),
                      ),
                      child: ClipRRect(
                          borderRadius: BorderRadius.circular(25),
                          child: Image.file(_image)),
                    ),
                    SizedBox(height: 10),
  
                    Text(_predictions[0]['label'].toString().substring(2),
                      style: GoogleFonts.robotoCondensed(
                        fontSize: 20,
                      ),
                    ),
                    SizedBox(height: 10),
                    // Text('Safer: '+"${(_predictions[0]['confidence']*100).toString()}%"),
                  ],
                ),
              ),
            ):Padding(
              padding: const EdgeInsets.all(10.0),
              child: Container(
                height: 300,
                width: 250,
                decoration: BoxDecoration(
                  borderRadius: BorderRadius.circular(15),
                  color: Colors.grey,
                ),
                child: Center(child: Text('Image Appears here')),
              ),
            ),
            SizedBox(height: 10),
            // Button for taking Image from Camera
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: Container(
                height: 50,
                width: double.infinity,
                child: RaisedButton(
                    onPressed: (){
                      loadImageCamera();
                    },
                child: Text('Capture Image'),
                  color: Color(0xff01AEBC),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15),
                  ),
                ),
              ),
            ),
            SizedBox(height: 10),
            // Button for taking Image from Gallery
            Padding(
              padding: const EdgeInsets.all(10.0),
              child: Container(
                height: 50,
                width: double.infinity,
                child: RaisedButton(
                  onPressed: (){
                    loadImageGallery();
                  },
                  child: Text('Pick Image from Gallery'),
                  color: Color(0xff01AEBC),
                  shape: RoundedRectangleBorder(
                    borderRadius: BorderRadius.circular(15),
                  ),
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }
}

Producción:

Publicación traducida automáticamente

Artículo escrito por chinmaymunje96 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *