Интеграция ChatGPT в веб-приложение

Искусственный интеллект больше не futология. Сегодня мы разберём, как интегрировать ChatGPT в реальное веб-приложение.

Зачем нужен ChatGPT в вашем приложении?

Использования

1. Чат-боты поддержки → 24/7 ответы на вопросы
2. Генерация контента → Статьи, описания, маркетинг
3. Анализ текста → Sentiment analysis, классификация
4. Помощник в коде → Code review, генерация boilerplate
5. Персонализация → Рекомендации на основе поведения

Шаг 1: Получение API ключа OpenAI

1. Перейдите на platform.openai.com
2. Зарегистрируйтесь или войдите
3. Создайте API ключ в Settings → API Keys
4. Сохраните ключ (показывается только один раз!)

Шаг 2: Базовая интеграция

Python пример

import openai
from dotenv import load_dotenv
import os

load_dotenv()

openai.api_key = os.getenv('OPENAI_API_KEY')

async def chat_completion(message: str) -> str:
    response = await openai.ChatCompletion.acreate(
        model="gpt-4",
        messages=[
            {"role": "system", "content": "Вы полезный ассистент."},
            {"role": "user", "content": message}
        ],
        temperature=0.7,
        max_tokens=500
    )
    return response.choices[0].message.content

JavaScript пример

import OpenAI from 'openai';

const openai = new OpenAI({
  apiKey: process.env.OPENAI_API_KEY
});

async function chatCompletion(message) {
  const completion = await openai.chat.completions.create({
    model: "gpt-4",
    messages: [
      { role: "system", content: "Вы полезный ассистент." },
      { role: "user", content: message }
    ],
    temperature: 0.7,
    max_tokens: 500
  });
  
  return completion.choices[0].message.content;
}

Шаг 3: Создание API endpoint

FastAPI backend

from fastapi import FastAPI, HTTPException
from pydantic import BaseModel

app = FastAPI()

class ChatRequest(BaseModel):
    message: str
    history: list = []

@app.post("/api/chat")
async def chat(request: ChatRequest):
    try:
        messages = [
            {"role": "system", "content": "Вы helpful assistant."}
        ] + request.history + [
            {"role": "user", "content": request.message}
        ]
        
        response = await openai.ChatCompletion.acreate(
            model="gpt-4",
            messages=messages
        )
        
        return {"reply": response.choices[0].message.content}
    except Exception as e:
        raise HTTPException(status_code=500, detail=str(e))

Шаг 4: Фронтенд интеграция

React компонент

import { useState } from 'react';

function ChatBot() {
  const [messages, setMessages] = useState([]);
  const [input, setInput] = useState('');
  const [loading, setLoading] = useState(false);

  const sendMessage = async () => {
    if (!input.trim()) return;
    
    setLoading(true);
    
    try {
      const response = await fetch('/api/chat', {
        method: 'POST',
        headers: { 'Content-Type': 'application/json' },
        body: JSON.stringify({ 
          message: input,
          history: messages 
        })
      });
      
      const data = await response.json();
      
      setMessages([
        ...messages,
        { role: 'user', content: input },
        { role: 'assistant', content: data.reply }
      ]);
      
      setInput('');
    } catch (error) {
      console.error('Error:', error);
    }
    
    setLoading(false);
  };

  return (
    <div className="chat-container">
      <div className="messages">
        {messages.map((msg, i) => (
          <div key={i} className={msg.role}>
            {msg.content}
          </div>
        ))}
      </div>
      
      <input
        value={input}
        onChange={(e) => setInput(e.target.value)}
        onKeyPress={(e) => e.key === 'Enter' && sendMessage()}
        disabled={loading}
      />
      
      <button onClick={sendMessage} disabled={loading}>
        {loading ? 'Sending...' : 'Send'}
      </button>
    </div>
  );
}

Шаг 5: Оптимизация стоимости

1. Контроль токенов

def count_tokens(text: str) -> int:
    return len(text.split()) * 1.3  # Примерная оценка

# Лимит на запрос
MAX_TOKENS_PER_REQUEST = 2000

2. Кэширование

from functools import lru_cache

@lru_cache(maxsize=100)
async def cached_response(query: str):
    # Кэшируем частые запросы
    return await chat_completion(query)

3. Использование более дешёвых моделей

# Для простых задач
model = "gpt-3.5-turbo"  # В 10x дешевле gpt-4

# Только для сложных
model = "gpt-4"  # Когда нужна высокая точность

Шаг 6: Безопасность

1. Rate limiting

from slowapi import Limiter

limiter = Limiter(key_func=get_remote_address)

@app.post("/api/chat")
@limiter.limit("10/minute")
async def chat(request: ChatRequest):
    pass

2. Валидация входа

import re

def validate_input(text: str) -> bool:
    if len(text) > 4000:  # OpenAI limit
        return False
    if not text.strip():
        return False
    return True

3. Скрытие API ключа

# ❌ НИКОГДА так
api_key = "sk-proj-abc123..."

# ✅ Всегда через .env
api_key = os.getenv('OPENAI_API_KEY')

Лучшие практики

1. System prompts — чётко определяйте роль AI
2. Few-shot learning — давайте примеры
3. Temperature tuning — 0.0 для фактов, 1.0 для креатива
4. Streaming — для быстрого UI
5. Fallback — что делать при ошибке API

Заключение

Интеграция ChatGPT открывает огромные возможности. Начните с простого:

• ✅ Прототип за 1 день
• ✅ Тестируйте на реальных пользователях
• ✅ Мониторьте расход токенов
• ✅ Постепенно улучшайте промпты

Хотите интегрировать AI в свой проект? Свяжитесь с нами!