Maison > Article > interface Web > Création d'une carte de profil AR avec détection de visage en temps réel

Création d'une carte de profil AR avec détection de visage en temps réel

Mary-Kate Olsenoriginal: 2024-11-15 14:48:02170parcourir

Building a AR Profile Card with Real-Time Face Detection

Présentation

Imaginez une carte de profil 3D interactive qui suit les mouvements de votre visage et réagit en temps réel : c'est l'essence de la carte de profil 3D AR. Créé par P-R. Lopez, développeur senior possédant une expertise en JavaScript, React et Firebase, cette carte combine une technologie de détection de visage de pointe avec un design élégant et haut de gamme avec des effets de lueur dynamiques, des dégradés riches et une mise en page sophistiquée. C’est parfait pour engager les utilisateurs à un niveau personnel.

Dans ce didacticiel, nous allons créer cette carte de profil interactive en utilisant HTML, CSS et JavaScript avec FaceMesh de TensorFlow pour la détection des visages en temps réel. Ce composant est idéal pour les portfolios professionnels ou les applications nécessitant une expérience interactive et mémorable. Pour ceux qui sont intéressés par des projets plus interactifs, ne manquez pas Gladiators Battle, un jeu de cartes de gladiateurs passionnant inspiré de la Rome antique, qui combine stratégie immersive et design visuellement époustouflant.

Plongeons-nous dans la création de cette carte de profil !

Étape 1 : Configuration de la structure HTML
Notre carte de profil comprendra un flux webcam pour la détection des visages, des informations sur les utilisateurs et des icônes de réseaux sociaux.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>3D AR Profile Card with Face Detection</title>
  <link rel="stylesheet" href="styles.css">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0-beta3/css/all.min.css">
</head>
<body>
  <!-- Video for webcam stream -->
  <video>



<p>Key HTML Elements<br>
Webcam Video: Captures real-time video for face detection.<br>
Profile Card: Contains profile information, including name, location, experience, skills, and links to Gladiators Battle and social media.<br>
Social Icons: Link to GitHub, LinkedIn, and Twitter (or X), providing a fully interactive and connected profile.<br>
Step 2: Styling the Profile Card with CSS<br>
The CSS brings the 3D and AR effects to life, with gradients, glowing shadows, and animations for an eye-catching experience.</p>

<p>Body and Background<br>
The body uses a radial gradient to create a soft, dark background that complements the card’s glowing effects.<br>
</p>

<pre class="brush:php;toolbar:false">body {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100vh;
  margin: 0;
  background: radial-gradient(circle at center, #2d2d2d, #1b1b1b);
  overflow: hidden;
  font-family: 'Arial', sans-serif;
}

/* Webcam */
#webcam {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0;
  z-index: -1;
}

Conception de carte de profil
La carte de profil elle-même utilise des arrière-plans dégradés, des transformations 3D et des effets d'ombre pour se démarquer.

