119 KiB

Raw Blame History Unescape Escape

Создание чат-ассистента с ИИ

Помните, как в «Звездном пути» команда корабля могла просто поговорить с компьютером, задавая сложные вопросы и получая вдумчивые ответы? То, что казалось чистой научной фантастикой в 1960-х, теперь можно создать с помощью веб-технологий, которые вы уже знаете.

В этом уроке мы создадим чат-ассистента с искусственным интеллектом, используя HTML, CSS, JavaScript и немного серверной интеграции. Вы узнаете, как навыки, которые вы уже изучаете, могут быть использованы для подключения к мощным ИИ-сервисам, способным понимать контекст и генерировать осмысленные ответы.

Представьте ИИ как доступ к огромной библиотеке, которая не только находит информацию, но и синтезирует её в связные ответы, адаптированные к вашим конкретным вопросам. Вместо того чтобы искать среди тысяч страниц, вы получаете прямые, контекстуальные ответы.

Интеграция осуществляется через знакомые веб-технологии, работающие вместе. HTML создаёт интерфейс чата, CSS отвечает за визуальный дизайн, JavaScript управляет взаимодействием с пользователем, а серверный API связывает всё это с ИИ-сервисами. Это похоже на то, как разные секции оркестра работают вместе, чтобы создать симфонию.

Мы фактически строим мост между естественным человеческим общением и машинной обработкой. Вы изучите как техническую реализацию интеграции ИИ-сервиса, так и шаблоны дизайна, которые делают взаимодействие интуитивным.

К концу этого урока интеграция ИИ будет казаться не загадочным процессом, а ещё одним API, с которым вы можете работать. Вы поймёте основные принципы, которые лежат в основе приложений, таких как ChatGPT и Claude, используя те же принципы веб-разработки, которые вы уже изучаете.

Вот как будет выглядеть ваш готовый проект:

Понимание ИИ: от загадки к мастерству

Прежде чем погрузиться в код, давайте разберёмся, с чем мы работаем. Если вы уже использовали API, то знаете базовый принцип: отправить запрос, получить ответ.

API ИИ работают по схожей структуре, но вместо того, чтобы извлекать заранее сохранённые данные из базы данных, они генерируют новые ответы на основе шаблонов, изученных из огромного объёма текста. Это похоже на разницу между системой каталогизации библиотеки и знающим библиотекарем, который может синтезировать информацию из множества источников.

Что такое «генеративный ИИ» на самом деле?

Вспомните, как Розеттский камень позволил учёным понять египетские иероглифы, находя закономерности между известными и неизвестными языками. Модели ИИ работают аналогично — они находят закономерности в огромных объёмах текста, чтобы понять, как работает язык, а затем используют эти закономерности для генерации подходящих ответов на новые вопросы.

Давайте разберём это на простом сравнении:

Традиционная база данных: Как запросить свидетельство о рождении — вы каждый раз получаете один и тот же документ.
Поисковая система: Как попросить библиотекаря найти книги о кошках — он покажет вам, что доступно.
Генеративный ИИ: Как спросить знающего друга о кошках — он расскажет вам интересные вещи своими словами, адаптируясь к вашим запросам.

graph LR
    A[Your Question] --> B[AI Model]
    B --> C[Pattern Recognition]
    C --> D[Content Generation]
    D --> E[Contextual Response]
    
    F[Training Data<br/>Books, Articles, Web] --> B

Как обучаются модели ИИ (упрощённая версия)

Модели ИИ обучаются на огромных наборах данных, содержащих текст из книг, статей и разговоров. В процессе они выявляют закономерности в:

Структуре мыслей в письменной коммуникации
Словах, которые часто встречаются вместе
Типичном течении разговоров
Контекстуальных различиях между формальной и неформальной коммуникацией

Это похоже на то, как археологи расшифровывают древние языки: они анализируют тысячи примеров, чтобы понять грамматику, словарный запас и культурный контекст, в конечном итоге становясь способными интерпретировать новые тексты, используя изученные шаблоны.

Почему GitHub Models?

Мы используем GitHub Models по довольно практичной причине — это даёт нам доступ к корпоративному уровню ИИ без необходимости настраивать собственную инфраструктуру ИИ (а это, поверьте, вы не захотите делать прямо сейчас!). Это похоже на использование API погоды вместо попытки предсказать погоду самостоятельно, устанавливая метеостанции повсюду.

Это, по сути, «ИИ как услуга», и самое лучшее? Начать можно бесплатно, так что вы можете экспериментировать, не беспокоясь о больших расходах.

graph LR
    A[Frontend Chat UI] --> B[Your Backend API]
    B --> C[GitHub Models API]
    C --> D[AI Model Processing]
    D --> C
    C --> B
    B --> A

Мы будем использовать GitHub Models для нашей серверной интеграции, которая предоставляет доступ к профессиональным возможностям ИИ через удобный интерфейс для разработчиков. Песочница GitHub Models служит тестовой средой, где вы можете экспериментировать с различными моделями ИИ и понять их возможности перед внедрением в код.

Почему песочница так полезна:

Пробуйте различные модели ИИ, такие как GPT-4o-mini, Claude и другие (всё бесплатно!)
Тестируйте свои идеи и запросы перед написанием кода
Получайте готовые фрагменты кода на вашем любимом языке программирования
Настраивайте параметры, такие как уровень креативности и длина ответа, чтобы увидеть, как они влияют на результат

После того как вы немного поиграете, просто нажмите вкладку «Code» и выберите ваш язык программирования, чтобы получить код для реализации.

Настройка серверной интеграции на Python

Теперь давайте реализуем интеграцию ИИ с использованием Python. Python отлично подходит для приложений с ИИ благодаря простому синтаксису и мощным библиотекам. Мы начнём с кода из песочницы GitHub Models, а затем переработаем его в многоразовую функцию, готовую к использованию в продакшене.

Понимание базовой реализации

Когда вы возьмёте код на Python из песочницы, он будет выглядеть примерно так. Не переживайте, если сначала это покажется сложным — давайте разберём его по частям:

"""Run this model in Python

> pip install openai
"""
import os
from openai import OpenAI

# To authenticate with the model you will need to generate a personal access token (PAT) in your GitHub settings. 
# Create your PAT token by following instructions here: 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"],
)

