Vibecoding · 13-dars · 9-sinflar

Fan: AI Frontend & Streaming Web Kohorta: Junior Vibecoders 9 Hafta: 3 (Chat Interfeyslari)

AI Chat Interfeysi va Real-Vaqt Streaming: O'z ChatGPT Interfeysimizni Yaratamiz

Nega zamonaviy AI xizmatlari foydalanuvchini 15 soniya kutishga majbur qilmasdan, matnni so'zma-so'z ko'z o'ngimizda chiqaradi? Bugun biz Server-Sent Events (SSE) texnologiyasini o'rganamiz, JavaScript da ReadableStream oqimini o'qishni va avto-skroll hamda kod bloklariga ega professional chat interfeysini quramiz.

Foydalanuvchi Tajribasi

Oddiy HTTP So'rov vs Streaming Oqimi: Tezlik Uchun Kurash

❌ Klassik HTTP So'rov

Uzoq kutish vaqti: Foydalanuvchi model oxirgi so'zni yozib bo'lguncha 10–20 soniya bo'sh ekranga qarab turadi.
Qotib qolish hissi: Internet uzildimi yoki server quladimi degan xavotir uyg'otadi.
Barchasi yoki hech narsa: Agar 99-foizda tarmoq uzilsa, butun javob yo'qoladi.

✅ Real-Vaqt Streaming Oqimi

Bir lahzali javob (TTFT < 300ms): Tugma bosilgach, birinchi so'z soniyaning uchdan birida ekranda paydo bo'ladi.
Jonli muloqot effekti: Matn inson o'qish tezligida oqib keladi va jonli suhbatdek tuyuladi.
Nazorat ostida: Foydalanuvchi xohlagan daqiqada 'To'xtatish' (Stop) tugmasini bosa oladi.

Tarmoq Protokoli

Server-Sent Events (SSE) Qanday Ishlaydi? Tokenlar Oqimi

Doimiy Ochiq Kanal

Oddiy javobdan farqli o'laroq, server Content-Type: text/event-stream sarlavhasini yuboradi va aloqani uzmasdan ochiq ushlab turadi:

HTTP/1.1 200 OK
Content-Type: text/event-stream
Cache-Control: no-cache
Connection: keep-alive

data: {"token": "Salom"}
data: {"token": " mening"}
data: {"token": " do'stim!"}
data: [DONE]

WebSocket vs Server-Sent Events

WebSocket: Ikki tomonlama murakkab aloqa. Ko'p o'yinchili o'yinlar uchun kerak, ammo AI chat uchun ortiqcha.
Server-Sent Events: Oddiy HTTP ustida ishlovchi bir tomonlama oqim. Barcha korporativ xavfsizlik devorlaridan oson o'tadi.

Frontend JavaScript

Mijoz Tomonida Oqimni O'qish: `ReadableStream` va `TextDecoder`

JavaScript da Oqimni Qabul Qilish Kodi

const response = await fetch('/api/chat', {
  method: 'POST',
  body: JSON.stringify({ prompt: "Salom" })
});

const reader = response.body.getReader();
const decoder = new TextDecoder("utf-8");

while (true) {
  const { done, value } = await reader.read();
  if (done) break; // Oqim yakunlandi
  
  const chunk = decoder.decode(value);
  chatBox.innerText += chunk; // Tokenni ekranga qo'shish
}

3 Ta Muhim Qadam

`getReader()`: Ma'lumotlar oqimini ushlab, uni bo'lakma-bo'lak o'qish imkonini beradi.
`TextDecoder`: Xom binar baytlarni o'qilishi mumkin bo'lgan UTF-8 harflariga aylantiradi.
`while(true)`: Oqim tugaguncha ishlaydi va har bir yangi token kelganda ekranni yangilaydi.

Professional Chat UI

AI Chat Anatomiyasi: Avto-Skroll, Xabar Pufakchalari va Kursor

1. Aqlli Avto-Skroll

Yangi tokenlar qo'shilgan sari ekran avtomatik pastga tushib borishi shart:

chatBox.scrollTop = chatBox.scrollHeight;

2. Miltillovchi Kursor

Model hali yozayotganini ko'rsatuvchi miltillovchi belgi:

.cursor {
  animation: blink 1s infinite;
}

3. Xabarlar Ajratilishi

Foydalanuvchi xabarlari o'ngda (ajralib turuvchi rang), AI xabarlari esa chapda (och fonda).

Matn Formatlash

Markdown Renderlash va Kod Sintaksisini Bo'yash

Xom Matn Muammosi

