| 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); | |
| }; | |
| function adjustHeight() { | |
| var container = document.getElementById('image-container'); | |
| if (container) { | |
| var width = container.offsetWidth; | |
| var height = width * 9 / 16; | |
| container.style.height = height + 'px'; | |
| } | |
| } | |
| window.addEventListener('resize', adjustHeight); | |
| window.addEventListener('load', adjustHeight); | |
| </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鈥檚 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. | |
| """ | |
| css_image_aspect_ratio = """ | |
| #image-container { | |
| position: relative; | |
| width: 100% !important; | |
| height: 100% !important; | |
| border-style: dashed; | |
| overflow: hidden; | |
| min-width: 160px !important; | |
| } | |
| #image-container > div.wrap { | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| width: 100%; | |
| height: 100%; | |
| } | |
| #image-container video { | |
| width: 100%; | |
| height: auto; | |
| object-fit: cover; | |
| } | |
| """ | |