对Qpython+Flask实现对小孩学习的监控-优快云博客中html页面进行改造,利用Ajax,提交一段文字,发送到数据库,再在服务器,发送该段文件给手机端,然手机端TTS朗读出来,增加了父母监控小孩学习,自定义提醒小孩的功能。
一、index.html的更改。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>实时**学习情况图</title>
<script type="text/javascript">
// 设置定时器,每20秒(20000毫秒)刷新一次页面
setInterval(function(){
location.reload();
}, 20000);
</script>
<script>
function submitForm() {
// 获取文本输入框的值
var text = document.getElementById('textInput').value;
// 创建一个XMLHttpRequest对象
var xhr = new XMLHttpRequest();
// 配置请求:POST方法,请求的URL,以及是否异步
xhr.open("POST", "/submit", true);
// 设置请求头,指定内容类型为表单数据
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
// 定义当请求完成并成功时的回调函数
xhr.onreadystatechange = function () {
if (xhr.readyState === XMLHttpRequest.DONE && xhr.status === 200) {
// 解析并处理服务器的响应
var response = xhr.responseText;
document.getElementById('response').innerText = response;
}
};
// 编码表单数据并发送
var formData = "textInput=" + encodeURIComponent(text);
xhr.send(formData);
// 阻止表单的默认提交行为
return false;
}
</script>
</head>
<body>
<h1>学习情况,每20秒刷新一次页面</h1>
<div>
<img src="{
{ image_url }}" alt="Latest Image">
</div>
<h1>状态:{
{ qk }} </h1>
<form onsubmit="return submitForm();">
<label for="textInput">输入文字发给手机说:</label><br><br>
<textarea id="textInput" name="textInput" rows="1" required></textarea><br><br>
<input type="submit" value="提交">
</form>
<p id="response"></p>
<p>
<a href="http://192.168.99.235:5000/qk" target="_self">查看实时学习情况</a>
</p>
</body>
</html>
二、flask服务器端
# -*- coding: utf-8 -*-
"""
Created on Wed Jan 15 22:39:02 2025
@author: Ybk
"""
from flask import Flask, jsonify, send_from_directory, render_template, request
import time
import os
from pathlib import Path
import sqlite3
import datetime
import torch
import torch.nn as nn
from torchvision import transforms, models
from PIL import Image
import broadlink
import plotly.graph_objects as go
# 加载模型
# 加载模型并设置为评估模式
model = models.resnet18(pretrained=False) # 假设使用的是resnet18
num_ftrs = model.fc.in_features # 获取输入特征数量
model.fc = nn.Linear(num_ftrs, 6) # 将输出特征数量改为4
model.load_state_dict(torch.load('best66_resnet18_model.pth')) # 加载模型参数
model.to('cuda' if torch.cuda.is_available() else 'cpu') # 移动到设备上
model.eval() # 设置为评估模式
# 定义预处理步骤
preprocess = transforms.Compose([
transforms.Resize(224),
transforms.CenterCrop(224),
transforms.ToTensor(),
transforms.Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225]),
])
app = Flask(__name__)
db_filepath = Path(__file__).joinpath("../jk.db").resolve()
# 设置上传文件的目录和允许的文件扩展名
now = datetime.datetime.now()
date_str = now.strftime("%Y%m%d")
UPLOAD_FOLDER = fr'd:\upload\{date_str}'
ALLOWED_EXTENSIONS = {'png', 'jpg', 'jpeg', 'gif'}
app.config['UPLOAD_FOLDER'] = UPLOAD_FOLDER
# 创建上传目录如果不存在
if not os.path.exists(UPLOAD_FOLDER):
os.makedirs(UPLOAD_FOLDER)
def insertdb(sj,furl,xl,zt,qk): #插入一行数据zt1为有人0为无人
conn = sqlite3.connect(db_filepath, timeout=10, check_same_thread=False)
c