arrow_backTornar a la llista de projectes

UXIA web: assistent intel·ligent d'exposicions

Centre: Institut Esteve Terradas i Illa (Cornellà de Llobregat)

Cicle: Desenvolupament d'aplicacions web

Inici: 16 de abril de 2026

Final: 7 de maig de 2026

Mòduls Professionals implicats

MP06 Desenvolupament web en entorn client
MP07 Desenvolupament web en entorn servidor
MP08 Desplegament d'aplicacions web
MP09 Disseny d'interfícies web

Descripció

Versió web del projecte UXIA. Volem un assistent intel·ligent d'exposicions, principalment pensat per a fires d'automòbil, que és el què ens demana el client. Aquesta versió web tindrà 2 parts diferenciades:

  1. Un frontend pels visitants que permeti:
    1. Explorar els items de l'exposició.
    2. Funció ITEM ID: enviar una foto del cotxe visualitzat, i que ens retorni una descripció detallada del què estem veient. Aquesta descripció la traurem d'un catàleg d'ítems (cotxes) que hi haurà a la BD, i una IA permetrà fer match entre la foto que envia l'usuari i el model de cotxe de la col·lecció.
  2. Un backend o panell d'administració web que permeti carregar fotos de cada cotxe per a entrenar la IA de reconeixement. També permetrà un etiquetatge automàtic de les Exposicions utilitzant la IA.

Els usuaris que tindrem seran:

  1. Superusuari: només a l'admin panel de Django. És l'administrador general i podrà crear usuaris administradors d'exposicions.
  2. Admin Expo: podrà entrar al panell d'admin del frontend, crear exposicions i gestionar-les (carregar fotos i entrenar la IA).
  3. Visitant: podrà veure exposicions des del frontend i utilitzar el ITEM ID per identificar elements de l'exposició mitjançant la IA.

Recursos:

  1. Servidor web al IETI Cloud (núvol del centre), domini *ieti.site
  2. Servidor de IA Ollama dintre dels servidors del centre.
  3. Servei de classificació d'imatges IA powered als servidors del centre.
    1. API Doc.
    2. També tens exemples d'utilització de l'API.

 

 

