refactor: Extract inline styles and scripts into dedicated files, add image resizing, and enhance error handling.

2026-02-07 22:30:00 +03:00
parent 174d0cebbe
commit 019c7feef9
3 changed files with 263 additions and 214 deletions
--- a/script.js
+++ b/script.js
@@ -0,0 +1,133 @@
+let base64Image = "";
+let rawDescription = "";
+
+// Görüntü seçildiğinde önizleme yap ve boyutlandır
+function handlePreview(input) {
+    const file = input.files[0];
+    if (!file) return;
+
+    const reader = new FileReader();
+    reader.onload = function (e) {
+        const img = new Image();
+        img.onload = function () {
+            const canvas = document.createElement('canvas');
+            let width = img.width;
+            let height = img.height;
+            const max_size = 1024;
+
+            if (width > height) {
+                if (width > max_size) {
+                    height *= max_size / width;
+                    width = max_size;
+                }
+            } else {
+                if (height > max_size) {
+                    width *= max_size / height;
+                    height = max_size;
+                }
+            }
+
+            canvas.width = width;
+            canvas.height = height;
+            const ctx = canvas.getContext('2d');
+            ctx.drawImage(img, 0, 0, width, height);
+
+            const previewImg = document.getElementById('preview');
+            previewImg.src = canvas.toDataURL('image/jpeg', 0.8);
+            previewImg.style.display = "block";
+            base64Image = previewImg.src.split(',')[1];
+
+            document.getElementById('analyzeBtn').disabled = false;
+            document.getElementById('uploadText').innerText = file.name;
+            document.getElementById('resetBtn').style.display = "block";
+        };
+        img.src = e.target.result;
+    };
+    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
+            })
+        });
+
+        if (!response.ok) throw new Error(`Sunucu hatası: ${response.status}`);
+
+        const data = await response.json();
+        rawDescription = data.response;
+        resultText.innerText = rawDescription;
+        document.getElementById('translateBtn').style.display = "block";
+    } catch (err) {
+        resultText.innerText = `Hata: ${err.message}. Lütfen bağlantıyı veya model 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
+            })
+        });
+
+        if (!response.ok) throw new Error(`Çeviri hatası: ${response.status}`);
+
+        const data = await response.json();
+        trText.innerText = data.response;
+    } catch (err) {
+        trText.innerText = `Hata: ${err.message}`;
+    } finally {
+        transBtn.disabled = false;
+        transBtn.innerHTML = "Türkçeye Çevir (Llama 3)";
+    }
+}
+
+// Uygulamayı sıfırla
+function resetApp() {
+    document.getElementById('fileInput').value = "";
+    document.getElementById('preview').style.display = "none";
+    document.getElementById('preview').src = "";
+    document.getElementById('englishOutput').style.display = "none";
+    document.getElementById('translationResult').style.display = "none";
+    document.getElementById('analyzeBtn').disabled = true;
+    document.getElementById('uploadText').innerText = "📷 Görseli seçmek için buraya tıklayın";
+    document.getElementById('resetBtn').style.display = "none";
+    base64Image = "";
+    rawDescription = "";
+}