Recherche en cours...
Analyse sémantique avec IA
Profil Candidat
Analyse IA en 6 Points
CV Original
<!-- CV content will be inserted here --> </div> </div> </div> </div> </div> <div class="min-h-screen bg-gradient-to-br from-slate-900 via-purple-900 to-slate-900"> <!-- Navigation --> <nav class="bg-black/20 backdrop-blur-md border-b border-white/10"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8"> <div class="flex justify-between items-center h-16"> <div class="flex items-center space-x-4"> <div class="w-8 h-8 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center"> <i data-lucide="sparkles" class="w-5 h-5 text-white"></i> </div> <span class="text-white font-bold text-xl">PRESTADEV AI</span> </div> <div class="text-white/60 text-sm">Recherche Sémantique Intelligente</div> </div> </div> </nav> <!-- Main Content --> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-8"> <!-- Header --> <div class="text-center mb-8"> <div class="bg-gradient-to-r from-purple-500/20 to-pink-500/20 border border-purple-500/30 rounded-2xl p-6 mb-6 animate-fadeInUp"> <div class="flex items-center justify-center gap-3 mb-4"> <div class="w-12 h-12 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center"> <i data-lucide="search" class="w-6 h-6 text-white"></i> </div> <div> <h1 class="text-3xl font-bold gradient-text">Recherche Sémantique</h1> <p class="text-amber-200 text-lg">Trouvez les meilleurs candidats avec l'IA</p> </div> </div> </div> </div> <!-- Grid Layout --> <div class="grid grid-cols-1 lg:grid-cols-3 gap-8"> <!-- Search Section (1/3) --> <div class="lg:col-span-1"> <div class="glass-effect rounded-2xl p-6"> <div class="flex items-center gap-3 mb-6"> <div class="w-10 h-10 bg-gradient-to-r from-blue-500 to-cyan-500 rounded-xl flex items-center justify-center"> <i data-lucide="search" class="w-5 h-5 text-white"></i> </div> <div> <h2 class="text-xl font-bold text-white">🔍 Recherche</h2> <p class="text-gray-400 text-sm">Décrivez le profil recherché</p> </div> </div> <div class="space-y-4"> <!-- Search Query --> <div> <label class="text-white text-sm font-medium mb-2 block">Votre requête</label> <textarea id="searchQuery" class="w-full bg-black/30 text-white border border-gray-600 rounded-xl p-4 h-40 placeholder-gray-500 focus:border-purple-500 focus:outline-none" placeholder="Ex: Développeur React avec 5 ans d'expérience, maîtrise de TypeScript et Node.js, expérience en méthodologie Agile..."></textarea> </div> <!-- Search Button --> <button id="searchBtn" class="w-full bg-gradient-to-r from-purple-500 to-pink-500 hover:from-purple-600 hover:to-pink-600 text-white py-3 px-6 rounded-xl font-semibold transition-all duration-300 transform hover:scale-105 shadow-lg flex items-center justify-center gap-2"> <i data-lucide="search" class="w-5 h-5"></i> Rechercher </button> <!-- Example Queries --> <div class="mt-6"> <p class="text-white text-sm font-medium mb-3">Exemples de recherches:</p> <div class="space-y-2"> <button onclick="useExample(1)" class="w-full text-left bg-black/30 hover:bg-black/50 text-gray-300 p-3 rounded-lg text-sm transition-all"> <span class="text-purple-400">→</span> Développeur Full Stack Senior </button> <button onclick="useExample(2)" class="w-full text-left bg-black/30 hover:bg-black/50 text-gray-300 p-3 rounded-lg text-sm transition-all"> <span class="text-purple-400">→</span> Data Scientist Python </button> <button onclick="useExample(3)" class="w-full text-left bg-black/30 hover:bg-black/50 text-gray-300 p-3 rounded-lg text-sm transition-all"> <span class="text-purple-400">→</span> Chef de projet digital </button> <button onclick="useExample(4)" class="w-full text-left bg-black/30 hover:bg-black/50 text-gray-300 p-3 rounded-lg text-sm transition-all"> <span class="text-purple-400">→</span> DevOps AWS/Kubernetes </button> <button onclick="useExample(5)" class="w-full text-left bg-black/30 hover:bg-black/50 text-gray-300 p-3 rounded-lg text-sm transition-all"> <span class="text-purple-400">→</span> UX/UI Designer Figma </button> </div> </div> <!-- Settings --> <div class="mt-6 pt-6 border-t border-gray-700"> <div class="flex items-center justify-between mb-3"> <label class="text-white text-sm">Nombre de résultats</label> <select id="limitResults" class="bg-black/30 text-white border border-gray-600 rounded-lg px-3 py-1 text-sm"> <option value="10">10</option> <option value="20" selected>20</option> <option value="50">50</option> <option value="100">100</option> </select> </div> <div class="flex items-center justify-between"> <label class="text-white text-sm">Score minimum</label> <select id="minScore" class="bg-black/30 text-white border border-gray-600 rounded-lg px-3 py-1 text-sm"> <option value="0" selected>Tous</option> <option value="0.5">50%</option> <option value="0.7">70%</option> <option value="0.8">80%</option> </select> </div> </div> </div> </div> </div> <!-- Results Section (2/3) --> <div class="lg:col-span-2"> <div class="glass-effect rounded-2xl p-6"> <div class="flex items-center justify-between mb-6"> <div class="flex items-center gap-3"> <div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-500 rounded-xl flex items-center justify-center"> <i data-lucide="users" class="w-5 h-5 text-white"></i> </div> <div> <h2 class="text-xl font-bold text-white">👥 Candidats Correspondants</h2> <p class="text-gray-400 text-sm" id="resultCount">Aucun résultat</p> </div> </div> <button id="exportBtn" class="hidden bg-green-500/20 hover:bg-green-500/30 text-green-400 px-4 py-2 rounded-lg font-medium text-sm transition-all flex items-center gap-2"> <i data-lucide="download" class="w-4 h-4"></i> Exporter </button> </div> <div id="resultsContainer" class="max-h-[700px] overflow-y-auto pr-2"> <!-- Default empty state --> <div class="text-center py-12"> <div class="w-24 h-24 bg-gradient-to-r from-gray-600 to-gray-700 rounded-2xl flex items-center justify-center mx-auto mb-6"> <i data-lucide="user-search" class="w-12 h-12 text-gray-400"></i> </div> <p class="text-gray-400 text-xl mb-2">Aucune recherche effectuée</p> <p class="text-gray-500 text-sm">Décrivez le profil recherché et lancez la recherche</p> </div> </div> </div> </div> </div> <!-- Back to Home --> <div class="text-center mt-8"> <a href="/" class="inline-flex items-center gap-2 text-white/80 hover:text-white transition-colors"> <i data-lucide="arrow-left" class="w-4 h-4"></i> Retour à l'accueil </a> </div> </div> <!-- Footer --> <footer class="bg-black/20 backdrop-blur-md border-t border-white/10 mt-16"> <div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-6"> <div class="flex justify-between items-center"> <div class="flex items-center space-x-4"> <div class="w-6 h-6 bg-gradient-to-r from-purple-500 to-pink-500 rounded-lg flex items-center justify-center"> <i data-lucide="sparkles" class="w-4 h-4 text-white"></i> </div> <span class="text-white font-semibold">PRESTADEV AI</span> </div> <div class="text-white/60 text-sm">© 2024 - Recherche Sémantique</div> </div> </div> </footer> </div> <script> // Initialize Lucide icons lucide.createIcons(); // API endpoint const SEARCH_API = 'https://vps-d34101c1.vps.ovh.net/api/v1/search'; const TENANT = 'rating'; let currentResults = []; // Example queries const exampleQueries = { 1: "Développeur Full Stack Senior avec minimum 5 ans d'expérience. Maîtrise de React, Node.js, TypeScript. Expérience avec Docker et Kubernetes. Connaissance des méthodologies Agile/Scrum.", 2: "Data Scientist avec expertise en Python, TensorFlow, PyTorch. Expérience en machine learning et deep learning. Maîtrise de SQL et des outils de visualisation (Tableau, Power BI).", 3: "Chef de projet digital avec expérience en transformation digitale. Certification PMP ou Prince2. Compétences en gestion d'équipe et méthodologies agiles. Expérience e-commerce appréciée.", 4: "DevOps Engineer avec expertise AWS, Docker, Kubernetes. Maîtrise de Terraform, Ansible, Jenkins. Expérience en CI/CD et automatisation. Scripting Python/Bash.", 5: "UX/UI Designer avec portfolio solide. Maîtrise de Figma, Sketch, Adobe Creative Suite. Expérience en design system et atomic design. Connaissance HTML/CSS appréciée." }; // Use example query function useExample(id) { document.getElementById('searchQuery').value = exampleQueries[id]; } // Search button document.getElementById('searchBtn').addEventListener('click', performSearch); // Perform search async function performSearch() { const query = document.getElementById('searchQuery').value.trim(); if (!query) { alert('Veuillez entrer une requête de recherche'); return; } const loadingOverlay = document.getElementById('loadingOverlay'); loadingOverlay.classList.remove('hidden'); try { const limit = document.getElementById('limitResults').value; const minScore = document.getElementById('minScore').value; const response = await fetch(SEARCH_API, { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ query: query, tenant: TENANT, limit: parseInt(limit), with_payload: true, with_vectors: false }) }); if (!response.ok) { throw new Error(`Erreur serveur: ${response.status}`); } const data = await response.json(); // Filter by minimum score if needed let results = data.results || []; if (parseFloat(minScore) > 0) { results = results.filter(r => r.score >= parseFloat(minScore)); } currentResults = results; displayResults(results); } catch (error) { console.error('Erreur:', error); alert('Erreur lors de la recherche: ' + error.message); } finally { loadingOverlay.classList.add('hidden'); } } // Display results function displayResults(results) { const container = document.getElementById('resultsContainer'); const resultCount = document.getElementById('resultCount'); const exportBtn = document.getElementById('exportBtn'); if (results.length === 0) { container.innerHTML = ` <div class="text-center py-12"> <div class="w-24 h-24 bg-gradient-to-r from-gray-600 to-gray-700 rounded-2xl flex items-center justify-center mx-auto mb-6"> <i data-lucide="user-x" class="w-12 h-12 text-gray-400"></i> </div> <p class="text-gray-400 text-xl mb-2">Aucun candidat trouvé</p> <p class="text-gray-500 text-sm">Essayez de modifier votre recherche</p> </div> `; lucide.createIcons(); resultCount.textContent = 'Aucun résultat'; exportBtn.classList.add('hidden'); return; } resultCount.textContent = `${results.length} candidat${results.length > 1 ? 's' : ''} trouvé${results.length > 1 ? 's' : ''}`; exportBtn.classList.remove('hidden'); let html = '<div class="space-y-3">'; results.forEach((result, index) => { const candidate = result.payload || {}; const score = Math.round(result.score * 100); let scoreClass = 'high'; if (score < 70) scoreClass = 'medium'; if (score < 50) scoreClass = 'low'; // Extract name and title from candidate data const nom = candidate.nom || candidate.nom_candidat || 'Candidat'; const prenom = candidate.prenom || candidate.prenom_candidat || ''; const fullName = `${prenom} ${nom}`.trim(); const titre = candidate.titre || candidate.poste || candidate.poste_actuel || 'Profil non spécifié'; const ville = candidate.ville || candidate.localisation || ''; const experience = candidate.experience || candidate.annees_experience || ''; html += ` <div class="candidate-card" onclick="showProfile(${index})"> <div class="flex items-start justify-between"> <div class="flex-1"> <div class="flex items-center gap-3 mb-2"> <div class="w-10 h-10 bg-gradient-to-r from-purple-500 to-pink-500 rounded-full flex items-center justify-center"> <span class="text-white font-bold text-sm">${prenom.charAt(0)}${nom.charAt(0)}</span> </div> <div> <h3 class="text-white font-semibold text-lg">${fullName}</h3> <p class="text-purple-300">${titre}</p> </div> </div> <div class="flex items-center gap-4 text-sm text-gray-400 ml-13"> ${ville ? `<span class="flex items-center gap-1"><i data-lucide="map-pin" class="w-3 h-3"></i> ${ville}</span>` : ''} ${experience ? `<span class="flex items-center gap-1"><i data-lucide="briefcase" class="w-3 h-3"></i> ${experience} ans</span>` : ''} </div> </div> <div class="flex flex-col items-end gap-2"> <span class="score-badge ${scoreClass}">${score}%</span> <button class="bg-purple-500/20 hover:bg-purple-500/30 text-purple-300 px-3 py-1 rounded-lg text-sm transition-all flex items-center gap-1"> <i data-lucide="eye" class="w-3 h-3"></i> Voir Profil </button> </div> </div> </div> `; }); html += '</div>'; container.innerHTML = html; lucide.createIcons(); } // Show candidate profile async function showProfile(index) { // Fonction pour obtenir l'analyse GPT réelle async function getRealAnalysis(candidateData) { try { const response = await fetch('/api/v1/analyze', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ candidate_id: candidateData.id_candidat || candidateData.id, cv_text: candidateData.cv_text || candidateData.resume || candidateData.description || '', query: document.getElementById('searchQuery').value || 'Analyse du profil' }) }); if (response.ok) { const data = await response.json(); return data.analysis; } } catch (error) { console.error('Erreur analyse GPT:', error); } return null; } const candidate = currentResults[index]; if (!candidate) return; const modal = document.getElementById('profileModal'); const candidateData = candidate.payload || {}; // Extract candidate info const nom = candidateData.nom || candidateData.nom_candidat || 'Candidat'; const prenom = candidateData.prenom || candidateData.prenom_candidat || ''; const fullName = `${prenom} ${nom}`.trim(); // Update modal header document.getElementById('modalCandidateName').textContent = fullName; // Generate AI analysis (6 points) const aiAnalysis = generateAIAnalysis(candidateData); // Essayer d'obtenir l'analyse GPT const gptAnalysis = await getRealAnalysis(candidateData); if (gptAnalysis) { document.getElementById('aiAnalysis').innerHTML = \` <div class="analysis-point"> <h4 class="text-purple-400 font-semibold flex items-center gap-2 mb-2"> <i data-lucide="user" class="w-4 h-4"></i> 1. Synthèse du profil </h4> <p class="text-gray-300">${gptAnalysis.point1}</p> </div> <div class="analysis-point"> <h4 class="text-blue-400 font-semibold flex items-center gap-2 mb-2"> <i data-lucide="code" class="w-4 h-4"></i> 2. Compétences techniques </h4> <p class="text-gray-300">${gptAnalysis.point2}</p> </div> <div class="analysis-point"> <h4 class="text-green-400 font-semibold flex items-center gap-2 mb-2"> <i data-lucide="briefcase" class="w-4 h-4"></i> 3. Expérience pertinente </h4> <p class="text-gray-300">${gptAnalysis.point3}</p> </div> <div class="analysis-point"> <h4 class="text-amber-400 font-semibold flex items-center gap-2 mb-2"> <i data-lucide="graduation-cap" class="w-4 h-4"></i> 4. Formation </h4> <p class="text-gray-300">${gptAnalysis.point4}</p> </div> <div class="analysis-point"> <h4 class="text-red-400 font-semibold flex items-center gap-2 mb-2"> <i data-lucide="star" class="w-4 h-4"></i> 5. Points forts </h4> <p class="text-gray-300">${gptAnalysis.point5}</p> </div> <div class="analysis-point"> <h4 class="text-pink-400 font-semibold flex items-center gap-2 mb-2"> <i data-lucide="target" class="w-4 h-4"></i> 6. Adéquation au poste </h4> <p class="text-gray-300">${gptAnalysis.point6}</p> </div> \`; } else { // Utiliser l'analyse statique } // Display CV content const cvContent = candidateData.cv_text || candidateData.resume || candidateData.description || 'CV non disponible'; const pdfUrl = candidateData.cv_pdf_url || '/talentmatch/cv/' + (candidateData.id_candidat || candidateData.id) + '.pdf'; document.getElementById('cvContent').src = pdfUrl; // Show modal modal.classList.add('show'); lucide.createIcons(); } // Generate AI analysis in 6 points function generateAIAnalysis(candidate) { const analyses = [ { title: "Profil Général", icon: "user", content: generateProfileSummary(candidate) }, { title: "Compétences Clés", icon: "tool", content: generateSkillsSummary(candidate) }, { title: "Expérience", icon: "briefcase", content: generateExperienceSummary(candidate) }, { title: "Formation", icon: "graduation-cap", content: generateEducationSummary(candidate) }, { title: "Points Forts", icon: "star", content: generateStrengthsSummary(candidate) }, { title: "Adéquation Poste", icon: "target", content: generateMatchingSummary(candidate) } ]; let html = ''; analyses.forEach(analysis => { html += ` <div class="analysis-point"> <h4 class="text-white font-semibold mb-2 flex items-center gap-2"> <i data-lucide="${analysis.icon}" class="w-4 h-4"></i> ${analysis.title} </h4> <p class="text-gray-300 text-sm leading-relaxed"> ${analysis.content} </p> </div> `; }); return html; } function generateProfileSummary(candidate) { const titre = candidate.titre || candidate.poste || 'Professionnel'; const experience = candidate.experience || candidate.annees_experience || '0'; const ville = candidate.ville || candidate.localisation || 'France'; const age = candidate.age || ''; return `${titre} avec ${experience} ans d'expérience${ville ? `, basé(e) à ${ville}` : ''}. ${candidate.resume_executif || candidate.description || 'Profil orienté résultats avec forte capacité d\'adaptation.'}`; } function generateSkillsSummary(candidate) { const skills = candidate.competences || candidate.skills || []; const techSkills = candidate.competences_techniques || []; const softSkills = candidate.competences_fonctionnelles || []; let allSkills = [...skills, ...techSkills, ...softSkills]; if (allSkills.length === 0) { allSkills = ['Adaptabilité', 'Travail en équipe', 'Communication', 'Résolution de problèmes']; } return `Maîtrise de : ${allSkills.slice(0, 8).join(', ')}. ${allSkills.length > 8 ? `Plus ${allSkills.length - 8} autres compétences.` : ''}`; } function generateExperienceSummary(candidate) { const experience = candidate.experience || candidate.annees_experience || '0'; const entreprises = candidate.entreprises || []; const secteur = candidate.secteur || candidate.secteur_activite || 'divers secteurs'; return `${experience} années d'expérience professionnelle dans ${secteur}. ${entreprises.length > 0 ? `A travaillé chez ${entreprises.slice(0, 3).join(', ')}.` : 'Parcours diversifié avec expériences variées.'} Evolution constante et montée en compétences progressive.`; } function generateEducationSummary(candidate) { const formation = candidate.formation || candidate.diplome || ''; const niveau = candidate.niveau_etudes || candidate.niveau_formation || ''; const ecole = candidate.ecole || candidate.etablissement || ''; if (formation) { return `${formation}${ecole ? ` obtenu à ${ecole}` : ''}. ${niveau ? `Niveau ${niveau}.` : ''} Formation solide et apprentissage continu.`; } return "Formation adaptée au poste avec volonté d'apprentissage continu et de développement des compétences."; } function generateStrengthsSummary(candidate) { let points = []; if (candidate.langues && candidate.langues.length > 0) { points.push(`Multilinguisme (${candidate.langues.slice(0, 3).join(', ')})`); } if (candidate.certifications && candidate.certifications.length > 0) { points.push(`Certifications professionnelles`); } if (candidate.mobilite || candidate.disponibilite) { points.push(`Disponibilité ${candidate.disponibilite || 'immédiate'}`); } if (points.length === 0) { points = ['Autonomie', 'Esprit d\'équipe', 'Orientation résultats']; } return `Points forts identifiés : ${points.join(', ')}. Profil équilibré avec un bon potentiel d'évolution.`; } function generateMatchingSummary(candidate) { const score = candidate.score ? Math.round(candidate.score * 100) : 75; let evaluation = ''; if (score >= 80) { evaluation = "Excellente correspondance avec le profil recherché. Candidat à contacter en priorité."; } else if (score >= 60) { evaluation = "Bonne correspondance générale. Quelques points à valider en entretien."; } else { evaluation = "Correspondance partielle. Potentiel intéressant selon les priorités du poste."; } return `Score de matching : ${score}%. ${evaluation} ${candidate.recommandation || 'Profil à considérer pour un entretien approfondi.'}`; } // Close modal function closeModal() { const modal = document.getElementById('profileModal'); modal.classList.remove('show'); } // Close modal on outside click window.onclick = function(event) { const modal = document.getElementById('profileModal'); if (event.target == modal) { modal.classList.remove('show'); } } // Export results document.getElementById('exportBtn').addEventListener('click', () => { if (currentResults.length === 0) return; const exportData = currentResults.map(r => ({ nom: r.payload.nom || r.payload.nom_candidat, prenom: r.payload.prenom || r.payload.prenom_candidat, titre: r.payload.titre || r.payload.poste, score: Math.round(r.score * 100) + '%', ville: r.payload.ville || r.payload.localisation, experience: r.payload.experience || r.payload.annees_experience })); const blob = new Blob([JSON.stringify(exportData, null, 2)], { type: 'application/json' }); const url = URL.createObjectURL(blob); const a = document.createElement('a'); a.href = url; a.download = `recherche_candidats_${Date.now()}.json`; a.click(); URL.revokeObjectURL(url); }); // Enter key to search document.getElementById('searchQuery').addEventListener('keypress', (e) => { if (e.key === 'Enter' && !e.shiftKey) { e.preventDefault(); performSearch(); } }); </script> </body> </html>