```python
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 для взаимодействия с ИИ
Мы настраиваем клиент OpenAI, чтобы он подключался к серверам GitHub, а не напрямую к OpenAI
Мы аутентифицируемся с помощью специального токена GitHub (об этом чуть позже!)
Мы структурируем наш разговор с различными «ролями» — это как установка сцены для пьесы
Мы отправляем запрос к ИИ с некоторыми параметрами настройки
Мы извлекаем текст ответа из всех полученных данных

Понимание ролей сообщений: структура разговора с ИИ

Разговоры с ИИ используют определённую структуру с различными «ролями», которые выполняют разные функции:

messages=[
    {
        "role": "system",
        "content": "You are a helpful assistant who explains things simply."
    },
    {
        "role": "user", 
        "content": "What is machine learning?"
    }
]

Представьте, что вы режиссируете пьесу:

Роль системы: Как сценические указания для актёра — она говорит ИИ, как себя вести, какой иметь характер и как отвечать
Роль пользователя: Реальный вопрос или сообщение от человека, использующего ваше приложение
Роль ассистента: Ответ ИИ (вы его не отправляете, но он появляется в истории разговора)

Аналогия из реальной жизни: Представьте, что вы представляете друга кому-то на вечеринке:

Сообщение системы: «Это моя подруга Сара, она врач, которая отлично объясняет медицинские концепции простыми словами»
Сообщение пользователя: «Можете объяснить, как работают вакцины?»
Ответ ассистента: Сара отвечает как дружелюбный врач, а не как юрист или шеф-повар

Понимание параметров ИИ: настройка поведения ответов

Числовые параметры в вызовах API ИИ управляют тем, как модель генерирует ответы. Эти настройки позволяют вам адаптировать поведение ИИ для различных случаев использования:

Температура (0.0 до 2.0): Регулятор креативности

Что делает: Управляет тем, насколько креативными или предсказуемыми будут ответы ИИ.

Представьте, что это уровень импровизации джазового музыканта:

Температура = 0.1: Играет одну и ту же мелодию каждый раз (очень предсказуемо)
Температура = 0.7: Добавляет несколько интересных вариаций, оставаясь узнаваемым (сбалансированная креативность)
Температура = 1.5: Полная экспериментальная импровизация с неожиданными поворотами (очень непредсказуемо)

# Very predictable responses (good for factual questions)
response = client.chat.completions.create(
    messages=[{"role": "user", "content": "What is 2+2?"}],
    temperature=0.1  # Will almost always say "4"
)

# Creative responses (good for brainstorming)
response = client.chat.completions.create(
    messages=[{"role": "user", "content": "Write a creative story opening"}],
    temperature=1.2  # Will generate unique, unexpected stories
)

Максимальное количество токенов (1 до 4096+): Контроль длины ответа

Что делает: Устанавливает ограничение на длину ответа ИИ.

Представьте токены как примерно эквивалентные словам (примерно 1 токен = 0.75 слова на английском):

max_tokens=50: Коротко и ясно (как текстовое сообщение)
max_tokens=500: Пара абзацев
max_tokens=2000: Детальное объяснение с примерами

# Short, concise answers
response = client.chat.completions.create(
    messages=[{"role": "user", "content": "Explain JavaScript"}],
    max_tokens=100  # Forces a brief explanation
)

# Detailed, comprehensive answers  
response = client.chat.completions.create(
    messages=[{"role": "user", "content": "Explain JavaScript"}],
    max_tokens=1500  # Allows for detailed explanations with examples
)

Top_p (0.0 до 1.0): Параметр фокусировки

Что делает: Управляет тем, насколько ИИ сосредоточен на наиболее вероятных ответах.

Представьте, что у ИИ огромный словарный запас, ранжированный по вероятности каждого слова:

top_p=0.1: Учитывает только 10% наиболее вероятных слов (очень сосредоточен)
top_p=0.9: Учитывает 90% возможных слов (более креативно)
top_p=1.0: Учитывает всё (максимальное разнообразие)

Например: Если вы спросите «Небо обычно...»

Низкий top_p: Почти наверняка скажет «голубое»
Высокий top_p: Может сказать «голубое», «облачное», «обширное», «меняющееся», «красивое» и т. д.

Объединяем всё: комбинации параметров для различных случаев использования

# For factual, consistent answers (like a documentation bot)
factual_params = {
    "temperature": 0.2,
    "max_tokens": 300,
    "top_p": 0.3
}

# For creative writing assistance
creative_params = {
    "temperature": 1.1,
    "max_tokens": 1000,
    "top_p": 0.9
}

# For conversational, helpful responses (balanced)
conversational_params = {
    "temperature": 0.7,
    "max_tokens": 500,
    "top_p": 0.8
}

Почему эти параметры важны: Разные приложения требуют разных типов ответов. Бот службы поддержки должен быть последовательным и фактическим (низкая температура), а помощник для творческого письма — воображаемым и разнообразным (высокая температура). Понимание этих параметров даёт вам контроль над личностью и стилем ответа вашего ИИ.


**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 для лучшей документации кода
Возвращает только содержимое ответа, что делает его удобным для использования в нашем веб-API
Сохраняет те же параметры модели для последовательного поведения ИИ

Магия системных подсказок: программирование личности ИИ

Если параметры управляют тем, как ИИ думает, то системные подсказки управляют тем, кем ИИ себя считает. Это, честно говоря, одна из самых крутых частей работы с ИИ — вы фактически задаёте ИИ полную личность, уровень экспертизы и стиль общения.

Представьте системные подсказки как выбор актёров для разных ролей: Вместо одного универсального ассистента вы можете создать специализированных экспертов для различных ситуаций. Нужен терпеливый учитель? Творческий партнёр для мозгового штурма? Деловой советник без лишних слов? Просто измените системную подсказку!

Почему системные подсказки так мощны

Вот что удивительно: модели ИИ обучены на бесчисленных разговорах, где люди принимают разные роли и уровни экспертизы. Когда вы задаёте ИИ определённую роль, это как включение переключателя, активирующего все эти изученные шаблоны.

Это как методическая актёрская игра для ИИ: Скажите актёру «вы мудрый старый профессор» и посмотрите, как он автоматически изменит свою осанку, словарный запас и манеры. ИИ делает что-то удивительно похожее с языковыми шаблонами.

Создание эффективных системных подсказок: искусство и наука

Структура отличной системной подсказки:

Роль/идентичность: Кто такой ИИ?
Экспертиза: Что он знает?
Стиль общения: Как он говорит?
Конкретные инструкции: На чём он должен сосредоточиться?

# ❌ Vague system prompt
"You are helpful."

# ✅ Detailed, effective system prompt
"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."

Примеры системных подсказок с контекстом

Давайте посмотрим, как разные системные подсказки создают совершенно разные личности ИИ:

# Example 1: The Patient Teacher
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.
"""

# Example 2: The Creative Collaborator  
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.
"""

# Example 3: The Strategic Business Advisor
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.
"""

Демонстрация системных подсказок в действии

Давайте протестируем один и тот же вопрос с разными системными подсказками, чтобы увидеть драматические различия:

Вопрос: «Как мне организовать аутентификацию пользователей в моём веб-приложении?»

# With teacher prompt:
teacher_response = call_llm(
    "How do I handle user authentication in my web app?",
    teacher_prompt
)
# Typical response: "Great question! Let's break authentication down into simple steps. 
# Think of it like a nightclub bouncer checking IDs..."

# With business prompt:
business_response = call_llm(
    "How do I handle user authentication in my web app?", 
    business_prompt
)
# Typical response: "From a strategic perspective, authentication is crucial for user 
# trust and regulatory compliance. Let me outline a framework considering security, 
# user experience, and scalability..."

Расширенные техники системных подсказок

1. Установка контекста: Дайте ИИ фоновую информацию

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. Форматирование вывода: Укажите ИИ, как структурировать ответы

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. Установка ограничений: Определите, чего ИИ не должен делать

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 ИИ — вы создаёте индивидуальную личность ИИ, которая служит вашему конкретному случаю использования. Именно это делает современные приложения с ИИ персонализированными и полезными.

Создание веб-API с FastAPI: ваш высокопроизводительный центр связи с ИИ

Теперь давайте создадим серверную часть, которая соединяет ваш фронтенд с ИИ-сервисами. Мы будем использовать FastAPI — современный Python-фреймворк, который отлично подходит для создания API для приложений с ИИ.

FastAPI предлагает несколько преимуществ для такого типа проектов: встроенная поддержка асинхронности для обработки конкурентных запросов, автоматическая генерация документации API и отличная производительность. Ваш сервер FastAPI будет действовать как посредник, который принимает запросы от фронтенда, общается с ИИ-сервисами и возвращает отформатированные ответы.

Почему FastAPI для приложений с ИИ?

Вы можете задаться вопросом: «Разве я не могу просто вызывать ИИ напрямую из моего фронтенд JavaScript?» или «Почему FastAPI вместо Flask или Django?» Отличные вопросы! Вот почему FastAPI идеально подходит для нашего проекта:

Асинхронность по умолчанию: Может обрабатывать несколько запросов к ИИ одновременно, не зависая
Автоматическая документация: Перейдите на /docs и получите красивую, интерактивную страницу документации API бесплатно
Встроенная валидация: Обнаруживает ошибки до того, как они вызовут проблемы
Молниеносная скорость: Один из самых быстрых фреймворков на Python
Современный Python: Использует все последние и лучшие функции Python

Почему нам вообще нужен бэкенд:

Безопасность: Ваш API-ключ для ИИ — это как пароль. Если вы разместите его в JavaScript на фронтенде, любой, кто увидит исходный код вашего сайта, сможет украсть его и использовать ваши кредиты ИИ. Бэкенд защищает конфиденциальные данные.

Ограничение запросов и контроль: Бэкенд позволяет контролировать частоту запросов пользователей, реализовывать аутентификацию и добавлять логирование для отслеживания использования.

Обработка данных: Возможно, вы захотите сохранять разговоры, фильтровать неподходящий контент или комбинировать несколько сервисов ИИ. Логика для этого находится в бэкенде.

Архитектура напоминает модель клиент-сервер:

Фронтенд: Уровень пользовательского интерфейса для взаимодействия
Бэкенд API: Уровень обработки запросов и маршрутизации
Сервис ИИ: Внешние вычисления и генерация ответов
Переменные окружения: Безопасное хранение конфигурации и учетных данных

Понимание процесса запроса-ответа

Давайте проследим, что происходит, когда пользователь отправляет сообщение:

sequenceDiagram
    participant User as 👤 User
    participant Frontend as 🌐 Frontend
    participant API as 🔧 FastAPI Server
    participant AI as 🤖 AI Service
    
    User->>Frontend: Types "Hello AI!"
    Frontend->>API: POST /hello {"message": "Hello AI!"}
    Note over API: Validates request<br/>Adds system prompt
    API->>AI: Sends formatted request
    AI->>API: Returns AI response
    Note over API: Processes response<br/>Logs conversation
    API->>Frontend: {"response": "Hello! How can I help?"}
    Frontend->>User: Displays AI message

Понимание каждого шага:

Взаимодействие с пользователем: Пользователь вводит текст в интерфейсе чата
Обработка на фронтенде: JavaScript захватывает ввод и форматирует его в JSON
Валидация API: FastAPI автоматически проверяет запрос с помощью моделей Pydantic
Интеграция с ИИ: Бэкенд добавляет контекст (системный запрос) и вызывает сервис ИИ
Обработка ответа: API получает ответ от ИИ и может модифицировать его при необходимости
Отображение на фронтенде: JavaScript показывает ответ в интерфейсе чата

Понимание архитектуры API

sequenceDiagram
    participant Frontend
    participant FastAPI
    participant AI Function
    participant GitHub Models
    
    Frontend->>FastAPI: POST /hello {"message": "Hello AI!"}
    FastAPI->>AI Function: call_llm(message, system_prompt)
    AI Function->>GitHub Models: API request
    GitHub Models->>AI Function: AI response
    AI Function->>FastAPI: response text
    FastAPI->>Frontend: {"response": "Hello! How can I help?"}

Создание приложения FastAPI

Давайте создадим наш API шаг за шагом. Создайте файл api.py с следующим кодом FastAPI:

# api.py
from fastapi import FastAPI, HTTPException
from fastapi.middleware.cors import CORSMiddleware
from pydantic import BaseModel
from llm import call_llm
import logging

# Configure logging
logging.basicConfig(level=logging.INFO)
logger = logging.getLogger(__name__)

# Create FastAPI application
app = FastAPI(
    title="AI Chat API",
    description="A high-performance API for AI-powered chat applications",
    version="1.0.0"
)

# Configure CORS
app.add_middleware(
    CORSMiddleware,
    allow_origins=["*"],  # Configure appropriately for production
    allow_credentials=True,
    allow_methods=["*"],
    allow_headers=["*"],
)

# Pydantic models for request/response validation
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:
        # Extract and validate message
        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]}...")
        
        # Call AI service (note: call_llm should be made async for better performance)
        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 для автоматической валидации запросов/ответов и документации
Использует асинхронные конечные точки для повышения производительности при одновременных запросах
Реализует правильные коды статуса HTTP и обработку ошибок с помощью HTTPException
Включает структурированное логирование для мониторинга и отладки
Предоставляет конечную точку проверки состояния для мониторинга работы сервиса

Ключевые преимущества FastAPI по сравнению с традиционными фреймворками:

Автоматическая валидация: Модели Pydantic обеспечивают целостность данных до их обработки
Интерактивная документация: Перейдите на /docs для автоматически сгенерированной, тестируемой документации API
Безопасность типов: Подсказки типов Python предотвращают ошибки во время выполнения и улучшают качество кода
Поддержка асинхронности: Обработка нескольких запросов к ИИ одновременно без блокировки
Производительность: Значительно более быстрая обработка запросов для приложений в реальном времени

Понимание CORS: охранник безопасности веба

CORS (Cross-Origin Resource Sharing) — это как охранник в здании, который проверяет, разрешено ли посетителям входить. Давайте разберемся, почему это важно и как это влияет на ваше приложение.

Что такое CORS и зачем он нужен?

Проблема: Представьте, что любой сайт мог бы отправлять запросы на сайт вашего банка от вашего имени без вашего разрешения. Это был бы кошмар безопасности! Браузеры предотвращают это по умолчанию с помощью "Политики одного источника".

Политика одного источника: Браузеры разрешают веб-страницам отправлять запросы только на тот же домен, порт и протокол, с которого они были загружены.

Аналогия из реальной жизни: Это как охрана в жилом доме – только жители (один источник) могут получить доступ к зданию по умолчанию. Если вы хотите, чтобы друг (другой источник) посетил вас, нужно явно сообщить охране, что это разрешено.

CORS в вашей среде разработки

Во время разработки ваш фронтенд и бэкенд работают на разных портах:

Фронтенд: http://localhost:3000 (или file://, если открываете HTML напрямую)
Бэкенд: http://localhost:5000

Они считаются "разными источниками", даже если находятся на одном компьютере!

from fastapi.middleware.cors import CORSMiddleware

app = FastAPI(__name__)
CORS(app)   # This tells browsers: "It's okay for other origins to make requests to this API"

Что делает конфигурация CORS на практике:

Добавляет специальные HTTP-заголовки к ответам API, которые говорят браузерам: "этот запрос с другого источника разрешен"
Обрабатывает "предварительные" запросы (браузеры иногда проверяют разрешения перед отправкой фактического запроса)
Предотвращает ошибку "запрос заблокирован политикой CORS" в консоли вашего браузера

Безопасность CORS: разработка vs производство

# 🚨 Development: Allows ALL origins (convenient but insecure)
CORS(app)

# ✅ Production: Only allow your specific frontend domain
CORS(app, origins=["https://yourdomain.com", "https://www.yourdomain.com"])

# 🔒 Advanced: Different origins for different environments
if app.debug:  # Development mode
    CORS(app, origins=["http://localhost:3000", "http://127.0.0.1:3000"])
else:  # Production mode
    CORS(app, origins=["https://yourdomain.com"])

Почему это важно: В разработке CORS(app) — это как оставить дверь открытой — удобно, но небезопасно. В производстве вы хотите точно указать, какие сайты могут взаимодействовать с вашим API.

Общие сценарии CORS и решения

Сценарий	Проблема	Решение
Локальная разработка	Фронтенд не может достичь бэкенда	Добавьте CORSMiddleware в FastAPI
GitHub Pages + Heroku	Развернутый фронтенд не может достичь API	Добавьте URL GitHub Pages в источники CORS
Собственный домен	Ошибки CORS в производстве	Обновите источники CORS, чтобы соответствовать вашему домену
Мобильное приложение	Приложение не может достичь веб-API	Добавьте домен вашего приложения или используйте `*` осторожно

Совет: Вы можете проверить заголовки CORS в инструментах разработчика вашего браузера на вкладке "Сеть". Ищите заголовки, такие как Access-Control-Allow-Origin в ответе.

Обработка ошибок и валидация

Обратите внимание, как наш API включает правильную обработку ошибок:

# Validate that we received a message
if not message:
    return jsonify({"error": "Message field is required"}), 400

Основные принципы валидации:

Проверяет обязательные поля перед обработкой запросов
Возвращает понятные сообщения об ошибках в формате JSON
Использует соответствующие коды статуса HTTP (400 для неверных запросов)
Предоставляет четкую обратную связь, чтобы помочь разработчикам фронтенда устранять проблемы

Настройка и запуск вашего бэкенда

Теперь, когда у нас есть интеграция с ИИ и сервер FastAPI, давайте запустим все. Процесс настройки включает установку зависимостей Python, конфигурацию переменных окружения и запуск сервера разработки.

Настройка среды Python

Давайте настроим вашу среду разработки Python. Виртуальные среды похожи на подход к проекту Манхэттен — каждый проект получает свое собственное изолированное пространство с определенными инструментами и зависимостями, предотвращая конфликты между проектами.

# Navigate to your backend directory
cd backend

# Create a virtual environment (like creating a clean room for your project)
python -m venv venv

# Activate it (Linux/Mac)
source ./venv/bin/activate

# On Windows, use:
# venv\Scripts\activate

# Install the good stuff
pip install openai fastapi uvicorn python-dotenv

Что мы только что сделали:

Создали собственное пространство Python, где можно устанавливать пакеты, не влияя на другие проекты
Активировали его, чтобы терминал знал, что использовать именно эту среду
Установили необходимые компоненты: OpenAI для магии ИИ, FastAPI для нашего веб-API, Uvicorn для его запуска и python-dotenv для безопасного управления секретами

Объяснение ключевых зависимостей:

FastAPI: Современный, быстрый веб-фреймворк с автоматической документацией API
Uvicorn: Молниеносный сервер ASGI, который запускает приложения FastAPI
OpenAI: Официальная библиотека для моделей GitHub и интеграции с API OpenAI
python-dotenv: Безопасная загрузка переменных окружения из файлов .env

Конфигурация окружения: защита секретов

Прежде чем запустить наш API, нужно поговорить об одном из самых важных уроков веб-разработки: как действительно защитить свои секреты. Переменные окружения — это как защищенный сейф, к которому может получить доступ только ваше приложение.

Что такое переменные окружения?

Представьте переменные окружения как сейф для хранения ценных вещей — вы кладете туда важные данные, и только вы (и ваше приложение) имеете ключ для их извлечения. Вместо того чтобы записывать конфиденциальную информацию прямо в код (где ее может увидеть кто угодно), вы храните ее безопасно в окружении.

Вот разница:

Неправильный способ: Записать пароль на стикере и приклеить его к монитору
Правильный способ: Хранить пароль в защищенном менеджере паролей, к которому имеете доступ только вы

Почему переменные окружения важны

# 🚨 NEVER DO THIS - API key visible to everyone
client = OpenAI(
    api_key="ghp_1234567890abcdef...",  # Anyone can steal this!
    base_url="https://models.github.ai/inference"
)

# ✅ DO THIS - API key stored securely
client = OpenAI(
    api_key=os.environ["GITHUB_TOKEN"],  # Only your app can access this
    base_url="https://models.github.ai/inference"
)

Что происходит, если вы жестко прописываете секреты:

Доступ через систему контроля версий: Любой, у кого есть доступ к вашему репозиторию, видит ваш API-ключ
Публичные репозитории: Если вы загружаете код на GitHub, ваш ключ становится видимым для всего интернета
Совместная работа в команде: Другие разработчики, работающие над вашим проектом, получают доступ к вашему личному API-ключу
Угрозы безопасности: Если кто-то украдет ваш API-ключ, он сможет использовать ваши кредиты ИИ

Настройка файла окружения

Создайте файл .env в каталоге вашего бэкенда. Этот файл локально хранит ваши секреты:

# .env file - This should NEVER be committed to Git
GITHUB_TOKEN=your_github_personal_access_token_here
FASTAPI_DEBUG=True
ENVIRONMENT=development

Понимание файла .env:

Один секрет на строку в формате KEY=value
Без пробелов вокруг знака равенства
Без кавычек вокруг значений (обычно)
Комментарии начинаются с #

Создание личного токена доступа GitHub

Ваш токен GitHub — это как специальный пароль, который дает вашему приложению разрешение использовать сервисы ИИ GitHub:

Пошаговое создание токена:

Перейдите в настройки GitHub → Настройки разработчика → Личные токены доступа → Токены (классические)
Нажмите "Создать новый токен (классический)"
Установите срок действия (30 дней для тестирования, дольше для производства)
Выберите области: Отметьте "repo" и любые другие необходимые разрешения
Создайте токен и сразу скопируйте его (вы не сможете увидеть его снова!)
Вставьте в ваш файл .env

# Example of what your token looks like (this is fake!)
GITHUB_TOKEN=ghp_1A2B3C4D5E6F7G8H9I0J1K2L3M4N5O6P7Q8R

Загрузка переменных окружения в Python

import os
from dotenv import load_dotenv

# Load environment variables from .env file
load_dotenv()

# Now you can access them securely
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, какие файлы никогда не отслеживать или загружать:

# .gitignore - Add these lines
.env
*.env
.env.local
.env.production
__pycache__/
venv/
.vscode/

Почему это важно: Как только вы добавите .env в .gitignore, Git будет игнорировать ваш файл окружения, предотвращая случайную загрузку ваших секретов на GitHub.

Разные окружения, разные секреты

Профессиональные приложения используют разные API-ключи для разных окружений:

# .env.development
GITHUB_TOKEN=your_development_token
DEBUG=True

# .env.production  
GITHUB_TOKEN=your_production_token
DEBUG=False

Почему это важно: Вы не хотите, чтобы ваши эксперименты в разработке влияли на ваш производственный лимит использования ИИ, и хотите разные уровни безопасности для разных окружений.

Запуск сервера разработки: оживляем ваш FastAPI

Теперь наступает захватывающий момент — запуск сервера разработки FastAPI и наблюдение за интеграцией ИИ! FastAPI использует Uvicorn, молниеносный сервер ASGI, специально разработанный для асинхронных приложений на Python.

Понимание процесса запуска сервера FastAPI

# Method 1: Direct Python execution (includes auto-reload)
python api.py

# Method 2: Using Uvicorn directly (more control)
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
Сервер может обрабатывать несколько одновременных запросов к ИИ
Ваш API готов с автоматической документацией по адресу http://localhost:5000/docs

Что вы должны увидеть, когда все работает

$ 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:

Будет следить за изменениями: Авто-перезагрузка включена для разработки
Uvicorn запущен: Высокопроизводительный сервер ASGI активен
Процесс перезагрузки запущен: Наблюдатель файлов для автоматических перезапусков
Запуск приложения завершен: Приложение FastAPI успешно инициализировано
Интерактивная документация доступна: Перейдите на /docs для автоматической документации API

Тестирование вашего FastAPI: несколько мощных подходов

FastAPI предоставляет несколько удобных способов тестирования вашего API, включая автоматическую интерактивную документацию:

Метод 1: Интерактивная документация API (рекомендуется)

Откройте браузер и перейдите на http://localhost:5000/docs
Вы увидите Swagger UI со всеми вашими документированными конечными точками
Нажмите на /hello → "Try it out" → Введите тестовое сообщение → "Execute"
Увидьте ответ прямо в браузере с правильным форматированием

Метод 2: Базовый тест в браузере

Перейдите на http://localhost:5000 для корневой конечной точки
Перейдите на http://localhost:5000/health, чтобы проверить состояние сервера
Это подтверждает, что ваш сервер FastAPI работает правильно

Метод 3: Тестирование через командную строку (продвинутый уровень)

# Test with curl (if available)
curl -X POST http://localhost:5000/hello \
  -H "Content-Type: application/json" \
  -d '{"message": "Hello AI!"}'

# Expected response:
# {"response": "Hello! I'm your AI assistant. How can I help you today?"}

Метод 4: Тестовый скрипт на Python

Устранение распространенных проблем при запуске

Сообщение об ошибке	Что оно означает	Как исправить
`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. Это позволяет сразу тестировать изменения без необходимости вручную перезапускать сервер.

