File size: 4,112 Bytes
ca7d73a
 
 
 
 
eab3441
ca7d73a
25e2be2
21ad258
 
eab3441
21ad258
 
 
 
 
eab3441
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
ca7d73a
 
 
eab3441
 
 
 
 
ca7d73a
eab3441
 
 
 
 
 
 
ca7d73a
 
eab3441
25e2be2
eab3441
25e2be2
eab3441
25e2be2
eab3441
 
 
 
 
 
 
 
 
 
 
 
 
ca7d73a
eab3441
ca7d73a
 
eab3441
25e2be2
eab3441
25e2be2
 
ca7d73a
 
eab3441
 
 
 
 
ca7d73a
 
 
25e2be2
 
 
 
ca7d73a
757b7d8
 
25e2be2
 
 
 
 
 
 
ca7d73a
 
25e2be2
eab3441
 
 
25e2be2
eab3441
 
 
 
 
ca7d73a
eab3441
ca7d73a
 
eab3441
21ad258
c38f64c
757b7d8
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Modelo de BERT con TensorFlow.js</title>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
    <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/qna"></script>
    
    <!-- Aseguramos que se cargue el worker de pdf.js correctamente -->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.min.js"></script>
    <script>
        // Especificamos la ubicaci贸n del worker de pdf.js
        pdfjsLib.GlobalWorkerOptions.workerSrc = 'https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.worker.min.js';
    </script>
    
    <style>
        body {
            font-family: Arial, sans-serif;
        }
        .container {
            margin: 20px;
        }
        .file-input {
            margin: 10px 0;
        }
        .query-input {
            margin: 10px 0;
        }
        .response {
            margin-top: 20px;
            font-size: 1.2em;
        }
    </style>
</head>
<body>

    <div class="container">
        <h1>Modelo de BERT con TensorFlow.js</h1>
        
        <!-- Subir archivo PDF -->
        <input type="file" id="pdf-file" class="file-input" accept=".pdf" />

        <!-- Entrada para consulta -->
        <input type="text" id="query" class="query-input" placeholder="Escribe tu consulta..." />

        <button onclick="handleQuery()">Consultar modelo</button>

        <div class="response" id="response"></div>
    </div>

    <script>
        let model;
        let contextText = '';

        // Funci贸n para cargar el modelo de QA (Pregunta y Respuesta)
        async function loadModel() {
            model = await qna.load();
            console.log("Modelo cargado");
        }

        // Funci贸n para procesar PDF y extraer texto
        async function extractTextFromPDF(file) {
            const pdf = await pdfjsLib.getDocument(URL.createObjectURL(file)).promise;
            let textContent = '';
            for (let pageNum = 1; pageNum <= pdf.numPages; pageNum++) {
                const page = await pdf.getPage(pageNum);
                const content = await page.getTextContent();
                content.items.forEach(item => {
                    textContent += item.str + ' ';
                });
            }
            return textContent;
        }

        // Funci贸n para agregar el texto de los PDFs y entrenar el modelo
        async function processPDF(file) {
            const text = await extractTextFromPDF(file);
            contextText = text;  // Guardamos el texto extra铆do del PDF
            console.log("Texto extra铆do del PDF:", contextText);
        }

        // Manejar la consulta del modelo
        async function handleQuery() {
            const query = document.getElementById('query').value;
            if (!query) {
                document.getElementById('response').innerText = "Por favor, escribe una consulta.";
                return;
            }

            if (!contextText) {
                document.getElementById('response').innerText = "No se ha cargado ning煤n PDF para consultar.";
                return;
            }

            // Realizar la consulta utilizando el modelo de QA con el m茅todo correcto
            const answers = await model.findAnswers(query, contextText);

            // Mostrar la respuesta
            if (answers.length > 0) {
                document.getElementById('response').innerText = `Respuesta: ${answers[0].text}`;
            } else {
                document.getElementById('response').innerText = "No se encontr贸 una respuesta.";
            }
        }

        // Escuchar el archivo PDF y procesarlo
        document.getElementById('pdf-file').addEventListener('change', function(event) {
            const file = event.target.files[0];
            if (file) {
                processPDF(file);
            }
        });

        // Cargar el modelo cuando la p谩gina se carga
        loadModel();
    </script>

</body>
</html>