| |
| |
| import { api } from "./api.js"; |
| import { currentSubject } from "./ui.js"; |
| import { esc, fmt } from "./math.js"; |
| import { isTouch, prepare, pictureUrl, sendPicture } from "./media.js"; |
|
|
| let layer = null, timer = null, shown = { hints: 1, works: new Set(), answer: false }; |
| let statusPromise = null, statusAt = 0; |
|
|
| |
| export function status(fresh = false) { |
| if (!statusPromise || fresh || Date.now() - statusAt > 60000) { |
| statusAt = Date.now(); |
| statusPromise = api("/api/ai/status").catch(() => ({ on: false, requests: [] })); |
| } |
| return statusPromise; |
| } |
|
|
| const STATE = { waiting: "ממתין למורה", processing: "ה־AI עובד על זה", done: "מוכן", declined: "המורה לא שלח/ה", cancelled: "בוטל", failed: "לא הצלחנו", closed: "טופל" }; |
| export const stateWord = state => STATE[state] || state; |
|
|
| const q = selector => layer?.querySelector(selector); |
| const reminderSeen = () => { try { return localStorage.getItem("ai-reminder") === "1"; } catch { return false; } }; |
| const seenReminder = () => { try { localStorage.setItem("ai-reminder", "1"); } catch { } }; |
|
|
| function mount() { |
| if (layer) return; |
| layer = document.createElement("div"); |
| layer.className = "ai-window"; |
| layer.innerHTML = `<div class="sheet" role="dialog" aria-modal="true" aria-labelledby="ai-title"></div>`; |
| document.body.append(layer); |
| layer.addEventListener("click", event => { if (event.target === layer || event.target.closest("[data-ai-close]")) close(); }); |
| } |
|
|
| export function close() { |
| clearTimeout(timer); |
| timer = null; |
| layer?.remove(); |
| layer = null; |
| } |
|
|
| const body = html => { q(".sheet").innerHTML = `<div class="ai-top"><h3 id="ai-title">עזרה מתמונה</h3><button type="button" class="mx-x" data-ai-close aria-label="סגירה">✕</button></div>${html}`; }; |
|
|
| |
| export async function openNew(context = {}) { |
| mount(); |
| body(`<p class="ex-note" role="note">המורה רואה את התמונה לפני שהיא נשלחת ל־AI, ולכן התשובה לא מגיעה מיד.</p> |
| <p class="muted">אל תכתבו שם או פרטים אישיים בתמונה.</p> |
| <p class="actions">${isTouch() ? `<label class="button file primary">📷 צילום<input type="file" accept="image/*" capture="environment" hidden data-ai-file></label>` : ""} |
| <label class="button file">🖼 בחירת תמונה<input type="file" accept="image/jpeg,image/png,image/webp" hidden data-ai-file></label></p> |
| <div id="ai-preview"></div><p class="error" id="ai-error" role="alert" hidden></p>`); |
| let chosen = null; |
| layer.querySelectorAll("[data-ai-file]").forEach(input => input.addEventListener("change", async () => { |
| const file = input.files[0]; |
| input.value = ""; |
| if (!file) return; |
| chosen = await prepare(file); |
| q("#ai-preview").innerHTML = `<img id="ai-img" alt="התמונה שבחרתם" src="${URL.createObjectURL(chosen)}"><p><button type="button" class="primary" id="ai-send">שליחה למורה</button></p>`; |
| q("#ai-send").addEventListener("click", async () => { |
| const button = q("#ai-send"); |
| button.disabled = true; |
| try { |
| seenReminder(); |
| const params = new URLSearchParams(Object.entries({ skill_id: context.skillId, class_id: context.classId, |
| subject: context.skillId ? "" : currentSubject() }).filter(([, v]) => v)); |
| const made = await sendPicture(`/api/ai/photo${params.size ? `?${params}` : ""}`, chosen); |
| status(true); |
| follow(made.id); |
| } catch (error) { |
| button.disabled = false; |
| q("#ai-error").textContent = error.message; |
| q("#ai-error").hidden = false; |
| } |
| }); |
| })); |
| } |
|
|
| |
| export async function follow(id) { |
| mount(); |
| clearTimeout(timer); |
| let request; |
| try { request = await api(`/api/ai/requests/${encodeURIComponent(id)}`); } catch (error) { body(`<p class="error" role="alert">${esc(error.message)}</p>`); return; } |
| if (!layer) return; |
| draw(request); |
| if (["waiting", "processing"].includes(request.state)) timer = setTimeout(() => layer && follow(id), 4000); |
| } |
|
|
| function draw(request) { |
| const photo = request.picture ? `<p><img id="ai-photo" alt="התמונה ששלחתם" hidden></p>` : ""; |
| let content = `<p id="ai-state" role="status"><span class="tag st-${esc(request.state)}">${esc(stateWord(request.state))}</span></p>${photo}`; |
| if (request.state === "waiting") content += `<p class="muted">המורה רואה את התמונה ומחליט/ה אם לשלוח אותה. אפשר לסגור, והבקשה תחכה.</p><p><button type="button" id="ai-cancel">ביטול הבקשה</button></p>`; |
| if (request.state === "processing") content += `<p class="muted">המורה שלח/ה את התמונה. עוד רגע התשובה כאן.</p>`; |
| if (request.state === "declined") content += `<p id="ai-note"><b>המורה:</b> ${request.teacher_note ? fmt(request.teacher_note) : "לא נשלח. אפשר לשאול את המורה."}</p>`; |
| if (request.state === "failed") content += `<p class="error" role="alert" id="ai-failed">${esc(request.failure?.message || "לא הצלחנו כרגע. נסו שוב מאוחר יותר.")}</p>`; |
| if (request.state === "done") content += result(request); |
| body(content); |
| if (request.picture) pictureUrl(request.picture.id).then(url => { const img = q("#ai-photo"); if (img) { img.src = url; img.hidden = false; } }).catch(() => {}); |
| q("#ai-cancel")?.addEventListener("click", async () => { await api(`/api/ai/requests/${request.id}/cancel`, { method: "POST" }); status(true); follow(request.id); }); |
| layer.querySelectorAll("[data-more]").forEach(b => b.addEventListener("click", () => { reveal(request, b.dataset.more, Number(b.dataset.i)); })); |
| } |
|
|
| function result(request) { |
| const r = request.result; |
| if (!r.readable) return `<p id="ai-unreadable" role="status">${fmt(r.note || "לא הצלחנו לקרוא את התמונה. צלמו שוב.")}</p>`; |
| const steps = r.steps || []; |
| const hints = steps.slice(0, shown.hints).map((s, i) => `<li data-step="${i}"><p class="ai-hint">💡 ${fmt(s.hint)}</p> |
| ${shown.works.has(i) ? `<p class="ai-work">${fmt(s.work)}</p>` : `<button type="button" data-more="work" data-i="${i}">הצגת הצעד</button>`}</li>`).join(""); |
| const nextHint = shown.hints < steps.length ? `<button type="button" data-more="hint" data-i="0" id="ai-next-hint">רמז נוסף</button>` : ""; |
| const answer = shown.answer ? `<p id="ai-answer"><b>התשובה:</b> ${fmt(r.answer)}</p>` : `<button type="button" data-more="answer" data-i="0" id="ai-show-answer">הצגת התשובה</button>`; |
| const skill = r.skill ? `<p class="muted">המיומנות במסלול: <a href="#/skill/${esc(r.skill.id)}" data-ai-close>${fmt(r.skill.name)}</a></p>` : ""; |
| return `<p class="muted">כך קראנו את התרגיל: ${fmt(r.problem)}</p>${r.note ? `<p class="ex-note">${fmt(r.note)}</p>` : ""}<ol class="plain ai-steps" id="ai-steps">${hints}</ol> |
| <p class="actions">${nextHint}</p><p>${answer}</p>${skill}`; |
| } |
|
|
| function reveal(request, what, i) { |
| if (what === "hint") shown.hints += 1; |
| if (what === "work") shown.works.add(i); |
| if (what === "answer") shown.answer = true; |
| draw(request); |
| } |
|
|
| |
| export function open({ id = null, skillId = null, classId = null } = {}) { |
| shown = { hints: 1, works: new Set(), answer: false }; |
| return id ? follow(id) : openNew({ skillId, classId }); |
| } |
|
|
| export const isOpen = () => !!layer; |
|
|
