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’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.
"""

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;
}
"""