\n \n\n

Xin chào 👋

Mình là trợ lý AI. Hỏi mình bất cứ điều gì, hoặc gửi ảnh để mình phân tích nhé!

\n \n \n \n

\n\n \n

\n\n \n\n\n",[18,67],"72ee8431-5cab-443b-befb-62de211a485b",["D",1780815172441],"const messagesEl = document.getElementById(\"messages\");\nconst inputEl = document.getElementById(\"input\");\nconst sendBtn = document.getElementById(\"sendBtn\");\nconst clearBtn = document.getElementById(\"clearBtn\");\nconst imageInput = document.getElementById(\"imageInput\");\nconst imagePreview = document.getElementById(\"imagePreview\");\nconst previewImg = document.getElementById(\"previewImg\");\nconst removeImg = document.getElementById(\"removeImg\");\n\n// Mỗi trình duyệt có 1 session riêng (lưu trong localStorage)\nlet sessionId = localStorage.getItem(\"sessionId\");\nif (!sessionId) {\n sessionId = \"s_\" + Math.random().toString(36).slice(2) + Date.now().toString(36);\n localStorage.setItem(\"sessionId\", sessionId);\n}\n\nlet pendingImage = null; // { base64, mime }\n\nfunction clearWelcome() {\n const w = messagesEl.querySelector(\".welcome\");\n if (w) w.remove();\n}\n\nfunction addMessage(role, content, imageDataUrl) {\n clearWelcome();\n const msg = document.createElement(\"div\");\n msg.className = `msg ${role}`;\n\n const avatar = document.createElement(\"div\");\n avatar.className = \"avatar\";\n avatar.textContent = role === \"user\" ? \"🧑\" : \"🤖\";\n\n const bubble = document.createElement(\"div\");\n bubble.className = \"bubble\";\n bubble.textContent = content;\n if (imageDataUrl) {\n const img = document.createElement(\"img\");\n img.src = imageDataUrl;\n bubble.appendChild(img);\n }\n\n msg.appendChild(avatar);\n msg.appendChild(bubble);\n messagesEl.appendChild(msg);\n messagesEl.scrollTop = messagesEl.scrollHeight;\n return bubble;\n}\n\nfunction addTyping() {\n clearWelcome();\n const msg = document.createElement(\"div\");\n msg.className = \"msg assistant\";\n msg.id = \"typing-msg\";\n msg.innerHTML = `

🤖

`;\n messagesEl.appendChild(msg);\n messagesEl.scrollTop = messagesEl.scrollHeight;\n}\nfunction removeTyping() {\n document.getElementById(\"typing-msg\")?.remove();\n}\n\nasync function loadHistory() {\n try {\n const res = await fetch(`/api/history?sessionId=${sessionId}`);\n const data = await res.json();\n if (data.history && data.history.length) {\n data.history.forEach((m) => addMessage(m.role, m.content));\n }\n } catch (e) { console.error(e); }\n}\n\nasync function send() {\n const text = inputEl.value.trim();\n if (!text && !pendingImage) return;\n\n const imgDataUrl = pendingImage ? `data:${pendingImage.mime};base64,${pendingImage.base64}` : null;\n addMessage(\"user\", text || \"[Hình ảnh]\", imgDataUrl);\n\n inputEl.value = \"\";\n inputEl.style.height = \"auto\";\n sendBtn.disabled = true;\n\n const payload = { sessionId, message: text };\n if (pendingImage) {\n payload.imageBase64 = pendingImage.base64;\n payload.imageMime = pendingImage.mime;\n }\n clearImage();\n\n addTyping();\n try {\n const res = await fetch(\"/api/chat\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify(payload),\n });\n const data = await res.json();\n removeTyping();\n addMessage(\"assistant\", data.reply || data.error || \"Có lỗi xảy ra.\");\n } catch (e) {\n removeTyping();\n addMessage(\"assistant\", \"⚠️ Không kết nối được máy chủ: \" + e);\n }\n sendBtn.disabled = false;\n}\n\nfunction clearImage() {\n pendingImage = null;\n imageInput.value = \"\";\n imagePreview.classList.add(\"hidden\");\n}\n\nimageInput.addEventListener(\"change\", () => {\n const file = imageInput.files[0];\n if (!file) return;\n const reader = new FileReader();\n reader.onload = () => {\n const dataUrl = reader.result;\n const base64 = dataUrl.split(\",\")[1];\n pendingImage = { base64, mime: file.type };\n previewImg.src = dataUrl;\n imagePreview.classList.remove(\"hidden\");\n };\n reader.readAsDataURL(file);\n});\nremoveImg.addEventListener(\"click\", clearImage);\n\nsendBtn.addEventListener(\"click\", send);\ninputEl.addEventListener(\"keydown\", (e) => {\n if (e.key === \"Enter\" && !e.shiftKey) {\n e.preventDefault();\n send();\n }\n});\ninputEl.addEventListener(\"input\", () => {\n inputEl.style.height = \"auto\";\n inputEl.style.height = Math.min(inputEl.scrollHeight, 160) + \"px\";\n});\n\nclearBtn.addEventListener(\"click\", async () => {\n if (!confirm(\"Xóa toàn bộ cuộc trò chuyện?\")) return;\n await fetch(\"/api/clear\", {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({ sessionId }),\n });\n messagesEl.innerHTML = \"\";\n location.reload();\n});\n\ndocument.querySelectorAll(\".chip\").forEach((chip) => {\n chip.addEventListener(\"click\", () => {\n inputEl.value = chip.dataset.q;\n send();\n });\n});\n\nloadHistory();\n",[18,90],"pulls","branches",1,"forks","envVars",{"_199":193,"_201":26},"connections",{"_199":26,"_200":26},"count","unfilledCount","emptyCount",{"_35":231,"_13":230,"_65":223,"_45":-5,"_37":38,"_170":193,"_171":24,"_39":232,"_41":26,"_68":93,"_173":-5,"_69":30,"_174":-5,"_209":233,"_17":234},{"_35":221,"_13":222,"_65":106,"_45":223,"_37":38,"_170":133,"_171":24,"_39":224,"_41":225,"_68":226,"_173":227,"_69":30,"_174":-5,"_209":228,"_17":229},{"_35":169,"_13":18,"_65":92,"_45":-5,"_37":38,"_170":42,"_171":24,"_39":218,"_41":26,"_68":93,"_173":-5,"_69":30,"_174":-5,"_209":219,"_17":220},{"_35":187,"_13":90,"_65":89,"_45":92,"_37":38,"_170":84,"_171":24,"_39":215,"_41":26,"_68":91,"_173":189,"_69":30,"_174":-5,"_209":216,"_17":217},{"_35":183,"_13":67,"_65":66,"_45":92,"_37":38,"_170":42,"_171":24,"_39":212,"_41":26,"_68":21,"_173":185,"_69":30,"_174":-5,"_209":213,"_17":214},{"_35":179,"_13":81,"_65":80,"_45":92,"_37":38,"_170":75,"_171":24,"_39":208,"_41":26,"_68":21,"_173":181,"_69":30,"_174":-5,"_209":210,"_17":211},["D",1780815155300],"children",[],[18,81],["D",1780815134987],[],[18,67],["D",1780815172441],[],[18,90],["D",1780815134987],[205,206,207],[18],"7efc5339-ca46-4740-899d-4b39cdfc942c","index.ts","0529a446-7a84-44a6-ba19-2889fc3b67a5",["D",1780815771106],7,"http","import { sqlite } from \"https://esm.town/v/std/sqlite\";\nimport { readFile, serveFile } from \"https://esm.town/v/std/utils/index.ts\";\n\nconst GEMINI_KEY = Deno.env.get(\"GEMINI_API_KEY\");\n// Thử lần lượt các model — bản lite có hạn mức free cao nhất\nconst MODELS = [\"gemini-2.0-flash-lite\"];\n\n// ---- DB setup ----\nawait sqlite.execute(`\n CREATE TABLE IF NOT EXISTS messages_v1 (\n id INTEGER PRIMARY KEY AUTOINCREMENT,\n session_id TEXT NOT NULL,\n role TEXT NOT NULL,\n content TEXT NOT NULL,\n created_at TEXT DEFAULT CURRENT_TIMESTAMP\n )\n`);\n\nfunction json(data: unknown, status = 200) {\n return new Response(JSON.stringify(data), {\n status,\n headers: { \"Content-Type\": \"application/json\" },\n });\n}\n\nasync function getHistory(sessionId: string, limit = 30) {\n const r = await sqlite.execute({\n sql:\n \"SELECT role, content FROM messages_v1 WHERE session_id = ? ORDER BY id DESC LIMIT ?\",\n args: [sessionId, limit],\n });\n return r.rows.reverse().map((row: any) => ({\n role: row.role as string,\n content: row.content as string,\n }));\n}\n\nasync function saveMessage(sessionId: string, role: string, content: string) {\n await sqlite.execute({\n sql: \"INSERT INTO messages_v1 (session_id, role, content) VALUES (?, ?, ?)\",\n args: [sessionId, role, content],\n });\n}\n\nasync function callGemini(\n history: { role: string; content: string }[],\n imageBase64?: string,\n imageMime?: string,\n) {\n if (!GEMINI_KEY) {\n return \"⚠️ Chưa cấu hình GEMINI_API_KEY. Hãy thêm khóa API Google Gemini trong phần Environment Variables.\";\n }\n\n const contents = history.map((m) => ({\n role: m.role === \"assistant\" ? \"model\" : \"user\",\n parts: [{ text: m.content && m.content.length ? m.content : \" \" }] as any[],\n }));\n\n // Đính kèm ảnh vào tin nhắn cuối cùng của người dùng (nếu có)\n if (imageBase64 && imageBase64.length > 0 && contents.length > 0) {\n // Loại bỏ tiền tố data URL nếu lỡ truyền vào (vd: \"data:image/png;base64,....\")\n const cleanBase64 = imageBase64.includes(\",\")\n ? imageBase64.split(\",\").pop()!\n : imageBase64;\n const last = contents[contents.length - 1];\n last.parts.push({\n inlineData: { mimeType: imageMime || \"image/jpeg\", data: cleanBase64 },\n });\n }\n\n const requestBody = JSON.stringify({\n contents,\n systemInstruction: {\n parts: [{\n text:\n \"Bạn là một trợ lý AI thông minh, thân thiện, trả lời bằng tiếng Việt rõ ràng và hữu ích. Bạn có thể phân tích ảnh người dùng gửi.\",\n }],\n },\n });\n\n let lastErr = \"\";\n for (const model of MODELS) {\n const res = await fetch(\n `https://generativelanguage.googleapis.com/v1beta/models/${model}:generateContent?key=${GEMINI_KEY}`,\n {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: requestBody,\n },\n );\n\n if (res.ok) {\n const data = await res.json();\n return data?.candidates?.[0]?.content?.parts?.map((p: any) => p.text)\n .join(\"\") ?? \"(Không có phản hồi)\";\n }\n\n lastErr = `(${res.status}) ${(await res.text()).slice(0, 200)}`;\n // Chỉ thử model khác khi bị quá tải/hết hạn mức; lỗi khác thì dừng luôn\n if (res.status !== 429 && res.status !== 503) break;\n }\n\n if (lastErr.startsWith(\"(429\")) {\n return \"⚠️ Khóa API Gemini đã hết hạn mức (quota) trong ngày/phút. Vui lòng đợi vài phút rồi thử lại, hoặc tạo khóa mới tại https://aistudio.google.com/app/apikey\";\n }\n return `⚠️ Lỗi từ Gemini API: ${lastErr}`;\n}\n\nexport default async function (req: Request): Promise {\n const url = new URL(req.url);\n const path = url.pathname;\n\n // ---- API: gửi tin nhắn ----\n if (path === \"/api/chat\" && req.method === \"POST\") {\n try {\n const body = await req.json();\n const sessionId = body.sessionId || \"default\";\n const message = (body.message || \"\").trim();\n const imageBase64 = body.imageBase64;\n const imageMime = body.imageMime;\n\n if (!message && !imageBase64) {\n return json({ error: \"Tin nhắn trống\" }, 400);\n }\n\n await saveMessage(sessionId, \"user\", message || \"[Đã gửi một hình ảnh]\");\n const history = await getHistory(sessionId);\n const reply = await callGemini(history, imageBase64, imageMime);\n await saveMessage(sessionId, \"assistant\", reply);\n\n return json({ reply });\n } catch (e) {\n return json({ error: String(e) }, 500);\n }\n }\n\n // ---- API: lấy lịch sử ----\n if (path === \"/api/history\" && req.method === \"GET\") {\n const sessionId = url.searchParams.get(\"sessionId\") || \"default\";\n const history = await getHistory(sessionId, 100);\n return json({ history });\n }\n\n // ---- API: xóa lịch sử ----\n if (path === \"/api/clear\" && req.method === \"POST\") {\n const body = await req.json();\n const sessionId = body.sessionId || \"default\";\n await sqlite.execute({\n sql: \"DELETE FROM messages_v1 WHERE session_id = ?\",\n args: [sessionId],\n });\n return json({ ok: true });\n }\n\n // ---- Static frontend ----\n if (path === \"/\" || path === \"/index.html\") {\n return serveFile(\"/frontend/index.html\", import.meta.url);\n }\n if (path === \"/app.js\") {\n return serveFile(\"/frontend/app.js\", import.meta.url);\n }\n if (path === \"/style.css\") {\n return serveFile(\"/frontend/style.css\", import.meta.url);\n }\n\n return new Response(\"Not found\", { status: 404 });\n}",[],[230,222],"backend","1e7879f6-88f9-4163-ad24-b3a1aacf9687",["D",1780815122395],[203],[230],["D",1780815098832],["D",1789515055826],{"_11":12,"_147":72},{"_11":12,"_142":143,"_71":72,"_31":70,"_144":145,"_146":30},{"_41":133,"_13":16,"_35":38,"_134":95,"_135":-5,"_136":-5,"_137":-5,"_138":-5,"_139":-5,"_140":14,"_141":12},"ctx",{"_55":-5,"_166":273,"_274":275,"_276":277,"_278":30,"_279":30,"_280":30,"_281":24,"_282":-5,"_283":-7,"_284":-7,"_285":26,"_286":30,"_287":30,"_288":-5,"_289":30,"_290":30,"_291":30,"_292":-5},"ENV",{"_244":245,"_246":247,"_248":16,"_249":250,"_251":252,"_253":254,"_255":256,"_257":258,"_259":260,"_261":262,"_263":264,"_265":266,"_267":268,"_269":270,"_271":272},"REACT_APP_SENTRY_DSN","https://586020d86f05489db63a554690acf1e9@o1398359.ingest.sentry.io/6724499","RENDER_GIT_COMMIT","e87eb04e707cf64e7e532c8e8ec395f209e17f15","RENDER_GIT_BRANCH","POSTHOG_API_TOKEN","phc_nmoyuAkStEZuUp69rYlg1DZgrIt19Gx0Y4Hwf8tGgJP","POSTHOG_API_HOST","https://wart.val.town","WEB_API_TEMPLATE","https://{val}.web.val.run","APP_URL","https://www.val.town","MODULE_URL","https://esm.town","VANITY_WEB_API_TEMPLATE","https://{label}.val.run/","DENOLS_URL","https://lsp.val.town","NODE_ENV","production","CLOUDFLARE_TURNSTILE_SITE_KEY","0x4AAAAAACtaIZJH7s9rBMZ6","GOOGLE_CLIENT_ID","875989696899-jtsqkhlbdv5jrlsk8631p7ipjg3c6o62.apps.googleusercontent.com","STRIPE_PUBLISHABLE_KEY","pk_live_51N2zvWEpZTTLipIkVEwXrUG9AT0yeOOEYxszarZT1jpsZV58Ly6wlg3SltZpHN26CUalOBmUSY7adQRQiSkCZz2500qSXNkf8Y","API_URL","https://api.val.town",[],"preferencesKeybindings","default","preferencesTheme","light","preferencesFixers","preferencesCopilot","preferencesSelectionAi","preferencesCloseBrackets","preferencesChatPanelState","preferencesDprint","preferencesDenofmt","notificationCount","flagDenols","isBusinessOrgMember","businessOrgHandle","isBusinessOrgAdmin","isHigherTownieTier","navCollapsed","currentOrgId"]

History · frontend