Multiple enhacements

Dockerfile

@@ -7,7 +7,7 @@ WORKDIR /usr/src/app
 COPY app.py .
 COPY lambdas.py .
 COPY requirements.txt .
-
+COPY descriptions.py .
 # Installations
 RUN apt-get update && apt-get install libzbar0 -y && pip install pyzbar
 RUN pip install --no-cache-dir --upgrade -r requirements.txt

app.py

@@ -7,22 +7,11 @@ from PIL import Image
 import pandas as pd
 import os.path
 import numpy as np
+from datetime import datetime, timedelta
+from descriptions import prefer_frontal_cam_html, docu_eng, docu_cat
 
 DEBUG = True
 
-prefer_frontal_cam_html = """
-<script>
-const originalGetUserMedia = navigator.mediaDevices.getUserMedia.bind(navigator.mediaDevices);
-
-navigator.mediaDevices.getUserMedia = (constraints) => {
-  if (!constraints.video.facingMode) {
-    constraints.video.facingMode = {ideal: "environment"};
-  }
-  return originalGetUserMedia(constraints);
-};
-</script>
-"""
-
 config = {'possible_shifts': {'No shifts': 0}, 'possible_modes': ["waste"]}
 
 
@@ -52,26 +41,32 @@ def login(username, password) -> bool:
                           'possible_modes': possible_modes,
                           'possible_shifts': possible_shifts,
                           }
+            config.clear()
             config.update(config_aux)
 
             return True
     return False
 
 
-def start_app(shift_id, mode):
+def start_app(shift_id, mode, date):
     try:
-        config_aux = {'shift_id': shift_id,
-                      'mode': mode}
+        config_aux = {'date': date,
+                      'shift_id': shift_id,
+                      'mode': mode,
+                      'possible_shifts': {'No shifts': 0},
+                      'possible_modes': ["waste"]}
         config.update(config_aux)
-        gr.Info('Loading models', )
+        gr.Info('Loading models. This may take a while')
         status_code, r = upload_models(**config)
         if status_code in (201, 200, 204):
+            config.update(r)
             gr.Info('Models Correctly Loaded. Ready to predict')
+            tab_id = 1
         else:
             raise gr.Error(f'Error loading the models: {r}')
-        config.update(r)
     except Exception as e:
         raise gr.Error(f'Error Uploading the models. \n {e}')
+    return gr.Tabs(selected=tab_id, visible=True)
 
 
 def predict_app(image, patient_id):
@@ -89,58 +84,83 @@ def predict_app(image, patient_id):
 
 
 # APP