Логирование для разработки: Добавьте логирование, чтобы понимать, что происходит:

Почему логирование полезно: Во время разработки вы можете видеть, какие запросы поступают, как отвечает AI и где возникают ошибки. Это значительно ускоряет процесс отладки.

Настройка для GitHub Codespaces: Удобная облачная разработка

GitHub Codespaces — это как мощный компьютер для разработки в облаке, доступный из любого браузера. Если вы работаете в Codespaces, есть несколько дополнительных шагов, чтобы сделать ваш бэкенд доступным для фронтенда.

Понимание сетевых особенностей Codespaces

В локальной среде разработки все работает на одном компьютере:

Бэкенд: http://localhost:5000
Фронтенд: http://localhost:3000 (или file://)

В Codespaces ваша среда разработки работает на серверах GitHub, поэтому "localhost" имеет другое значение. GitHub автоматически создает публичные URL для ваших сервисов, но их нужно правильно настроить.

Пошаговая настройка Codespaces

1. Запустите сервер бэкенда: Вы увидите знакомое сообщение о запуске FastAPI/Uvicorn, но обратите внимание, что оно работает внутри среды Codespaces.

2. Настройте видимость порта:

Найдите вкладку "Ports" в нижней панели VS Code
Найдите порт 5000 в списке
Щелкните правой кнопкой мыши на порт 5000
Выберите "Port Visibility" → "Public"

