|
|
|
| [Home](home) | [Escopo e Cronograma](escopo-e-cronograma) | [Processo](processo) | [Mockups](design_mockups) | [**Configuração**](configuracao) | [Arquitetura](arquitetura) | [Código](codigo) | [BD](banco_dados) | [Qualidade](qualidade) | [Utilização](utilizacao) |
|
|
|
|
| :----------: | :---------------------------: | :------------------: | :--------------: | :------------------------------: | :------------------------: | :--------------: | :---------------: | :--------------------: | :----------------------: |
|
|
|
|
|
|
|
|
**Arquitetura do FrontEnd**
|
|
|
|
|
|
|
|
Estrutura do Projeto.
|
|
|
|
Aqui está uma visão geral da estrutura básica do projeto:
|
|
|
|
|
|
|
|
|
|
|
|
```python
|
|
|
|
hoortech_frontend/
|
|
|
|
├── node_modules/ # Módulos e pacotes instalados via npm
|
|
|
|
├── public/ # Arquivos públicos estáticos
|
|
|
|
│ ├── favicon.ico # Ícone da aba do navegador
|
|
|
|
│ ├── index.html # Arquivo HTML principal
|
|
|
|
│ ├── logo192.png # Ícone padrão (opcional)
|
|
|
|
│ ├── logo512.png # Ícone padrão (opcional)
|
|
|
|
│ ├── manifest.json # Configurações de PWA (opcional)
|
|
|
|
│ └── robots.txt # Configurações para motores de busca
|
|
|
|
├── src/ # Código-fonte do projeto
|
|
|
|
│ ├── assets/ # Arquivos estáticos (imagens, fontes, etc.)
|
|
|
|
│ ├── components/ # Componentes React reutilizáveis
|
|
|
|
│ │ ├── camera/ # Componentes relacionados à câmera
|
|
|
|
│ │ ├── displayLayout/ # Componentes de layout de exibição
|
|
|
|
│ │ ├── header/ # Componente do cabeçalho
|
|
|
|
│ │ ├── languageDropdown/ # Dropdown para seleção de idioma
|
|
|
|
│ │ ├── modal/ # Componentes de modal
|
|
|
|
│ │ ├── primaryButton/ # Botão principal reutilizável
|
|
|
|
│ │ └── translationHistory/ # Histórico de traduções realizadas
|
|
|
|
│ ├── pages/ # Componentes de página
|
|
|
|
│ ├── services/ # Serviços para comunicação com APIs
|
|
|
|
│ ├── styles/ # Arquivos de estilização (CSS, SASS, etc.)
|
|
|
|
│ ├── tests/ # Arquivos de testes
|
|
|
|
│ ├── utils/ # Funções utilitárias e helpers
|
|
|
|
│ ├── routes.js # Configuração de rotas da aplicação
|
|
|
|
│ ├── App.js # Componente principal
|
|
|
|
│ ├── index.js # Ponto de entrada do React
|
|
|
|
│ └── ...
|
|
|
|
├── .gitignore # Arquivos a serem ignorados pelo Git
|
|
|
|
├── das # Arquivo adicional (explicação necessária se relevante)
|
|
|
|
├── DockerFile # Arquivo de configuração para Docker
|
|
|
|
├── package.json # Arquivo de configuração do npm
|
|
|
|
├── package-lock.json # Versões exatas das dependências instaladas
|
|
|
|
└── README.md # Instruções do projeto
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
Scripts Disponíveis
|
|
|
|
No diretório do projeto, você pode executar os seguintes comandos:
|
|
|
|
|
|
|
|
npm start: Inicia o servidor de desenvolvimento.
|
|
|
|
npm run build: Compila a aplicação para produção na pasta build.
|
|
|
|
npm run eject: Remove a dependência de configuração do create-react-app.
|
|
|
|
npm install @mui/icons-material @mui/material @emotion/styled @emotion/react: instala Material Icons.
|
|
|
|
|
|
|
|
|
|
|
|
**Arquitetura do BackEnd**
|
|
|
|
|
|
|
|
Estrutura do Projeto.
|
|
|
|
Aqui está uma visão geral da estrutura básica do projeto:
|
|
|
|
|
|
|
|
|
|
|
|
```
|
|
|
|
hoortech_backend/
|
|
|
|
├── app/
|
|
|
|
│ ├── handtracking/
|
|
|
|
│ │ └── handtracking.py # Lógica de detecção de landmarks com MediaPipe
|
|
|
|
│ ├── model/
|
|
|
|
│ │ └── model_path.h5 # Modelo TensorFlow para predição de letras
|
|
|
|
│ ├── predictor/
|
|
|
|
│ │ └── predictor.py # Classe responsável pela predição de letras
|
|
|
|
│ ├── templates/
|
|
|
|
│ │ └── index.html # Interface web para interação com o sistema
|
|
|
|
│ ├── test/
|
|
|
|
│ │ ├── integration_testing.py # Teste de integração do fluxo de predição
|
|
|
|
│ │ ├── letra-a-base64.txt # Exemplo de imagem codificada em base64
|
|
|
|
│ │ ├── letra-a.jpg # Imagem de teste da letra "A"
|
|
|
|
│ │ ├── routes.py # Rotas da API Flask
|
|
|
|
│ │ ├── create_mock_model.py # Script para gerar um modelo mock de TensorFlow
|
|
|
|
│ │ └── socket_server.py # Inicialização do servidor Flask-SocketIO
|
|
|
|
├── instance/
|
|
|
|
│ └── config.py # Configuração específica de ambiente
|
|
|
|
├── models/
|
|
|
|
│ └── hand_landmarker.task # Arquivo de modelo auxiliar
|
|
|
|
├── requirements.txt # Dependências do projeto
|
|
|
|
├── generate_base64.py # Script para gerar base64 de uma imagem
|
|
|
|
├── README.md # Documentação do projeto
|
|
|
|
├── Dockerfile # Configuração do Docker para deploy
|
|
|
|
└── run.py # Ponto de entrada do servidor Flask
|
|
|
|
```
|
|
|
|
|
|
|
|
|
|
|
|
Scripts Disponíveis
|
|
|
|
No diretório do projeto, você pode executar os seguintes comandos:
|
|
|
|
|
|
|
|
python -m venv venv: Cria o ambiente virtual (Windows)
|
|
|
|
.\venv\Scripts\activate: Ativa o ambiente virtual (windows)
|
|
|
|
python3 -m venv venv: Cria o ambiente virtual (Linux/MacOS)
|
|
|
|
source venv/bin/activate: Ativa o ambiente virtual (Linux/MacOS)
|
|
|
|
`pip install --no-cache-dir -r requirements.txt`: Instala as Dependências
|
|
|
|
`python -m app.socket_server`: Executa o Servidor
|
|
|
|
|
|
|
|
|
|
|
|
**Diagrama de deploy**
|
|
|
|
|
|
|
|
|
|
|
|
 |
Pedro Henrique Tonial Pasinato