Generar una pàgina amb llenguatge natural

Utilitzeu el llenguatge natural per crear una pàgina generativa creada amb IA. Les pàgines generatives són una experiència basada en IA dissenyada per simplificar, accelerar i millorar el procés de disseny d'aplicacions en aplicacions basades en models. Interactuant amb l'agent d'aplicacions, crees pàgines completament funcionals a les teves aplicacions basades en models descrivint el que necessites en llenguatge natural i especificant quines taules de Microsoft Dataverse o connectors Power Platform has de referenciar. Fins i tot pots adjuntar una imatge de com vols que quedés la pàgina.

Després de descriure la pàgina, el sistema processa els vostres requisits i especificacions i genera de manera intel·ligent codi React que cobreix tant l'experiència de l'usuari front-end seleccionant els components adequats i determinant el millor disseny, com la lògica de negoci corresponent. Mitjançant una experiència interactiva i conversacional, podeu refinar el disseny de la pàgina en temps real, ajustant els elements, el disseny i la funcionalitat perquè coincideixin perfectament amb la vostra visió.

Tria com construir la teva pàgina generativa

Les pàgines generatives donen suport a dues experiències d'autoria. Tots dos produeixen el mateix tipus de pàgina. La diferència és on escrius i quin model d'IA impulsa la generació.

Recomanat: eines de generació de codi amb IA

Utilitza eines de generació de codi amb IA com GitHub Copilot CLI per crear i editar pàgines generatives des del teu entorn local de desenvolupament. Aquest enfocament es recomana pels següents beneficis:

• Accés als últims models d'IA. Com que la IA la proporciona l'eina que instal·les, sempre tens accés als models de frontera més nous i capaços.
• Disponible arreu del món en núvols públics – no limitat a regions específiques.
• Flux de treball centrat en el codi. Treballa amb TypeScript i React directament al teu IDE preferit, amb npm install suport IntelliSense per al codi generat.
• Construeix-ne més en una sola partida. Una sola sol·licitud en llenguatge natural pot produir diverses pàgines, crear les taules de suport de Dataverse i col·locar-ho tot a l'aplicació i solució adequades.

Més informació: Crea i edita pàgines generatives amb eines de generació de codi amb IA

Autoría dins del navegador a Power Apps

Crea pàgines generatives directament al navegador a make.powerapps.com utilitzant una experiència d'interfície d'usuari conversacional. Aquesta experiència és ideal per als creadors que prefereixen quedar-se en el dissenyador de Power Apps i no necessiten una configuració de desenvolupament local. Està disponible als Estats Units, Gran Bretanya, Austràlia i Singapur.

La resta d'aquest article descriu l'experiència dins del navegador.

Requisits previs

• L'entorn de Power Platform ha d'estar situat en una de les següents regions: Estats Units, Gran Bretanya, Austràlia o Singapur.

Prepara una font de dades del connector (previsualització)

Important

El suport per a connectors és una funció de previsualització. Les característiques de visualització prèvia no estan pensades per a l'ús de producció i poden tenir una funcionalitat restringida.

El suport de connectors permet que una pàgina generativa utilitzi dades fora de Dataverse a través de l'ecosistema de connectors Power Platform. La funció és compatible amb tots els connectors Power Platform.

Abans d'afegir una font de dades recolzada per connector a una pàgina generativa:

1. Crea una connexió per al connector i autentica'l.
2. Obre solucions i després obre la solució per defecte.
3. Crea una referència de connexió que utilitzi la connexió. La referència de connexió esdevé automàticament disponible sota Add>data Connectors en l'experiència de creació de pàgines generatives.

Crear una pàgina generativa en aplicacions basades en models

1. Inicieu Power Apps la sessió.

2. Obriu una aplicació basada en models per editar-la.

3. Al dissenyador de l'aplicació, selecciona Afegir pàgina>Pàgina Generativa.

   S'obre un diàleg. Per crear una pàgina nova, selecciona Descriu una pàgina. S'obre una experiència de pàgina generativa de pàgina completa.

   Nota

   El mateix diàleg també llista pàgines generatives existents al teu entorn que pots afegir a aquesta aplicació. Per defecte, la llista es filtra a pàgines publicades ; Canvia el filtre a Tots si no veus la pàgina que busques.