Agar matnni shunchaki innerText orqali chiqarsak, kod bloklari (```python) va jadvallar xunuk matn holida qoladi.

Yechim: marked.js kutubxonasi orqali markdownni HTML teglarga (<pre><code>) aylantirish!

Markdown Ishlov Berish

// Tokenlar to'plami HTML ga aylanadi
let rawText = "";

function onChunkReceived(token) {
  rawText += token;
  // marked() matnni toza HTML ga o'giradi
  messageElement.innerHTML = marked.parse(rawText);
  // Kod bloklarini chiroyli bo'yash
  hljs.highlightAll();
}

Sessiya Xotirasi

Chat Tarixi va Holat (State): Model Oldingi Gaplarni Qanday Eslab Qoladi?

Standart Xabarlar Massivi

[
  {
    "role": "system",
    "content": "Sen Target School IT yordamchisisan."
  },
  {
    "role": "user",
    "content": "Mening ismim Ali."
  },
  {
    "role": "assistant",
    "content": "Salom Ali! Qanday yordam berishim mumkin?"
  },
  {
    "role": "user",
    "content": "Mening ismim nima edi?"
  }
]

Kontekst Oynasi Qoidasi

Til modeli so'rovlar orasida hech narsani eslab qolmaydi! Har bir yangi savolda frontend brauzer butun yozishmalar tarixini qaytadan serverga yuboradi.

Xavf: Agar suhbat 100 ta xabarga yetsa, barcha tarixni yuborish tokenlarni tugatib qo'yadi. Shu sababli faqat oxirgi 10 ta xabarni qoldirish (Sliding Window) kerak.

Aloqani To'xtatish

"To'xtatish" (Stop Generating) Tugmasi: `AbortController` Sirlari

Nega To'xtatish Tugmasi Zarur?

Agar model noto'g'ri mavzuda yozishni boshlasa yoki 2000 so'zlik ortiqcha gapga ketsa, foydalanuvchi uni darhol to'xtatishi kerak. Bu token xarajatini va vaqtni tejaydi.

AbortController Kod Namunasi

let controller = null;

function sendMessage() {
  controller = new AbortController(); // Yangi kontroller
  
  fetch('/api/chat', {
    method: 'POST',
    signal: controller.signal // Signalni ulaymiz!
  });
}

function stopGeneration() {
  if (controller) {
    controller.abort(); // Tarmoq so'rovi uziladi!
    console.log("Generatsiya to'xtatildi!");
  }
}

Tarmoq Barqarorligi

Internet Uzilsa Nima Bo'ladi? Xatolarni Tutish va Qayta Urinish

Oqimdagi Odatiy Xatolar

Aloqa uzilishi: Noutbuk qopqog'i yopildi yoki Wi-Fi o'chib qoldi.
Cheklov (HTTP 429): API balansi tugadi yoki so'rovlar soni oshib ketdi.

Professional UI Himoyasi

Yozilgan qismni saqlash: Ekranga chiqib ulgurgan gaplarni o'chirib tashlamang!
'Qayta urinish' (Retry) tugmasi: Butun sahifani yangilamasdan, faqat oxirgi savolni qayta jo'natish.

Amaliy Laboratoriya

Amaliyot: AI Chat Streaming Laboratoriyasi (`lab/index.html`)

Interaktiv Sinov Maydoni

Dars papkasidagi laboratoriya stendida quyidagilar sinab ko'riladi:

Oqim tezligini sozlash: 10 ms (juda tez) dan 200 ms (sekin yozish) gacha.
Abort tugmasini sinash: Matn o'rtasida to'xtatib, holatni tekshirish.
Avto-skroll va Markdown: Kod bloklarini nusxalash tugmasi bilan birga ko'rish.

Ish Varaqasidagi Topshiriq

Brauzerda lab/index.html ni oching.
Xabar yuboring va birinchi token chiqish vaqtini o'lchang.
'To'xtatish' tugmasini bosib, nechta belgi to'xtatilganini yozing.
Ish varaqasidagi oqim sxemasini to'ldiring.

Sanoat Standartlari

Ideal AI Chat Interfeysi Talablari (Senior Vibecoder)

1. Qulay Kiritish Maydoni

Kengayuvchi Textarea: Matn ko'payganda kiritish maydoni avtomatik pastga kengayadi.
Shift + Enter yangi qator: Oddiy Enter xabarni darhol jo'natadi.

2. Javoblarning Qulayligi

Nusxalash tugmasi: Kodni bitta bosishda nusxalash va 'Nusxalandi!' belgisi.
Vaqt ko'rsatkichi: Har bir xabarning jo'natilgan aniq vaqti.

13-Dars Yakuni · 10 Ball

Xulosa: Real-Vaqt AI Chat Interfeyslarini Qurish Mahorati

Darsning 3 Ta Bosh Qoidasi

Streaming kechikishni yengadi: Foydalanuvchi 20 soniya kutmaydi, birinchi millisekunddan o'qishni boshlaydi.
ReadableStream — veb standarti: TextDecoder orqali oqimni o'qish to'liq nazorat beradi.
AbortController orqali nazorat: Foydalanuvchiga doim to'xtatish imkoniyatini taqdim eting.

10 Ballik Baholash Mezoni

SSE Arxitekturasi: HTTP va Streaming farqini asoslash — 3 ball
Chat Stendi: sinovni o'tkazish va TTFT tezligini qayd etish — 3 ball
AbortController Kodlash: to'xtatish kodi va tarmoq xatoliklarini tutish — 4 ball
Rag'bat: Avto-skroll va Markdown bo'yash algoritmi — +2 ball