|
<!DOCTYPE html> |
|
<html lang="en"> |
|
|
|
<head> |
|
<meta charset="UTF-8" /> |
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" /> |
|
<title>Transformers.js - Named Entity Recognition</title> |
|
<link rel="stylesheet" href="style.css" /> |
|
</head> |
|
|
|
<body> |
|
<h1>Named Entity Recognition (NER) w/ 🤗 Transformers.js</h1> |
|
|
|
|
|
<section> |
|
<h2>Named Entity Recognition (NER)</h2> |
|
<textarea id="text-input" rows="6" placeholder="Digite ou cole o texto aqui..."></textarea> |
|
<button id="analyze-text">Analisar Texto</button> |
|
<div id="text-output"></div> |
|
</section> |
|
|
|
<script type="module"> |
|
import { pipeline, env } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]'; |
|
|
|
|
|
env.allowLocalModels = false; |
|
|
|
|
|
const nerStatus = document.getElementById('status'); |
|
const textInput = document.getElementById('text-input'); |
|
const analyzeTextButton = document.getElementById('analyze-text'); |
|
const textOutput = document.getElementById('text-output'); |
|
|
|
nerStatus.textContent = 'Carregando modelo de NER...'; |
|
const nerModel = await pipeline('ner', 'Xenova/distilbert-base-multilingual-cased-ner-hrl'); |
|
nerStatus.textContent = 'Modelo de NER pronto!'; |
|
|
|
analyzeTextButton.addEventListener('click', async () => { |
|
const inputText = textInput.value.trim(); |
|
if (!inputText) { |
|
textOutput.textContent = 'Por favor, insira um texto para análise.'; |
|
return; |
|
} |
|
|
|
textOutput.textContent = 'Analisando...'; |
|
const nerOutput = await nerModel(inputText); |
|
renderEntities(nerOutput); |
|
}); |
|
|
|
function renderEntities(entities) { |
|
textOutput.innerHTML = ''; |
|
entities.forEach(entity => { |
|
const { word, entity_group, score } = entity; |
|
|
|
const entityElement = document.createElement('div'); |
|
entityElement.className = 'entity'; |
|
entityElement.innerHTML = ` |
|
<strong>Palavra:</strong> ${word} <br> |
|
<strong>Entidade:</strong> ${entity_group} <br> |
|
<strong>Confiança:</strong> ${(score * 100).toFixed(2)}% |
|
`; |
|
textOutput.appendChild(entityElement); |
|
}); |
|
} |
|
</script> |
|
</body> |
|
|
|
</html> |
|
|
