Upload app.py

app.py

@@ -145,57 +145,49 @@ def run(fibers: Image.Image, rings: Image.Image, num_steps: int):
 
         # Construire le HTML/JS pour le visualiseur Three.js
         html = f"""
-<div id="viewer" style="width:100%;height:480px; border:1px solid #ddd;"></div>
-<p style="font-size:0.9em;color:#444;margin-top:6px;">Manipulez la souris pour faire tourner, molette pour zoomer.</p>
+<div id="viewer" style="width:100%;height:480px; border:1px solid #ddd; position:relative;background:#f6f6f6;">
+  <div id="viewer-msg" style="position:absolute;left:8px;top:8px;padding:6px 8px;background:rgba(255,255,255,0.9);border-radius:6px;font-size:12px;color:#333;z-index:2;">
+    Manipulez la souris pour tourner, molette pour zoomer.
+  </div>
+</div>
 <script src="https://unpkg.com/three@0.152.2/build/three.min.js"></script>
 <script src="https://unpkg.com/three@0.152.2/examples/js/controls/OrbitControls.js"></script>
 <script>
 (function() {{
-  const images = {data_uris!r}; // array of 4 data URIs
-
-  // cleanup previous canvas if any
+  const images = {data_uris!r};
   const container = document.getElementById('viewer');
-  container.innerHTML = "";
-
-  const scene = new THREE.Scene();
-  const camera = new THREE.PerspectiveCamera(45, container.clientWidth / container.clientHeight, 0.1, 1000);
-  camera.position.set(2.5, 2.0, 3.5);
-
-  const renderer = new THREE.WebGLRenderer({{antialias:true}});
-  renderer.setSize(container.clientWidth, container.clientHeight);
-  renderer.setPixelRatio(window.devicePixelRatio ? window.devicePixelRatio : 1);
-  container.appendChild(renderer.domElement);
-
-  // Lights (soft)
-  const hemi = new THREE.HemisphereLight(0xffffff, 0x444444, 1.0);
-  scene.add(hemi);
-
-  // Load textures from data URIs
-  const loader = new THREE.TextureLoader();
-  const texPromises = images.map((uri) => new Promise((res, rej) => {{
-    loader.load(uri, (tex) => {{ tex.flipY = false; res(tex); }}, undefined, rej);
-  }}));
-
-  Promise.all(texPromises).then((textures) => {{
-    // materials for box: order is [right, left, top, bottom, front, back]
-    const neutral = new THREE.MeshBasicMaterial({{ color:0xcccccc }});
-    const mats = [
-      new THREE.MeshBasicMaterial({{ map: textures[0] }}), // right
-      new THREE.MeshBasicMaterial({{ map: textures[1] }}), // left
-      neutral,                                            // top
-      neutral,                                            // bottom
-      new THREE.MeshBasicMaterial({{ map: textures[2] }}), // front
-      new THREE.MeshBasicMaterial({{ map: textures[3] }})  // back
-    ];
-
-    // ensure correct filtering / orientation
-    mats.forEach(m => {{ if (m.map) {{ m.map.minFilter = THREE.LinearFilter; m.map.wrapS = THREE.ClampToEdgeWrapping; m.map.wrapT = THREE.ClampToEdgeWrapping; }} }});
 
+  function safeLog(...args) {{ try{{console.log(...args)}}catch(e){{}} }}
+
+  function initScene() {{
+    const w = container.clientWidth || 800;
+    const h = container.clientHeight || 480;
+
+    const scene = new THREE.Scene();
+    const camera = new THREE.PerspectiveCamera(45, w/h, 0.1, 1000);
+    camera.position.set(2.5, 2.0, 3.5);
+
+    const renderer = new THREE.WebGLRenderer({{antialias:true}});
+    renderer.setSize(w, h);
+    renderer.domElement.style.width = '100%';
+    renderer.domElement.style.height = '100%';
+    container.appendChild(renderer.domElement);
+
+    // lights
+    const ambient = new THREE.AmbientLight(0xffffff, 0.7);
+    scene.add(ambient);
+    const dir = new THREE.DirectionalLight(0xffffff, 0.6);
+    dir.position.set(5,10,7);
+    scene.add(dir);
+
+    // fallback cube (visible immédiatement)
     const geometry = new THREE.BoxGeometry(1.6,1.6,1.6);
-    const cube = new THREE.Mesh(geometry, mats);
+    const fallbackMats = [];
+    for (let i=0;i<6;i++) fallbackMats.push(new THREE.MeshStandardMaterial({{color:0x999999}}));
+    const cube = new THREE.Mesh(geometry, fallbackMats);
     scene.add(cube);
 
-    // grid & axes for context
+    // grid for context
     const grid = new THREE.GridHelper(6, 12, 0x888888, 0x444444);
     grid.position.y = -1.2;
     scene.add(grid);
@@ -203,27 +195,85 @@ def run(fibers: Image.Image, rings: Image.Image, num_steps: int):
     // controls
     const controls = new THREE.OrbitControls(camera, renderer.domElement);
     controls.enableDamping = true;
-    controls.dampingFactor = 0.07;
+    controls.dampingFactor = 0.08;
     controls.target.set(0,0,0);
 
-    // responsive
-    function onWindowResize() {{
-      renderer.setSize(container.clientWidth, container.clientHeight);
-      camera.aspect = container.clientWidth / container.clientHeight;
-      camera.updateProjectionMatrix();
-    }}
-    window.addEventListener('resize', onWindowResize);
+    // attempt to load textures, but keep fallback if it fails
+    const loader = new THREE.TextureLoader();
+    Promise.all(images.map(uri => new Promise((res, rej) => {{
+      try {{
+        loader.load(uri, tex => {{ tex.flipY = false; tex.generateMipmaps = true; res(tex); }}, undefined, err => rej(err));
+      }} catch(e) {{ rej(e); }}
+    }}))).then(textures => {{
+      safeLog('Textures loaded', textures);
+      const mats = [
+        new THREE.MeshStandardMaterial({{map: textures[0]}}), // right
+        new THREE.MeshStandardMaterial({{map: textures[1]}}), // left
+        new THREE.MeshStandardMaterial({{color:0xcccccc}}),    // top
+        new THREE.MeshStandardMaterial({{color:0xcccccc}}),    // bottom
+        new THREE.MeshStandardMaterial({{map: textures[2]}}), // front
+        new THREE.MeshStandardMaterial({{map: textures[3]}})  // back
+      ];
+      // set wrapping/filter
+      mats.forEach(m => {{
+        if (m.map) {{
+          m.map.minFilter = THREE.LinearFilter;
+          m.map.wrapS = THREE.ClampToEdgeWrapping;
+          m.map.wrapT = THREE.ClampToEdgeWrapping;
+        }}
+      }});
+      cube.material = mats;
+    }}).catch(err => {{
+      safeLog('Erreur chargement textures (on garde fallback):', err);
+      // affiche un petit message utilisateur (optionnel)
+      const msg = document.getElementById('viewer-msg');
+      if (msg) msg.innerText = "Rendu 3D : textures non chargées, affichage fallback (voir console).";
+    }});
 
     // animation loop
-    (function animate() {{
+    function animate() {{
       requestAnimationFrame(animate);
       controls.update();
       renderer.render(scene, camera);
-    }})();
-  }}).catch((e) => {{
-    container.innerHTML = "<div style='padding:16px;color:#900;'>Erreur chargement textures : " + (e && e.message ? e.message : e) + "</div>";
-    console.error(e);
-  }});
+    }}
+    animate();
+
+    // responsive: observe container size
+    if (typeof ResizeObserver !== 'undefined') {{
+      const ro = new ResizeObserver(() => {{
+        const ww = container.clientWidth || 800;
+        const hh = container.clientHeight || 480;
+        renderer.setSize(ww, hh);
+        camera.aspect = ww / hh;
+        camera.updateProjectionMatrix();
+      }});
+      ro.observe(container);
+    }} else {{
+      window.addEventListener('resize', () => {{
+        const ww = container.clientWidth || 800;
+        const hh = container.clientHeight || 480;
+        renderer.setSize(ww, hh);
+        camera.aspect = ww / hh;
+        camera.updateProjectionMatrix();
+      }});
+    }}
+  }}
+
+  // wait until container has non-zero size and THREE is available
+  let tries = 0;
+  function waitForReady() {{
+    tries++;
+    if (container.clientWidth > 0 && typeof THREE !== 'undefined') {{
+      try {{ initScene(); }} catch(e) {{ safeLog('Erreur initScene', e); container.innerHTML = "<div style='padding:10px;color:#900;'>Erreur initialisation rendu 3D (voir console)</div>"; }}
+    }} else {{
+      if (tries < 60) setTimeout(waitForReady, 100);
+      else {{
+        // give it one last try
+        try {{ initScene(); }} catch(e) {{ safeLog('Derniere tentative échouée', e); container.innerHTML = "<div style='padding:10px;color:#900;'>Impossible d'initialiser le rendu 3D (voir console)</div>"; }}
+      }}
+    }}
+  }}
+  waitForReady();
 }})();
 </script>
 """