Update app.py

app.py

@@ -1,10 +1,8 @@
-# app.py
-# Flask tabanlı Kayra Türkçe Dil Modeli Test Uygulaması
-# sixfingerdev/kayra-1 ve sixfingerdev/kayra-1-exp modellerini test etmenizi sağlar.
-
-from flask import Flask, request, jsonify, render_template_string
+from flask import Flask, request, jsonify, render_template_string, Response
 import torch
-from transformers import AutoModelForCausalLM, AutoTokenizer
+from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer
+from threading import Thread
+import json
 
 app = Flask(__name__)
 
@@ -173,10 +171,201 @@ select:focus {
     transform: none;
 }
 
+.btn-stop {
+    background: linear-gradient(135deg, var(--accent), #c0392b);
+    color: var(--white);
+    margin-top: 0.5rem;
+    display: none;
+}
+
+.btn-stop.active {
+    display: block;
+}
+
 .form-group {
     margin-bottom: 1.5rem;
 }
 
+/* ==================== SETTINGS PANEL ==================== */
+.settings-panel {
+    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
+    border-radius: var(--radius);
+    padding: 1.5rem;
+    margin-bottom: 1.5rem;
+}
+
+.settings-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    cursor: pointer;
+    margin-bottom: 1rem;
+}
+
+.settings-header h3 {
+    color: var(--primary);
+    font-size: 1.1rem;
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.settings-toggle {
+    background: var(--secondary);
+    color: var(--white);
+    border: none;
+    padding: 0.3rem 0.8rem;
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.85rem;
+    transition: all 0.3s ease;
+}
+
+.settings-toggle:hover {
+    background: #2980b9;
+}
+
+.settings-content {
+    display: none;
+}
+
+.settings-content.active {
+    display: block;
+}
+
+.settings-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
+    gap: 1.5rem;
+}
+
+.setting-item {
+    background: var(--white);
+    padding: 1rem;
+    border-radius: 8px;
+    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
+}
+
+.setting-item label {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.8rem;
+}
+
+.setting-item label span.value {
+    background: var(--secondary);
+    color: var(--white);
+    padding: 0.2rem 0.6rem;
+    border-radius: 4px;
+    font-size: 0.85rem;
+    min-width: 50px;
+    text-align: center;
+}
+
+.setting-item input[type="range"] {
+    width: 100%;
+    height: 8px;
+    border-radius: 4px;
+    background: var(--light);
+    outline: none;
+    -webkit-appearance: none;
+}
+
+.setting-item input[type="range"]::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    width: 20px;
+    height: 20px;
+    border-radius: 50%;
+    background: var(--secondary);
+    cursor: pointer;
+    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
+    transition: transform 0.2s ease;
+}
+
+.setting-item input[type="range"]::-webkit-slider-thumb:hover {
+    transform: scale(1.1);
+}
+
+.setting-item input[type="number"] {
+    width: 100%;
+    padding: 0.6rem;
+    border: 2px solid var(--light);
+    border-radius: 6px;
+    font-size: 1rem;
+    text-align: center;
+}
+
+.setting-item input[type="number"]:focus {
+    outline: none;
+    border-color: var(--secondary);
+}
+
+.setting-description {
+    font-size: 0.8rem;
+    color: var(--gray);
+    margin-top: 0.5rem;
+}
+
+/* Stream Toggle */
+.stream-toggle {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    padding: 0.5rem 0;
+}
+
+.toggle-switch {
+    position: relative;
+    width: 60px;
+    height: 30px;
+}
+
+.toggle-switch input {
+    opacity: 0;
+    width: 0;
+    height: 0;
+}
+
+.toggle-slider {
+    position: absolute;
+    cursor: pointer;
+    top: 0;
+    left: 0;
+    right: 0;
+    bottom: 0;
+    background-color: var(--gray);
+    transition: 0.4s;
+    border-radius: 30px;
+}
+
+.toggle-slider:before {
+    position: absolute;
+    content: "";
+    height: 22px;
+    width: 22px;
+    left: 4px;
+    bottom: 4px;
+    background-color: white;
+    transition: 0.4s;
+    border-radius: 50%;
+}
+
+.toggle-switch input:checked + .toggle-slider {
+    background-color: var(--success);
+}
+
+.toggle-switch input:checked + .toggle-slider:before {
+    transform: translateX(30px);
+}
+
+.toggle-label {
+    font-weight: 600;
+    color: var(--primary);
+}
+
+/* ==================== END SETTINGS PANEL ==================== */
+
 .response-box {
     background: linear-gradient(135deg, #f8f9fa, #e9ecef);
     border-radius: var(--radius);
@@ -207,6 +396,16 @@ select:focus {
     font-weight: 600;
 }
 
+.stream-badge {
+    background: var(--success);
+    color: var(--white);
+    padding: 0.2rem 0.6rem;
+    border-radius: 12px;
+    font-size: 0.75rem;
+    font-weight: 600;
+    margin-left: 0.5rem;
+}
+
 .response-content {
     white-space: pre-wrap;
     font-size: 1rem;
@@ -216,6 +415,21 @@ select:focus {
     color: var(--primary);
 }
 
+.cursor-blink {
+    display: inline-block;
+    width: 8px;
+    height: 1.2em;
+    background: var(--secondary);
+    margin-left: 2px;
+    animation: blink 1s infinite;
+    vertical-align: text-bottom;
+}
+
+@keyframes blink {
+    0%, 50% { opacity: 1; }
+    51%, 100% { opacity: 0; }
+}
+
 .loading {
     text-align: center;
     padding: 2rem;
@@ -384,6 +598,10 @@ tr:hover {
     .two-column {
         grid-template-columns: 1fr;
     }
+    
+    .settings-grid {
+        grid-template-columns: 1fr;
+    }
 }
 
 .two-column {
@@ -391,6 +609,52 @@ tr:hover {
     grid-template-columns: 1fr 1fr;
     gap: 1rem;
 }
+
+/* Preset buttons */
+.preset-buttons {
+    display: flex;
+    gap: 0.5rem;
+    margin-bottom: 1rem;
+    flex-wrap: wrap;
+}
+
+.preset-btn {
+    padding: 0.4rem 0.8rem;
+    border: 2px solid var(--secondary);
+    background: var(--white);
+    color: var(--secondary);
+    border-radius: 6px;
+    cursor: pointer;
+    font-size: 0.85rem;
+    font-weight: 500;
+    transition: all 0.3s ease;
+}
+
+.preset-btn:hover {
+    background: var(--secondary);
+    color: var(--white);
+}
+
+.preset-btn.active {
+    background: var(--secondary);
+    color: var(--white);
+}
+
+/* Token counter */
+.token-info {
+    display: flex;
+    justify-content: space-between;
+    font-size: 0.85rem;
+    color: var(--gray);
+    margin-top: 1rem;
+    padding-top: 0.5rem;
+    border-top: 1px dashed var(--light);
+}
+
+.token-count {
+    color: var(--secondary);
+    font-weight: 600;
+}
 """
 
 # ==================== ANA SAYFA HTML ====================
@@ -405,7 +669,7 @@ INDEX_HTML = """
 </head>
 <body>
     <nav class="navbar">
-        <h1>Kayra Türkçe Dil Modeli</h1>
+        <h1>🤖 Kayra Türkçe Dil Modeli</h1>
         <div class="nav-links">
             <a href="/" class="active">Test</a>
             <a href="/info">Bilgi</a>
@@ -432,8 +696,113 @@ INDEX_HTML = """
                 </select>
             </div>
             
+            <!-- ==================== SETTINGS PANEL ==================== -->
+            <div class="settings-panel">
+                <div class="settings-header" onclick="toggleSettings()">
+                    <h3>⚙️ Gelişmiş Ayarlar</h3>
+                    <button class="settings-toggle" id="settingsToggleBtn">Göster</button>
+                </div>
+                
+                <div class="settings-content" id="settingsContent">
+                    <!-- Preset Buttons -->
+                    <div class="preset-buttons">
+                        <button class="preset-btn" onclick="applyPreset('creative')">🎨 Yaratıcı</button>
+                        <button class="preset-btn active" onclick="applyPreset('balanced')">⚖️ Dengeli</button>
+                        <button class="preset-btn" onclick="applyPreset('precise')">🎯 Kesin</button>
+                        <button class="preset-btn" onclick="applyPreset('random')">🎲 Rastgele</button>
+                    </div>
+                    
+                    <div class="settings-grid">
+                        <!-- Temperature -->
+                        <div class="setting-item">
+                            <label>
+                                🌡️ Temperature
+                                <span class="value" id="tempValue">0.7</span>
+                            </label>
+                            <input type="range" id="temperature" min="0.1" max="2.0" step="0.1" value="0.7" 
+                                   oninput="updateSlider('temperature', 'tempValue')">
+                            <p class="setting-description">
+                                Düşük = daha tutarlı, Yüksek = daha yaratıcı
+                            </p>
+                        </div>
+                        
+                        <!-- Max Tokens -->
+                        <div class="setting-item">
+                            <label>
+                                📝 Max Tokens
+                                <span class="value" id="maxTokensValue">150</span>
+                            </label>
+                            <input type="range" id="maxTokens" min="10" max="512" step="10" value="150"
+                                   oninput="updateSlider('maxTokens', 'maxTokensValue')">
+                            <p class="setting-description">
+                                Üretilecek maksimum token sayısı
+                            </p>
+                        </div>
+                        
+                        <!-- Top K -->
+                        <div class="setting-item">
+                            <label>
+                                🔝 Top K
+                                <span class="value" id="topKValue">50</span>
+                            </label>
+                            <input type="range" id="topK" min="1" max="100" step="1" value="50"
+                                   oninput="updateSlider('topK', 'topKValue')">
+                            <p class="setting-description">
+                                Her adımda değerlendirilecek en olası K token
+                            </p>
+                        </div>
+                        
+                        <!-- Top P -->
+                        <div class="setting-item">
+                            <label>
+                                📊 Top P (Nucleus)
+                                <span class="value" id="topPValue">0.9</span>
+                            </label>
+                            <input type="range" id="topP" min="0.1" max="1.0" step="0.05" value="0.9"
+                                   oninput="updateSlider('topP', 'topPValue')">
+                            <p class="setting-description">
+                                Kümülatif olasılık eşiği
+                            </p>
+                        </div>
+                        
+                        <!-- Repetition Penalty -->
+                        <div class="setting-item">
+                            <label>
+                                🔄 Repetition Penalty
+                                <span class="value" id="repPenaltyValue">1.3</span>
+                            </label>
+                            <input type="range" id="repPenalty" min="1.0" max="2.0" step="0.1" value="1.3"
+                                   oninput="updateSlider('repPenalty', 'repPenaltyValue')">
+                            <p class="setting-description">
+                                Tekrar eden kelimeleri engelleme gücü
+                            </p>
+                        </div>
+                        
+                        <!-- Stream Toggle -->
+                        <div class="setting-item">
+                            <label>🌊 Stream Modu</label>
+                            <div class="stream-toggle">
+                                <label class="toggle-switch">
+                                    <input type="checkbox" id="streamMode" checked>
+                                    <span class="toggle-slider"></span>
+                                </label>
+                                <span class="toggle-label" id="streamLabel">Açık</span>
+                            </div>
+                            <p class="setting-description">
+                                Cevabı kelime kelime göster
+                            </p>
+                        </div>
+                    </div>
+                </div>
+            </div>
+            <!-- ==================== END SETTINGS PANEL ==================== -->
+            
             <button class="btn btn-primary" id="submitBtn" onclick="generate()">
-                Gönder ve Cevap Al
+                🚀 Gönder ve Cevap Al
+            </button>
+            
+            <button class="btn btn-stop" id="stopBtn" onclick="stopGeneration()">
+                ⏹️ Durdur
             </button>
             
             <div class="loading" id="loading">
@@ -445,8 +814,13 @@ INDEX_HTML = """
                 <div class="response-header">
                     <span>Model:</span>
                     <span class="model-badge" id="modelBadge"></span>
+                    <span class="stream-badge" id="streamBadge" style="display:none;">STREAM</span>
                 </div>
                 <div class="response-content" id="responseContent"></div>
+                <div class="token-info">
+                    <span>Üretilen token: <span class="token-count" id="tokenCount">0</span></span>
+                    <span>Süre: <span class="token-count" id="genTime">0</span>s</span>
+                </div>
             </div>
             
             <div class="error-box" id="errorBox" style="display:none;"></div>
@@ -459,13 +833,97 @@ INDEX_HTML = """
     </div>
 
     <script>
+        let eventSource = null;
+        let isGenerating = false;
+        let startTime = null;
+        
+        // Settings toggle
+        function toggleSettings() {
+            const content = document.getElementById('settingsContent');
+            const btn = document.getElementById('settingsToggleBtn');
+            content.classList.toggle('active');
+            btn.textContent = content.classList.contains('active') ? 'Gizle' : 'Göster';
+        }
+        
+        // Update slider value display
+        function updateSlider(sliderId, valueId) {
+            const slider = document.getElementById(sliderId);
+            const valueSpan = document.getElementById(valueId);
+            valueSpan.textContent = slider.value;
+        }
+        
+        // Stream toggle
+        document.getElementById('streamMode').addEventListener('change', function() {
+            document.getElementById('streamLabel').textContent = this.checked ? 'Açık' : 'Kapalı';
+        });
+        
+        // Presets
+        const presets = {
+            creative: { temperature: 1.2, maxTokens: 200, topK: 80, topP: 0.95, repPenalty: 1.1 },
+            balanced: { temperature: 0.7, maxTokens: 150, topK: 50, topP: 0.9, repPenalty: 1.3 },
+            precise: { temperature: 0.3, maxTokens: 100, topK: 20, topP: 0.8, repPenalty: 1.5 },
+            random: { temperature: 1.8, maxTokens: 250, topK: 100, topP: 1.0, repPenalty: 1.0 }
+        };
+        
+        function applyPreset(presetName) {
+            const preset = presets[presetName];
+            
+            document.getElementById('temperature').value = preset.temperature;
+            document.getElementById('tempValue').textContent = preset.temperature;
+            
+            document.getElementById('maxTokens').value = preset.maxTokens;
+            document.getElementById('maxTokensValue').textContent = preset.maxTokens;
+            
+            document.getElementById('topK').value = preset.topK;
+            document.getElementById('topKValue').textContent = preset.topK;
+            
+            document.getElementById('topP').value = preset.topP;
+            document.getElementById('topPValue').textContent = preset.topP;
+            
+            document.getElementById('repPenalty').value = preset.repPenalty;
+            document.getElementById('repPenaltyValue').textContent = preset.repPenalty;
+            
+            // Update active button
+            document.querySelectorAll('.preset-btn').forEach(btn => btn.classList.remove('active'));
+            event.target.classList.add('active');
+        }
+        
+        // Stop generation
+        function stopGeneration() {
+            if (eventSource) {
+                eventSource.close();
+                eventSource = null;
+            }
+            isGenerating = false;
+            document.getElementById('submitBtn').disabled = false;
+            document.getElementById('stopBtn').classList.remove('active');
+            document.getElementById('loading').classList.remove('active');
+            
+            // Remove cursor
+            const cursor = document.querySelector('.cursor-blink');
+            if (cursor) cursor.remove();
+        }
+        
+        // Main generate function
         async function generate() {
             const prompt = document.getElementById("prompt").value.trim();
             const model = document.getElementById("model").value;
+            const streamMode = document.getElementById("streamMode").checked;
+            
+            const settings = {
+                temperature: parseFloat(document.getElementById("temperature").value),
+                max_tokens: parseInt(document.getElementById("maxTokens").value),
+                top_k: parseInt(document.getElementById("topK").value),
+                top_p: parseFloat(document.getElementById("topP").value),
+                repetition_penalty: parseFloat(document.getElementById("repPenalty").value)
+            };
+            
             const responseBox = document.getElementById("responseBox");
             const loading = document.getElementById("loading");
             const errorBox = document.getElementById("errorBox");
             const submitBtn = document.getElementById("submitBtn");
+            const stopBtn = document.getElementById("stopBtn");
+            const streamBadge = document.getElementById("streamBadge");
             
             if (!prompt) {
                 errorBox.textContent = "Lütfen bir mesaj girin!";
@@ -476,34 +934,97 @@ INDEX_HTML = """
             
             errorBox.style.display = "none";
             responseBox.classList.remove("active");
-            loading.classList.add("active");
             submitBtn.disabled = true;
+            isGenerating = true;
+            startTime = Date.now();
+            
+            document.getElementById("tokenCount").textContent = "0";
+            document.getElementById("genTime").textContent = "0";
             
-            try {
-                const response = await fetch("/generate", {
-                    method: "POST",
-                    headers: { "Content-Type": "application/json" },
-                    body: JSON.stringify({ prompt, model })
+            if (streamMode) {
+                // Stream mode
+                loading.classList.add("active");
+                stopBtn.classList.add("active");
+                streamBadge.style.display = "inline-block";
+                
+                const params = new URLSearchParams({
+                    prompt: prompt,
+                    model: model,
+                    ...settings
                 });
                 
-                const data = await response.json();
+                eventSource = new EventSource("/generate_stream?" + params.toString());
+                
+                let fullResponse = "";
+                let tokenCount = 0;
                 
-                if (data.error) {
-                    errorBox.textContent = "Hata: " + data.error;
+                document.getElementById("modelBadge").textContent = model === "stable" ? "kayra-1 (Stable)" : "kayra-1-exp (Deneysel)";
+                document.getElementById("responseContent").innerHTML = 
+                    "<strong>Soru:</strong> " + escapeHtml(prompt) + 
+                    "\\n\\n<strong>Cevap:</strong>\\n<span id='streamOutput'></span><span class='cursor-blink'></span>";
+                responseBox.classList.add("active");
+                loading.classList.remove("active");
+                
+                eventSource.onmessage = function(event) {
+                    const data = JSON.parse(event.data);
+                    
+                    if (data.token) {
+                        fullResponse += data.token;
+                        tokenCount++;
+                        document.getElementById("streamOutput").textContent = fullResponse;
+                        document.getElementById("tokenCount").textContent = tokenCount;
+                        document.getElementById("genTime").textContent = ((Date.now() - startTime) / 1000).toFixed(1);
+                    }
+                    
+                    if (data.done) {
+                        stopGeneration();
+                    }
+                    
+                    if (data.error) {
+                        errorBox.textContent = "Hata: " + data.error;
+                        errorBox.style.display = "block";
+                        stopGeneration();
+                    }
+                };
+                
+                eventSource.onerror = function() {
+                    stopGeneration();
+                };
+                
+            } else {
+                // Non-stream mode
+                loading.classList.add("active");
+                streamBadge.style.display = "none";
+                
+                try {
+                    const response = await fetch("/generate", {
+                        method: "POST",
+                        headers: { "Content-Type": "application/json" },
+                        body: JSON.stringify({ prompt, model, ...settings })
+                    });
+                    
+                    const data = await response.json();
+                    
+                    if (data.error) {
+                        errorBox.textContent = "Hata: " + data.error;
+                        errorBox.style.display = "block";
+                    } else {
+                        document.getElementById("modelBadge").textContent = data.model;
+                        document.getElementById("responseContent").innerHTML = 
+                            "<strong>Soru:</strong> " + escapeHtml(data.prompt) + 
+                            "\\n\\n<strong>Cevap:</strong>\\n" + escapeHtml(data.response);
+                        document.getElementById("tokenCount").textContent = data.token_count || "N/A";
+                        document.getElementById("genTime").textContent = ((Date.now() - startTime) / 1000).toFixed(1);
+                        responseBox.classList.add("active");
+                    }
+                } catch (err) {
+                    errorBox.textContent = "Bağlantı hatası: " + err.message;
                     errorBox.style.display = "block";
-                } else {
-                    document.getElementById("modelBadge").textContent = data.model;
-                    document.getElementById("responseContent").innerHTML = 
-                        "<strong>Soru:</strong> " + escapeHtml(data.prompt) + 
-                        "\\n\\n<strong>Cevap:</strong>\\n" + escapeHtml(data.response);
-                    responseBox.classList.add("active");
+                } finally {
+                    loading.classList.remove("active");
+                    submitBtn.disabled = false;
+                    isGenerating = false;
                 }
-            } catch (err) {
-                errorBox.textContent = "Bağlantı hatası: " + err.message;
-                errorBox.style.display = "block";
-            } finally {
-                loading.classList.remove("active");
-                submitBtn.disabled = false;
             }
         }
         
@@ -535,7 +1056,7 @@ INFO_HTML = """
 </head>
 <body>
     <nav class="navbar">
-        <h1>Kayra Türkçe Dil Modeli</h1>
+        <h1>🤖 Kayra Türkçe Dil Modeli</h1>
         <div class="nav-links">
             <a href="/">Test</a>
             <a href="/info" class="active">Bilgi</a>
@@ -573,6 +1094,92 @@ INFO_HTML = """
             </div>
         </div>
         
+        <!-- Parametre Açıklamaları -->
+        <div class="card">
+            <div class="card-header">
+                <h2>⚙️ Parametre Açıklamaları</h2>
+            </div>
+            
+            <table>
+                <thead>
+                    <tr>
+                        <th>Parametre</th>
+                        <th>Aralık</th>
+                        <th>Varsayılan</th>
+                        <th>Açıklama</th>
+                    </tr>
+                </thead>
+                <tbody>
+                    <tr>
+                        <td><strong>Temperature</strong></td>
+                        <td>0.1 - 2.0</td>
+                        <td>0.7</td>
+                        <td>Çıktının rastgeleliğini kontrol eder. Düşük değerler daha tutarlı, yüksek değerler daha yaratıcı sonuçlar üretir.</td>
+                    </tr>
+                    <tr>
+                        <td><strong>Max Tokens</strong></td>
+                        <td>10 - 512</td>
+                        <td>150</td>
+                        <td>Üretilecek maksimum token (kelime parçası) sayısı.</td>
+                    </tr>
+                    <tr>
+                        <td><strong>Top K</strong></td>
+                        <td>1 - 100</td>
+                        <td>50</td>
+                        <td>Her adımda sadece en olası K tokenden seçim yapılır. Düşük K daha odaklı, yüksek K daha çeşitli çıktı üretir.</td>
+                    </tr>
+                    <tr>
+                        <td><strong>Top P (Nucleus)</strong></td>
+                        <td>0.1 - 1.0</td>
+                        <td>0.9</td>
+                        <td>Kümülatif olasılığı P'yi geçen tokenlerden seçim yapılır. Temperature ile birlikte kullanılır.</td>
+                    </tr>
+                    <tr>
+                        <td><strong>Repetition Penalty</strong></td>
+                        <td>1.0 - 2.0</td>
+                        <td>1.3</td>
+                        <td>Tekrarlayan kelimeleri cezalandırır. Yüksek değerler tekrarı azaltır ama anlam bozulabilir.</td>
+                    </tr>
+                    <tr>
+                        <td><strong>Stream Mode</strong></td>
+                        <td>Açık/Kapalı</td>
+                        <td>Açık</td>
+                        <td>Açıkken cevap kelime kelime gösterilir, kapalıyken tamamı bir anda gösterilir.</td>
+                    </tr>
+                </tbody>
+            </table>
+        </div>
+        
+        <!-- Preset Açıklamaları -->
+        <div class="card">
+            <div class="card-header">
+                <h2>🎛️ Hazır Ayarlar (Presets)</h2>
+            </div>
+            
+            <div class="two-column">
+                <div class="setting-item">
+                    <h4>🎨 Yaratıcı</h4>
+                    <p>Yüksek temperature ve top-k ile daha özgün ve beklenmedik çıktılar üretir. Hikaye yazımı, beyin fırtınası için ideal.</p>
+                    <code>temp=1.2, top_k=80, top_p=0.95, rep=1.1</code>
+                </div>
+                <div class="setting-item">
+                    <h4>⚖️ Dengeli</h4>
+                    <p>Varsayılan ayarlar. Çoğu kullanım senaryosu için uygundur.</p>
+                    <code>temp=0.7, top_k=50, top_p=0.9, rep=1.3</code>
+                </div>
+                <div class="setting-item">
+                    <h4>🎯 Kesin</h4>
+                    <p>Düşük temperature ile daha tutarlı ve tahmin edilebilir çıktılar. Bilgi gerektiren sorular için.</p>
+                    <code>temp=0.3, top_k=20, top_p=0.8, rep=1.5</code>
+                </div>
+                <div class="setting-item">
+                    <h4>🎲 Rastgele</h4>
+                    <p>Maksimum rastgelelik. Çılgın ve beklenmedik sonuçlar için. Dikkatli kullanın!</p>
+                    <code>temp=1.8, top_k=100, top_p=1.0, rep=1.0</code>
+                </div>
+            </div>
+        </div>
+        
         <!-- Model Karşılaştırması -->
         <div class="card">
             <div class="card-header">
@@ -671,154 +1278,6 @@ INFO_HTML = """
             </table>
         </div>
         
-        <!-- Hallucination Problemi -->
-        <div class="card">
-            <div class="card-header">
-                <h2>Neden Küçük Modeller Yanlış Bilgi Üretir?</h2>
-            </div>
-            
-            <div class="highlight">
-                <strong>Temel Bulgu:</strong> Loss azalması, gerçek bilgi doğruluğu anlamına gelmez. 
-                (loss down != factual accuracy up)
-            </div>
-            
-            <div class="info-section">
-                <h3>Eğitim Sürecinde Gözlemlenen Davranış</h3>
-                <table class="comparison-table">
-                    <thead>
-                        <tr>
-                            <th>Step</th>
-                            <th>Val Loss</th>
-                            <th>Val PPL</th>
-                            <th>Üretilen Başkent</th>
-                            <th>Doğru mu?</th>
-                        </tr>
-                    </thead>
-                    <tbody>
-                        <tr>
-                            <td>1000</td>
-                            <td>5.98</td>
-                            <td>397.3</td>
-                            <td>Ankara</td>
-                            <td><span class="badge badge-success">Evet</span></td>
-                        </tr>
-                        <tr>
-                            <td>3000</td>
-                            <td>3.94</td>
-                            <td>51.7</td>
-                            <td>Ankara</td>
-                            <td><span class="badge badge-success">Evet</span></td>
-                        </tr>
-                        <tr>
-                            <td>5000</td>
-                            <td>4.02</td>
-                            <td>56.2</td>
-                            <td>Rastgele şehir</td>
-                            <td><span class="badge badge-danger">Hayır</span></td>
-                        </tr>
-                        <tr>
-                            <td>6500</td>
-                            <td>3.90</td>
-                            <td>49.6</td>
-                            <td>Bolu</td>
-                            <td><span class="badge badge-danger">Hayır</span></td>
-                        </tr>
-                        <tr>
-                            <td>7500</td>
-                            <td>3.83</td>
-                            <td>46.1</td>
-                            <td>Konya</td>
-                            <td><span class="badge badge-danger">Hayır</span></td>
-                        </tr>
-                        <tr>
-                            <td>9000</td>
-                            <td>3.75</td>
-                            <td>42.7</td>
-                            <td>Ankara (bazen)</td>
-                            <td><span class="badge badge-warning">Belirsiz</span></td>
-                        </tr>
-                    </tbody>
-                </table>
-            </div>
-            
-            <div class="two-column">
-                <div class="info-section">
-                    <h3>Modelin Başarıyla Öğrendikleri</h3>
-                    <ul style="margin-left: 1.5rem;">
-                        <li>Dilbilgisi (Türkçe morfoloji)</li>
-                        <li>Cümle yapısı (syntax)</li>
-                        <li>Stil (resmi/gündelik ton eşleştirme)</li>
-                        <li>Bağlam tutarlılığı (konu tutarlılığı)</li>
-                        <li>Örüntü eşleme (Wikipedia tarzında metin)</li>
-                    </ul>
-                </div>
-                
-                <div class="info-section">
-                    <h3>Modelin Öğrenemedikleri</h3>
-                    <ul style="margin-left: 1.5rem;">
-                        <li>Gerçek temeli: "Ankara = başkent" deterministik kuralı</li>
-                        <li>Mantıksal tutarlılık: Aynı prompt aynı gerçeği vermeli</li>
-                        <li>Bilgi geri çağırma: Güvenilir bilgi hatırlaması</li>
-                        <li>Gerçek vs örüntü: Doğruluğu olabilirlikten ayırt etme</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        
-        <!-- Model Boyutu Karşılaştırması -->
-        <div class="card">
-            <div class="card-header">
-                <h2>Model Boyutu ve Gerçeklik İlişkisi</h2>
-            </div>
-            
-            <table>
-                <thead>
-                    <tr>
-                        <th>Model</th>
-                        <th>Parametre</th>
-                        <th>Gerçeklik Güvenilirliği</th>
-                    </tr>
-                </thead>
-                <tbody>
-                    <tr>
-                        <td>Kayra (bu model)</td>
-                        <td>85M</td>
-                        <td><span class="badge badge-danger">Düşük - hallucination yaygın</span></td>
-                    </tr>
-                    <tr>
-                        <td>GPT-2 Small</td>
-                        <td>124M</td>
-                        <td><span class="badge badge-danger">Düşük - benzer sorunlar</span></td>
-                    </tr>
-                    <tr>
-                        <td>GPT-2 Medium</td>
-                        <td>355M</td>
-                        <td><span class="badge badge-warning">Orta - hala güvenilmez</span></td>
-                    </tr>
-                    <tr>
-                        <td>GPT-3</td>
-                        <td>175B</td>
-                        <td><span class="badge badge-success">İyi tutarlılık</span></td>
-                    </tr>
-                    <tr>
-                        <td>GPT-4</td>
-                        <td>~1.7T + RLHF</td>
-                        <td><span class="badge badge-success">Güvenilir</span></td>
-                    </tr>
-                    <tr>
-                        <td>GPT-5</td>
-                        <td>~10T (tahmini)</td>
-                        <td><span class="badge badge-info">Çok yüksek (beklenen)</span></td>
-                    </tr>
-                </tbody>
-            </table>
-            
-            <div class="highlight">
-                <strong>Sonuç:</strong> 85M parametre dil örüntülerini öğrenir, bilgi tabanı oluşturmaz.
-                Gerçek bilgi güvenilirliği için milyarlarca parametre ve RLHF/DPO gibi hizalama teknikleri gerekir.
-            </div>
-        </div>
-        
         <!-- Kullanım Örneği -->
         <div class="card">
             <div class="card-header">
@@ -842,6 +1301,7 @@ outputs = model.generate(
     max_new_tokens=100,
     temperature=0.8,
     top_k=50,
+    top_p=0.9,
     repetition_penalty=1.2,
     do_sample=True
 )
@@ -850,51 +1310,6 @@ print(tokenizer.decode(outputs[0], skip_special_tokens=True))</pre>
             </div>
         </div>
         
-        <!-- Uygun Kullanım Alanları -->
-        <div class="card">
-            <div class="card-header">
-                <h2>Kullanım Alanları</h2>
-            </div>
-            
-            <div class="two-column">
-                <div>
-                    <h4 style="color: var(--success); margin-bottom: 0.5rem;">Önerilen Kullanım</h4>
-                    <ul style="margin-left: 1.5rem;">
-                        <li>Türkçe NLP limitasyonları araştırması</li>
-                        <li>Pretraining baseline karşılaştırmaları</li>
-                        <li>Hallucination örüntü çalışmaları</li>
-                        <li>Eğitim amaçlı demonstrasyonlar</li>
-                        <li>LLM başarısızlık modlarını anlama</li>
-                    </ul>
-                </div>
-                <div>
-                    <h4 style="color: var(--accent); margin-bottom: 0.5rem;">Önerilmeyen Kullanım</h4>
-                    <ul style="margin-left: 1.5rem;">
-                        <li>Production uygulamaları</li>
-                        <li>Gerçek soru-cevap sistemleri</li>
-                        <li>Bilgi erişim sistemleri</li>
-                        <li>Eğitim içeriği üretimi</li>
-                        <li>Doğruluk gerektiren her iş</li>
-                    </ul>
-                </div>
-            </div>
-        </div>
-        
-        <!-- Gelecek Planları -->
-        <div class="card">
-            <div class="card-header">
-                <h2>Gelecek: Kayra-v2</h2>
-            </div>
-            
-            <ul style="margin-left: 1.5rem;">
-                <li><strong>Daha büyük model:</strong> 350M-750M parametre</li>
-                <li><strong>Daha iyi tokenizer:</strong> NFC Unicode normalization</li>
-                <li><strong>Instruction tuning:</strong> 10K doğrulanmış QA çifti</li>
-                <li><strong>Alignment:</strong> Gerçeklik için RLHF veya DPO</li>
-                <li><strong>Değerlendirme:</strong> Gerçek kontrol benchmark'ları</li>
-            </ul>
-        </div>
-        
         <!-- Lisans ve Atıf -->
         <div class="card">
             <div class="card-header">
@@ -952,7 +1367,8 @@ tokenizer_exp = AutoTokenizer.from_pretrained("sixfingerdev/kayra-1-exp")
 print("Modeller başarıyla yüklendi!")
 
 # ==================== YARDIMCI FONKSİYONLAR ====================
-def generate_response(model, tokenizer, prompt, max_new_tokens=150):
+def generate_response(model, tokenizer, prompt, max_new_tokens=150, temperature=0.7, 
+                      top_k=50, top_p=0.9, repetition_penalty=1.3):
     if model == model_stable:
         formatted_prompt = f"### Soru: {prompt}\n\n### Cevap:"
     else:
@@ -968,20 +1384,58 @@ def generate_response(model, tokenizer, prompt, max_new_tokens=150):
         outputs = model.generate(
             **inputs,
             max_new_tokens=max_new_tokens,
-            temperature=0.7,
+            temperature=temperature,
             do_sample=True,
-            top_p=0.9,
-            repetition_penalty=1.3,
+            top_k=top_k,
+            top_p=top_p,
+            repetition_penalty=repetition_penalty,
             pad_token_id=tokenizer.eos_token_id
         )
     
     response = tokenizer.decode(outputs[0], skip_special_tokens=True)
+    token_count = outputs.shape[1] - inputs['input_ids'].shape[1]
     
     if model == model_stable:
         if "### Cevap:" in response:
             response = response.split("### Cevap:")[-1].strip()
     
-    return response
+    return response, token_count
+
+def generate_stream(model, tokenizer, prompt, max_new_tokens=150, temperature=0.7,
+                    top_k=50, top_p=0.9, repetition_penalty=1.3):
+    """Generator function for streaming responses"""
+    if model == model_stable:
+        formatted_prompt = f"### Soru: {prompt}\n\n### Cevap:"
+    else:
+        formatted_prompt = prompt
+    
+    inputs = tokenizer(formatted_prompt, return_tensors="pt")
+    inputs = inputs.to(model.device)
+    
+    if "token_type_ids" in inputs:
+        inputs.pop("token_type_ids")
+    
+    streamer = TextIteratorStreamer(tokenizer, skip_prompt=True, skip_special_tokens=True)
+    
+    generation_kwargs = dict(
+        **inputs,
+        max_new_tokens=max_new_tokens,
+        temperature=temperature,
+        do_sample=True,
+        top_k=top_k,
+        top_p=top_p,
+        repetition_penalty=repetition_penalty,
+        pad_token_id=tokenizer.eos_token_id,
+        streamer=streamer
+    )
+    
+    thread = Thread(target=model.generate, kwargs=generation_kwargs)
+    thread.start()
+    
+    for text in streamer:
+        yield text
+    
+    thread.join()
 
 # ==================== ROUTE'LAR ====================
 @app.route("/")
@@ -998,22 +1452,93 @@ def generate():
     prompt = data.get("prompt", "").strip()
     model_choice = data.get("model", "stable")
     
+    # Get settings with defaults
+    max_tokens = data.get("max_tokens", 150)
+    temperature = data.get("temperature", 0.7)
+    top_k = data.get("top_k", 50)
+    top_p = data.get("top_p", 0.9)
+    repetition_penalty = data.get("repetition_penalty", 1.3)
+    
     if not prompt:
         return jsonify({"error": "Lütfen bir soru veya mesaj girin."})
     
     if model_choice == "stable":
-        response = generate_response(model_stable, tokenizer_stable, prompt)
+        response, token_count = generate_response(
+            model_stable, tokenizer_stable, prompt,
+            max_new_tokens=max_tokens,
+            temperature=temperature,
+            top_k=top_k,
+            top_p=top_p,
+            repetition_penalty=repetition_penalty
+        )
         model_name = "kayra-1 (Stable)"
     else:
-        response = generate_response(model_exp, tokenizer_exp, prompt)
+        response, token_count = generate_response(
+            model_exp, tokenizer_exp, prompt,
+            max_new_tokens=max_tokens,
+            temperature=temperature,
+            top_k=top_k,
+            top_p=top_p,
+            repetition_penalty=repetition_penalty
+        )
         model_name = "kayra-1-exp (Deneysel)"
     
     return jsonify({
         "model": model_name,
         "prompt": prompt,
-        "response": response
+        "response": response,
+        "token_count": token_count
     })
 
+@app.route("/generate_stream")
+def generate_stream_route():
+    prompt = request.args.get("prompt", "").strip()
+    model_choice = request.args.get("model", "stable")
+    
+    # Get settings with defaults
+    max_tokens = int(request.args.get("max_tokens", 150))
+    temperature = float(request.args.get("temperature", 0.7))
+    top_k = int(request.args.get("top_k", 50))
+    top_p = float(request.args.get("top_p", 0.9))
+    repetition_penalty = float(request.args.get("repetition_penalty", 1.3))
+    
+    if not prompt:
+        def error_gen():
+            yield f"data: {json.dumps({'error': 'Prompt gerekli'})}\n\n"
+        return Response(error_gen(), mimetype="text/event-stream")
+    
+    if model_choice == "stable":
+        model = model_stable
+        tokenizer = tokenizer_stable
+    else:
+        model = model_exp
+        tokenizer = tokenizer_exp
+    
+    def event_stream():
+        try:
+            for token in generate_stream(
+                model, tokenizer, prompt,
+                max_new_tokens=max_tokens,
+                temperature=temperature,
+                top_k=top_k,
+                top_p=top_p,
+                repetition_penalty=repetition_penalty
+            ):
+                yield f"data: {json.dumps({'token': token})}\n\n"
+            yield f"data: {json.dumps({'done': True})}\n\n"
+        except Exception as e:
+            yield f"data: {json.dumps({'error': str(e)})}\n\n"
+    
+    return Response(
+        event_stream(),
+        mimetype="text/event-stream",
+        headers={
+            "Cache-Control": "no-cache",
+            "Connection": "keep-alive",
+            "X-Accel-Buffering": "no"
+        }
+    )
+
 # ==================== UYGULAMA BAŞLATMA ====================
 if __name__ == "__main__":
-    app.run(host="0.0.0.0", port=7860, debug=False)
+    app.run(host="0.0.0.0", port=7860, debug=False, threaded=True)