!

app.py

@@ -5,6 +5,7 @@ import pprint
 import sys
 from pathlib import Path
 from collections import OrderedDict
+from PIL import Image
 
 
 print('\n\n================================ START')
@@ -55,21 +56,73 @@ css = '''
 #gallery { height: 90% !important; } /* Adjusted for padding/margin if any */
 h1{text-align:center}
 '''
-
+  
 head = '''
 <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>
- '''
+<script defer src="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/index.js"></script>
+<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/img-comparison-slider@8/dist/styles.css"/>
+<style>
+  .custom-animated-handle {
+    transition: transform 0.2s;
+  }
 
+  .slider-with-animated-handle:hover .custom-animated-handle {
+    transform: scale(1.2);
+  }
+  
+        h1, h2 {
+            color: #0056b3;
+			# padding-bottom:10px;
+			padding-top:10px;
+        }
+        p {
+            margin: 1em 0;
+        }
+        .highlight {
+            color: #d9534f;
+            font-weight: bold;
+        }
+        .emphasis {
+            color: #5cb85c;
+            font-style: italic;
+        }  
+</style>
+ '''
+  
 def read_text_file(path:str)->str :
     with open(path, 'r', encoding='utf-8') as file:
 	    content = file.read()
     return content
 
+def read_PIL_images(filenames):
+    images = []
+    for filename in filenames:
+        try:
+            print(f'Loading {filename}......')
+            img = Image.open(filename)
+            images.append(img)
+            print(f'Loaded {filename}')
+        except Exception as e:
+            print(f"Error opening image {filename}: {e}")
+    return images
+
+def build_comparison_slider(before_url , after_url):
+    # @see https://img-comparison-slider.sneas.io/examples.html#always-show
+    html = f''' 
+		<img-comparison-slider class="slider-with-animated-handle" style="max-width:500px; --divider-width: 4px; --divider-color: #ff0000;">
+			<img slot="first" width="100%" src="{before_url}" />
+			<img slot="second" width="100%" src="{after_url}" />
+			<svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
+				<path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#fff" vector-effect="non-scaling-stroke"></path>
+			</svg>					
+		</img-comparison-slider>'''
+    
+    return html
 
 #print(head)
 #head = head.replace('BASE_URL_3D' , BASE_URL + dir_models3D )
 #print(head)
-  
+   
 with gr.Blocks(analytics_enabled=False , head=head , css=css, theme="bethecloud/storj_theme" , elem_id='gradio-container') as demo:
     
     
@@ -84,19 +137,35 @@ with gr.Blocks(analytics_enabled=False , head=head , css=css, theme="bethecloud/
     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.Row():
+            with gr.Column(scale=1):
+			    before = BASE_URL + 'assets/images/before-after/moulin-insitu-1-_1610534-BEFORE.jpg'
+			    after = BASE_URL + 'assets/images/before-after/moulin-insitu-1-_1610534-AFTER.jpg'
+                gr.HTML(build_comparison_slider(before , after)
+				
+            with gr.Column(scale=1):
+                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=400,
-								 height=600)
+	    with gr.Row():
+	
+	        before_after_1= gr.HTML(f''' 
+				<img-comparison-slider hover="hover" class="slider-with-animated-handle" style="max-width:500px; --divider-width: 4px; --divider-color: #ff0000;">
+					<img slot="first" width="100%" src="{BASE_URL}assets/images/before-after/moulin-insitu-1-_1610534-BEFORE.jpg" />
+					<img slot="second" width="100%" src="{BASE_URL}assets/images/before-after/moulin-insitu-1-_1610534-AFTER.jpg" />
+					<svg slot="handle" class="custom-animated-handle" xmlns="http://www.w3.org/2000/svg" width="100" viewBox="-8 -3 16 6">
+						<path stroke="#fff" d="M -5 -2 L -7 0 L -5 2 M -5 -2 L -5 2 M 5 -2 L 7 0 L 5 2 M 5 -2 L 5 2" stroke-width="1" fill="#fff" vector-effect="non-scaling-stroke"></path>
+					</svg>					
+				</img-comparison-slider>''')
+	   
+	        before_after_2 = gr.HTML(f''' 
+				<img-comparison-slider hover="hover" class="slider-with-animated-handle" style="max-width:500px; --divider-width: 4px; --divider-color: #ff0000;">
+					<img slot="first" width="100%" src="{BASE_URL}assets/images/before-after/moulin-insitu-1-_1610534-BEFORE.jpg" />
+					<img slot="second" width="100%" src="{BASE_URL}assets/images/before-after/moulin-insitu-1-_1610534-AFTER.jpg" />
+				</img-comparison-slider>''')
 
+	   
     print(f'{BASE_URL}assets/images/before-after/moulin-insitu-1-_1610534-BEFORE.jpg')
     print(f'{BASE_URL}assets/images/before-after/moulin-insitu-1-_1610534-AFTER.jpg')
 

assets/html/intro.txt

@@ -16,7 +16,7 @@
         .container {
             max-width: 800px;
             margin: auto;
-            padding: 20px;
+            padding: 0px;
             background-color: #fff;
         }
         h1, h2 {
@@ -39,7 +39,7 @@
 </head>
 <body>
     <div class="container">
-        <h1>Un Vent de Solidarité sur Belle-Île-en-Mer</h1>
+        <h1>Énergie Solidaire sur Belle-Île-en-Mer</h1>
         <p><span class="highlight">Belle-Île-en-Mer</span>, joyau de la Bretagne, s'apprête à accueillir un projet ambitieux et unique en son genre : la construction d'un moulin à vent destiné à moudre du blé et à produire de la farine. Cette initiative est portée par l'association à but non lucratif <span class="highlight">"DU GRAIN AU PAIN"</span>.</p>
 
         <h2>Un Projet pour Revitaliser l'Artisanat Local</h2>