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