我正在尝试创建我的 TensorFlow API 服务器，我想从 ajax 向烧瓶服务器发送一个请求，该服务器将图像发送到 Tensorflow 服务器，当我发送图像时，TensorFlow 服务器已准备就绪并且可以正常工作我在从烧瓶到 TensorFlow API 的文件夹中得到了一个真实的结果， 我的问题是当我在 javascript 中使用导航器打开凸轮，然后从该导航器获取图像并将其作为数组发送到烧瓶时，我得到了错误的预测 这是我的烧瓶代码
import base64
import json
from io import BytesIO
import numpy as np
import requests
from flask import Flask, request, jsonify
from keras.applications import inception_v3
from keras.preprocessing import image
from flask_cors import CORS
from PIL import Image
from PIL import Image, ImageOps
# from flask_cors import CORS
app = Flask(__name__)
CORS(app)
# Uncomment this line if you are making a Cross domain request
# CORS(app)
# Testing URL
@app.route('/hello/', methods=['GET', 'POST'])
def hello_world():
return 'Hello, World!'
@app.route('/imageclassifier/predict/', methods=['POST'])
def image_classifier():
class_names=['IDCard','another']
newimage=request.json['signature_name']
np.set_printoptions(suppress=True)
data = np.ndarray(shape=(1, 224, 224, 3), dtype=np.float32)
size = (224, 224)
image = Image.open('/home/muhammed/Pictures/Webcam/2021-02-02-172429.jpg')
image = ImageOps.fit(image, size, Image.ANTIALIAS)
image = ImageOps.fit(image, size, Image.ANTIALIAS)
image_array = np.asarray(image)
# newimage_array = np.asarray(newimage)
newimagenormalized_array=newimage
#(newimage.astype(np.float32) / 127.0) - 1
# newnormalized_image_array=np.expand_dims(newimage, 0)
normalized_image_array = (image_array.astype(np.float32) / 127.0) - 1
normalized_image_array=np.expand_dims(normalized_image_array, 0)
# x=x.reshape
data = json.dumps({"signature_name": "serving_default", "instances": normalized_image_array.tolist()})
# data = json.dumps({"signature_name": "serving_default", "instances": newimage})
#print('Data: {} ... {}'.format(data[:50], data[len(data)-52:]))
headers = {"content-type": "application/json"}
json_response = requests.post('http://localhost:9000/v1/models/saved_model:predict',
data=data, headers=headers)
predictions = json.loads(json_response.text)['predictions']
print(predictions)
print(np.argmax(predictions[0]))
print(class_names[np.argmax(predictions[0])])
return(class_names[np.argmax(predictions[0])])
正如我所说，当我使用文件夹中的静态图像时，我得到了真实的结果，我注意到 png 图像给了我错误或错误的预测。 这是我的 html 边代码
<html>
<header>
</header>
<body>
<video id="video" autoplay width="500" height="600" style=" "></video>
<canvas id="canvas" width="500" height="600" style="border:1px solid #FF0000;" ></canvas>
<button id="webcamButton">Button</button>
<button id="detect">detect</button>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"> </script>
<script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<script>
$('body').on('click', '#webcamButton', function (e) {
e.preventDefault();
getMedia();
});
$('body').on('click', '#detect', function (e) {
e.preventDefault();
detectObjects();
});
async function getMedia() {
var constraints = { video: { width: 500, height: 600 } };
navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
localstream = mediaStream;
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(err) { console.log(err.name + ": " + err.message); });
}
function startVideo() {
var constraints= { video: {width: 1280, height: 720} }
getMedia(constraints);
// let localstram= navigator.getUserMedia(
// { video: {} },
// stream => video.srcObject = stream,
// err => console.error(err)
// )
// $("#cam_modal").modal('show')
}
const urlHost = {
urlTF: 'http://localhost:5000/imageclassifier/predict/',
//'http://localhost:9000/',
//'http://localhost:5000/imageclassifier/predict/',
model: 'saved_model'
}
async function getMedia(constraints) {
var constraints = { video: { width: 1280, height: 720 } };
navigator.mediaDevices.getUserMedia(constraints)
.then(function(mediaStream) {
localstream = mediaStream;
video.srcObject = mediaStream;
video.onloadedmetadata = function(e) {
video.play();
};
})
.catch(function(err) { console.log(err.name + ": " + err.message); });
}
async function detectObjects() {
/* $.ajax({
url: url,
type: 'POST',
contentType: "application/json",
data:data,
success: function (data) {
console.log(data);
},
error: function (data) {
console.log("Error: " + data);
}
});
*/
// if (this.state.videoStreaming) {
let imageTensor = await tf.browser.fromPixels(document.getElementById('video'))
let imageTensorArr = imageTensor.arraySync()
let image=[imageTensorArr];
let data = {"signature_name": "serving_default", "instances": [imageTensorArr]}
let headers = {"content-type": "application/json"}
let url = urlHost.urlTF //+ "v1/models/" + urlHost.model + ":predict"
console.log(url)
const canvas = document.getElementById("canvas");
let ctx = canvas.getContext('2d');
ctx.drawImage(video, 0, 0, canvas.width, canvas.height);
let new_tensor = tf.browser.fromPixels(canvas);
await axios.request ({
url: url,
method: 'post',
data: {'signature_name':image},
headers: headers
})
.then((response) => {
let predictions = response.data["predictions"][0]
this.showDetections(predictions["detection_boxes"], predictions["num_detections"], predictions["detection_classes"], predictions["detection_scores"])
})
.catch((error) => {
console.log(error)
})
requestAnimationFrame(() => {
this.detectObjects()
})
// }
}
</script>
</html>
对于凸轮预测，我每次都获得 IDcard，即使不是。 但对于图像预测，它给了我真实的结果 我是否错过了一些事情 这是我正在发生的事情的图表
FrontEnd(Html-javascript)========>flask APP (5000 port)========>tensorflow server(9000) 会返回这样的结果 张量流服务器====>烧瓶======>ajax