Почему нужно сделать порт публичным? По умолчанию порты в Codespaces являются приватными (доступны только вам). Сделав порт публичным, вы позволите вашему фронтенду (который работает в браузере) взаимодействовать с бэкендом.

3. Получите публичный URL: После того как порт станет публичным, вы увидите URL, например:

4. Обновите конфигурацию фронтенда:

Понимание URL Codespaces

URL Codespaces следуют предсказуемому шаблону:

Разбор структуры:

codespace-name: Уникальный идентификатор вашего Codespace (обычно включает ваше имя пользователя)
port: Номер порта, на котором работает ваш сервис (5000 для нашего приложения FastAPI)
app.github.dev: Домен GitHub для приложений Codespace

Тестирование настройки Codespaces

1. Протестируйте бэкенд напрямую: Откройте ваш публичный URL в новой вкладке браузера. Вы должны увидеть:

2. Тестирование с помощью инструментов разработчика браузера:

Codespaces vs Локальная разработка

Аспект	Локальная разработка	GitHub Codespaces
Время настройки	Дольше (установка Python, зависимостей)	Мгновенно (преднастроенная среда)
Доступ к URL	`http://localhost:5000`	`https://xyz-5000.app.github.dev`
Конфигурация порта	Автоматическая	Ручная (сделать порты публичными)
Сохранение файлов	Локальный компьютер	Репозиторий GitHub
Совместная работа	Сложно делиться средой	Легко делиться ссылкой на Codespace
Зависимость от интернета	Только для вызовов AI API	Требуется для всего

