UX & Cinématic 


> WebApp VisionAI YSID​

.

1- Description du souhait d'UX (UI + cinematic )initial ( vincent )

Fonctionnalités indiquées sur cet écran


  • Page d’accueil
    • Icône profil
    • Icône paramètres
  • Boutons principaux
    • Bouton pour démarrer une nouvelle conversation
    • Bouton "projet en cours"
  • Zone centrale
    • Liste / affichage des conversations en cours
    • Affichage du projet actif
 Fonctionnalités indiquées sur cet écran


  • Titre du projet en cours : Panneaux solaires
  • Lien vers la documentation (bloc "Documentation")
  • Liste des étapes déjà réalisées (affichage avec coche de validation)
    • Puits électrique ✔️
    • Onduleur ✔️
  • Bouton “CONTINUER” pour poursuivre le projet
  • Bouton pour lancer l’IA (lié à l’étape suivante)

👉 Cette page combine donc un suivi de progression (check-list), un accès aux ressources (documentation) et une interaction avec l’IA pour guider l’utilisateur.

Fonctionnalités indiquées sur cet écran
  • Zone de suivi d’avancement
    • Liste des étapes (ex. : onduleur ✔️, batterie en cours, etc.)
    • Check-list permettant de voir la progression étape par étape
  • Zone centrale : retransmission vidéo en direct
    • Affichage de ce que voit la caméra en temps réel
    • Bouton pour activer/désactiver :
      • caméra
      • micro
      • son
  • Zone de texte/débrief en temps réel
    • Texte généré automatiquement par l’IA qui décrit ou résume la discussion en cours
  • Lien ou zone de chat
    • Interaction avec l’IA (chat, instructions, corrections)

👉 Cette page combine donc un suivi de projet en direct, une vision caméra en streaming, et un accompagnement IA (texte + conversation).

.

A- Deux axes qui nous paraissent solides :

1. Réutiliser une interface déjà familière (clone ChatGPT)


  • Adoption facilitée : 800+ millions d’utilisateurs ont déjà leurs réflexes sur ce type d’UI → pas besoin de réinventer, l’apprentissage est quasi nul.


  • Confort d’usage : zone centrale pour le dialogue + colonne gauche pour les conversations/projets en cours + barre haute (profil, paramètres) déjà prévu.


  • Scalabilité : l’interface est agnostique, donc réutilisable pour différents cas d’usage (formation, support technique, pilotage projet).
2. Interfaçage avec Odoproject (ERP métier)

 


  • Colonne gauche = “conversations” mais aussi “projets en cours” fusion de la logique conversationnelle et de la logique métier.


  • Chaque projet métier devient un “thread” → comme une conversation ChatGPT, mais enrichie avec des données ERP (kits pédagogiques, missions terrain, chantiers réels).


  • Interopérabilité : via API (JSON-RPC / REST) on peut synchroniser la liste des projets depuis Odoproject et les afficher comme si c’étaient des conversations.


  • Gain pratique : l’utilisateur bascule sans friction entre discuter avec l’IA et suivre l’état d’un projet réel.
> 🔑 Vision intéressante :

On transforme  ChatGPT en “front-end universel” de l’ERP.

  • L’utilisateur reste dans une interface type ChatGPT.
  • La colonne gauche devient le tableau de bord des projets/conversations.
  • L’ERP (Odoproject) fournit la donnée métier (workflow, kits, tâches, etc.).
  • L’IA agit comme interpréteur/contextualisateur, pour traduire la donnée ERP en langage naturel, tutoriels, ou instructions terrain.



Proposition schéma technique simplifié montrant :

  • à gauche : UI clone ChatGPT
  • au centre : IA + moteur RAG
  • à droite : Odoproject ERP (via API)
    et les flux entre eux.

En savoir plus

.

C-Suggestions ( JHL @Vincent + @Faniry )

Proposition de conception d’interface et de cinématique des écrans, en gardant comme base l’ergonomie éprouvée de ChatGPT Web App, tout en intégrant  les  fonctionnalités (projets, étapes, IA, caméra, documentation).

🎯 Principes de conception

1- Ne pas perturber l’utilisateur :


→ On garde l’organisation type ChatGPT :

  • Colonne gauche : liste des conversations / projets.
  • Zone centrale : chat en temps réel avec l’IA.
  • Barre haute : profil, paramètres, bouton pour lancer/continuer un projet.
2- Ajouter les briques métier demandées :

 

  • Check-list de progression des projets.
  • Accès documentation lié à chaque étape.
  • Bouton CONTINUER / LANCER l’IA.
  • Streaming vidéo depuis caméra.
  • Résumé automatique des discussions.

🖥️ Proposition d’écrans (cinématique)

1. Écran d’accueil (inspiré ChatGPT)


  • Colonne gauche :
    • Bouton “+ Nouveau projet / conversation”.
    • Liste des conversations ET projets en cours (Odooproject).
  • Zone centrale :
    • Message d’accueil + possibilité de commencer un chat ou ouvrir un projet.
  • Barre haute :
    • Profil, paramètres, accès à la documentation générale.

👉 Ergonomie 100 % ChatGPT, avec juste la notion de projet ajoutée dans la colonne gauche.

2. Écran projet en cours

 

  • Dialogue en temps réel avec l’IA.
  • Possibilité de poser des questions contextuelles.

Zone centrale (comme le chat GPT classique) :

  • Panneau latéral droit (nouvel ajout) :
    • Check-list des étapes (avec coche ✔️, en cours, à faire).
    • Lien vers documentation (ouvrable dans une modale ou nouvelle tab).( comme dans ChatGPT vers vers lien "interne" ( GET data depuis ODOO et avant depuis un projet "fake )
    • Bouton “Continuer” pour avancer à l’étape suivante.

👉 On garde la logique de fil de discussion au centre, mais on enrichit avec un panneau latéral à droite.

3. Écran supervision avec IA + caméra


  • Zone centrale :
    • Vidéo en direct de la caméra après avoir lancer le mode caméra
    •  ou le mode vidéo (nouveau bouton ) 

Juste une petite évolution par rapport à l'UX de chatGPT ( voir under )

En savoir plus UX 

    • IA peut commenter en surimpression (overlay) ou dans le chat.
  • Colonne gauche :
    • Toujours la liste projets / conversations.
  • Sous le flux vidéo :
    • Boutons pour activer/désactiver caméra / micro / son.
  • Zone inférieure :
    • Texte généré en direct (résumé IA, transcription, détection anomalies).

👉 Ici, on inverse : la caméra devient la pièce centrale, et le chat + résumé texte gravitent autour.

4. Cinématique de navigation

  1. Accueil → choix conversation classique ou projet.
  2. Projet sélectionné → ouvre un chat enrichi (zone centrale + panneau étapes à droite).
  3. En cours d’installation / mission terrain → passage à l’écran caméra + assistance IA en temps réel.
  4. Retour possible à tout moment à l’UI “ChatGPT-like” pour poser des questions.

.

C-  Avantages de cette approche


  • Familiarité : les utilisateurs retrouvent les réflexes ChatGPT (colonne gauche, zone centrale chat).
  • Extension douce : on ajoute progressivement des panneaux latéraux, sans casser l’expérience.
  • Polyvalence :
    • Mode “texte pur” (chat habituel).
    • Mode “projet” (chat + check-list + doc).
    • Mode “terrain” (caméra + IA + suivi en temps réel).