USER
ok, I got a flickering problem in that “const receivedImages = [];”, when each new image appears it flickers with some previous. I think it will be best to remove a each previous in sequance recieved image from the canvas and store it in some gallery array that we can then use to store a previous images in gallery and do whatever we want with them. initially there’s no any images, because we are getting them remotely from that text2image AI backend. need to handle that situation and apply a countermeasure for such a nasty error. so, the idea for images array is purely to hande the problem with animation timings desynch, and gallery array in its case serves as an array for future unimplemented gallery that should potentially hold already recieved images and store them all in some appropriate fashion… try analize the code and apply what you think would be the best in that case. now there’s some slight overheat, due to some in loop miscalculations in arrays probably.
If you are experiencing performance issues with the code, it might be due to the continuous looping and redrawing of images in the handleResize() function. try fix all errors and show what to change there.: <html>
<head>
<title>Text2Image AI</title>
<style>
html, body {
margin: 0;
padding: 0;
background-color:midnightblue;
color:white;
}
.title{
background: radial-gradient(circle at top center, #929, #519);
color: brightblue;
border-radius: 2px;
padding: 2px;
font-size: var(–font-size, 22px);
font-family: var(–font-family, monospace);
font-weight: var(–font-weight, bold);
-webkit-text-stroke: 1px darkmagenta;
text-stroke: 1px darkmagenta;
}
.container {
display: flex;
flex-direction: column;
justify-content: center;
align-items: top;
min-height: 0;
}
.control-container {
display: flex;
flex-direction: row;
align-items: flex-start;
justify-content: flex-start;
margin: 0;
}
.input-field-container {
position: absolute;
display: flex;
width: 100%;
align-items: center;
justify-content: center;
}
.input-field {
display:flex;
width: 100%;
height: 32px;
box-sizing: border-box;
background-color:#010130;
color:#aa50ff;
border:1px solid darkmagenta;
border-radius:6px;
padding:5px;
align-items: center;
justify-content: center;
font-size: var(--font-size, 16px);
font-family: var(--font-family, monospace);
font-weight: var(--font-weight, bold);
-webkit-text-stroke: 1px rgba(139, 0, 139, 0.5);
text-stroke: 1px rgba(139, 0, 139, 1);
}
.gen-button-container {
position: relative;
}
.gen-button {
margin: 0;
background: radial-gradient(circle at top center, #929, #519);
color: white;
border-radius: 6px;
padding: 2px;
font-size: var(--font-size, 16px);
--font-family: var(--font-family, monospace);
--font-weight: var(--font-weight, bold);
-webkit-text-stroke: 1px rgba(139, 0, 139, 0.5);
text-stroke: 1px rgba(139, 0, 139, 1);
text-shadow: 0px 0px 0.1px rgba(255, 255, 255, 1);
}
.image-canvas {
display: flex;
align-items: center;
position: relative;
width: 100%;
background: linear-gradient(to right, darkmagenta 1px, transparent 1px) 0 0,
linear-gradient(to right, darkmagenta 1px, transparent 1px) 0 100%,
linear-gradient(to top, darkmagenta 1px, transparent 1px) 0 0,
linear-gradient(to top, darkmagenta 1px, transparent 1px) 100% 0;
background-size: 25% 100%, 25% 200px, 100% 25%, 100% 25%;
background-repeat: repeat-x, repeat-x, repeat-y, repeat-y;
background-position: top left, bottom left, top left, top right;
background-color: #010130;
border-style: double dashed;
border-width: 2px;
border-color: darkmagenta;
z-index: 1;
}
.image-canvas:before {
content: '';
position: relative;
top: 2px;
left: 2px;
width: calc(100% - 4px);
height: calc(100% - 4px);
background-color: #010130;
z-index: -1;
}
.canvas-container {
position: relative;
width: 100%;
max-width: 100%;
height: calc(100vw / 50vh);
margin: 0 auto;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: center;
background-color: transparent;
z-index: 2;
}
.progress-bar {
position: relative;
width: calc(100% - 100px);
height: 2px;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
background-color: black;
}
.progress-bar-filled {
width: 0%;
height: 10px;
background-color: green;
}
.independent-container {
width: 100%;
position:relative;
display: flex;
flex-wrap: wrap;
align-items: flex-start;
justify-content: flex-start;
align-items: center;
margin-top: 60px;
background-color:#010130;
color:#aabbee;
border:1px solid darkmagenta;
border-radius:6px;
}
</style>
</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: 32px;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' onchange='autoQueueChanged()'>
<label for='numAttemptsInput' style='margin-left: 10px;margin-right: 5px;'>Retry Attempts:</label>
<input type='number' id='numAttemptsInput' value='50' min='2' max='1000' style='width: 64px;height: 16px; background-color:#010130;
color:#aabbee;
border:1px solid darkmagenta;
border-radius:6px;'>
<label for='intervalInput' style='margin-left: 10px;margin-right: 5px;'>Interval (sec):</label>
<input type='number' id='intervalInput' value='25' min='1' max='300' 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 (sec):</label>
<input type='number' id='timeoutInput' value='120' min='12' max='600' style='width: 64px;height: 16px; background-color:#010130;
color:#aabbee;
border:1px solid darkmagenta;
border-radius:6px;'>
</div>
<div class='canvas-container'>
<canvas id='imageCanvas' class='image-canvas'></canvas>
<div class='progress-bar'>
<div class='progress-bar-filled'></div>
</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;
let isGenerating = false;
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;
}
let generateInterval;
function autoQueueChanged() {
clearInterval(generateInterval);
const autoQueueActive = document.getElementById('autoQueueCheckbox').checked;
if (autoQueueActive) {
const timeout = parseInt(document.getElementById('timeoutInput').value) * 1000;
const interval = parseInt(document.getElementById('intervalInput').value) * 1000;
setTimeout(function() {
generateImage();
}, timeout);
generateInterval = setInterval(function() {
generateImage();
}, interval);
}
}
const receivedImages = [];
const galleryArray = [];
async function generateImage() {
if (isGenerating) {
return;
}
isGenerating = true;
const inputText = document.getElementById('inputText').value;
const numAttempts = parseInt(document.getElementById('numAttemptsInput').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(function () {
if (isGenerating) {
const elapsedTime = Math.floor((Date.now() - startTime) / 1000);
const progress = Math.floor((elapsedTime / timeLeft) * 1000);
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 imageWidth = img.naturalWidth;
const imageHeight = img.naturalHeight;
const aspectRatio = img.width / img.height;
const containerWidth = imageCanvas.parentElement.clientWidth; // Get the width of the container
const containerHeight = imageCanvas.parentElement.clientHeight; // Get the height of the container
const minAvailableWidth = containerWidth;
const maxAvailableHeight = containerHeight;
let canvasWidth = containerWidth;
let canvasHeight = maxAvailableHeight;
if (aspectRatio > 1) {
// Landscape image, fit width
canvasWidth = containerWidth;
canvasHeight = containerWidth / aspectRatio;
if (canvasHeight > maxAvailableHeight) {
canvasHeight = maxAvailableHeight;
canvasWidth = canvasHeight * aspectRatio;
}
} else {
// Portrait or square image, fit height
canvasWidth = maxAvailableHeight * aspectRatio;
canvasHeight = maxAvailableHeight;
if (canvasWidth > containerWidth) {
canvasWidth = containerWidth;
canvasHeight = canvasWidth / aspectRatio;
}
}
imageCanvas.width = canvasWidth;
imageCanvas.height = canvasHeight;
// Clear canvas and apply animation effect
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.globalAlpha = 0;
const scaleUpAnimation = setInterval(function() {
if (ctx.globalAlpha >= 1) {
// Animation complete, draw the image
clearInterval(scaleUpAnimation);
ctx.globalAlpha = 1;
ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
} else {
// Animation still in progress, gradually increase opacity
ctx.clearRect(0, 0, canvasWidth, canvasHeight);
ctx.globalAlpha += 0.1;
ctx.drawImage(img, 0, 0, canvasWidth, canvasHeight);
}
}, 1000);
if (receivedImages.length > 0) {
const previousImage = receivedImages.shift();
galleryArray.push(previousImage);
}
receivedImages.push(img); // Store the received image in the array
};
img.src = url;
clearInterval(interval);
progressBarFilled.style.width = '100%';
progressBarFilled.style.backgroundColor = 'darkmagenta';
break;
} catch (error) {
console.error(error);
retryAttempts++;
}
if (autoQueueActive) {
const timeout = estimatedTime + 2000;
await new Promise(resolve => setTimeout(resolve, timeout));
}
autoQueueActive = document.getElementById('autoQueueCheckbox').checked;
}
progressBarFilled.style.width = '100%';
progressBarFilled.style.height = '2px';
progressBarFilled.style.backgroundColor = 'green';
isGenerating = false;
}
window.addEventListener('resize', handleResize);
let isResizing = false;
function handleResize() {
if (isResizing) return;
isResizing = true;
requestAnimationFrame(() => {
const container = document.querySelector('.canvas-container');
const canvas = document.getElementById('imageCanvas');
const containerWidth = container.clientWidth;
const containerHeight = container.clientHeight;
const aspectRatio = canvas.width / canvas.height;
let canvasWidth = containerWidth;
let canvasHeight = containerWidth / aspectRatio;
if (canvasHeight > containerHeight) {
canvasHeight = containerHeight;
canvasWidth = canvasHeight * aspectRatio;
}
canvas.width = canvasWidth;
canvas.height = canvasHeight;
ctx.clearRect(0, 0, canvas.width, canvas.height);
galleryArray.forEach((image) => {
const imageWidth = image.naturalWidth;
const imageHeight = image.naturalHeight;
const aspectRatio = imageWidth / imageHeight;
let canvasImageWidth = canvasWidth;
let canvasImageHeight = canvasWidth / aspectRatio;
if (canvasImageHeight > canvasHeight) {
canvasImageHeight = canvasHeight;
canvasImageWidth = canvasHeight * aspectRatio;
}
const x = (canvas.width - canvasImageWidth) / 2;
const y = (canvas.height - canvasImageHeight) / 2;
ctx.drawImage(image, x, y, canvasImageWidth, canvasImageHeight);
});
isResizing = false;
});
}
document.addEventListener('DOMContentLoaded', function() {
handleResize();
});
</script>
</body>
</html>