scaling object to fit canvas

components/canvascomponent.js

@@ -1,4 +1,4 @@
-import React, { useRef, useState } from 'react'
+import React, { useRef, useState, useEffect } from 'react'
 import { Canvas, useFrame, useThree } from '@react-three/fiber'
 import styles from "../styles/studio.module.css";
 import { OrbitControls } from '@react-three/drei'
@@ -6,7 +6,7 @@ import { OrbitControls } from '@react-three/drei'
 import { useLoader } from '@react-three/fiber'
 import { GLTFLoader } from 'three/examples/jsm/loaders/GLTFLoader'
 import { useGLTF, useGLB } from "@react-three/drei";
-
+import { Box3, Vector3 } from 'three';
 
 export function CanvasComponent({setCanvasRef, gltfModel}) {
   return (
@@ -23,7 +23,6 @@ export function CanvasComponent({setCanvasRef, gltfModel}) {
     )
 }
 
-
 function Scene({ setCanvasRef, gltfModel }) {
   const { gl, camera } = useThree();
 
@@ -37,7 +36,7 @@ function Scene({ setCanvasRef, gltfModel }) {
       <ambientLight />
       <pointLight position={[1, 1, 1]} />
       <Light brightness={100} color={"white"}/> // highlight-line
-      <Model gltfModel={gltfModel} position={[0, 0, 0]} />
+      <Model gltfModel={gltfModel} />
     </>
   );
 }
@@ -45,18 +44,48 @@ function Scene({ setCanvasRef, gltfModel }) {
 
 function Model({ gltfModel, ...props }) {
 
-  const { nodes, materials } = gltfModel;
+  const modelRef = useRef();
+  const { camera, size } = useThree();
 
-  console.log("model loaded")
-  return (
+  useEffect(() => {
+    if (modelRef.current) {
+      // Compute the bounding box of the loaded model
+      const box = new Box3().setFromObject(modelRef.current);
+      const sizeModel = new Vector3();
+      box.getSize(sizeModel);
 
-    <group
-              scale={1}
-            >
-      <primitive object={gltfModel.scene} />
-      </group>
-  );
+      console.log("model size 1 is ", sizeModel)
+
+      // Determine the scaling factor
+      const maxSize = Math.max(sizeModel.x, sizeModel.y, sizeModel.z);
+      const scale = Math.min(size.width, size.height) / maxSize;
+
+
+      console.log("scaling factor is ", scale)
+      // Apply the scaling factor to the model
+      modelRef.current.scale.set(scale, scale, scale);
+      
+      
+      const boxAfterScaling = new Box3().setFromObject(modelRef.current);
+      const sizeModelAfterScaling = new Vector3();
+      boxAfterScaling.getSize(sizeModelAfterScaling);
+      console.log("model size after scaling is ", sizeModelAfterScaling)
+
+      const maxSizeAfterScaling = Math.max(sizeModelAfterScaling.x, sizeModelAfterScaling.y, sizeModelAfterScaling.z);
+
+      // Optional: Adjust the camera if necessary
+      camera.position.z =( maxSizeAfterScaling / (1 * Math.tan((camera.fov * Math.PI) / 360)));
+  
+      console.log("camera position is ", camera.position.z)
+      camera.near = 0.1;
+      camera.far = 10000;
+      camera.updateProjectionMatrix();
     }
+  }, [modelRef, camera]);
+
+  return <primitive ref={modelRef} object={gltfModel.scene} />;
+}
+
 
 function Light({ brightness, color }) {
   return (

image_proc_server/app.py

@@ -20,13 +20,13 @@ def get_item_mask():
     image = Image.open(io.BytesIO(image_bytes))
 
     image = image.convert('RGBA')
-    image.save('input.png')
+    #image.save('input.png')
 
     jpeg_buffer = io.BytesIO()
 
     ai_mask_image = convert_to_black_and_white(image)
 
-    ai_mask_image.save("output.png")
+    #ai_mask_image.save("output.png")
     ai_mask_image = ai_mask_image.convert('RGB')
     ai_mask_image.save(jpeg_buffer, format="JPEG")
     ai_mask_image_base64 = base64.b64encode(jpeg_buffer.getvalue()).decode('utf-8')

next.config.js

@@ -1,5 +1,5 @@
 module.exports = {
-  reactStrictMode: true,
+  reactStrictMode: false,
   images: {
     remotePatterns: [
       {