Patrones de Diseño.

Los patrones de diseño son una solución general y reutilizable para un problema
recurrente en el diseño de software (Receta). Se dividen comúnmente en tres
categorías principales:

● Patrones creacionales: Se centran en la creación de objetos. Ayudan a

abstraer el proceso de creación de instancias y permiten que un sistema sea
independiente de cómo se crean, componen y representan sus objetos.
Ejemplo: Factory: Define una interfaz para crear un objeto, pero deja que las
subclases alteren el tipo de objetos que se crearán.

● Patrones estructurales: Se centran en cómo se componen las clases y

objetos para formar estructuras más grandes.
Ejemplo: Composite: Permite que los clientes manipulen objetos simples y
compuestos de la misma manera.

● Patrones de comportamiento: Se centran en la comunicación entre objetos,

cómo se distribuyen las responsabilidades y cómo se gestionan los
algoritmos y patrones de flujo de control.
Ejemplo: Observer: Define una dependencia uno-a-muchos entre objetos, de
modo que cuando un objeto cambia de estado, todos sus dependientes son
notificados y actualizados automáticamente.

Propuesta:

La siguiente tabla define una propuesta de los patrones de diseño a utilizar por el
sistema 2024-A022.

Patrón de diseño. Descripción. Fase.

MVC Divide una aplicación en tres componentes: Modelo General.

(gestión de datos y lógica), Vista (presentación) y
Controlador (manejo de eventos y coordinación).

Composite Permite tratar tanto a objetos individuales como a Vectorización y

composiciones de objetos de manera uniforme. Se Etiquetado
utiliza para construir estructuras jerárquicas.

Observer La relación entre el Generador y Discriminador será Módulo de

de uno a muchos, de modo que cuando un objeto generación de
cambia de estado, todos sus dependientes son proyección facial.
notificados y actualizados automáticamente.
Patrón de Diseño de Observador (Observer):

Si necesitas notificar a otras partes de tu aplicación cuando se generan nuevas

imágenes con StyleGAN, el patrón Observer podría ser útil. Este patrón facilita la
implementación de un sistema de notificación en el que los observadores pueden
reaccionar a eventos generados por el generador de imágenes.

SOLID.
Paradigma orientado a objetos.

Sistema Web: Plataforma informática compuesta por componentes de hardware,

software y tecnologías de red diseñadas, por ejemplo:
● Servidores web
● Bases de datos
● Aplicaciones web
● Protocolos de comunicación
Todos trabajando de manera coordinada para proporcionar servicios y
funcionalidades a través de Internet (World Wide Web).

Un sistema web en la nube: Aplicación o plataforma web que se aloja y ejecuta en

entornos de computación en la nube. En lugar de depender de servidores locales o
infraestructuras físicas, el sistema aprovecha los recursos y servicios
proporcionados por un proveedor de servicios en la nube

Servidor web: Actúa como intermediario entre los usuarios y los sitios web. Su
función principal es almacenar, procesar y entregar páginas web a los usuarios que
las solicitan a través de sus navegadores web.

Los servidores web reciben solicitudes de los clientes, generalmente a través del
protocolo HTTP (Hypertext Transfer Protocol) o su versión segura, HTTPS.

Una vez recibida la solicitud, el servidor web procesa la petición, determina qué
recurso se solicita y realiza las acciones necesarias para recuperar ese recurso.

Los servidores web almacenan los recursos que componen un sitio web, como
archivos HTML, imágenes, archivos CSS, scripts, etc. Estos recursos se organizan
en una estructura de directorios para facilitar su acceso.

Después de procesar la solicitud y recuperar el recurso solicitado, el servidor web

envía la respuesta de vuelta al navegador del cliente.
n
Configuración y Seguridad: Los servidores web pueden configurarse para
implementar medidas de seguridad, gestionar el acceso a recursos, controlar el
tráfico y manejar la autenticación de usuarios. Además, el uso de conexiones
seguras (HTTPS) se ha vuelto cada vez más común para garantizar la privacidad y
la integridad de la comunicación entre el cliente y el servidor.

Algunos ejemplos de servidores web populares son Apache, Nginx, Microsoft

Internet Information Services (IIS) y LiteSpeed. Estos servidores web son esenciales
para el funcionamiento de sitios web y aplicaciones web, ya que actúan como la
infraestructura central que permite la comunicación entre los usuarios y los recursos
en línea.

Patrones de diseño:

Estos sistemas utilizan tecnologías web para permitir la interacción y el intercambio

de información a través de Internet. Algunos de los componentes clave de un
sistema web incluyen:

Servidores web: Estos son programas informáticos que responden a las solicitudes
de los clientes (navegadores web) y entregan páginas web, contenido multimedia u
otros recursos solicitados.

Navegadores web: Son aplicaciones que permiten a los usuarios acceder y

visualizar contenido en la web. Ejemplos comunes son Chrome, Firefox, Safari y
Edge.

Lenguajes de programación web: Se utilizan para desarrollar la lógica y la

funcionalidad del sistema web. Ejemplos incluyen HTML (para la estructura de la
página), CSS (para el diseño y estilo) y JavaScript (para la interactividad del lado del
cliente).

Base de datos: Almacena y gestiona datos que se utilizan en el sistema web. Puede
ser MySQL, PostgreSQL, MongoDB, entre otros.

Protocolos de comunicación: Como HTTP (Hypertext Transfer Protocol) o HTTPS

(HTTP Secure), que facilitan la transferencia de datos entre el navegador y el
servidor.

Aplicaciones web: Son programas informáticos que se ejecutan en servidores web y

proporcionan funcionalidades específicas a los usuarios a través de sus
navegadores.

