InFaceMetic NPM Package

A comprehensive React component library for AI-powered face and skin analysis. Get instant facial analysis results, 3D face reconstruction, landmark detection, live face reshaper, and skin condition assessment with advanced machine learning algorithms.

🚀 Features

• Real-time Face Analysis: Advanced facial landmark detection and analysis
• Real-time Face Reshaper: Reshape eyes, nose, mouth, etc in real-time
• Skin Analysis: Comprehensive skin condition assessment and recommendations
• 3D Face Reconstruction: Generate 3D models from 2D facial images
• Face Reshaping: Interactive face modification and enhancement tools
• AI-Powered Chat: Intelligent consultation and recommendations
• Media Management: Upload, organize, and analyze facial images
• TypeScript Support: Fully typed for enhanced development experience
• Responsive Design: Mobile-friendly components built with Chakra UI

📦 Installation

Install the package using npm or yarn:

# Using npm
npm install infacemetic-npm

# Using yarn
yarn add infacemetic-npm

🔑 API Key Setup

To use the full functionality of InFaceMetic, you need to obtain an API key:

1. Visit: InFaceMetic Dashboard
2. Sign up or log in to your account
3. Navigate to API Settings
4. Generate your API key
5. Copy the key for use in your application

Setting up the API Key

import { InfaceMeticProvider } from 'infacemetic-npm';

function App() {
  return (
    <InfaceMeticProvider apiKey="your-api-key-here">
      {/* Your app components */}
    </InfaceMeticProvider>
  );
}

🎯 Quick Start

Basic Face and Skin Analysis

import React from 'react';
import { InfaceMeticFaceAndSkinAnalysis } from 'infacemetic-npm';
import { ChakraProvider } from '@chakra-ui/react';

function App() {
  return (
    <ChakraProvider>
      <InfaceMeticFaceAndSkinAnalysis
        apiKey="your-api-key-here"
        userCanAddMedia={true}
        isPrivate={false}
      />
    </ChakraProvider>
  );
}

export default App;

Advanced Usage with Custom Configuration

import React from 'react';
import { 
  InfaceMeticFaceAndSkinAnalysis,
  AnalysisPhotoGallery,
  Face3DReconstruction 
} from 'infacemetic-npm';

function FaceAnalysisApp() {
  return (
    <div>
      {/* Main Analysis Component */}
      <InfaceMeticFaceAndSkinAnalysis
        apiKey="your-api-key-here"
        userCanAddMedia={true}
        isPrivate={false}
        onAnalysisComplete={(results) => {
          console.log('Analysis results:', results);
        }}
      />
      
      {/* Photo Gallery */}
      <AnalysisPhotoGallery
        userId="user-123"
        canDelete={true}
      />
      
      {/* 3D Face Reconstruction */}
      <Face3DReconstruction
        imageUrl="path/to/face-image.jpg"
        enableInteraction={true}
      />
    </div>
  );
}

⚙️ Configuration Options

Main Component Props

| Prop | Type | Default | Description | |------|------|---------|-------------| | apiKey | string | undefined | Your InFaceMetic API key | | userCanAddMedia | boolean | true | Allows users to upload new images | | isPrivate | boolean | false | Controls media access permissions | | onAnalysisComplete | function | undefined | Callback when analysis is finished | | theme | object | undefined | Custom Chakra UI theme |

Media Permissions

• userCanAddMedia: true - Users can upload and analyze new images
• userCanAddMedia: false - Users can only view existing analysis results
• isPrivate: true - Media is private to the user (requires authentication)
• isPrivate: false - Media can be shared publicly

🖼️ Testing and Demo

Demo Images

When using the package without your own API key, demo images are provided for testing:

⚠️ Important: Demo images are updated every 10 hours. For production use, please use your own API key and images.

Getting Started Without API Key

// Demo mode - limited functionality
<InfaceMeticFaceAndSkinAnalysis
  userCanAddMedia={false}  // Disable upload in demo mode
  isPrivate={true}         // Keep demo private
/>

🛠️ Development

Prerequisites

• React 18+
• Node.js 20+
• TypeScript 4.5+

TypeScript Support

The package includes full TypeScript definitions. Import types as needed:

import type { 
  AnalysisResult, 
  FaceFeatures, 
  SkinAnalysis 
} from 'infacemetic-npm';

🌟 Examples

Real-time Analysis

import { useCallback } from 'react';
import { InfaceMeticFaceAndSkinAnalysis } from 'infacemetic-npm';

function RealTimeAnalysis() {
  const handleAnalysis = useCallback((result) => {
    // Process analysis results
    console.log('Face features:', result.faceFeatures);
    console.log('Skin analysis:', result.skinAnalysis);
  }, []);

  return (
    <InfaceMeticFaceAndSkinAnalysis
      apiKey={process.env.REACT_APP_INFACEMETIC_API_KEY}
      onAnalysisComplete={handleAnalysis}
      userCanAddMedia={true}
      isPrivate={false}
    />
  );
}

Custom Styling

import { ChakraProvider, extendTheme } from '@chakra-ui/react';

const customTheme = extendTheme({
  colors: {
    brand: {
      50: '#e3f2fd',
      500: '#2196f3',
      900: '#0d47a1',
    },
  },
});

function StyledApp() {
  return (
    <ChakraProvider theme={customTheme}>
      <InfaceMeticFaceAndSkinAnalysis apiKey="your-key" />
    </ChakraProvider>
  );
}

🔐 Privacy & Security

• All image processing happens securely
• API keys are encrypted in transit
• No personal data is stored without consent
• GDPR and CCPA compliant

📄 License

This project is licensed under the ISC License - see the LICENSE file for details.

🤝 Support

• Issues: GitHub Issues
• Email: Send us message

🚀 Contributing

We welcome contributions! Please see our Contributing Guide for details.

1. Fork the repository
2. Create your feature branch (git checkout -b feature/amazing-feature)
3. Commit your changes (git commit -m 'Add amazing feature')
4. Push to the branch (git push origin feature/amazing-feature)
5. Open a Pull Request

📈 Changelog

See CHANGELOG.md for version history and updates.

Made with ❤️ by the InFaceMetic team