flask_inference_api_g

Sleeping

App Files Files Community

flask_inference_api_g / nutri_call.html

DmitrMakeev

Update nutri_call.html

506f0d3 verified 4 months ago

raw

history blame

28.1 kB

	<!DOCTYPE html>
	<html lang="ru">
	<head>
	<!-- Основные стили -->
	<link href="https://cdn.jsdelivr.net/npm/@pnotify/core@5.2.0/dist/PNotify.css" rel="stylesheet">
	<!-- Мобильная поддержка -->
	<link href="https://cdn.jsdelivr.net/npm/@pnotify/mobile@5.2.0/dist/PNotifyMobile.css" rel="stylesheet">
	<!-- Тема -->
	<link href="https://cdn.jsdelivr.net/npm/@pnotify/core@5.2.0/dist/BrightTheme.css" rel="stylesheet">

	<!-- Скрипты -->
	<script type="module">
	import { alert, defaultModules } from 'https://cdn.jsdelivr.net/npm/@pnotify/core@5.2.0/dist/PNotify.js';
	import * as PNotifyMobile from 'https://cdn.jsdelivr.net/npm/@pnotify/mobile@5.2.0/dist/PNotifyMobile.js';

	// Инициализация мобильного модуля
	defaultModules.set(PNotifyMobile, {});

	// Теперь функция showCalculationStatus будет доступна глобально
	window.showCalculationStatus = function(response) {
	if (Object.keys(response.deficits \|\| {}).length === 0) {
	alert({
	title: 'Успешный расчёт',
	text: 'Все элементы сбалансированы!',
	type: 'success',
	delay: 3000,
	modules: {
	Mobile: {
	swipeDismiss: true
	}
	}
	});
	} else {
	alert({
	title: 'Обнаружены отклонения',
	text: 'Дефициты: ' + Object.entries(response.deficits)
	.map(([el, val]) => `${el}: ${val.toFixed(2)}ppm`)
	.join(', '),
	type: 'error',
	delay: 5000,
	modules: {
	Mobile: {
	swipeDismiss: true
	}
	}
	});
	}
	};
	</script>

	<link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/toastify-js/src/toastify.min.css">



	<meta charset="UTF-8">
	<title>Калькулятор удобрений</title>
	<style>
	/* Общие стили */
	body {
	margin: 0 auto;
	width: 1000px;
	padding: 1em;
	background-color: #f0f0f0;
	font-family: Arial, sans-serif;
	}

	/* Стили для заголовка */
	.header-box {
	border: 2px solid #2e8b57;
	background-color: #2e8b57;
	color: white;
	text-align: center;
	padding: 1em;
	border-radius: 10px;
	margin-bottom: 20px;
	width: 1000px;
	box-sizing: border-box;
	}

	/* Общие стили для всех рамок */
	fieldset, .calculation-box {
	border: 2px solid #2e8b57;
	background-color: #eaffea;
	padding: 1em;
	margin-bottom: 20px;
	border-radius: 8px;
	width: 1000px;
	box-sizing: border-box;
	}

	legend {
	font-weight: bold;
	color: #2e8b57;
	padding: 0 10px;
	}

	/* Стили для блока профиля */
	.main-container {
	display: grid;
	grid-template-columns: 40px repeat(7, 110px);
	gap: 10px;
	padding: 10px;
	}

	.profile-container {
	display: contents;
	}

	.profile-element {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 5px;
	}

	.profile-label {
	font-weight: bold;
	font-size: 0.9em;
	}

	.profile-element input {
	width: 80px;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
	text-align: center;
	}

	.nitrogen-container {
	grid-column: 1 / -1;
	display: flex;
	gap: 20px;
	padding-left: 40px;
	margin-top: 10px;
	}

	.nitrogen-group {
	display: flex;
	align-items: center;
	gap: 5px;
	}

	.nitrogen-group label {
	font-weight: bold;
	font-size: 0.9em;
	}

	.nitrogen-group input {
	width: 60px;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
	}

	/* Стили для таблицы удобрений */
	.fertilisers-container {
	display: flex;
	flex-direction: column;
	}

	.fert-row {
	display: flex;
	align-items: center;
	margin-bottom: 8px;
	}

	.fert-header {
	font-weight: bold;
	text-align: center;
	width: 80px;
	padding: 5px;
	font-size: 0.9em;
	}

	.fert-name {
	font-weight: bold;
	width: 120px;
	text-align: left;
	font-size: 0.9em;
	}

	.fert-cell {
	text-align: center;
	width: 80px;
	padding: 5px;
	font-size: 0.9em;
	}

	.fert-input {
	width: 70px;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
	text-align: center;
	margin: 0 5px;
	font-size: 0.9em;
	}

	/* Стили для блока расчета */
	.calculation-container {
	display: flex;
	gap: 40px;
	align-items: flex-start;
	}

	.compensation-section {
	display: flex;
	flex-direction: column;
	gap: 10px;
	}

	.enhancement-title {
	font-weight: bold;
	color: #2e8b57;
	margin-bottom: 5px;
	}

	.compensation-weights {
	display: flex;
	flex-direction: column;
	gap: 8px;
	}

	.weight-input-group {
	display: flex;
	align-items: center;
	gap: 10px;
	}

	.weight-input-group label {
	width: 80px;
	text-align: right;
	font-weight: bold;
	font-size: 0.9em;
	}

	.weight-input-group input {
	width: 70px;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
	}

	.input-column {
	display: flex;
	flex-direction: column;
	gap: 10px;
	}

	#calculate-btn {
	background-color: #2e8b57;
	color: white;
	border: none;
	padding: 8px 16px;
	font-size: 16px;
	border-radius: 5px;
	cursor: pointer;
	transition: background-color 0.3s;
	margin-bottom: 5px;
	font-weight: bold;
	}

	#calculate-btn:hover {
	background-color: #3cb371;
	}

	.input-group {
	display: flex;
	align-items: center;
	gap: 10px;
	}

	.input-group label {
	width: 80px;
	text-align: right;
	font-weight: bold;
	font-size: 0.9em;
	}

	.input-group input {
	width: 70px;
	padding: 5px;
	border: 1px solid #ccc;
	border-radius: 4px;
	}




	.micro-container {
	padding: 10px;
	}

	.micro-row {
	display: flex;
	gap: 20px;
	}

	.micro-group {
	display: flex;
	align-items: center;
	gap: 5px;
	}

	.micro-group label {
	min-width: 120px;
	}

	.micro-group input {
	width: 80px;
	text-align: right;
	}





	</style>

	<body>
	<div class="header-box">
	<h1>Калькулятор удобрений</h1>
	</div>

	<fieldset>
	<legend>Макропрофиль в мг/л (ppm)</legend>
	<div class="main-container">
	<!-- Основные элементы -->
	<div class="profile-container">
	<div class="profile-element" style="grid-column: 2">
	<span class="profile-label">N</span>
	<input id="profile_n" type="number" value="125.000" step="0.001"/>
	</div>
	<div class="profile-element" style="grid-column: 3">
	<span class="profile-label">P</span>
	<input id="profile_p" type="number" value="31.000" step="0.001"/>
	</div>
	<div class="profile-element" style="grid-column: 4">
	<span class="profile-label">K</span>
	<input id="profile_k" type="number" value="210.000" step="0.001"/>
	</div>
	<div class="profile-element" style="grid-column: 5">
	<span class="profile-label">Ca</span>
	<input id="profile_ca" type="number" value="84.000" step="0.001"/>
	</div>
	<div class="profile-element" style="grid-column: 6">
	<span class="profile-label">Mg</span>
	<input id="profile_mg" type="number" value="24.000" step="0.001"/>
	</div>
	<div class="profile-element" style="grid-column: 7">
	<span class="profile-label">S</span>
	<input id="profile_s" type="number" value="56.439" step="0.001"/>
	</div>
	<div class="profile-element" style="grid-column: 8">
	<span class="profile-label">EC</span>
	<input id="profile_ec" type="number" value="0.0" step="0.001"/>
	</div>
	</div>

	<!-- Азотные элементы -->
	<div class="nitrogen-container">
	<div class="nitrogen-group">
	<label for="profile_nh4">NH4:</label>
	<input id="profile_nh4" type="number" value="1.0" step="1.0" readonly style="background-color: #f0f0f0; color: #666;">
	</div>
	<div class="nitrogen-group">
	<label for="profile_no3">NO3:</label>
	<input id="profile_no3" type="number" value="8.25" step="0.01" min="5" max="100.001"/>
	</div>
	</div>
	</div>
	</fieldset>

	<fieldset>
	<legend>Составы солей</legend>
	<div class="fertilisers-container">
	<!-- Заголовки -->
	<div class="fert-row">
	<span class="fert-name">Удобрение</span>
	<span class="fert-header">NH4</span>
	<span class="fert-header">NO3</span>
	<span class="fert-header">P</span>
	<span class="fert-header">K</span>
	<span class="fert-header">Ca</span>
	<span class="fert-header">Mg</span>
	<span class="fert-header">S</span>
	<span class="fert-header">Грамм</span>
	</div>

	<!-- Строки с удобрениями -->
	<div class="fert-row">
	<span class="fert-name">CaN2O6</span>
	<span class="fert-cell">-</span>
	<input class="fert-input" type="number" value="11.863" step="0.001" id="fert_ca_no3"/>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<input class="fert-input" type="number" value="16.972" step="0.001" id="fert_ca_ca"/>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<input class="fert-input" type="number" step="0.001" id="calcium_nitrate"/>
	</div>

	<div class="fert-row">
	<span class="fert-name">KNO3</span>
	<span class="fert-cell">-</span>
	<input class="fert-input" type="number" value="13.854" step="0.001" id="fert_kno3_no3"/>
	<span class="fert-cell">-</span>
	<input class="fert-input" type="number" value="36.672" step="0.001" id="fert_kno3_k"/>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<input class="fert-input" type="number" step="0.001" id="potassium_nitrate"/>
	</div>

	<div class="fert-row">
	<span class="fert-name">NH4NO3</span>
	<input class="fert-input" type="number" value="17.499" step="0.001" id="fert_nh4no3_nh4"/>
	<input class="fert-input" type="number" value="17.499" step="0.001" id="fert_nh4no3_no3"/>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<input class="fert-input" type="number" step="0.001" id="ammonium_nitrate"/>
	</div>

	<div class="fert-row">
	<span class="fert-name">MgSO4</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<input class="fert-input" type="number" value="10.22" step="0.001" id="fert_mgso4_mg"/>
	<input class="fert-input" type="number" value="13.483" step="0.001" id="fert_mgso4_s"/>
	<input class="fert-input" type="number" step="0.001" id="magnesium_sulfate"/>
	</div>

	<div class="fert-row">
	<span class="fert-name">KH2PO4</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<input class="fert-input" type="number" value="22.761" step="0.001" id="fert_kh2po4_p"/>
	<input class="fert-input" type="number" value="28.731" step="0.001" id="fert_kh2po4_k"/>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<input class="fert-input" type="number" step="0.001" id="monopotassium_phosphate"/>
	</div>

	<div class="fert-row">
	<span class="fert-name">K2SO4</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<input class="fert-input" type="number" value="44.874" step="0.001" id="fert_k2so4_k"/>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<input class="fert-input" type="number" value="18.401" step="0.001" id="fert_k2so4_s"/>
	<input class="fert-input" type="number" step="0.001" id="potassium_sulfate"/>
	</div>

	<!-- Добавленные строки для Fe и Micro -->
	<div class="fert-row">
	<span class="fert-name">Fe</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<input class="fert-input" type="number" step="0.001" id="iron_amount">
	</div>

	<div class="fert-row">
	<span class="fert-name">Micro</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<span class="fert-cell">-</span>
	<input class="fert-input" type="number" step="0.001" id="micro_amount">
	</div>
	</div>
	</fieldset>
	<fieldset class="calculation-box">
	<legend>Расчёт удобрений</legend>
	<div class="calculation-container">
	<div class="compensation-section">
	<div class="enhancement-title">Усиление:</div>

	<div class="input-column">
	<button id="calculate-btn">Рассчитать</button>
	<div class="input-group">
	<label for="liters-input">Литры:</label>
	<input type="number" id="liters-input" value="100" min="1" step="1">
	</div>
	<div class="input-group">
	<label for="rounding-precision">Точность:</label>
	<input type="number" id="rounding-precision" value="3" min="0" max="3" step="1">
	</div>
	</div>
	</div>
	</fieldset>




	<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/toastify-js"></script>
	<script>
	let call_data;

	document.getElementById('calculate-btn').addEventListener('click', function() {
	console.log("=== НАЧАЛО ОБРАБОТКИ ===");

	// 1. Получаем значение точности округления с подробным логированием
	const roundingInput = document.getElementById('rounding-precision');
	console.log("Значение поля rounding-precision (raw):", roundingInput.value);

	const initialRounding = parseInt(roundingInput.value);
	console.log("Парсинг значения rounding (после parseInt):", initialRounding);

	const roundingPrecision = Math.min(Math.max(initialRounding \|\| 3, 0), 6);
	console.log("Финальное значение точности (0-6):", roundingPrecision);

	// 2. Улучшенная функция для безопасного получения числового значения с логированием
	const getValue = (id) => {
	const element = document.getElementById(id);
	if (!element) {
	console.error(`Элемент с ID ${id} не найден!`);
	return 0;
	}
	console.log(`Значение поля ${id}:`, element.value);

	const value = parseFloat(element.value);
	const result = isNaN(value) ? 0 : value;

	console.log(`Парсинг значения ${id}:`, result);
	return result;
	};
	// 3. Формируем данные для сервера с пошаговым логированием
	console.log("=== ФОРМИРОВАНИЕ ДАННЫХ ДЛЯ СЕРВЕРА ===");

	const fertilizerConstants = {
	"Кальциевая селитра": {
	"N (NO3-)": getValue('fert_ca_no3') / 100,
	"Ca": getValue('fert_ca_ca') / 100
	},
	"Калий азотнокислый": {
	"N (NO3-)": getValue('fert_kno3_no3') / 100,
	"K": getValue('fert_kno3_k') / 100
	},
	"Аммоний азотнокислый": {
	"N (NO3-)": getValue('fert_nh4no3_no3') / 100,
	"N (NH4+)": getValue('fert_nh4no3_nh4') / 100
	},
	"Сульфат магния": {
	"Mg": getValue('fert_mgso4_mg') / 100,
	"S": getValue('fert_mgso4_s') / 100
	},
	"Монофосфат калия": {
	"P": getValue('fert_kh2po4_p') / 100,
	"K": getValue('fert_kh2po4_k') / 100
	},
	"Калий сернокислый": {
	"K": getValue('fert_k2so4_k') / 100,
	"S": getValue('fert_k2so4_s') / 100
	}
	};

	const profileSettings = {
	'P': getValue('profile_p'),
	'K': getValue('profile_k'),
	'Mg': getValue('profile_mg'),
	'Ca': getValue('profile_ca'),
	'S': getValue('profile_s'),
	'NO3_RAT': getValue('profile_no3'),
	'TOTAL_NITROG': getValue('profile_n'),
	'liters': parseInt(document.getElementById('liters-input').value) \|\| 1,
	'rounding_precision': roundingPrecision
	};

	const requestData = {
	fertilizerConstants: fertilizerConstants,
	profileSettings: profileSettings
	};

	console.log("=== ПОЛНЫЙ ОБЪЕКТ ДЛЯ ОТПРАВКИ ===", JSON.stringify(requestData, null, 2));

	// 4. Проверка данных с подробным выводом
	console.log("=== ПРОВЕРКА ДАННЫХ ===");

	const requiredFertilizers = ["Кальциевая селитра", "Калий азотнокислый", "Аммоний азотнокислый",
	"Сульфат магния", "Монофосфат калия", "Калий сернокислый"];

	let hasErrors = false;
	for (const fert of requiredFertilizers) {
	if (!requestData.fertilizerConstants[fert]) {
	console.error(`ОШИБКА: Отсутствует удобрение: ${fert}`);
	hasErrors = true;
	} else {
	console.log(`Удобрение ${fert} присутствует`);
	}
	}

	const requiredProfileFields = ['P', 'K', 'Mg', 'Ca', 'S', 'NO3_RAT', 'TOTAL_NITROG'];
	for (const field of requiredProfileFields) {
	if (isNaN(requestData.profileSettings[field])) {
	console.error(`ОШИБКА: Некорректное значение для параметра ${field}`);
	hasErrors = true;
	} else {
	console.log(`Параметр ${field} в порядке:`, requestData.profileSettings[field]);
	}
	}

	console.log("Параметр rounding_precision:", requestData.profileSettings.rounding_precision);

	if (hasErrors) {
	const errorMsg = "Пожалуйста, проверьте введенные данные. Обнаружены ошибки в форме. Смотрите консоль для деталей.";
	console.error(errorMsg);
	alert(errorMsg);
	return;
	}
	// 5. Отправка данных на сервер с полным логированием
	console.log("=== ОТПРАВКА ДАННЫХ НА СЕРВЕР ===");

	fetch('/calculation', {
	method: 'POST',
	headers: {
	'Content-Type': 'application/json',
	},
	body: JSON.stringify(requestData)
	})
	.then(response => {
	console.log("Получен ответ от сервера. Статус:", response.status);

	if (!response.ok) {
	console.error("ОШИБКА СЕРВЕРА. Полный ответ:", response);
	throw new Error(`HTTP error! status: ${response.status}`);
	}
	return response.json();
	})
	.then(data => {
	call_data = data;
	console.log("=== УСПЕШНЫЙ ОТВЕТ ОТ СЕРВЕРА ===", call_data);

	// Выводим данные в форму
	data_out(call_data);

	// Показываем статус расчёта
	showCalculationStatus(call_data); // <-- Вот эта строка запуска

	// Проверяем, применилась ли точность округления
	console.log("Проверка округления в ответе:");
	if (data.fertilizers) {
	Object.entries(data.fertilizers).forEach(([name, values]) => {
	console.log(`Удобрение ${name}:`, values);
	});
	}

	// Здесь можно добавить обработку ответа
	})
	.catch(error => {
	console.error("=== ОШИБКА ПРИ ОБРАБОТКЕ ===", error);
	alert("Ошибка при расчете: " + error.message);
	})
	.finally(() => {
	console.log("=== ЗАВЕРШЕНИЕ ОБРАБОТКИ ===");
	});
	});




	function data_out(response) {
	console.log("Обработка ответа сервера:", response);

	// Соответствие названий удобрений и ID полей
	const fertilizerMap = {
	"Кальциевая селитра": "calcium_nitrate",
	"Калий азотнокислый": "potassium_nitrate",
	"Аммоний азотнокислый": "ammonium_nitrate",
	"Сульфат магния": "magnesium_sulfate",
	"Монофосфат калия": "monopotassium_phosphate",
	"Калий сернокислый": "potassium_sulfate"
	};

	// Заполняем граммы для каждого удобрения
	for (const [fertName, fieldId] of Object.entries(fertilizerMap)) {
	const value = response.fertilizers[fertName];
	if (value !== undefined) {
	const input = document.getElementById(fieldId);
	if (input) {
	input.value = typeof value === 'number'
	? value.toFixed(3)
	: value.граммы?.toFixed(3) \|\| '0.000';
	console.log(`Установлено ${fertName}: ${input.value}`);
	} else {
	console.error(`Не найден элемент: ${fieldId}`);
	}
	}
	}

	// Обновляем EC если есть
	const ecInput = document.getElementById('profile_ec');
	if (ecInput && response.total_ppm) {
	ecInput.value = (response.total_ppm / 700).toFixed(2); // Пример конвертации ppm в EC
	}

	console.log("Данные успешно обновлены");
	}







	function showCalculationStatus(response) {
	// Настройки по умолчанию
	const defaults = {
	duration: 5000,
	gravity: "top",
	position: "right",
	stopOnFocus: true
	};

	// Проверяем дефициты
	if (Object.keys(response.deficits \|\| {}).length === 0) {
	// Успешный расчёт (зелёный)
	Toastify({
	...defaults,
	text: "✓ Расчёт успешен! Все элементы сбалансированы",
	backgroundColor: "#4CAF50",
	className: "toast-success"
	}).showToast();
	} else {
	// Есть дефициты (красный)
	const deficitText = Object.entries(response.deficits)
	.map(([el, val]) => `${el}: ${val.toFixed(2)} ppm`)
	.join(', ');

	Toastify({
	...defaults,
	text: `⚠ Ошибка баланса: ${deficitText}`,
	backgroundColor: "#F44336",
	className: "toast-error",
	duration: 7000 // Даём больше времени на чтение ошибок
	}).showToast();
	}
	}








	<style>
	.pnotify-card {
	font-family: 'Segoe UI', sans-serif;
	border-radius: 8px;
	overflow: hidden;
	box-shadow: 0 4px 12px rgba(0,0,0,0.15);
	}

	.card-header {
	padding: 16px;
	display: flex;
	align-items: center;
	color: white;
	}

	.card-header.success {
	background: linear-gradient(135deg, #4CAF50, #2E7D32);
	}

	.card-header.error {
	background: linear-gradient(135deg, #F44336, #C62828);
	}

	.card-header h3 {
	margin: 0 0 0 12px;
	font-size: 1.2rem;
	}

	.card-header .icon {
	width: 24px;
	height: 24px;
	}

	.card-body {
	padding: 16px;
	background: white;
	}

	.card-body ul {
	margin: 0;
	padding-left: 20px;
	}

	.card-body p {
	margin: 0 0 8px 0;
	}

	.card-body small {
	color: #666;
	font-size: 0.8rem;
	}
	</style>
	<script type="module">
	import { alert, defaultModules } from 'https://cdn.jsdelivr.net/npm/@pnotify/core@5.2.0/dist/PNotify.js';
	import * as PNotifyMobile from 'https://cdn.jsdelivr.net/npm/@pnotify/mobile@5.2.0/dist/PNotifyMobile.js';
	import 'https://cdn.jsdelivr.net/npm/@pnotify/core@5.2.0/dist/BrightTheme.css';
	import 'https://cdn.jsdelivr.net/npm/@pnotify/bootstrap4@5.2.0/dist/PNotifyBootstrap4.css';

	defaultModules.set(PNotifyMobile, {});

	window.showCalculationStatus = function(response) {
	const successTemplate = `
	<div class="pnotify-card">
	<div class="card-header success">
	<svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.5 2 2 6.5 2 12S6.5 22 12 22 22 17.5 22 12 17.5 2 12 2M10 17L5 12L6.41 10.59L10 14.17L17.59 6.58L19 8L10 17Z"/></svg>
	<h3>Расчёт успешен</h3>
	</div>
	<div class="card-body">
	<p>Все элементы идеально сбалансированы</p>
	<small>Общая концентрация: ${response.total_ppm.toFixed(2)} ppm</small>
	</div>
	</div>
	`;

	const errorTemplate = `
	<div class="pnotify-card">
	<div class="card-header error">
	<svg class="icon" viewBox="0 0 24 24"><path fill="currentColor" d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/></svg>
	<h3>Обнаружены дефициты</h3>
	</div>
	<div class="card-body">
	<ul>
	${Object.entries(response.deficits).map(([el, val]) => `
	<li><strong>${el}:</strong> ${val.toFixed(2)} ppm</li>
	`).join('')}
	</ul>
	</div>
	</div>
	`;

	alert({
	type: Object.keys(response.deficits \|\| {}).length === 0 ? 'success' : 'error',
	text: Object.keys(response.deficits \|\| {}).length === 0 ? successTemplate : errorTemplate,
	delay: 4000,
	width: '320px',
	modules: {
	Desktop: {
	desktop: true
	},
	Animate: {
	animate: true,
	inClass: 'zoomIn',
	outClass: 'zoomOut'
	}
	}
	});
	};
	</script>




	</body>
	</html>