Create RESTAPI of YOLOv5 on Flask deployed on Azure App Service and use in Flutter App

""" Run a rest API exposing the yolov5s object detection model """ import argparse import io from PIL import Image import torch from flask import Flask, request app = Flask(__name__) DETECTION_URL = "/v1/object-detection/yolov5" @app.route(DETECTION_URL, methods=["POST"]) def predict(): if not request.method == "POST": return if request.files.get("image"): image_file = request.files["image"] image_bytes = image_file.read() img = Image.open(io.BytesIO(image_bytes)) results = model(img, size=640) # reduce size=320 for faster inference return results.pandas().xyxy[0].to_json(orient="records") if __name__ == "__main__": parser = argparse.ArgumentParser(description="Flask api exposing yolov5 model") parser.add_argument("--port", default=5000, type=int, help="port number") parser.add_argument('--model', default='yolov5s', help='model to run, i.e. --model yolov5s') args = parser.parse_args() model = torch.hub.load('ultralytics/yolov5', args.model) app.run(host="0.0.0.0", port=args.port) # debug=True causes Restarting with stat 

# Use an official Python runtime as a parent image FROM python:3.8-slim-buster RUN apt-get update RUN apt-get install ffmpeg libsm6 libxext6 -y # Set the working directory to /app WORKDIR /app # Copy the current directory contents into the container at /app COPY . /app # Install any needed packages specified in requirements.txt RUN pip install -r requirements.txt # Make port 5000 available to the world outside this container EXPOSE 5000 # Run app.py when the container launches CMD ["python", "app.py", "--port=5000"] 