4. Al quadre de text, escriu una descripció del tipus de pàgina que vols crear. Inclou requisits funcionals i, opcionalment, qualsevol especificació d'experiència d'usuari. Per exemple, podeu introduir una pàgina Crea una pàgina que mostri els registres del compte com una galeria de targetes amb un aspecte modern. Incloeu el nom, la imatge de l'entitat a la part superior i el lloc web, el correu electrònic, el número de telèfon. Feu que la galeria es pugui desplaçar mitjançant les dades de la taula Compte. Si vols que la pàgina admeti diversos idiomes, segueix les directrius de Localitzar una pàgina generativa.

   Propina

   No saps per on començar? El Catàleg d'Aplicacions Intel· ligents inclou un Catàleg de Prompts amb plantilles predefinides i imatges de referència per a patrons de pàgina habituals (galeries, taulers Kanban, taulers de comandament i més) que pots utilitzar com a punt de partida.

5. Afegeix fonts de dades i imatges segons correspongui:

   • Per utilitzar dades de Dataverse, seleccioneu Afegir dades>Afegir taula. Podeu enllaçar fins a sis Dataverse taules. A la captura de pantalla següent, s'afegeix la taula de comptes.
   • Per utilitzar dades d'un connector Power Platform (previsualització), primer prepareu la font de dades del connector. Després selecciona Afegir connectors de dades>, selecciona la referència de connexió i tria les dades del connector que hauria d'utilitzar la pàgina. En el teu prompt, descriu com vols que la pàgina utilitzi les dades seleccionades.

6. Opcionalment, puja una o més imatges per guiar la interfície d'usuari de la pàgina generada seleccionant Afegeix dades>Adjuntar imatge. Pot ser un esbós de tovalló aproximat o una imatge de major resolució. La imatge pot representar l'estructura o la maquetació de tota la pàgina que vols crear o pot ser visuals d'una secció o component concret que vols imitar.

   Nota

   Si vols que la pàgina generada mostri una imatge concreta, en lloc d'adjuntar-la al prompt, pots (1) incloure la imatge en una taula Datatable referenciada i que l'agent recuperi la imatge d'allà, (2) allotjar-la públicament i donar l'URL a l'agent, o (3) afegir la imatge com a recurs web i donar a l'agent l'URL del recurs web.

7. Opcionalment, activa o desactiva l'eina Inclou imatges (previsualització) per permetre a l'agent utilitzar imatges d'una biblioteca curada i segura de 25.000 imatges d'arxiu per donar suport a casos d'ús com imatges per defecte/marcador, fons decoratius, blocs de contingut estàtic i estats buits o d'error més rics.

8. Opcionalment, trieu el model d'IA que voleu utilitzar per generar la pàgina.

   Nota

   Actualment, GPT-4.1 és l'únic model disponible a l'experiència de creador de Power Apps per a pàgines generatives.

   Propina

   Vols utilitzar els últims models d'IA? Pots fer-ho creant i editant pàgines generatives amb eines de generació de codi amb IA, que et donen accés a models frontera més nous.

9. Quan hàgiu acabat de descriure la pàgina, seleccioneu Genera pàgina.

L'agent inicia un procés de construcció en diversos passos que pots observar en temps real:

• Flux de pensament: L'agent primer exposa la seva interpretació del teu prompt, llistant requisits, supòsits i un pla d'execució.
• Generació de codi: a continuació, escriu el codi subjacent de la pàgina en funció del pla.
• Transpilació: El codi generat es transpila per garantir la compatibilitat i la representació adequada.
• Representació final: Finalment, es mostra l'experiència d'usuari completada.

Si l'experiència de l'usuari no es mostra al final d'aquest procés, podeu visualitzar-la seleccionant la pestanya Visualització prèvia .

Visualitzar el codi generat, iterar i publicar

Després de generar la vostra pàgina, teniu diverses opcions per refinar-la i finalitzar-la:

1. Visualitzar i editar el codi generat Seleccioneu la pestanya Codi per visualitzar el codi generat per l'agent de l'aplicació.

   Podeu refinar la sortida de dues maneres:

   • Xatejar iterativament amb l'agent de l'aplicació per corregir errors, ajustar el disseny o afegir funcionalitats.
   • Editeu manualment el codi seleccionant Edita a la pestanya Codi. Després de fer alguns canvis, podeu seleccionar Desa per confirmar els canvis com a nova iteració o Cancel·la per descartar-los.

   Aprèn sobre els mètodes d'objectes dataApi utilitzats per a operacions de dades

