diff --git a/index.html b/index.html index 25aa39d..822fb9b 100644 --- a/index.html +++ b/index.html @@ -5,8 +5,133 @@ AI Vision - + @@ -33,13 +158,97 @@ Türkçe Çeviri
- - - + diff --git a/script.js b/script.js deleted file mode 100644 index 933adc7..0000000 --- a/script.js +++ /dev/null @@ -1,133 +0,0 @@ -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 = ' 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 = ' Ç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 = ""; -} diff --git a/style.css b/style.css deleted file mode 100644 index 6c4bc50..0000000 --- a/style.css +++ /dev/null @@ -1,125 +0,0 @@ -:root { - --bg: #0f1117; - --card: #161b22; - --accent: #58a6ff; - --success: #238636; - --text: #c9d1d9; -} - -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; -} - -.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); - } -}