!

app.py

@@ -48,7 +48,7 @@ video_files = [BASE_URL + dir_videos + name for name in video_names]
 #print(video_files)
 
 
-DESCRIPTION = """## PROJET MOULIN SIMON """
+DESCRIPTION = """# PROJET MOULIN SIMON """
 
 css = '''
 .gradio-container {max-width: 1280px !important; height:90%;}
@@ -60,10 +60,16 @@ head = '''
 <script type="module" src="https://ajax.googleapis.com/ajax/libs/model-viewer/3.5.0/model-viewer.min.js"></script>
  '''
 
+def read_text_file(path:str)->str :
+    with open(path, 'r', encoding='utf-8') as file:
+	    content = file.read()
+    return content
+
+
 #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:
     
     
@@ -72,8 +78,13 @@ with gr.Blocks(analytics_enabled=False , head=head , css=css, theme="bethecloud/
     #    js_str = f.read()
     #demo.load(_js=js_str)    
     
-    
-    gr.Markdown(DESCRIPTION)
+       
+    # gr.Markdown(DESCRIPTION)
+    # gr.Image(BASE_DIR + 'assets/images/banner-dugrainaupain.jpg', type='filepath')
+    gr.HTML('''<img src="assets/images/banner-dugrainaupain.jpg">''')
+
+    with gr.Tab("LE PROJET....."):
+       gr.HTML(read_text_file("assets/html/intro.txt"))
 
     with gr.Tab("Images"):
         image_viewer = gr.Gallery(label="Generated images", 

infos.txt

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

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);
+}