石头计算项目 - 后端 - Web 服务器

Yehchitsai

2024-04-16 帮助1人

后端 - Web 服务器

Web 服务器需要提供用户图形用户介面的入口，透过这个入口来要求 ESP32-CAM 上传图片，都收到图片后再将图片交予智能应用程序进行计算机图学或是人工智能运算，接著再把运算结果回覆给用户。整个运作流程如下图所示：

ESP32-CAM 与 Web 服务器连上同一个子网，智能应用程序可以是独立的一个服务器，目前的作法是与 Web 服务器结合在一起。
用户向 Web 服务器请求图形用户介面。
用户在图形用户介面中点击请求图片的按键。
Web 服务器收到请求后，向 ESP32-CAM 发出请求拍照上传。
ESP32-CAM 将图片上传到 Web 服务器。
Web 服务器收到图片后，向智能应用程序请求计算。
智能应用程序响应计算结果给 Web 服务器。
Web 服务器响应计算结果给图形用户介面。

学新通
图 1. Web 服务器运作流程

提供用户图形用户介面

Web 服务器由Flask 网页框架所撰写，在首页处提供用户图形用户介面的入口，图形用户介面为 CountStoneUI.html。

图形用户介面的入口 / 源代码

@app.route("/")
def web_root():
    return render_template("CountStoneUI.html")

图形用户介面 CountStoneUI.html

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <title>石头计算图形用户介面</title>
    <meta name="robots" content="index,follow">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link href="https://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">
  </head>
  <body>
    <h1 align='center'>石头计算图形用户介面</h1>
      <div class="container">
      <button value="picture" onClick="imageRefresh()">ESP32-CAM的照片</button>
      <button value="picture" onClick="sendImage()">传送照片</button>
      <img src="http://192.168.92.160:5000/image_feed" id="uPyImage">
      </div>
      <div id="ESP32Response"></div>
      
     <script language="javascript"> 
      var uPyImage = document.getElementById("uPyImage");
      function imageRefresh(){
        imageSrc = uPyImage.src 
        if (imageSrc.lastIndexOf('?')>0)
          imageSrc = imageSrc.substr(0,imageSrc.lastIndexOf('?'));
        uPyImage.src = imageSrc   "?t="   new Date().getTime();
        console.log('refresh URL - '   uPyImage.src);
      }
      function sendImage(){
        var xhttp = new XMLHttpRequest();
        xhttp.onreadystatechange = function() {
          console.log(xhttp.responseText);
          if (this.readyState == 4 && this.status == 200) {
             // Typical action to be performed when the document is ready:
             document.getElementById("ESP32Response").innerHTML = xhttp.responseText;
          }
        };
        xhttp.open("GET", "/get_esp32_im", true);
        xhttp.send();
        }
    </script>     
<!--    <img src="https://blog.csdn.net/video_feed"> -->
  </body>
</html>

在浏览器上输入 Web 服务器的所在位址，即会出现图形用户介面，如下图所示，说明如下：

Web 服务器的所在位址。
请求传送实时的 ESP32-CAM 所捕捉的画面 - 由 ESP32-CAM 提供
实时的 ESP32-CAM 所捕捉的画面结果
请求 ESP32-CAM 将画面传给 Web 服务器进行运算 - 由 Web 服务器提供
智能应用程序的运算结果。

学新通
图 2. 图形用户介面

拍照进行运算

单击 传送照片 按钮是请求 ESP32-CAM 将画面传给 Web 服务器进行运算，以下是相关代码，第 3 行指定 ESP32-CAM 的拍照 API - /image_feed；第 6 行调用 API；第 8 行调用将回传的图片储存起来；第 12 行调用智能应用程序，并得到计算结果 count；最后在第 16 行回传计算结果。

@app.route("/get_esp32_im", methods=["GET"])
def download_image():
    esp32_camAPI = 'http://192.168.92.160:5000/image_feed'
    msg = ""
    count = 0
    res = requests.get(esp32_camAPI, stream = True)
    if res.status_code == 200:
        with open(esp32_image_filename,'wb') as f:
            shutil.copyfileobj(res.raw, f)
        print('Image sucessfully Downloaded: ',esp32_image_filename)
        msg = "sucessfully Downloaded"
        count = count_stone(esp32_image_filename)
    else:
        print('Image Couldn\'t be retrieved')
        msg = "Couldn\'t be retrieved"
    return jsonify({'message': msg, 'count' : count})

学新通

图 3. 智能应用程序计算结果的图片

这篇好文章是转载于：学新通技术网

石头计算项目 - 后端 - Web 服务器

后端 - Web 服务器

提供用户图形用户介面

拍照进行运算

photoshop保存的图片太大微信发不了怎么办

《学习通》视频自动暂停处理方法

word里面弄一个表格后上面的标题会跑到下面怎么办

Android 11 保存文件到外部存储，并分享文件

photoshop扩展功能面板显示灰色怎么办

微信公众号没有声音提示怎么办

excel下划线不显示怎么办

excel打印预览压线压字怎么办

TikTok加速器哪个好免费的TK加速器推荐

怎样阻止微信小程序自动打开