使用Django进行模型分类预测,将上传图片利用js显示上传的图片,写个这样的代码
时间: 2024-03-23 18:37:37 浏览: 120
好的,以下是一个基于Django的图片分类预测应用示例,包含使用JavaScript显示上传的图片:
1. 创建Django项目并创建一个app,命名为`classifier`
2. 安装必要的Python包
```
pip install tensorflow==2.6.0 tensorflow_hub==0.12.0 Pillow==8.3.1 django==3.2.7
```
3. 在`classifier` app中创建以下文件和文件夹:
```
classifier/
templates/
index.html
models/
model.h5
static/
js/
main.js
views.py
```
4. 将训练好的模型文件保存到`models`文件夹中
5. 在`views.py`中添加以下代码:
```python
from django.shortcuts import render
from django.http import JsonResponse
import tensorflow as tf
import tensorflow_hub as hub
from PIL import Image
import numpy as np
def index(request):
return render(request, 'index.html')
def predict(request):
# 获取上传的图片文件
img_file = request.FILES['img']
# 打开图片并使用Pillow库进行预处理
img = Image.open(img_file)
img = img.resize((224, 224))
img_array = np.array(img) / 255.0
img_array = img_array.reshape(1, 224, 224, 3)
# 加载模型并进行预测
model = tf.keras.models.load_model('classifier/models/model.h5', custom_objects={'KerasLayer': hub.KerasLayer})
predictions = model.predict(img_array)
# 将预测结果转换为标签
labels = ['cat', 'dog']
prediction_label = labels[np.argmax(predictions)]
# 返回JSON格式的预测结果
response_data = {'prediction': prediction_label}
return JsonResponse(response_data)
```
6. 在`templates`文件夹中创建`index.html`文件,并添加以下代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Image Classifier</title>
</head>
<body>
<h1>Image Classifier</h1>
<form method="post" enctype="multipart/form-data" id="upload-form">
{% csrf_token %}
<input type="file" name="img" accept="image/*" onchange="previewImage(event)">
<img id="preview" src="" alt="Preview">
<input type="button" value="Predict" onclick="predict()">
</form>
<div id="result"></div>
<script src="{% static 'js/main.js' %}"></script>
</body>
</html>
```
7. 在`static/js`文件夹中创建`main.js`文件,并添加以下代码:
```javascript
function previewImage(event) {
var preview = document.getElementById('preview');
preview.src = URL.createObjectURL(event.target.files[0]);
preview.style.display = 'block';
}
function predict() {
var form_data = new FormData($('#upload-form')[0]);
$.ajax({
type: 'POST',
url: '/predict/',
data: form_data,
processData: false,
contentType: false,
success: function (data) {
$('#result').text('Prediction: ' + data.prediction);
},
error: function (error) {
console.log(error);
}
});
}
```
8. 运行Django应用程序并访问`http://localhost:8000/`,上传一张猫或狗的图片并预览,然后点击“预测”按钮,应用程序将返回预测结果。
阅读全文