Update app.py

app.py

@@ -1,31 +1,53 @@
 import gradio as gr
+from gradio_imageslider import ImageSlider
 import os
 import pprint
+import sys
+from pathlib import Path
+from collections import OrderedDict
 
+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') or f.endswith('.splat')]
-model3D_files = [BASE_URL + dir_models3D + n for n in model3D_names]
+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 + n , n) for n in images_names]
+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 + n for n in video_names]
-
+video_files = [BASE_URL + dir_videos + name for name in video_names]
 
 
-print(model3D_files)
-print(images_files)
-print(video_files)
+#print(model3D_files)
+#print(images_files)
+#print(video_files)
 
 
-DESCRIPTION = """## PROJET MOULIN SIMON (Visualisation des medias) """
+DESCRIPTION = """## PROJET MOULIN SIMON """
 
 css = '''
 .gradio-container {max-width: 1280px !important; height:90%;}
@@ -33,10 +55,60 @@ css = '''
 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>
+ '''
+
+#print(head)
+#head = head.replace('BASE_URL_3D' , BASE_URL + dir_models3D )
+#print(head)
 
-with gr.Blocks(analytics_enabled=False , css=css, theme="bethecloud/storj_theme" , elem_id='gradio-container') as demo:
+with gr.Blocks(analytics_enabled=False , head=head , css=css, theme="bethecloud/storj_theme" , elem_id='gradio-container') as demo:
+    
     gr.Markdown(DESCRIPTION)
+
+    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="width:1024px; 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)
+        # print(viewer_html)
+        
+        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("Modèles 3D"):
         
         model_viewer = gr.Model3D(clear_color=[0.0, 0.0, 0.0, 0.0], label="3D Model" , interactive=False , value=model3D_files[0])
@@ -59,21 +131,11 @@ with gr.Blocks(analytics_enabled=False , css=css, theme="bethecloud/storj_theme"
             return model_file
             
         model_selection.change(fn=load_mesh, inputs=model_selection, outputs=model_viewer)
-
-    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("Videos"):
     
-        video_viewer = gr.Video(interactive = False, value=video_files[0])
+        video_viewer = gr.Video(interactive=False, value=video_files[0])
 
         with gr.Row(visible=True):
         
@@ -95,4 +157,4 @@ with gr.Blocks(analytics_enabled=False , css=css, theme="bethecloud/storj_theme"
 
     
 if __name__ == "__main__":
-    demo.launch(debug=False, show_api=False) 
+    demo.launch(debug=not IN_SPACE, show_api=False)