Update app.py

app.py

@@ -75,9 +75,13 @@ app.layout = dbc.Container([
     ]),
     dbc.Row([
         dbc.Col([
-            html.H4("Original Image", className="mt-4"),
             dbc.Button("Upscale Image", id="upscale-button", color="primary", className="mb-3"),
-            html.Div(id='upscaling-status', className="mb-3"),
+            dbc.Spinner(html.Div(id="loading-output"), color="primary", type="border", size="sm"),
+        ], width=12, className="text-center"),
+    ]),
+    dbc.Row([
+        dbc.Col([
+            html.H4("Original Image", className="mt-4"),
             dbc.Card(id='output-image-upload', body=True)
         ], md=12, lg=6),
         dbc.Col([
@@ -102,30 +106,19 @@ def update_output(contents, filename):
         ])
 
 @app.callback(
-    [Output('upscaling-status', 'children'),
-     Output('output-upscaled-image', 'children'),
-     Output('download-button', 'disabled')],
+    [Output('output-upscaled-image', 'children'),
+     Output('download-button', 'disabled'),
+     Output('loading-output', 'children')],
     Input('upscale-button', 'n_clicks'),
     State('upload-image', 'contents'),
     prevent_initial_call=True
 )
 def upscale_image_callback(n_clicks, contents):
     if contents is None:
-        return "Please upload an image first.", None, True
-    
-    status_div = html.Div([
-        dbc.Spinner(size="sm", color="primary", type="grow"),
-        html.Span(" Upscaling image... ", style={'marginLeft': '10px'}),
-        html.Div(className="pulsing-dot d-inline-block")
-    ])
+        return None, True, ""
     
     def upscale_thread():
-        nonlocal status_div
-        success = upscale_image(contents)
-        if success:
-            status_div = "Upscaling complete!"
-        else:
-            status_div = "Upscaling failed. Please try again."
+        upscale_image(contents)
     
     threading.Thread(target=upscale_thread).start()
     
@@ -136,9 +129,9 @@ def upscale_image_callback(n_clicks, contents):
         upscaled_image = html.Div([
             html.Img(src=f"data:image/png;base64,{base64.b64encode(generated_file).decode()}", style={'width': '100%'})
         ])
-        return status_div, upscaled_image, False
+        return upscaled_image, False, ""
     else:
-        return status_div, None, True
+        return None, True, ""
 
 @app.callback(
     Output("download-image", "data"),