Aquest projecte està dins el pla d'ajuts per a la innovació InnovaFP del Departament d'Educació, i finançat pel Ministerio de Educación, Formación Professional y Deportes i cofinancat per la Unió Europea

 

  • sprint #1

    Inici: 16 de abril de 2026

    Final: 23 de abril de 2026

    Hores estimades totals: 30,0

    • MP06 Desenvolupament web en entorn client: 5 specs (45,5%), 16,0 hores (53,3%)
    • MP07 Desenvolupament web en entorn servidor: 8 specs (72,7%), 24,0 hores (80%)
    • MP08 Desplegament d'aplicacions web: 2 specs (18,2%), 5,0 hores (16,7%)
    • MP09 Disseny d'interfícies web: 5 specs (45,5%), 10,0 hores (33,3%)
  • 1. Crear projecte base Django + React i pujar-ho a Github

    hores estimades: 2,0 Mòduls: MP06 MP07 MP08

  • 2. Models Django + API Django Ninja

    Crear models per al projecte:

    1. Expo
    2. Item (pel nostre cas serien cotxes, però poden ser altres)
    3. Imatge
    4. Etiquetes (tags) : han de poder ser aniuades
    5. Intents : fotos enviades pels usuaris per a identificació dels items.

    Les Imatges dels Items poden ser públiques o privades:

    1. Públiques: son aptes per a ser mostrades en el frontend.
    2. Privades: són exclusives per a l'entrenament de la IA.

    Les Expos poden estar en 3 estats:

    1. INIT : encara no s'ha entrenat
    2. DISPONIBLE: la IA està entrenada per identificar Items.
    3. ACTUALITZABLE: s'ha entrenat, però s'han afegit o modificat imatges i necessita actualització.

    hores estimades: 4,0 Mòduls: MP07

  • 3. SEEDERS

    SEEDER 1: script per generar 1 Expo "IETI CAR SHOW" i carregar-hi la col·lecció de fotos de cotxes que hem recollit nosaltres. Serà una sola Expo. Seran les fotos reals.

    SEEDER 2: script per generar 1 Expo amb nom aleatori utiltizant Faker. Inventar una manera d'aconseguir noms realistes com noms de ciutats + "Car Show" o "Expo" o "Salon Automóvil" o simmilars. Els noms dels cotxes tambe han de ser "reals" (usant Faker). Com a fotos podeu tenir un minicatàleg de 6 o 8 i assignar-les aleatòriament entre aquestes.

     

    hores estimades: 2,0 Mòduls: MP07

  • 4. Django ADMIN PANEL / CRUDs

    El Items han de tenir inlines de Imatges.

    Les Expos han de tenir inlines de Items.

    Totes les imatges (Imatges, Intents) s'han de poder previsualitzar al admin panel.

    Item ha de tenir una imatge destacada.

    S'han de poder posar etiquetes a cada Item en inlines.

    hores estimades: 2,0 Mòduls: MP07

  • 5. Landing Page: Expos

    Sel·leccionar exposició.

    Un cop sel·leccionada ens mostra un carrousel dels diferents Items (nom i imatge destacada).

    El carrousel permet anar endavant i endarrera, navegant pels diferents items.

    hores estimades: 3,0 Mòduls: MP06 MP07 MP09

  • 6. Landing Page: sel·lecció Item

    Quan sel·leccionem un Item del carrousel se'ns mostra els detalls, incloses totes les imatges disponibles.

    Podeu triar com visualitzar les imatges (carrousel, llista, grid, modal, etc...)

    hores estimades: 2,0 Mòduls: MP06 MP07 MP09

  • 7. LOGOS projecte InnovaFP al footer

    Totes les pàgines han de tenir els logos de InnovaFP al footer: Generalitat + Ministerio Educación y FP

    Els logos han de tenir un link a nova pestanya portant al programa InnovaFP que el financia.

    hores estimades: 1,0 Mòduls: MP09

  • 8. MOBILE FIRST responsive + Tailwind

    Totes les vistes han de ser visibles principalment amb mòbil, però igualment responsive per a tablet i desktop.

    Excepció: admin panel de Django. No cal modificar-lo.

     

    hores estimades: 2,0 Mòduls: MP09

  • 9. Posar el projecte en producció al IETI Cloud

    hores estimades: 3,0 Mòduls: MP08

  • 10. Landing Page: Cerca / autocompletar la llista d'exposicions

    Provar amb un nombre gran d'exposcions (utilitzar seeder).

     

    hores estimades: 2,0 Mòduls: MP06 MP07 MP09

  • 11. ITEM ID : a l'enviar la foto, obtenim una descripció subministrada per marIA2

    Botó IDEM ID a la Landing Page

    Ens permet fer una foto i enviar-la al servidor, el qual l'enregistrarà a l'historial de l'usuari.

    Aquest ens contestarà amb una descripció i etiquetatge automàtic subministrat per la marIA 2 (Ollama).
     

     

    hores estimades: 7,0 Mòduls: MP06 MP07

  • sprint #2

    Inici: 23 de abril de 2026

    Final: 29 de abril de 2026

    Hores estimades totals: 30,0

    • MP06 Desenvolupament web en entorn client: 11 specs (84,6%), 27,0 hores (90%)
    • MP07 Desenvolupament web en entorn servidor: 10 specs (76,9%), 24,0 hores (80%)
    • MP08 Desplegament d'aplicacions web: 1 specs (7,7%), 2,0 hores (6,7%)
    • MP09 Disseny d'interfícies web: 12 specs (92,3%), 27,0 hores (90%)
  • 12. MOTXILLA #2

    hores estimades: 2,0 Mòduls: MP06 MP07 MP08 MP09

  • 13. UXIA ADMIN : Login + Admin Dashboard

    Ens podem logar al Admin Dashboard de UXIA des del frontend (React).

    Modificar el model i els seeder per incloure propietari de l'Expo.

    Crear un Dashboard amb els ítems:

    1. Nom de l'usuari admin.
    2. Logout
    3. MyExpos

    hores estimades: 2,0 Mòduls: MP06 MP07 MP09

  • 14. UXIA ADMIN : Expo List View

    Dins del UXIA ADMIN, al Dashboard, es poden veure la llista d'Expos.

    Al cos de la pantalla es podrà veure un llistat d'exposicions, una per línia, amb les dades:

    1. Nom expo
    2. Estat expo (init, actualitzable, disponible)
    3. Decripció (possiblement escapçada)
    4. Una preview dels primers Items que tingui: Item amb nom + imatge destacada.

    hores estimades: 3,0 Mòduls: MP06 MP07 MP09

  • 15. UXIA ADMIN : Expo Detail View

    L'usuari admin podrà entrar a una l'exposició i veure els diferents Items en versió targetes en quadrícula i responsive.

    Cada Item tindrà la imatge destacada, el nom i una part de la descripció de l'objecte.

    També es podran veure a la targeta mes imatges del Item però més petites que la imatge destacada.

    hores estimades: 2,0 Mòduls: MP06 MP07 MP09

  • 16. UXIA ADMIN / Item View : Nou item

    Des de la view Expo es disposa un botó "+ NOU ITEM"

    Ens obre un formulari per afegir un nou Item amb nom, descripció i tags.

    Si s'afegeixen imatges, l'estat de l'Expo passa a ACTUALITZABLE.

    hores estimades: 2,0 Mòduls: MP06 MP07 MP09

  • 17. UXIA ADMIN : edit expo

    Botó EDIT EXPO (icona llapis) a la Detail View i List View.

    Obre modal per modificar els detalls de l'Expo (nom, detalls, etc.)

    hores estimades: 2,0 Mòduls: MP06 MP07 MP09

  • 18. UXIA ADMIN : edit item

    Botó EDIT ITEM (icona llapis a cada item).

    Ens obre interfície per modificar el item, amb totes les mateixes opcions que hi ha per crear nou item.

    hores estimades: 2,0 Mòduls: MP06 MP07 MP09

  • 19. UXIA ADMIN / Item View : càrrega mútiple d'imatges

    Al afegir o editar Items ens permet la càrrega múltiple d'imatges.

    En el mòbil ha de poder obrir la galeria d'imatges del dispositiu mòbil i fer una sel·lecció múltiple.

    Les imatges es carreguen al servidor.

    El formulari permet marcar una de les imatges com a imatge destacada.

    Quan es modifiquen les imatges d'un Item, l'exposició passa a l'estat ACTUALITZABLE.

    hores estimades: 3,0 Mòduls: MP06 MP07 MP09

  • 20. Afegir Google Analytics i Google Search Console. Tots els participants del grup tindran accés a les dades.

    hores estimades: 1,0 Mòduls: MP09

  • 21. FRONTEND : DARK MODE

    Media query "prefers-color-scheme", ha d'activar-se ja sigui automaticament o manualment.

    hores estimades: 2,0 Mòduls: MP09

  • 22. FRONTEND / CERCADOR POLIMÒRFIC

    El cercador de la Landing Page serà polimòrfic: ens pot mostrar Expos i Items.

    Les Expos seran sempre els primers elements i es marcaran com a tals.

    Els Items vindran en 2n lloc i també s'indicarà el seu tipus d'objecte.

    Si sel·leccionem Expo, es mostrarà el carroussel de l'Expo.

    Si sel·leccionem Item, es mostrarà el carroussel de l'Expo i també l'Item.

    hores estimades: 3,0 Mòduls: MP06 MP07 MP09

  • 23. FRONTEND : seguiment usuari

    Es farà un seguiment de l'usuari amb una cookie del navegador (sense caducitat) des de tot el frontend (Front Page i Intents de ITEM ID al menys).

    Si es perd la cookie (pantalla incògnit, reinici, etc.), perdrem la sessió. No hi ha login d'usuari.

    Les imatges enviades pels usuaris s'enregistren associades al seu historial.

    Afegir Banner d'advertiment de les Cookies.

    hores estimades: 3,0 Mòduls: MP06

  • 24. FRONTEND : Historial

    Des de la Front Page o el ITEM ID es pot accedir a HISTORIAL.

    Ens mostrarà tots els intents de reconeixement d'Items que l'usuari ha efectuat.

    hores estimades: 3,0 Mòduls: MP06 MP07 MP09

  • sprint #3

    Inici: 29 de abril de 2026

    Final: 7 de maig de 2026

    Hores estimades totals: 30,0

    • MP06 Desenvolupament web en entorn client: 6 specs (85,7%), 24,0 hores (80%)
    • MP07 Desenvolupament web en entorn servidor: 6 specs (85,7%), 26,0 hores (86,7%)
    • MP08 Desplegament d'aplicacions web: 3 specs (42,9%), 8,0 hores (26,7%)
    • MP09 Disseny d'interfícies web: 5 specs (71,4%), 20,0 hores (66,7%)
  • 25. MOTXILLA #3

    Creació/Edició de Items: càrrega de múltiples Imatges per cada Item

     

    hores estimades: 1,0 Mòduls: MP06 MP07 MP08 MP09

  • 26. UXIA ADMIN / ENTRENAMENT IA Exposició

    Dins la vista de l'Exposició es disposarà del botó ENTRENA IA EXPO.

    Heu de disposar d'un usuari que us permetrà obtenir un token. El token es pot afegir al .env del projecte per accdir la IA.

    Disposeu del servei de classificació d'imatges IA powered als servidors del centre.

    1. API Doc.
    2. També tens exemples d'utilització de l'API.

    Es connectarà a la IA, carregarà les imatges i l'entrenarà per a reconèixer els Items de l'Expo.

    També tindrà un indicador CURRENT TRAIN que indicarà l'estat de l'entrenament: IDLE, QUEUED, RUNNING, OK, ERROR, CANCELLED, REPLACE.

    Si l'entrenament ha acabat correctament (OK) , l'Expo passarà a estat DISPONIBLE.

    hores estimades: 8,0 Mòduls: MP06 MP07 MP09

  • 27. FRONTEND / ITEM ID : classify

    Mantenim el servei anterior de descripció del item però el renombrem a ITEM DESCRIPTION.

    ITEM ID serà per a l'actual servei de classificació.

    Necessitarà sel·leccionar prèviament una Expo.

    Quan enviem una imatge des de la vista ITEM ID, el sistema classifica l' Item i ens dona la descripció que hi ha a la BD. Mostrarà l'Item i el visualitzarà amb les dades.

    Pot donar resultat negatiu i no trobar match: donar el feedback adequat.

    hores estimades: 4,0 Mòduls: MP06 MP07 MP09

  • 28. VIDEO: crear vídeo presentació del programari

    Al vídeo cal integrar els logos dels finançadors del projecte: Generalitat de Catalunya, MEFPD i Unió Europea.

    Duració 1'

    Ha d'estar publicat a Youtube

    hores estimades: 4,0 Mòduls: MP06 MP07 MP08 MP09

  • 29. SAMPLES : recollida de mes imatges de cotxes d'exemple per a les demos

    Cada integrant de l'equip ha de recollir fotos de 1 cotxe.

    Recollir 20 fotos per cada cotxe:

    - 4 de cada costat

    - 4 des de les diagonals

    - 4 des dels costats a mes alçada

    - 4 des de les diagonals a mes alçada

    - 4 aleatòries

     

    hores estimades: 3,0 Mòduls: MP06 MP07 MP08 MP09

  • 30. FRONTEND / ITEM ID : TTS

    Quan tenim una descripció textual de l'Item, apareix un botó amb icona d'altaveu o de persona parlant.

    L'aplicació la llegeix en veu alta amb un servei TTS Text-To-Speech

    L'exposició ha de tenir una llengua associada i el TTS es farà amb aquesta llengua.

    Cal implementar el llenguatge dins del model Expo.

    Hi haurà 4 idiomes disponibles: Castellà, Català, Anglès i Francès

    hores estimades: 4,0 Mòduls: MP06

  • 31. MULTILLENGUATGE

    Traducció de tots els missatges en 4 idiomes: ES, CA, EN, FR

    El llenguatge inicial serà el del navegador. Si no és cap dels quatre serà el llenguatge per defecte: anglès.

    Incloure selector de llengua al FRONTEND. Un cop sel·leccionada, tota la interfície es mostrarà en aquesta llengua.

    hores estimades: 6,0 Mòduls: MP07

arrow_backTornar a la llista de projectes