burakalmazlar/eye
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: add Moondream image analysis application by inlining styles and scripts, and removing dedicated CSS/JS files.

Browse Source
This commit is contained in:
almazlar
2026-02-07 21:38:19 +03:00
parent cdb7a6c8d7
commit b4734c86c9
3 changed files with 115 additions and 46 deletions
Download Patch File Download Diff File Expand all files Collapse all files

122
index.html
View File

@@ -4,17 +4,125 @@
<head> <head>
<meta charset="UTF-8"> <meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>almazlar.com | Hoş Geldiniz</title> <title>Görsel Analiz | Moondream</title>
<link rel="stylesheet" href="style.css"> <style>
body {
font-family: sans-serif;
background: #121212;
color: white;
display: flex;
justify-content: center;
padding: 20px;
}
.card {
background: #1e1e1e;
padding: 2rem;
border-radius: 12px;
width: 100%;
max-width: 500px;
text-align: center;
border: 1px solid #333;
}
#preview {
max-width: 100%;
border-radius: 8px;
margin-top: 15px;
display: none;
}
.upload-area {
border: 2px dashed #444;
padding: 20px;
cursor: pointer;
border-radius: 8px;
margin-bottom: 20px;
}
button {
background: #0088ff;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
width: 100%;
margin-top: 10px;
}
button:disabled {
background: #444;
}
#result {
margin-top: 20px;
text-align: left;
background: #000;
padding: 15px;
border-radius: 5px;
min-height: 50px;
line-height: 1.5;
font-size: 0.9rem;
}
</style>
</head> </head>
<body> <body>
<div class="container"> <div class="card">
<h1 id="greeting">---YAYINDA---</h1> <h2>Bu Resimde Ne Var?</h2>
<p>Docker ile servis ediliyor!</p> <div class="upload-area" onclick="document.getElementById('fileInput').click()">
<button onclick="changeColor()">Rengi Değiştir</button> Tıkla veya Resim Yükle
<input type="file" id="fileInput" hidden accept="image/*" onchange="previewImage(this)">
</div>
<img id="preview">
<button id="analyzeBtn" onclick="analyzeImage()" disabled>Analiz Et</button>
<div id="result">Sonuç burada görünecek...</div>
</div> </div>
<script src="script.js"></script>
<script>
let base64Image = "";
function previewImage(input) {
const file = input.files[0];
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;
};
reader.readAsDataURL(file);
}
async function analyzeImage() {
const resultDiv = document.getElementById('result');
const btn = document.getElementById('analyzeBtn');
resultDiv.innerText = "Düşünüyor...";
btn.disabled = true;
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 in detail.",
images: [base64Image],
stream: false
})
});
const data = await response.json();
resultDiv.innerText = data.response;
} catch (err) {
resultDiv.innerText = "Hata: Ollama'ya bağlanılamadı. CORS ayarlarını kontrol edin.";
} finally {
btn.disabled = false;
}
}
</script>
</body> </body>
</html> </html>

6
script.js
View File

@@ -1,6 +0,0 @@
function changeColor() {
const title = document.getElementById('greeting');
const colors = ['#00ff88', '#ff0088', '#0088ff', '#ffff00'];
const randomColor = colors[Math.floor(Math.random() * colors.length)];
title.style.color = randomColor;
}

33
style.css
View File

@@ -1,33 +0,0 @@
body {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
background-color: #1a1a1a;
color: white;
display: flex;
justify-content: center;
align-items: center;
height: 100vh;
margin: 0;
}
.container {
text-align: center;
padding: 2rem;
border: 2px solid #00ff88;
border-radius: 15px;
background: #2a2a2a;
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
}
button {
background-color: #00ff88;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-weight: bold;
margin-top: 15px;
}
button:hover {
background-color: #00cc6e;
}