Initial commit for HF Space

.gitignore

@@ -0,0 +1,19 @@
+# Python / Backend
+__pycache__/
+*.py[cod]
+*$py.class
+venv/
+.env
+.ipynb_checkpoints/
+
+# Node / Frontend
+node_modules/
+dist/
+.DS_Store
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+coverage/
+.vscode/
+.idea/

Dockerfile

@@ -0,0 +1,30 @@
+# Build Frontend
+FROM node:20 AS frontend-builder
+WORKDIR /app/frontend
+COPY frontend/package*.json ./
+RUN npm install
+COPY frontend .
+RUN npm run build
+
+# Setup Backend
+FROM python:3.10
+WORKDIR /app
+
+# Install dependencies
+COPY requirements.txt .
+RUN pip install --no-cache-dir -r requirements.txt
+
+# Copy Backend Code
+COPY backend ./backend
+# Note: .env might not be safe to copy if it has secrets, but for this context it's okay. 
+# Better to use HF Space Secrets.
+COPY .env .
+
+# Copy Built Frontend to Static Directory expected by backend.py
+COPY --from=frontend-builder /app/frontend/dist ./static
+
+# Expose port 7860
+EXPOSE 7860
+
+# Run Application
+CMD ["python", "backend/backend.py"]

README.md

@@ -0,0 +1,19 @@
+---
+title: Turkish AI Assistant
+emoji: 🇹🇷
+colorFrom: red
+colorTo: white
+sdk: docker
+app_port: 7860
+---
+
+# Turkish AI Assistant
+
+This is a Retrieval-Augmented Generation (RAG) agent or Fine-Tuned Model assistant capable of Turkish reasoning.
+
+## Deployment
+
+This space is built using Docker. It:
+1. Builds the React frontend (Vite).
+2. Sets up a FastAPI backend.
+3. Serves the frontend statically from the backend.

backend/backend.py

@@ -0,0 +1,238 @@
+from fastapi import FastAPI, HTTPException
+from fastapi.middleware.cors import CORSMiddleware
+from pydantic import BaseModel
+from transformers import AutoModelForCausalLM, AutoTokenizer, pipeline
+from peft import PeftModel, PeftConfig
+import gc
+import torch
+import os
+from typing import Optional
+from dotenv import load_dotenv
+
+# Load environment variables
+load_dotenv()
+
+app = FastAPI()
+
+# CORS ayarları - React uygulamanızın çalıştığı port'a izin verin
+app.add_middleware(
+    CORSMiddleware,
+    allow_origins=["http://localhost:5173", "http://localhost:3000"],  # Vite ve CRA portları
+    allow_credentials=True,
+    allow_methods=["*"],
+    allow_headers=["*"],
+)
+
+# Global variables
+current_model = None
+current_pipe = None
+current_model_name = None
+
+class GenerateRequest(BaseModel):
+    model_name: str
+    prompt: str
+    system_prompt: str
+    max_tokens: int = 512
+    temperature: float = 0.75
+    top_p: float = 0.95
+    top_k: int = 64
+    image: Optional[str] = None  # Base64 encoded image
+
+class GenerateResponse(BaseModel):
+    generated_text: str
+    model_used: str
+
+def load_model(model_path: str):
+    global current_model, current_pipe, current_model_name
+    
+    # Return existing pipeline if the model is already loaded
+    if current_pipe is not None and current_model_name == model_path:
+        return current_pipe
+
+    print(f"Unloading previous model to load: {model_path}")
+    
+    # Cleanup previous model
+    if current_model is not None:
+        del current_model
+    if current_pipe is not None:
+        del current_pipe
+    
+    gc.collect()
+    torch.cuda.empty_cache()
+    
+    try:
+        if "Gemma3-1B" in model_path:
+            print("Loading Gemma 3 1B with PEFT...")
+            base_model_name = "unsloth/gemma-3-1b-it"
+            tokenizer = AutoTokenizer.from_pretrained(base_model_name)
+            base_model = AutoModelForCausalLM.from_pretrained(
+                base_model_name,
+                device_map="auto",
+                dtype="auto"
+            )
+            model = PeftModel.from_pretrained(base_model, model_path)
+            pipe = pipeline("text-generation", model=model, tokenizer=tokenizer)
+            current_model = model
+
+        elif "Gemma3-12B" in model_path:
+            print("Loading Gemma 3 12B with PEFT (Image Support)...")
+            base_model_name = "unsloth/gemma-3-12b-it"
+            tokenizer = AutoTokenizer.from_pretrained(base_model_name)
+            base_model = AutoModelForCausalLM.from_pretrained(
+                base_model_name,
+                device_map="auto",
+                dtype="auto"
+            )
+            model = PeftModel.from_pretrained(base_model, model_path)
+            pipe = pipeline("text-generation", model=model, tokenizer=tokenizer)
+            current_model = model
+
+        elif "Qwen2.5-3B" in model_path:
+            print("Loading Qwen 2.5 3B...")
+            pipe = pipeline("text-generation", model=model_path, device=0)
+            current_model = pipe.model # Keep reference for simple consistency
+
+        elif "Llama3.1-8B" in model_path:
+            print("Loading Llama 3.1 8B...")
+            pipe = pipeline("text-generation", model=model_path, device=0)
+            current_model = pipe.model
+
+        else:
+            print(f"Unknown model pattern for {model_path}, trying default pipeline loading...")
+            pipe = pipeline("text-generation", model=model_path, device=0)
+            current_model = pipe.model
+
+        current_pipe = pipe
+        current_model_name = model_path
+        return pipe
+
+    except Exception as e:
+        print(f"Error loading model {model_path}: {str(e)}")
+        raise HTTPException(status_code=500, detail=f"Model loading failed: {str(e)}")
+
+# Initialize with default 1B model
+default_model = "Chan-Y/TurkishReasoner-Gemma3-1B"
+try:
+    load_model(default_model)
+except Exception as e:
+    print(f"Initial model loading failed (might be expected in dev env): {e}")
+
+@app.get("/")
+def read_root():
+    return {"message": "Turkish AI Backend API is running"}
+
+@app.get("/models")
+def get_models():
+    """Return available models"""
+    return {
+        "models": [
+            {
+                "name": "Gemma 3 1B Turkish Reasoning",
+                "path": "Chan-Y/TurkishReasoner-Gemma3-1B",
+                "supportsImages": False
+            },
+            {
+                "name": "Gemma 3 12B Turkish (Supports Images)",
+                "path": "Chan-Y/TurkishReasoner-Gemma3-12B",
+                "supportsImages": True
+            },
+            {
+                "name": "Qwen 2.5 3B Turkish Reasoning",
+                "path": "Chan-Y/TurkishReasoner-Qwen2.5-3B",
+                "supportsImages": False
+            },
+            {
+                "name": "Llama 3.1 8B Turkish Reasoning",
+                "path": "Chan-Y/TurkishReasoner-Llama3.1-8B",
+                "supportsImages": False
+            }
+        ]
+    }
+
+@app.post("/generate", response_model=GenerateResponse)
+async def generate_text(request: GenerateRequest):
+    """Generate text using the model"""
+    global current_pipe
+    
+    try:
+        # Load requested model if different
+        pipe = load_model(request.model_name)
+        
+        # Prepare message content
+        user_content = [{"type": "text", "text": request.prompt}]
+        
+        # Add image if provided and supported
+        if request.image and "Gemma3-12B" in request.model_name:
+            # Assuming the image string is a data:image/jpeg;base64,... URI
+            # Pipeline might expect a PIL image or a URL or strictly formatted dict
+            # Standard transformers pipeline behavior for image: 
+            # {"type": "image", "image": "base64_string_or_url"}
+            user_content.insert(0, {"type": "image", "image": request.image})
+        
+        messages = [
+            {
+                "role": "system",
+                "content": [{"type": "text", "text": request.system_prompt}]
+            },
+            {
+                "role": "user",
+                "content": user_content
+            },
+        ]
+        
+        # Clean up system prompt if empty or not supported by some models?
+        # Standard chat templates usually handle system prompts.
+        
+        print(f"Generating with {request.model_name}, temp={request.temperature}")
+        
+        output = pipe(
+            messages, 
+            max_new_tokens=request.max_tokens, 
+            temperature=request.temperature,
+            top_p=request.top_p,
+            top_k=request.top_k
+        )
+        
+        generated_text = output[0]["generated_text"][-1]["content"]
+        
+        return GenerateResponse(
+            generated_text=generated_text,
+            model_used=request.model_name
+        )
+        
+    except Exception as e:
+        print(f"Error during generation: {str(e)}")
+        raise HTTPException(status_code=500, detail=str(e))
+
+@app.post("/generate/stream")
+async def generate_text_stream(request: GenerateRequest):
+    """
+    Streaming endpoint for real-time generation
+    (Not implemented in this version - would use Server-Sent Events)
+    """
+    raise HTTPException(status_code=501, detail="Streaming not yet implemented")
+
+# --- Static Files Serving (for Deployment) ---
+from fastapi.staticfiles import StaticFiles
+from fastapi.responses import FileResponse
+
+# Check if static directory exists (it will in Docker)
+static_dir = "static"
+if os.path.exists(static_dir):
+    app.mount("/assets", StaticFiles(directory=f"{static_dir}/assets"), name="assets")
+    
+    # Catch-all for SPA (serve index.html)
+    @app.get("/{full_path:path}")
+    async def serve_spa(full_path: str):
+        # Allow API routes to pass through (though they match specifically defined routes first)
+        if full_path.startswith("api") or full_path.startswith("generate") or full_path.startswith("models"):
+             raise HTTPException(status_code=404, detail="Not found")
+        
+        # Serve index.html for everything else
+        return FileResponse(f"{static_dir}/index.html")
+else:
+    print("Static directory not found. Running in API-only mode.")
+
+if __name__ == "__main__":
+    import uvicorn
+    uvicorn.run(app, host="0.0.0.0", port=7860)

