mod

Dockerfile

@@ -0,0 +1,31 @@
+# Use the official Python 3.9 image
+FROM python:3.9
+
+RUN apt-get update && apt-get upgrade -y
+
+RUN apt-get install -y libgl1-mesa-dev
+
+# Set the working directory to /code
+WORKDIR /code
+
+# Copy the current directory contents into the container at /code
+COPY ./requirements.txt /code/requirements.txt
+
+# Install requirements.txt 
+RUN pip install --no-cache-dir --upgrade -r /code/requirements.txt
+
+# Set up a new user named "user" with user ID 1000
+RUN useradd -m -u 1000 user
+# Switch to the "user" user
+USER user
+# Set home to the user's home directory
+ENV HOME=/home/user \
+	PATH=/home/user/.local/bin:$PATH
+
+# Set the working directory to the user's home directory
+WORKDIR $HOME/app
+
+# Copy the current directory contents into the container at $HOME/app setting the owner to the user
+COPY --chown=user . $HOME/app
+
+CMD ["uvicorn", "api:app", "--host", "0.0.0.0", "--port", "7860"]

README.md

@@ -3,11 +3,30 @@ title: Image2mesh
 emoji: 👁
 colorFrom: green
 colorTo: blue
-sdk: gradio
-sdk_version: 3.19.1
-app_file: app.py
+sdk: docker
+app_file: api.py
 pinned: false
-duplicated_from: mattiagatti/image2mesh
 ---
 
 Check out the configuration reference at https://huggingface.co/docs/hub/spaces-config-reference
+
+addded by nagauta below
+I modified the app below to use it as an API.(nagauta)
+https://huggingface.co/spaces/mattiagatti/image2mesh
+
+## here is my note to startup enviroment construction
+# env.
+## local
+Machine: MacBook Air (M1, 2020)
+OS: Monterey 12.6.3
+RAM: 16GB
+
+# anaconda
+conda create -n i2m python=3.9
+conda activate i2m
+pip install --no-cache-dir --upgrade -r /code/requirements.txt
+uvicorn api:app --reload 
+
+# Docker
+docker build -t i2m .
+docker run  -it -p 7860:7860 i2m

api.py

@@ -0,0 +1,30 @@
+from fastapi import FastAPI,UploadFile
+import shutil
+from fastapi.responses import HTMLResponse
+from fastapi.responses import FileResponse
+from fastapi.staticfiles import StaticFiles
+import app as predictor
+from PIL import Image, ImageFilter
+
+app = FastAPI()
+
+app.mount("/view", StaticFiles(directory="view", html=True), name="view")
+app.mount("/public", StaticFiles(directory="public", html=True), name="public")
+
+@app.get("/")
+def index() -> FileResponse:
+    return FileResponse(path="./view/index.html", media_type="text/html")
+
+@app.post("/prediction/")
+async def predict(targetImage: UploadFile):
+  path = f'public/{targetImage.filename}'# api/filesディレクトリを作成しておく
+  with open(path, 'wb+') as buffer:
+    shutil.copyfileobj(targetImage.file, buffer)
+  im = Image.open(path)
+#   todo quality指定できるようにする
+  depth_image, mesh_path = predictor.predict(im, 3)
+  print(mesh_path)
+  return {
+  "path":"public",
+  "name":mesh_path
+  }

app.py

@@ -76,7 +76,7 @@ def generate_mesh(image, depth_image, quality):
 
     # save the mesh
     temp_name = next(tempfile._get_candidate_names()) + '.obj'
-    o3d.io.write_triangle_mesh(temp_name, mesh)
+    o3d.io.write_triangle_mesh("public/" + temp_name, mesh)
 
     return temp_name
 
@@ -91,33 +91,33 @@ def predict(image, quality):
 
     return depth_image, mesh_path
 
-
-# GUI
-title = 'Image2Mesh'
-description = 'Demo based on my <a href="https://towardsdatascience.com/generate-a-3d-mesh-from-an-image-with-python' \
-              '-12210c73e5cc">article</a>. This demo predicts the depth of an image and then generates the 3D mesh. ' \
-              'Choosing a higher quality increases the time to generate the mesh. You can download the mesh by ' \
-              'clicking the top-right button on the 3D viewer. '
-examples = [[f'examples/{name}', 3] for name in sorted(os.listdir('examples'))]
-
-# example image source:
-# N. Silberman, D. Hoiem, P. Kohli, and Rob Fergus,
-# Indoor Segmentation and Support Inference from RGBD Images (2012)
-
-iface = gr.Interface(
-    fn=predict,
-    inputs=[
-        gr.Image(type='pil', label='Input Image'),
-        gr.Slider(1, 5, step=1, value=3, label='Mesh quality')
-    ],
-    outputs=[
-        gr.Image(label='Depth'),
-        gr.Model3D(label='3D Model', clear_color=[0.0, 0.0, 0.0, 0.0])
-    ],
-    examples=examples,
-    allow_flagging='never',
-    cache_examples=False,
-    title=title,
-    description=description
-)
-iface.launch()
+if __name__ == '__main__':
+    # GUI
+    title = 'Image2Mesh'
+    description = 'Demo based on my <a href="https://towardsdatascience.com/generate-a-3d-mesh-from-an-image-with-python' \
+                  '-12210c73e5cc">article</a>. This demo predicts the depth of an image and then generates the 3D mesh. ' \
+                  'Choosing a higher quality increases the time to generate the mesh. You can download the mesh by ' \
+                  'clicking the top-right button on the 3D viewer. '
+    examples = [[f'examples/{name}', 3] for name in sorted(os.listdir('examples'))]
+    
+    # example image source:
+    # N. Silberman, D. Hoiem, P. Kohli, and Rob Fergus,
+    # Indoor Segmentation and Support Inference from RGBD Images (2012)
+    
+    iface = gr.Interface(
+        fn=predict,
+        inputs=[
+            gr.Image(type='pil', label='Input Image'),
+            gr.Slider(1, 5, step=1, value=3, label='Mesh quality')
+        ],
+        outputs=[
+            gr.Image(label='Depth'),
+            gr.Model3D(label='3D Model', clear_color=[0.0, 0.0, 0.0, 0.0])
+        ],
+        examples=examples,
+        allow_flagging='never',
+        cache_examples=False,
+        title=title,
+        description=description
+    )
+    iface.launch()

