need this thing to normally handle auto-repeats and attempts used. the idea is to query text2image AI with the same query in text input field and send it again after we get a successful confirmation of a returned image from text2image backend. also, need to add the a timeout selection input field after this 'numAttemptsInput', so you can set a timeout or cooldown after which a new attempt will be performed to query an text2image AI model. it seem it doesn’t work. I think that we need to catch that JSON data returned from AI and base our timings in auto-queuing mechanism on actual image data returned or errors. try implement all this by using original html structure. output your full implemented variant but without any backticks used in template literals, do template literals in old fashion through + and ' : 
<html>
<head>
<title>Text2Image AI</title>
</head>
<body>
<div class='container'>
<div class='control-container'>
<div class='input-field-container'>
<h1 class='title' style='margin-left: 10px;margin-right: 10px;margin-top: 10px;'>T2I AI UI</h1>
<input id='inputText' type='text' value='armoured girl riding an armored cock' class='input-field' style='flex: 1;margin-top: -6px;'>
<div class='gen-button-container'>
<button onclick='generateImage()' class='gen-button' style='border-style:none;height: 30px;margin-left: 10px;margin-right: 10px;margin-top: -6px;'>Gen Img</button>
</div>
</div>
</div>
<div class='independent-container'>
<label for='autoQueueCheckbox' style='margin-left: 10px;margin-right: 5px;'>Auto Queue:</label>
<input type='checkbox' id='autoQueueCheckbox'>

<label for='numAttemptsInput' style='margin-left: 10px;margin-right: 5px;'>Retry Attempts:</label>
<input type='number' id='numAttemptsInput' value='5' min='1' max='9' style='width: 64px;height: 16px; background-color:#010130;
color:#aabbee;
border:1px solid darkmagenta;
border-radius:6px;'>

<label for='timeoutInput' style='margin-left: 10px;margin-right: 5px;'>Timeout (ms):</label>
<input type='number' id='timeoutInput' value='2000' min='1000' style='width: 64px;height: 16px; background-color:#010130;
color:#aabbee;
border:1px solid darkmagenta;
border-radius:6px;'>

</div>
<div class='progress-bar'>
<div class='progress-bar-filled'></div>
<canvas id='imageCanvas' class='image-canvas'></canvas></div>
</div>


<script>
const modelUrl = 'https://api-inference.huggingface.co/models/hogiahien/counterfeit-v30-edited';
const modelToken = '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';
const progressBarFilled = document.querySelector('.progress-bar-filled');
const imageCanvas = document.getElementById('imageCanvas');
const ctx = imageCanvas.getContext('2d');

let estimatedTime = 0;

async function query(data) {
const response = await fetch(modelUrl, {
headers: {
Authorization: "Bearer " + modelToken
},
method: 'POST',
body: JSON.stringify(data)
});

const headers = response.headers;
const estimatedTimeString = headers.get('estimated_time');
estimatedTime = parseFloat(estimatedTimeString) * 1000;

const result = await response.blob();
return result;
}

async function generateImage() {
const inputText = document.getElementById('inputText').value;
const numAttempts = parseInt(document.getElementById('numAttemptsInput').value);
const timeout = parseInt(document.getElementById('timeoutInput').value);

progressBarFilled.style.width = '0%';
progressBarFilled.style.backgroundColor = 'green';

await new Promise(resolve => setTimeout(resolve, 1000));

let retryAttempts = 0;
const maxRetryAttempts = numAttempts;
let autoQueueActive = false;

while (retryAttempts < maxRetryAttempts) {
try {
const startTime = Date.now();
const timeLeft = Math.floor(estimatedTime / 1000);

const interval = setInterval(() => {
const elapsedTime = Math.floor((Date.now() - startTime) / 1000);
const progress = Math.floor((elapsedTime / timeLeft) * 100);
progressBarFilled.style.width = progress + '%';
}, 1000);

const cacheBuster = new Date().getTime();
const response = await query({ inputs: inputText, cacheBuster });
const url = URL.createObjectURL(response);
const img = new Image();

img.onload = function() {
const aspectRatio = img.width / img.height;
const canvasWidth = imageCanvas.offsetWidth;
const canvasHeight = Math.floor(canvasWidth / aspectRatio);

imageCanvas.width = canvasWidth;
imageCanvas.height = canvasHeight;

ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
};

img.src = url;

clearInterval(interval);
progressBarFilled.style.width = '100%';
progressBarFilled.style.backgroundColor = 'darkmagenta';
break;
} catch (error) {
console.error(error);
retryAttempts++;
}

if (autoQueueActive) {
await new Promise(resolve => setTimeout(resolve, timeout));
}

autoQueueActive = document.getElementById('autoQueueCheckbox').checked;
}

progressBarFilled.style.width = '100%';
progressBarFilled.style.height = '2px';
progressBarFilled.style.backgroundColor = 'green';
}
</script>
</body>
</html>