<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Transcripción, Generación de Respuestas LLM y apuntes.</title>
    <style>
        /* Matrix-style background */
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            color: white;
            overflow: hidden;
            background: black;
        }

        /* Matrix falling letters */
        .matrix-bg {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            z-index: -1;
            overflow: hidden;
        }

        .matrix-column {
            position: absolute;
            top: 0;
            font-family: monospace;
            font-size: 16px;
            color: #0f0;
            opacity: 0.7;
            animation: fall 10s infinite linear;
        }

        @keyframes fall {
            0% { transform: translateY(-100%); }
            100% { transform: translateY(100vh); }
        }

        /* Container styling */
        .container {
            position: relative;
            width: 90%;
            max-width: 800px;
            margin: 20px auto;
            background: none;
        }

        h1, h3 {
            text-align: center;
            color: #0f0;
            font-family: monospace;
        }

        /* Button styles */
        .btn {
            display: inline-block;
            padding: 10px 20px;
            margin: 5px;
            background-color: #4285F4;
            color: white;
            text-decoration: none;
            border: none;
            border-radius: 4px;
            cursor: pointer;
        }

        .btn:disabled {
            background-color: #7f8c8d;
        }

        /* Textarea styles */
        textarea {
            width: 100%;
            height: 100px; /* Adjusted height to fit better */
            margin-bottom: 10px;
            resize: vertical;
            padding: 10px;
            font-size: 16px;
            background-color: #34495e;
            color: white;
        }

        #transcripcion, #respuestas {
            height: 100px; /* Adjusted height */
        }

        #comentarioUsuario {
            height: 80px;
        }
    </style>
</head>
<body>
    <!-- Matrix background -->
    <div class="matrix-bg" id="matrix-bg"></div>

    <div class="container">
        <h1>Transcripción, Generación de Respuestas LLM y apuntes.</h1>
        <button id="btnIniciar" class="btn">Iniciar Grabación</button>
        <button id="btnDetener" class="btn" disabled="">Detener Grabación</button>
        <h3>Transcripción:</h3>
        <textarea id="transcripcion" placeholder="Aquí aparecerá el texto transcrito..."></textarea>
        <h3>Respuestas:</h3>
        <textarea id="respuestas" placeholder="Aquí aparecerán las respuestas..." readonly=""></textarea>
        <!-- Nuevo recuadro para el comentario del usuario -->
        <h3>Comentario:</h3>
        <textarea id="comentarioUsuario" placeholder="Escribe tu comentario aquí y presiona Enter..."></textarea>
        <button id="btnDescargar" class="btn">Descargar Texto</button>
    </div>

    <script>
        /* Matrix-style background JavaScript */
        function createMatrixBackground() {
            const bg = document.getElementById('matrix-bg');
            const columns = Math.floor(window.innerWidth / 30);
            const chars = "ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";

            for (let i = 0; i < columns; i++) {
                const column = document.createElement('div');
                column.classList.add('matrix-column');
                column.style.left = `${i * 30}px`;
                column.style.animationDelay = `${Math.random() * 10}s`;

                for (let j = 0; j < 30; j++) {
                    const char = chars[Math.floor(Math.random() * chars.length)];
                    column.innerHTML += char + '<br>';
                }

                bg.appendChild(column);
            }
        }

        createMatrixBackground();

        /* Your existing JavaScript code */
        var recognizing = false;
        var finalTranscript = '';
        var recognition = new webkitSpeechRecognition();
        recognition.lang = 'es-ES';
        recognition.continuous = true;
        recognition.interimResults = true;

        var transcripcion = document.getElementById('transcripcion');
        var respuestas = document.getElementById('respuestas');
        var comentarioUsuario = document.getElementById('comentarioUsuario');

        var btnIniciar = document.getElementById('btnIniciar');
        var btnDetener = document.getElementById('btnDetener');
        var btnDescargar = document.getElementById('btnDescargar');

        recognition.onstart = function() {
            recognizing = true;
            btnIniciar.disabled = true;
            btnDetener.disabled = false;
        };

        recognition.onerror = function(event) {
            console.error(event.error);
        };

        recognition.onend = function() {
            recognizing = false;
            btnIniciar.disabled = false;
            btnDetener.disabled = true;
        };

        recognition.onresult = function(event) {
            var interimTranscript = '';
            for (var i = event.resultIndex; i < event.results.length; ++i) {
                var transcript = event.results[i][0].transcript.trim();

                if (transcript.toLowerCase().includes('stop')) {
                    recognition.stop();
                    llamarModeloLenguaje();
                    return;
                }

                if (event.results[i].isFinal) {
                    finalTranscript += transcript + ' ';
                } else {
                    interimTranscript += transcript;
                }
            }
            transcripcion.value = finalTranscript + interimTranscript;
        };

        btnIniciar.addEventListener('click', function() {
            if (recognizing) {
                recognition.stop();
                return;
            }
            finalTranscript = '';
            transcripcion.value = '';
            recognition.start();
        });

        btnDetener.addEventListener('click', function() {
            recognition.stop();
        });

        async function llamarModeloLenguaje() {
            respuestas.value = "Obteniendo respuestas del modelo de lenguaje...";
            var textoTranscrito = transcripcion.value;

            const apiKey = 'sk-proj-vfon7m7hdhEFT6NBtEJcT3BlbkFJeMy741lBst04EstF2X1M';


            const prompt = `Genera tres respuestas variadas y adecuadas para el mensaje transcrito, solo respuestas sin nada mas. Asegúrate de que una respuesta sea neutral, otra afirmativa y otra negativa si se aplica al contexto. Considera que el mensaje puede ser ambiguo o no tener puntuación clara. Usa un tono argentino leve. Ten en cuenta que  respuesta es de una persona discapacitada  tiene que ser  como maximo un parrafo de 50 palabras. El mensaje es: ${textoTranscrito}`;

            try {
                const response = await fetch('https://api.openai.com/v1/chat/completions', {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'Authorization': `Bearer ${apiKey}`
                    },
                    body: JSON.stringify({
                        model: 'gpt-4o-mini',
                        messages: [{ role: 'user', content: prompt }],
                        temperature: 0.7
                    })
                });

                const data = await response.json();
                if (response.ok && data.choices && data.choices.length > 0) {
                    respuestas.value = data.choices.map(choice => choice.message.content.trim()).join('\n\n');
                } else {
                    respuestas.value = 'No se recibieron respuestas del modelo.';
                }
            } catch (error) {
                console.error('Error:', error);
                respuestas.value = 'Ocurrió un error al obtener las respuestas del modelo.';
            }
        }

        comentarioUsuario.addEventListener('keydown', function(event) {
            if (event.key === 'Enter') {
                event.preventDefault();
                descargarArchivo();
                comentarioUsuario.value = '';
            }
        });

        btnDescargar.addEventListener('click', function() {
            descargarArchivo();
        });

        function descargarArchivo() {
            var fechaActual = new Date();
            var fechaTexto = fechaActual.toLocaleString();  // Formato de fecha y hora

            var contenido = "Fecha de creación: " + fechaTexto + "\n\n" +
                            "Transcripción:\n" + transcripcion.value + "\n\n" +
                            "Respuestas:\n" + respuestas.value + "\n\n" +
                            "Comentario del Usuario:\n" + comentarioUsuario.value;

            var blob = new Blob([contenido], { type: 'text/plain' });
            var enlaceDescarga = document.createElement('a');
            enlaceDescarga.href = window.URL.createObjectURL(blob);
            enlaceDescarga.download = 'resultado.txt';
            enlaceDescarga.click();
        }
    </script>
</body>
</html>

