I have a react-native app where I scan the qr code using expo and takes images from my mobile phone, this image is rendered in the app and send it to a flask endpoint, the data is sent but gives an error in the return of the backend function.
React-native:
const sendImageToServer = async (base64Image) => {
const url = 'http://127.0.0.1:5000/predict';
try {
console.log("Sending image to server...");
const response = await fetch(url, {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ image: base64Image })
});
const jsonResponse = await response.json();
console.log("Response from server: ", jsonResponse);
} catch (error) {
console.error("Error sending image to server: ", error);
}
};
const captureFrame = async () => {
if (cameraRef.current) {
const photo = await cameraRef.current.takePictureAsync({
quality: 0.5, // Reduce quality to decrease image size and increase upload speed
base64: true,
});
setCurrentFrame(photo.uri); // Update the current frame
sendImageToServer(photo.base64);
}
};
and flask code is:
from flask import Flask, request, jsonify, render_template
import tensorflow as tf
import numpy as np
from PIL import Image
import io
from ultralytics import YOLO
app = Flask(__name__)
# Load your model (adjust path and model loading as necessary)
model = YOLO('D:/CMP Year two/second semester/Advanced micro/Project/detector/dirt-debris/dirt-debris.pt')
@app.route('/predict', methods=['POST'])
def predict():
title = request.json['title']
body = request.json['body']
print(body)
return jsonify({"methods" : "1"})
if __name__ == '__main__':
app.run(debug=True, host='127.0.0.1', port=5000)
I actually want the flask file to process the image and make classification and then send results back.
Any ideas?