Советы по разработке в Codespaces

Переменные окружения в Codespaces: Ваш файл .env работает так же, как и в локальной среде, но вы также можете задавать переменные окружения прямо в Codespace.

Управление портами:

Codespaces автоматически обнаруживает, когда ваше приложение начинает слушать порт
Вы можете одновременно перенаправлять несколько портов (полезно, если позже добавите базу данных)
Порты остаются доступными, пока ваш Codespace работает

Рабочий процесс разработки:

Внесите изменения в код в VS Code
FastAPI автоматически перезагружается (благодаря режиму перезагрузки Uvicorn)
Тестируйте изменения сразу через публичный URL
Коммитите и отправляйте изменения, когда будете готовы

💡 Полезный совет: Сохраните закладку на URL вашего бэкенда в Codespace во время разработки. Поскольку имена Codespace стабильны, URL не изменится, пока вы используете тот же Codespace.

Создание интерфейса чата: где человек встречается с AI

Теперь мы создадим пользовательский интерфейс – ту часть, которая определяет, как люди взаимодействуют с вашим AI-ассистентом. Как дизайн интерфейса оригинального iPhone, мы сосредоточимся на том, чтобы сделать сложные технологии интуитивно понятными и удобными в использовании.

Понимание современной архитектуры фронтенда

Наш интерфейс чата будет представлять собой так называемое "Одностраничное приложение" (SPA). Вместо старомодного подхода, где каждый клик загружает новую страницу, наше приложение будет обновляться плавно и мгновенно:

Старые сайты: Как чтение физической книги – вы переворачиваете страницы Наше приложение чата: Как использование телефона – все плавно обновляется и работает без задержек

Три столпа фронтенд-разработки

Каждое фронтенд-приложение – от простых сайтов до сложных приложений, таких как Discord или Slack – строится на трех основных технологиях. Они являются основой всего, что вы видите и с чем взаимодействуете в интернете:

HTML (Структура): Это ваш фундамент

Определяет, какие элементы существуют (кнопки, текстовые поля, контейнеры)
Придает смысл содержимому (это заголовок, это форма и т.д.)
Создает базовую структуру, на которой все остальное строится

CSS (Презентация): Это ваш дизайнер интерьера

Делает все красивым (цвета, шрифты, макеты)
Учитывает разные размеры экрана (телефон, ноутбук, планшет)
Создает плавные анимации и визуальную обратную связь

JavaScript (Поведение): Это ваш мозг

Реагирует на действия пользователей (клики, ввод текста, прокрутка)
Общается с бэкендом и обновляет страницу
Делает все интерактивным и динамичным

Представьте это как архитектурный дизайн:

HTML: Структурный чертеж (определение пространств и связей)
CSS: Эстетический и дизайнерский аспект (визуальный стиль и пользовательский опыт)
JavaScript: Механические системы (функциональность и интерактивность)

Почему важна современная архитектура JavaScript

Наше приложение для чата будет использовать современные шаблоны JavaScript, которые вы встретите в профессиональных приложениях. Понимание этих концепций поможет вам развиваться как разработчику:

Архитектура на основе классов: Мы организуем наш код в классы, что похоже на создание чертежей для объектов
Async/Await: Современный способ обработки операций, которые занимают время (например, вызовы API)
Программирование, основанное на событиях: Наше приложение реагирует на действия пользователя (клики, нажатия клавиш), а не работает в цикле
Манипуляция DOM: Динамическое обновление содержимого веб-страницы на основе взаимодействий пользователя и ответов API

Настройка структуры проекта

Создайте директорию фронтенда с такой организованной структурой:

Понимание архитектуры:

Разделение обязанностей между структурой (HTML), поведением (JavaScript) и презентацией (CSS)
Поддержание простой структуры файлов, которая легко навигабельна и модифицируема
Следование лучшим практикам веб-разработки для организации и удобства поддержки

Создание HTML-основы: семантическая структура для доступности

Начнем с HTML-структуры. Современная веб-разработка подчеркивает важность "семантического HTML" – использования элементов, которые четко описывают свое назначение, а не только внешний вид. Это делает ваше приложение доступным для экранных читалок, поисковых систем и других инструментов.

Почему семантический HTML важен: Представьте, что вы описываете ваше приложение чата кому-то по телефону. Вы бы сказали: "Есть заголовок с названием, основная область, где появляются сообщения, и форма внизу для ввода сообщений". Семантический HTML использует элементы, которые соответствуют этому естественному описанию.

Создайте файл index.html с продуманной структурой разметки:

Понимание каждого HTML-элемента и его назначения:

Структура документа

<!DOCTYPE html>: Указывает браузеру, что это современный HTML5
<html lang="en">: Указывает язык страницы для экранных читалок и инструментов перевода
<meta charset="UTF-8">: Обеспечивает правильное кодирование символов для международного текста
<meta name="viewport"...>: Делает страницу адаптивной для мобильных устройств, контролируя масштабирование

Семантические элементы

<header>: Четко обозначает верхнюю часть с заголовком и описанием
<main>: Обозначает основную область контента (где происходят разговоры)
<form>: Семантически правильно для ввода данных пользователем, обеспечивает удобную навигацию с клавиатуры

Функции доступности

role="log": Указывает экранным читалкам, что эта область содержит хронологический журнал сообщений
aria-live="polite": Сообщает экранным читалкам о новых сообщениях без прерывания
aria-label: Предоставляет описательные метки для элементов управления формой
required: Браузер проверяет, что пользователь ввел сообщение перед отправкой

Интеграция CSS и JavaScript

Атрибуты class: Обеспечивают точки привязки для стилей CSS (например, chat-container, input-group)
Атрибуты id: Позволяют JavaScript находить и изменять конкретные элементы
Расположение скрипта: Файл JavaScript загружается в конце, чтобы сначала загрузился HTML

Почему эта структура работает:

Логический поток: Заголовок → Основной контент → Форма ввода соответствует естественному порядку чтения
Доступность с клавиатуры: Пользователи могут перемещаться между всеми интерактивными элементами
Удобство для экранных читалок: Четкие ориентиры и описания для слабовидящих пользователей
Адаптивность: Мета-тег viewport обеспечивает адаптивный дизайн
Прогрессивное улучшение: Работает даже если CSS или JavaScript не загрузились

Добавление интерактивного JavaScript: логика современного веб-приложения

Теперь создадим JavaScript, который оживит наш интерфейс чата. Мы будем использовать современные шаблоны JavaScript, включая классы ES6, async/await и программирование, основанное на событиях.

Понимание современной архитектуры JavaScript

Вместо написания процедурного кода (серии функций, которые выполняются по порядку), мы создадим архитектуру на основе классов. Класс можно представить как чертеж для создания объектов – как чертеж архитектора для строительства нескольких домов.

Почему использовать классы для веб-приложений?

Организация: Вся связанная функциональность сгруппирована вместе
Повторное использование: Вы можете создать несколько экземпляров чата на одной странице
Удобство поддержки: Легче отлаживать и модифицировать конкретные функции
Профессиональный стандарт: Этот шаблон используется в таких фреймворках, как React, Vue и Angular

Создайте файл app.js с современным, хорошо структурированным JavaScript:

Понимание каждого концепта JavaScript

Структура класса ES6:
Паттерн Async/Await:
Программирование, основанное на событиях:
Вместо постоянной проверки, произошло ли что-то, мы "слушаем" события:
Манипуляция DOM:

Безопасность и лучшие практики

Предотвращение XSS:
Почему это важно: Если пользователь введет <script>alert('hack')</script>, эта функция гарантирует, что это будет отображаться как текст, а не выполнится как код.

