项目实战 ---- 商用落地视频搜索系统(6)---UI 结构及与service互动

news/2024/9/16 22:56:08/ 标签: ui, flask, python, vector db, 人工智能, milvus

目录

背景

技术问题

描述

Jinja2

概述

特性

问题解决手段

问题1

问题2

问题3

代码实现

前端代码

python%E4%BB%A3%E7%A0%81-toc" style="margin-left:40px;">python代码

解释

页面展示

home

上传视频

搜索视频


背景

通过1-5 我们已经搭建好完整的后台功能,service,及准备与UI 交互的路由及接口。下面就是UI 部分的搭建。UI 部分,这次我选择了Flask作为搭建载体,他的使用非常方便,router清晰,调用也非常简洁。不再需要tomcat等单独的container运行,非常轻量化。重点是他的使用理念非常契合我的想法,我们重点看看怎么使用Flask搭建UI 并完成与后端service的互动。

技术问题

描述

html,css,js 的coding 这已经最基础的了,这里就直接跳过了。这些东西网上一搜一大堆,不是今天讨论的重点。我们今天主要聚焦在UI的 Flask 使用及搭建上。你首先需要解决两个问题:

1)后端的python 如何渲染网页及加载静态资源

2)网页中的数据如何传给后端

3)后端分析好的数据如何传给前端展示

Jinja2

Jinja2是一个基于Python的模板引擎,它以其简洁的语法、强大的功能和高度可定制性而受到广泛欢迎。以下是对Jinja2的详细介绍:


http://www.ppmy.cn/news/1522128.html

相关文章

统计学习方法与实战——统计学习方法概论

统计学习方法概论 文章目录 统计学习方法概论前言章节目录导读 实现统计学习方法的步骤统计学习方法三要素模型模型是什么? 策略损失函数与风险函数常用损失函数ERM与SRM 算法 模型评估与模型选择过拟合与模型选择 正则化与交叉验证泛化能力生成模型与判别模型生成方法判别方法…

Spark的Web界面

http://localhost:4040/jobs/ 在顶部导航栏上,可以点击以下选项来查看不同类型的Spark应用信息: Jobs - 此视图将列出所有已提交的作业,并提供每个作业的详细信息,如作业ID、名称、开始时间、结束时间等。Stages - 此视图可以查…

线性因子模型 - 引言篇

序言 在当今数据爆炸的时代,如何从海量、高维的数据中提炼出有价值的信息,已成为机器学习乃至人工智能领域的重要课题。深度学习,作为这一领域的璀璨明珠,凭借其强大的特征学习与表示能力,在图像识别、自然语言处理、…

探索EasyCVR与AI技术深度融合:视频汇聚平台的新增长点

随着5G、AI、边缘计算、物联网(IoT)、云计算等技术的快速发展,万物互联已经从概念逐渐转变为现实,AIoT(物联网人工智能)的新时代正在加速到来。在这一背景下,视频技术作为信息传输和交互的重要手…

深入RabbitMQ世界:探索3种队列、4种交换机、7大工作模式及常见概念

文章目录 文章导图RabbitMQ架构及相关概念四大核心概念名词解读 七大工作模式及四大交换机类型0、前置了解-默认交换机DirectExchange1、简单模式(Simple Queue)-默认DirectExchange2、 工作队列模式(Work Queues)-默认DirectExchange3、发布/订阅模式(Publish/Subscribe)-Fano…

【Java毕业设计】基于SpringBoot+Vue+uniapp的农产品商城系统

文章目录 一、系统架构1、后端:SpringBoot、Mybatis2、前端:Vue、ElementUI4、小程序:uniapp3、数据库:MySQL 二、系统功能三、系统展示1、小程序2、后台管理系统 一、系统架构 1、后端:SpringBoot、Mybatis 2、前端…

水晶连连看 - 无限版软件操作说明书

水晶连连看 – 无限版游戏软件使用说明书 文章目录 水晶连连看 – 无限版游戏软件使用说明书1 引言1.1 编写目的1.2 项目名称1.3 项目背景1.4 项目开发环境 2 概述2.1 目标2.2 功能2.3 性能 3 运行环境3.1 硬件3.2 软件 4 使用说明4.1 游戏开始界面4.2 游戏设定4.2.1 游戏帮助4…

数据库MySQL基础

