!

app.py

@@ -0,0 +1,213 @@
+import gradio as gr
+from gradio_imageslider import ImageSlider
+import os
+import pprint
+import sys
+from pathlib import Path
+from collections import OrderedDict
+from PIL import Image
+
+
+print('\n\n================================ START')
+
+SEP = os.path.sep
+BASE_URL = "https://huggingface.co/spaces/menorki/projet-moulin-belle-ile/resolve/main/"
+BASE_PATH = Path(__file__).resolve().parent 
+BASE_DIR = str(BASE_PATH) + SEP
+IN_SPACE = os.environ.get("SPACE_AUTHOR_NAME") in ["menorki"]
+
+TMP_PATH = BASE_PATH / 'gradio_tmp'
+TMP_DIR = str(TMP_PATH) + SEP
+#if TMP_DIR.exists():
+#    shutil.rmtree(str(TMP_DIR))
+TMP_PATH.mkdir(exist_ok=True, parents=True)
+os.environ['GRADIO_TEMP_DIR'] = TMP_DIR
+
+print(f"BASE_URL: {BASE_URL}")
+print(f"BASE_DIR: {BASE_DIR}")
+print(f"TMP_DIR: {TMP_DIR}")
+print(f"IN_SPACE: {IN_SPACE}")
+
+dir_models3D = "assets/windmill/models3D/"
+dir_images = "assets/windmill/images/"
+dir_videos = "assets/windmill/videos/"
+
+# gr.set_static_paths(paths=[f"{BASE_DIR}assets/windmill"])
+
+model3D_names = [f for f in os.listdir(dir_models3D) if f.endswith('.gltf') or f.endswith('.obj') or f.endswith('.glb')]
+model3D_files = [BASE_URL + dir_models3D + name for name in model3D_names]
+
+images_names = [f for f in os.listdir(dir_images) if f.endswith('.jpg') or f.endswith('.png')]
+images_files = [(BASE_URL + dir_images + name , name) for name in images_names]
+
+video_names = [f for f in os.listdir(dir_videos) if f.endswith('.mp4') or f.endswith('.avi')]
+video_files = [BASE_URL + dir_videos + name for name in video_names]
+
+
+DESCRIPTION = """# PROJET MOULIN SIMON """
+
+css = '''
+.gradio-container {max-width: 1280px !important; height:90%;}
+#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
+
+with gr.Blocks(analytics_enabled=False , head=head , css=css, theme="bethecloud/storj_theme" , elem_id='gradio-container') as demo:
+    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....."):
+	 
+        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"):
+        with gr.Row():
+            before = BASE_URL + 'assets/images/before-after/moulin-insitu-1-_1610534-schema-BEFORE.jpg'
+            after = BASE_URL + 'assets/images/before-after/moulin-insitu-1-_1610534-AFTER.jpg'	
+            gr.HTML(build_comparison_slider(before , after))
+            
+            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))
+            
+            print(f'{BASE_URL}assets/images/before-after/moulin-insitu-1-_1610534-schema-BEFORE.jpg')
+            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')
+
+
+    with gr.Tab("Images"):
+        image_viewer = gr.Gallery(label="Generated images", 
+                                  show_label=False, 
+                                  elem_id='gallery', 
+                                  columns=[3], 
+                                  rows=[1], 
+                                  object_fit="cover", 
+                                  interactive=False,
+                                  value=images_files)
+        
+
+    with gr.Tab("Modèles 3D"):
+    
+        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>                         
+                         '''
+                
+        viewer_html = viewer_html.replace('DEFAULT_MODEL_URL' , BASE_URL + dir_models3D + model3D_names[0])
+        viewer_html = viewer_html.replace('BASE_URL_3D' , BASE_URL + dir_models3D)
+        
+        google_viewer = gr.HTML(viewer_html)
+
+        with gr.Row(visible=True):
+        
+            model_selection = gr.Radio(
+                show_label=True,
+                container=True,
+                interactive=True,
+                choices=model3D_names,
+                value=model3D_names[0],
+                label="Selectionner un modèle 3D :",
+            )
+            
+        # js = f"(name) => document.getElementById('google-3D-viewer').src = '{BASE_URL + dir_models3D}' + name"
+        model_selection.change(fn=None, 
+                               inputs=model_selection, 
+                               outputs=None ,  
+                               js=f"(name) => document.getElementById('google-3D-viewer').src = '{BASE_URL + dir_models3D}' + name")
+
+
+    with gr.Tab("Videos"):
+    
+        video_viewer = gr.Video(interactive=False, value=video_files[0])
+
+        with gr.Row(visible=True):
+        
+            video_selection = gr.Radio(
+                show_label=True,
+                container=True,
+                interactive=True,
+                choices=video_names,
+                value=video_names[0],
+                label="Selectionner une video:"
+            )
+
+        def load_video(video_name):
+            video_file = BASE_URL + dir_videos + video_name
+            print(f'LOADING VIDEO: {video_file}')
+            return video_file
+            
+        video_selection.change(fn=load_video, inputs=video_selection, outputs=video_viewer)
+
+
+if __name__ == "__main__":
+    demo.launch(debug=not IN_SPACE, show_api=False) 

assets/html/intro.txt

