Add “Make my homework”, and finish the mobile polish pass
Homework (/homework — entry points in the drawer and on the create screen) - Assignment intake reuses the study pipeline: pasted text, photos (camera/picker, compressed in the browser) and documents (PDF/DOCX/PPTX/ ODT/text) through lib/image + lib/documents, the same vision step and the same language guard. Raw files never leave the device — only text and JPEG data URLs reach the server. - Two large choice cards: “Just make it” returns the finished homework (answer only, plain text, copy + make it again); “Explain how to make this homework” builds an interactive guide. - The guide is one step per screen in the study-feed snap layout: explanation, three progressive hints (nudge -> hint -> the answer) and an optional checkpoint rendered by the existing activity components (graded through /api/grade). The last screen assembles the solution from the step answers, with a copy button. Checkpoints carry xp 0 so the guide stays free of XP/streak chrome. - Results live in freezmo.homework.v1 with a small history (open/delete); “Make it again” re-runs from the stored assignment text (the vision transcription when photos were used) — no original files are stored. - The answer and the guide are written in the assignment's language, never translated into the UI language. Server - POST /api/homework: NDJSON stage events like /api/generate, the same http-guard, auth checked before parsing, and its own RATE_LIMIT_HOMEWORK (documented in .env.example + the README table). - New prompts in lib/prompts.ts and zod schemas in lib/schemas.ts with the same single repair retry; TEXT_MODEL for content, VISION_MODEL only for photos. New shared client pieces: useNotesIntake, lib/homework store, lib/clipboard, and a shared NDJSON reader in lib/client-api. Also finishing the mobile polish pass from the previous request - Phone ice scene: the top-left orb moved behind the glass header (it sat behind the page heading/subtitle). The settings sheet's scroll cue is now a bare chevron inside a content fade (mask) instead of a chip over the status banner, and the API key card's note/disclosure/actions are tightened. - theme-color now follows the in-app theme (SSR metas still fall back to the OS preference); apple-mobile-web-app-status-bar-style stays “default” because iOS fixes the status-bar text colour at launch. Verified: 78/78 homework checks (text/photo/PDF, both modes, EN+CS, dark+light, 360/390px, copy, history persistence, storage privacy, API language, axe), plus the existing suites re-run (mobile 47/47, pixel contrast 0 below AA, i18n 27/27, desktop regression 72/72). Lint + build clean; service worker freezmo-v6.
This commit is contained in:
parent
9fb728d735
commit
ef2a6a3589
35 changed files with 2334 additions and 100 deletions
225
app/api/homework/route.ts
Normal file
225
app/api/homework/route.ts
Normal file
|
|
@ -0,0 +1,225 @@
|
|||
import { z } from "zod";
|
||||
|
||||
import { buildHomeworkGuide, extractNotes, makeHomework, notesToText, type PipelineStage } from "@/lib/ai";
|
||||
import { authErrorMessage, authErrorKind, getServerConfig, resolveAuth, resolveModelName } from "@/lib/config";
|
||||
import { friendlyErrorMessage, OllamaError } from "@/lib/ollama";
|
||||
import { rejectCrossOrigin, rejectOversizedBody, requestLocale } from "@/lib/http-guard";
|
||||
import { clientKey, rateLimit, rateLimitResponse } from "@/lib/rate-limit";
|
||||
import { translate } from "@/lib/i18n-dict";
|
||||
import { homeworkModeSchema, type HomeworkStep } from "@/lib/schemas";
|
||||
import { uid } from "@/lib/utils";
|
||||
|
||||
export const runtime = "nodejs";
|
||||
export const dynamic = "force-dynamic";
|
||||
export const maxDuration = 300;
|
||||
|
||||
/** ~8 MB per image after client-side resizing; up to 16 images (photos + PDF pages). */
|
||||
const MAX_IMAGE_CHARS = 8_000_000;
|
||||
/** Generous but finite: ~16 compressed images plus JSON overhead. */
|
||||
const MAX_BODY_BYTES = 33554432;
|
||||
|
||||
const requestSchema = z.object({
|
||||
mode: homeworkModeSchema,
|
||||
images: z.array(z.string().min(32).max(MAX_IMAGE_CHARS)).max(16).optional(),
|
||||
text: z.string().max(120_000).optional(),
|
||||
/** Language of the assignment (usually detected by the vision step). */
|
||||
language: z.string().max(60).optional(),
|
||||
});
|
||||
|
||||
type StreamEvent =
|
||||
| { type: "stage"; stage: PipelineStage; message: string }
|
||||
| { type: "homework"; homework: unknown; meta: Record<string, unknown> }
|
||||
| { type: "error"; error: string; kind?: string };
|
||||
|
||||
function encoder() {
|
||||
const enc = new TextEncoder();
|
||||
return (event: StreamEvent) => enc.encode(`${JSON.stringify(event)}\n`);
|
||||
}
|
||||
|
||||
/** Same pipeline shape as /api/generate: vision (photos only) then one model call. */
|
||||
export async function POST(request: Request) {
|
||||
const locale = requestLocale(request);
|
||||
const crossOrigin = rejectCrossOrigin(request);
|
||||
if (crossOrigin) return crossOrigin;
|
||||
const oversized = rejectOversizedBody(request, MAX_BODY_BYTES);
|
||||
if (oversized) return oversized;
|
||||
|
||||
const config = getServerConfig();
|
||||
|
||||
// Cheap requests are rejected before any work happens.
|
||||
const limit = rateLimit(`homework:${clientKey(request)}`, config.rateLimits.homework, config.rateLimits.windowMs);
|
||||
if (!limit.allowed) return rateLimitResponse(limit, locale);
|
||||
|
||||
const auth = resolveAuth(config, request);
|
||||
if ("error" in auth) {
|
||||
return Response.json(
|
||||
{ error: authErrorMessage(locale, auth.error), kind: authErrorKind(auth.error) },
|
||||
{ status: 401 },
|
||||
);
|
||||
}
|
||||
|
||||
let payload: unknown;
|
||||
try {
|
||||
payload = await request.json();
|
||||
} catch {
|
||||
return Response.json({ error: translate(locale, "server.bodyNotJson") }, { status: 400 });
|
||||
}
|
||||
|
||||
const parsed = requestSchema.safeParse(payload);
|
||||
if (!parsed.success) {
|
||||
return Response.json(
|
||||
{
|
||||
error: translate(locale, "server.invalidRequest", {
|
||||
detail: parsed.error.issues
|
||||
.slice(0, 3)
|
||||
.map((issue) => `${issue.path.join(".") || "body"} ${issue.message}`)
|
||||
.join("; "),
|
||||
}),
|
||||
},
|
||||
{ status: 400 },
|
||||
);
|
||||
}
|
||||
|
||||
const { mode, images, text, language } = parsed.data;
|
||||
const imageList = (images ?? []).map(stripDataUrlPrefix).filter(Boolean);
|
||||
|
||||
if (imageList.length === 0 && !text?.trim()) {
|
||||
return Response.json({ error: translate(locale, "server.needAssignment") }, { status: 400 });
|
||||
}
|
||||
|
||||
const encode = encoder();
|
||||
const abort = new AbortController();
|
||||
// A single hard deadline for the whole pipeline (two sequential model calls).
|
||||
const globalTimer = setTimeout(() => abort.abort(), config.timeoutMs * 2);
|
||||
|
||||
const stream = new ReadableStream<Uint8Array>({
|
||||
async start(controller) {
|
||||
const send = (event: StreamEvent) => {
|
||||
try {
|
||||
controller.enqueue(encode(event));
|
||||
} catch {
|
||||
/* client went away */
|
||||
}
|
||||
};
|
||||
|
||||
try {
|
||||
let assignmentText: string;
|
||||
let detectedLanguage: string | undefined = language;
|
||||
let repaired = false;
|
||||
|
||||
if (imageList.length > 0) {
|
||||
send({ type: "stage", stage: "vision", message: translate(locale, "homework.loading.reading") });
|
||||
const extraction = await extractNotes({
|
||||
model: config.visionModel,
|
||||
repairModel: config.textModel,
|
||||
auth: auth.auth,
|
||||
images: imageList,
|
||||
text,
|
||||
signal: abort.signal,
|
||||
onProgress: (message) => send({ type: "stage", stage: "vision", message }),
|
||||
});
|
||||
assignmentText = notesToText(extraction.notes);
|
||||
detectedLanguage = extraction.notes.language || language;
|
||||
repaired = extraction.repaired || extraction.languageRepaired;
|
||||
} else {
|
||||
assignmentText = text!.trim();
|
||||
}
|
||||
|
||||
send({
|
||||
type: "stage",
|
||||
stage: "generation",
|
||||
message: translate(locale, mode === "make" ? "homework.loading.writing" : "homework.loading.planning"),
|
||||
});
|
||||
|
||||
const meta = {
|
||||
repaired,
|
||||
language: detectedLanguage || null,
|
||||
visionModel: imageList.length ? resolveModelName(config.visionModel, auth.auth.directCloud) : null,
|
||||
textModel: resolveModelName(config.textModel, auth.auth.directCloud),
|
||||
};
|
||||
|
||||
if (mode === "make") {
|
||||
const result = await makeHomework({
|
||||
model: config.textModel,
|
||||
auth: auth.auth,
|
||||
assignment: assignmentText,
|
||||
language: detectedLanguage,
|
||||
signal: abort.signal,
|
||||
});
|
||||
send({
|
||||
type: "homework",
|
||||
homework: {
|
||||
mode: "make",
|
||||
title: result.title,
|
||||
language: result.language || detectedLanguage,
|
||||
answer: result.answer,
|
||||
// The assignment as text (the vision transcription when photos
|
||||
// were used) so the client can store it for “Make it again”.
|
||||
sourceText: assignmentText,
|
||||
},
|
||||
meta,
|
||||
});
|
||||
} else {
|
||||
const guide = await buildHomeworkGuide({
|
||||
model: config.textModel,
|
||||
auth: auth.auth,
|
||||
assignment: assignmentText,
|
||||
language: detectedLanguage,
|
||||
signal: abort.signal,
|
||||
});
|
||||
const steps: HomeworkStep[] = guide.steps.map((step) => ({
|
||||
...step,
|
||||
// xp: 0 keeps the shared activity components from rendering their
|
||||
// "+XP" badge — the guide deliberately has no XP or streak.
|
||||
checkpoint: step.checkpoint ? { ...step.checkpoint, id: uid("act"), xp: 0 } : undefined,
|
||||
}));
|
||||
send({
|
||||
type: "homework",
|
||||
homework: {
|
||||
mode: "guide",
|
||||
title: guide.title,
|
||||
language: guide.language || detectedLanguage,
|
||||
steps,
|
||||
sourceText: assignmentText,
|
||||
},
|
||||
meta,
|
||||
});
|
||||
}
|
||||
} catch (error) {
|
||||
const message = friendlyErrorMessage(error, auth.auth.baseUrl, locale);
|
||||
// Never log the request body: it may contain the student's assignment.
|
||||
console.error("[api/homework]", error instanceof OllamaError ? `${error.kind}: ${error.message}` : error);
|
||||
send({
|
||||
type: "error",
|
||||
error: message,
|
||||
kind: error instanceof OllamaError ? error.kind : "unknown",
|
||||
});
|
||||
} finally {
|
||||
clearTimeout(globalTimer);
|
||||
try {
|
||||
controller.close();
|
||||
} catch {
|
||||
/* already closed */
|
||||
}
|
||||
}
|
||||
},
|
||||
cancel() {
|
||||
clearTimeout(globalTimer);
|
||||
abort.abort();
|
||||
},
|
||||
});
|
||||
|
||||
return new Response(stream, {
|
||||
headers: {
|
||||
"Content-Type": "application/x-ndjson; charset=utf-8",
|
||||
"Cache-Control": "no-store, no-transform",
|
||||
Connection: "keep-alive",
|
||||
},
|
||||
});
|
||||
}
|
||||
|
||||
function stripDataUrlPrefix(value: string): string {
|
||||
const commaIndex = value.indexOf(",");
|
||||
if (value.startsWith("data:") && commaIndex !== -1) return value.slice(commaIndex + 1);
|
||||
return value;
|
||||
}
|
||||
|
|
@ -338,7 +338,9 @@ body {
|
|||
--ice-blob-opacity: 0.2;
|
||||
--ice-orb-opacity: 0.42;
|
||||
}
|
||||
.ice-orb-1 { width: 96px; height: 96px; top: 8%; left: -26px; }
|
||||
/* Tucked up behind the glass header: at top 8% it sat right behind the page
|
||||
heading and subtitle. */
|
||||
.ice-orb-1 { width: 88px; height: 88px; top: -30px; left: -38px; }
|
||||
.ice-orb-2 { width: 72px; height: 72px; left: -32px; }
|
||||
/* Was sitting right behind the bottom-nav labels. */
|
||||
.ice-orb-3 { width: 116px; height: 116px; bottom: 15vh; right: -46px; }
|
||||
|
|
@ -698,10 +700,15 @@ body {
|
|||
}
|
||||
|
||||
/* Settings sheet: contained momentum scrolling; the safe-area padding comes
|
||||
from the pb-safe utility plus a trailing spacer. */
|
||||
from the pb-safe utility plus a trailing spacer. The mask fades the last
|
||||
36px of *content* (not a coloured overlay, so it blends with the glass in
|
||||
both themes) — that is the scroll cue; the trailing spacer keeps real
|
||||
content out of the faded strip once you reach the bottom. */
|
||||
.sheet-scroll {
|
||||
overscroll-behavior: contain;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
-webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
|
||||
mask-image: linear-gradient(to bottom, #000 calc(100% - 36px), transparent);
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
28
app/homework/page.tsx
Normal file
28
app/homework/page.tsx
Normal file
|
|
@ -0,0 +1,28 @@
|
|||
import { ApiKeyGate } from "@/components/ApiKeyGate";
|
||||
import { AppHeader } from "@/components/AppHeader";
|
||||
import { HomeworkScreen } from "@/components/homework/HomeworkScreen";
|
||||
import { MobileSidebar, Sidebar, SidebarOffset } from "@/components/Sidebar";
|
||||
import { TabBar } from "@/components/TabBar";
|
||||
|
||||
export const metadata = {
|
||||
title: "Make my homework",
|
||||
};
|
||||
|
||||
export default function HomeworkPage() {
|
||||
return (
|
||||
<ApiKeyGate>
|
||||
<div className="flex min-h-dvh">
|
||||
<Sidebar />
|
||||
<SidebarOffset />
|
||||
<MobileSidebar />
|
||||
<main className="flex min-h-dvh min-w-0 flex-1 flex-col">
|
||||
<AppHeader />
|
||||
<div className="mx-auto w-full max-w-3xl flex-1 px-4 pb-tabbar lg:px-10 lg:pb-16 lg:pt-10">
|
||||
<HomeworkScreen />
|
||||
</div>
|
||||
<TabBar />
|
||||
</main>
|
||||
</div>
|
||||
</ApiKeyGate>
|
||||
);
|
||||
}
|
||||
|
|
@ -55,8 +55,12 @@ export const viewport: Viewport = {
|
|||
],
|
||||
};
|
||||
|
||||
/** Applies the saved theme before paint to avoid a flash. */
|
||||
const themeScript = `(function(){try{var s=localStorage.getItem('freezmo.theme');var d=s?s==='dark':window.matchMedia('(prefers-color-scheme: dark)').matches;if(d)document.documentElement.classList.add('dark');var l=localStorage.getItem('freezmo.locale.v1');if(l==='cs'||l==='en')document.documentElement.lang=l;}catch(e){}})();`;
|
||||
/**
|
||||
* Applies the saved theme before paint to avoid a flash, and keeps the
|
||||
* `theme-color` meta in step with the *app* theme (the SSR metas follow the
|
||||
* OS preference, which is wrong once the user has picked a theme here).
|
||||
*/
|
||||
const themeScript = `(function(){try{var s=localStorage.getItem('freezmo.theme');var d=s?s==='dark':window.matchMedia('(prefers-color-scheme: dark)').matches;if(d)document.documentElement.classList.add('dark');var l=localStorage.getItem('freezmo.locale.v1');if(l==='cs'||l==='en')document.documentElement.lang=l;var m=document.querySelector('meta[name="theme-color"][data-app]');if(!m){m=document.createElement('meta');m.setAttribute('name','theme-color');m.setAttribute('data-app','1');document.head.insertBefore(m,document.head.firstChild);}m.setAttribute('content',d?'#0e1424':'#f4f7fd');}catch(e){}})();`;
|
||||
|
||||
/**
|
||||
* Captures Chrome's `beforeinstallprompt` (it can fire before React hydrates)
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue