VideoAnalysis/static/index.html
2023-07-07 23:34:24 +04:00

100 lines
3.9 KiB
HTML
Raw Blame History

This file contains ambiguous Unicode characters

This file contains Unicode characters that might be confused with other characters. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

<!DOCTYPE html>
<html lang="en" class="h-100">
<head>
<meta charset="UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Анализ аудиторий</title>
<link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"
integrity="sha384-9ndCyUaIbzAi2FUVXJi0CjmCapSmO7SnpJef0486qhLnuZ2cdeRhO02iuK6FUUVM" crossorigin="anonymous" />
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"
integrity="sha384-geWF76RCwLtnZ8qwWowPQNguL3RmwHVBC9FhGdlKrxdiJJigb/j/68SIy3Te4Bkz"
crossorigin="anonymous"></script>
</head>
<body class="bg-body-secondary h-100 d-flex align-items-center">
<div class="container py-3">
<div class="card">
<div class="card-body">
<div class="row">
<div class="col-lg">
<p class="alert alert-info">
Загрузите изображение в поле ниже, чтобы проверить, на
фотография пустая или заполненная аудитория.
</p>
<form id="uploadForm" action="analyze">
<div>
<label for="image" class="form-label">Нажмите, чтобы загрузить изображение</label>
<input type="file" class="form-control" name="image" id="image" />
</div>
<div>
<label for="ontology" class="form-label">Онтология предметной области</label>
<input type="file" class="form-control" name="ontology" id="ontology" />
</div>
<div>
<label for="queries" class="form-label">Набор запросов для запуска</label>
<input type="text" class="form-control" name="queries" id="queries"
value="QueryGetNotEmpty,QueryGetCheck,QueryGetEmpty" />
</div>
<div class="my-3">
<button type="submit" class="btn btn-primary">
Отправить
</button>
</div>
</form>
</div>
<div class="col-lg">
<img src="none.png" alt="Результат" id="imgslot" class="w-100" />
<div id="queriesResult"></div>
</div>
</div>
</div>
</div>
</div>
<script>
document
.getElementById("uploadForm")
.addEventListener("submit", (event) => {
event.preventDefault();
const data = new FormData(event.target);
fetch("/analyze", { method: "POST", body: data })
.then((res) => res.json())
.then((data) => {
const img = document.getElementById("imgslot");
const queriesResult = document.getElementById("queriesResult");
img.src = "none.png";
if (data.image) {
img.src = "data:image/jpg;base64," + data.image;
}
queriesResult.innerHTML = "";
if (data.data && data.data.response) {
for (const [query, result] of Object.entries(
data.data.response
)) {
// Отрисовка результата запросов.
const markup = `
<h1 class="display-6">${query}</h1>
<table class="table table-bordered table-striped">
<tr>
${result.columns.map((column) => `<th>${column}</th>`).join("")}
</tr>
${result.rows.map(
(row) =>
`<tr>${Object.entries(row)
.map(([key, value]) => `<td>${value.value}</td>`)
.join("")}</tr>`
)}
</table>
`;
queriesResult.innerHTML += markup;
}
}
});
});
</script>
</body>
</html>