Tērzēšanas vēstures uzlabošana, izmantojot OpenAI API

Šajā rokasgrāmatā uzzināsiet, kā, izmantojot OpenAI API, pievilcīgā veidā izveidot savas lietojumprogrammas tērzēšanas vēsturi. Sākotnējā vēsture bieži var izskatīties mulsinoša un nepievilcīga. Es jums parādīšu, kā padarīt tērzēšanu pievilcīgāku un lietotājam draudzīgāku, izmantojot vienkāršas CSS izmaiņas un JavaScript funkcijas. Uzzināsiet arī, kā uzlabot lietotāju mijiedarbību, ieviešot Enter pogu ziņojuma piegādei.

Galvenās atziņas

• Izmantojot CSS, varat pielāgot tērzēšanas vēstures izkārtojumu un krāsas.
• Izmantojot JavaScript funkcijas, varat uzlabot lietotāja pieredzi, ieviešot papildu mijiedarbības iespējas, piemēram, nospiežot Enter taustiņu.

Soli pa solim

1. Sākotnējais tērzēšanas vēstures skats

Lai saprastu tērzēšanas vēstures pašreizējo stāvokli, vispirms jāapskata esošās implementācijas. Jūs varat redzēt, ka ienākošās ziņas un atbildes tiek attēlotas ne pārāk pievilcīgās krāsās.

2. Pielāgojiet ziņojumu krāsu shēmu

Šajā solī mēs mainīsim lietotāja un AI ziņojumu krāsas. Vispirms pārbaudīsim, vai ziņojuma indekss ir pāra vai nepāra, lai attiecīgi piešķirtu krāsas. Lietotāja jautājums tiek attēlots dzeltenā krāsā, bet mākslīgā intelekta atbilde - zaļā krāsā. Tomēr, lai iegūtu labāku vizuālo pieredzi, krāsas ir jāprecizē.

3. Izveidojiet atstarpes starp ziņojumiem

Lai padarītu tērzēšanas vēsturi pārskatāmāku, starp ziņojumiem var ievietot atstarpes. To var panākt, izmantojot CSS atribūtu "atstarpe". Pievienojiet elastīgu izkārtojumu ziņojumu konteineram un iestatiet atstarpi 8 pikseļu apmērā.

4. noapaļojiet ziņojumu stūrus

Patīkams vizuāls pielāgojums ir noapaļot ziņojumu stūrus. Šī nelielā izmaiņa jau var ļoti daudz uzlabot tērzēšanas kopējo izskatu. Eksperimentējiet ar dažādām vērtībām, lai panāktu vislabāko vizuālo iespaidu.

5. Pievienojiet teksta izvietojumu ziņojumos.

Lai nodrošinātu, ka teksts ziņojumos netiek attēlots pārāk tuvu malām, jums vajadzētu pievienot arī izvietojumu. Parasti pietiek ar 8 pikseļu vērtību, lai radītu ērtu attālumu un uzlabotu lasāmību.

6. uzlabojiet lietotāja ērtumu, izmantojot taustiņu Enter

Lai optimizētu lietotāja pieredzi, ievietojiet iespēju sūtīt ziņojumus, nospiežot taustiņu Enter. Lai to izdarītu, ir jāuzraksta ievades lauka notikuma on taustiņa nospiešanas apstrādātājs. Pārliecinieties, ka tikai Enter taustiņa nospiešana kalpo kā ziņojuma nosūtīšanas ierosinātājs.

7 Notikumu apstrādes problēmu novēršana

Ja taustiņa Enter nospiešanai nav paredzētās funkcijas, pārbaudiet kodu. Šajā gadījumā vienkārša pārrakstīšanās kļūda, piemēram, nepareizi saistīts notikums, var izraisīt produktivitātes zudumu. Īpašu uzmanību pievērsiet notikumu nosaukumu rakstīšanai ar lielajiem burtiem.

8. Labojiet brīdinājumus par taustiņu atribūtiem

Lai izvairītos no brīdinājumiem, dinamiski veidojot elementus, katram ziņojuma "divs" vajadzētu piešķirt atslēgu. Izmantojiet indeksu kartēšanas funkcijā kā atslēgu, lai ticami novērstu brīdinājumu.

9. izmaiņu galīgā pārbaude

Pēc ieviešanas jums jāpārbauda visas izmaiņas, lai pārliecinātos, ka tās darbojas, kā paredzēts. Pārbaudiet gan vizuālo noformējumu, gan ziņojumu sistēmas funkcionalitāti. Tagad lietotājiem vajadzētu būt iespējai sūtīt ziņojumus ar vienkāršu peles klikšķi vai nospiežot taustiņu Enter.

Kopsavilkums

Šajā rokasgrāmatā jūs uzzinājāt, kā uzlabot to lietojumprogrammu tērzēšanas vēsturi, kurās tiek izmantota OpenAI API. Jūs redzējāt, cik svarīgs ir krāsu dizains, atstarpes un lietotājam draudzīga mijiedarbība. Šie pielāgojumi ne tikai padarīs tērzēšanu pievilcīgāku, bet arī intuitīvāku lietotājiem.