---
# System prepended metadata

title: Echolalia - Outils d'annotation - Interface Graphique

---

# Echolalia - Outils d'annotation - Interface Graphique

Ce document détaille les points d'implémentations jugés fondamentaux concernant l'interface graphique d'annotation intégrée à Echolalia

## Éléments Visuels

### Élements courants

Cette partie détaille les éléments visuels qui sont assez courants à implémenter

#### Viewport Principal d'annotation

- Affichage du compte actuel
- Affichage de la tâche actuelle
- Configuration de l'interface en fonction des configuration d'annotation (_annotation templates_)

#### Interface de Configuration

- Gestion des raccourcis
- Paramètres d'affichage globaux
- Paramètres de lecture

### Éléments complexes
Cette partie détaille les éléments visuels qui sont potentiellement complexes à impléter, ou nécessitent une attention particulière pour que leur implémentation soit harmonieuse

#### Viewport Principal d'annotation

- Redimensionnement des éléments
- Raccourcis clavier

![](https://i.imgur.com/jNRp09q.png)


#### Timeline de segmentation

- Raccourcis clavier configurable
- Gestion des frontières
- Overlap de segments
- Zoomin/zoomout/scroll

![](https://i.imgur.com/69OXxjJ.png)

#### Interface d'annotation/lecture de segments

- Edition de texte
- Lecture fine via souris et/ou clavier
- Ajustement des frontières

![](https://i.imgur.com/JpjSUUw.png)


#### Interface de gestion/Édition des tiers

- Ajout/supression/déplacement de tiers
- Ajout/supression/déplacement/sélection/copie de segments
- Lecture fine via souris et/ou clavier 
- Zoomin/zoomout/scroll
- affichage des annotations

![](https://i.imgur.com/o0388qO.png)


## Éléments Techniques

### Éléments courants

- Interaction avec un serveur via une API RESTful OpenAPI 


### Éléments Complexes

Cette partie détaille les éléments techniques (souvent liés à la partie purement graphique de l'interface) que nous avons jugés potentiellement complexes et/ou nécessitant un travail considérable:

- Support multimédia pour l'audio/vidéo (formats audio usuels, formats vidéos usuels)
- Gestion des fine flux audio vidéos en JS/TS
    - Possibilité d'avancer/reculer/sauter à un endroit arbitraire
    - Lecture de segments arbitraires
    - Frame-by-frame en video
    - Maintient de la synchronisation entre plusieurs éléments de lecture (partie audio/partie vidéo)
- Rendu visuel du waveform "en temps réel" (sans lag)
- Rendu visuel du spectrogram "en temps réel" (sans lag)
- Chargement d'annotations dans notre format YAML/Json, avec optionnellement:
    - Chargement/export des textgrids (parser custom à implémenter)
    - Chargement/export des fichiers elan (du XML)

## Plan de développement

1. Viewport principal pour l'annotation rapide
2. Composants de lecture fine d'un média
3. Composant d'annotation/resegmentation fine d'un segment
4. MVP pour l'annotation rapide
5. Viewport principal pour l'annotation "classique"
6. Composant d'affichage des tiers
7. Édition sur le composant d'affichage des tiers
8. Composant d'affichage de la waveform et du spectrogramme
9. Composant de segmentation rapide
10. MVP annotation classique