目录 一、数据库的介绍 1.数据库概述 (1)数据的存储方式 (2)数据库 2.常见数据库排行榜 二、数据库的安装与卸载 1.数据库的安装 2.数据库的卸载 三、数据库服务的启动与登录 1.Windows 服务方式启动 (1&…

如何解决PCDN技术与边缘计算技术融合后的安全和隐私问题(壹)?

PCDN(Peer-assisted Content Delivery Network)技术与边缘计算技术的融合可以带来显著的性能提升和效率优化,但同时也带来了新的安全和隐私挑战。以下是一些解决这些安全和隐私问题的操作策略: 1. 强化数据加密 传输加密&#x…

U盘怎么加密保护?U盘加密方法介绍

在数字化时代,U盘作为一种便携式存储设备,广泛应用于我们的日常生活和工作中。然而,U盘中存储的数据安全性问题日益凸显。为了保护个人隐私和重要数据,学会U盘加密方法显得尤为重要。本文将为您详细介绍几种U盘加密方法&#xff0…

linux————根据端口查找运行目录的三种方法

先查询端口找到进程 netstat -anlpt | grep 16443 | grep -v grep tcp 0 0 0.0.0.0:16443 0.0.0.0:* LISTEN 3710563/nginx: mast tcp 0 0 192.168.110.253:16443 192.168.110.22:64430 ESTABLISHED 3710580/n…

Spark MLlib模型训练—回归算法 Survival Regression

Spark MLlib模型训练—回归算法 Survival Regression 生存回归(Survival Regression)是一种用于分析时间到事件数据的回归方法,广泛应用于医学、生物统计学、工程可靠性分析等领域。它的核心是预测一个事件发生的时间或概率,比如患者生存时间、设备故障时间等。本文将详细…

net、udp、tcp

Makefile的main.c文件中的全局变量SONG song,要在fun.c文件里面写成extern SONG song 编译方法 第一次编写 或 网络编程 物理层的网线规定有八根,颜色不一样,功能不一样,光猫把光信号转换成电信号,光纤10Gb WiFi叫无线局域网,一般也就50米左右,手机流量叫蜂窝网络,…

golang闭包中变量获取

闭包的本质是一个语法糖,其本质是获取外部变量在其内部使用。文中case2和case3并未涉及闭包,只是作为对比案例。case4这个案例有点不能理解,汇编看着太吃力了。case4和case5留待后续再研究。 案例1: package main// 探究go语言中…

ARM SIMD instruction -- fcmpe

FCMPE Floating-point signaling Compare (scalar). This instruction compares the two SIMD&FP source register values, or the first SIMD&FP source register value and zero. It writes the result to the PSTATE.{N, Z, C, V} flags. 浮点数比较(标量…

【重学 MySQL】五、MySQL 的卸载

【重学 MySQL】五、MySQL 的卸载 停止MySQL服务卸载MySQL程序删除残余文件清理注册表删除环境变量配置重启电脑 MySQL的卸载过程需要仔细操作,以确保彻底卸载并清理所有相关文件和配置。 停止MySQL服务 打开任务管理器:右键点击任务栏空白处&#xff0…

挂轨巡检机器人在发电厂与煤矿皮带机场景的应用

一、引言 在发电厂和煤矿等重工业领域,皮带机作为关键设备,其运行状态直接关系到生产效率和安全。然而,传统的人工巡检方式不仅效率低下,还存在安全隐患。随着智能巡检技术的不断发展,杭州旗晟智能科技有限公司推出的…

汽车智能驾驶算法汇总

汽车智能驾驶算法是自动驾驶技术的核心,它们集成了多个学科的知识,包括计算机视觉、机器学习、控制理论、路径规划等。以下是对汽车智能驾驶算法的一个详细汇总,内容分为几个关键部分进行阐述。 一、计算机视觉算法 计算机视觉是智能驾驶算…

Gemini AI 与 ChatGPT:哪个更适合为我策划婚礼?

我在六月订婚后,一心想着婚礼钟声,但在看到这些婚礼场地报价后,更像是警铃声响起。 “叮咚”已经被重新混音成“哗啦啦”——我需要帮助。 我甚至不知道如何 开始 计划婚礼。第一步是什么?我需要优先考虑什么?哪些任…

坐牢第三十四天(c++)

一.作业 1.栈的手写 #include <iostream> using namespace std; // 封装一个栈 class stcak { private:int *data; //int max_size; // 最大容量int top; // 下标 public:// 无参构造函数stcak();// 有参构造函数stcak(int size);// 拷贝构造函数stcak(const s…