2. Compara iteracions Després de completar dues o més iteracions amb l'agent, podeu seleccionar Compara a la pestanya Codi per veure una diferència de codi entre la iteració actual i l'anterior.

   Nota

   Actualment, aquesta capacitat només està disponible a partir de la segona iteració de la sessió actual.

3. Adjunta una captura de pantalla per a una consulta ràpida A l'experiència de xat, selecciona Adjuntar>Afegeix captura de pantalla per incloure una captura de pantalla de la previsualització actual amb la teva propera interacció amb l'agent de l'aplicació. Una captura de pantalla és útil per ajudar a ajustar l'aspecte visual de la pàgina. Alternativament, pots adjuntar altres imatges per ajudar a refinar els visuals de tota la pàgina o d'una part concreta de la pàgina.

4. Comprova si hi ha problemes d'accessibilitat (nou) Després de cada iteració de generació de codi, l'assistent d'Accessibilitat a la part inferior de la pantalla escaneja el codi generat avaluant-lo respecte a l'accessibilitat. Pots veure una actualització d'estat d'alt nivell directament a la pantalla i pots triar obrir els resultats detallats en un panell. Selecciona Correcció automàtica per passar qualsevol infracció directament a l'agent perquè intenti resoldre's automàticament.

5. Desar i publicar A la barra d'ordres, seleccioneu Desa per evitar perdre el progrés de la pàgina. Quan estiguis satisfet amb la teva pàgina, selecciona Desa i Publica per publicar tots els canvis pendents de l'aplicació, incloses les pàgines generatives.

Important

Tot i que l'agent fa un esforç per generar codi complet i llest per a la producció, incloses consideracions sobre les pràctiques recomanades d'accessibilitat i seguretat, sou el responsable final de validar el codi. Assegureu-vos que el codi generat compleixi amb els estàndards i requisits de compliment de la vostra organització.

Tasques comunes amb pàgines generatives

Aquesta secció cobreix escenaris i tasques habituals quan es treballa amb pàgines generatives en les teves aplicacions basades en models.

Configura una pàgina per acceptar paràmetres d'entrada

Les pàgines generatives poden acceptar els paràmetres recordIdd'entrada , entityName, i data permetre'ls rebre dades contextuals quan s'hi navega. Per configurar una pàgina perquè accepti paràmetres, descriu què hauria d'acceptar la pàgina al teu prompt i l'agent connecta automàticament el codi d'inicialització. Per exemple:

Set up the page to accept an account recordId. When the page loads, use these to fetch and display the corresponding account details.

Configure this page to accept a data parameter containing a custom filter object. Use it to filter the displayed records when the page loads.

Incrustar una pàgina generativa en un format

Pots afegir una pàgina generativa a un formulari d'aplicació basat en models perquè aparegui dins d'una secció o pestanya. Primer, crea i publica una pàgina generativa dissenyada per al formulari i configura-la perquè accepti el paràmetre d'entradarecordId.

Per afegir la pàgina a un formulari:

1. Obre el formulari al dissenyador de formularis.
2. Al panell esquerre, selecciona Components i després expandeix Display.
3. Selecciona la pàgina Generatiu.
4. Selecciona la pàgina generativa que vols incrustar.
5. Opcionalment, proporciona valors per a qualsevol entrada estàtica addicional que la pàgina accepti.
6. Deseu i publiqueu el formulari.

Quan un usuari obre un registre, el formulari transmet automàticament l'ID de registre actual a la pàgina generativa com a recordId entrada. No cal configurar un valor estàtic per recordIda .

Ves a una pàgina generativa

Pots navegar a una pàgina generativa de manera programàtica utilitzant Xrm.Navigation.navigateTo, passant paràmetres d'entrada si la pàgina de destinació està configurada per rebre'ls. Per a exemples i detalls complets de l'API, vegeu Navegar cap a i des d'una pàgina generativa utilitzant l'API del client.

Utilitza imatges específiques en una pàgina

Utilitza un d'aquests tres enfocaments per utilitzar imatges específiques a les teves pàgines generatives.

Emmagatzemeu les imatges en una taula Dataverse

