Spaces:

eduardmtz
/

www

Running

App Files Files Community

eduardmtz commited on Dec 19, 2024

Commit

eab3441

verified ·

1 Parent(s): ca7d73a

Update test3.html

Browse files

Files changed (1) hide show

test3.html +96 -65

test3.html CHANGED Viewed

@@ -3,90 +3,121 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Modelo de Preguntas y Respuestas sobre un PDF</title>
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow/tfjs"></script>
     <script src="https://cdn.jsdelivr.net/npm/@tensorflow-models/bert"></script>
-    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.11.338/pdf.min.js"></script>
 </head>
 <body>
-    <h1>Modelo de Preguntas y Respuestas sobre un PDF</h1>
-    <input type="file" id="pdfInput" />
-    <button onclick="procesarPDF()">Cargar PDF</button>
-    <h2>Preguntar sobre el PDF</h2>
-    <input type="text" id="inputPregunta" placeholder="Escribe tu pregunta aquí">
-    <button onclick="responderPregunta()">Hacer pregunta</button>
-    <h3>Respuesta:</h3>
-    <div id="respuesta"></div>
     <script>
-        // Variable global para almacenar el texto del PDF
-        let textoPDF = "";
-        // Cargar y procesar el archivo PDF
-        async function procesarPDF() {
-            const archivo = document.getElementById("pdfInput").files[0];
-            if (archivo) {
-                const archivoPDF = await leerPDF(archivo);
-                textoPDF = archivoPDF.join(" ");
-                alert("PDF cargado y procesado.");
             }
         }
-        // Leer y extraer el texto del archivo PDF
-        async function leerPDF(archivo) {
-            const lector = new FileReader();
-            return new Promise((resolve, reject) => {
-                lector.onload = async function (e) {
-                    const arrayBuffer = e.target.result;
-                    const pdf = await pdfjsLib.getDocument(arrayBuffer).promise;
-                    let texto = [];
-                    for (let i = 1; i <= pdf.numPages; i++) {
-                        const pagina = await pdf.getPage(i);
-                        const contenido = await pagina.getTextContent();
-                        const textoPagina = contenido.items.map(item => item.str).join(" ");
-                        texto.push(textoPagina);
-                    }
-                    resolve(texto);
-                };
-                lector.onerror = reject;
-                lector.readAsArrayBuffer(archivo);
-            });
         }
-        // Función para responder una pregunta utilizando el texto del PDF
-        async function responderPregunta() {
-            const pregunta = document.getElementById("inputPregunta").value;
-            if (!textoPDF) {
-                alert("Por favor, cargue un PDF primero.");
                 return;
             }
-            // Enviar la pregunta y el texto del PDF al modelo para obtener la respuesta
-            const respuesta = await obtenerRespuestaConBERT(pregunta, textoPDF);
-            // Mostrar la respuesta
-            document.getElementById("respuesta").innerText = "Respuesta: " + respuesta;
         }
-        // Función para obtener respuesta utilizando un modelo de TensorFlow.js con BERT
-        async function obtenerRespuestaConBERT(pregunta, contexto) {
-            // Cargar el modelo preentrenado de BERT usando TensorFlow.js
-            const modelo = await tf.loadGraphModel('https://tensorflowjs-models.s3.us-east-2.amazonaws.com/distilbert_squad/model.json');
-            // Procesar la pregunta y contexto para usar en el modelo (esto varía según el modelo específico)
-            const respuesta = await modelo.predict({
-                question: pregunta,
-                context: contexto
-            });
-            // Devolver la respuesta
-            return respuesta;
-        }
     </script>
 </body>
 </html>

 <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/bert"></script>
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/pdf.js/2.10.377/pdf.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 trainingData = [];
+        // Función para cargar el modelo DistilBERT
+        async function loadModel() {
+            model = await tf.loadLayersModel('https://cdn.jsdelivr.net/npm/@tensorflow-models/bert/dist/bert_model.json');
+            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 trainModel(file) {
+            const text = await extractTextFromPDF(file);
+            trainingData.push(text);
+            // Preprocesar el texto para BERT (esto es un ejemplo básico)
+            const inputText = text.split(' ').slice(0, 512).join(' ');  // Limitar el tamaño del texto
+            // Predecir con DistilBERT (aquí solo mostramos un ejemplo básico)
+            const tokenizedInput = tokenizeInput(inputText);
+            const prediction = await model.predict(tokenizedInput);
+            console.log(prediction);  // Aquí deberías implementar más lógica para entrenar el modelo
+        }
+        // Tokenizar el texto de entrada
+        function tokenizeInput(inputText) {
+            // Asegúrate de usar una correcta tokenización basada en BERT
+            // Este es un ejemplo básico, puede requerir una implementación completa según TensorFlow.js y BERT
+            const tokens = inputText.split(' ');
+            const inputTensor = tf.tensor([tokens.map(token => token.charCodeAt(0))]); // Tokenización básica
+            return inputTensor;
         }
+        // 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;
             }
+            // Tokenizar y hacer una predicción con el modelo
+            const tokenizedQuery = tokenizeInput(query);
+            const queryPrediction = await model.predict(tokenizedQuery);
+            // Aquí deberías implementar la lógica para dar una respuesta basada en la predicción
+            document.getElementById('response').innerText = `Respuesta del modelo: ${queryPrediction}`;
         }
+        // Escuchar el archivo PDF y entrenar el modelo
+        document.getElementById('pdf-file').addEventListener('change', function(event) {
+            const file = event.target.files[0];
+            if (file) {
+                trainModel(file);
+            }
+        });
+        // Cargar el modelo cuando la página se carga
+        loadModel();
     </script>
 </body>
 </html>