@@ -0,0 +1,15 @@
+<div class="container">
+        <h2>É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>
+        <p>L'idée de ce projet est simple mais audacieuse : construire un moulin à vent traditionnel sur l'île pour moudre du blé cultivé localement. La farine produite sera ensuite vendue aux commerces locaux tels que les <span class="highlight">boulangeries</span> et les <span class="highlight">crêperies</span>. Ce projet vise non seulement à <span class="emphasis">revitaliser l'artisanat local</span>, mais aussi à promouvoir des pratiques agricoles durables et à renforcer l'économie de l'île.</p>
+
+        <h2>Un Patrimoine à Préserver</h2>
+        <p>Les moulins à vent font partie intégrante du patrimoine de Belle-Île-en-Mer. En construisant ce moulin, nous souhaitons rendre hommage à cette tradition et offrir à la communauté un symbole de <span class="emphasis">solidarité et de durabilité</span>. Le moulin sera également un lieu éducatif où les visiteurs pourront découvrir les méthodes de mouture traditionnelles et en apprendre davantage sur l'histoire de l'île.</p>
+
+        <h2>Participez à Notre Campagne de Financement Participatif</h2>
+        <p>Pour réaliser ce projet, nous lançons une campagne de <span class="highlight">financement participatif</span>. Chaque contribution, qu'elle soit petite ou grande, nous rapprochera de notre objectif. En soutenant ce projet, vous contribuez à la préservation de notre patrimoine et à la promotion d'une économie locale <span class="emphasis">durable</span>.</p>
+
+        <p>Rejoignez-nous dans cette aventure et aidez-nous à faire souffler un vent de solidarité sur Belle-Île-en-Mer. Ensemble, construisons le <span class="highlight">Moulin Simon</span> et faisons de ce rêve une réalité !</p>
+</div>

infos.txt

@@ -0,0 +1,2 @@
+https://huggingface.co/spaces/menorki/projet-moulin-belle-ile
+https://menorki-projet-moulin-belle-ile.hf.space/

requirements.txt

@@ -0,0 +1,3 @@
+gradio
+gradio_imageslider
+Pillow

script.js

@@ -0,0 +1,116 @@
+function demo_load(x) {
+    document.body.scrollTop = document.documentElement.scrollTop = 0;
+
+    function gradioApp() {
+        const elems = document.getElementsByTagName('gradio-app');
+        const elem = elems.length == 0 ? document : elems[0];
+    
+        if (elem !== document) {
+            elem.getElementById = function(id) {
+                return document.getElementById(id);
+            };
+        }
+        return elem.shadowRoot ? elem.shadowRoot : elem;
+    }
+
+    function all_gallery_buttons() {
+        var allGalleryButtons = gradioApp().querySelectorAll('#outputgallery .thumbnail-item.thumbnail-small');
+        var visibleGalleryButtons = [];
+        allGalleryButtons.forEach(function(elem) {
+            if (elem.parentElement.offsetParent) {
+                visibleGalleryButtons.push(elem);
+            }
+        });
+        return visibleGalleryButtons;
+    }
+    
+    function selected_gallery_button() {
+        return all_gallery_buttons().find(elem => elem.classList.contains('selected')) ?? null;
+    }
+    
+    function selected_gallery_index() {
+        return all_gallery_buttons().findIndex(elem => elem.classList.contains('selected'));
+    }
+
+    function loadImg(src){
+        return new Promise((resolve, reject) => {
+          let img = new Image()
+          img.onload = () => resolve(img)
+          img.onerror = reject
+          img.src = src
+        })
+    }
+
+    async function resize_b64_img(b64_img, max_side=2048) {
+        var img = await loadImg(b64_img);
+        naturalWidth = img.naturalWidth;
+        naturalHeight = img.naturalHeight;
+
+        if (naturalWidth > max_side || naturalHeight > max_side) {
+            var width = 0;
+            var height = 0;
+            if (naturalWidth >= naturalHeight) {
+                width = max_side;
+                height = Math.ceil((max_side / naturalWidth) * naturalHeight);
+            } else {
+                height = max_side;
+                width = Math.ceil((max_side / naturalHeight) * naturalWidth);
+            }
+
+            var canvas = document.createElement('canvas');
+            ctx = canvas.getContext('2d');
+            canvas.width = width;
+            canvas.height = height;
+            ctx.drawImage(img, 0, 0, width, height);
+            return canvas.toDataURL();
+        }
+        return b64_img;
+    }
+
+    // fix image preview on mobile
+    function imageMaskResize() {
+        const canvases = gradioApp().querySelectorAll('#inputmask canvas');
+        if (!canvases.length) {
+            window.removeEventListener('resize', imageMaskResize);
+            return;
+        }
+    
+        const wrapper = canvases[0].closest('.wrap');
+        const previewImage = wrapper.previousElementSibling;
+    
+        if (!previewImage.complete) {
+            previewImage.addEventListener('load', imageMaskResize);
+            return;
+        }
+    
+        const w = previewImage.width;
+        const h = previewImage.height;
+        const nw = previewImage.naturalWidth;
+        const nh = previewImage.naturalHeight;
+        const portrait = nh > nw;
+    
+        const wW = Math.min(w, portrait ? h / nh * nw : w / nw * nw);
+        const wH = Math.min(h, portrait ? h / nh * nh : w / nw * nh);
+    
+        wrapper.style.width = `${wW}px`;
+        wrapper.style.height = `${wH}px`;
+        wrapper.style.left = `0px`;
+        wrapper.style.top = `0px`;
+    
+        canvases.forEach(c => {
+            c.style.width = c.style.height = '';
+            c.style.maxWidth = '100%';
+            c.style.maxHeight = '100%';
+            c.style.objectFit = 'contain';
+        });
+    }
+
+    window.gradioApp = gradioApp
+    window.all_gallery_buttons = all_gallery_buttons
+    window.selected_gallery_button = selected_gallery_button
+    window.selected_gallery_index = selected_gallery_index
+    window.resize_b64_img = resize_b64_img
+    window.imageMaskResize = imageMaskResize;
+
+    window.addEventListener('resize', imageMaskResize);
+}