Spaces:

CarolineM5
/

BoardGenerator_4_Faces

Sleeping

App Files Files Community

CarolineM5 commited on Oct 17, 2025

Commit

8c9164c

verified ·

1 Parent(s): bffac01

Upload app.py

Browse files

Files changed (1) hide show

app.py +176 -119

app.py CHANGED Viewed

@@ -7,7 +7,7 @@ Created on Tue Jun 10 11:16:28 2025
 import gradio as gr
 from PIL import Image
-import io, base64, json
 import torch
 from inference import inference
 from diffusers import StableDiffusionInstructPix2PixPipeline, UNet2DModel, AutoencoderKL, DDPMScheduler
@@ -71,135 +71,192 @@ pipe = StableDiffusionInstructPix2PixPipeline(
 pipe = pipe.to(torch.float32).to(device)
 # @spaces.GPU
-def pil_to_dataurl(img: Image.Image, fmt="PNG"):
     buf = io.BytesIO()
-    img.save(buf, format=fmt)
-    b64 = base64.b64encode(buf.getvalue()).decode("ascii")
-    return f"data:image/{fmt.lower()};base64,{b64}"
-# small three.js HTML template: imgs_list will be a JSON array of 4 data-urls in JS order [TL,TR,BL,BR]
-HTML_TEMPLATE = """
-<!doctype html>
-<html>
-<head>
-  <meta charset="utf-8">
-  <style>body{{ margin:0; }} #three-root{{ width:100%; height:420px; }}</style>
-</head>
-<body>
-<div id="three-root"></div>
-<script src="https://cdn.jsdelivr.net/npm/three@0.158.0/build/three.min.js"></script>
 <script>
-(function(){{
-  const imgs = {imgs_list}; // [TL,TR,BL,BR]
-  const container = document.getElementById('three-root');
-  // minimal renderer + camera
-  const renderer = new THREE.WebGLRenderer({{antialias:true}});
-  renderer.setSize(container.clientWidth, 420);
-  container.appendChild(renderer.domElement);
   const scene = new THREE.Scene();
-  scene.background = new THREE.Color(0xf7f7f7);
-  const camera = new THREE.PerspectiveCamera(45, container.clientWidth / 420, 0.1, 1000);
-  camera.position.set(1.8, 1.1, 2.4);
-  camera.lookAt(0,0,0);
-  const hemi = new THREE.HemisphereLight(0xffffff, 0x444444, 0.9);
-  hemi.position.set(0, 20, 0); scene.add(hemi);
-  const dir = new THREE.DirectionalLight(0xffffff, 0.7); dir.position.set(3,10,5); scene.add(dir);
-  const loader = new THREE.TextureLoader();
-  // mapping: imgs[0]=TL, imgs[1]=TR, imgs[2]=BL, imgs[3]=BR
-  // We assign images to faces: left, right, front, back (top/bottom neutral)
-  const neutral = 'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAE0lEQVQImWNgYGBgYAAAAAQAAV6CkXkAAAAAASUVORK5CYII=';
-  const tex_right = loader.load(imgs[1]);
-  const tex_left  = loader.load(imgs[0]);
-  const tex_front = loader.load(imgs[2]);
-  const tex_back  = loader.load(imgs[3]);
-  const tex_top   = loader.load(neutral);
-  const tex_bottom= loader.load(neutral);
-  [tex_right,tex_left,tex_front,tex_back,tex_top,tex_bottom].forEach(t=>{
-    t.wrapS = THREE.ClampToEdgeWrapping;
-    t.wrapT = THREE.ClampToEdgeWrapping;
-    t.encoding = THREE.sRGBEncoding;
-  });
-  const materials = [
-    new THREE.MeshStandardMaterial({map: tex_right}), // px
-    new THREE.MeshStandardMaterial({map: tex_left}),  // nx
-    new THREE.MeshStandardMaterial({map: tex_top}),   // py
-    new THREE.MeshStandardMaterial({map: tex_bottom}),// ny
-    new THREE.MeshStandardMaterial({map: tex_front}), // pz
-    new THREE.MeshStandardMaterial({map: tex_back})   // nz
-  ];
-  // Box geometry (width,height,depth) — depth small to simulate board thickness
-  const geometry = new THREE.BoxGeometry(1.0, 1.0, 0.26);
-  const box = new THREE.Mesh(geometry, materials);
-  scene.add(box);
-  // simple drag-to-rotate
-  let dragging=false, lastX=0, lastY=0;
-  container.addEventListener('pointerdown', e=>{{ dragging=true; lastX=e.clientX; lastY=e.clientY; }});
-  window.addEventListener('pointerup', ()=>dragging=false);
-  window.addEventListener('pointermove', e=>{{ if(!dragging) return; const dx=(e.clientX-lastX)/200; const dy=(e.clientY-lastY)/200; box.rotation.y += dx; box.rotation.x += dy; lastX=e.clientX; lastY=e.clientY; }});
-  function animate(){{ requestAnimationFrame(animate); renderer.render(scene, camera); }}
-  animate();
-  // responsive
-  new ResizeObserver(()=>{{ const w = container.clientWidth; renderer.setSize(w,420); camera.aspect = w/420; camera.updateProjectionMatrix(); }}).observe(container);
 }})();
 </script>
-</body>
-</html>
-"""
-# --- new gradio_generate that returns both gallery and 3D html ---
-def gradio_generate(fibers: Image.Image, rings: Image.Image, num_steps: int):
-    """
-    fibers: PIL image containing 4 tiles in a 2x2 square (order 1,4,2,3)
-    rings:  same
-    returns: (list_of_4_PIL_images, html_string_for_3d)
-    """
-    # call your inference function (unchanged)
-    preds = inference(pipe, fibers, rings, int(num_steps))  # preds order: [1,4,2,3] -> TL,TR,BL,BR
-    # convert preds to RGB for gallery
-    preds_rgb = [p.convert("RGB") if p.mode != "RGB" else p for p in preds]
-    # build data-urls in same order
-    data_urls = [pil_to_dataurl(im, fmt="PNG") for im in preds_rgb]  # [TL,TR,BL,BR]
-    # safe JSON array literal for injection into HTML template
-    js_img_list = json.dumps(data_urls)
-    html = HTML_TEMPLATE.replace("___IMGS___", js_img_list)
-    # gr.Interface expects outputs matching signature; we return (gallery_images, html_string)
-    return preds_rgb, html
-# replace the Interface outputs: first a Gallery, second a HTML component
-iface = gr.Interface(
-    fn=gradio_generate,
-    inputs=[
-        gr.Image(type="pil", label="Fiber"),
-        gr.Image(type="pil", label="Ring"),
-        gr.Number(value=10, label="Number of inference steps"),
-    ],
-    outputs=[
-        gr.HTML(label="3D preview")
-    ],
-    title="Photorealistic wood generator (4 faces)",
-    description="""
-Upload 2 images (one with four fiber maps and one with four ring maps) arranged as a 2x2 square.
-The model returns four generated faces (one per tile) and a 3D preview with those faces textured on a box.
 """
-)
 if __name__ == "__main__":
-    iface.launch(server_name="0.0.0.0", server_port=7860, share=True)

 import gradio as gr
 from PIL import Image
+import io, base64, json, traceback
 import torch
 from inference import inference
 from diffusers import StableDiffusionInstructPix2PixPipeline, UNet2DModel, AutoencoderKL, DDPMScheduler
 pipe = pipe.to(torch.float32).to(device)
 # @spaces.GPU
+def pil_to_data_uri(img: Image.Image) -> str:
     buf = io.BytesIO()
+    img.save(buf, format="PNG")
+    b = base64.b64encode(buf.getvalue()).decode("utf-8")
+    return f"data:image/png;base64,{b}"
+# # --- new gradio_generate that returns both gallery and 3D html ---
+# def gradio_generate(fibers: Image.Image, rings: Image.Image, num_steps: int):
+#     """
+#     fibers: PIL image containing 4 tiles in a 2x2 square (order 1,4,2,3)
+#     rings:  same
+#     returns: (list_of_4_PIL_images, html_string_for_3d)
+#     """
+#     # call your inference function (unchanged)
+#     preds = inference(pipe, fibers, rings, int(num_steps))  # preds order: [1,4,2,3] -> TL,TR,BL,BR
+#     # convert preds to RGB for gallery
+#     preds_rgb = [p.convert("RGB") if p.mode != "RGB" else p for p in preds]
+#     # build data-urls in same order
+#     data_urls = [pil_to_dataurl(im, fmt="PNG") for im in preds_rgb]  # [TL,TR,BL,BR]
+#     # safe JSON array literal for injection into HTML template
+#     js_img_list = json.dumps(data_urls)
+#     html = HTML_TEMPLATE.replace("___IMGS___", js_img_list)
+#     # gr.Interface expects outputs matching signature; we return (gallery_images, html_string)
+#     return preds_rgb, html
+# # replace the Interface outputs: first a Gallery, second a HTML component
+# iface = gr.Interface(
+#     fn=gradio_generate,
+#     inputs=[
+#         gr.Image(type="pil", label="Fiber"),
+#         gr.Image(type="pil", label="Ring"),
+#         gr.Number(value=10, label="Number of inference steps"),
+#     ],
+#     outputs=[
+#         gr.HTML(label="3D preview")
+#     ],
+#     title="Photorealistic wood generator (4 faces)",
+#     description="""
+# Upload 2 images (one with four fiber maps and one with four ring maps) arranged as a 2x2 square.
+# The model returns four generated faces (one per tile) and a 3D preview with those faces textured on a box.
+# """
+# )
+def run(fibers: Image.Image, rings: Image.Image, num_steps: int):
+    try:
+        # appelle la fonction d'inference de l'utilisateur
+        outputs = inference(pipe, fibers, rings, int(num_steps))
+        if not (isinstance(outputs, (list,tuple)) and len(outputs) >= 4):
+            raise ValueError("La fonction d'inference doit renvoyer une liste/tuple de 4 images.")
+        # Prendre les 4 premières images
+        imgs = outputs[:4]
+        # Convertir en PIL si nécessaire et assurer taille raisonnable
+        pil_imgs = []
+        for im in imgs:
+            if isinstance(im, np.ndarray):
+                im = Image.fromarray(im)
+            # for safety, ensure RGB
+            if im.mode != "RGB":
+                im = im.convert("RGB")
+            pil_imgs.append(im)
+        # Préparer miniatures (pour les 4 gr.Image)
+        thumb_imgs = [im.copy().resize((256,256)) for im in pil_imgs]
+        # Convertir en data-URIs pour Three.js
+        data_uris = [pil_to_data_uri(im) for im in pil_imgs]
+        # 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>
+<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 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; }} }});
+    const geometry = new THREE.BoxGeometry(1.6,1.6,1.6);
+    const cube = new THREE.Mesh(geometry, mats);
+    scene.add(cube);
+    // grid & axes for context
+    const grid = new THREE.GridHelper(6, 12, 0x888888, 0x444444);
+    grid.position.y = -1.2;
+    scene.add(grid);
+    // controls
+    const controls = new THREE.OrbitControls(camera, renderer.domElement);
+    controls.enableDamping = true;
+    controls.dampingFactor = 0.07;
+    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);
+    // animation loop
+    (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);
+  }});
 }})();
 </script>
 """
+        # Retourner : 4 miniatures pour affichage + HTML viewer
+        return (*thumb_imgs, html)
+    except Exception as e:
+        traceback.print_exc()
+        # en cas d'erreur, renvoyer 4 images vides et message html d'erreur
+        blank = Image.new("RGB", (256,256), (220,220,220))
+        err_html = f"<div style='color:#900;padding:12px;'>Erreur serveur: {str(e)}</div>"
+        return (blank, blank, blank, blank, err_html)
+# Interface Gradio
+with gr.Blocks(title="3D Cube Viewer - 4 outputs on cube") as demo:
+    gr.Markdown("### App 3D : assemble 4 images produites par votre code d'inference sur les 4 faces d'un cube.")
+    with gr.Row():
+        with gr.Column(scale=1):
+            inp1 = gr.Image(label="Image 1 (entrée)", type="numpy")
+            inp2 = gr.Image(label="Image 2 (entrée)", type="numpy")
+            inp3 = gr.Number(value=10, label="Number of inference steps")
+            run_btn = gr.Button("Lancer l'inference")
+            gr.Markdown("Remplace `user_inference` dans `app.py` par ton code d'inférence existant.")
+        with gr.Column(scale=2):
+            viewer = gr.HTML("<div style='padding:12px;color:#666;'>Le rendu 3D s'affichera ici après inference.</div>", label="Visu 3D")
+    gr.Row().style(mobile_collapse=False)
+    with gr.Row():
+        out1 = gr.Image(label="Output 1")
+        out2 = gr.Image(label="Output 2")
+        out3 = gr.Image(label="Output 3")
+        out4 = gr.Image(label="Output 4")
+    run_btn.click(fn=run, inputs=[inp1, inp2, inp3], outputs=[out1, out2, out3, out4, viewer])
 if __name__ == "__main__":
+    demo.launch(server_name="0.0.0.0", server_port=7860, share=True)