Ponovni pogovor s programom OpenAI API

V tej navodilih se boš naučil, kako lahko s pomočjo API-ja OpenAI izboljšaš videz zgodovine klepeta v svoji aplikaciji. Prvotna zgodovina klepeta je lahko pogosto neurejena in malo privlačna. Pokazal ti bom, kako lahko z enostavnimi spremembami v CSS in funkcijami v JavaScript narediš klepet bolj privlačen in uporabniku prijazen. Poleg tega boš izvedel, kako lahko izboljšaš uporabniško interakcijo s implementacijo tipke Enter za posredovanje sporočil.

Najpomembnejši uvidi

• Spreminjanje postavitve in barv klepeta s pomočjo CSS.
• Z JavaScript funkcijami izboljšaj uporabnost s dodajanjem dodatnih možnosti interakcije, kot je pritisk tipke Enter.

Korak-za-korak navodila

1. Preglej začetno zgodovino klepeta

Za razumevanje trenutnega stanja svoje zgodovine klepeta si oglej obstoječe izvedbe. Morda opaziš, da so prihajajoča sporočila in odgovori prikazani v barvah, ki niso ravno privlačne.

2. Prilagajanje barv sporočil

V tem koraku bomo spremenili barve uporabniških in AI sporočil. Najprej bomo preverili, ali je indeks sporočila sodo ali liho število, da barve dodelimo ustrezno. Uporabniško vprašanje bo prikazano rumeno, odgovor AI pa zeleno. Za boljše vizualno doživetje je priporočljivo izboljšati barve.

3. Ustvarjanje razmikov med sporočili

Za bolj pregledno zgodovino klepeta lahko med sporočili dodate razmike. To dosežemo z uporabo CSS lastnosti 'razmik'. Sporočilnemu kontejnerju dodaj fleksibilen izgled in določi razmik 8 slikelov.

4. Zaobljanje robov sporočil

Prijetna vizualna prilagoditev je zaobljene robove sporočil. Ta majhna sprememba lahko veliko doprinese k celotnemu videzu klepeta. Preizkusi različne vrednosti, da dosežeš najboljši vizualni učinek.

5. Dodajanje 'padding' za tekst v sporočilih

Za zagotovitev, da se besedilo v sporočilih ne prikaže preblizu roba, dodaj dodaten 'padding'. Običajno je vrednost 8 slikelov zadostna za prijeten razmik in izboljšanje berljivosti.

6. Izboljšanje uporabnosti s tipko Enter

Za optimizacijo uporabniške izkušnje dodaj možnost pošiljanja sporočil z pritiskom tipke Enter. Za to napiši ročaj dogodka 'on key down' za polje za vnos. Poskrbi, da bo pritisk tipke Enter sprožil pošiljanje sporočila.

7. Odprava težav pri upravljanju z dogodki

Če pritisk tipke Enter ne deluje kot pričakovano, preveri kodo. Preprosta tipkarska napaka, kot je uporaba napačnega dogodka, lahko povzroči izgubo produktivnosti. Posebno pozornost nameni velikim in malim črkam pri imenih dogodkov.

8. Odprava opozoril v zvezi s ključnimi atributi

Za preprečevanje opozoril pri dinamičnem ustvarjanju elementov dodeli ključ (Key) vsakemu od svojih 'div' sporočil. Uporabi indeks v funkciji zemljevida (Map) kot ključ, da zanesljivo odpraviš opozorilo.

9. Končna preveritev sprememb

Po implementaciji preizkusi vse spremembe, da se prepričaš, da delujejo kot pričakovano. Preveri tako vizualno zasnovo kot tudi funkcionalnost sistema sporočil. Uporabniki bi morali sedaj lahko pošiljati sporočila s preprostim klikom miške ali pritiskom na tipko Enter.

Povzetek

V tej vadnici si se naučil, kako lahko izboljšaš zgodovino pogovorov aplikacij, ki uporabljajo OpenAI API. Spoznal si, kako pomembna sta barvna shema, razmiki in uporabniški prijaznost. Z temi prilagoditvami postane pogovor ne le privlačnejši, ampak tudi bolj intuitiven za uporabnike.