Visualize and download 3D model with Streamlit

Streamlit is a very good library to create web demo, but for the monocular depth estimation is hard to find something to show 3D Model.

As I just do in Visualize 3D model in Jupyter notebook with the obj2html lib I reach to create a demo: HuggingFacae Spaces Monocular Depth Estimation.

Hugging Face Spaces, Streamlit Demo

But in this article I speack only about 3D model into streamlit (for dense depth you can read Dense Depth: 3D from a single image).

Install Requirements

Easily we can install the required library with pip:

pip install streamlit obj2html
# or specify your version of python if multiple
python3.8 -m pip install streamlit obj2html

Streamplit app

Put into a folder a model.obj, you can download on this link or on linux with:

wget https://gitlab.com/nicolalandro/obj2html/-/raw/main/test/assets/model.obj

Create a simple Streamplit app.py (from streamlit_example.py):

import streamlit as st
import streamlit.components.v1 as components
from obj2html import obj2html
# 3D view
html_string = obj2html("model.obj", html_elements_only=True)
components.html(html_string)
# Download .obj button
with open("model.obj") as f:
    st.download_button('Download model.obj', f, file_name="download_name.obj")

Now you can run your streamlit app:

streamlit run app.py
# or specify your version of python if multiple
python3.8 -m streamlit run app.py

You can get on localhost:8501 and get the demo online.

Streamlit 3D view hello world

Conclusions

The obj2html lib is young but it can be used simply on Jupyter and on Streamlit, it is very good to prototyping for this kind of project.

In the end it use Three.js and is only a sort of python wrapper to write html file with three.js. The project realy luck only one feature: support material (.mat) to use texture and normal maps etc. so if you want to contribute this feature conclude the basic function needed for the thinked aims.

Thank you for the reading and contribute to the open-source!