Selles õpetuses õpid, kuidas parandada oma Chat-rakenduse kasutajaliidest (UI) OpenAI API kasutades. Seni oli vestlemine üsna rudimentaarne ning erinevate kohandustega optimeerime UI nii, et see vastaks rohkem tehnoloogia seisukohale, eriti nagu me seda teame ChatGPT ist. Selle juhendi lõpuks oled võimeline looma kaasahaaravama kasutajakogemuse.
Olulisemad järeldused
- Sisendiväljade aktiivne deaktiveerimine vastuse genereerimise ajal.
- Kogu vestluse kuvamine ainult viimase vastuse asemel.
- Layouti ja vestluse esitluse parandamine.
- Sagedaste vigade parandamine ja järjepideva olekuhalduse rakendamine.
Juhend samm-sammult
1. Sisestusvälja deaktiveerimine vastuse genereerimise ajal
Alusta sellega, et veendud, et sisestusväli ja "Saada" nupp deaktiveeritakse vastuse API poolt genereerimisel. Selleks loo uus olek useState abil ootelipu jaoks.
Pane ootelipp true'ks, kui kasutaja vajutab "Saada" nupule, ja määra see false'ks pärast vastuse saamist. See võimaldab sul juhtida UI-d ja kohandada vastavalt sisestusvälju.
Kui proovid seda sammu järgida, peaksid märkama, et sisestusväli on vastuse ootamise ajal deaktiveeritud ja varasem sisendvälja kustutatakse, võimaldades kasutajal sisestada uue sõnumi.
2. Layouti muutmine vestluse ajaloole
Ansustava kuvandi loomiseks kuvada sõnumite ajalugu sisestusvälja all, sarnaselt ChatGPT-ga. Selleks pead muutma elementide järjekorda oma JSX-koodis, nii et ajalugu oleks ülalpool.
Pärast selle muudatuse tegemist testi layouti, sisestades sõnumi ja saatdes selle. Ajalugu peaks nüüd kuvatama sisestusvälja kohal.
3. Flexboxi kasutamine parema UI paigutuse jaoks
Tagamaks, et sisestusväljad ja ajalugu oleksid hästi paigutatud, kasuta Flexboxi. Lisame välimisele konteinerile display: flex ja määrame flex-direction'ks column, et elemendid oleksid vertikaalselt paigutatud.
Paigutamise juures veendu, et sõnumite sisestusvälja ja ajaloo vahel oleks piisavalt ruumi, kasutades flex: 1.
4. Konteineri täisekraani tagamine
Mäleta, et kõik konteinerid, kaasa arvatud body, html ja põhikonteiner, vajavad täisekraani kõrgust 100%. Sea need atribuudid CSS-is, et tagada õige paigutus.
Kui pärast nende muudatuste tegemist paigutus ikkagi ei vasta soovidele, kontrolli servasid ja sea need 0 peale, et tagada kerimisriba vaba vaade.
5. Vestluse ajaloo rakendamine
Vestluse ajaloo rakendamiseks lisa sõnumitele teine olek messages ja array, mis salvestab kõik saadetud sõnumid. Uue sõnumi saatmise ajal pead selle lisama messages olekusse.
Järgmisel messages arrayle rakenda map-funktsioon, et iga sõnum vastavalt kuvatada. See võimaldab õiget väljundi kuvamist iga kasutaja- ja API-sõnumi kohta.
6. Veakäsitluse lisamine
Tugeva kasutajakogemuse loomiseks pead töötlema vigu, mis võivad tekkida kasutamise käigus, näiteks serverivea 503. Rakenda veakäsitlusrutiin, mis teavitab kasutajat ja proovib vajadusel pärast lühikest ooteaega päringut korrata.
7. Sõnumite esitlemise parandused
Praegu pole sõnumeid lihtne eristada. Oleks kasulik iga sõnum esitada märkega, kas see on kasutajalt või AI-lt. Mõtle, kuidas saad kohandada esitlust selgelt eristamaks kasutaja- ja AI-sõnumeid.
Kokkuvõte
Selles õpetuses õppisid, kuidas teatud kasutajaliidese kohandustega saad märkimisväärselt parandada oma vestlus rakenduse kasutaja kogemust OpenAI API-ga. Alates sisendväli tegevusetuks muutmisest API vastuste ajal kuni täieliku vestlusajaloo rakendamiseni - need näpunäited aitavad viia sinu rakenduse järgmisele tasemele.
Sagedased küsimused
Kuidas saan sisendväljad vastuse genereerimise ajal keelata?Kasuta useState'iga olekuanalüüsi, et muuta sisendväli ja nupp vastuse ootamise ajal olekuks "true".
Kuidas saan rakendada vestlusajalugu?Kasuta täiendavat olekut, et kõik sõnumid salvestada ja kuvada JSX abil kaardi abil.
Miks minu kujundus ei kuvata korrektselt?Veendu, et kõigil konteineritel oleks 100% kõrgus ja kontrolli võimalike kerimisriba suurusi.
Kuidas saan kasutajatele tagasisidet vigade korral anda?Rakenda veakäitlusrutiin, mis kuvab arusaadava sõnumi, kui ilmneb viga, ning vajadusel initsiaalib uuesti proovimise.