frontend/App.tsx

@@ -0,0 +1,467 @@
+import { useState, useEffect, useRef } from 'react';
+import { Sidebar } from './components/Sidebar';
+import { MessageList } from './components/MessageList';
+import { ChatInput } from './components/ChatInput';
+import { Chat, Message, ModelConfig, GenerationParams, MODELS, DEFAULT_SYSTEM_PROMPT } from './types';
+import { loadChats, saveChats, createNewChat, updateChatTitle } from './utils/chatStorage';
+import { generateResponse } from './utils/api';
+import { ChevronDown, Settings2 } from 'lucide-react';
+
+function App() {
+  const [chats, setChats] = useState<Chat[]>([]);
+  const [currentChatId, setCurrentChatId] = useState<string | null>(null);
+  const [selectedModel, setSelectedModel] = useState<ModelConfig>(MODELS[0]); // Default to Gemma 1B
+  const [systemPrompt, setSystemPrompt] = useState<string>(DEFAULT_SYSTEM_PROMPT);
+  const [generationParams, setGenerationParams] = useState<GenerationParams>({
+    temperature: 0.75,
+    maxTokens: 1024,
+    topP: 0.95,
+    topK: 64
+  });
+  const [selectedImage, setSelectedImage] = useState<string | null>(null);
+  const [isLoading, setIsLoading] = useState(false);
+  const [loadingStatus, setLoadingStatus] = useState<string>('');
+  const [isSidebarCollapsed, setIsSidebarCollapsed] = useState(false);
+  const [showAdvancedSettings, setShowAdvancedSettings] = useState(false);
+  const settingsDropdownRef = useRef<HTMLDivElement>(null);
+
+  // Load chats from localStorage on mount
+  useEffect(() => {
+    const loadedChats = loadChats();
+    setChats(loadedChats);
+  }, []);
+
+  // Close advanced settings dropdown when clicking outside
+  useEffect(() => {
+    const handleClickOutside = (event: MouseEvent) => {
+      if (settingsDropdownRef.current && !settingsDropdownRef.current.contains(event.target as Node)) {
+        setShowAdvancedSettings(false);
+      }
+    };
+
+    if (showAdvancedSettings) {
+      document.addEventListener('mousedown', handleClickOutside);
+    }
+
+    return () => {
+      document.removeEventListener('mousedown', handleClickOutside);
+    };
+  }, [showAdvancedSettings]);
+
+  // Get current chat
+  const currentChat = chats.find(chat => chat.id === currentChatId);
+
+  // Handle new chat
+  const handleNewChat = () => {
+    // Eğer mevcut sohbet varsa ve hiç mesajı yoksa, yeni sohbet açma
+    if (currentChat && currentChat.messages.length === 0) {
+      return;
+    }
+
+    const newChat = createNewChat(selectedModel.name);
+    const updatedChats = [newChat, ...chats];
+    setChats(updatedChats);
+    setCurrentChatId(newChat.id);
+    setSelectedImage(null);
+    saveChats(updatedChats);
+  };
+
+  // Handle chat selection
+  const handleSelectChat = (chatId: string) => {
+    setCurrentChatId(chatId);
+    setSelectedImage(null);
+    const chat = chats.find(c => c.id === chatId);
+    if (chat) {
+      const model = MODELS.find(m => m.name === chat.modelName);
+      if (model) setSelectedModel(model);
+    }
+  };
+
+  // Handle chat deletion
+  const handleDeleteChat = (chatId: string) => {
+    const updatedChats = chats.filter(chat => chat.id !== chatId);
+    setChats(updatedChats);
+    saveChats(updatedChats);
+    if (currentChatId === chatId) {
+      setCurrentChatId(null);
+      setSelectedImage(null);
+    }
+  };
+
+  // Handle model change
+  const handleModelChange = (model: ModelConfig) => {
+    setSelectedModel(model);
+    if (!model.supportsImages) {
+      setSelectedImage(null);
+    }
+
+    // Update current chat's model if exists
+    if (currentChat) {
+      const updatedChat = { ...currentChat, modelName: model.name };
+      const updatedChats = chats.map(c => c.id === currentChat.id ? updatedChat : c);
+      setChats(updatedChats);
+      saveChats(updatedChats);
+    }
+  };
+
+  // Handle sending message
+  // Handle sending message
+  const handleSendMessage = async (messageText: string) => {
+    // 1. SOHBET AYARLAMA (Yeni mi mevcut mu?)
+    let chatToUpdate = currentChat;
+    let updatedChats = [...chats];
+
+    if (!chatToUpdate) {
+      const newChat = createNewChat(selectedModel.name);
+      chatToUpdate = newChat;
+      updatedChats = [newChat, ...chats];
+      setChats(updatedChats);
+      setCurrentChatId(newChat.id);
+    }
+
+    // 2. KULLANICI MESAJINI EKLE
+    const userMessage: Message = {
+      role: 'user',
+      content: messageText,
+      image: selectedImage || undefined
+    };
+
+    let updatedMessages = [...chatToUpdate.messages, userMessage];
+
+    // 3. ASİSTAN İÇİN BOŞ BİR BALON EKLE (Loading spinner veya boş alan için)
+    const assistantMessage: Message = {
+      role: 'assistant',
+      content: '' // Şimdilik boş, en sonda dolacak
+    };
+    updatedMessages = [...updatedMessages, assistantMessage];
+
+    // Sohbet başlığını ve listesini güncelle
+    chatToUpdate = {
+      ...chatToUpdate,
+      messages: updatedMessages,
+      updatedAt: Date.now(),
+      title: chatToUpdate.messages.length === 0 ? messageText.slice(0, 30) : chatToUpdate.title
+    };
+
+    updatedChats = updatedChats.map(c => c.id === chatToUpdate!.id ? chatToUpdate! : c);
+    setChats(updatedChats);
+    saveChats(updatedChats);
+
+    // Resmi temizle
+    setSelectedImage(null);
+
+    // 4. YANIT ÜRETİMİ
+    setIsLoading(true);
+    setLoadingStatus('Yanıt hazırlanıyor...');
+
+    // Gelen cevabı burada tutacağız (State'e hemen atmıyoruz)
+    let finalGeneratedText = "";
+
+    try {
+      await generateResponse({
+        model_name: selectedModel.path,
+        prompt: messageText,
+        system_prompt: systemPrompt,
+        max_tokens: generationParams.maxTokens,
+        temperature: generationParams.temperature,
+        top_p: generationParams.topP,
+        top_k: generationParams.topK,
+        image: userMessage.image,
+
+        // Streaming verisini alıyoruz ama EKRANA BASMIYORUZ (State güncellemiyoruz)
+        onToken: (streamedContent) => {
+          finalGeneratedText = streamedContent;
+        },
+        onProgress: (progress) => {
+          if (progress.message) setLoadingStatus(progress.message);
+        }
+      });
+
+      // 5. İŞLEM BİTTİ: ŞİMDİ TEK SEFERDE GÜNCELLE
+      setChats(currentChats => {
+        return currentChats.map(chat => {
+          if (chat.id === chatToUpdate!.id) {
+            const newMessages = [...chat.messages];
+            const lastMsgIndex = newMessages.length - 1;
+
+            // Son mesajı (boş olan asistan mesajını) tam metinle güncelle
+            newMessages[lastMsgIndex] = {
+              ...newMessages[lastMsgIndex],
+              content: finalGeneratedText // Hepsini tekte basıyoruz
+            };
+
+            return { ...chat, messages: newMessages };
+          }
+          return chat;
+        });
+      });
+
+      // Son halini kaydet
+      // Not: setChats asenkron olduğu için garanti olsun diye updatedChats üzerinden 
+      // manuel bir güncelleme yapıp saveChats'e gönderebiliriz ama 
+      // bir sonraki render'da saveChats çalışacağı için bu hali de yeterlidir.
+
+    } catch (error) {
+      console.error('Error generating response:', error);
+
+      // Hata durumunda güncelleme
+      setChats(currentChats => {
+        const newChats = currentChats.map(chat => {
+          if (chat.id === chatToUpdate!.id) {
+            const newMessages = [...chat.messages];
+            const lastMsgIndex = newMessages.length - 1;
+            newMessages[lastMsgIndex] = {
+              role: 'assistant',
+              content: `❌ Hata: ${error instanceof Error ? error.message : 'Bir hata oluştu.'}`
+            };
+            return { ...chat, messages: newMessages };
+          }
+          return chat;
+        });
+        saveChats(newChats);
+        return newChats;
+      });
+    } finally {
+      setIsLoading(false);
+      setLoadingStatus('');
+    }
+  };
+
+  return (
+    <div className="flex h-screen bg-gray-100 dark:bg-gray-950 transition-colors">
+      {/* Sidebar */}
+      <Sidebar
+        chats={chats}
+        currentChatId={currentChatId}
+        onSelectChat={handleSelectChat}
+        onNewChat={handleNewChat}
+        onDeleteChat={handleDeleteChat}
+        isCollapsed={isSidebarCollapsed}
+        onToggleCollapse={() => setIsSidebarCollapsed(!isSidebarCollapsed)}
+      />
+
+      {/* Main Content */}
+      <div className="flex-1 flex flex-col overflow-hidden">
+        {/* Header with Model Selector and Settings */}
+        <div className="bg-white dark:bg-gray-900 border-b border-gray-200 dark:border-gray-800 px-6 py-3 transition-colors">
+          <div className="flex items-center justify-between">
+            {/* Left: Model Selector */}
+            <div className="relative">
+              <select
+                value={selectedModel.name}
+                onChange={(e) => {
+                  const model = MODELS.find(m => m.name === e.target.value);
+                  if (model) handleModelChange(model);
+                }}
+                className="appearance-none px-3 py-1.5 pr-8 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-600 focus:border-transparent bg-white dark:bg-gray-800 text-sm text-gray-900 dark:text-gray-100 transition-all cursor-pointer"
+              >
+                {MODELS.map((model) => (
+                  <option key={model.path} value={model.name}>
+                    {model.name}
+                  </option>
+                ))}
+              </select>
+              <ChevronDown
+                className="absolute right-2 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500 pointer-events-none"
+                size={16}
+              />
+            </div>
+
+            {/* Center: Title (only when chat has messages) */}
+            {currentChat?.messages.length ? (
+              <div className="flex-1 text-center">
+                <p className="text-sm text-gray-600 dark:text-gray-400 truncate px-4">
+                  {currentChat.title}
+                </p>
+              </div>
+            ) : (
+              <div className="flex-1"></div>
+            )}
+
+            {/* Right: Advanced Settings */}
+            <div className="relative" ref={settingsDropdownRef}>
+              <button
+                onClick={() => setShowAdvancedSettings(!showAdvancedSettings)}
+                className="flex items-center gap-2 px-3 py-1.5 text-sm text-gray-700 dark:text-gray-300 hover:bg-gray-100 dark:hover:bg-gray-800 rounded-lg transition-colors"
+              >
+                <Settings2 size={18} />
+                <span>Gelişmiş ayarlar</span>
+              </button>
+
+              {/* Advanced Settings Dropdown */}
+              {showAdvancedSettings && (
+                <div className="absolute right-0 top-full mt-2 w-96 bg-white dark:bg-gray-800 border border-gray-200 dark:border-gray-700 rounded-lg shadow-xl z-50 max-h-[70vh] overflow-y-auto">
+                  <div className="p-4">
+                    <div className="flex items-center justify-between mb-4">
+                      <h3 className="font-semibold text-gray-900 dark:text-gray-100">Gelişmiş Ayarlar</h3>
+                      <button
+                        onClick={() => setShowAdvancedSettings(false)}
+                        className="text-gray-400 hover:text-gray-600 dark:hover:text-gray-300"
+                      >
+                        ✕
+                      </button>
+                    </div>
+
+                    {/* Settings Content Directly */}
+                    <div className="space-y-4">
+                      {/* System Prompt */}
+                      <div>
+                        <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+                          Sistem Prompt
+                        </label>
+                        <textarea
+                          value={systemPrompt}
+                          onChange={(e) => setSystemPrompt(e.target.value)}
+                          rows={4}
+                          className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-600 focus:border-transparent resize-none transition-all text-sm"
+                          placeholder="Sistem talimatlarını buraya girin..."
+                        />
+                        <button
+                          onClick={() => setSystemPrompt(DEFAULT_SYSTEM_PROMPT)}
+                          className="mt-2 flex items-center gap-1.5 text-xs text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 transition-colors"
+                        >
+                          <span>🔄</span>
+                          Varsayılana Dön
+                        </button>
+                      </div>
+
+                      {/* Temperature */}
+                      <div>
+                        <div className="flex justify-between items-center mb-2">
+                          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                            Temperature
+                          </label>
+                          <span className="text-sm font-mono text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 px-2 py-0.5 rounded">
+                            {generationParams.temperature.toFixed(1)}
+                          </span>
+                        </div>
+                        <input
+                          type="range"
+                          min="0"
+                          max="1"
+                          step="0.1"
+                          value={generationParams.temperature}
+                          onChange={(e) =>
+                            setGenerationParams({ ...generationParams, temperature: parseFloat(e.target.value) })
+                          }
+                          className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-600"
+                        />
+                        <p className="text-xs text-gray-500 dark:text-gray-400 mt-1.5">
+                          Düşük: daha tutarlı • Yüksek: daha yaratıcı
+                        </p>
+                      </div>
+
+                      {/* Max Tokens */}
+                      <div>
+                        <div className="flex justify-between items-center mb-2">
+                          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                            Max New Tokens
+                          </label>
+                          <span className="text-sm font-mono text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 px-2 py-0.5 rounded">
+                            {generationParams.maxTokens}
+                          </span>
+                        </div>
+                        <input
+                          type="range"
+                          min="64"
+                          max="4096"
+                          step="64"
+                          value={generationParams.maxTokens}
+                          onChange={(e) =>
+                            setGenerationParams({ ...generationParams, maxTokens: parseInt(e.target.value) })
+                          }
+                          className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-600"
+                        />
+                      </div>
+
+                      {/* Top-p */}
+                      <div>
+                        <div className="flex justify-between items-center mb-2">
+                          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                            Top-p (Nucleus Sampling)
+                          </label>
+                          <span className="text-sm font-mono text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 px-2 py-0.5 rounded">
+                            {generationParams.topP.toFixed(2)}
+                          </span>
+                        </div>
+                        <input
+                          type="range"
+                          min="0.1"
+                          max="1"
+                          step="0.05"
+                          value={generationParams.topP}
+                          onChange={(e) =>
+                            setGenerationParams({ ...generationParams, topP: parseFloat(e.target.value) })
+                          }
+                          className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-600"
+                        />
+                      </div>
+
+                      {/* Top-k */}
+                      <div>
+                        <div className="flex justify-between items-center mb-2">
+                          <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                            Top-k
+                          </label>
+                          <span className="text-sm font-mono text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 px-2 py-0.5 rounded">
+                            {generationParams.topK}
+                          </span>
+                        </div>
+                        <input
+                          type="range"
+                          min="1"
+                          max="100"
+                          step="1"
+                          value={generationParams.topK}
+                          onChange={(e) =>
+                            setGenerationParams({ ...generationParams, topK: parseInt(e.target.value) })
+                          }
+                          className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-600"
+                        />
+                      </div>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          </div>
+        </div>
+
+        {/* Chat Area or Welcome Screen */}
+        {currentChat?.messages.length ? (
+          <MessageList messages={currentChat.messages} />
+        ) : (
+          <div className="flex-1 flex flex-col items-center justify-center bg-gray-50 dark:bg-gray-950 px-4">
+            <div className="w-full max-w-3xl mx-auto text-center space-y-8">
+              {/* Main Welcome Text */}
+              <h1 className="text-4xl md:text-5xl lg:text-6xl font-medium text-gray-800 dark:text-gray-100">
+                Sen hazır olduğunda hazırım.
+              </h1>
+            </div>
+          </div>
+        )}
+
+        {/* Chat Input */}
+        <div className="bg-gray-50 dark:bg-gray-950 px-4 py-6">
+          {/* Loading Status */}
+          {loadingStatus && (
+            <div className="w-full max-w-4xl mx-auto mb-3 px-4 py-2 bg-blue-50 dark:bg-blue-900/20 border border-blue-200 dark:border-blue-800 rounded-lg">
+              <p className="text-sm text-blue-700 dark:text-blue-300 text-center">
+                {loadingStatus}
+              </p>
+            </div>
+          )}
+          <ChatInput
+            onSend={handleSendMessage}
+            isLoading={isLoading}
+            onImageSelect={setSelectedImage}
+            currentImage={selectedImage}
+            supportsImages={selectedModel.supportsImages}
+          />
+        </div>
+      </div>
+    </div>
+  );
+}
+
+export default App;

frontend/components/AdvancedSettings.tsx

@@ -0,0 +1,158 @@
+import React, { useState } from 'react';
+import { GenerationParams, DEFAULT_SYSTEM_PROMPT } from '../types';
+import { ChevronDown, ChevronUp, Settings, RotateCcw } from 'lucide-react';
+
+interface AdvancedSettingsProps {
+  params: GenerationParams;
+  systemPrompt: string;
+  onParamsChange: (params: GenerationParams) => void;
+  onSystemPromptChange: (prompt: string) => void;
+}
+
+export const AdvancedSettings: React.FC<AdvancedSettingsProps> = ({
+  params,
+  systemPrompt,
+  onParamsChange,
+  onSystemPromptChange
+}) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  return (
+    <div className="border border-gray-200 dark:border-gray-700 rounded-lg overflow-hidden bg-white dark:bg-gray-800 transition-colors">
+      <button
+        onClick={() => setIsOpen(!isOpen)}
+        className="w-full flex items-center justify-between px-4 py-3 text-left hover:bg-gray-50 dark:hover:bg-gray-700/50 transition-colors"
+      >
+        <div className="flex items-center gap-2">
+          <Settings size={18} className="text-gray-500 dark:text-gray-400" />
+          <span className="font-medium text-gray-700 dark:text-gray-300">Gelişmiş Ayarlar</span>
+        </div>
+        {isOpen ? (
+          <ChevronUp size={20} className="text-gray-400 dark:text-gray-500" />
+        ) : (
+          <ChevronDown size={20} className="text-gray-400 dark:text-gray-500" />
+        )}
+      </button>
+
+      {isOpen && (
+        <div className="px-4 pb-4 space-y-4 border-t border-gray-200 dark:border-gray-700 pt-4 bg-gray-50 dark:bg-gray-800/50">
+          {/* System Prompt */}
+          <div>
+            <label className="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+              Sistem Prompt
+            </label>
+            <textarea
+              value={systemPrompt}
+              onChange={(e) => onSystemPromptChange(e.target.value)}
+              rows={4}
+              className="w-full px-3 py-2 border border-gray-300 dark:border-gray-700 bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 rounded-lg focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-600 focus:border-transparent resize-none transition-all text-sm"
+              placeholder="Sistem talimatlarını buraya girin..."
+            />
+            <button
+              onClick={() => onSystemPromptChange(DEFAULT_SYSTEM_PROMPT)}
+              className="mt-2 flex items-center gap-1.5 text-xs text-primary-600 dark:text-primary-400 hover:text-primary-700 dark:hover:text-primary-300 transition-colors"
+            >
+              <RotateCcw size={12} />
+              Varsayılana Dön
+            </button>
+          </div>
+
+          {/* Temperature */}
+          <div>
+            <div className="flex justify-between items-center mb-2">
+              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Temperature
+              </label>
+              <span className="text-sm font-mono text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 px-2 py-0.5 rounded">
+                {params.temperature.toFixed(1)}
+              </span>
+            </div>
+            <input
+              type="range"
+              min="0"
+              max="1"
+              step="0.1"
+              value={params.temperature}
+              onChange={(e) =>
+                onParamsChange({ ...params, temperature: parseFloat(e.target.value) })
+              }
+              className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-600"
+            />
+            <p className="text-xs text-gray-500 dark:text-gray-400 mt-1.5">
+              Düşük: daha tutarlı • Yüksek: daha yaratıcı
+            </p>
+          </div>
+
+          {/* Max Tokens */}
+          <div>
+            <div className="flex justify-between items-center mb-2">
+              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Max New Tokens
+              </label>
+              <span className="text-sm font-mono text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 px-2 py-0.5 rounded">
+                {params.maxTokens}
+              </span>
+            </div>
+            <input
+              type="range"
+              min="64"
+              max="4096"
+              step="64"
+              value={params.maxTokens}
+              onChange={(e) =>
+                onParamsChange({ ...params, maxTokens: parseInt(e.target.value) })
+              }
+              className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-600"
+            />
+          </div>
+
+          {/* Top-p */}
+          <div>
+            <div className="flex justify-between items-center mb-2">
+              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Top-p (Nucleus Sampling)
+              </label>
+              <span className="text-sm font-mono text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 px-2 py-0.5 rounded">
+                {params.topP.toFixed(2)}
+              </span>
+            </div>
+            <input
+              type="range"
+              min="0.1"
+              max="1"
+              step="0.05"
+              value={params.topP}
+              onChange={(e) =>
+                onParamsChange({ ...params, topP: parseFloat(e.target.value) })
+              }
+              className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-600"
+            />
+          </div>
+
+          {/* Top-k */}
+          <div>
+            <div className="flex justify-between items-center mb-2">
+              <label className="text-sm font-medium text-gray-700 dark:text-gray-300">
+                Top-k
+              </label>
+              <span className="text-sm font-mono text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 px-2 py-0.5 rounded">
+                {params.topK}
+              </span>
+            </div>
+            <input
+              type="range"
+              min="1"
+              max="100"
+              step="1"
+              value={params.topK}
+              onChange={(e) =>
+                onParamsChange({ ...params, topK: parseInt(e.target.value) })
+              }
+              className="w-full h-2 bg-gray-200 dark:bg-gray-700 rounded-lg appearance-none cursor-pointer accent-primary-600"
+            />
+          </div>
+        </div>
+      )}
+    </div>
+  );
+};

frontend/components/ChatInput.tsx

@@ -0,0 +1,139 @@
+import React, { useState, KeyboardEvent, useRef } from 'react';
+import { Send, Loader2, Plus, X } from 'lucide-react';
+
+interface ChatInputProps {
+  onSend: (message: string) => void;
+  disabled?: boolean;
+  isLoading?: boolean;
+  onImageSelect?: (image: string | null) => void;
+  currentImage?: string | null;
+  supportsImages?: boolean;
+}
+
+export const ChatInput: React.FC<ChatInputProps> = ({ 
+  onSend, 
+  disabled = false, 
+  isLoading = false,
+  onImageSelect,
+  currentImage,
+  supportsImages = false
+}) => {
+  const [input, setInput] = useState('');
+  const [preview, setPreview] = useState<string | null>(currentImage || null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+
+  const handleSend = () => {
+    if (input.trim() && !disabled && !isLoading) {
+      onSend(input.trim());
+      setInput('');
+    }
+  };
+
+  const handleKeyPress = (e: KeyboardEvent<HTMLTextAreaElement>) => {
+    if (e.key === 'Enter' && !e.shiftKey) {
+      e.preventDefault();
+      handleSend();
+    }
+  };
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const result = reader.result as string;
+        setPreview(result);
+        onImageSelect?.(result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleRemoveImage = () => {
+    setPreview(null);
+    onImageSelect?.(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  // Update preview when currentImage changes
+  React.useEffect(() => {
+    setPreview(currentImage || null);
+  }, [currentImage]);
+
+  return (
+    <div className="w-full max-w-4xl mx-auto">
+      {/* Image Preview */}
+      {preview && (
+        <div className="mb-3 relative inline-block">
+          <img
+            src={preview}
+            alt="Preview"
+            className="max-w-xs h-32 object-contain rounded-lg border border-gray-300 dark:border-gray-700"
+          />
+          <button
+            onClick={handleRemoveImage}
+            className="absolute -top-2 -right-2 p-1 bg-red-500 hover:bg-red-600 text-white rounded-full transition-all shadow-lg"
+          >
+            <X size={14} />
+          </button>
+        </div>
+      )}
+      
+      <div className="relative flex items-center gap-2 bg-white dark:bg-gray-800 rounded-3xl shadow-lg border border-gray-200 dark:border-gray-700 px-3 py-3 transition-all focus-within:shadow-xl focus-within:border-primary-500 dark:focus-within:border-primary-600">
+        {/* Hidden File Input */}
+        <input
+          ref={fileInputRef}
+          type="file"
+          accept="image/*"
+          onChange={handleFileChange}
+          className="hidden"
+          disabled={!supportsImages}
+        />
+        
+        {/* Plus Button for Image Upload */}
+        <button
+          onClick={() => fileInputRef.current?.click()}
+          disabled={!supportsImages}
+          className={`flex-shrink-0 w-8 h-8 rounded-lg flex items-center justify-center transition-all ${
+            supportsImages
+              ? 'hover:bg-gray-100 dark:hover:bg-gray-700 text-gray-600 dark:text-gray-400'
+              : 'text-gray-300 dark:text-gray-600 cursor-not-allowed'
+          }`}
+          title={supportsImages ? "Resim yükle" : "Bu model resim desteklemiyor"}
+        >
+          <Plus size={20} />
+        </button>
+
+        <textarea
+          value={input}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyPress={handleKeyPress}
+          placeholder="Herhangi bir şey sor"
+          rows={1}
+          disabled={disabled || isLoading}
+          className="flex-1 bg-transparent text-gray-900 dark:text-gray-100 resize-none border-none focus:outline-none focus:ring-0 placeholder:text-gray-400 dark:placeholder:text-gray-500 disabled:cursor-not-allowed"
+          style={{ minHeight: '24px', maxHeight: '120px' }}
+          onInput={(e) => {
+            const target = e.target as HTMLTextAreaElement;
+            target.style.height = 'auto';
+            target.style.height = Math.min(target.scrollHeight, 120) + 'px';
+          }}
+        />
+        <button
+          onClick={handleSend}
+          disabled={!input.trim() || disabled || isLoading}
+          className="flex-shrink-0 w-8 h-8 bg-gray-200 hover:bg-gray-300 dark:bg-gray-700 dark:hover:bg-gray-600 disabled:bg-gray-100 dark:disabled:bg-gray-800 disabled:cursor-not-allowed rounded-lg flex items-center justify-center transition-all"
+        >
+          {isLoading ? (
+            <Loader2 size={18} className="animate-spin text-gray-600 dark:text-gray-400" />
+          ) : (
+            <Send size={18} className="text-gray-600 dark:text-gray-300" />
+          )}
+        </button>
+      </div>
+
+    </div>
+  );
+};

frontend/components/ImageUpload.tsx

@@ -0,0 +1,100 @@
+import React, { useRef, useState } from 'react';
+import { Upload, X, Image as ImageIcon } from 'lucide-react';
+
+interface ImageUploadProps {
+  onImageSelect: (image: string | null) => void;
+  currentImage: string | null;
+  disabled?: boolean;
+}
+
+export const ImageUpload: React.FC<ImageUploadProps> = ({
+  onImageSelect,
+  currentImage,
+  disabled = false
+}) => {
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const [preview, setPreview] = useState<string | null>(currentImage);
+
+  const handleFileChange = (e: React.ChangeEvent<HTMLInputElement>) => {
+    const file = e.target.files?.[0];
+    if (file) {
+      const reader = new FileReader();
+      reader.onloadend = () => {
+        const result = reader.result as string;
+        setPreview(result);
+        onImageSelect(result);
+      };
+      reader.readAsDataURL(file);
+    }
+  };
+
+  const handleRemove = () => {
+    setPreview(null);
+    onImageSelect(null);
+    if (fileInputRef.current) {
+      fileInputRef.current.value = '';
+    }
+  };
+
+  const handleClick = () => {
+    if (!disabled) {
+      fileInputRef.current?.click();
+    }
+  };
+
+  return (
+    <div>
+      <label className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+        <ImageIcon size={16} />
+        Resim Yükle
+        {disabled && <span className="text-gray-400 dark:text-gray-600 text-xs font-normal">(Sadece Gemma 3 12B)</span>}
+      </label>
+
+      <input
+        ref={fileInputRef}
+        type="file"
+        accept="image/*"
+        onChange={handleFileChange}
+        className="hidden"
+        disabled={disabled}
+      />
+
+      {preview ? (
+        <div className="relative inline-block group">
+          <img
+            src={preview}
+            alt="Preview"
+            className="max-w-full h-40 object-contain rounded-lg border-2 border-gray-200 dark:border-gray-700"
+          />
+          <button
+            onClick={handleRemove}
+            className="absolute top-2 right-2 p-1.5 bg-red-500 hover:bg-red-600 text-white rounded-lg transition-all shadow-lg opacity-0 group-hover:opacity-100"
+          >
+            <X size={16} />
+          </button>
+        </div>
+      ) : (
+        <button
+          onClick={handleClick}
+          disabled={disabled}
+          className={`w-full border-2 border-dashed rounded-lg p-6 text-center transition-all ${
+            disabled
+              ? 'border-gray-200 dark:border-gray-800 bg-gray-50 dark:bg-gray-900 cursor-not-allowed'
+              : 'border-gray-300 dark:border-gray-700 hover:border-primary-400 dark:hover:border-primary-600 hover:bg-primary-50 dark:hover:bg-primary-900/10 cursor-pointer'
+          }`}
+        >
+          <Upload 
+            className={`mx-auto mb-2 ${disabled ? 'text-gray-300 dark:text-gray-700' : 'text-gray-400 dark:text-gray-500'}`} 
+            size={28} 
+          />
+          <p className={`text-sm ${disabled ? 'text-gray-400 dark:text-gray-600' : 'text-gray-600 dark:text-gray-400'}`}>
+            {disabled ? 'Resim yüklemek için görsel destekli model seçin' : 'Resim yüklemek için tıklayın'}
+          </p>
+          {!disabled && (
+            <p className="text-xs text-gray-500 dark:text-gray-500 mt-1">PNG, JPG, GIF</p>
+          )}
+        </button>
+      )}
+    </div>
+  );
+};

frontend/components/MessageList.tsx

@@ -0,0 +1,107 @@
+import React from 'react';
+import { Message } from '../types';
+import { User, Bot, Sparkles } from 'lucide-react';
+
+interface MessageListProps {
+  messages: Message[];
+}
+
+export const MessageList: React.FC<MessageListProps> = ({ messages }) => {
+  const formatMessage = (content: string) => {
+    // Split by solution tags for better formatting
+    const parts = content.split(/(<start_working_out>|<end_working_out>|<SOLUTION>|<\/SOLUTION>)/g);
+    
+    return parts.map((part, idx) => {
+      if (part === '<start_working_out>') {
+        return (
+          <div key={idx} className="inline-flex items-center gap-2 text-primary-600 dark:text-primary-400 font-semibold mt-3 mb-2">
+            <Sparkles size={16} className="flex-shrink-0" />
+            <span className="leading-none">Düşünme Süreci</span>
+          </div>
+        );
+      } else if (part === '<end_working_out>') {
+        return null;
+      } else if (part === '<SOLUTION>') {
+        return (
+          <div key={idx} className="inline-flex items-center gap-2 text-green-600 dark:text-green-400 font-semibold mt-4 mb-2">
+            <svg className="w-4 h-4 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
+            </svg>
+            <span className="leading-none">Çözüm</span>
+          </div>
+        );
+      } else if (part === '</SOLUTION>') {
+        return null;
+      } else if (part.trim()) {
+        return <div key={idx} className="whitespace-pre-wrap leading-relaxed">{part.trim()}</div>;
+      }
+      return null;
+    });
+  };
+
+  if (messages.length === 0) {
+    return (
+      <div className="flex-1 flex items-center justify-center text-gray-400 dark:text-gray-600 bg-gray-50 dark:bg-gray-900">
+        <div className="text-center max-w-md px-4">
+          <div className="w-20 h-20 bg-gradient-to-br from-primary-100 to-primary-200 dark:from-primary-900/30 dark:to-primary-800/30 rounded-2xl flex items-center justify-center mx-auto mb-4">
+            <Bot size={40} className="text-primary-600 dark:text-primary-400" />
+          </div>
+          <h3 className="text-xl font-semibold text-gray-700 dark:text-gray-300 mb-2">
+            Sohbete Başlayın
+          </h3>
+          <p className="text-sm text-gray-500 dark:text-gray-400">
+            Türkçe AI modeliyle muhakeme sorularınızı sorun ve detaylı açıklamalar alın
+          </p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex-1 overflow-y-auto px-4 py-6 space-y-6 bg-white dark:bg-gray-950">
+      <div className="max-w-3xl mx-auto space-y-6">
+        {messages.map((message, idx) => {
+          if (message.role === 'system') return null;
+
+          return (
+            <div
+              key={idx}
+              className="flex gap-4 group"
+            >
+              {/* Avatar */}
+              <div className="flex-shrink-0">
+                {message.role === 'assistant' ? (
+                  <div className="w-7 h-7 bg-primary-600 rounded-sm flex items-center justify-center">
+                    <Bot size={16} className="text-white" />
+                  </div>
+                ) : (
+                  <div className="w-7 h-7 bg-gray-700 dark:bg-gray-600 rounded-sm flex items-center justify-center">
+                    <User size={16} className="text-white" />
+                  </div>
+                )}
+              </div>
+
+              {/* Message Content */}
+              <div className="flex-1 min-w-0 pt-1">
+                {message.image && (
+                  <img
+                    src={message.image}
+                    alt="User upload"
+                    className="max-w-sm rounded-lg mb-3 border border-gray-200 dark:border-gray-700"
+                  />
+                )}
+                <div className="text-sm text-gray-800 dark:text-gray-200 leading-relaxed">
+                  {message.role === 'assistant' ? (
+                    formatMessage(message.content)
+                  ) : (
+                    <div className="whitespace-pre-wrap">{message.content}</div>
+                  )}
+                </div>
+              </div>
+            </div>
+          );
+        })}
+      </div>
+    </div>
+  );
+};

frontend/components/ModelSelector.tsx

@@ -0,0 +1,50 @@
+import React from 'react';
+import { MODELS, ModelConfig } from '../types';
+import { ChevronDown, Cpu } from 'lucide-react';
+
+interface ModelSelectorProps {
+  selectedModel: ModelConfig;
+  onModelChange: (model: ModelConfig) => void;
+}
+
+export const ModelSelector: React.FC<ModelSelectorProps> = ({
+  selectedModel,
+  onModelChange
+}) => {
+  return (
+    <div className="relative">
+      <label className="flex items-center gap-2 text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
+        <Cpu size={16} />
+        Model Seçimi
+      </label>
+      <div className="relative">
+        <select
+          value={selectedModel.name}
+          onChange={(e) => {
+            const model = MODELS.find(m => m.name === e.target.value);
+            if (model) onModelChange(model);
+          }}
+          className="w-full appearance-none px-4 py-2.5 pr-10 border border-gray-300 dark:border-gray-700 rounded-lg focus:ring-2 focus:ring-primary-500 dark:focus:ring-primary-600 focus:border-transparent bg-white dark:bg-gray-800 text-gray-900 dark:text-gray-100 transition-all"
+        >
+          {MODELS.map((model) => (
+            <option key={model.path} value={model.name}>
+              {model.name}
+            </option>
+          ))}
+        </select>
+        <ChevronDown
+          className="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-500 pointer-events-none"
+          size={20}
+        />
+      </div>
+      {selectedModel.supportsImages && (
+        <div className="mt-2 flex items-center gap-1.5 text-xs text-primary-600 dark:text-primary-400 bg-primary-50 dark:bg-primary-900/20 px-2.5 py-1.5 rounded-md w-fit">
+          <svg className="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
+          </svg>
+          <span>Resim desteği aktif</span>
+        </div>
+      )}
+    </div>
+  );
+};

frontend/components/Sidebar.tsx

@@ -0,0 +1,193 @@
+import React, { useState } from 'react';
+import { Chat } from '../types';
+import { MessageSquarePlus, MessageSquare, Trash2, Moon, Sun, PanelLeftClose, PanelLeft, Search } from 'lucide-react';
+import { useTheme } from '../contexts/ThemeContext';
+
+interface SidebarProps {
+  chats: Chat[];
+  currentChatId: string | null;
+  onSelectChat: (chatId: string) => void;
+  onNewChat: () => void;
+  onDeleteChat: (chatId: string) => void;
+  isCollapsed: boolean;
+  onToggleCollapse: () => void;
+}
+
+export const Sidebar: React.FC<SidebarProps> = ({
+  chats,
+  currentChatId,
+  onSelectChat,
+  onNewChat,
+  onDeleteChat,
+  isCollapsed,
+  onToggleCollapse
+}) => {
+  const { theme, toggleTheme } = useTheme();
+  const [searchQuery, setSearchQuery] = useState('');
+  const [isSearchOpen, setIsSearchOpen] = useState(false);
+  const searchInputRef = React.useRef<HTMLInputElement>(null);
+
+  // Sohbetleri arama terimine göre filtrele
+  const filteredChats = chats.filter(chat =>
+    chat.title.toLowerCase().includes(searchQuery.toLowerCase())
+  );
+
+  // Arama açıldığında input'a focus yap
+  React.useEffect(() => {
+    if (isSearchOpen && searchInputRef.current) {
+      searchInputRef.current.focus();
+    }
+  }, [isSearchOpen]);
+
+  return (
+    <div className={`${isCollapsed ? 'w-14' : 'w-72'} bg-gray-900 dark:bg-gray-100 border-r border-gray-800 dark:border-gray-300 flex flex-col h-screen transition-all duration-300`}>
+      {/* Header */}
+      <div className="p-2 space-y-1">
+        {!isCollapsed ? (
+          <>
+            <button
+              onClick={onToggleCollapse}
+              className="w-full flex items-center px-3 py-2 text-gray-400 dark:text-gray-600 hover:text-gray-200 dark:hover:text-gray-900 hover:bg-gray-800 dark:hover:bg-gray-200 rounded-lg transition-all"
+              title="Sidebar'ı Daralt"
+            >
+              <PanelLeftClose size={18} />
+            </button>
+            <button
+              onClick={onNewChat}
+              className="w-full flex items-center gap-2 px-3 py-2.5 text-gray-200 dark:text-gray-900 hover:bg-gray-800 dark:hover:bg-gray-200 rounded-lg transition-all font-medium text-sm"
+            >
+              <MessageSquarePlus size={18} />
+              <span>Yeni sohbet</span>
+            </button>
+            {/* Search Input */}
+            {!isSearchOpen ? (
+              <button
+                onClick={() => setIsSearchOpen(true)}
+                className="w-full flex items-center gap-2 px-3 py-2 text-gray-400 dark:text-gray-600 hover:text-gray-200 dark:hover:text-gray-900 hover:bg-gray-800 dark:hover:bg-gray-200 rounded-lg transition-all text-sm"
+              >
+                <Search size={18} />
+                <span>Sohbet ara</span>
+              </button>
+            ) : (
+              <div className="relative">
+                <Search size={16} className="absolute left-3 top-1/2 transform -translate-y-1/2 text-gray-400 dark:text-gray-600" />
+                <input
+                  ref={searchInputRef}
+                  type="text"
+                  placeholder="Sohbet ara..."
+                  value={searchQuery}
+                  onChange={(e) => setSearchQuery(e.target.value)}
+                  onBlur={() => {
+                    if (!searchQuery) {
+                      setIsSearchOpen(false);
+                    }
+                  }}
+                  className="w-full pl-9 pr-3 py-2 bg-gray-800 dark:bg-gray-200 text-gray-200 dark:text-gray-900 placeholder-gray-500 dark:placeholder-gray-600 rounded-lg text-sm focus:outline-none focus:ring-2 focus:ring-gray-600 dark:focus:ring-gray-400 transition-all"
+                />
+              </div>
+            )}
+          </>
+        ) : (
+          <>
+            <button
+              onClick={onToggleCollapse}
+              className="w-full flex items-center justify-center py-2.5 text-gray-400 dark:text-gray-600 hover:text-gray-200 dark:hover:text-gray-900 hover:bg-gray-800 dark:hover:bg-gray-200 rounded-lg transition-all"
+              title="Sidebar'ı Genişlet"
+            >
+              <PanelLeft size={20} />
+            </button>
+            <button
+              onClick={onNewChat}
+              className="w-full flex items-center justify-center py-2.5 text-gray-200 dark:text-gray-900 hover:bg-gray-800 dark:hover:bg-gray-200 rounded-lg transition-all"
+              title="Yeni sohbet"
+            >
+              <MessageSquarePlus size={20} />
+            </button>
+          </>
+        )}
+      </div>
+
+      {/* Chat List */}
+      <div className="flex-1 overflow-y-auto px-2">
+        {chats.length === 0 ? (
+          !isCollapsed && (
+            <div className="p-6 text-center">
+              <MessageSquare size={32} className="mx-auto mb-3 text-gray-600 dark:text-gray-400" />
+              <p className="text-sm text-gray-400 dark:text-gray-600">Henüz sohbet yok</p>
+            </div>
+          )
+        ) : filteredChats.length === 0 ? (
+          !isCollapsed && (
+            <div className="p-6 text-center">
+              <Search size={32} className="mx-auto mb-3 text-gray-600 dark:text-gray-400" />
+              <p className="text-sm text-gray-400 dark:text-gray-600">Sonuç bulunamadı</p>
+            </div>
+          )
+        ) : (
+          <div className="space-y-1">
+            {filteredChats.map((chat) => (
+              <div
+                key={chat.id}
+                className={`group relative flex items-center ${isCollapsed ? 'justify-center py-2.5' : 'gap-2 px-3 py-2'} rounded-lg cursor-pointer transition-all ${
+                  currentChatId === chat.id
+                    ? 'bg-gray-800 dark:bg-gray-200'
+                    : 'hover:bg-gray-800 dark:hover:bg-gray-200'
+                }`}
+                onClick={() => onSelectChat(chat.id)}
+                title={isCollapsed ? chat.title : ''}
+              >
+                <MessageSquare 
+                  size={isCollapsed ? 20 : 16} 
+                  className={`flex-shrink-0 ${
+                    currentChatId === chat.id 
+                      ? 'text-gray-200 dark:text-gray-900' 
+                      : 'text-gray-400 dark:text-gray-600'
+                  }`}
+                />
+                {!isCollapsed && (
+                  <>
+                    <div className="flex-1 min-w-0">
+                      <p className="text-sm truncate text-gray-200 dark:text-gray-900">
+                        {chat.title}
+                      </p>
+                    </div>
+                    <button
+                      onClick={(e) => {
+                        e.stopPropagation();
+                        onDeleteChat(chat.id);
+                      }}
+                      className="opacity-0 group-hover:opacity-100 p-1 hover:bg-gray-700 dark:hover:bg-gray-300 text-gray-400 dark:text-gray-600 rounded transition-all"
+                    >
+                      <Trash2 size={14} />
+                    </button>
+                  </>
+                )}
+              </div>
+            ))}
+          </div>
+        )}
+      </div>
+
+      {/* Footer */}
+      <div className="p-2 border-t border-gray-800 dark:border-gray-300">
+        <button
+          onClick={toggleTheme}
+          className={`w-full flex items-center ${isCollapsed ? 'justify-center py-2.5' : 'gap-2 px-3 py-2'} text-sm text-gray-400 dark:text-gray-600 hover:text-gray-200 dark:hover:text-gray-900 hover:bg-gray-800 dark:hover:bg-gray-200 rounded-lg transition-colors`}
+          title={isCollapsed ? (theme === 'light' ? 'Karanlık tema' : 'Aydınlık tema') : ''}
+        >
+          {theme === 'light' ? (
+            <>
+              <Moon size={isCollapsed ? 20 : 16} />
+              {!isCollapsed && <span>Karanlık tema</span>}
+            </>
+          ) : (
+            <>
+              <Sun size={isCollapsed ? 20 : 16} />
+              {!isCollapsed && <span>Aydınlık tema</span>}
+            </>
+          )}
+        </button>
+      </div>
+    </div>
+  );
+};

frontend/contexts/ThemeContext.tsx

@@ -0,0 +1,45 @@
+import React, { createContext, useContext, useEffect, useState } from 'react';
+
+type Theme = 'light' | 'dark';
+
+interface ThemeContextType {
+  theme: Theme;
+  toggleTheme: () => void;
+}
+
+const ThemeContext = createContext<ThemeContextType | undefined>(undefined);
+
+export const ThemeProvider: React.FC<{ children: React.ReactNode }> = ({ children }) => {
+  const [theme, setTheme] = useState<Theme>(() => {
+    const saved = localStorage.getItem('theme') as Theme;
+    return saved || (window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light');
+  });
+
+  useEffect(() => {
+    localStorage.setItem('theme', theme);
+    document.documentElement.classList.toggle('dark', theme === 'dark');
+  }, [theme]);
+
+  const toggleTheme = () => {
+    setTheme(prev => prev === 'light' ? 'dark' : 'light');
+  };
+
+  return (
+    <ThemeContext.Provider value={{ theme, toggleTheme }}>
+      {children}
+    </ThemeContext.Provider>
+  );
+};
+
+export const useTheme = () => {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error('useTheme must be used within ThemeProvider');
+  }
+  return context;
+};
+
+
+
+
+

frontend/index.css

@@ -0,0 +1,64 @@
+@tailwind base;
+@tailwind components;
+@tailwind utilities;
+
+:root {
+  font-family: Inter, system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+* {
+  margin: 0;
+  padding: 0;
+  box-sizing: border-box;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+#root {
+  width: 100%;
+  height: 100vh;
+}
+
+/* Scrollbar Styling */
+::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+  background: #4b5563;
+  border-radius: 4px;
+}
+
+::-webkit-scrollbar-thumb:hover {
+  background: #6b7280;
+}
+
+.dark ::-webkit-scrollbar-thumb {
+  background: #374151;
+}
+
+.dark ::-webkit-scrollbar-thumb:hover {
+  background: #4b5563;
+}

frontend/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="tr">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Turkish AI Chat</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/main.tsx"></script>
+  </body>
+</html>

frontend/main.tsx

@@ -0,0 +1,13 @@
+import { StrictMode } from 'react'
+import { createRoot } from 'react-dom/client'
+import './index.css'
+import App from './App.tsx'
+import { ThemeProvider } from './contexts/ThemeContext'
+
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <ThemeProvider>
+      <App />
+    </ThemeProvider>
+  </StrictMode>,
+)

frontend/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "turkish-reasoning-chat",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "lucide-react": "^0.454.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.0",
+    "@types/react": "^18.3.3",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.9.0",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.9",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.47",
+    "tailwindcss": "^3.4.13",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.0.1",
+    "vite": "^5.4.1"
+  }
+}

frontend/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}

frontend/tailwind.config.js

@@ -0,0 +1,31 @@
+/** @type {import('tailwindcss').Config} */
+export default {
+  content: [
+    "./index.html",
+    "./App.tsx",
+    "./main.tsx",
+    "./components/**/*.{js,ts,jsx,tsx}",
+    "./contexts/**/*.{js,ts,jsx,tsx}",
+    "./utils/**/*.{js,ts,jsx,tsx}",
+  ],
+  darkMode: 'class',
+  theme: {
+    extend: {
+      colors: {
+        primary: {
+          50: '#f0f9ff',
+          100: '#e0f2fe',
+          200: '#bae6fd',
+          300: '#7dd3fc',
+          400: '#38bdf8',
+          500: '#0ea5e9',
+          600: '#0284c7',
+          700: '#0369a1',
+          800: '#075985',
+          900: '#0c4a6e',
+        }
+      }
+    },
+  },
+  plugins: [],
+}

frontend/tsconfig.json

@@ -0,0 +1,23 @@
+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": [
+      "ES2020",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "noEmit": true,
+    "jsx": "react-jsx",
+    "strict": true
+  },
+  "include": [
+    "."
+  ]
+}

