diff --git a/index.html b/index.html
index 2006786..fb5eac8 100644
--- a/index.html
+++ b/index.html
@@ -1,65 +1,255 @@
-<div id="result">Sonuç burada görünecek...</div>
-<button id="translateBtn" onclick="translateText()" style="display:none; background: #28a745;">Türkçeye Çevir (Llama
-    3)</button>
-<div id="translationResult" style="margin-top: 10px; color: #aaa; font-style: italic;"></div>
+<!DOCTYPE html>
+<html lang="tr">
 
-<script>
-    let englishDescription = "";
-
-    async function analyzeImage() {
-        const resultDiv = document.getElementById('result');
-        const transBtn = document.getElementById('translateBtn');
-        const transResult = document.getElementById('translationResult');
-
-        resultDiv.innerText = "Resim analiz ediliyor (Moondream)...";
-        transBtn.style.display = "none";
-        transResult.innerText = "";
-
-        try {
-            const response = await fetch('https://ai.almazlar.com/ollama/api/generate', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    model: "moondream",
-                    prompt: "Describe this image concisely in English.",
-                    images: [base64Image],
-                    stream: false
-                })
-            });
-            const data = await response.json();
-            englishDescription = data.response;
-            resultDiv.innerText = englishDescription;
-
-            // Analiz bitince çeviri butonunu göster
-            transBtn.style.display = "block";
-        } catch (err) {
-            resultDiv.innerText = "Hata: Analiz başarısız.";
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>AI Vision</title>
+    <style>
+        :root {
+            --bg: #0f1117;
+            --card: #161b22;
+            --accent: #58a6ff;
+            --success: #238636;
+            --text: #c9d1d9;
         }
-    }
 
