Я занимаюсь разработкой простого веб-приложения, которое должно загружать изображение из json, а затем делать некоторые прогнозы.Вот мой код в html и python:
<!DOCTYPE html>
<html>
<head>
<title> Predict app </title>
<style>
* {
font-size:30px;
}
</style>
</head>
<body>
<input id="image-selector" type="file">
<button id="predict-button"> Predict</button>
<p style="font-weight:bold">Predictions</p>
<p> Jablko <span id="apple-prediction"></span></p>
<p> Banan <span id="banana-prediction"></span></p>
<p> Marchewka <span id="carrot-prediction"></span></p>
<p> Ogorek <span id="cucumber-prediction"></span></p>
<p> Cytryna <span id="lemon-prediction"></span></p>
<p> Pomarancza <span id="orange-prediction"></span></p>
<p> Gruszka <span id="pear-prediction"></span></p>
<p> Papryka <span id="peper-prediction"></span></p>
<p> Ziemniak <span id="potato-prediction"></span></p>
<p> Pomidor <span id="tomato-prediction"></span></p>
<img id="selected-image" src=""/>
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script>
let base64Image;
$("#image-selector").change(function(){
let reader = new FileReader();
reader.onload = function(e){
let dataURL = reader.result;
$('#selected-image').attr("src", dataURL);
base64Image = dataURL.replace("data:image/png;base64,", "");
console.log(base64Image);
}
reader.readAsDataURL($("#image-selector")[0].files[0]);
$("#apple-prediction").text("");
$("#banana-prediction").text("");
$("#carrot-prediction").text("");
$("#cucumber-prediction").text("");
$("#lemon-prediction").text("");
$("#orange-prediction").text("");
$("#pear-prediction").text("");
$("#peper-prediction").text("");
$("#potato-prediction").text("");
$("#tomato-prediction").text("");
});
$("#predict-button").click(function(event){
let message = {
image:base64Image
}
console.log(message);
$.post("http://192.168.8.102:5000/predict", JSON.stringify(message), function(response){
$("#apple-prediction").text(response.prediction.apple.toFixed(6));
$("#banana-prediction").text(response.prediction.banana.toFixed(6));
$("#carrot-prediction").text(response.prediction.carrot.toFixed(6));
$("#cucumber-prediction").text(response.prediction.cucumber.toFixed(6));
$("#lemon-prediction").text(response.prediction.lemon.toFixed(6));
$("#orange-prediction").text(response.prediction.orange.toFixed(6));
$("#pear-prediction").text(response.prediction.pear.toFixed(6));
$("#peper-prediction").text(response.prediction.pepper.toFixed(6));
$("#potato-prediction").text(response.prediction.potato.toFixed(6));
$("#tomato-prediction").text(response.prediction.tomato.toFixed(6));
console.log(response);
});
});
</script>
</body>
</html>
import base64
from PIL import Image
import numpy as np
import io
import keras
#from keras import load_weights
import tensorflow as tf
from keras.models import load_model
import keras.preprocessing.image
from flask import request, jsonify, Flask
from tensorflow.keras.models import load_model
app = Flask(__name__)
def get_model():
global model
model=tf.keras.models.load_model('fc_model1.h5')
model.load_weights('model_grocery.h5')
graph = tf.get_default_graph
print("** Model loaded!")
def preprocess_image(image, target_size):
if image.mode != "RGB":
image = image.convert("RGB")
image = image.resize(target_size)
image = keras.img_to_array(image)
image = np.expand_dims(image, axis=0)
return image
print("**Loading model")
get_model()
@app.route("/predict", methods=["POST"])
def predict():
message = request.get_json(force=True)
encoded = message['image']
decoded = base64.b64decode(encoded)
image = Image.open(io.BytesIO(decoded))
processed_image = preprocess_image(image, target_size=(200, 200))
prediction = model.predict(processed_image).tolist()
response = {
'prediction': {
'apple': prediction[0][0],
'banana': prediction[0][1],
'lemon': prediction[0][2],
'orange': prediction[0][3],
'pear': prediction[0][4],
'carrot': prediction[0][5],
'cucumber': prediction[0][6],
'pepper': prediction[0][7],
'potato': prediction[0][8],
'tomato': prediction[0][9],
}
}
return jsonify(response)
Однако при открытии изображения я получаю сообщение об ошибке:
OSError: cannot identify image file <_io.BytesIO object at 0x0000023B89E880A0>.
Я использую флешку, и моя модель уже на сервере.Я пытался открыть изображение другими способами, но ничего не помогло.Есть ли способ ее решить?