我的应用程序接受用户输入(params.json和图像(，使用机器学习来确定输出，我希望它能够在前端显示输出。输出可以是字符串、浮点或json形式——只要它能够到达前端，我就可以更改它的格式。
唯一的问题是，到目前为止，我尝试过的方法都没有奏效。
这是我的代码：
index.html
<html>
<head>
<title>Dermagraph Upload Prototype</title>
<link rel="preconnect" href="https://fonts.googleapis.com" />
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
<link
href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Rubik:wght@400;500;600;700&display=swap"
rel="stylesheet"
/>
<link rel="stylesheet" href="static/styles/style.css" />
</head>
<body>
<div class="main-container">
<h1>Dermagraph Upload Prototype</h1>
<h1 id="demo">p</h1>
<div id="app"></div>
<form id="upload" onsubmit="return false">
<input type="file" id="file" accept="image/*" />
<div class="buttons">
<button class="btn btn--full">Upload</button>
<!-- <button class="btn btn--full">Next</button> -->
</div>
</form>
</div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/FileSaver.js/2.0.0/FileSaver.min.js"></script>
<script src="static/script.js"></script>
</body>
</html>
script.js注意：params目前只是一个占位符，但稍后我希望它们是根据用户输入生成的。仅仅将图像发送到Flask是不够的。
// Get the form and file field
let form = document.querySelector("#upload");
let file = document.querySelector("#file");
let app = document.querySelector("#app");
function logFile(event) {
let str = event.target.result;
let img = document.createElement("img");
img.src = str;
app.innerHTML = "";
app.append(img);
let req = new XMLHttpRequest();
let formData = new FormData();
let params = {
image_name: ["ISIC_0251455"],
patient_id: ["IP_3579794"],
sex: ["male"],
age_approx: [50.0],
anatom_site_general_challenge: ["torso"],
width: [6000],
height: [4000],
};
formData.append("params", JSON.stringify(params));
formData.append("photo", str);
req.open("POST", "/");
req.send(formData);
}
function handleSubmit(event) {
event.preventDefault();
// If there's no file, do nothing
if (!file.value.length) return;
// Create a new FileReader() object
let reader = new FileReader();
// Setup the callback event to run when the file is read
reader.onload = logFile;
// Read the file
reader.readAsDataURL(file.files[0]);
console.log("read");
}
// Listen for submit events
form.addEventListener("submit", handleSubmit);
服务器.py
app = Flask(__name__)
@app.route('/', methods=['POST', 'GET'])
def predict():
if request.method == 'POST':
file = request.form
params = file['params']
params = json.loads(params)
photo = str(file['photo'])
photo = urllib.request.urlopen(photo).read()
photo = base64.b64encode(photo)
embed = get_prediction(params, photo)
print(embed)
return render_template('index.html')
else:
return render_template('index.html')
if __name__ == '__main__':
app.run(host='0.0.0.0', debug=True)
我认为我的script.js文件中有一些东西阻止了其他解决方案的工作。例如：
将JSON数据从Flask传递到JavaScript
我得到TypeError: Undefined is not JSON serializable
当我尝试设置重定向时，它们根本不起任何作用。
理想情况下，我希望输出可以显示在与输入相同的页面上，因此可能可以将内容的元素设置为代码的输出。
你对我该怎么做有什么想法吗？非常感谢！
通过接收JS:中的响应来解决
@app.route('/predict/input', methods=['POST', 'GET'])
def predict():
if request.method == 'POST':
file = request.form
params = file['params']
params = json.loads(params)
photo = str(file['photo'])
photo = urllib.request.urlopen(photo).read()
photo = base64.b64encode(photo)
embed = get_prediction(params, photo)
url = 'http://127.0.0.1:5000/' + str(embed['prob'])
return url
Javascript：
req.onreadystatechange = function () {
if (req.readyState == XMLHttpRequest.DONE) {
resp = req.responseText;
window.location.href = resp;
}
};
req.open("POST", "/predict/input");
req.send(formData);