+with (gr.Blocks(head=prefer_frontal_cam_html) as block):
+    with gr.Tabs() as tabs:
+        with gr.Tab(label='Welcome', id=0) as welcome_tab:
+            gr.Info('Loading ...')
+            @gr.render()
+            def header():
+                gr.Markdown(f'# User: {config.get("restaurant_name", "Proppos")}', render=True)
+
+
+            logout_button = gr.Button(icon=None, link='/logout', value='Logout / Exit ↩')
+
+            @gr.render()
+            def render_dropdowns():
+                shift_dropdown = gr.Dropdown(label='Meal/Apat/Comida',
+                                             value=list(config["possible_shifts"].items())[0],
+                                             choices=tuple(config["possible_shifts"].items()))
+                mode_dropdown = gr.Dropdown(label='Mode',
+                                            value=config['possible_modes'][0],
+                                            choices=config["possible_modes"])
+
+                days = [datetime.today().strftime('%Y-%m-%d'),
+                        (datetime.now() - timedelta(days=1)).strftime('%Y-%m-%d')]
+                date_chooser = gr.Dropdown(choices=days, label='Date/Data/Fecha', value=days[0])
+
+                start_button = gr.Button(value='START ▶️')
+                start_button.click(fn=start_app, inputs=[shift_dropdown, mode_dropdown, date_chooser], outputs=tabs)
+
+            gr.Markdown(""" * Do you have any doubt? Please, see the documentation tab. \n
+                            * Tens un dubte? Consulta la pestanya de documentació. """)
+
+            # logout_button.click(fn=lambda: config.clear())
+
+        with gr.Tab(label='📷 Capture', id=1):
+            # MAIN TAB TO PREDICT
+            gr.Markdown(f""" 1. Click to Access Webcam
+                             2. Press the red button to start recording
+                             3. Place the tray so it is centered in the displayed image and
+                             4. Press the grey button 'PRESS TO PREDICT'
+                        """)
+            im = gr.Image(sources=['webcam'], streaming=True, mirror_webcam=False, type='pil',
+                          height=720, width=1280)
+            with gr.Accordion():
+                eater_id = gr.Textbox(label='Patient Identification', placeholder='Searching Patient ID')
+
+            current_eater_id = {'value': None}
+
+
+            @gr.on(inputs=im, outputs=eater_id)
+            def search_eater_id(image):
+                d = decode(image)
+                default_value = None
+                current_value = current_eater_id['value'] or default_value
+                new_value = d[0].data if d else default_value
+                # If it is really a new value different from the default one, change it.
+                final_value = new_value if new_value != default_value else current_value
+                current_eater_id['value'] = final_value
+                return final_value
+
+
+            b = gr.Button('PRESS TO PREDICT')
+            b.click(fn=predict_app, inputs=[im, eater_id], outputs=gr.Info())
+
+        with gr.Tab(label='ℹ️ Status', id=2):
+            gr.Markdown(' Press the button to see the status of the Application and technical information')
+            load_status_button = gr.Button('Load Status')
+            status_json = gr.Json(label='Status')
+            load_status_button.click(fn=lambda: config, outputs=status_json)
+
+        with gr.Tab(label='📄 Documentation', id=3):
+            choices = [('ENG 🇬🇧', docu_eng), ('CAT', docu_cat)]
+            c = gr.Checkboxgroup(label='Select the language', choices=choices)
+
+            @gr.render()
+            def display_docu():
+                d = gr.Markdown(docu_eng)
+                c.change(fn=lambda x: x, inputs=c, outputs=d)
+
 
-with gr.Blocks(head=prefer_frontal_cam_html) as block:
-    with gr.Tab(label='Welcome'):
-        @gr.render()
-        def render_dropdowns():
-            gr.Markdown(f'# User: {config.get("restaurant_name", "Proppos")}')
-
-            shift_dropdown = gr.Dropdown(label='Meal/Comida/Apat',
-                                         value=list(config["possible_shifts"].items())[0],
-                                         choices=tuple(config["possible_shifts"].items()))
-            mode_dropdown = gr.Dropdown(label='Mode',
-                                        value=config['possible_modes'][0],
-                                        choices=config["possible_modes"])
-            start_button = gr.Button(value='START')
-            start_button.click(fn=start_app, inputs=[shift_dropdown, mode_dropdown])
-            gr.LogoutButton()
-
-    with gr.Tab(label='📷 Capture'):
-        # MAIN TAB TO PREDICT
-        gr.Markdown(f""" 1. Click to Access Webcam
-                         2.  
-                    """)
-        im = gr.Image(sources=['webcam'], streaming=True, mirror_webcam=False, type='pil',
-                      height=720, width=1280)
-        with gr.Accordion():
-            eater_id = gr.Textbox(label='Patient Identification', placeholder='Searching Patient ID')
-
-        current_eater_id = {'value': None}
-
-
-        @gr.on(inputs=im, outputs=eater_id)
-        def search_eater_id(image):
-            d = decode(image)
-            default_value = None
-            current_value = current_eater_id['value'] or default_value
-            new_value = d[0].data if d else default_value
-            # If it is really a new value different from the default one, change it.
-            final_value = new_value if new_value != default_value else current_value
-            current_eater_id['value'] = final_value
-            return final_value
-
-
-        b = gr.Button('PRESS TO PREDICT')
-        b.click(fn=predict_app, inputs=[im, eater_id], outputs=gr.Info())
-
-    with gr.Tab(label='ℹ️ Status'):
-        gr.Markdown(' Press the button to see the status of the Application and technical information')
-        load_status_button = gr.Button('Load Status')
-        status_json = gr.Json(label='Status')
-        load_status_button.click(fn=lambda: config, outputs=status_json)
-
-    with gr.Tab(label='📄 Documentation'):
-        gr.Markdown()
 
 block.launch(show_api=False, auth=login)

