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

news2025/1/12 13:13:01

文章目录

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/1959502.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

最靠谱的搭建方式-ESP32入门搭建Arduino开发环境基于mac系统

ESP32入门搭建Arduino开发环境基于mac系统 1.概述 ESP32开发版作为物联网开发非常的方便&#xff0c;不过在入门时候搭建Arduino开发环境比较麻烦&#xff0c;因为Arduino在下载ESP32开发环境时总是失败&#xff0c;因此不得不采用手动安装环境方式。 这篇文章主要介绍mac系统…

Java 并发编程实战权威指南(电子版教程)

前言 Java并发编程主要涉及多线程编程&#xff0c;通过创建多个线程来并发执行任务&#xff0c;从而提高程序的执行效率和响应能力。Java提供了多种机制和技术来实现并发编程&#xff0c;包括进程和线程的管理、同步机制、高级并发工具以及最佳实践。 一、下载地址 下载地址…

hadoop学习笔记3-yarn

4.YARN yarn本质上是一个负责管理资源节点、调度资源节点的资源调度平台&#xff0c;负责为运算程序提供服务器计算资源&#xff0c;把任务调度到合适的节点上执行 4.1yarn架构 yarn 主要由ResourceManager、NodeManager、applicationmaster组件构成 yarn将资源管理和应用程…

PowerDNS架构解析与安装部署指南

1、背景介绍 目前公司使用PowerDNS进行DNS管理&#xff0c;但由于采用的是单节点架构&#xff0c;存在不可用的风险。为提升系统的稳定性和可靠性&#xff0c;我们计划对现有架构进行重构。通过引入高可用性设计&#xff0c;我们将优化系统架构&#xff0c;使其能够在故障情况…

设计模式 之 —— 抽象工厂模式

目录 什么是抽象工厂模式&#xff1f; 定义 特点 抽象工厂模式&#xff08;java代码示例&#xff09; 首先定义第一个接口 实现第一个接口的类 定义第二个接口 实现第二个接口的类 * 创建抽象工厂类 创建扩展了 AbstractFactory 的工厂类 饮料工厂 食物工厂 * 创建一个…

非科班出身的你,如何转行web安全工程师?零基础入门到精通,收藏这一篇就够了

想从其他行业转行到算法工程师的人&#xff0c;无外乎以下几个原因&#xff1a; 现在工资太低 工作没有前景 对现在的工作没有热情 对web安全工程师很感兴趣 那么&#xff0c;转行web安全工程师&#xff0c;你需要掌握哪些技能呢&#xff1f; ​ 为了帮助大家更好的学习网络…

第100+18步 ChatGPT学习:R实现SVM分类

基于R 4.2.2版本演示 一、写在前面 有不少大佬问做机器学习分类能不能用R语言&#xff0c;不想学Python咯。 答曰&#xff1a;可&#xff01;用GPT或者Kimi转一下就得了呗。 加上最近也没啥内容写了&#xff0c;就帮各位搬运一下吧。 二、R代码实现SVM分类 &#xff08;1&a…

Docker部署nacos...用户名密码错误

前提 镜像选择v2.3.0版本&#xff0c;因为最新的没拉下来用的别的地方save load的镜像。 官方示例 官方文档 数据库脚本&#xff0c;直接去数据库新建数据库nacos吧&#xff0c;执行脚本&#xff0c;执行完成后&#xff0c;发现只有建表语句&#xff0c;查询得知&#xff0c…

springboot+Activiti7整合实践 (九) 网关

系列文章目录 第一章 springbootActiviti7整合实践 (一) 第二章 springbootActiviti7整合实践 (二) 模型定义 第三章 springbootActiviti7整合实践 (三) 流程定义 第四章 springbootActiviti7整合实践 (四) 分配规则 第五章 springbootActiviti7整合实践 (五) 发布流程 第…

股票预测模型中注意力多层Attention RNN LSTM 的应用

全文链接&#xff1a;https://tecdat.cn/?p37152 原文出处&#xff1a;拓端数据部落公众号 Attention 机制是一种在神经网络处理序列数据时极为关键的技术&#xff0c;它赋予了模型“聚焦”能力&#xff0c;能够自动评估输入序列中各部分的重要性。通过为序列中的每个元素分…

一文读懂CST电磁仿软件的TLM算法原理和历史背景

