Question

我有一个app.py文件，该文件返回视频帧并将其显示为.jpg。我的yolo模型与此同时运行。将边界框分配给我的对象的变量需要传递到html页面。我希望将图像显示在我的烧瓶应用程序中。不确定如何执行。请看下面的代码。变量“ ax”需要循环传递到test.html文件中。但是如何？

app.py

import cv2
from flask import Flask, render_template, Response
from camera import VideoCamera
import subprocess
import os
# Predicting with pretrained Models
from gluoncv import model_zoo, data, utils
from matplotlib import pyplot as plt  #Predicting with pretrained models
import cv2
print(cv2.__version__)
def video(file_urls):

  net = model_zoo.yolo3_darknet53_coco('F:/models/yolo3_darknet53_coco', pretrained=True)

  vidcap = cv2.VideoCapture('C:/Users/320/Desktop/video-streaming/input_videos/'+file_urls)
  success,image = vidcap.read()
  count = 0
  success = True
  while success:
    cv2.imwrite("F:/frames/frame%d.jpg" % count, image)# save frame as JPEG file
    img = "F:/frames/frame"+str("%d"%count)+".jpg"
    print(img)
    im_fname = img

    x, img = data.transforms.presets.yolo.load_test(im_fname, short=512)
    print('Shape of pre-processed video:', x.shape)

    class_IDs, scores, bounding_boxs = net(x)
    ax = utils.viz.plot_bbox(img, bounding_boxs[0], scores[0], class_IDs[0], class_names=net.classes)
    #plt.show()

    success,image = vidcap.read()
    print('Read a new frame: ', success)
    count += 1

test.html

<!DOCTYPE html>
<html lang="en">
<head>
  <title>Welcome</title>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/css/bootstrap.min.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.0/jquery.min.js"></script>
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.0/js/bootstrap.min.js"></script>
  <style>
    /* Remove the navbar's default margin-bottom and rounded borders */ 
    .navbar {
      margin-bottom: 0;
      border-radius: 0;
    }

    /* Set height of the grid so .sidenav can be 100% (adjust as needed) */
    .row.content {height: 450px}

    /* Set gray background color and 100% height */
    .sidenav {
      padding-top: 20px;
      background-color: #f1f1f1;
      height: 100%;
    }

    /* Set black background color, white text and some padding */
    footer {
      background-color: #555;
      color: white;
      padding: 15px;
    }

    /* On small screens, set height to 'auto' for sidenav and grid */
    @media screen and (max-width: 767px) {
      .sidenav {
        height: auto;
        padding: 15px;
      }
      .row.content {height:auto;} 
    }
  </style>
</head>
<body>

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#myNavbar">
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>                        
      </button>
      <a class="navbar-brand" href="#">Logo</a>
    </div>
    <div class="collapse navbar-collapse" id="myNavbar">
      <ul class="nav navbar-nav">
        <li class="active"><a href="#">Home</a></li>
      </ul>
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#"><span class="glyphicon glyphicon-log-in"></span> Login</a></li>
      </ul>
    </div>
  </div>
</nav>

<div class="container-fluid text-center">    
  <div class="row content">
    <div class="col-sm-2 sidenav">
      <p><a href="#">Link</a></p>

    </div>
    <div class="col-sm-8 text-left"> 
      <h1>Object Detection Using YOLO</h1>
      <p>
        <form action = "" method = "POST">
            <p>Upload your file here.</p>
            <p>
              <input type='file' name='username' class="btn btn-primary"/>
            </p>
            <p>
              <input type='submit' value='Upload' class="btn btn-secondary"/>
              <left><video controls loop>
                  <source src="{{ ax }}" type="video/mp4">
              </video> </left>
            </p>
      </p>
      <hr>
      <h3></h3>
      <p></p>
    </div>
    <div class="col-sm-2 sidenav">
      <div class="well">
        <p>ADS</p>
      </div>
      <div class="well">
        <p>ADS</p>
      </div>
    </div>
  </div>
</div>

<footer class="footer navbar-fixed-bottom">
  <p><center> All Rights reserved.&reg; </center></p>
</footer>

</body>
</html>

如何将python变量传递给html文件？

0 个答案: