文章目录
- 1. 项目背景
- 2. 方案概述
- 3. 环境部署
- 4. 具体实现
- 5. 运行步骤
- 6. 总结
1. 项目背景
在机器学习和计算机视觉的开发过程中,我们经常需要处理大量的图像及其标签信息。一个直观、便捷的图像和标签展示工具可以极大地提高开发效率。本文将介绍如何使用Flask框架和SQLite数据库构建一个简单的前后端应用,能够展示图像及其标签,并提供按标签过滤图像的功能。
资源下载:计算机视觉-Flask框架-SQLite数据库-图像展示与筛选-开发示例。
2. 方案概述
我们将实现一个包含前后端的应用程序:
- 前端:使用简单的HTML页面展示图像和标签,并提供导航和过滤功能。
- 后端:使用Flask框架和SQLite数据库存储和管理图像及其标签。
具体功能包括:
- 在页面上显示单张图像,具备上一张和下一张浏览功能。
- 显示每张图像的标签,并且可以通过标签选择要显示的图像类别。这些标签包括位置偏差类别(小、中、大)和场景(市区、高速)。
3. 环境部署
安装所需的Python库:
pip install flask flask_sqlalchemy
创建项目文件结构:
my_project/
├── app.py
├── database_setup.py
├── static/
│ └── images/
│ ├── img_1.jpg
│ ├── img_2.jpg
│ └── img_3.jpg
├── templates/
│ └── index.html
└── database.db
4. 具体实现
1)数据库设置
创建database_setup.py,设置数据库并填充示例数据:
from flask import Flask
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///database.db'
db = SQLAlchemy(app)
class Image(db.Model):
id = db.Column(db.Integer, primary_key=True)
image_path = db.Column(db.String(100), nullable=False)
position_deviation = db.Column(db.String(10), nullable=False)
scene = db.Column(db.String(10), nullable=False)
def setup_database():
with app.app_context():
db.create_all()
images = [
Image(image_path='static/images/img_1.jpg', position_deviation='小', scene='市区'),
Image(image_path='static/images/img_2.jpg', position_deviation='中', scene='高速'),
Image(image_path='static/images/img_3.jpg', position_deviation='大', scene='高速')
]
db.session.bulk_save_objects(images)
db.session.commit()
if __name__ == '__main__':
setup_database()
运行此脚本以创建并填充数据库:
复制代码
python database_setup.py
2)前端和后端实现
创建app.py,实现Flask后端逻辑:
from flask import Flask, render_template, request
from flask_sqlalchemy import SQLAlchemy
app = Flask(__name__)
app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///database.db'
db = SQLAlchemy(app)
class Image(db.Model):
id = db.Column(db.Integer, primary_key=True)
image_path = db.Column(db.String(100), nullable=False)
position_deviation = db.Column(db.String(10), nullable=False)
scene = db.Column(db.String(10), nullable=False)
@app.route('/')
def index():
selected_deviation = request.args.get('deviation')
selected_scene = request.args.get('scene')
if selected_deviation and selected_scene:
images = Image.query.filter_by(position_deviation=selected_deviation, scene=selected_scene).all()
elif selected_deviation:
images = Image.query.filter_by(position_deviation=selected_deviation).all()
elif selected_scene:
images = Image.query.filter_by(scene=selected_scene).all()
else:
images = Image.query.all()
return render_template('index.html', images=images)
if __name__ == '__main__':
app.run(debug=True)
创建HTML模板templates/index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Image Viewer</title>
</head>
<body>
<h1>Image Viewer</h1>
<form method="get" action="/">
<label for="deviation">位置偏差类别:</label>
<select name="deviation" id="deviation">
<option value="">全部</option>
<option value="小">小</option>
<option value="中">中</option>
<option value="大">大</option>
</select>
<label for="scene">场景:</label>
<select name="scene" id="scene">
<option value="">全部</option>
<option value="市区">市区</option>
<option value="高速">高速</option>
</select>
<button type="submit">筛选</button>
</form>
{% for image in images %}
<div>
<img src="{{ image.image_path }}" alt="Image" style="width:300px;height:200px;">
<p>位置偏差: {{ image.position_deviation }}</p>
<p>场景: {{ image.scene }}</p>
</div>
{% endfor %}
</body>
</html>
5. 运行步骤
确保已安装Flask和Flask-SQLAlchemy库:
pip install flask flask_sqlalchemy
运行数据库设置脚本:
python database_setup.py
启动Flask应用:
python app.py
打开浏览器,访问http://127.0.0.1:5000/查看应用。
6. 总结
通过这个简单的示例项目,我们展示了如何使用Flask和SQLite构建一个图像展示和标签筛选的前后端应用。这个项目可以作为进一步开发的基础,加入更多的功能和优化,以满足具体的需求。希望本文对你的开发有所帮助。