!

app.py

@@ -81,11 +81,24 @@ with gr.Blocks(analytics_enabled=False , head=head , css=css, theme="bethecloud/
        
     # gr.Markdown(DESCRIPTION)
     # gr.Image(BASE_DIR + 'assets/images/banner-dugrainaupain.jpg', type='filepath')
-    gr.HTML(f'''<div style="width:100%; text-align:center"><img src="{BASE_URL}assets/images/banner-dugrainaupain.jpg" style="display: inline-block;"></div>''')
+    gr.HTML(f'''<div style="width:100%; text-align:left"><img src="{BASE_URL}assets/images/banner-dugrainaupain.jpg" style="display: inline-block;"></div>''')
 
     with gr.Tab("LE PROJET....."):
        gr.HTML(read_text_file("assets/html/intro.txt"))
 
+    with gr.Tab("Avant/Après"):
+	
+       aa_1 = ImageSlider(value=(f'{BASE_URL}assets/images/before-after/moulin-insitu-1-_1610534-BEFORE.jpg', 
+	                             f'{BASE_URL}assets/images/before-after/moulin-insitu-1-_1610534-AFTER.jpg') , 
+								 label="Vue de la route", 
+								 type="filepath", 
+								 slider_color="red", 
+								 interactive=False,
+								 width=800,
+								 height=600)
+
+    # print(BASE_DIR+'assets/images/before-after/moulin-insitu-1-_1610534-BEFORE.jpg')
+
     with gr.Tab("Images"):
         image_viewer = gr.Gallery(label="Generated images", 
                                   show_label=False, 
@@ -94,12 +107,11 @@ with gr.Blocks(analytics_enabled=False , head=head , css=css, theme="bethecloud/
                                   rows=[1], 
                                   object_fit="cover", 
                                   interactive=False,
-                                  value=images_files,
-                                  )
+                                  value=images_files)
 
     with gr.Tab("Modèles 3D"):
     
-        viewer_html = '''<div id="google-3D-viewer-container" style="width:1024px; height:600px;" style="flex: 1; display: flex; justify-content: center; align-items: center;">
+        viewer_html = '''<div id="google-3D-viewer-container" style="min-width:800px; width:100%; height:600px;" style="flex: 1; display: flex; justify-content: center; align-items: center;">
                             <model-viewer id="google-3D-viewer" style="width: 100%; height: 100%;" src="DEFAULT_MODEL_URL" auto-rotate camera-controls></model-viewer>                            
                          </div>                         
                          '''