descriptions.py

@@ -0,0 +1,167 @@
+prefer_frontal_cam_html = """
+<script>
+const originalGetUserMedia = navigator.mediaDevices.getUserMedia.bind(navigator.mediaDevices);
+
+navigator.mediaDevices.getUserMedia = (constraints) => {
+  if (!constraints.video.facingMode) {
+    constraints.video.facingMode = {ideal: "environment"};
+  }
+  return originalGetUserMedia(constraints);
+};
+</script>
+"""
+
+docu_eng="""
+## User Guide
+
+This application is intended to create the multiple 
+
+Welcome to the application! This guide will help you understand how to use each feature and navigate through the different tabs.
+
+## Quick Start
+
+1. In the Welcome tab, select the shift the date and the mode and press START. 
+2. This will trigger the AI models that will load the workflow for the specific configuration.
+3. Once the AI models are ready, the app will switch to the Capture tab. 
+4. Follow the steps in Capture Tab to start predicting. Once a prediction is send, an info panel will pop up saying so.
+5. Repeat the 4th process with each tray. 
+
+
+## Overview
+
+This AI application helps hospitals and restaurants capture images of trays, and automatically compute the food that 
+has been eaten (intake) or the food that has not (waste).
+
+## Tabs
+
+### 1. **Welcome Tab**
+
+When you first log in, you'll see the Welcome tab. Here, you need to:
+
+- **Select a Shift**: Choose the appropriate shift from the dropdown menu.
+- **Select a Mode**: Choose the mode of operation.
+- **Select a Date**: Choose the date for which you want to make predictions.
+- **Start the Application**: Click the 'START ▶️' button to load the necessary models.
+
+Once you've click start, the Capture Tab will open automatically once the AI models are ready to be used.
+This process can take between 5 seconds to two minutes. It is specially time spending when there are many new products. 
+
+### 2. **📷 Capture Tab**
+
+This is the main tab where you will capture images and make predictions.
+
+1. **Access Webcam**: Click the button to turn on your webcam.
+2. **Start Recording**: Press the red button to start recording. It is strongly suggested to hold the mobile in horizontal mode. 
+3. **Position the Tray**: Place the tray so it is centered in the displayed image.
+4. **Predict**: Press the grey button labeled 'PRESS TO PREDICT' to make a prediction based on the captured image.
+
+### 3. **ℹ️ Status Tab**
+
+In this tab, you can check the current status of the application.
+Some of the info can be pretty technical. 
+
+- **Load Status**: Press the 'Load Status' button to view technical information and the status of the application.
+
+## Steps to Use the Application
+
+1. **Log In**:
+    - Enter your username and password to access the app.
+
+2. **Setup**:
+    - Go to the Welcome tab.
+    - Select your shift, mode, and date.
+    - Click 'START ▶️' to load the models.
+
+3. **Capture and Predict**:
+    - Go to the 📷 Capture tab.
+    - Follow the instructions to capture an image using your webcam.
+    - Press 'PRESS TO PREDICT' to make a prediction.
+
+4. **Check Status**:
+    - Go to the ℹ️ Status tab.
+    - Press 'Load Status' to view the application’s status.
+
+## Troubleshooting
+
+- **If you encounter issues**: Ensure your webcam is working and you have selected the correct shift, mode, and date.
+- **For additional help**: Contact support.
+
+Thank you for using our application! We hope this guide helps you navigate and use all the features effectively.
+"""
+
+
+docu_cat="""
+## Guia d'Usuari
+
+Aquesta aplicació està destinada a crear els múltiples
+
+Benvingut a l'aplicació! Aquesta guia t'ajudarà a entendre com utilitzar cada funció i navegar pels diferents apartats.
+
+## Inici Ràpid
+
+1. A la pestanya de Benvinguda, selecciona el torn, la data i el mode i prem INICI.
+2. Això activarà els models d'IA que carregaran el flux de treball per a la configuració específica.
+3. Un cop els models d'IA estiguin a punt, l'aplicació passarà a la pestanya de Captura.
+4. Segueix els passos a la pestanya de Captura per començar a predir. Un cop s'hagi enviat una predicció, apareixerà un panell d'informació indicant-ho.
+5. Repeteix el procés del punt 4 amb cada safata.
+
+## Descripció General
+
+Aquesta aplicació d'IA ajuda hospitals i restaurants a capturar imatges de safates, i calcular automàticament el menjar que s'ha menjat (ingesta) o el menjar que no s'ha menjat (residus).
+
+## Pestanyes
+
+### 1. **Pestanya de Benvinguda**
+
+Quan iniciïs sessió, veuràs la pestanya de Benvinguda. Aquí, has de:
+
+- **Seleccionar un Torn**: Tria el torn apropiat del menú desplegable.
+- **Seleccionar un Mode**: Tria el mode d'operació.
+- **Seleccionar una Data**: Tria la data per a la qual vols fer prediccions.
+- **Iniciar l'Aplicació**: Fes clic al botó 'INICI ▶️' per carregar els models necessaris.
+
+Un cop hagis fet clic a iniciar, la pestanya de Captura s'obrirà automàticament un cop els models d'IA estiguin a punt per ser utilitzats.
+Aquest procés pot trigar entre 5 segons i dos minuts. És especialment llarg quan hi ha molts productes nous.
+
+### 2. **📷 Pestanya de Captura**
+
+Aquesta és la pestanya principal on capturaràs imatges i faràs prediccions.
+
+1. **Accedir a la Càmera Web**: Fes clic al botó per activar la teva càmera web.
+2. **Començar a Gravar**: Prem el botó vermell per començar a gravar. Es recomana fermament mantenir el mòbil en mode horitzontal.
+3. **Posicionar la Safata**: Col·loca la safata de manera que quedi centrada a la imatge mostrada.
+4. **Predir**: Prem el botó gris etiquetat com 'PREMEU PER PREDIR' per fer una predicció basada en la imatge capturada.
+
+### 3. **ℹ️ Pestanya d'Estat**
+
+En aquesta pestanya, pots comprovar l'estat actual de l'aplicació.
+Alguna de la informació pot ser tècnica.
+
+- **Carregar Estat**: Prem el botó 'Carregar Estat' per veure informació tècnica i l'estat de l'aplicació.
+
+## Passos per Utilitzar l'Aplicació
+
+1. **Iniciar Sessió**:
+    - Introdueix el teu nom d'usuari i contrasenya per accedir a l'aplicació.
+
+2. **Configuració**:
+    - Ves a la pestanya de Benvinguda.
+    - Selecciona el torn, mode i data.
+    - Fes clic a 'INICI ▶️' per carregar els models.
+
+3. **Captura i Predicció**:
+    - Ves a la pestanya 📷 Captura.
+    - Segueix les instruccions per capturar una imatge amb la teva càmera web.
+    - Prem 'PREMEU PER PREDIR' per fer una predicció.
+
+4. **Comprovar l'Estat**:
+    - Ves a la pestanya ℹ️ Estat.
+    - Prem 'Carregar Estat' per veure l'estat de l'aplicació.
+
+## Resolució de Problemes
+
+- **Si tens problemes**: Assegura't que la teva càmera web està funcionant i has seleccionat el torn, mode i data correctes.
+- **Per a ajuda addicional**: Contacta amb el suport tècnic.
+
+Gràcies per utilitzar la nostra aplicació! Esperem que aquesta guia t'ajudi a navegar i utilitzar totes les funcions de manera efectiva.
+"""