Los sistemas web pueden variar en complejidad y propósito. Pueden ser desde
simples sitios web estáticos hasta aplicaciones web dinámicas y complejas que
brindan servicios como comercio electrónico, redes sociales, gestión de contenido,
banca en línea, entre otros. La arquitectura de un sistema web puede basarse en
diversos modelos, como el modelo cliente-servidor, arquitectura de tres capas, o
arquitecturas más modernas como microservicios.

Guión Osmar.
Antecedentes (3 párrafos).

Los constantes avances en la visión por computadora han permitido realizar proyecciones
faciales a futuro, comúnmente las podemos observar en aplicaciones de entretenimiento
como FaceApp o los famosos filtros de Tik Tok.

Adelantando un poco la problemática en México existe una emergencia forense reconocida

por las propias autoridades, se reportan alrededor de 39,000 cuerpos no identificados y
numerosas fosas clandestinas de las cuales entre los años 2018 y 2019 se han exhumado
1,124 cuerpos. Por otra parte, se reconoce oficialmente más de 80,000 personas
desaparecidas, cifra que no refleja la totalidad de los casos.

Un sistema de proyección facial a futuro en este escenario puede ser de gran ayuda para la
identificación de personas desaparecidas.

Tecnologías frontend.

Para la interfaz de usuario del sistema optamos por utilizar: HTML5, JavaScript, CSS y
Bootstrap.

Con el estándar HTML5 definimos la estructura de nuestras páginas web. HTML5 en

comparación con sus antiguas versiones cuenta con etiquetas estructurales que permiten
una organización más clara del código, así como la integración de la etiqueta canvas.

JavaScript al ser ejecutada en el navegador del usuario, permite manipular el contenido de

la página en tiempo real, principalmente la utilizaremos para ocultar elementos HTML.

CSS permite controlar la apariencia de los elementos HTML, desde el diseño y el color de
botones hasta el tipo de letra.

Bootstrap es un framework de CSS que ofrece un conjunto de componentes

preestablecidos y un sistema de rejilla que simplifica la creación de interfaces responsive.

Tecnologías backend.

Optamos por Python como nuestro lenguaje de programación principal en el backend

debido a su compatibilidad con herramientas que pueden ser esenciales para alcanzar el
objetivo de nuestro proyecto, tales como OpenCV, dlib, face recognition, Tensorflow y
PyTorch.

Flask, un framework de desarrollo web ligero para Python. Flask se destaca por su
simplicidad en comparación con algunos marcos más grandes como Django. Flask permite
la integración de código Python con HTML para hacer nuestra aplicación dinámica.

OpenCV es una biblioteca de visión por computadora de código abierto. Proporciona

herramientas y algoritmos para el procesamiento de imágenes y visión artificial.
La utilizaremos para análisis de imágenes y reconocimiento facial.

Para el módulo de generación de imagen utilizaremos TensorFlow y Keras.

TF es una biblioteca de código abierto para aprendizaje automático y Keras es una interfaz
de alto nivel para construir y entrenar modelos de aprendizaje profundo.

Cabe destacar que no se descarta la posibilidad de utilizar PyTorch para la generación de

aproximaciones faciales en el futuro, dependiendo de la implementación y los resultados
obtenidos. Además, se considerarán otras herramientas como dlib, face recognition,
pandas, numpy y cualquier otra que pueda surgir durante el desarrollo, con el objetivo de
obtener los mejores resultados posibles.

Un píxel es la unidad básica de una imagen digital, y la información contenida en estos

píxeles es fundamental para la representación visual de la imagen.

Diapositiva Casos de uso.

El sistema se diseñará con una interfaz que permitirá a un único usuario cargar una imagen
facial. Posteriormente, el usuario podrá descargar la proyección facial a futuro en formato
2D.

Diapositiva Sistema.

Realizaremos un sistema web, el cual es un conjunto de aplicaciones interconectadas que

se ejecutan en un servidor y se accede a ellas a través de un navegador web (Interprete).

Consideramos utilizar certificados SSL(HTTPS) para cifrar la información a través del puerto
443(puerto por defecto), transmitiendo la información en flujo de bytes(8 bits(0-1))
secuencialmente bidireccionalmente entre el cliente y el servidor.

Una vez que el cliente tiene conexión con el sistema podrá cargar la imagen haciendo una
petición POST, los datos de la imagen los transformamos a escala de grises para obtener
una mejor lectura de las características faciales.

La conversión a escala de grises en OpenCV implica la asignación de un solo valor de

intensidad a cada píxel en función del color original en los canales RGB.

Después transformar a escala de grises utilizaremos “haarcascade_frontalface_default.xml”

para detectar los rostros de la imagen.
Harcascade básicamente son ventanas rectangulares que se desplazan por la imagen
calculando las sumas de los pixeles en las regiones adyacentes,
Utiliza las características aprendidas durante su entrenamiento para identificar posibles
regiones de interés en nuestro caso son rostros.

Los rostros detectados los ponemos en regiones de interés (ROI) y las vectorizamos
unidimensionalmente como una secuencia de píxeles aplanados que sirvan de entrada para
nuestro Generador de StyleGAN.

StyleGAN es una arquitectura de red neuronal utilizada para generar imágenes.

Se compone de dos redes: una red generadora y una discriminadora.

Con la red generadora crearemos una imagen por medio del Input, la cual será creada por
medio de un nuevo vector ajustado con características de envejecimiento.

La red discriminadora recibe como entrada tanto imágenes reales como imágenes
generadas por el generador. Su tarea es discernir entre imágenes auténticas y aquellas que
son generadas artificialmente.

Una vez que la red discriminadora detecte a la imagen como real, esa imagen será
presentada al usuario y el usuario tendrá la opción de descarga.