Обработка ошибок:
Учет пользовательского опыта:

Оптимистичный интерфейс: Добавляйте сообщение пользователя сразу, не дожидаясь ответа сервера
Состояния загрузки: Отключайте кнопки и показывайте "Отправка..." во время ожидания
Автопрокрутка: Держите последние сообщения видимыми
Валидация ввода: Не отправляйте пустые сообщения
Горячие клавиши: Клавиша Enter отправляет сообщения (как в реальных чатах)

Понимание потока приложения

Загрузка страницы → Срабатывает событие DOMContentLoaded → Создается объект new ChatApp()
Запуск конструктора → Получение ссылок на элементы DOM → Настройка слушателей событий
Пользователь вводит сообщение → Нажимает Enter или кнопку "Отправить" → Срабатывает handleSubmit
handleSubmit → Проверяет ввод → Показывает состояние загрузки → Вызывает API
Ответ API → Добавляет сообщение AI в чат → Включает интерфейс
Готово к следующему сообщению → Пользователь может продолжать общение
Эта архитектура масштабируема – вы легко можете добавить функции, такие как редактирование сообщений, загрузка файлов или несколько потоков беседы, без необходимости переписывать основную структуру.

Стилизация интерфейса чата

Теперь давайте создадим современный, визуально привлекательный интерфейс чата с помощью CSS. Хороший дизайн делает ваше приложение профессиональным и улучшает общий пользовательский опыт. Мы будем использовать современные функции CSS, такие как Flexbox, CSS Grid и пользовательские свойства для создания адаптивного и доступного дизайна.

Создайте файл styles.css с этими подробными стилями:

/* styles.css - Modern chat interface styling */

:root {
    --primary-color: #2563eb;
    --secondary-color: #f1f5f9;
    --user-color: #3b82f6;
    --assistant-color: #6b7280;
    --error-color: #ef4444;
    --text-primary: #1e293b;
    --text-secondary: #64748b;
    --border-radius: 12px;
    --shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
}

.chat-container {
    width: 100%;
    max-width: 800px;
    height: 600px;
    background: white;
    border-radius: var(--border-radius);
    box-shadow: var(--shadow);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.chat-header {
    background: var(--primary-color);
    color: white;
    padding: 20px;
    text-align: center;
}

.chat-header h1 {
    font-size: 1.5rem;
    margin-bottom: 5px;
}

.chat-header p {
    opacity: 0.9;
    font-size: 0.9rem;
}

.chat-messages {
    flex: 1;
    padding: 20px;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: 15px;
    background: var(--secondary-color);
}

.message {
    display: flex;
    max-width: 80%;
    animation: slideIn 0.3s ease-out;
}

.message.user {
    align-self: flex-end;
}

.message.user .message-content {
    background: var(--user-color);
    color: white;
    border-radius: var(--border-radius) var(--border-radius) 4px var(--border-radius);
}

.message.assistant {
    align-self: flex-start;
}

.message.assistant .message-content {
    background: white;
    color: var(--text-primary);
    border-radius: var(--border-radius) var(--border-radius) var(--border-radius) 4px;
    border: 1px solid #e2e8f0;
}

.message.error .message-content {
    background: var(--error-color);
    color: white;
    border-radius: var(--border-radius);
}

.message-content {
    padding: 12px 16px;
    box-shadow: var(--shadow);
    position: relative;
}

.message-text {
    display: block;
    line-height: 1.5;
    word-wrap: break-word;
}

.message-time {
    display: block;
    font-size: 0.75rem;
    opacity: 0.7;
    margin-top: 5px;
}

.chat-form {
    padding: 20px;
    border-top: 1px solid #e2e8f0;
    background: white;
}

.input-group {
    display: flex;
    gap: 10px;
    align-items: center;
}

#messageInput {
    flex: 1;
    padding: 12px 16px;
    border: 2px solid #e2e8f0;
    border-radius: var(--border-radius);
    font-size: 1rem;
    outline: none;
    transition: border-color 0.2s ease;
}

#messageInput:focus {
    border-color: var(--primary-color);
}

#messageInput:disabled {
    background: #f8fafc;
    opacity: 0.6;
    cursor: not-allowed;
}

#sendBtn {
    padding: 12px 24px;
    background: var(--primary-color);
    color: white;
    border: none;
    border-radius: var(--border-radius);
    font-size: 1rem;
    font-weight: 600;
    cursor: pointer;
    transition: background-color 0.2s ease;
    min-width: 80px;
}

#sendBtn:hover:not(:disabled) {
    background: #1d4ed8;
}

#sendBtn:disabled {
    background: #94a3b8;
    cursor: not-allowed;
}

@keyframes slideIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Responsive design for mobile devices */
@media (max-width: 768px) {
    body {
        padding: 10px;
    }
    
    .chat-container {
        height: calc(100vh - 20px);
        border-radius: 8px;
    }
    
    .message {
        max-width: 90%;
    }
    
    .input-group {
        flex-direction: column;
        gap: 10px;
    }
    
    #messageInput {
        width: 100%;
    }
    
    #sendBtn {
        width: 100%;
    }
}

/* Accessibility improvements */
@media (prefers-reduced-motion: reduce) {
    .message {
        animation: none;
    }
    
    * {
        transition: none !important;
    }
}

/* Dark mode support */
@media (prefers-color-scheme: dark) {
    .chat-container {
        background: #1e293b;
        color: #f1f5f9;
    }
    
    .chat-messages {
        background: #0f172a;
    }
    
    .message.assistant .message-content {
        background: #334155;
        color: #f1f5f9;
        border-color: #475569;
    }
    
    .chat-form {
        background: #1e293b;
        border-color: #475569;
    }
    
    #messageInput {
        background: #334155;
        color: #f1f5f9;
        border-color: #475569;
    }
}

Понимание архитектуры CSS:

Использует пользовательские свойства CSS (переменные) для обеспечения согласованности тем и упрощения обслуживания
Реализует макет на основе Flexbox для адаптивного дизайна и правильного выравнивания
Включает плавные анимации появления сообщений, которые не отвлекают
Обеспечивает визуальное различие между сообщениями пользователя, ответами ИИ и состояниями ошибок
Поддерживает адаптивный дизайн, который работает как на настольных компьютерах, так и на мобильных устройствах
Учитывает доступность, включая предпочтения по уменьшению движения и правильные коэффициенты контрастности
Предлагает поддержку темного режима в зависимости от системных настроек пользователя

Настройка URL вашего бэкенда

Последний шаг – обновление BASE_URL в вашем JavaScript, чтобы он соответствовал вашему серверу бэкенда:

// For local development
this.BASE_URL = "http://localhost:5000";

// For GitHub Codespaces (replace with your actual URL)
this.BASE_URL = "https://your-codespace-name-5000.app.github.dev";

Определение URL вашего бэкенда:

Локальная разработка: Используйте http://localhost:5000, если фронтенд и бэкенд работают локально
Codespaces: Найдите URL вашего бэкенда на вкладке Ports после того, как сделаете порт 5000 публичным
Продакшн: Замените на ваш реальный домен при развертывании на хостинговом сервисе

💡 Совет по тестированию: Вы можете протестировать ваш бэкенд напрямую, посетив корневой URL в браузере. Вы должны увидеть приветственное сообщение от вашего сервера FastAPI.

Тестирование и развертывание

Теперь, когда вы создали компоненты фронтенда и бэкенда, давайте проверим, как все работает вместе, и изучим варианты развертывания, чтобы поделиться вашим чат-ассистентом с другими.

Локальное тестирование

Следуйте этим шагам, чтобы протестировать ваше приложение:

graph TD
    A[Start Backend Server] --> B[Configure Environment Variables]
    B --> C[Test API Endpoints]
    C --> D[Open Frontend in Browser]
    D --> E[Test Chat Functionality]
    E --> F[Debug Any Issues]

Пошаговый процесс тестирования:

Запустите сервер бэкенда:

cd backend
source venv/bin/activate  # or venv\Scripts\activate on Windows
python api.py

Проверьте работу API:
- Откройте http://localhost:5000 в вашем браузере
- Вы должны увидеть приветственное сообщение от вашего сервера FastAPI
Откройте фронтенд:
- Перейдите в директорию вашего фронтенда
- Откройте index.html в вашем веб-браузере
- Или используйте расширение Live Server в VS Code для улучшения процесса разработки
Протестируйте функциональность чата:
- Введите сообщение в поле ввода
- Нажмите "Отправить" или клавишу Enter
- Убедитесь, что ИИ отвечает корректно
- Проверьте консоль браузера на наличие ошибок JavaScript

