人工智能计算机视觉系列—构建你的图像标签管理系统：使用Flask和SQLite实现前后端应用

学步_技术

已于 2024-07-30 08:48:34 修改

阅读量412

点赞数 10

分类专栏：人工智能自动驾驶环境配置文章标签： flask sqlite python 人工智能计算机视觉自动驾驶

于 2024-07-30 08:47:27 首次发布

本文链接：https://blog.csdn.net/u013889591/article/details/140786852

版权

人工智能同时被 3 个专栏收录

28 篇文章 0 订阅

订阅专栏

自动驾驶

26 篇文章 0 订阅

订阅专栏

环境配置

8 篇文章 0 订阅

订阅专栏

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构建一个图像展示和标签筛选的前后端应用。这个项目可以作为进一步开发的基础，加入更多的功能和优化，以满足具体的需求。希望本文对你的开发有所帮助。
在这里插入图片描述

学步_技术

关注

10
点赞
踩
6

收藏

觉得还不错? 一键收藏
打赏
0
评论
人工智能计算机视觉系列—构建你的图像标签管理系统：使用Flask和SQLite实现前后端应用

前端：使用简单的HTML页面展示图像和标签，并提供导航和过滤功能。后端：使用Flask框架和SQLite数据库存储和管理图像及其标签。在页面上显示单张图像，具备上一张和下一张浏览功能。显示每张图像的标签，并且可以通过标签选择要显示的图像类别。这些标签包括位置偏差类别（小、中、大）和场景（市区、高速）。通过这个简单的示例项目，我们展示了如何使用Flask和SQLite构建一个图像展示和标签筛选的前后端应用。这个项目可以作为进一步开发的基础，加入更多的功能和优化，以满足具体的需求。
复制链接

扫一扫