这期我们免公式地介绍一下TLM原理。TLM&#xff08;Transmission Line Method&#xff09;是传输线矩阵算法&#xff0c;基于Huygens的波传播模型的三维全波电磁算法&#xff0c;注意是full wave哦&#xff01; 什么是Huygens原理&#xff1f; 惠更斯原理能准确计算波的传播。…

三大旗舰实力,奇瑞风云T10全球上市,售价18.99万元起

旗舰之上&#xff0c;10力超群&#xff01;7月25日&#xff0c;超长续航旗舰电混SUV——风云T10于弥勒全球上市。基于全球标准及全球验证体系打造的风云T10&#xff0c;凭借旗舰级的性能、安全、空间三大产品价值&#xff0c;树立了新能源时代的新标杆。新车共推出3款车型&…

目标检测 YOLOv5-7.0 详细调试自制数据集实战

目标检测 YOLOv5-7.0 详细调试&自制数据集实战 一、项目介绍及环境配置&#xff08;一&#xff09;项目解读&#xff08;二&#xff09;版本选择&#xff08;三&#xff09;环境配置 二、如何利用YOLOv5进行预测&#xff08;detect.py&#xff09;&#xff08;一&#xff0…

DOS攻击实验

实验背景 Dos 攻击是指故意的攻击网络协议实现的缺陷或直接通过野蛮手段&#xff0c;残忍地耗尽被攻击对象的资源&#xff0c;目的是让目标计算机或网络无法提供正常的服务或资源访问&#xff0c;使目标系统服务系统停止响应甚至崩溃。 实验设备 一个网络 net:cloud0 一台模…

如何在go里使用jwt(包含示例)

什么是JWT JWT就是一种基于Token的轻量级认证模式&#xff0c;服务端认证通过后&#xff0c;会生成一个JSON对象&#xff0c;经过签名后得到一个Token&#xff08;令牌&#xff09;再发回给用户&#xff0c;用户后续请求只需要带上这个Token&#xff0c;服务端解密之后就能获取…

关于安装yarn后pnpm无法使用的问题

踩坑经过 因为公司项目变更需要&#xff0c;需要切换到yarn包管理工具&#xff0c;师父帮我调整了node版本&#xff0c;然后全局安装了yarn&#xff1a;npm install -g yarn 然后在项目里面用了yarn install然后用yarn dev语句跑起来了新项目。但是现在老项目有bug&#xff0c…

基于JSP、java、Tomcat三者的项目实战--校园交易网(2)登录,注册功能实现

技术支持&#xff1a;JAVA、JSP 服务器&#xff1a;TOMCAT 7.0.86 编程软件&#xff1a;IntelliJ IDEA 2021.1.3 x64 OK&#xff0c;那我们进入正题&#xff0c;随着前面一篇博客的尚未完结基于JSP、java、Tomcat三者的项目实战--校园交易网&#xff08;2&#xff09;登录功能…

2024杭电多校(4)1012. 寻找宝藏 【扫描线、树状数组二维偏序】

寻找宝藏 题意 思路 如果没有矩形陷阱区域的话&#xff0c;设 f i f_i fi​ 表示从 ( 0 , 0 ) (0, 0) (0,0) 到 ( i , p i ) (i, p_i) (i,pi​) 的最大收益&#xff0c;那么可以很容易通过扫描线 d p dp dp 求出&#xff1a; f i v i max ⁡ j < i ∧ p j < p …

颜色识别基于高斯混合模型(GMM)的查找表分类器(LUT)

文章目录 create_class_gmm 创建高斯混合模型&#xff08;GMM&#xff09;以进行分类任务add_samples_image_class_gmm 提取训练样本&#xff0c;并将其添加到高斯混合模型 (GMM) 的训练数据集中train_class_gmm 训练一个高斯混合模型 (GMM)clear_class_gmm 清除模型create_cla…

车载客流统计大揭秘——双目客流统计

客流统计大揭秘——双目客流统计 随着科技的飞速发展和商业竞争的加剧&#xff0c;客流统计已成为商业运营中不可或缺的一环。在众多客流统计技术中&#xff0c;双目客流统计以其高精度和高效率逐渐受到广大商家的青睐。本文将带您一探双目客流统计的奥秘。 一、什么是双目客流…