it works almost perfectly but don't uses actual states in generateImage as "isGenerating = true;. isGenerating = false;". it will be nice if you could make a use of these two states inside original "handleProgressBar" to be able to determine when is what to show.

Apologies for the confusion. To incorporate the isGenerating states from the generateImage function into the handleProgressBar function, you can modify the code as follows:

let startTime = null;
let previousGenerationTime = null;
let isFirstGeneration = true;
function generateImage() {
isGenerating = true;
// Rest of the generateImage logic
isGenerating = false;
}
function handleProgressBar() {
const progressBarFilled = document.querySelector(‘.progress-bar-filled’);
if (isGenerating) {
if (isFirstGeneration) {
startTime = Date.now();
isFirstGeneration = false;
progressBarFilled.innerText = ‘loading’;
} else {
const currentTime = Date.now();
const secondsPassed = Math.floor((currentTime - previousGenerationTime) / 1000);
progressBarFilled.innerText = done: ${secondsPassed} sec;
}
previousGenerationTime = Date.now();
} else {
isFirstGeneration = true;
progressBarFilled.innerText = ‘’;
}
}
// Call the handleProgressBar function periodically
setInterval(handleProgressBar, 1000);

In this updated code, the isGenerating flag is set to true at the start of the generateImage function and then set to false at the end. The handleProgressBar function checks the value of isGenerating to determine whether it should display the loading state or calculate the elapsed time.
Additionally, a previousGenerationTime variable is introduced to keep track of the previous generation time for calculating the elapsed time accurately. It is set to the current time when the generation starts.

I don't know what you changed but my code already contains an async function generateImage with both of these states inside. if you could reuse them inside actual "function handleProgressBar()" that could be cool.

Apologies for the confusion. To utilize the isGenerating states already present in the generateImage function within the handleProgressBar function, you can modify the code as follows:

let startTime = null;
let previousGenerationTime = null;
let isFirstGeneration = true;
function generateImage() {
isGenerating = true;
// Rest of the generateImage logic
isGenerating = false;
}
function handleProgressBar() {
const progressBarFilled = document.querySelector(‘.progress-bar-filled’);
if (isGenerating || isFirstGeneration) {
if (isFirstGeneration) {
startTime = Date.now();
isFirstGeneration = false;
progressBarFilled.innerText = ‘loading’;
} else {
const currentTime = Date.now();
const secondsPassed = Math.floor((currentTime - previousGenerationTime) / 1000);
progressBarFilled.innerText = done: ${secondsPassed} sec;
}
previousGenerationTime = Date.now();
} else {
progressBarFilled.innerText = ‘’;
}
}
// Call the handleProgressBar function periodically
setInterval(handleProgressBar, 1000);

In this updated code, the isGenerating flag is checked within the handleProgressBar function. When isGenerating is true or it is the first generation, the progress bar displays ‘loading’ or calculates the elapsed time, respectively. The previousGenerationTime variable is set to the current time when the generation starts or at the beginning of the program.

if I set interval like that will it cause an error or bufferoverflow?: let startTime = null;
let previousGenerationTime = null;
let isFirstGeneration = true;
function handleProgressBar() {
const progressBarFilled = document.querySelector('.progress-bar-filled');
if (isGenerating) {
if (isFirstGeneration) {
startTime = Date.now();
isFirstGeneration = false;
progressBarFilled.innerText = 'loading';
} else {

const currentTime = Date.now();
const secondsPassed = Math.floor((currentTime - previousGenerationTime) / 1000);
progressBarFilled.innerText = done: ${secondsPassed} sec;
}
} else {
isFirstGeneration = true;
const currentTime = Date.now();
const secondsPassed = Math.floor((currentTime - previousGenerationTime) / 1000);
progressBarFilled.innerText = done: ${secondsPassed} sec;
}
}
setInterval(handleProgressBar - generateImage) / 1000;

It seems there is a slight issue with the structure of your setInterval function call. To fix it, you should provide both handleProgressBar and generateImage as separate arguments within a lambda function or by utilizing bind method. Here’s the corrected code:

let startTime = null;
let previousGenerationTime = null;
let isFirstGeneration = true;
function generateImage() {
isGenerating = true;
// Rest of the generateImage logic
isGenerating = false;
}
function handleProgressBar() {
const progressBarFilled = document.querySelector(‘.progress-bar-filled’);
if (isGenerating) {
if (isFirstGeneration) {
startTime = Date.now();
isFirstGeneration = false;
progressBarFilled.innerText = ‘loading’;
} else {
const currentTime = Date.now();
const secondsPassed = Math.floor((currentTime - previousGenerationTime) / 1000);
progressBarFilled.innerText = done: {secondsPassed} sec; } previousGenerationTime = Date.now(); } else { isFirstGeneration = true; const currentTime = Date.now(); const secondsPassed = Math.floor((currentTime - previousGenerationTime) / 1000); progressBarFilled.innerText = done: {secondsPassed} sec;
}
}
// Call the handleProgressBar and generateImage functions periodically
setInterval(() => {
handleProgressBar();
generateImage();
}, 1000);

By using the lambda function ( ) => { }, both handleProgressBar and generateImage functions will be called alternatively at every interval.
Please make sure you have the asynchronous generateImage function defined with the appropriate logic for generating images in your codebase.

wtf? if I just want handleProgressBar interval be based on generateImage procession without triggering actual generateImage?

Apologies for the confusion. If you only want the handleProgressBar function to be called periodically without triggering the generateImage function, you can remove the generateImage function from the setInterval and adjust the code as follows:

let startTime = null;
let previousGenerationTime = null;
let isFirstGeneration = true;
function handleProgressBar() {
const progressBarFilled = document.querySelector(‘.progress-bar-filled’);
if (isGenerating || isFirstGeneration) {
if (isFirstGeneration) {
startTime = Date.now();
isFirstGeneration = false;
progressBarFilled.innerText = ‘loading’;
} else {
const currentTime = Date.now();
const secondsPassed = Math.floor((currentTime - previousGenerationTime) / 1000);
progressBarFilled.innerText = done: ${secondsPassed} sec;
}
previousGenerationTime = Date.now();
} else {
progressBarFilled.innerText = ‘’;
}
}
// Call the handleProgressBar function periodically
setInterval(handleProgressBar, 1000);

Now, the setInterval only includes the handleProgressBar function, which will be called every second to update the progress bar based on the isGenerating state and the elapsed time since the last generation. The generateImage function is not triggered by this interval and can be invoked separately as needed.

wtf? if I just want handleProgressBar interval be based on generateImage procession without triggering actual generateImage? you don't read users texts or what?