frontend/types.ts

@@ -0,0 +1,75 @@
+export interface Message {
+  role: 'system' | 'user' | 'assistant';
+  content: string;
+  image?: string;
+}
+
+export interface Chat {
+  id: string;
+  title: string;
+  messages: Message[];
+  createdAt: number;
+  updatedAt: number;
+  modelName: string;
+}
+
+export interface ModelConfig {
+  name: string;
+  path: string;
+  supportsImages: boolean;
+}
+
+export interface GenerationParams {
+  temperature: number;
+  maxTokens: number;
+  topP: number;
+  topK: number;
+}
+
+/**
+ * Available models for local inference
+ * 
+ * ⚠️ IMPORTANT: Your Turkish models are PEFT/LoRA adapters, not full models!
+ * They currently fallback to BASE MODELS without Turkish fine-tuning.
+ * 
+ * To use your Turkish models:
+ * 1. Merge LoRA adapters with base model (Python)
+ * 2. Export merged model to ONNX format
+ * 3. Upload to HuggingFace or host locally
+ * 4. Update model paths here
+ * 
+ * See PEFT_TO_ONNX_GUIDE.md for complete instructions.
+ * 
+ * Current behavior:
+ * - Chan-Y/TurkishReasoner-* → Uses base Gemma/Qwen/Llama (NO Turkish training)
+ * - Base models will respond but WITHOUT your Turkish fine-tuning
+ * - Merge & export ONNX to get Turkish responses
+ */
+export const MODELS: ModelConfig[] = [
+  {
+    name: "Gemma 3 1B Turkish Reasoning",
+    path: "Chan-Y/TurkishReasoner-Gemma3-1B",
+    supportsImages: false
+  },
+  {
+    name: "Gemma 3 12B Turkish (Supports Images)",
+    path: "Chan-Y/TurkishReasoner-Gemma3-12B",
+    supportsImages: true
+  },
+  {
+    name: "Qwen 2.5 3B Turkish Reasoning",
+    path: "Chan-Y/TurkishReasoner-Qwen2.5-3B",
+    supportsImages: false
+  },
+  {
+    name: "Llama 3.1 8B Turkish Reasoning",
+    path: "Chan-Y/TurkishReasoner-Llama3.1-8B",
+    supportsImages: false
+  }
+];
+
+export const DEFAULT_SYSTEM_PROMPT = `Sen kullanıcıların isteklerine Türkçe cevap veren bir asistansın ve sana bir problem verildi.
+Problem hakkında düşün ve çalışmanı göster.
+Çalışmanı <start_working_out> ve <end_working_out> arasına yerleştir.
+Sonra, çözümünü <SOLUTION> ve </SOLUTION> arasına yerleştir.
+Lütfen SADECE Türkçe kullan.`;