requirements.txt

@@ -4,4 +4,6 @@ numpy
 open3d
 Pillow
 torch
-transformers
+transformers
+fastapi
+uvicorn[standard]

view/index.css

@@ -0,0 +1,11 @@
+html, body {
+    width: 100%;
+    height: 100%;
+    overflow: hidden;
+  }
+  
+  #renderCanvas {
+    width   : 100%;
+    height  : 100%;
+    touch-action: none;
+  }

view/index.html

@@ -0,0 +1,25 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta http-equiv="X-UA-Compatible" content="IE=edge">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <link rel="stylesheet" type="text/css" href="/view/index.css" />
+    <title>Image to 3D</title>
+</head>
+<body>
+    <form id="upload">
+        <input type="file" id="targetImage">
+        <button>変換する</button>
+      </form>
+    <canvas id="renderCanvas"></canvas>
+
+    <script src="https://preview.babylonjs.com/babylon.js"></script>
+    <script src="https://preview.babylonjs.com/loaders/babylonjs.loaders.min.js"></script>
+    <script src="https://preview.babylonjs.com/serializers/babylonjs.serializers.min.js"></script>
+    <script src="https://preview.babylonjs.com/materialsLibrary/babylonjs.materials.min.js"></script>
+    <script src="https://cdn.babylonjs.com/loaders/babylon.objFileLoader.js"></script>
+    <script src="https://code.jquery.com/pep/0.4.1/pep.js"></script>
+    <script src="/view/index.js"></script>
+</body>
+</html>

view/index.js

@@ -0,0 +1,75 @@
+function main() {
+
+    prepareToUploadFile();
+    // load3dModel();
+    
+  }
+  function prepareToUploadFile(){
+    /*
+   * 送信イベントが発生したら実行
+   */
+  document.querySelector("#upload").addEventListener("submit", (e)=>{
+    const targetImage = document.querySelector("#targetImage"); 
+    // 規定の送信処理をキャンセル(画面遷移などしない)
+    e.preventDefault();
+
+    // 送信データの準備
+    const formData = new FormData();
+    formData.append("targetImage", targetImage.files[0]);  // ファイル内容を詰める
+
+    const param = {
+      method: "POST",
+      body: formData
+    }
+
+    // アップロードする
+    fetch(`${window.origin}/prediction`, param)
+      .then((res)=>{
+        return( res.json() );
+      })
+      .then((json)=>{
+        // 通信が成功した際の処理
+        load3dModel(json["path"], json["name"]);
+      })
+      .catch((error)=>{
+        // エラー処理
+        alert("残念、なんかエラー！")
+      });
+  });
+  }
+  function load3dModel(rcPath, rcName){
+
+    const canvas = document.getElementById('renderCanvas');
+    const engine = new BABYLON.Engine(canvas);
+    // ここから
+    function createScene() {
+      // シーンを作成
+      const scene = new BABYLON.Scene(engine);
+      // カメラを作成
+      const camera = new BABYLON.ArcRotateCamera("camera", -Math.PI / 2, Math.PI / 2.5, 3, new BABYLON.Vector3(0, 0, 0), scene);
+      // カメラがユーザからの入力で動くように
+      camera.attachControl(canvas, true);
+      // ライトを作成
+      const light = new BABYLON.HemisphericLight("light", new BABYLON.Vector3(0, 1, 0), scene);
+      
+      // 画像を読み込む
+      BABYLON.SceneLoader.ImportMesh("", `/${rcPath}/`, `${rcName}`, scene, function (newMeshes) {
+        // Create a default arc rotate camera and light.
+        // createArcRotateCamera
+        scene.createDefaultCameraOrLight(true, true, true);
+    });
+      return scene;
+    }
+    
+    const scene = createScene();
+
+    
+    engine.runRenderLoop(() => {
+      scene.render();
+    });
+    
+    window.addEventListener('resize', () => {
+      engine.resize();
+    });
+  }
+  window.addEventListener('DOMContentLoaded', main);