Устранение распространенных проблем

Проблема	Симптомы	Решение
Ошибка CORS	Фронтенд не может подключиться к бэкенду	Убедитесь, что FastAPI CORSMiddleware настроен правильно
Ошибка API-ключа	Ответы 401 Unauthorized	Проверьте переменную окружения `GITHUB_TOKEN`
Отказ в подключении	Ошибки сети во фронтенде	Убедитесь, что URL бэкенда и сервер Flask работают
Нет ответа от ИИ	Пустые или ошибочные ответы	Проверьте логи бэкенда на наличие проблем с квотой API или аутентификацией

Распространенные шаги по устранению неполадок:

Проверьте консоль инструментов разработчика браузера на наличие ошибок JavaScript
Убедитесь, что вкладка Network показывает успешные запросы и ответы API
Просмотрите вывод терминала бэкенда на наличие ошибок Python или проблем с API
Убедитесь, что переменные окружения загружены и доступны

Задача GitHub Copilot Agent 🚀

Используйте режим Agent, чтобы выполнить следующий вызов:

Описание: Улучшите чат-ассистента, добавив историю бесед и сохранение сообщений. Эта задача поможет вам понять, как управлять состоянием в чат-приложениях и реализовать хранение данных для улучшения пользовательского опыта.

Задание: Измените приложение чата, чтобы включить историю бесед, которая сохраняется между сессиями. Добавьте функциональность для сохранения сообщений чата в локальном хранилище, отображения истории бесед при загрузке страницы и добавьте кнопку "Очистить историю". Также реализуйте индикаторы ввода текста и временные метки сообщений, чтобы сделать чат более реалистичным.

Узнайте больше о режиме Agent здесь.

Задание: Создайте своего личного AI-ассистента

Теперь вы создадите свою собственную реализацию AI-ассистента. Вместо простого копирования кода из учебника, это возможность применить концепции, создавая что-то, что отражает ваши интересы и случаи использования.

Требования к проекту

Давайте настроим ваш проект с чистой, организованной структурой:

my-ai-assistant/
├── backend/
│   ├── api.py          # Your FastAPI server
│   ├── llm.py          # AI integration functions
│   ├── .env            # Your secrets (keep this safe!)
│   └── requirements.txt # Python dependencies
├── frontend/
│   ├── index.html      # Your chat interface
│   ├── app.js          # The JavaScript magic
│   └── styles.css      # Make it look amazing
└── README.md           # Tell the world about your creation

Основные задачи реализации

Разработка бэкенда:

Возьмите наш код FastAPI и адаптируйте его под себя
Создайте уникальную личность для вашего ИИ – возможно, это будет полезный помощник по кулинарии, творческий партнер по написанию текстов или учебный помощник?
Добавьте надежную обработку ошибок, чтобы ваше приложение не ломалось при сбоях
Напишите понятную документацию для тех, кто хочет понять, как работает ваш API

Разработка фронтенда:

Создайте интерфейс чата, который будет интуитивно понятным и приятным
Напишите чистый, современный JavaScript, которым вы будете гордиться
Разработайте индивидуальный стиль, отражающий личность вашего ИИ – веселый и яркий? Чистый и минималистичный? Решать вам!
Убедитесь, что он отлично работает как на телефонах, так и на компьютерах

Требования к персонализации:

Выберите уникальное имя и личность для вашего AI-ассистента – возможно, что-то, что отражает ваши интересы или проблемы, которые вы хотите решить
Настройте визуальный дизайн, чтобы он соответствовал стилю вашего ассистента
Напишите убедительное приветственное сообщение, которое побудит людей начать общение
Протестируйте вашего ассистента с различными типами вопросов, чтобы увидеть, как он отвечает

Идеи для улучшения (опционально)

Хотите вывести свой проект на новый уровень? Вот несколько интересных идей для изучения:

Функция	Описание	Навыки, которые вы освоите
История сообщений	Запоминание бесед даже после обновления страницы	Работа с localStorage, обработка JSON
Индикаторы ввода текста	Отображение "ИИ вводит..." во время ожидания ответа	Анимации CSS, асинхронное программирование
Временные метки сообщений	Отображение времени отправки каждого сообщения	Форматирование даты/времени, UX-дизайн
Экспорт чата	Возможность загрузки беседы пользователем	Работа с файлами, экспорт данных
Переключение тем	Переключение между светлым и темным режимами	Переменные CSS, пользовательские настройки
Голосовой ввод	Добавление функции преобразования речи в текст	Веб-API, доступность

Тестирование и документация

Обеспечение качества:

Протестируйте ваше приложение с различными типами ввода и крайними случаями
Убедитесь, что адаптивный дизайн работает на разных размерах экрана
Проверьте доступность с помощью навигации с клавиатуры и экранных читалок
Проверьте соответствие стандартам HTML и CSS

Требования к документации:

Напишите README.md, объясняющий ваш проект и как его запустить
Добавьте скриншоты работы вашего интерфейса чата
Документируйте любые уникальные функции или настройки, которые вы добавили
Предоставьте четкие инструкции по настройке для других разработчиков

Руководство по отправке

Результаты проекта:

Полная папка проекта со всем исходным кодом
README.md с описанием проекта и инструкциями по настройке
Скриншоты, демонстрирующие работу вашего чат-ассистента
Краткое размышление о том, что вы узнали и с какими трудностями столкнулись

Критерии оценки:

Функциональность: Работает ли чат-ассистент как ожидалось?
Качество кода: Организован ли код, прокомментирован и удобен ли для поддержки?
Дизайн: Привлекателен ли интерфейс и удобен ли он для пользователя?
Креативность: Насколько уникальна и персонализирована ваша реализация?
Документация: Являются ли инструкции по настройке четкими и полными?

💡 Совет для успеха: Сначала выполните основные требования, а затем добавляйте улучшения, когда все будет работать. Сосредоточьтесь на создании качественного основного опыта перед добавлением сложных функций.

Решение

Дополнительные задачи

Готовы вывести своего AI-ассистента на новый уровень? Попробуйте эти сложные задачи, которые углубят ваше понимание интеграции ИИ и веб-разработки.

Персонализация

Настоящая магия происходит, когда вы придаете своему AI-ассистенту уникальную личность. Экспериментируйте с различными системными подсказками, чтобы создать специализированных ассистентов:

Пример профессионального ассистента:

call_llm(message, "You are a professional business consultant with 20 years of experience. Provide structured, actionable advice with specific steps and considerations.")

Пример помощника для творческого письма:

call_llm(message, "You are an enthusiastic creative writing coach. Help users develop their storytelling skills with imaginative prompts and constructive feedback.")

Пример технического наставника:

call_llm(message, "You are a patient senior developer who explains complex programming concepts using simple analogies and practical examples.")

Улучшения фронтенда

Преобразите интерфейс чата с помощью этих визуальных и функциональных улучшений:

Расширенные функции CSS:

Реализуйте плавные анимации и переходы сообщений
Добавьте уникальные дизайны пузырьков чата с формами и градиентами CSS
Создайте анимацию индикатора ввода текста для момента, когда ИИ "думает"
Разработайте реакции на сообщения с помощью эмодзи или систему оценки сообщений

Улучшения JavaScript:

Добавьте горячие клавиши (Ctrl+Enter для отправки, Escape для очистки ввода)
Реализуйте функцию поиска и фильтрации сообщений
Создайте функцию экспорта беседы (загрузка в виде текста или JSON)
Добавьте автоматическое сохранение в localStorage, чтобы предотвратить потерю сообщений

Расширенная интеграция ИИ

Несколько личностей ИИ:

Создайте выпадающий список для переключения между различными личностями ИИ
Сохраните предпочтительную личность пользователя в localStorage
Реализуйте переключение контекста, которое сохраняет ход беседы

Функции умного ответа:

Добавьте осведомленность о контексте беседы (ИИ запоминает предыдущие сообщения)
Реализуйте умные предложения на основе темы беседы
Создайте кнопки быстрого ответа для часто задаваемых вопросов

🎯 Цель обучения: Эти дополнительные задачи помогут вам понять сложные шаблоны веб-разработки и техники интеграции ИИ, которые используются в производственных приложениях.

Итоги и следующие шаги

