# Направите Чет Асистента са Вештачком Интелигенцијом
Сећате ли се у Стар Треку када би посадa опуштено разговарала са рачунаром брода, постављала му сложена питања и добијала промишљене одговоре? Оно што је 1960-их деловало као чиста научна фантастика, сада можете направити користећи веб технологије које већ познајете.
У овом часу ћемо креирати асистента за чет са вештачком интелигенцијом користећи HTML, CSS, JavaScript и неку бекенд интеграцију. Открићете како исте вештине које учите могу да повежу моћне AI сервисе који могу разумети контекст и генерисати значајне одговоре.
Замислите AI као приступ огромној библиотеци која не само да може да пронађе информације већ и да их синтетише у коherentне одговоре прилагођене вашим специфичним питањима. Уместо претраживања кроз хиљаде страница, добијате директне, контекстуалне одговоре.
Интеграција се остварује кроз познате веб технологије које заједно раде. HTML прави чет интерфејс, CSS води рачуна о визуелном дизајну, JavaScript управља интеракцијама корисника, а бекенд API све повезује са AI сервисима. То је слично као што различити делови оркестра сарађују да створе симфонију.
У основи градимо мост између природне људске комуникације и машинске обраде. Научићете и техничку имплементацију интеграције AI сервиса и дизајн шаблоне који чине интеракције интуитивним.
До краја овог часа, интеграција AI ће вам бити мање као мистериозан процес, а више као још један API с којим можете радити. Разумећете основне шаблоне који покрећу апликације попут ChatGPT и Claude, користећи исте принципе веб развоја које сте учили.
## ⚡ Шта Можете Урадити у Следећих 5 Минута
**Пут Брзог Почетка за Заузете Програмере**
```mermaid
flowchart LR
A[⚡ 5 минута] --> B[Добиј GitHub токен]
B --> C[Тестирај AI игралиште]
C --> D[Копирај Python код]
D --> E[Погледај AI одговоре]
```
- **Минут 1**: Посетите [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) и направите лични приступни токен
- **Минут 2**: Тестирајте AI интеракције директно у интерфејсу игралишта
- **Минут 3**: Кликните на таб "Code" и копирајте Python исечак кода
- **Минут 4**: Покрените код локално са својим токеном: `GITHUB_TOKEN=your_token python test.py`
- **Минут 5**: Пратите како се ваш први AI одговор генерише из вашег кода
**Кратак Тест Код**:
```python
import os
from openai import OpenAI
client = OpenAI(
base_url="https://models.github.ai/inference",
api_key="your_token_here"
)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Hello AI!"}],
model="openai/gpt-4o-mini"
)
print(response.choices[0].message.content)
```
**Зашто је ово важно**: За 5 минута осетићете магију програматске AI интеракције. Ово представља основну грађевну јединицу која покреће сваку AI апликацију коју користите.
Ево како ће завршени пројекат изгледати:
## 🗺️ Ваш Пут Кроз Развој AI Апликација
```mermaid
journey
title Од веб развоја до интеграције вештачке интелигенције
section Разумевање основа вештачке интелигенције
Откријте концепте генеративне вештачке интелигенције: 4: You
Истражите платформу GitHub модела: 6: You
Усавршите параметре и упите вештачке интелигенције: 8: You
section Интеграција бекенда
Креирајте Python API сервер: 5: You
Имплементирајте позиве функција вештачке интелигенције: 7: You
Управљајте асинхроним операцијама: 8: You
section Развој фронтенда
Направите модеран чар интерфејс: 6: You
Усавршите интеракције у реалном времену: 8: You
Креирајте респонсивно корисничко искуство: 9: You
section Професионална примена
Распоредите комплетан систем вештачке интелигенције: 7: You
Оптимизујте перформансне обрасце: 8: You
Направите апликацију спремну за продукцију: 9: You
```
**Ваш Крај Пута**: До краја овог часа направићете потпун AI-погонски апликацију користећи исте технологије и шаблоне које користе савремени AI асистенти као ChatGPT, Claude и Google Bard.
## Разумевање AI: Од Мистерије до Мастерства
Пре него што заронимо у код, хајде да разумемо са чиме радимо. Ако сте раније користили API-је, знате основни шаблон: пошаљите захтев, добијете одговор.
AI API-ји прате сличну структуру, али уместо да врате унапред сачуване податке из базе, они генеришу нове одговоре на основу образаца научених из огромне количине текста. Замислите то као разлику између система каталога библиотеке и зналачког библиотекара који може синтетисати информације из више извора.
### Шта је заправо "Генеративни AI"?
Размотрите како је Розетски камен омогућио научницима да разумеју египатске хијероглифе проналажењем образаца између познатог и непознатог језика. AI модели функционишу слично – проналазе обрасце у огромним количинама текста да би разумели како језик функционише, а затим користе те обрасце да генеришу одговарајуће одговоре на нова питања.
**Ја ћу вам ово објаснити једноставним поређењем:**
- **Традиционална база података**: Као када тражите свој извод из матичне књиге рођених – добијате увек исти тачан документ
- **Претрага у претраживачу**: Као када питате библиотекара да пронађе књиге о мачкама – показује вам шта је доступно
- **Генеративни AI**: Као када питате зналачког пријатеља о мачкама – прича вам занимљиве ствари својим речима, прилагођене ономе што желите да знате
```mermaid
graph LR
A[Ваше питање] --> B[AI модел]
B --> C[Препознавање обрасца]
C --> D[Генерисање садржаја]
D --> E[Контекстуални одговор]
F[Податци за тренинг Књиге, Чланци, Веб] --> B
```
### Како AI Модели Уче (Једноставна Верзија)
AI модели уче кроз излагање огромним скупом података који садрже текстове из књига, чланака и разговора. Кроз овај процес они идентификују обрасце у:
- Како су мисли структуиране у писаној комуникацији
- Које речи се обично појављују заједно
- Како разговори обично теку
- Контекстуалне разлике између формалне и неформалне комуникације
**То је слично као што археолози дешифрују древне језике**: анализирају хиљаде примера да би разумели граматику, речник и културни контекст, на крају постајући у стању да тумаче нове текстове користећи научене обрасце.
### Зашто GitHub Models?
Користимо GitHub Models из веома практичног разлога – да нам омогући приступ AI-ју на нивоу предузећа без потребе да сами подижемо AI инфраструктуру (верујте ми, не желите то сада да радите!). Замислите то као коришћење API-ја за временску прогнозу уместо да покушавате сами да предвиђате време подижући метеоролошке станице свуда.
У основи је то "AI као услуга," а најбоље од свега? Бесплатно је за почетак, па можете експериментисати без бриге о великим трошковима.
```mermaid
graph LR
A[Фронтенд Чет ИН] --> B[Ваш Бекенд АПИ]
B --> C[ГитХаб Моделс АПИ]
C --> D[Обрада АИ Модела]
D --> C
C --> B
B --> A
```
Користићемо GitHub Models за нашу бекенд интеграцију, која омогућава приступ професионалним AI могућностима кроз интерфејс пријатељски према програмерима. [GitHub Models Playground](https://github.com/marketplace/models/azure-openai/gpt-4o-mini/playground) служи као тест окружење где можете експериментисати са различитим AI моделима и разумети њихове способности пре него што их имплементирате у код.
## 🧠 Екосистем Развоја AI Апликација
```mermaid
mindmap
root((Развој вештачке интелигенције))
Understanding AI
Generative Models
Препознавање шаблона
Генерисање садржаја
Разумевање контекста
Синтеза одговора
AI Parameters
Контрола температуре
Ограничења токена
Топ-p филтерисање
Системски упути
Backend Architecture
API Integration
GitHub модели
Аутентификација
Обрада захтева
Управљање грешкама
Python Infrastructure
FastAPI оквир
Async операције
Безбедност окружења
CORS конфигурација
Frontend Experience
Chat Interface
Ажурирања у реалном времену
Историја порука
Повратне информације корисника
Статуси учитавања
Modern Web Tech
ES6 класе
Async/Await
Манипулација DOM-ом
Обрада догађаја
Professional Patterns
Security Best Practices
Управљање токенима
Валидација уноса
Превенција XSS-а
Граница грешака
Production Readiness
Оптимизација перформанси
Респонзивни дизајн
Приступачност
Стратегије тестирања
```
**Основни Принцип**: Развој AI апликација комбинује традиционалне вештине веб развоја са интеграцијом AI сервиса, креирајући интелигентне апликације које делују природно и реагују на кориснике.
**Ево шта чини игралиште тако корисним:**
- **Испробајте** различите AI моделе као GPT-4o-mini, Claude и друге (сви бесплатно!)
- **Тестирајте** своје идеје и упите пре него што напишете иједан ред кода
- **Добијте** готове исечке кода у вашем омиљеном програмском језику
- **Подешавајте** параметре као што су ниво креативности и дужина одговора да видите како утичу на резултат
Када се мало поиграте, једноставно кликните на таб "Code" и изаберите свој програмски језик да бисте добили код за имплементацију.
## Подешавање Python Бекенд Интеграције
Сада хајде да имплементирамо AI интеграцију користећи Python. Python је одличан за AI апликације због једноставне синтаксе и моћних библиотека. Почећемо са кодом из GitHub Models игралишта, а затим га рефакторирати у реупотребљиву, продукцијски спремну функцију.
### Разумевање Основне Имплементације
Када преузмете Python код из игралишта, добићете нешто што изгледа овако. Не брините ако делује обимно на први поглед – кренимо корак по корак:
```python
"""Run this model in Python
> pip install openai
"""
import os
from openai import OpenAI
# Да бисте аутентификовали модел, потребно је да генеришете лични приступни токен (PAT) у подешавањима вашег GitHub налога.
# Креирајте свој PAT токен пратећи упутства овде: https://docs.github.com/en/authentication/keeping-your-account-and-data-secure/managing-your-personal-access-tokens
client = OpenAI(
base_url="https://models.github.ai/inference",
api_key=os.environ["GITHUB_TOKEN"],
)
response = client.chat.completions.create(
messages=[
{
"role": "system",
"content": "",
},
{
"role": "user",
"content": "What is the capital of France?",
}
],
model="openai/gpt-4o-mini",
temperature=1,
max_tokens=4096,
top_p=1
)
print(response.choices[0].message.content)
```
**Ево шта се дешава у овом коду:**
- **Увозимо** потребне алате: `os` за читање променљивих окружења и `OpenAI` за комуникацију са AI-јем
- **Подешавамо** OpenAI клијента тако да користи GitHub AI сервере уместо OpenAI директно
- **Аутентификујемо се** помоћу посебног GitHub токена (више о томе за тренутак!)
- **Структурирамо** наш разговор са различитим "улогама" – замислите као постављање сцене за представу
- **Шаљемо** захтев AI-ју са неким фино подешеним параметрима
- **Издвајамо** стварни текст одговора из свих података који се врате
### Разумевање Ролa Порука: AI Конверзацијски Фрејмворк
AI разговори користе специфичну структуру са различитим "улогама" које имају посебне сврхе:
```python
messages=[
{
"role": "system",
"content": "You are a helpful assistant who explains things simply."
},
{
"role": "user",
"content": "What is machine learning?"
}
]
```
**Замислите то као режију представе:**
- **Системска улога**: Као сценске упуте за глумца – говори AI-ју како да се понаша, какву личност да има и како да одговара
- **Улога корисника**: Питање или порука од особе која користи вашу апликацију
- **Улога асистента**: Одговор AI-ја (ово не шаљете, али се види у историји разговора)
**Реалан пример**: Замислите да пријављујете пријатеља некоме на журци:
- **Системска порука**: "Ово је моја пријатељица Сара, доктор који одлично објашњава медицинске појмове на једноставан начин"
- **Корисничка порука**: "Можеш ли ми објаснити како вакцине функционишу?"
- **Асистентов одговор**: Сара одговара као пријатељски настројен доктор, не као адвокат или куваљ
### Разумевање AI Параметара: Фино Подударање Понашања Одговора
Нумерички параметри у AI API позивима контролишу како модел генерише одговоре. Ова подешавања вам омогућавају да прилагодите понашање AI-ја за различите сврхе:
#### Температура (0.0 до 2.0): Креативност
**Шта ради**: Контролише колико креативни или предвидиви ће одговори AI-ја бити.
**Замислите као ниво импровизације џез музичара:**
- **Температура = 0.1**: Свира увек исту мелодију (врло предвидиво)
- **Температура = 0.7**: Додаје неке укусне варијације али остаје препознатљиво (уравнотежена креативност)
- **Температура = 1.5**: Потпуни експериментални џез са неочекиваним обртима (врло непредвидиво)
```python
# Врло предвидиви одговори (добро за чињенична питања)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "What is 2+2?"}],
temperature=0.1 # Скоро увек ће рећи "4"
)
# Креативни одговори (добро за разматрање идеја)
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Write a creative story opening"}],
temperature=1.2 # Генерисаће јединствене, неочекиване приче
)
```
#### Максимални Број Токена (1 до 4096+): Дужина Одговора
**Шта ради**: Поставља ограничење колико дуг одговор AI може бити.
**Токени се отприлике могу сматрати речима** (1 токен ≈ 0,75 речи на енглеском):
- **max_tokens=50**: Кратко и јасно (као SMS порука)
- **max_tokens=500**: Непрекршен пасус или два
- **max_tokens=2000**: Детаљно објашњење са примерима
```python
# Кратки, сажети одговори
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=100 # Захтева кратко објашњење
)
# Детаљни, свеобухватни одговори
response = client.chat.completions.create(
messages=[{"role": "user", "content": "Explain JavaScript"}],
max_tokens=1500 # Омогућава детаљна објашњења са примерима
)
```
#### top_p (0.0 до 1.0): Параметар Фокуса
**Шта ради**: Контролише колико AI остаје фокусиран на највероватније одговоре.
**Замислите да AI има огроман речник, рангиран према вероватноћи речи:**
- **top_p=0.1**: Узима у обзир само топ 10% највероватнијих речи (веома фокусирано)
- **top_p=0.9**: Узима у обзир 90% могућих речи (креативније)
- **top_p=1.0**: Узима све (максимална разноликост)
**На пример**: Ако питате "Небо је обично..."
- **Низак top_p**: Скоро увек каже "плаво"
- **Висок top_p**: Може рећи "плаво", "облачно", "пространо", "промењљиво", "лепо", итд.
### Све Заједно: Комбинације Параметара за Различите Случајеве
```python
# За чињеничне, доследне одговоре (као бот за документацију)
factual_params = {
"temperature": 0.2,
"max_tokens": 300,
"top_p": 0.3
}
# За помоћ у креативном писању
creative_params = {
"temperature": 1.1,
"max_tokens": 1000,
"top_p": 0.9
}
# За разговорне, корисне одговоре (балансирано)
conversational_params = {
"temperature": 0.7,
"max_tokens": 500,
"top_p": 0.8
}
```
```mermaid
quadrantChart
title Матрични приказ оптимизације параметара вештачке интелигенције
x-axis Ниска креативност --> Висока креативност
y-axis Кратак одговор --> Дуг одговор
quadrant-1 Креативни садржај
quadrant-2 Детаљна анализа
quadrant-3 Брзе чињенице
quadrant-4 Разговорни AI
Documentation Bot: [0.2, 0.3]
Customer Service: [0.4, 0.4]
General Assistant: [0.7, 0.5]
Creative Writer: [0.9, 0.9]
Brainstorming Tool: [0.8, 0.8]
```
**Зашто су ови параметри важни**: Различите апликације захтевају различите типове одговора. Бот за корисничку подршку треба да буде конзистентан и чињенично исправан (ниска температура), док креативни асистент за писање треба да буде маштовит и разнолик (висока температура). Разумевање ових параметара вам даје контролу над AI личношћу и стилом одговора.
```
**Here's what's happening in this code:**
- **We import** the tools we need: `os` for reading environment variables and `OpenAI` for talking to the AI
- **We set up** the OpenAI client to point to GitHub's AI servers instead of OpenAI directly
- **We authenticate** using a special GitHub token (more on that in a minute!)
- **We structure** our conversation with different "roles" – think of it like setting the scene for a play
- **We send** our request to the AI with some fine-tuning parameters
- **We extract** the actual response text from all the data that comes back
> 🔐 **Security Note**: Never hardcode API keys in your source code! Always use environment variables to store sensitive credentials like your `GITHUB_TOKEN`.
### Creating a Reusable AI Function
Let's refactor this code into a clean, reusable function that we can easily integrate into our web application:
```python
import asyncio
from openai import AsyncOpenAI
# Use AsyncOpenAI for better performance
client = AsyncOpenAI(
base_url="https://models.github.ai/inference",
api_key=os.environ["GITHUB_TOKEN"],
)
async def call_llm_async(prompt: str, system_message: str = "You are a helpful assistant."):
"""
Sends a prompt to the AI model asynchronously and returns the response.
Args:
prompt: The user's question or message
system_message: Instructions that define the AI's behavior and personality
Returns:
str: The AI's response to the prompt
"""
try:
response = await client.chat.completions.create(
messages=[
{
"role": "system",
"content": system_message,
},
{
"role": "user",
"content": prompt,
}
],
model="openai/gpt-4o-mini",
temperature=1,
max_tokens=4096,
top_p=1
)
return response.choices[0].message.content
except Exception as e:
logger.error(f"AI API error: {str(e)}")
return "I'm sorry, I'm having trouble processing your request right now."
# Backward compatibility function for synchronous calls
def call_llm(prompt: str, system_message: str = "You are a helpful assistant."):
"""Synchronous wrapper for async AI calls."""
return asyncio.run(call_llm_async(prompt, system_message))
```
**Ова побољшана функција:**
- **Прихвата** два параметра: кориснички упит и опционалну системску поруку
- **Пружа** подразумевану системску поруку за опште понашање асистента
- **Користи** одговарајуће Python типове за бољу документацију кода
- **Укључује** детаљан docstring који објашњава сврху и параметре функције
- **Враћа** само садржај одговора, што олакшава коришћење у нашем веб API-ју
- **Одржава** исте параметре модела за конзистентно понашање AI-ја
### Магија Системских Промптова: Програмирање Личности AI-ја
Ако параметри контролишу како AI размишља, системски промптови контролишу ко AI мисли да је. Ово је искрено један од најзанимљивијих делова рада са AI-јем – фактички дајете AI-ју потпуну личност, ниво експертизе и стил комуникације.
**Замислите системске промптове као кастинг различитих глумаца за различите улоге**: Уместо једног општег асистента, можете направити специјализоване стручњаке за разне ситуације. Тражите стрпљивог наставника? Креативног партнера за идеје? Пословног саветника без глупости? Само промените системски промпт!
#### Зашто су системски промптови тако моћни
Ево фасцинантног дела: AI модели су тренирани на безброј разговора у којима људи усвајају различите улоге и нивое експертизе. Када AI-ју дате специфичну улогу, то је као да укључите прекидач који активира све те научене обрасце.
**То је као методска глума за AI**: Реците глумцу "ти си мудри стари професор" и гледајте како аутоматски прилагођава држање, речник и манире. AI ради нешто врло слично са језичким образцима.
#### Како направити ефективне системске промптове: Уметност и Наука
**Анатомија одличног системског промпта:**
1. **Улога/Идентитет**: Ко је AI?
2. **Експертиза**: Шта зна?
3. **Стил комуникације**: Како говори?
4. **Специфична упутства**: На шта треба да се фокусира?
```python
# ❌ Непрецизан системски упит
"You are helpful."
# ✅ Детаљан, ефикасан системски упит
"You are Dr. Sarah Chen, a senior software engineer with 15 years of experience at major tech companies. You explain programming concepts using real-world analogies and always provide practical examples. You're patient with beginners and enthusiastic about helping them understand complex topics."
```
#### Примери Системских Промптова са Контекстом
Погледајмо како различити системски промптови стварају сасвим различите AI личности:
```python
# Пример 1: Поштрен учитељ
teacher_prompt = """
You are an experienced programming instructor who has taught thousands of students.
You break down complex concepts into simple steps, use analogies from everyday life,
and always check if the student understands before moving on. You're encouraging
and never make students feel bad for not knowing something.
"""
# Пример 2: Креативни сарадник
creative_prompt = """
You are a creative writing partner who loves brainstorming wild ideas. You're
enthusiastic, imaginative, and always build on the user's ideas rather than
replacing them. You ask thought-provoking questions to spark creativity and
offer unexpected perspectives that make stories more interesting.
"""
# Пример 3: Стратешки пословни саветник
business_prompt = """
You are a strategic business consultant with an MBA and 20 years of experience
helping startups scale. You think in frameworks, provide structured advice,
and always consider both short-term tactics and long-term strategy. You ask
probing questions to understand the full business context before giving advice.
"""
```
#### Видећи Системске Промптове у Акцији
Хајде да тестирамо исто питање са различитим системским промптовима да видимо драматичне разлике:
**Питање**: "Како да обрадим корисничку аутентификацију у својој веб апликацији?"
```python
# Са упутством наставника:
teacher_response = call_llm(
"How do I handle user authentication in my web app?",
teacher_prompt
)
# Типичан одговор: „Одлично питање! Хајде да аутентификацију поделимо у једноставне кораке.
# Замисли то као обезбеђење у ноћном клубу које проверава личне карте...“
# Са пословним упутством:
business_response = call_llm(
"How do I handle user authentication in my web app?",
business_prompt
)
# Типичан одговор: „Из стратешке перспективе, аутентификација је кључна за поверење корисника
# и усаглашеност са прописима. Дозволите ми да представим оквир уз рачунање безбедности,
# корисничког искуства и скалабилности...“
```
#### Напредне Технике Системских Промптова
**1. Постављање Контекста**: Дајте AI-ју позадинске информације
```python
system_prompt = """
You are helping a junior developer who just started their first job at a startup.
They know basic HTML/CSS/JavaScript but are new to backend development and databases.
Be encouraging and explain things step-by-step without being condescending.
"""
```
**2. Форматирање излаза**: Реците АИ како да структуира одговоре
```python
system_prompt = """
You are a technical mentor. Always structure your responses as:
1. Quick Answer (1-2 sentences)
2. Detailed Explanation
3. Code Example
4. Common Pitfalls to Avoid
5. Next Steps for Learning
"""
```
**3. Постављање ограничења**: Дефинишите шта АИ НЕ сме да ради
```python
system_prompt = """
You are a coding tutor focused on teaching best practices. Never write complete
solutions for the user - instead, guide them with hints and questions so they
learn by doing. Always explain the 'why' behind coding decisions.
"""
```
#### Зашто је ово важно за вашег помоћника за ћаскање
Разумевање системских упита даје вам невероватну моћ да креирате специјализоване АИ помоћнике:
- **Бот за корисничку подршку**: Користан, стрпљив, упућен у политику
- **Тутора за учење**: Подстицајан, корак по корак, проверава разумевање
- **Креативни партнер**: Имагинативан, надограђује идеје, пита "шта ако?"
- **Технички експерт**: Прецизан, детаљан, свестан безбедности
**Кључни увид**: Не позивате само АИ API – ви креирате прилагођену АИ личност која служи вашем специфичном случају употребе. Ово чини да модерне АИ апликације делују прилагођено и корисно, а не генерализовано.
### 🎯 Педагошки преглед: Програмирање АИ личности
**Пауза и размишљање**: Управо сте научили како да програмирате АИ личности кроз системске упите. Ово је основна вештина у развоју модерних АИ апликација.
**Брза самоевалуација**:
- Можете ли објаснити како се системски упити разликују од обичних порука корисника?
- Која је разлика између температуре и параметра top_p?
- Како бисте креирали системски упит за специфичан случај употребе (нпр. тутора за програмирање)?
**Веза са стварним светом**: Технике система за упите које сте научили користе се у свакој великој АИ апликацији – од GitHub Copilot асистенције у коду до ChatGPT конверзационог интерфејса. Савладали сте исте обрасце које користе АИ тимови у водећим технолошким компанијама.
**Изаазовно питање**: Како бисте дизајнирали различите АИ личности за различите типове корисника (почетник против експерта)? Размотрите како исти основни АИ модел може служити различиту публику кроз инжењеринг упита.
## Креирање Web API-а са FastAPI: Ваш центар за високоперформансну комуникацију са АИ
Хајде да направимо позадину која повезује ваш фронтенд са АИ сервисима. Користићемо FastAPI, модеран Python фрејмворк који одлично служи за прављење API-ја за АИ апликације.
FastAPI нуди неколико предности за овај пројекат: уграђена async подршка за обраду истовремених захтева, аутоматска генерација API документације и изузетне перформансе. Ваш FastAPI сервер делује као посредник који прима захтеве са фронтенда, комуницира са АИ сервисима и враћа форматиране одговоре.
### Зашто FastAPI за АИ апликације?
Можда се питате: "Зар не могу само директно да позовем АИ из свог фронтенд JavaScript-а?" или "Зашто FastAPI а не Flask или Django?" Одлична питања!
**Ево зашто је FastAPI савршен за оно што правимо:**
- **Подударање async по подразумеваној вредности**: Може руковати више АИ захтева одједном без заглављивања
- **Аутоматска документација**: Посетите `/docs` и добијте лепу, интерактивну страницу документације API-ја бесплатно
- **Уграђена валидација**: Пресеца грешке пре него што направе проблеме
- **Брз као муња**: Један од најбржих Python фрејмворка
- **Модеран Python**: Користи све најновије и најбоље особине Python-а
**А ево и зашто нам уопште треба бекаенд:**
**Безбедност**: Ваш АИ API кључ је као лозинка – ако га ставите у фронтенд JavaScript, свако ко прегледа код вашег сајта може га украсти и користити ваше АИ кредите. Бекаенд држи осетљиве креденцијале безбедним.
**Ограничење учесталости и контрола**: Бекаенд вам омогућава да ограничите колико често корисници могу слати захтеве, имплементирате корисничку аутентификацију и додајете логовање ради праћења коришћења.
**Обрада података**: Можда желите да сачувате разговоре, филтрујете непримерен садржај или комбинујете више АИ сервиса. Бекаенд је место где та логика живи.
**Архитектура личи на клијент-сервер модел:**
- **Фронтенд**: Слој корисничког интерфејса за интеракцију
- **Backend API**: Слој за обраду и рутирање захтева
- **АИ сервис**: Спољна рачунања и генерисање одговора
- **Променљиве окружења**: Безбедна конфигурација и чување креденцијала
### Разумевање тока захтев-одговор
Пратимо шта се дешава када корисник пошаље поруку:
```mermaid
sequenceDiagram
participant User as 👤 Корисник
participant Frontend as 🌐 Фронтенд
participant API as 🔧 FastAPI Сервер
participant AI as 🤖 AI Услуга
User->>Frontend: Уноси "Здраво AI!"
Frontend->>API: POST /hello {"message": "Здраво AI!"}
Note over API: Валидација захтева Додаје системски упит
API->>AI: Слање форматираног захтева
AI->>API: Враћа одговор AI
Note over API: Обрађује одговор Логовање конверзације
API->>Frontend: {"response": "Здраво! Како могу да помогнем?"}
Frontend->>User: Приказује AI поруку
```
**Разумевање сваког корака:**
1. **Корисничка интеракција**: Особа откуца у интерфејсу за ћаскање
2. **Обрада на фронтенду**: JavaScript хвата унос и форматира га као JSON
3. **Валидација API-ја**: FastAPI аутоматски проверава захтев коришћењем Pydantic модела
4. **Интеграција са АИ-јем**: Backend додаје контекст (системски упит) и позива АИ сервис
5. **Обрада одговора**: API прими одговор од АИ-ја и може га по потреби модификовати
6. **Приказ на фронтенду**: JavaScript приказује одговор у интерфејсу за ћаскање
### Разумевање архитектуре API-ја
```mermaid
sequenceDiagram
participant Frontend
participant FastAPI
participant AI Function
participant GitHub Models
Frontend->>FastAPI: POST /hello {"message": "Здраво АИ!"}
FastAPI->>AI Function: call_llm(message, system_prompt)
AI Function->>GitHub Models: API захтев
GitHub Models->>AI Function: АИ одговор
AI Function->>FastAPI: одговор текст
FastAPI->>Frontend: {"response": "Здраво! Како могу да помогнем?"}
```
```mermaid
flowchart TD
A[Кориснички Унос] --> B[Валидација на Фронтенду]
B --> C[HTTP POST Захтев]
C --> D[FastAPI Рутер]
D --> E[Pydantic Валидација]
E --> F[Позив АИ Функције]
F --> G[GitHub Models API]
G --> H[Обрада Одговора]
H --> I[JSON Одговор]
I --> J[Ажурирање Фронтенда]
subgraph "Слој Безбедности"
K[CORS Middleware]
L[Променљиве Окружења]
M[Руковање Грешкама]
end
D --> K
F --> L
H --> M
```
### Креирање FastAPI апликације
Правимо наш API корак по корак. Направите фајл `api.py` са следећим FastAPI кодом:
```python
# api.py
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from llm import call_llm
import logging
# Конфигуриши логовање
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
# Креирај FastAPI апликацију
app = FastAPI(
title="AI Chat API",
description="A high-performance API for AI-powered chat applications",
version="1.0.0"
)
# Конфигуриши CORS
app.add_middleware(
CORSMiddleware,
allow_origins=["*"], # Конфигуриши прикладно за продукцију
allow_credentials=True,
allow_methods=["*"],
allow_headers=["*"],
)
# Pydantic модели за валидацију захтева/одговора
class ChatMessage(BaseModel):
message: str
class ChatResponse(BaseModel):
response: str
@app.get("/")
async def root():
"""Root endpoint providing API information."""
return {
"message": "Welcome to the AI Chat API",
"docs": "/docs",
"health": "/health"
}
@app.get("/health")
async def health_check():
"""Health check endpoint."""
return {"status": "healthy", "service": "ai-chat-api"}
@app.post("/hello", response_model=ChatResponse)
async def chat_endpoint(chat_message: ChatMessage):
"""Main chat endpoint that processes messages and returns AI responses."""
try:
# Извучи и валидај поруку
message = chat_message.message.strip()
if not message:
raise HTTPException(status_code=400, detail="Message cannot be empty")
logger.info(f"Processing message: {message[:50]}...")
# Позови AI сервис (напомена: call_llm треба да буде асинхрони за боље перформансе)
ai_response = await call_llm_async(message, "You are a helpful and friendly assistant.")
logger.info("AI response generated successfully")
return ChatResponse(response=ai_response)
except HTTPException:
raise
except Exception as e:
logger.error(f"Error processing chat message: {str(e)}")
raise HTTPException(status_code=500, detail="Internal server error")
if __name__ == "__main__":
import uvicorn
uvicorn.run(app, host="0.0.0.0", port=5000, reload=True)
```
**Разумевање FastAPI имплементације:**
- **Увози** FastAPI за модерне веб фрејмворк функционалности и Pydantic за валидацију података
- **Креира** аутоматску API документацију (доступну на `/docs` када сервер ради)
- **Омогућава** CORS middleware да дозволи захтеве фронтенда са различитих порекла
- **Дефинише** Pydantic моделе за аутоматску валидацију захтева/одговора и документацију
- **Користи** async ендпоинте за боље перформансе са истовременим захтевима
- **Имплементира** исправне HTTP статус кодове и обраду грешака помоћу HTTPException
- **Укључује** структурирано логовање за праћење и дебаговање
- **Нуди** ендпоинт за проверу здравља сервиса
**Кључне предности FastAPI у односу на традиционалне фрејмворке:**
- **Аутоматска валидација**: Pydantic модели обезбеђују интегритет података пре процесирања
- **Интерактивна документација**: Посетите `/docs` за аутоматски генерисану, тестабилну документацију API-ја
- **Типска сигурност**: Python type hints спречавају грешке у току извођења и побољшавају квалитет кода
- **Async подршка**: Руководи истовременим АИ захтевима без блокирања
- **Перформансе**: Знатно бржа обрада захтева за реал-тим апликације
### Разумевање CORS-а: Чувар безбедности веба
CORS (Cross-Origin Resource Sharing) је као чувар на згради који проверава да ли посетиоци смеју да уђу. Разумемо зашто је то важно и како утиче на вашу апликацију.
#### Шта је CORS и зашто постоји?
**Проблем**: Замислите да било који сајт може да шаље захтеве ка вашем банкарском сајту у ваше име без вашег одобрења. То би био безбедносни кошмар! Прегледачи то спречавају по подразумеваној поставци кроз "Политику истог порекла".
**Политика истог порекла**: Прегледачи дозвољавају веб страницама да шаљу захтеве само на исти домен, порт и протокол са којих су учитане.
**Аналогија из стварног света**: Као безбедност у стамбеној згради – само становници (исто порекло) могу ући укључено. Ако желите да пустите пријатеља (друго порекло), морате изрично рећи обезбеђењу да је у реду.
#### CORS у вашем развојном окружењу
Током развоја, ваш фронтенд и бекаенд раде на различитим портовима:
- Фронтенд: `http://localhost:3000` (или file:// ако директно отварате HTML)
- Бекаенд: `http://localhost:5000`
Ово се рачуна као „различито порекло“, иако су на истом рачунару!
```python
from fastapi.middleware.cors import CORSMiddleware
app = FastAPI(__name__)
CORS(app) # Ово говори прегледачима: "У реду је да други порекла праве захтеве овом API-ју"
```
**Шта CORS конфигурација ради у пракси:**
- **Додаје** посебне HTTP заглавља у одговоре API-ја која говоре прегледачима „овaj cross-origin захтев је дозвољен“
- **Рукводи** "preflight" захтевима (прегледачи понекад проверавају дозволе пре слања стварног захтева)
- **Спречава** досадну грешку "blocked by CORS policy" у конзоли прегледача
#### CORS безбедност: развој против продукције
```python
# 🚨 Развој: Дозвољава СВЕ изворе (погодан али небезбедан)
CORS(app)
# ✅ Продукција: Дозволи само твој конкретан фронтенд домен
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])
# 🔒 Напредно: Различити извори за различите енвиронменте
if app.debug: # Режим развоја
CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
else: # Режим продукције
CORS(app, origins=["https://yourdomain.com"])
```
**Зашто је ово важно**: У развоју, `CORS(app)` је као остављена отворена улазна врата – згодно, али небезбедно. У продукцији желите да јасно дефинишете који сајтови могу да комуницирају са вашим API-јем.
#### Чести CORS сценарији и решења
| Сценарио | Проблем | Решење |
|----------|---------|---------|
| **Локални развој** | Фронтенд не може да достигне бекаенд | Додајте CORSMiddleware у FastAPI |
| **GitHub Pages + Heroku** | Деплојован фронтенд не може да дохвати API | Додајте URL GitHub Pages у CORS дозволе |
| **Прилагођени домен** | CORS грешке у продукцији | Ажурирајте CORS дозволе да одговарају вашем домену |
| **Мобилна апликација** | Апликација не може да дохвати веб API | Додајте домен апликације или пажљиво користите `*` |
**Савет професионалаца**: Можете проверити CORS заглавља у Developer Tools у прегледачу, у картици Network. Потражите заглавља попут `Access-Control-Allow-Origin` у одговору.
### Обрада грешака и валидација
Приметите како наш API садржи исправну обраду грешака:
```python
# Потврдити да смо примили поруку
if not message:
return jsonify({"error": "Message field is required"}), 400
```
**Кључни принципи валидације:**
- **Проверава** обавезна поља пре обраде захтева
- **Враћа** смислене поруке о грешци у JSON формату
- **Користи** одговарајуће HTTP статус кодове (400 за лоше захтеве)
- **Омогућава** јасну повратну информацију која помаже фронтенд развојним инжењерима да отклоне проблеме
## Подешавање и покретање вашег бекаенда
Сада када имамо интеграцију са АИ и FastAPI сервер, хајдемо да све покренемо. Поступак подразумева инсталацију Python зависности, конфигурацију променљивих окружења и стартовање развојног сервера.
### Подешавање Python окружења
Подесимо ваше Python развојно окружење. Виртуелна окружења су као Манхатнски пројекат – сваки пројекат има свој изоловани простор са одређеним алатима и зависностима, спречавајући конфликте између различитих пројеката.
```bash
# Идите у ваш backend директоријум
cd backend
# Креирајте виртуелно окружење (као да правите чисту собу за ваш пројекат)
python -m venv venv
# Активирајте га (Linux/Mac)
source ./venv/bin/activate
# На Windows-у користите:
# venv\Scripts\activate
# Инсталирајте добар материјал
pip install openai fastapi uvicorn python-dotenv
```
**Шта смо управо урадили:**
- **Креирали** своју малу Python bubble где можемо инсталирати пакете без утицаја на друге пројекте
- **Активирали** је да наш терминал зна да користи ово специфично окружење
- **Инсталирали** есенцијалне пакете: OpenAI за АИ магију, FastAPI за наш веб API, Uvicorn да га стварно покренемо и python-dotenv за сигурно управљање тајнама
**Кључне зависности објашњене:**
- **FastAPI**: Модеран, брз веб фрејмворк са аутоматском документацијом API-ја
- **Uvicorn**: Врло брз ASGI сервер који покреће FastAPI апликације
- **OpenAI**: Званична библиотека за GitHub моделе и OpenAI API интеграцију
- **python-dotenv**: Сигурно учитавање променљивих окружења из .env фајлова
### Конфигурација окружења: Чување тајни
Пре него што стартујемо API, морамо да причамо о једној од најважнијих лекција у веб развоју: како да ваши тајни подаци остану заиста тајни. Променљиве окружења су као сигурни сеф којем само ваша апликација може приступити.
#### Шта су променљиве окружења?
**Замислите променљиве окружења као сигурносни депозитни сандучић** – у њега стављате вредне ствари, а само ви (и ваша апликација) имате кључ да их извучете. Уместо да осетљиве информације пишете директно у код (где их буквално свако може видети), чувате их безбедно у окружењу.
**Ево разлике:**
- **Погрешан начин**: Писати лозинку на лепљивој белешци и залепити је на монитор
- **Правилан начин**: Чувати лозинку у сигурном менаџеру лозинки коме само ви имате приступ
#### Зашто су променљиве окружења важне
```python
# 🚨 НИКАД НЕ РАДИТЕ ОВО - API кључ видљив свима
client = OpenAI(
api_key="ghp_1234567890abcdef...", # Свако може да украде ово!
base_url="https://models.github.ai/inference"
)
# ✅ РАДИТЕ ОВО - API кључ безбедно сачуван
client = OpenAI(
api_key=os.environ["GITHUB_TOKEN"], # Само ваша апликација може да му приступи
base_url="https://models.github.ai/inference"
)
```
**Шта се дешава ако закодираш тајне:**
1. **Излагање у контролу верзија**: Свако ко има приступ вашем Git репозиторијуму види ваш API кључ
2. **Јавни репозиторијуми**: Ако упуштате на GitHub, ваш кључ је видљив целом интернету
3. **Тимска сарадња**: Други програмери на пројекту добијају приступ вашем личном API кључу
4. **Безбедносни пропусти**: Ако неко украде ваш API кључ, може користити ваше АИ кредите
#### Креирање вашег фајла окружења
Направите `.env` фајл у вашем бекаенд директоријуму. У њему чувате своје тајне локално:
```bash
# .env фајл - Ово никада НЕ сме бити упућено у Git
GITHUB_TOKEN=your_github_personal_access_token_here
FASTAPI_DEBUG=True
ENVIRONMENT=development
```
**Разумевање .env фајла:**
- **Једна тајна по реду** у формату `КЉУЧ=вредност`
- **Без размака** око знака једнако
- **Без навода** око вредности (обично)
- **Коментари** почињу са `#`
#### Креирање личног приступног токена за GitHub
Ваш GitHub токен је као посебна лозинка која вашој апликацији даје дозволу да користи GitHub АИ сервисе:
**Корак-по-корaк креирање токена:**
1. **Идите у GitHub Settings** → Developer settings → Personal access tokens → Tokens (classic)
2. **Кликните "Generate new token (classic)"**
3. **Поставите истек** (30 дана за тестирање, дуже за продукцију)
4. **Означите опсеге**: Проверите "repo" и друге дозволе које вам требају
5. **Генеришите токен** и копирајте одмах (неће бити поново видљив!)
6. **Налепите у ваш .env фајл**
```bash
# Пример како ваш токен изгледа (ово је лажно!)
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R
```
#### Учитавање променљивих окружења у Python
```python
import os
from dotenv import load_dotenv
# Учитајте променљиве окружења из .env фајла
load_dotenv()
# Сада им можете приступити безбедно
api_key = os.environ.get("GITHUB_TOKEN")
if not api_key:
raise ValueError("GITHUB_TOKEN not found in environment variables!")
client = OpenAI(
api_key=api_key,
base_url="https://models.github.ai/inference"
)
```
**Шта овај код ради:**
- **Учитава** ваш .env фајл и чини променљиве доступним за Python
- **Проверава** да ли тражени токен постоји (добра обрада грешака!)
- **Мења грешку ако је токен одсутан** јасном поруком
- **Користи** токен сигурно без излагања у коду
#### Безбедност Git-а: .gitignore фајл
Ваш `.gitignore` фајл говори Git-у које фајлове никада не треба пратити или отпремати:
```bash
# .gitignore - Додајте ове редове
.env
*.env
.env.local
.env.production
__pycache__/
venv/
.vscode/
```
**Зашто је ово кључно**: Једном када додате `.env` у `.gitignore`, Git ће игнорисати ваш фајл окружења, спречавајући вас да случајно отпремите тајне на GitHub.
#### Различита окружења, различите тајне
Професионалне апликације користе различите API кључеве за различита окружења:
```bash
# .env.развој
GITHUB_TOKEN=your_development_token
DEBUG=True
# .env.производња
GITHUB_TOKEN=your_production_token
DEBUG=False
```
**Зашто је ово важно**: Не желите да ваш развојни тест утиче на вашу продукцијску квоту за АИ употребу, и желите различите нивое безбедности за свако окружење.
### Покретање вашег развојног сервера: Да оживимо ваш FastAPI
Сада долази узбудљив моменат – покретање вашег FastAPI развојног сервера и гледање како ваша AI интеграција оживљава! FastAPI користи Uvicorn, врло брз ASGI сервер који је посебно дизајниран за асинхроне Python апликације.
#### Разумевање процеса покретања FastAPI сервера
```bash
# Метод 1: Директно извршавање Питона (укључује аутоматско поновно учитавање)
python api.py
# Метод 2: Коришћење Увикорна директно (више контроле)
uvicorn api:app --host 0.0.0.0 --port 5000 --reload
```
Када покренете ову команду, ево шта се дешава иза сцене:
**1. Python учитава вашу FastAPI апликацију**:
- Импортовање свих неопходних библиотека (FastAPI, Pydantic, OpenAI, итд.)
- Учитавање окружења из вашег `.env` фајла
- Креирање FastAPI инстанце апликације са аутоматском документацијом
**2. Uvicorn конфигурише ASGI сервер**:
- Веза на порт 5000 са асинхроним руковањем захтевима
- Постављање рутирања захтева са аутоматском валидацијом
- Омогућавање хот релоада за развој (рестартовање при променама фајлова)
- Генерисање интерактивне API документације
**3. Сервер почиње са слушањем**:
- Ваш терминал приказује: `INFO: Uvicorn running on http://0.0.0.0:5000`
- Сервер може истовремено да обрађује више AI захтева
- Ваша API је спремна са аутоматском документацијом на `http://localhost:5000/docs`
#### Шта бисте требали видети када све ради
```bash
$ python api.py
INFO: Will watch for changes in these directories: ['/your/project/path']
INFO: Uvicorn running on http://0.0.0.0:5000 (Press CTRL+C to quit)
INFO: Started reloader process [12345] using WatchFiles
INFO: Started server process [12346]
INFO: Waiting for application startup.
INFO: Application startup complete.
```
**Разумевање FastAPI излаза:**
- **Will watch for changes**: Омогућен аутоматски релоад за развој
- **Uvicorn running**: Активан високо перформансни ASGI сервер
- **Started reloader process**: Посматрач датотека за аутоматске рестартове
- **Application startup complete**: FastAPI апликација успешно иницијализована
- **Interactive docs available**: Посетите `/docs` за аутоматску API документацију
#### Тестирање вашег FastAPI: Више моћних приступа
FastAPI нуди неколико згодних начина за тестирање вашег API, укључујући аутоматску интерактивну документацију:
**Метод 1: Интерактивна API документација (препоручено)**
1. Отворите прегледач и идите на `http://localhost:5000/docs`
2. Видећете Swagger UI са свим вашим документованим крајњим тачкама
3. Кликните на `/hello` → "Try it out" → Унесите поруку за тестирање → "Execute"
4. Погледајте одговор директно у прегледачу са правилним форматирањем
**Метод 2: Основни тест у прегледачу**
1. Идите на `http://localhost:5000` за коренску крајњу тачку
2. Идите на `http://localhost:5000/health` да проверите здравље сервера
3. Ово потврђује да ваш FastAPI сервер ради исправно
**Метод 2: Тест преко командне линије (напредно)**
```bash
# Тест са curl (ако је доступан)
curl -X POST http://localhost:5000/hello \
-H "Content-Type: application/json" \
-d '{"message": "Hello AI!"}'
# Очекивани одговор:
# {"response": "Ћао! Ја сам ваш AI асистент. Како могу да вам помогнем данас?"}
```
**Метод 3: Python тест скрипта**
```python
# test_api.py - Креирајте овај фајл да бисте тестирали свој API
import requests
import json
# Тестирајте API крајњу тачку
url = "http://localhost:5000/hello"
data = {"message": "Tell me a joke about programming"}
response = requests.post(url, json=data)
if response.status_code == 200:
result = response.json()
print("AI Response:", result['response'])
else:
print("Error:", response.status_code, response.text)
```
#### Решавање уобичајених проблема при покретању
| Порука о грешци | Шта значи | Како решити |
|----------------|-----------|-------------|
| `ModuleNotFoundError: No module named 'fastapi'` | FastAPI није инсталиран | Покрените `pip install fastapi uvicorn` у вашем виртуелном окружењу |
| `ModuleNotFoundError: No module named 'uvicorn'` | ASGI сервер није инсталиран | Покрените `pip install uvicorn` у вашем виртуелном окружењу |
| `KeyError: 'GITHUB_TOKEN'` | Варијабла окружења није пронађена | Проверите ваш `.env` фајл и позив `load_dotenv()` |
| `Address already in use` | Порт 5000 је заузет | Убијте друге процесе који користе порт 5000 или промените порт |
| `ValidationError` | Податак захтева не одговара Pydantic моделу | Проверите да формат захтева одговара очекиваној шеми |
| `HTTPException 422` | Необрадиви ентитет | Валидација захтева није успела, проверите `/docs` за правилан формат |
| `OpenAI API error` | Аутентикација AI сервиса није успела | Потврдите да је ваш GitHub токен исправан и има потребне дозволе |
#### Најбоље праксе за развој
**Хот релоадинг**: FastAPI са Uvicorn-ом омогућава аутоматско релоадовање када сачувате промене у Python фајловима. То значи да можете одмах модификовати код и тестирати без ручног рестартовања.
```python
# Јасно омогући хитно поновно учитавање
if __name__ == "__main__":
app.run(host="0.0.0.0", port=5000, debug=True) # debug=True омогућава хитно поновно учитавање
```
**Логовање за развој**: Додајте логовање да бисте разумели шта се дешава:
```python
import logging
# Подеси евидентирање
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)
@app.route("/hello", methods=["POST"])
def hello():
data = request.get_json()
message = data.get("message", "")
logger.info(f"Received message: {message}")
if not message:
logger.warning("Empty message received")
return jsonify({"error": "Message field is required"}), 400
try:
response = call_llm(message, "You are a helpful and friendly assistant.")
logger.info(f"AI response generated successfully")
return jsonify({"response": response})
except Exception as e:
logger.error(f"AI API error: {str(e)}")
return jsonify({"error": "AI service temporarily unavailable"}), 500
```
**Зашто логовање помаже**: Током развоја можете видети тачно које захтеве сервер прима, како AI одговара и где се јављају грешке. Ово убрзава отклањање грешака.
### Конфигурисање за GitHub Codespaces: Развој у облаку постаје једноставан
GitHub Codespaces је као да имате моћан развојни рачунар у облаку коме можете приступити из било ког прегледача. Ако радите у Codespaces окружењу, постоји неколико додатних корака да бисте ваш backend учинили доступним за frontend.
#### Разумевање мрежне конфигурације Codespaces
У локалном развојном окружењу, све ради на истом рачунару:
- Backend: `http://localhost:5000`
- Frontend: `http://localhost:3000` (или file://)
У Codespaces-у, ваше развојно окружење ради на GitHub серверима, тако да "localhost" има друго значење. GitHub аутоматски креира јавне URL адресе за ваше сервиса, али морате их правилно подесити.
#### Корак по корак конфигурација Codespaces
**1. Покрените ваш backend сервер**:
```bash
cd backend
python api.py
```
Видећете познату поруку о покретању FastAPI/Uvicorn, али приметићете да ради унутар Codespace окружења.
**2. Конфигуришите видљивост порта**:
- Потражите таб "Ports" у доњем панелу VS Code-а
- Пронађите порт 5000 на листи
- Кликните десним тастером на порт 5000
- Изаберите "Port Visibility" → "Public"
**Зашто га учинити јавним?** По дефаулту, порти у Codespace-у су приватни (доступни само вама). Јавно постављање омогућава вашем frontend-у (који ради у прегледачу) да комуницира са backend-ом.
**3. Унесите вашу јавну URL адресу**:
Након постављања порта као јавног, видећете URL као што је:
```
https://your-codespace-name-5000.app.github.dev
```
**4. Ажурирајте конфигурацију frontend-а**:
```javascript
// У вашем frontend app.js, ажурирајте BASE_URL:
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";
```
#### Разумевање Codespace URL адреса
Codespace URL-и прате предвидив образац:
```
https://[codespace-name]-[port].app.github.dev
```
**Објашњење:**
- `codespace-name`: Јединствени идентификатор вашег Codespace-а (обично укључује ваше корисничко име)
- `port`: Број порта на коме ради ваша услуга (5000 за нашу FastAPI апликацију)
- `app.github.dev`: GitHub домен за Codespace апликације
#### Тестирање свог Codespace окружења
**1. Тестирајте backend директно**:
Отворите вашу јавну URL адресу у новом картици прегледача. Требало би да видите:
```
Welcome to the AI Chat API. Send POST requests to /hello with JSON payload containing 'message' field.
```
**2. Тестирајте помоћу алата за развој у прегледачу**:
```javascript
// Отворите конзолу прегледача и тестирате свој API
fetch('https://your-codespace-name-5000.app.github.dev/hello', {
method: 'POST',
headers: {'Content-Type': 'application/json'},
body: JSON.stringify({message: 'Hello from Codespaces!'})
})
.then(response => response.json())
.then(data => console.log(data));
```
#### Codespaces у односу на локални развој
| Аспект | Локални развој | GitHub Codespaces |
|--------|----------------|-------------------|
| **Време постављања** | Дуже (инсталација Python-а, зависности) | Одмах (предконфигурисано окружење) |
| **Приступ URL-у** | `http://localhost:5000` | `https://xyz-5000.app.github.dev` |
| **Конфигурација порта** | Аутоматска | Ручна (поставити порт као јаван) |
| **Чување фајлова** | Локална машина | GitHub репозиторијум |
| **Сарадња** | Тешко дељење окружења | Лако дељење Codespace линка |
| **Зависност од интернета** | Само за AI API позиве | Потребан за све |
#### Савети за развој у Codespace-у
**Варијабле окружења у Codespaces**:
Ваш `.env` фајл ради исто као и у Codespaces, али можете подесити и варијабле окружења директно у Codespace окружењу:
```bash
# Поставите променљиву окружења за тренутну сесију
export GITHUB_TOKEN="your_token_here"
# Или додајте у свој .bashrc за трајност
echo 'export GITHUB_TOKEN="your_token_here"' >> ~/.bashrc
```
**Управљање портовима**:
- Codespaces аутоматски детектује када ваша апликација почне да слуша на порту
- Можете проследити више портова истовремено (корисно ако касније додате базу података)
- Портови остају доступни док је ваш Codespace укључен
**Развојни ток рада**:
1. Правите измене у коду у VS Code-у
2. FastAPI аутоматски релоадује (захваљујући Uvicorn reload режиму)
3. Одмах тестирате промене преко јавне URL адресе
4. Комуитујете и пушујете када сте спремни
> 💡 **Паметни савет**: Залепите фаворит вашој Codespace бекенд URL адреси током развоја. Пошто су имена Codespace-а стабилна, URL неће да се мења док користите исти Codespace.
## Креирање Frontend Chat Интерфејса: Где се људи срећу са AI-јем
Сада ћемо изградити кориснички интерфејс – део који одређује како људи комуницирају са вашим AI асистентом. Као дизајн оригиналног интерфејса iPhone-а, фокусирамо се на то да сложена технологија буде интуитивна и природна за коришћење.
### Разумевање модерне frontend архитектуре
Наш chat интерфејс ће бити оно што зовемо "Single Page Application" или SPA. Уместо старог приступа где сваки клик учитава нову страницу, наша апликација се ажурира глатко и одмах:
**Старе веб странице**: Као читање праве књиге – прелиставате потпуно нове странице
**Наша chat апликација**: Као коришћење телефона – све тече и ажурира се без прекида
```mermaid
graph TD
A[Корисник уноси поруку] --> B[JavaScript хвата унос]
B --> C[Валидирај и форматирај податке]
C --> D[Пошаљи на бекенд API]
D --> E[Прикажи стање учитавања]
E --> F[Прими AI одговор]
F --> G[Ажурирај интерфејс ћаскања]
G --> H[Спремно за следећу поруку]
```
```mermaid
classDiagram
class ChatApp {
+messages: HTMLElement
+form: HTMLElement
+input: HTMLElement
+sendButton: HTMLElement
+BASE_URL: string
+API_ENDPOINT: string
+constructor()
+initializeEventListeners()
+handleSubmit(event)
+callAPI(message)
+appendMessage(text, role)
+escapeHtml(text)
+scrollToBottom()
+setLoading(isLoading)
}
ChatApp --> DOM : манипулише
ChatApp --> FastAPI : шаље захтеве
```
### Три стуба Frontend развоја
Свака frontend апликација – од једноставних веб сајтова до сложених апликација као Discord или Slack – заснива се на три основне технологије. Можете их посматрати као темељ свега што видите и са чиме интерагујете на вебу:
**HTML (Структура)**: Ово је ваша основа
- Одређује који елементи постоје (дугмад, текстуална поља, контејнери)
- Даје значење садржају (ово је заглавље, ово је формулар, итд.)
- Креира основну структуру на коју се гради све остало
**CSS (Презентација)**: Ово вам је унутрашњи дизајнер
- Чини све лепим (боје, фонтови, распореди)
- Прилагођава се различитим величинама екрана (телефон, лаптоп, таблета)
- Креира глатке анимације и визуелан повратни сигнал
**JavaScript (Понашање)**: Ово је ваш мозак
- Реагује на радње корисника (кликови, куцање, скроловање)
- Комуницира са backend-ом и ажурира страницу
- Чини све интерактивним и динамичним
**Замислите то као архитектонски дизајн:**
- **HTML**: Структурни план (дефинише просторе и однос елемената)
- **CSS**: Естетски и енвиронментални дизајн (визуелни стил и корисничко искуство)
- **JavaScript**: Механички системи (функционалност и интерактивност)
### Зашто је модерна JavaScript архитектура важна
Наша chat апликација ће користити модерне JavaScript шаблоне које ћете видети у професионалним апликацијама. Разумевање ових појмова помоћи ће вам да напредујете као програмер:
**Архитектура заснована на класама**: Организоваћемо код у класе, што је слично прављењу планова за објекте
**Async/Await**: Модеран начин руковања операцијама које трају (нпр. API позиви)
**Програмирање вођено догађајима**: Апликација реагује на корисничке акције (кликове, притисак тастера), а не ради стално у петљи
**DOM манипулација**: Динамичко ажурирање садржаја странице на основу интеракција и одговора из API-ја
### Постављање структуре пројекта
Креирајте frontend директоријум са овако организованом структуром:
```text
frontend/
├── index.html # Main HTML structure
├── app.js # JavaScript functionality
└── styles.css # Visual styling
```
**Разумевање архитектуре:**
- **Одваја** структуру (HTML), понашање (JavaScript) и презентацију (CSS)
- **Одржава** једноставну структуру фајлова која се лако навигује и мења
- **Прати** најбоље праксе у веб развоју за организованост и одрживост
### Изградња HTML темеља: Семантичка структура за приступачност
Хајде да почнемо са HTML структуром. Модерни веб развој наглашава "семантички HTML" – коришћење HTML елемената који јасно описују своју сврху, а не само изглед. Ово чини вашу апликацију приступачном за читаче екрана, претраживаче и друге алате.
**Зашто је семантички HTML важан**: Замислите да преко телефона објашњавате вашу chat апликацију. Рекли бисте "има заглавље са насловом, главни део где се одвијају разговори, и формулар на дну за куцање порука." Семантички HTML користи елементе који одговарају овом природном опису.
Креирајте `index.html` са овако промишљеном структуром:
```html
AI Chat Assistant
AI Chat Assistant
Ask me anything!
```
**Разумевање сваког HTML елемента и његове сврхе:**
#### Структура документа
- **``**: Каже прегледачу да је ово модерни HTML5
- **``**: Одређује језик странице за читаче екрана и алате за превод
- **``**: Обезбеђује правилно кодирање знакова за међународни текст
- **``**: Чини страницу одзивном за мобилне уређаје контролом зумирања и скалирања
#### Семантички елементи
- **``**: Јасно идентификује горњи део са насловом и описом
- **``**: Означава главни садржај (место где се одвијају разговори)
- **`