-    async function translateText() {
-        const transResult = document.getElementById('translationResult');
-        const transBtn = document.getElementById('translateBtn');
-
-        transBtn.disabled = true;
-        transResult.innerText = "Türkçeye çevriliyor...";
-
-        try {
-            const response = await fetch('https://ai.almazlar.com/ollama/api/generate', {
-                method: 'POST',
-                headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({
-                    model: "llama3", // Veya elinizdeki diğer model: "gemma", "mistral" vb.
-                    prompt: `Translate the following English text to Turkish. Only provide the translation, no extra comments: "${englishDescription}"`,
-                    stream: false
-                })
-            });
-            const data = await response.json();
-            transResult.innerText = "TR: " + data.response;
-        } catch (err) {
-            transResult.innerText = "Hata: Çeviri yapılamadı.";
-        } finally {
-            transBtn.disabled = false;
+        body {
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
+            background: var(--bg);
+            color: var(--text);
+            display: flex;
+            justify-content: center;
+            padding: 20px;
+            line-height: 1.6;
         }
-    }
-</script>
\ No newline at end of file
+
+        .container {
+            background: var(--card);
+            padding: 2rem;
+            border-radius: 12px;
+            width: 100%;
+            max-width: 600px;
+            border: 1px solid #30363d;
+            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
+        }
+
+        h2 {
+            text-align: center;
+            color: var(--accent);
+            margin-top: 0;
+        }
+
+        .upload-section {
+            border: 2px dashed #30363d;
+            padding: 30px;
+            text-align: center;
+            border-radius: 8px;
+            cursor: pointer;
+            transition: 0.3s;
+            margin-bottom: 20px;
+        }
+
+        .upload-section:hover {
+            border-color: var(--accent);
+            background: #1c2128;
+        }
+
+        #preview {
+            max-width: 100%;
+            border-radius: 8px;
+            margin: 15px 0;
+            display: none;
+            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
+        }
+
+        button {
+            background: var(--accent);
+            color: white;
+            border: none;
+            padding: 12px;
+            border-radius: 6px;
+            cursor: pointer;
+            font-weight: 600;
+            width: 100%;
+            font-size: 1rem;
+            transition: 0.2s;
+        }
+
+        button:disabled {
+            background: #21262d;
+            color: #8b949e;
+            cursor: not-allowed;
+        }
+
+        #translateBtn {
+            background: var(--success);
+            margin-top: 15px;
+            display: none;
+        }
+
+        .result-box {
+            margin-top: 25px;
+            background: #0d1117;
+            padding: 20px;
+            border-radius: 8px;
+            border-left: 4px solid var(--accent);
+        }
+
+        .label {
+            font-size: 0.75rem;
+            color: #8b949e;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+            margin-bottom: 8px;
+            display: block;
+        }
+
+        #translationResult {
+            margin-top: 20px;
+            color: #acb6c2;
+            border-left: 4px solid var(--success);
+        }
+
+        .loader {
+            display: inline-block;
+            width: 12px;
+            height: 12px;
+            border: 2px solid #fff;
+            border-bottom-color: transparent;
+            border-radius: 50%;
+            animation: rotation 1s linear infinite;
+            margin-right: 8px;
+        }
+
+        @keyframes rotation {
+            0% {
+                transform: rotate(0deg);
+            }
+
+            100% {
+                transform: rotate(360deg);
+            }
+        }
+    </style>
+</head>
+
+<body>
+
+    <div class="container">
+        <h2>Bu resimde ne var?</h2>
+
+        <div class="upload-section" onclick="document.getElementById('fileInput').click()">
+            <p id="uploadText">📷 Görseli seçmek için buraya tıklayın</p>
+            <input type="file" id="fileInput" hidden accept="image/*" onchange="handlePreview(this)">
+        </div>
+
+        <img id="preview">
+
+        <button id="analyzeBtn" onclick="analyzeImage()" disabled>Analiz Et</button>
+
+        <div id="englishOutput" class="result-box" style="display: none;">
+            <span class="label">English Description</span>
+            <div id="resultText"></div>
+            <button id="translateBtn" onclick="translateText()">Türkçeye Çevir</button>
+        </div>
+
+        <div id="translationResult" class="result-box" style="display: none;">
+            <span class="label">Türkçe Çeviri</span>
+            <div id="trText"></div>
+        </div>
+    </div>
+
+    <script>
+        let base64Image = "";
+        let rawDescription = "";
+
+        // Görüntü seçildiğinde önizleme yap
+        function handlePreview(input) {
+            const file = input.files[0];
+            if (!file) return;
+
+            const reader = new FileReader();
+            reader.onload = function (e) {
+                const img = document.getElementById('preview');
+                img.src = e.target.result;
+                img.style.display = "block";
+                base64Image = e.target.result.split(',')[1];
+                document.getElementById('analyzeBtn').disabled = false;
+                document.getElementById('uploadText').innerText = file.name;
+            };
+            reader.readAsDataURL(file);
+        }
+
+        // Moondream ile analiz yap
+        async function analyzeImage() {
+            const btn = document.getElementById('analyzeBtn');
+            const resultBox = document.getElementById('englishOutput');
+            const resultText = document.getElementById('resultText');
+
+            btn.disabled = true;
+            btn.innerHTML = '<span class="loader"></span> Düşünüyor...';
+            resultBox.style.display = "block";
+            resultText.innerText = "Görsel işleniyor, lütfen bekleyin...";
+
+            try {
+                const response = await fetch('https://ai.almazlar.com/ollama/api/generate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        model: "moondream",
+                        prompt: "Describe this image concisely but accurately in English.",
+                        images: [base64Image],
+                        stream: false
+                    })
+                });
+
+                const data = await response.json();
+                rawDescription = data.response;
+                resultText.innerText = rawDescription;
+                document.getElementById('translateBtn').style.display = "block";
+            } catch (err) {
+                resultText.innerText = "Hata: Sunucuya ulaşılamadı. Nginx veya Ollama ayarlarını kontrol edin.";
+                console.error(err);
+            } finally {
+                btn.innerHTML = "Yeniden Analiz Et";
+                btn.disabled = false;
+            }
+        }
+
+        // Llama 3 ile çeviri yap
+        async function translateText() {
+            const transBtn = document.getElementById('translateBtn');
+            const trBox = document.getElementById('translationResult');
+            const trText = document.getElementById('trText');
+
+            transBtn.disabled = true;
+            transBtn.innerHTML = '<span class="loader"></span> Çevriliyor...';
+            trBox.style.display = "block";
+            trText.innerText = "Çeviri yapılıyor...";
+
+            try {
+                const response = await fetch('https://ai.almazlar.com/ollama/api/generate', {
+                    method: 'POST',
+                    headers: { 'Content-Type': 'application/json' },
+                    body: JSON.stringify({
+                        model: "llama3",
+                        prompt: `Translate the following description into natural Turkish. Only output the translation: "${rawDescription}"`,
+                        stream: false
+                    })
+                });
+
+                const data = await response.json();
+                trText.innerText = data.response;
+            } catch (err) {
+                trText.innerText = "Hata: Çeviri servisi yanıt vermiyor.";
+            } finally {
+                transBtn.disabled = false;
+                transBtn.innerHTML = "Türkçeye Çevir (Llama 3)";
+            }
+        }
+    </script>
+
+</body>
+
+</html>
\ No newline at end of file
