merge frontend code from https://github.com/jBrotonsTeladoc/jBrotonsT…

…eladoc.github.io
geovalexis · Jun 14, 2024 · 94deeea · 94deeea
1 parent 6fee618
commit 94deeea
Show file tree

Hide file tree

Showing 17 changed files with 2,322 additions and 17 deletions.
diff --git a/README.md b/README.md
@@ -1,20 +1,16 @@
-## 💫 Overview
+### Hi there 👋
 
-Leverage an AI model that assesses patient-reported symptoms and medical history during telehealth consultations to accurately determine case severity and direct patients to the appropriate department or level of care, saving time and enhancing the safety and efficiency of remote healthcare.
+<!--
+**jBrotonsTeladoc/jBrotonsTeladoc** is a ✨ _special_ ✨ repository because its `README.md` (this file) appears on your GitHub profile.
 
+Here are some ideas to get you started:
 
-## 🎯️ Getting started
-
-1. Make sure you have python v3.11 installed on your machine. You can download it from [here](https://www.python.org/downloads/).
-
-2. Install dependencies:
-   ```
-   $ pip install -r requirements.txt
-   ```
-
-3. Fill in environment variables in the `.env` file. You can copy the `.env.example` file and rename it to `.env`.
-
-4. Run the tool by the following command:
-   ```
-   $ python main.py
-   ```
+- 🔭 I’m currently working on ...
+- 🌱 I’m currently learning ...
+- 👯 I’m looking to collaborate on ...
+- 🤔 I’m looking for help with ...
+- 💬 Ask me about ...
+- 📫 How to reach me: ...
+- 😄 Pronouns: ...
+- ⚡ Fun fact: ...
+-->
diff --git a/fonts/Effra.ttf b/fonts/Effra.ttf
diff --git a/index.html b/index.html
@@ -0,0 +1,58 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>LAIA</title>
+    <link rel="icon" href="resources/favicon.ico" type="image/x-icon">
+    <link rel="stylesheet" href="styles.css">
+    <link href="video-js.css" rel="stylesheet" />
+</head>
+<body>
+    <div class="header">
+        <img src="resources/tdh-logo-full-color-rgb.svg" class="image_header" />
+        <button id="user-button" class="user-button">
+          <img id="user-img" src="resources/user.png"style="width: 25px; height: 25px;">
+        </button>
+        <div class="info_user" id="info_user" style="display: none;">
+          <p id="member_id"></p>
+          <p id="member_gender"></p>
+          <p id="member_age"></p>
+        </div>
+    </div>
+    <div class="popup" id="popup">
+        <div class="popup-content">
+            <p>You are going to contact Laia, an AI Empowered channel, if this is a medical emergency please call to 9-1-1</p>
+            <button id="start-button" class="start-button">Accept</button>
+        </div>
+    </div>
+    <div class="container" id="container" style="display: none;">
+        <div class="left-grid">
+            <!-- Input para la respuesta del chat -->
+            <video id="background-video" class="video-js vjs-default-skin background-video" autoplay muted >
+              <source src="resources/wait_video_0.mp4" type="video/mp4">
+              Your browser does not support the video tag.
+            </video>
+        </div>
+        <div class="right-grid">
+            <div class="chat-container">
+                <div class="chat-header">
+                    <h2>Chat</h2>
+                </div>
+                <div class="chat-messages" id="chat-messages">
+                    <!-- Los mensajes del chat aparecerán aquí -->
+                </div>
+                <form id="chat-form" class="chat-form">
+                    <button id="mic-button" class="mic-button">
+                        <img id="mic-img" src="resources/on_voice.png"style="width: 18px; height: 25px;">
+                    </button>
+                    <input type="text" id="chat-input" class="chat-input" placeholder="Write a message..." required>
+                    <button type="submit" class="chat-submit">Send</button>
+                </form>
+            </div>
+        </div>
+    </div>
+    <script src="script.js"></script>
+    <script src="video.min.js"></script>
+</body>
+</html>
diff --git a/resources/favicon.ico b/resources/favicon.ico
diff --git a/resources/init_video.mp4 b/resources/init_video.mp4
diff --git a/resources/no_voice.png b/resources/no_voice.png
diff --git a/resources/on_voice.png b/resources/on_voice.png
diff --git a/resources/size.py b/resources/size.py
@@ -0,0 +1,19 @@
+from moviepy.editor import VideoFileClip
+
+def resize_video(input_path, output_path, width, height):
+    # Cargar el video
+    clip = VideoFileClip(input_path)
+
+    # Cambiar el tamaño del video
+    resized_clip = clip.resize(newsize=(width, height))
+
+    # Guardar el video redimensionado
+    resized_clip.write_videofile(output_path, codec='libx264')
+
+if __name__ == "__main__":
+    input_path = "wait_video_1.mp4"  # Ruta al video original
+    output_path = "wait_video_1.mp4"  # Ruta al video redimensionado
+    width = 1104  # Nuevo ancho
+    height = 736  # Nuevo alto
+
+    resize_video(input_path, output_path, width, height)
diff --git a/resources/tdh-logo-full-color-rgb.svg b/resources/tdh-logo-full-color-rgb.svg
diff --git a/resources/user.png b/resources/user.png
diff --git a/resources/wait_video_0.mp4 b/resources/wait_video_0.mp4
diff --git a/resources/wait_video_1.mp4 b/resources/wait_video_1.mp4
diff --git a/resources/wait_video_2.mp4 b/resources/wait_video_2.mp4
diff --git a/script.js b/script.js
@@ -0,0 +1,234 @@
+document.addEventListener('DOMContentLoaded', () => {
+
+    let memberData = [];
+    let memberId = getRandomInt(300)+1;
+    let totalVideos = 2;
+    const micButton = document.getElementById('mic-button');
+    const responseInput = document.getElementById('chat-input');
+    let recognizing = false;
+    let recognition;
+    let messages = [];
+    const videoElement = document.getElementById('background-video');
+    const player = videojs(videoElement);
+    let mic_input_text = '';
+    const azureKey = 'fvgyP2xTbhnH-Uq5J36NKbGB9FZGwfK1-tT4FuDn3n5PAzFugBHanw=='; 
+
+
+    document.getElementById('chat-form').addEventListener('submit', function(event) {
+        event.preventDefault();
+        var input = document.getElementById('chat-input');
+        userMessage(input.value)
+        input.value = '';
+    });
+
+    document.getElementById('chat-input').addEventListener('keydown', function(event) {
+        if (event.key === 'Enter') {
+            event.preventDefault();
+            document.querySelector('.chat-submit').click();
+        }
+    });
+
+
+    document.getElementById('start-button').addEventListener('click', () => {
+        document.getElementById('popup').style.display = 'none';
+        document.getElementById('container').style.display = '';
+        addMessageToChat('assistant',JSON.stringify({'text': "Hi, I'm Laia! I'm here to assist you into choosing the correct Teladoc program for your care. Could you share with me what symptoms do you have? ",'isFinal':'false'}))
+        playNewVideo('resources/init_video.mp4');
+    })
+
+    document.getElementById('user-button').addEventListener('click', () => {
+        let new_display = '';
+        if (document.getElementById('info_user').style.display == ''){
+            new_display = 'none';
+        }
+        document.getElementById('info_user').style.display = new_display;
+    })
+
+    fetch('data/member/pii.csv')
+        .then(response => response.text())
+        .then(text => {
+            memberData= parseCSV(text);
+            document.getElementById('member_id').textContent = 'Member Id: '+memberId;
+            document.getElementById('member_gender').textContent = 'Age: '+memberData[memberId]["age"];
+            document.getElementById('member_age').textContent = 'Gender: '+memberData[memberId]["gender"];
+        })
+        .catch(error => console.error('Error fetching the CSV file:', error));
+
+    function parseCSV(text) {
+        const lines = text.split('\n');
+        const result = [];
+        const headers = lines[0].split(',');
+
+        for (let i = 1; i < lines.length; i++) {
+            const obj = {};
+            const currentline = lines[i].split(',');
+
+            for (let j = 0; j < headers.length; j++) {
+                obj[headers[j]] = currentline[j];
+            }
+            result.push(obj);
+        }
+        return result;
+    }
+    function userMessage(message){
+        if (message.trim() !== '') {
+            addMessageToChat('user', message);
+        }
+        generateResponse();
+    }
+
+    function addMessageToChat(type, message) {
+        const chatMessages = document.getElementById('chat-messages');
+        const messageElement = document.createElement('div');
+        messageElement.classList.add('chat-message', type);
+        messageElement.textContent = type=='assistant' ? JSON.parse(message)['text']:message;
+        messageElement.style.width = (message.length*8.15) + 'px';
+        chatMessages.appendChild(messageElement);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+        messages.push({"role":type,"content":message});
+    }
+
+
+    if ('webkitSpeechRecognition' in window) {
+        recognition = new webkitSpeechRecognition();
+        recognition.continuous = true;
+        recognition.interimResults = true;
+        recognition.lang = 'es-ES';
+
+        recognition.onstart = function() {
+            recognizing = true;
+            document.getElementById('mic-img').src = 'resources/no_voice.png'
+            document.getElementById('mic-img').style.width = '25px';
+        };
+
+        recognition.onend = function() {
+            recognizing = false;
+            //userMessage(mic_input_text)
+            document.getElementById('mic-img').src = 'resources/on_voice.png'
+            document.getElementById('mic-img').style.width = '18px';
+            responseInput.value = mic_input_text
+        };
+
+        recognition.onresult = function(event) {
+            let interimTranscript = '';
+            let finalTranscript = '';
+
+            for (let i = event.resultIndex; i < event.results.length; ++i) {
+                if (event.results[i].isFinal) {
+                    finalTranscript += event.results[i][0].transcript;
+                } else {
+                    interimTranscript += event.results[i][0].transcript;
+                }
+            }
+            mic_input_text = finalTranscript || interimTranscript;
+        };
+    }
+
+    micButton.addEventListener('click', function() {
+        if (recognizing) {
+            recognition.stop();
+        } else {
+            recognition.start();
+        }
+    });
+
+    function addSpinner(){
+        const chatMessages = document.getElementById('chat-messages');
+        const messageElement = document.createElement('div');
+        messageElement.classList.add('chat-message', 'spinner','spinner_chat');
+        chatMessages.appendChild(messageElement);
+        chatMessages.scrollTop = chatMessages.scrollHeight;
+    }
+
+    function removeSpinner() {
+        const chatMessages = document.getElementById('chat-messages');
+        const spinnerElements = chatMessages.getElementsByClassName('spinner');
+        if (spinnerElements.length > 0) {
+            const lastSpinner = spinnerElements[spinnerElements.length - 1];
+            chatMessages.removeChild(lastSpinner);
+        }
+    }
+
+
+    function generateResponse() {
+        const url = `https://laia-backend.azurewebsites.net/api/generate?code=${azureKey}`;
+        console.log(messages);
+
+        const requestBody = {
+            messages: messages,
+            memberId: memberId
+        };
+        addSpinner();
+        fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(requestBody)
+        })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok ' + response.statusText);
+                }
+                return response.text();
+            })
+            .then(data => {
+                console.log('DATA:', data);
+                generateAvatar(data)
+            })
+            .catch(error => console.error('Error:', error));
+    }
+
+    function generateAvatar(data_text) {
+        const url = `https://laia-backend.azurewebsites.net/api/avatar?code=${azureKey}`;
+        const requestBody = {
+            message: JSON.parse(data_text)['text']
+        };
+        console.log(messages[messages.length - 1].content);
+        fetch(url, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json'
+            },
+            body: JSON.stringify(requestBody)
+        })
+            .then(response => {
+                if (!response.ok) {
+                    throw new Error('Network response was not ok ' + response.statusText);
+                }
+                return response.blob();
+            })
+            .then(data => {
+                var url = URL.createObjectURL(data);
+                playNewVideo(url);
+                removeSpinner();
+                addMessageToChat('assistant', data_text); // Asegúrate de que `addMessageToChat` maneje la cadena JSON
+            })
+            .catch(error => {
+                console.log(error)
+                removeSpinner();
+                addMessageToChat('assistant', data_text);
+            });
+    }
+
+
+    function playNewVideo(videoUrl) {
+        player.pause();
+        player.src({ type: 'video/mp4', src: videoUrl });
+        player.loop(false);
+        player.muted(false);
+        player.play();
+    }
+
+    player.on('ended', () => {
+        player.pause();
+        player.src({ type: 'video/mp4', src: 'resources/wait_video_'+getRandomInt(totalVideos)+'.mp4' });
+        player.loop(true);
+        player.muted(true);
+        player.play();
+    });
+
+    function getRandomInt(max) {
+        return Math.floor(Math.random() * max);
+      }
+});