import 'package:flutter/material.dart'; import 'package:flutter_restapi/ObjectDetectionScreen.dart'; void main() { runApp(const MyApp()); } class MyApp extends StatelessWidget { const MyApp({super.key}); // This widget is the root of your application. @override Widget build(BuildContext context) { return MaterialApp( title: 'Flutter Demo', theme: ThemeData( // This is the theme of your application. // // Try running your application with "flutter run". You'll see the // application has a blue toolbar. Then, without quitting the app, try // changing the primarySwatch below to Colors.green and then invoke // "hot reload" (press "r" in the console where you ran "flutter run", // or simply save your changes to "hot reload" in a Flutter IDE). // Notice that the counter didn't reset back to zero; the application // is not restarted. primarySwatch: Colors.blue, ), home: ObjectDetectionScreen(), ); } } 

import 'dart:io'; import 'dart:convert'; import 'package:flutter/material.dart'; import 'package:image_picker/image_picker.dart'; import 'package:http/http.dart' as http; class BoundingBox { final double xMin; final double yMin; final double xMax; final double yMax; final double confidence; final String name; BoundingBox({ required this.xMin, required this.yMin, required this.xMax, required this.yMax, required this.confidence, required this.name, }); } class ObjectDetectionScreen extends StatefulWidget { const ObjectDetectionScreen({super.key}); @override State<ObjectDetectionScreen> createState() => _ObjectDetectionScreenState(); } class _ObjectDetectionScreenState extends State<ObjectDetectionScreen> { late List<BoundingBox> _boundingBoxes = []; File? _image; bool _loading = false; final picker = ImagePicker(); Future<List<BoundingBox>> detectObjects(File image) async { final url = "https://flask-restapi-yolov5s.azurewebsites.net/v1/object-detection/yolov5"; final request = await http.MultipartRequest("POST", Uri.parse(url)); request.files.add(await http.MultipartFile.fromPath("image", image.path)); final response = await request.send(); if (response.statusCode == 200) { final jsonStr = await response.stream.bytesToString(); final jsonResponse = json.decode(jsonStr); print(jsonResponse); return List<BoundingBox>.from(jsonResponse.map((bbox) => BoundingBox( xMin: bbox["xmin"], yMin: bbox["ymin"], xMax: bbox["xmax"], yMax: bbox["ymax"], confidence: bbox["confidence"], name: bbox["name"], ))); } else { throw Exception('Failed to detect objects'); } } Future<void> getImage(ImageSource source) async { setState(() { _loading = true; }); final pickedFile = await picker.pickImage(source: source, maxWidth: 340, maxHeight: 340); if (pickedFile != null) { setState(() { _image = File(pickedFile.path); }); final bboxes = await detectObjects(_image!); setState(() { _boundingBoxes = bboxes; _loading = false; }); } else { setState(() { _loading = false; }); } } @override Widget build(BuildContext context) { return Scaffold( appBar: AppBar( title: const Text('Object Detection Using Flask Rest Api'), ), body: Center( child: SingleChildScrollView( child: Column( children: [ _image == null ? const Text('No image selected.') : Stack( children: [ Image.file(_image!), ..._boundingBoxes.asMap().entries.map((entry) { final index = entry.key; final bbox = entry.value; final xMin = bbox.xMin; final yMin = bbox.yMin; final xMax = bbox.xMax; final yMax = bbox.yMax; final confidence = bbox.confidence; final name = bbox.name; final left = xMin; final top = yMin; final width = xMax - xMin; final height = yMax - yMin; Color color; if (index % 3 == 0) { color = Colors.green; } else if (index % 3 == 1) { color = Colors.yellow; } else { color = Colors.red; } return Positioned( left: left, top: top, width: width, height: height, child: Container( decoration: BoxDecoration( border: Border.all( color: color, width: 2.0, ), borderRadius: BorderRadius.circular(20), ), child: Text( "$name ${(confidence * 100).toStringAsFixed(0)}%", textAlign: TextAlign.center, style: TextStyle( color: color, fontSize: 12.0, fontWeight: FontWeight.bold, shadows: const [ Shadow( color: Colors.black, offset: Offset(1, 1), blurRadius: 2, ) ], ), ), ), ); }).toList(), ], ), ElevatedButton( onPressed: () => getImage(ImageSource.camera), child: const Text("Take a Picture"), ), ElevatedButton( onPressed: () => getImage(ImageSource.gallery), child: const Text("Choose from Gallery"), ), const SizedBox(height: 10), _loading ? const CircularProgressIndicator( color: Colors.blue, ) : const SizedBox(), ], ), ), )); } } 

import 'dart:ui'; import 'package:flutter/material.dart'; class BoxPainter extends CustomPainter { final dynamic predictions; BoxPainter(this.predictions); @override void paint(Canvas canvas, Size size) { final width = size.width; final height = size.height; final colors = [ Colors.red, Colors.green, Colors.blue, Colors.yellow, Colors.orange, Colors.purple, Colors.pink, ]; if (predictions != null) { for (var i = 0; i < predictions.length; i++) { final prediction = predictions[i]; final bbox = prediction['bbox']; final left = bbox['xmin'].toDouble(); final top = bbox['ymin'].toDouble(); final right = bbox['xmax'].toDouble(); final bottom = bbox['ymax'].toDouble(); final rect = Rect.fromLTWH( left / 640 * width, top / 640 * height, (right - left) / 640 * width, (bottom - top) / 640 * height, ); final paint = Paint() ..color = colors[i % colors.length] ..style = PaintingStyle.stroke ..strokeWidth = 2.0; final labelPaint = Paint() ..color = colors[i % colors.length] ..style = PaintingStyle.fill ..strokeWidth = 2.0; canvas.drawRect(rect, paint); final label = '${prediction['name']} (${prediction['confidence']})'; final labelOffset = Offset( left / 640 * width, top / 480 * height - 20, ); canvas.drawRect( Rect.fromPoints( labelOffset, Offset( labelOffset.dx + label.length * 8, labelOffset.dy + 20, ), ), labelPaint, ); final textStyle = TextStyle( color: Colors.white, fontSize: 14.0, ); final textSpan = TextSpan( text: label, style: textStyle, ); final textPainter = TextPainter( text: textSpan, textDirection: TextDirection.ltr, ); textPainter.layout( minWidth: 0, maxWidth: size.width, ); textPainter.paint( canvas, Offset( labelOffset.dx + 4, labelOffset.dy + 2, ), ); } } } @override bool shouldRepaint(BoxPainter oldDelegate) => false; }