Dental STL File Segmentation and Manipulation in a Web-Based Application

The digitalization of the dental industry is rapidly advancing, and more modern technologies are becoming available for accurate diagnosis and treatment. One such solution is 3D segmentation of teeth, enabling dentists and dental technicians to create and manipulate detailed models. In this blog post, we introduce a React Query-based web application designed for handling STL files, segmenting teeth, and allowing their movement and editing. The application utilizes CloudFront and Signed URL technologies for file management and secure access.

https://smilemapper.xyz/https://smilemapper.xyz/

The Importance of Dental Segmentation

Digital modeling and 3D technologies offer numerous benefits in dentistry, including:

3D modeling enables precise and personalized treatment planning, increasing patient satisfaction and reducing potential errors.

MeshSegNet: The Engine Behind Dental Segmentation

A key component of the application is MeshSegNetMeshSegNet, a deep-learning-based network for segmenting three-dimensional meshes. The main features of MeshSegNet include:

MeshSegNet employs a deep neural network model that learns from annotated dental models, delivering precise results without requiring manual intervention.

Using React Query in the Application

React Query is a popular state management library that simplifies handling and caching server-side data in React applications.

Installing React Query

To use React Query, install the library first:

PLAIN TEXT
Copy code
npm install @tanstack/react-query

Setting Up React Query Provider

For React Query to function, a QueryClient instance must be created and provided to the application using QueryClientProvider:

JAVASCRIPT
Copy code
import { QueryClient, QueryClientProvider } from '@tanstack/react-query';

const queryClient = new QueryClient();

function App() {
  return (
    <QueryClientProvider client={queryClient}>
      <MyComponent />
    </QueryClientProvider>
  );
}

Basic Data Fetching with React Query

One of React Query’s key advantages is its simple and efficient data fetching. For example, to fetch data from an API endpoint:

JAVASCRIPT
Copy code
import { useQuery } from '@tanstack/react-query';
import axios from 'axios';

const fetchTeethData = async () => {
  const { data } = await axios.get('/api/teeth-data');
  return data;
};

const MyComponent = () => {
  const { data, error, isLoading } = useQuery(['teethData'], fetchTeethData);

  if (isLoading) return <p>Loading...</p>;
  if (error) return <p>Error: {error.message}</p>;

  return (
    <div>
      {data.map((tooth) => (
        <p key={tooth.id}>{tooth.name}</p>
      ))}
    </div>
  );
};

React Query automatically manages data, caches it, and re-fetches it when needed, ensuring optimal performance and user experience.

Using CloudFront and Signed URL

The application employs AWS CloudFront and Signed URL solutions for file management, ensuring:

Example of generating a Signed URL using Node.js:

JAVASCRIPT
Copy code
const AWS = require('aws-sdk');
const s3 = new AWS.S3();

const generateSignedUrl = async (fileName) => {
  const params = {
    Bucket: 'your-bucket-name',
    Key: fileName,
    Expires: 60 * 5, // URL valid for 5 minutes
  };
  return s3.getSignedUrlPromise('getObject', params);
};

This method ensures that data remains accessible only for a limited time, increasing security.

Conclusion

A React Query-based web application provides an efficient solution for handling and segmenting dental models. With automated segmentation powered by MeshSegNet and secure file access using CloudFront + Signed URL, users can work efficiently with 3D models.

Future development steps include implementing STL file creation and export functionality, enabling the generation and printing of customized dental treatment models. Further enhancements to React Query integration will optimize performance, and additional manual editing capabilities may be introduced for users.