Update app.py

app.py

@@ -51,8 +51,8 @@ def upscale_image(contents):
 # App layout
 app.layout = dbc.Container([
     html.H1("Image Upscaler", className="text-center my-4"),
-    dbc.Card([
-        dbc.CardBody([
+    dbc.Row([
+        dbc.Col([
             dcc.Upload(
                 id='upload-image',
                 children=html.Div([
@@ -71,13 +71,21 @@ app.layout = dbc.Container([
                 },
                 multiple=False
             ),
-            html.Div(id='output-image-upload'),
             dbc.Button("Upscale Image", id="upscale-button", color="primary", className="mt-3"),
-            html.Div(id='upscaling-status'),
-            html.Div(id='output-upscaled-image'),
+            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')
+        ], md=12, lg=6),
+        dbc.Col([
+            html.H4("Upscaled Image", className="mt-4"),
+            html.Div(id='output-upscaled-image')
+        ], md=12, lg=6),
     ]),
 ], fluid=True)
 
@@ -90,7 +98,6 @@ def update_output(contents, filename):
     if contents is not None:
         return dbc.Card([
             dbc.CardBody([
-                html.H4("Uploaded Image"),
                 html.Img(src=contents, style={'width': '100%'}),
                 html.P(filename)
             ])
@@ -127,12 +134,9 @@ def upscale_image_callback(n_clicks, contents):
         time.sleep(0.1)  # Wait for the upscaling to complete
     
     if generated_file:
-        upscaled_image = html.Div([
-            dbc.Card([
-                dbc.CardBody([
-                    html.H4("Upscaled Image"),
-                    html.Img(src=f"data:image/png;base64,{base64.b64encode(generated_file).decode()}", style={'width': '100%'})
-                ])
+        upscaled_image = dbc.Card([
+            dbc.CardBody([
+                html.Img(src=f"data:image/png;base64,{base64.b64encode(generated_file).decode()}", style={'width': '100%'})
             ])
         ])
         return status_div, upscaled_image, False