Capstone Module 16: Turkish ChatGPT Clone Live — Integration of Module 16

Capstone Akışı (10 Aşama)#

1. Mimari özet — full stack diagram
2. Model hazırlığı — DPO modeli quantize
3. vLLM backend kurulum — Türkiye DC veya AWS Frankfurt
4. Next.js frontend — chat UI + streaming
5. API gateway + rate limiting
6. KVKK + güvenlik katmanı
7. Vercel deployment — frontend
8. Monitoring kurulum — Grafana + Sentry
9. Launch checklist
10. Maliyet analizi ve sonuç

4. Next.js Frontend — Türkçe Chat UI#

4.1 Tek dosya streaming chat#

// app/chat/page.tsx (Next.js 14 App Router)
'use client';
import { useState, useRef, useEffect } from 'react';

export default function ChatPage() {
  const [messages, setMessages] = useState<{role: string, content: string}[]>([]);
  const [input, setInput] = useState('');
  const [streaming, setStreaming] = useState(false);
  const chatEndRef = useRef<HTMLDivElement>(null);

  useEffect(() => {
    chatEndRef.current?.scrollIntoView({behavior: 'smooth'});
  }, [messages]);

  async function handleSend() {
    if (!input.trim() || streaming) return;
    
    const userMessage = {role: 'user', content: input};
    setMessages(prev => [...prev, userMessage]);
    setInput('');
    setStreaming(true);
    
    // Backend'e stream et
    const response = await fetch('/api/chat', {
      method: 'POST',
      headers: {'Content-Type': 'application/json'},
      body: JSON.stringify({messages: [...messages, userMessage]}),
    });
    
    if (!response.body) return;
    
    const reader = response.body.getReader();
    const decoder = new TextDecoder();
    let assistantContent = '';
    
    // Stream chunks ekle
    setMessages(prev => [...prev, {role: 'assistant', content: ''}]);
    
    while (true) {
      const {done, value} = await reader.read();
      if (done) break;
      
      const chunk = decoder.decode(value);
      const lines = chunk.split('\n');
      
      for (const line of lines) {
        if (line.startsWith('data: ')) {
          try {
            const data = JSON.parse(line.slice(6));
            const delta = data.choices[0].delta.content || '';
            assistantContent += delta;
            setMessages(prev => {
              const last = prev[prev.length - 1];
              return [...prev.slice(0, -1), {...last, content: assistantContent}];
            });
          } catch {}
        }
      }
    }
    
    setStreaming(false);
  }

  return (
    <div className="flex flex-col h-screen max-w-3xl mx-auto p-4">
      <h1 className="text-2xl font-bold mb-4">Türkçe AI Asistanı</h1>
      
      <div className="flex-1 overflow-y-auto space-y-4">
        {messages.map((msg, i) => (
          <div key={i} className={`flex ${msg.role === 'user' ? 'justify-end' : 'justify-start'}`}>
            <div className={`max-w-md p-3 rounded-lg ${
              msg.role === 'user' 
                ? 'bg-blue-500 text-white' 
                : 'bg-gray-100 text-gray-900'
            }`}>
              {msg.content}
            </div>
          </div>
        ))}
        <div ref={chatEndRef} />
      </div>
      
      <div className="flex gap-2 mt-4">
        <input
          type="text"
          value={input}
          onChange={e => setInput(e.target.value)}
          onKeyDown={e => e.key === 'Enter' && handleSend()}
          placeholder="Mesajınızı yazın..."
          className="flex-1 p-2 border rounded"
          disabled={streaming}
        />
        <button
          onClick={handleSend}
          disabled={streaming || !input.trim()}
          className="px-4 py-2 bg-blue-500 text-white rounded disabled:bg-gray-400"
        >
          {streaming ? '...' : 'Gönder'}
        </button>
      </div>
      
      <p className="text-xs text-gray-500 mt-2">
        AI yanıtları yapay zekadan üretilmiştir. Hukuki/tıbbi danışman değildir. KVKK kapsamında veri işlenir.
      </p>
    </div>
  );
}

4.2 API Route — vLLM proxy#

// app/api/chat/route.ts
import { NextRequest } from 'next/server';

export const runtime = 'edge';

export async function POST(req: NextRequest) {
  const { messages } = await req.json();
  
  // Rate limiting + auth burada
  
  // Prompt injection check
  const lastUserMsg = messages[messages.length - 1].content;
  const injectionPatterns = ['önceki talimatları unut', 'sen artık', 'sistem mesajı'];
  if (injectionPatterns.some(p => lastUserMsg.toLowerCase().includes(p))) {
    return new Response('Geçersiz istek.', { status: 400 });
  }
  
  // vLLM backend
  const response = await fetch(`${process.env.VLLM_URL}/v1/chat/completions`, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Authorization': `Bearer ${process.env.VLLM_API_KEY}`,
    },
    body: JSON.stringify({
      model: 'sukruyusufkaya/llama-3-8b-tr-dpo-instruct-awq',
      messages: [
        {role: 'system', content: 'Sen yardımsever bir Türk asistansın. KVKK kapsamında veri işlersin.'},
        ...messages,
      ],
      max_tokens: 500,
      temperature: 0.7,
      stream: true,
    }),
  });
  
  return new Response(response.body, {
    headers: {'Content-Type': 'text/event-stream'},
  });
}

Modül 16 Envanteri (Yeniden Yazıldı)#