Update index.html

index.html

@@ -1,19 +1,153 @@
-<!doctype html>
-<html>
-	<head>
-		<meta charset="utf-8" />
-		<meta name="viewport" content="width=device-width" />
-		<title>My static Space</title>
-		<link rel="stylesheet" href="style.css" />
-	</head>
-	<body>
-		<div class="card">
-			<h1>Welcome to your static Space!</h1>
-			<p>You can modify this app directly by editing <i>index.html</i> in the Files and versions tab.</p>
-			<p>
-				Also don't forget to check the
-				<a href="https://huggingface.co/docs/hub/spaces" target="_blank">Spaces documentation</a>.
-			</p>
-		</div>
-	</body>
-</html>
+<!DOCTYPE html>
+<html lang="zh-Hant">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Gemma 多模態影像分析助手</title>
+    <style>
+        body { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; max-width: 600px; margin: 40px auto; padding: 20px; background: #f9f9f9; color: #333; }
+        .card { background: #fff; padding: 24px; border-radius: 12px; box-shadow: 0 4px 12px rgba(0,0,0,0.05); }
+        h2 { margin-top: 0; font-size: 1.5rem; color: #111; }
+        p { color: #666; font-size: 0.9rem; }
+        .form-group { margin-bottom: 16px; }
+        label { display: block; font-weight: 600; margin-bottom: 6px; font-size: 0.9rem; }
+        input[type="text"], input[type="file"], textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 6px; box-sizing: border-box; }
+        button { background: #000; color: #fff; border: none; padding: 10px 20px; font-weight: 600; border-radius: 6px; cursor: pointer; width: 100%; }
+        button:hover { background: #333; }
+        button:disabled { background: #ccc; cursor: not-allowed; }
+        #result { margin-top: 20px; padding: 12px; background: #f1f1f1; border-radius: 6px; white-space: pre-wrap; min-height: 50px; font-size: 0.95rem; }
+    </style>
+</head>
+<body>
+
+<div class="card">
+    <h2>Gemma 多模態影像分析助手</h2>
+    <p>透過 Hugging Face Router 呼叫 gemma-4-31B-it 模型進行影像辨識與分析。</p>
+    
+    <div class="form-group">
+        <label for="apiKey">Hugging Face Token (HF_TOKEN)</label>
+        <input type="password" id="apiKey" placeholder="請輸入您的 HF_TOKEN">
+    </div>
+
+    <div class="form-group">
+        <label for="imageInput">上傳圖片</label>
+        <input type="file" id="imageInput" accept="image/*">
+    </div>
+
+    <div class="form-group">
+        <label for="promptInput">輸入提示詞 (Prompt)</label>
+        <input type="text" id="promptInput" value="Describe this image in one sentence in chinese">
+    </div>
+
+    <button id="submitBtn" onclick="analyzeImage()">送出分析</button>
+
+    <div class="form-group" style="margin-top: 20px;">
+        <label>模型回應</label>
+        <div id="result">尚未開始分析...</div>
+    </div>
+</div>
+
+<script>
+    // 壓縮並轉成 Base64 的前端實作
+    function compressImage(file, maxSize = 1024, quality = 0.85) {
+        return new Promise((resolve, reject) => {
+            const reader = new FileReader();
+            reader.onload = function (e) {
+                const img = new Image();
+                img.onload = function () {
+                    let width = img.width;
+                    let height = img.height;
+
+                    if (width > height) {
+                        if (width > maxSize) {
+                            height *= maxSize / width;
+                            width = maxSize;
+                        }
+                    } else {
+                        if (height > maxSize) {
+                            width *= maxSize / height;
+                            height = maxSize;
+                        }
+                    }
+
+                    const canvas = document.createElement('canvas');
+                    canvas.width = width;
+                    canvas.height = height;
+                    const ctx = canvas.getContext('2d');
+                    ctx.drawImage(img, 0, 0, width, height);
+
+                    const dataUrl = canvas.toDataURL('image/jpeg', quality);
+                    resolve(dataUrl);
+                };
+                img.src = e.target.result;
+            };
+            reader.onerror = reject;
+            reader.readAsDataURL(file);
+        });
+    }
+
+    async function analyzeImage() {
+        const apiKey = document.getElementById('apiKey').value.trim();
+        const imageFile = document.getElementById('imageInput').files[0];
+        let prompt = document.getElementById('promptInput').value.trim();
+        const resultDiv = document.getElementById('result');
+        const submitBtn = document.getElementById('submitBtn');
+
+        if (!apiKey) {
+            alert('請先輸入 Hugging Face Token！');
+            return;
+        }
+        if (!imageFile) {
+            alert('請先上傳一張圖片！');
+            return;
+        }
+        if (!prompt) {
+            prompt = "Describe this image in one sentence.";
+        }
+
+        submitBtn.disabled = true;
+        resultDiv.innerText = '處理中，請稍候...';
+
+        try {
+            // 壓縮轉 Base64
+            const base64Image = await compressImage(imageFile);
+
+            // 呼叫 Hugging Face Router API (OpenAI 相容格式)
+            const response = await fetch("https://router.huggingface.co/v1/chat/completions", {
+                method: "POST",
+                headers: {
+                    "Authorization": `Bearer ${apiKey}`,
+                    "Content-Type": "application/json"
+                },
+                body: JSON.stringify({
+                    model: "google/gemma-4-31B-it:novita",
+                    messages: [
+                        {
+                            role: "user",
+                            content: [
+                                { type: "text", text: prompt },
+                                { type: "image_url", image_url: { url: base64Image } }
+                            ]
+                        }
+                    ],
+                    max_tokens: 300
+                })
+            });
+
+            const data = await response.json();
+            
+            if (response.ok && data.choices && data.choices.length > 0) {
+                resultDiv.innerText = data.choices[0].message.content;
+            } else {
+                resultDiv.innerText = `發生錯誤：${data.error?.message || JSON.stringify(data)}`;
+            }
+        } catch (error) {
+            resultDiv.innerText = `發生錯誤：${error.message}`;
+        } finally {
+            submitBtn.disabled = false;
+        }
+    }
+</script>
+
+</body>
+</html>