Merge 05a265315d into ff58cc16ff

🐛 Add remotePattern on replicate.delivery in next.config.js

components/canvascomponent.js

@@ -8,19 +8,19 @@ 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}) {
+export function CanvasComponent({ setCanvasRef, gltfModel }) {
   return (
-      <>
+    <>
       <Canvas
-          camera={{ fov: 40, position: [0, 0, 5]}}
-          gl={{ alpha:true, preserveDrawingBuffer: true }}
+        camera={{ fov: 40, position: [0, 0, 5] }}
+        gl={{ alpha: true, preserveDrawingBuffer: true }}
       >
-          <Scene gltfModel={gltfModel} setCanvasRef={setCanvasRef}/>
-          <OrbitControls dampingFactor={0.3} />
+        <Scene gltfModel={gltfModel} setCanvasRef={setCanvasRef} />
+        <OrbitControls dampingFactor={0.3} />
       </Canvas>
 
-      </>
-    )
+    </>
+  )
 }
 
 function Scene({ setCanvasRef, gltfModel }) {
@@ -35,7 +35,7 @@ function Scene({ setCanvasRef, gltfModel }) {
     <>
       <ambientLight />
       <pointLight position={[1, 1, 1]} />
-      <Light brightness={100} color={"white"}/> // highlight-line
+      <Light brightness={100} color={"white"} /> // highlight-line
       <Model gltfModel={gltfModel} />
     </>
   );
@@ -60,12 +60,10 @@ function Model({ gltfModel, ...props }) {
       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);
@@ -74,7 +72,7 @@ function Model({ gltfModel, ...props }) {
       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)));
+      camera.position.z = (maxSizeAfterScaling / (1 * Math.tan((camera.fov * Math.PI) / 360)));
 
       console.log("camera position is ", camera.position.z)
       camera.near = 0.1;

next.config.js

@@ -10,6 +10,11 @@ module.exports = {
         protocol: "https",
         hostname: "pbxt.replicate.delivery",
       },
+      {
+        protocol: "https",
+        hostname: "replicate.delivery",
+        pathname: '/pbxt/**',
+      },
     ],
   },
   // async headers() {
@@ -21,7 +26,6 @@ module.exports = {
   //           key: 'Content-Security-Policy',
   //           value: "default-src 'self'; img-src 'self' blob: https://replicate.com https://pbxt.replicate.delivery; script-src 'self' 'unsafe-inline' 'unsafe-eval'; style-src 'self' 'unsafe-inline'; worker-src 'self' blob:; connect-src 'self' blob:;"
   //         }
-                       
   //       ],
   //     },
   //   ];