yl-ocr-layout/templates/home.html

<!-- This is a Jinja2 Template that extends layout.html
Implements a simple Bootstrap 5 form submission interface for YOLOv5 detection.
-->

{% extends "layout.html" %} {% block title %}
<title>YOLOv5 Demo</title>
{% endblock %} {% block content %}
<div class="m-2">
  <h5>Upload image(s) and select a YOLOv5 model</h5>

  <hr />

  <form method="post" action="" enctype="multipart/form-data">
    <div class="my-2">
      <label for="file_list" class="form-label">Upload Images</label>
      <input
        class="form-control w-auto"
        type="file"
        name="file_list"
        id="file_list"
        multiple
      />
    </div>
    <div class="my-2">
      <div class="form-group">
        <label>Select YOLO Model</label>
      </div>
      <select class="form-select w-auto" name="model_name">
        {% for selection in model_selection_options %}
        <option value="{{ selection }}">{{ selection }}</option>
        {% endfor %}
      </select>
    </div>
    <div class="my-2">
      <label for="img_size_input" class="form-label"
        >Model Inference Size</label
      >
      <input
        type="text"
        class="form-control w-auto"
        id="img_size_input"
        name="img_size"
        value="1824"
      />
    </div>
    <div class="my-2">
      <input
        type="checkbox"
        id="multi_scale"
        name="multi_scale"
      />
      <label for="multi_scale" class="form-label">
        Multi-scale Inference
      </label>
    </div>

    <button class="btn btn-primary" type="submit">Submit</button>
  </form>
</div>

{% endblock %}