Skip to content

GitLab

  • Menu
Projects Groups Snippets
    • Loading...
  • Help
    • Help
    • Support
    • Community forum
    • Submit feedback
    • Contribute to GitLab
  • Sign in
  • Wiki Wiki
  • Project information
    • Project information
    • Activity
    • Labels
    • Planning hierarchy
    • Members
  • Repository
    • Repository
    • Files
    • Commits
    • Branches
    • Tags
    • Contributors
    • Graph
    • Compare
  • Issues 6
    • Issues 6
    • List
    • Boards
    • Service Desk
    • Milestones
  • Merge requests 1
    • Merge requests 1
  • CI/CD
    • CI/CD
    • Pipelines
    • Jobs
    • Schedules
  • Deployments
    • Deployments
    • Environments
    • Releases
  • Monitor
    • Monitor
    • Incidents
  • Packages & Registries
    • Packages & Registries
    • Package Registry
    • Infrastructure Registry
  • Analytics
    • Analytics
    • Value stream
    • CI/CD
    • Repository
  • Wiki
    • Wiki
  • Snippets
    • Snippets
  • Activity
  • Graph
  • Create a new issue
  • Jobs
  • Commits
  • Issue Boards
Collapse sidebar
  • HoorTech
  • WikiWiki
  • Wiki
  • Arquitetura Geral

Last edited by Pedro Henrique Tonial Pasinato Nov 12, 2024
Page history

Arquitetura Geral

Home Planejamento Arquitetura Geral Front End Back End Banco de Dados Design do Sistema e Mockups Infraestrutura e Orçamento Fluxo e Versionamento

Arquitetura do FrontEnd

Estrutura do Projeto:

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

Arquitetura do BackEnd

Estrutura 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

diagrama2.drawio

Clone repository
  • Arquitetura Geral
  • Back End
  • Banco de Dados
  • Design do Sistema e Mockups
  • Fluxo e Versionamento
  • Front End
  • Infraestrutura e Orçamento
  • Planejamento
  • Home