|
<!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 } from 'https://cdn.jsdelivr.net/npm/@xenova/[email protected]'; |
|
|
|
const textInput = document.getElementById('text-input'); |
|
const analyzeTextButton = document.getElementById('analyze-text'); |
|
const textOutput = document.getElementById('text-output'); |
|
|
|
|
|
if (!textInput || !analyzeTextButton || !textOutput) { |
|
console.error('Erro: Elementos não encontrados no DOM.'); |
|
} |
|
|
|
|
|
let nerModel; |
|
|
|
|
|
async function loadModel() { |
|
try { |
|
textOutput.textContent = 'Carregando modelo de NER...'; |
|
nerModel = await pipeline('token-classification', 'Xenova/distilbert-base-multilingual-cased-ner-hrl', { |
|
dtype: 'quantized' |
|
}); |
|
textOutput.textContent = 'Modelo de NER pronto!'; |
|
} catch (error) { |
|
console.error('Erro ao carregar o modelo:', error); |
|
textOutput.textContent = 'Erro ao carregar o modelo. Tente novamente mais tarde.'; |
|
} |
|
} |
|
|
|
|
|
await loadModel(); |
|
|
|
|
|
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...'; |
|
|
|
try { |
|
console.log("inputText",inputText) |
|
const nerOutput = await nerModel(inputText,{ |
|
ignore_labels: [] |
|
}); |
|
console.log(nerOutput) |
|
renderEntities(nerOutput); |
|
} catch (error) { |
|
console.error('Erro durante a análise:', error); |
|
textOutput.textContent = 'Erro durante a análise. Verifique o texto inserido.'; |
|
} |
|
}); |
|
|
|
|
|
function renderEntities(entities) { |
|
textOutput.innerHTML = ''; |
|
|
|
if (entities.length === 0) { |
|
textOutput.textContent = 'Nenhuma entidade encontrada.'; |
|
return; |
|
} |
|
|
|
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> |
|
|
