<!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>
<!-- Seção de reconhecimento de entidades nomeadas (NER) -->
<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/transformers@2.10.1';
// Configuração para desativar modelos locais
env.allowLocalModels = false;
// Reconhecimento de Entidades Nomeadas (NER)
const textInput = document.getElementById('text-input');
const analyzeTextButton = document.getElementById('analyze-text');
const textOutput = document.getElementById('text-output');
// Carregar modelo NER com quantização q4
let nerModel;
try {
textOutput.textContent = 'Carregando modelo de NER...';
nerModel = await pipeline('ner', 'Xenova/distilbert-base-multilingual-cased-ner-hrl', {
dtype: 'q4'
});
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.';
}
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 {
const nerOutput = await nerModel(inputText);
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 = '';
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>