Поздравляем! Вы успешно создали полноценного чат-ассистента с поддержкой ИИ с нуля. Этот проект дал вам практический опыт работы с современными технологиями веб-разработки и интеграции ИИ – навыки, которые становятся все более ценными в сегодняшнем технологическом мире.

Что вы достигли

В ходе этого урока вы освоили несколько ключевых технологий и концепций:

Разработка бэкенда:

Интеграция с GitHub Models API для функциональности ИИ
Создание RESTful API с использованием Flask с надлежащей обработкой ошибок
Реализация безопасной аутентификации с использованием переменных окружения
Настройка CORS для кросс-доменных запросов между фронтендом и бэкендом

Разработка фронтенда:

Создание адаптивного интерфейса чата с использованием семантического HTML
Реализация современного JavaScript с async/await и архитектурой на основе классов
Дизайн привлекательного пользовательского интерфейса с CSS Grid, Flexbox и анимациями
Добавление функций доступности и принципов адаптивного дизайна

Интеграция фронтенда и бэкенда:

Соединение фронтенда и бэкенда через HTTP API запросы
Обработка взаимодействий с пользователем в реальном времени и асинхронного потока данных
Реализация обработки ошибок и обратной связи для пользователя во всем приложении
Тестирование полного рабочего процесса приложения от ввода пользователя до ответа ИИ

Основные результаты обучения

mindmap
  root((AI Chat App Skills))
    API Integration
      Authentication
      Error Handling
      Async Programming
    Web Development
      HTML5 Semantics
      Modern CSS
      ES6+ JavaScript
    User Experience
      Responsive Design
      Accessibility
      Real-time Interaction
    AI Understanding
      Prompt Engineering
      Model Parameters
      Conversation Flow

Этот проект познакомил вас с основами создания приложений с поддержкой ИИ, что является важным направлением в современной веб-разработке. Теперь вы понимаете, как интегрировать возможности ИИ в традиционные веб-приложения, создавая увлекательный пользовательский опыт, который кажется умным и отзывчивым.

Профессиональное применение

Навыки, которые вы развили в этом уроке, напрямую применимы в современных карьерах в области разработки программного обеспечения:

Веб-разработка полного цикла с использованием современных фреймворков и API
Интеграция ИИ в веб-приложения и мобильные приложения
Проектирование и разработка API для архитектур микросервисов
Разработка пользовательских интерфейсов с акцентом на доступность и адаптивный дизайн
Практики DevOps, включая настройку окружения и развертывание

Продолжение вашего пути в разработке ИИ

Следующие шаги в обучении:

Изучите более продвинутые модели ИИ и API (GPT-4, Claude, Gemini)
Узнайте о техниках проектирования подсказок для улучшения ответов ИИ
Изучите дизайн бесед и принципы пользовательского опыта чат-ботов
Исследуйте безопасность ИИ, этику и практики ответственной разработки ИИ
Создайте более сложные приложения с памятью беседы и осведомленностью о контексте

Идеи для сложных проектов:

Чат-комнаты для нескольких пользователей с модерацией ИИ
Чат-боты для обслуживания клиентов с поддержкой ИИ
Образовательные помощники для индивидуального обучения
Творческие помощники для написания текстов с различными личностями ИИ
Технические помощники для документации разработчиков

Начало работы с GitHub Codespaces

Хотите попробовать этот проект в облачной среде разработки? GitHub Codespaces предоставляет полную среду разработки в вашем браузере, идеально подходящую для экспериментов с приложениями на основе ИИ без необходимости локальной настройки.

Настройка вашей среды разработки

Шаг 1: Создание из шаблона

Перейдите в репозиторий Web Dev For Beginners
Нажмите "Use this template" в правом верхнем углу (убедитесь, что вы вошли в GitHub)

Шаг 2: Запуск Codespaces

Откройте ваш вновь созданный репозиторий
Нажмите зеленую кнопку "Code" и выберите "Codespaces"
Выберите "Create codespace on main", чтобы запустить вашу среду разработки

Шаг 3: Конфигурация среды После загрузки Codespace у вас будет доступ к:

Предустановленным Python, Node.js и всем необходимым инструментам разработки
Интерфейсу VS Code с расширениями для веб-разработки
Доступу к терминалу для запуска серверов бэкенда и
Проброс портов для тестирования ваших приложений

Что предоставляет Codespaces:

Устраняет проблемы настройки и конфигурации локальной среды
Обеспечивает единообразную среду разработки на разных устройствах
Включает предварительно настроенные инструменты и расширения для веб-разработки
Предлагает бесшовную интеграцию с GitHub для управления версиями и совместной работы

🚀 Полезный совет: Codespaces идеально подходит для изучения и прототипирования AI-приложений, так как автоматически справляется со сложной настройкой среды, позволяя вам сосредоточиться на разработке и обучении, а не на устранении проблем конфигурации.

Отказ от ответственности:
Этот документ был переведен с использованием сервиса автоматического перевода Co-op Translator. Несмотря на наши усилия обеспечить точность, автоматические переводы могут содержать ошибки или неточности. Оригинальный документ на его родном языке следует считать авторитетным источником. Для получения критически важной информации рекомендуется профессиональный перевод человеком. Мы не несем ответственности за любые недоразумения или неправильные интерпретации, возникающие в результате использования данного перевода.

119 KiB Raw Blame History Unescape Escape

Создание чат-ассистента с ИИ

Понимание ИИ: от загадки к мастерству

Что такое «генеративный ИИ» на самом деле?

Как обучаются модели ИИ (упрощённая версия)

Почему GitHub Models?

Настройка серверной интеграции на Python

Понимание базовой реализации

Понимание ролей сообщений: структура разговора с ИИ

Понимание параметров ИИ: настройка поведения ответов

Температура (0.0 до 2.0): Регулятор креативности

Максимальное количество токенов (1 до 4096+): Контроль длины ответа

Top_p (0.0 до 1.0): Параметр фокусировки

Объединяем всё: комбинации параметров для различных случаев использования

Магия системных подсказок: программирование личности ИИ

Почему системные подсказки так мощны

Создание эффективных системных подсказок: искусство и наука

Примеры системных подсказок с контекстом

Демонстрация системных подсказок в действии

Расширенные техники системных подсказок

Почему это важно для вашего чат-ассистента

Создание веб-API с FastAPI: ваш высокопроизводительный центр связи с ИИ

Почему FastAPI для приложений с ИИ?

Понимание процесса запроса-ответа

Понимание архитектуры API

Создание приложения FastAPI

Понимание CORS: охранник безопасности веба

Что такое CORS и зачем он нужен?

CORS в вашей среде разработки

Безопасность CORS: разработка vs производство

Общие сценарии CORS и решения

Обработка ошибок и валидация

Настройка и запуск вашего бэкенда

Настройка среды Python

Конфигурация окружения: защита секретов

Что такое переменные окружения?

Почему переменные окружения важны

Настройка файла окружения

Создание личного токена доступа GitHub

Загрузка переменных окружения в Python

Безопасность Git: файл .gitignore

Разные окружения, разные секреты

Запуск сервера разработки: оживляем ваш FastAPI

Понимание процесса запуска сервера FastAPI

Что вы должны увидеть, когда все работает

Тестирование вашего FastAPI: несколько мощных подходов

Устранение распространенных проблем при запуске

Лучшие практики разработки

Настройка для GitHub Codespaces: Удобная облачная разработка

Понимание сетевых особенностей Codespaces

Пошаговая настройка Codespaces

Понимание URL Codespaces

Тестирование настройки Codespaces

Codespaces vs Локальная разработка

Советы по разработке в Codespaces

Создание интерфейса чата: где человек встречается с AI

Понимание современной архитектуры фронтенда

Три столпа фронтенд-разработки

Почему важна современная архитектура JavaScript

Настройка структуры проекта

Создание HTML-основы: семантическая структура для доступности

Структура документа

Семантические элементы

Функции доступности

Интеграция CSS и JavaScript

Добавление интерактивного JavaScript: логика современного веб-приложения

Понимание современной архитектуры JavaScript

Понимание каждого концепта JavaScript

Безопасность и лучшие практики

Понимание потока приложения

Стилизация интерфейса чата

Настройка URL вашего бэкенда

Тестирование и развертывание

Локальное тестирование

Устранение распространенных проблем

Задача GitHub Copilot Agent 🚀

Задание: Создайте своего личного AI-ассистента

Требования к проекту

Основные задачи реализации

Идеи для улучшения (опционально)

119 KiB

Raw Blame History Unescape Escape