File size: 4,858 Bytes
090987a |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 |
{% extends 'base.html' %}
{% block content %}
<h2 class="mb-4 fw-bold text-white">Image Processing</h2>
<form class="mb-4" method="POST" enctype="multipart/form-data">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="btn btn-primary">Upload Image</button>
</form>
{% if proccessed %}
<div class="mt-4">
<div class="nav nav-tabs" id="myTab" role="tablist">
<a class="nav-item nav-link active" id="home-tab" data-bs-toggle="tab" href="#home-tab-pane">Uploaded Image</a>
<a class="nav-item nav-link" id="profile-tab" data-bs-toggle="tab" href="#profile-tab-pane">Face Detects</a>
<a class="nav-item nav-link" id="contact-tab" data-bs-toggle="tab" href="#contact-tab-pane">OCR Texts</a>
<a class="nav-item nav-link" id="disabled-tab" data-bs-toggle="tab" href="#disabled-tab-pane">Metadata</a>
<a class="nav-item nav-link" id="augmentive-tab" data-bs-toggle="tab" href="#augmentive-tab-pane">Augmentive</a>
</div>
<div class="tab-content mt-4">
<div id="home-tab-pane" class="tab-pane fade show active">
<img class="img-fluid mx-auto rounded" src="{{ uploaded_base64 }}" alt="Uploaded Image">
</div>
<div id="profile-tab-pane" class="tab-pane fade">
{% if cropped_faces %}
<div class="row g-3">
<div class="col-md-5">
<h3 class="mt-4 fw-bold">Detected Faces</h3>
<img class="img-fluid rounded" src="{{ image_with_labels }}" alt="Detected Faces">
</div>
<div class="col-md-7">
<h3 class="mt-4 fw-bold">Cropped Faces</h3>
<div class="d-flex flex-wrap gap-4">
{% for face, face_name, distance, fdescription in cropped_faces %}
<div class="text-center text-xs" style="width: 80px;">
<img src="{{ face }}" alt="Cropped Face" class="img-thumbnail img-fluid mb-1">
<div style="font-size:10px">
<strong>{{ face_name }}</strong><br>{{ fdescription }}
</div>
</div>
{% endfor %}
</div>
</div>
</div>
{% endif %}
</div>
<div id="contact-tab-pane" class="tab-pane fade">
{% if texts %}
<div class="d-flex flex-wrap gap-2">
{% for text in texts %}
<span class="badge bg-success text-white">{{ text }}</span>
{% endfor %}
</div>
{% endif %}
</div>
<div id="disabled-tab-pane" class="tab-pane fade">
<div class="d-flex flex-wrap gap-4">
{% if metadata %}
<div class="w-100">
<table class="table table-sm table-striped">
<thead class="table-light">
<tr>
<th>IPTC Field</th>
<th>Value</th>
</tr>
</thead>
<tbody>
{% for tag, value in metadata.items %}
<tr>
<td>{{ tag }}</td>
<td>{{ value }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
{% if exifs %}
<div class="w-100">
<table class="table table-sm table-striped">
<thead class="table-light">
<tr>
<th>EXIF Field</th>
<th>Value</th>
</tr>
</thead>
<tbody>
{% for tag, value in exifs.items %}
<tr>
<td>{{ tag }}</td>
<td>{{ value }}</td>
</tr>
{% endfor %}
</tbody>
</table>
</div>
{% endif %}
</div>
</div>
<div id="augmentive-tab-pane" class="tab-pane fade">
{% if description %}
<h3 class="fw-semibold">{{ description }}</h3>
{% endif %}
</div>
<div id="reverse-tab-pane" class="tab-pane fade">
{% if reverse_images %}
{{ reverse_images }}
{% endif %}
</div>
</div>
</div>
{% endif %}
{% endblock %}
|