How to deal with files generated by the display background program in real time?

Question

I am writing a php program. Its function is to call a calculation program in the background after receiving the parameters passed from the front end, and generate a picture based on the parameters (this process takes a certain amount of time, about 2s or more).
Finally on the interface, I need to wait for the image to be generated and then display the image in a div.
So the problem is: during the image generation, the interface is in a unresponsive state;
In addition, if the program fails to run and the image is not generated, I have no way of knowing;

Solutions tried

The solution I am using now is to use setInterval to poll once every second to see if the image has been generated. If so, pass the URL of the image to the target img tag on the front end. If the url is not obtained within 10 seconds, the generation is determined to have failed.

But I feel that this method is very stupid, and if it fails, it will take a long time to know.

So I would like to ask, do you have any good suggestions or good implementation methods to make the user experience of this processing process better?

Reply content:

Question

I am writing a php program. Its function is to call a calculation program in the background after receiving parameters from the front end, and generate a picture based on these parameters (this process takes a certain amount of time, about 2 seconds or more).
Finally on the interface, I need to wait for the image to be generated and then display the image in a div.
So the problem is: during the image generation, the interface is in a unresponsive state;
In addition, if the program fails to run and the image is not generated, I have no way of knowing;

Solutions tried

The solution I am using now is to use setInterval to poll once every second to see if the image has been generated. If so, pass the URL of the image to the target img tag on the front end. If the url is not obtained within 10 seconds, the generation is determined to have failed.

But I feel that this method is very stupid, and if it fails, it will take a long time to know.

So I would like to ask, do you have any good suggestions or good implementation methods to make the user experience of this processing process better?

• You can create a loading interface. To make it simple, just find a rotating GIF to fill the div,

• To query whether the image is generated, you can consider using websocket,

• Another suggestion is that you determine whether the image can be generated successfully in the program that generates the image. If not, generate an image representing an error. This can ensure that the image is transmitted to the front end.

The key here is that it is best not to use the logic of "if there is no feedback for 10 seconds, it must have failed." But if the background fails, the error handling code block is immediately called and a message is returned to inform the user of the failure. I don’t quite understand how it is handled in php, in python:

<code>try: #尝试执行下面代码，若失败，执行except里的代码
    # 这里写创建图片的逻辑,image = ...
    return success(message='Done.'，data=image) #返回成功消息和图片 
except Exception as ex:  #若发生错误
    logger(ex) #记录错误文档
    return fail(message='Error.') #马上返回失败消息，而不是等10秒</code>

Ajax can be solved, success and failure callbacks are used to handle it, and the new version also has timeout processing