<!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>
        body {
            font-family: Arial, sans-serif;
            margin: 0;
            padding: 0;
            color: #333;
            background: #f0f0f0;
        }

        .container {
            width: 90%;
            max-width: 800px;
            margin: 20px auto;
            background: #fff;
            padding: 20px;
            box-sizing: border-box;
            border-radius: 8px;
        }

        h1, h3 {
            text-align: center;
            color: #333;
            margin-bottom: 15px;
        }

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

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

        textarea {
            width: 100%;
            margin-bottom: 10px;
            resize: vertical;
            padding: 10px;
            font-size: 16px;
            box-sizing: border-box;
        }

        #transcripcion, #respuestas {
            height: 100px;
        }

        #comentarioUsuario {
            height: 80px;
        }
    </style>
</head>
<body>

    <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>

        <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>
        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();

                // Si el usuario dice "stop", detenemos la grabación y llamamos al modelo de lenguaje
                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;

            // Reemplaza con tu propia API Key de OpenAI
            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>