.profile-card {
  position: relative;
  width: 370px;
  padding: 35px;
  border-radius: 25px;
  background: linear-gradient(145deg, #3d3d3d, #2a2a2a);
  box-shadow: 
    0 15px 25px rgba(0, 0, 0, 0.6),
    0 0 25px rgba(255, 215, 0, 0.3),
    inset 0 0 15px rgba(255, 255, 255, 0.1);
  transform-style: preserve-3d;
  transform: perspective(1000px);
  transition: transform 0.3s ease, box-shadow 0.3s ease;
  z-index: 1;
}

.profile-card:hover {
  box-shadow: 
    0 25px 50px rgba(0, 0, 0, 0.7),
    0 0 50px rgba(255, 215, 0, 0.7),
    inset 0 0 15px rgba(255, 255, 255, 0.2);
  transform: scale(1.03);
}

Style d'avatar et de texte
L'avatar et le texte sont conçus pour correspondre à l'esthétique haut de gamme de la carte, avec des effets lumineux et audacieux.

.profile-avatar {
  width: 130px;
  height: 130px;
  background: url('avatar.jpg') center/cover;
  border-radius: 50%;
  margin: 0 auto;
  box-shadow: 0px 0px 20px rgba(255, 255, 255, 0.4), 0px 0px 30px rgba(255, 215, 0, 0.5);
  transform: translateZ(70px);
  transition: box-shadow 0.3s ease, transform 0.3s ease;
}

.profile-name {
  font-size: 30px;
  text-align: center;
  color: #ffffff;
  margin-top: 20px;
  transform: translateZ(50px);
  background: linear-gradient(45deg, #ffd700, #ffa500, #ff4500);
  -webkit-background-clip: text;
  color: transparent;
  font-weight: bold;
  text-shadow: 0px 3px 5px rgba(0, 0, 0, 0.4);
}

Étape 3 : Détection des visages avec TensorFlow FaceMesh
Le code JavaScript utilise le modèle FaceMesh de TensorFlow pour détecter les visages et définir dynamiquement l'image de profil. Cette approche de pointe donne à la carte une sensation AR.

Configuration de la webcam et de la détection de visage
La fonction setupCameraAndModel initialise le flux de la webcam et charge le modèle FaceMesh pour commencer le suivi du visage.

const video = document.getElementById('webcam');
const profileAvatar = document.querySelector('.profile-avatar');

async function setupCameraAndModel() {
  const model = await facemesh.load();
  const stream = await navigator.mediaDevices.getUserMedia({
    video: { width: 640, height: 480 }
  });
  video.srcObject = stream;
  video.addEventListener('loadeddata', () => {
    detectFaceAndCapture(model, stream);
  });
}

Détection de visage et mise à jour de l'avatar
La fonction detectFaceAndCapture capture une photo lorsqu'un visage est détecté et la définit comme arrière-plan de l'avatar du profil.

async function detectFaceAndCapture(model, stream) {
  const predictions = await model.estimateFaces(video);

  if (predictions.length > 0) {
    const canvas = document.createElement('canvas');
    canvas.width = video.videoWidth;
    canvas.height = video.videoHeight;
    const context = canvas.getContext('2d');
    context.drawImage(video, 0, 0, canvas.width, canvas.height);

    const imageDataUrl = canvas.toDataURL('image/png');
    profileAvatar.style.backgroundImage = `url(${imageDataUrl})`;

    stream.getTracks().forEach(track => track.stop());
    video.style.display = 'none';
  } else {
    requestAnimationFrame(() => detectFaceAndCapture(model, stream));
  }
}

// Initialize camera and model
setupCameraAndModel();

Cette méthode apporte une touche unique à la carte de profil en définissant dynamiquement la photo de profil en temps réel, en utilisant la technologie AR.

Conclusion
La création d'une carte de profil AR 3D interactive avec détection de visage en temps réel apporte une touche moderne et haut de gamme à tout site Web personnel ou professionnel. Ce didacticiel combinait CSS pour les effets 3D et JavaScript pour la détection dynamique des visages à l'aide de TensorFlow, démontrant ainsi une approche puissante pour améliorer l'interaction utilisateur. Si vous êtes intéressé par des projets plus innovants et immersifs, ne manquez pas Gladiators Battle, un jeu de cartes de gladiateur passionnant qui fusionne thèmes historiques et gameplay stratégique. Découvrez-en plus sur GladiatorsBattle.com.

? Découvrez-en davantage :

Explorez Gladiators Battle : entrez dans un monde d'anciens guerriers et de batailles épiques sur https://gladiatorsbattle.com.
GitHub : consultez des exemples de code et des projets sur https://github.com/HanGPIErr.
LinkedIn : suivez les mises à jour sur https://www.linkedin.com/in/pierre-romain-lopez/.
Twitter : restez connecté sur X sur https://x.com/GladiatorsBT.
Cet article est votre passerelle vers la création d’éléments Web visuellement époustouflants et interactifs. Rejoignez-nous alors que nous continuons à explorer les moyens de fusionner une technologie avancée avec un design intuitif et de haute qualité.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!

JavaScript gateway css html edge if for include continue using function this background github tensorflow https ar

Déclaration：

Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn

Article précédent：Pourquoi mon élément enfant ne s'aligne-t-il pas à gauche avec « gauche : 50 % » ?Article suivant：Pourquoi mon élément enfant ne s'aligne-t-il pas à gauche avec « gauche : 50 % » ?

Articles Liés

Voir plus