Inclou la imatge en una taula Dataverse referenciada per la teva pàgina generativa, i indica a l'agent que recuperi la imatge d'allà. Quan creïs la teva pàgina, explica a l'agent com aconseguir la imatge correcta de la teva taula.

Build a product catalog page showing products from the Product table. Display the product image from the ProductImage column, along with the name, description, and price.

Imatges de l'amfitrió externament i referència per URL

Allotja les teves imatges en un servidor extern o en una xarxa de distribució de contingut (CDN) i proporciona a l'agent l'URL de la imatge:

Display the company logo using this URL: https://example.com/images/logo.png at the top of the page.

Afegeix imatges com a recursos web

Puja la imatge com a recurs web a la teva solució i referencia-la mitjançant la seva URL de recurs web:

1. Afegeix la imatge com a recurs web a la teva solució.
2. Fixeu-vos en el nom del recurs web (per exemple, new_/images/banner.png).
3. Fes-hi referència en el teu enunciat o codi utilitzant el format URL de recurs web descrit aquí:

Use the banner image from web resource new_/images/banner.png as the page header background.

Afegir pàgines generatives a les solucions

Les pàgines generatives són compatibles amb la solució i es poden afegir a una solució (mitjançant una aplicació) per facilitar el desplaçament entre entorns. Per afegir una pàgina generativa a una solució, feu el següent:

Important

Si la pàgina generativa s'ha creat durant la fase de visualització prèvia, heu de carregar la pàgina generativa al dissenyador d'aplicacions de models per iniciar una migració única al nou model de dades compatible amb la solució. Quan la pàgina es carrega al dissenyador, veus un missatge de progrés de "Actualitzant la teva pàgina". No tanquis la finestra fins que la migració acabi.

1. Afegeix l'aplicació que conté les teves pàgines generatives a una solució
   • A Power Apps, selecciona Solutions al panell de navegació esquerre i obre la solució desitjada.
   • Seleccioneu Afegeix una aplicació basada en models d'aplicacions > existent>.
   • Seleccioneu l'aplicació que conté les pàgines generatives.
2. Exportar la solució (administrada o no administrada)
   • Assegureu-vos que el mapa del lloc de l'aplicació estigui inclòs a la solució. Si no, s'ha de sol·licitar durant les comprovacions de dependència.
   • També es sol·liciten pàgines generatives (mostrades com a files UX Agent Project) segons la seva dependència del mapa del lloc.

Nota

Comproveu aquests elements si no es sol·liciten pàgines generatives durant les comprovacions de dependències:

• Les pàgines creades durant la previsualització només es mostraran si s'han migrat. Carregueu-los al dissenyador per activar la migració.
• Si el sitemap està inclòs a la solució i les teves pàgines generatives han estat migrades, prova de fer un petit canvi al sitemap, com ara reordenar o reanomenar una pàgina, tornar a publicar l'aplicació i després tornar a provar l'exportació.

Després de l'exportació, pots importar l'aplicació i les pàgines generatives a un altre entorn. Quan s'obre al dissenyador de l'entorn de destinació, només estan disponibles el primer prompt i el codi publicat. La conversa completa de l'agent no es transfereix amb la pàgina.

Localitzar una pàgina generativa

Per localitzar una pàgina generativa, assegura't que el teu prompt cobreixi els següents elements:

• Especifica els teus idiomes. Digues a l'agent quins idiomes vols que la pàgina suporti, idealment nom de l'idioma i LCID.
• Sol·licita text traduït. Demana a l'agent que creï un diccionari de traducció per a totes les etiquetes i textos visibles per a l'usuari a la pàgina per a cada idioma.
• Activa el suport RTL. Si el teu entorn inclou una llengua RTL com àrab o hebreu, demana a l'agent que implementi el suport adequat de disposició de dreta a esquerra.
• Utilitza el format regional. Demana a l'agent que formati dates, números i moneda utilitzant les preferències de cada usuari des de la configuració d'usuari de Dataverse, en lloc d'utilitzar formats codificats o codis locals.

Per a una guia detallada d'implementació i patrons de codi, consulteu les instruccions de localització al repositori Power Platform Skills.

Nota

L'entrada del sitemap d'una pàgina generativa no està localitzada per defecte. La localització del mapa del lloc s'ha de gestionar per separat al dissenyador de l'aplicació.

Limitacions

Aquestes són les limitacions actuals de les pàgines generatives:

• Pots enllaçar fins a sis taules Dataverse en una sola pàgina.
• Les fonts de dades compatibles són taules Dataverse i connectors Power Platform (previsualització).
• La sol·licitud pot tenir un màxim de 50.000 caràcters.
• Quan crees pàgines generatives a través de Power Apps (make.powerapps.com), només l'anglès americà és un llenguatge de prompts suportat.
• No s'admet la col·laboració. Assegureu-vos que només un creador estigui treballant en una pàgina generativa alhora per evitar conflictes no desitjats.
• Només s'admeten aquests tipus de dades:
  • Elecció
  • Moneda
  • Client
  • Data i hora
  • Només data
  • Nombre decimal
  • Nombre de punt flotant
  • Imatge
  • Cerca
  • Text de diverses línies
  • Estat
  • Raó per a l’estat
  • Text
  • Nombre enter
  • Sí/No
  • Identificador únic

Preguntes freqüents

Puc començar a dissenyar la meva aplicació al Dissenyador de plans i després utilitzar pàgines generatives?

Sí, tot i que actualment no hi ha una integració directa entre plans i pàgines generatives, pots utilitzar plans per definir les teves taules i aplicacions, i després canviar al dissenyador d'aplicacions basat en models per crear qualsevol pàgina generativa desitjada.

Hi ha alguna tarifa o crèdit addicional per utilitzar pàgines generatives?

No, l'experiència de creació de pàgines generatives (i plans) no requereix cap IA addicional ni crèdits de missatges.

Quin tipus d'imatges funcionen millor per guiar la generació de la interfície d'usuari?

Depèn del teu objectiu. Si sabeu exactament com voleu que es vegi la pàgina final, els esbossos clars i detallats o wireframes (ja siguin dibuixats a mà o digitals) són més efectius. Si només teniu un concepte general i voleu que l'agent ompli els detalls, els esbossos ràpids de pissarra o fins i tot els dibuixos de tovallons poden funcionar bé.

Puc utilitzar pàgines generatives amb aplicacions de llenç o altres tipus d'aplicacions?

No, actualment les pàgines generatives només s'admeten a les aplicacions basades en models.

Hi ha alguna manera de reutilitzar o clonar una pàgina generativa en entorns?

Sí, les pàgines generatives són elements compatibles amb la solució que es poden moure entre entorns. Només es mantenen l'última versió publicada del codi i la primera sol·licitud amb la solució; L'historial complet de revisions es manté a l'entorn original.

Puc editar el codi generat manualment?

Sí. Podeu editar manualment el codi generat seleccionant Edita a la pestanya Codi . Els canvis es desen com una nova iteració. Seleccioneu Cancel·la per cancel·lar els canvis si decidiu no conservar-los.

El codi generat per les pàgines generatives està garantit que està preparat per a producció i compleix amb els estàndards de la meva organització?

No. Tot i que l'agent fa tot el possible per produir codi d'alta qualitat i preparat per a la producció tenint en compte les pràctiques recomanades d'accessibilitat i seguretat, és responsabilitat vostra validar la sortida. Revisa sempre el codi generat per assegurar-te que s'alinea amb els estàndards, polítiques i requisits de compliment de la teva organització.

Com puc donar suggeriments sobre la funció?

La millor manera de donar comentaris a les pàgines generatives és utilitzar els botons de polze amunt/avall a l'experiència de xat que estan disponibles després de cada iteració. També us recomanem que seleccioneu Sí a Comparteix mostres de contingut rellevants i fitxers de registre addicionals perquè puguem depurar o intentar tornar a crear els problemes que hàgiu trobat amb la característica.

Què passa si no veig les pàgines generatives habilitades al meu entorn?

Confirma que el teu entorn es troba en una de les regions compatibles amb l'experiència de Power Apps maker studio: Estats Units, Gran Bretanya, Austràlia o Singapur. Si la teva regió no està llistada, encara pots crear i editar pàgines generatives utilitzant eines de generació de codi per IA, que estan disponibles arreu del món en núvols públics. Més informació: Crea i edita pàgines generatives amb eines de generació de codi amb IA

Articles relacionats

• Crea i edita pàgines generatives amb eines de generació de codi amb IA
• Preguntes freqüents sobre les pàgines generatives a les aplicacions basades en models
• Intelligent Apps Catalog (plantilles de prompts per a pàgines generatives)
• Termes legals