Update app.py

app.py

@@ -73,18 +73,18 @@ app.layout = dbc.Container([
             ),
             dbc.Button("Upscale Image", id="upscale-button", color="primary", className="mt-3"),
             html.Div(id='upscaling-status', className="mt-3"),
-            dbc.Button("Download Upscaled Image", id="download-button", color="success", className="mt-3", disabled=True),
-            dcc.Download(id="download-image")
         ], md=12, lg=6),
     ]),
     dbc.Row([
         dbc.Col([
             html.H4("Original Image", className="mt-4"),
-            html.Div(id='output-image-upload')
+            dbc.Card(id='output-image-upload', body=True)
         ], md=12, lg=6),
         dbc.Col([
             html.H4("Upscaled Image", className="mt-4"),
-            html.Div(id='output-upscaled-image')
+            dbc.Card(id='output-upscaled-image', body=True),
+            dbc.Button("Download Upscaled Image", id="download-button", color="success", className="mt-3", disabled=True),
+            dcc.Download(id="download-image")
         ], md=12, lg=6),
     ]),
 ], fluid=True)
@@ -96,11 +96,9 @@ app.layout = dbc.Container([
 )
 def update_output(contents, filename):
     if contents is not None:
-        return dbc.Card([
-            dbc.CardBody([
-                html.Img(src=contents, style={'width': '100%'}),
-                html.P(filename)
-            ])
+        return html.Div([
+            html.Img(src=contents, style={'width': '100%'}),
+            html.P(filename)
         ])
 
 @app.callback(
@@ -117,7 +115,7 @@ def upscale_image_callback(n_clicks, contents):
     
     status_div = html.Div([
         html.P("Upscaling image... ", style={'display': 'inline'}),
-        html.Div(className="dot-flashing")
+        html.Div(className="pulsing-dot")
     ])
     
     def upscale_thread():
@@ -134,10 +132,8 @@ def upscale_image_callback(n_clicks, contents):
         time.sleep(0.1)  # Wait for the upscaling to complete
     
     if generated_file:
-        upscaled_image = dbc.Card([
-            dbc.CardBody([
-                html.Img(src=f"data:image/png;base64,{base64.b64encode(generated_file).decode()}", style={'width': '100%'})
-            ])
+        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
     else: