<!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. La respuesta tiene que ser de como maximo un parrafo de 100 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>