frontend/utils/api.ts

@@ -0,0 +1,223 @@
+// API Configuration
+const API_BASE_URL = import.meta.env.PROD ? '' : 'http://localhost:8000';
+
+// 🎭 DUMMY MODE - Backend olmadan test için
+const DUMMY_MODE = false; // Backend varsa false yapın
+
+interface GenerateRequest {
+  model_name: string;
+  prompt: string;
+  system_prompt: string;
+  max_tokens: number;
+  temperature: number;
+  top_p: number;
+  top_k: number;
+  image?: string;
+}
+
+interface GenerateResponse {
+  generated_text: string;
+  model_used: string;
+}
+
+interface ProgressCallback {
+  status: 'loading' | 'generating' | 'ready' | 'error';
+  progress?: number;
+  message?: string;
+}
+
+interface GenerateOptions extends GenerateRequest {
+  onToken?: (token: string) => void;
+  onProgress?: (progress: ProgressCallback) => void;
+}
+
+// Dummy yanıtlar - farklı sorular için farklı cevaplar
+
+const DUMMY_RESPONSES = [
+  `<start_working_out>
+Kullanıcı 121 sayısının karekökünü soruyor.
+
+Adım 1: Problemi Analiz Et
+- Hedef: $\\sqrt{121}$ değerini bulmak.
+- Hangi sayıyı kendisiyle çarparsam 121 eder?
+
+Adım 2: Tahmin Yürütme
+- 10 x 10 = 100 (Çok küçük)
+- 12 x 12 = 144 (Çok büyük)
+- Cevap 10 ile 12 arasında olmalı.
+
+Adım 3: Hesaplama
+- Sonu 1 ile biten bir sayı arıyorum (121).
+- 11 sayısını deneyelim:
+  11 x 10 = 110
+  110 + 11 = 121
+
+Sonuç doğrulandı.
+<end_working_out>
+
+<SOLUTION>
+121 sayısının karekökü **11**'dir.
+
+Matematiksel işlemi şöyledir:
+$$ \\sqrt{121} = 11 $$
+
+Sağlaması:
+11 x 11 = 121
+</SOLUTION>`
+];
+
+/**
+ * Generate response with dummy data or from backend
+ */
+export async function generateResponse(options: GenerateOptions): Promise<void> {
+  const {
+    model_name,
+    prompt,
+    system_prompt,
+    max_tokens,
+    temperature,
+    top_p,
+    top_k,
+    image,
+    onToken,
+    onProgress
+  } = options;
+
+  // 🎭 DUMMY MODE - Backend olmadan test
+  if (DUMMY_MODE) {
+    try {
+      onProgress?.({ status: 'loading', message: 'Model yükleniyor...' });
+
+      // Simüle edilmiş yükleme gecikmesi
+      await new Promise(resolve => setTimeout(resolve, 800));
+
+      onProgress?.({ status: 'generating', message: 'Yanıt oluşturuluyor...' });
+
+      // Rastgele bir dummy yanıt seç
+      const dummyText = DUMMY_RESPONSES[Math.floor(Math.random() * DUMMY_RESPONSES.length)];
+
+      // Karakterleri tek tek göster (typing effect)
+      let currentText = '';
+      const words = dummyText.split(' ');
+
+      for (let i = 0; i < words.length; i++) {
+        currentText += (i > 0 ? ' ' : '') + words[i];
+        onToken?.(currentText);
+
+        // Typing hızı - kelime başına 50-150ms
+        const delay = 50 + Math.random() * 100;
+        await new Promise(resolve => setTimeout(resolve, delay));
+      }
+
+      onProgress?.({ status: 'ready', message: 'Tamamlandı' });
+
+    } catch (error) {
+      console.error('Dummy response error:', error);
+      onProgress?.({
+        status: 'error',
+        message: 'Dummy yanıt oluşturulurken hata oluştu'
+      });
+      throw error;
+    }
+    return;
+  }
+
+  // 🚀 GERÇEK BACKEND MOD
+  try {
+    onProgress?.({ status: 'loading', message: 'Model yükleniyor...' });
+
+    const requestBody: GenerateRequest = {
+      model_name,
+      prompt,
+      system_prompt,
+      max_tokens,
+      temperature,
+      top_p,
+      top_k,
+      image
+    };
+
+    const response = await fetch(`${API_BASE_URL}/generate`, {
+      method: 'POST',
+      headers: {
+        'Content-Type': 'application/json',
+      },
+      body: JSON.stringify(requestBody),
+    });
+
+    if (!response.ok) {
+      const error = await response.json().catch(() => ({ detail: 'Unknown error' }));
+      throw new Error(error.detail || `HTTP error! status: ${response.status}`);
+    }
+
+    onProgress?.({ status: 'generating', message: 'Yanıt oluşturuluyor...' });
+
+    const data: GenerateResponse = await response.json();
+
+    if (onToken) {
+      const text = data.generated_text;
+      let currentText = '';
+
+      for (let i = 0; i < text.length; i++) {
+        currentText += text[i];
+        onToken(currentText);
+
+        if (i % 5 === 0) {
+          await new Promise(resolve => setTimeout(resolve, 10));
+        }
+      }
+    }
+
+    onProgress?.({ status: 'ready', message: 'Tamamlandı' });
+
+  } catch (error) {
+    console.error('Error generating response:', error);
+    onProgress?.({
+      status: 'error',
+      message: error instanceof Error ? error.message : 'Bir hata oluştu'
+    });
+    throw error;
+  }
+}
+
+/**
+ * Get available models from the backend
+ */
+export async function getAvailableModels() {
+  if (DUMMY_MODE) {
+    // Dummy modeller
+    return [
+      { name: "Gemma 3 1B Turkish", path: "dummy/gemma-1b" },
+      { name: "Gemma 3 12B Turkish", path: "dummy/gemma-12b" },
+    ];
+  }
+
+  try {
+    const response = await fetch(`${API_BASE_URL}/models`);
+    if (!response.ok) {
+      throw new Error(`HTTP error! status: ${response.status}`);
+    }
+    const data = await response.json();
+    return data.models;
+  } catch (error) {
+    console.error('Error fetching models:', error);
+    throw error;
+  }
+}
+
+/**
+ * Health check for the backend API
+ */
+export async function checkApiHealth(): Promise<boolean> {
+  if (DUMMY_MODE) {
+    return true; // Dummy modda her zaman sağlıklı
+  }
+
+  try {
+    const response = await fetch(`${API_BASE_URL}/`);
+    return response.ok;
+  } catch (error) {
+    console.error('API health check failed:', error);
+    return false;
+  }
+}

