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

2026-02-07 21:38:19 +03:00
parent cdb7a6c8d7
commit b4734c86c9
3 changed files with 115 additions and 46 deletions
--- a/index.html
+++ b/index.html
@@ -4,17 +4,125 @@
 <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>almazlar.com | Hoş Geldiniz</title>
-    <link rel="stylesheet" href="style.css">
+    <title>Görsel Analiz | Moondream</title>
+    <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>

 <body>
-    <div class="container">
-        <h1 id="greeting">---YAYINDA---</h1>
-        <p>Docker ile servis ediliyor!</p>
-        <button onclick="changeColor()">Rengi Değiştir</button>
+    <div class="card">
+        <h2>Bu Resimde Ne Var?</h2>
+        <div class="upload-area" onclick="document.getElementById('fileInput').click()">
+            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>
-    <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>

 </html>
--- a/script.js
+++ b/script.js
@@ -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;
-}
--- a/style.css
+++ b/style.css
@@ -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;
-}