Freezmo: self-hosted notes-to-activities study app
Next.js 15 app that turns photos, PDFs, DOCX/PPTX and text into a swipeable feed of AI-generated activities (flashcards, multiple choice, true/false, fill-in-the-blank, matching, ordering, short answer) using the user's own Ollama models. Highlights: - All AI calls run in server route handlers; the browser never talks to Ollama. - Bring-your-own-key mode (default): the key lives only in the browser and is sent per-request; server, local-daemon and shared-key modes also supported. - Client-side document extraction (pdf.js, mammoth, jszip) with scanned-PDF page rendering for the vision model; notes stay in their original language. - ChatGPT-style shell: collapsible sidebar / mobile drawer, neutral token-based light + dark themes, folder organisation, PWA (manifest, SW, offline page). - Strict JSON validation with zod + auto-repair, rate limiting, and request guards (cross-origin, body-size, API-key sanitising). - setup.sh bootstraps deps, .env.local and a production build. Gitignore excludes .env*, the generated pdf.js worker and local scratch files.
This commit is contained in:
parent
3baa0fa8ce
commit
3ea2cea100
83 changed files with 10909 additions and 165 deletions
202
components/activities/FillBlank.tsx
Normal file
202
components/activities/FillBlank.tsx
Normal file
|
|
@ -0,0 +1,202 @@
|
|||
"use client";
|
||||
|
||||
import { useEffect, useRef, useState } from "react";
|
||||
|
||||
import type { Activity } from "@/lib/schemas";
|
||||
import { cn } from "@/lib/utils";
|
||||
import { Button } from "@/components/ui";
|
||||
|
||||
import {
|
||||
ActivityHeader,
|
||||
FeedbackPanel,
|
||||
Hint,
|
||||
OptionTile,
|
||||
PromptCard,
|
||||
type ActivityComponentProps,
|
||||
} from "./shared";
|
||||
|
||||
type FillBlankActivity = Extract<Activity, { type: "fill_blank" }>;
|
||||
|
||||
const BLANK = /_{2,}/;
|
||||
|
||||
function normalise(value: string): string {
|
||||
return value
|
||||
.toLowerCase()
|
||||
.normalize("NFKD")
|
||||
.replace(/[\u0300-\u036f]/g, "")
|
||||
.replace(/[^a-z0-9\s]/g, " ")
|
||||
.replace(/\s+/g, " ")
|
||||
.trim();
|
||||
}
|
||||
|
||||
function levenshtein(a: string, b: string): number {
|
||||
if (a === b) return 0;
|
||||
if (!a.length || !b.length) return Math.max(a.length, b.length);
|
||||
let previous = Array.from({ length: b.length + 1 }, (_, i) => i);
|
||||
for (let i = 1; i <= a.length; i++) {
|
||||
const current = [i];
|
||||
for (let j = 1; j <= b.length; j++) {
|
||||
current[j] = Math.min(
|
||||
previous[j] + 1,
|
||||
current[j - 1] + 1,
|
||||
previous[j - 1] + (a[i - 1] === b[j - 1] ? 0 : 1),
|
||||
);
|
||||
}
|
||||
previous = current;
|
||||
}
|
||||
return previous[b.length];
|
||||
}
|
||||
|
||||
/** Lenient comparison: case/punctuation-insensitive, one typo allowed, "/" alternatives. */
|
||||
export function isFillBlankCorrect(userValue: string, answer: string): boolean {
|
||||
const user = normalise(userValue);
|
||||
if (!user) return false;
|
||||
const candidates = answer
|
||||
.split("/")
|
||||
.map((part) => normalise(part.replace(/\(.*?\)/g, "")))
|
||||
.filter(Boolean);
|
||||
return candidates.some((candidate) => {
|
||||
if (candidate === user) return true;
|
||||
if (candidate.length >= 5 && user.length >= 4 && levenshtein(candidate, user) <= 1) return true;
|
||||
// accept the answer with/without a trailing unit or article
|
||||
const candidateWords = candidate.split(" ");
|
||||
const userWords = user.split(" ");
|
||||
if (candidateWords.length > 1 && userWords.length === 1) return candidateWords.includes(user);
|
||||
return false;
|
||||
});
|
||||
}
|
||||
|
||||
export function FillBlank({ activity, active, onAnswered, onNext, isLast }: ActivityComponentProps<FillBlankActivity>) {
|
||||
const [value, setValue] = useState("");
|
||||
const [chosen, setChosen] = useState<string | null>(null);
|
||||
const [result, setResult] = useState<boolean | null>(null);
|
||||
const inputRef = useRef<HTMLInputElement>(null);
|
||||
|
||||
const hasBlank = BLANK.test(activity.sentence);
|
||||
const [before, after = ""] = hasBlank ? activity.sentence.split(BLANK) : [activity.sentence, ""];
|
||||
|
||||
useEffect(() => {
|
||||
if (active && !hasBlank && !activity.options) inputRef.current?.focus();
|
||||
}, [active, hasBlank, activity.options]);
|
||||
|
||||
const submit = (answerValue: string) => {
|
||||
if (result !== null) return;
|
||||
const correct = isFillBlankCorrect(answerValue, activity.answer);
|
||||
setChosen(answerValue);
|
||||
setResult(correct);
|
||||
onAnswered(correct, { userAnswer: answerValue });
|
||||
};
|
||||
|
||||
const displayAnswer = chosen ?? "";
|
||||
|
||||
return (
|
||||
<>
|
||||
<ActivityHeader type="fill_blank" topic={activity.topic} />
|
||||
<PromptCard>
|
||||
<p className="text-lg font-semibold leading-loose text-frost-950 sm:text-xl dark:text-frost-50">
|
||||
{before}
|
||||
{activity.options ? (
|
||||
<span
|
||||
className={cn(
|
||||
"mx-1 inline-block min-w-24 rounded-xl border-b-4 px-3 py-0.5 text-center align-baseline",
|
||||
result === null
|
||||
? "border-frost-300 bg-frost-50/80 text-frost-500 dark:bg-white/10 dark:text-frost-200"
|
||||
: result
|
||||
? "border-emerald-400 bg-emerald-50 text-emerald-800 dark:bg-emerald-400/15 dark:text-emerald-100"
|
||||
: "border-rose-400 bg-rose-50 text-rose-800 dark:bg-rose-400/15 dark:text-rose-100",
|
||||
)}
|
||||
>
|
||||
{displayAnswer || "?"}
|
||||
</span>
|
||||
) : (
|
||||
<input
|
||||
ref={inputRef}
|
||||
value={displayAnswer}
|
||||
onChange={(event) => setValue(event.target.value)}
|
||||
onKeyDown={(event) => {
|
||||
if (event.key === "Enter" && !result) {
|
||||
event.preventDefault();
|
||||
submit(value);
|
||||
}
|
||||
event.stopPropagation();
|
||||
}}
|
||||
disabled={result !== null}
|
||||
aria-label="Type the missing word"
|
||||
placeholder="type it"
|
||||
autoComplete="off"
|
||||
autoCapitalize="off"
|
||||
spellCheck={false}
|
||||
className={cn(
|
||||
"mx-1 inline-block rounded-xl border-b-4 bg-white/70 px-2 py-0.5 text-center text-frost-950 outline-none backdrop-blur-lg placeholder:text-frost-300 dark:bg-white/10 dark:text-frost-50 dark:placeholder:text-white/30",
|
||||
result === null
|
||||
? "border-frost-300 focus:border-frost-500"
|
||||
: result
|
||||
? "border-emerald-400 bg-emerald-50 text-emerald-900 dark:bg-emerald-400/15 dark:text-emerald-100"
|
||||
: "border-rose-400 bg-rose-50 text-rose-900 dark:bg-rose-400/15 dark:text-rose-100",
|
||||
)}
|
||||
style={{ width: `${Math.max(5, (displayAnswer.length || 6) + 2)}ch` }}
|
||||
/>
|
||||
)}
|
||||
{after}
|
||||
</p>
|
||||
</PromptCard>
|
||||
|
||||
{activity.options ? (
|
||||
<div className="grid grid-cols-2 gap-2.5" role="group" aria-label="Word bank">
|
||||
{activity.options.map((option) => {
|
||||
const state =
|
||||
result === null
|
||||
? "idle"
|
||||
: normalise(option) === normalise(activity.answer)
|
||||
? "correct"
|
||||
: chosen && normalise(chosen) === normalise(option) && result === false
|
||||
? "wrong"
|
||||
: "dim";
|
||||
return (
|
||||
<OptionTile
|
||||
key={option}
|
||||
state={state}
|
||||
disabled={result !== null}
|
||||
onClick={() => submit(option)}
|
||||
className="justify-center text-center"
|
||||
>
|
||||
{option}
|
||||
</OptionTile>
|
||||
);
|
||||
})}
|
||||
</div>
|
||||
) : result === null ? (
|
||||
<div className="flex gap-2">
|
||||
<Button size="lg" onClick={() => submit(value)} disabled={!value.trim()} className="flex-1">
|
||||
Check answer
|
||||
</Button>
|
||||
</div>
|
||||
) : null}
|
||||
|
||||
{result === null && !activity.options ? (
|
||||
<Hint>Press Enter to check. Small typos are forgiven.</Hint>
|
||||
) : null}
|
||||
|
||||
{result !== null ? (
|
||||
<FeedbackPanel
|
||||
correct={result}
|
||||
explanation={activity.explanation}
|
||||
xp={activity.xp}
|
||||
isLast={isLast}
|
||||
onNext={onNext}
|
||||
detail={
|
||||
<span>
|
||||
Expected: <span className="font-bold">{activity.answer}</span>
|
||||
{!result && chosen ? (
|
||||
<>
|
||||
{" "}
|
||||
— you wrote <span className="italic">{chosen}</span>
|
||||
</>
|
||||
) : null}
|
||||
</span>
|
||||
}
|
||||
/>
|
||||
) : null}
|
||||
</>
|
||||
);
|
||||
}
|
||||
Loading…
Add table
Add a link
Reference in a new issue