frontend/utils/chatStorage.ts

@@ -0,0 +1,42 @@
+import { Chat } from '../types';
+
+const STORAGE_KEY = 'turkish-ai-chats';
+
+export const saveChats = (chats: Chat[]): void => {
+  try {
+    localStorage.setItem(STORAGE_KEY, JSON.stringify(chats));
+  } catch (error) {
+    console.error('Error saving chats:', error);
+  }
+};
+
+export const loadChats = (): Chat[] => {
+  try {
+    const stored = localStorage.getItem(STORAGE_KEY);
+    return stored ? JSON.parse(stored) : [];
+  } catch (error) {
+    console.error('Error loading chats:', error);
+    return [];
+  }
+};
+
+export const createNewChat = (modelName: string): Chat => {
+  return {
+    id: Date.now().toString(),
+    title: 'Yeni Sohbet',
+    messages: [],
+    createdAt: Date.now(),
+    updatedAt: Date.now(),
+    modelName
+  };
+};
+
+export const updateChatTitle = (chat: Chat): string => {
+  const firstUserMessage = chat.messages.find(m => m.role === 'user');
+  if (firstUserMessage) {
+    const title = firstUserMessage.content.slice(0, 50);
+    return title.length < firstUserMessage.content.length ? `${title}...` : title;
+  }
+  return 'Yeni Sohbet';
+};
+

frontend/utils/huggingface.ts

@@ -0,0 +1,102 @@
+/**
+ * Backend-based inference using FastAPI (Python) for local GPU inference
+ * This allows using the full Turkish fine-tuned models with PEFT/LoRA adapters
+ * 
+ * Backend: backend/python_backend/main.py
+ * - FastAPI server
+ * - PyTorch + Transformers for model loading
+ * - PEFT for LoRA adapters (Gemma models)
+ * - Direct loading for Qwen/Llama merged models
+ */
+
+// Backend API configuration
+const BACKEND_URL = import.meta.env.VITE_BACKEND_URL || 'http://localhost:3000';
+
+interface GenerateResponseParams {
+    modelPath: string;
+    systemPrompt: string;
+    userInput: string;
+    image?: string;
+    temperature?: number;
+    maxTokens?: number;
+    topP?: number;
+    topK?: number;
+    onToken?: (content: string) => void;
+    onProgress?: (progress: any) => void;
+}
+
+export async function generateResponse(params: GenerateResponseParams): Promise<void> {
+    const {
+        modelPath,
+        systemPrompt,
+        userInput,
+        // image, // TODO: Implement image support for multimodal models
+        temperature = 0.7,
+        maxTokens = 512,
+        topP = 0.95,
+        topK = 50,
+        onToken,
+        onProgress
+    } = params;
+
+    try {
+        // Notify progress: loading model
+        onProgress?.({ status: 'loading', progress: 0 });
+        console.log(`Starting inference with model: ${modelPath}`);
+
+        // Call backend API
+        const response = await fetch(`${BACKEND_URL}/api/inference/generate`, {
+            method: 'POST',
+            headers: {
+                'Content-Type': 'application/json',
+            },
+            body: JSON.stringify({
+                modelPath,
+                systemPrompt,
+                userInput,
+                temperature,
+                maxTokens,
+                topP,
+                topK,
+            }),
+        });
+
+        if (!response.ok) {
+            throw new Error(`Backend error: ${response.statusText}`);
+        }
+
+        const result = await response.json();
+
+        if (!result.success) {
+            throw new Error(result.error || 'Inference failed');
+        }
+
+        // Update progress: generating
+        onProgress?.({ status: 'generating' });
+
+        // Send the response via onToken callback
+        onToken?.(result.response);
+        
+        onProgress?.({ status: 'done' });
+    } catch (error) {
+        console.error('Error in generateResponse:', error);
+        onProgress?.({ status: 'error', error });
+        throw error;
+    }
+}
+
+/**
+ * Check backend health and Python environment
+ */
+export async function checkBackendHealth(): Promise<{ healthy: boolean; message: string }> {
+    try {
+        const response = await fetch(`${BACKEND_URL}/api/inference/health`);
+        const result = await response.json();
+        return result;
+    } catch (error) {
+        return {
+            healthy: false,
+            message: `Cannot connect to backend at ${BACKEND_URL}. Make sure the backend is running.`,
+        };
+    }
+}

frontend/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

frontend/vite.config.ts

@@ -0,0 +1,6 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react'
+
+export default defineConfig({
+  plugins: [react()],
+})

requirements.txt

@@ -0,0 +1,12 @@
+fastapi
+uvicorn
+pydantic
+transformers
+peft
+torch
+python-dotenv
+accelerate
+bitsandbytes
+protobuf
+sentencepiece
+huggingface_hub