Martin Dvorak
3ea2cea100
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.
76 lines
4.4 KiB
JavaScript
76 lines
4.4 KiB
JavaScript
/**
|
|
* Renders the Freezmo app icons (PWA + iOS) with headless Chromium.
|
|
* Run: node scripts/make-icons.mjs (requires the Playwright browser cache)
|
|
*/
|
|
import { chromium } from "playwright-core";
|
|
import { mkdirSync, existsSync } from "node:fs";
|
|
|
|
const CHROME = process.env.CHROME ?? "/home/martin/.cache/ms-playwright/chromium-1243/chrome-linux64/chrome";
|
|
const OUT = new URL("../public/icons/", import.meta.url).pathname;
|
|
mkdirSync(OUT, { recursive: true });
|
|
|
|
const SNOWFLAKE = (size, stroke, inset) => `
|
|
<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 64 64" width="${size}" height="${size}">
|
|
<g transform="translate(${inset},${inset}) scale(${(64 - inset * 2) / 64})"
|
|
stroke="#ffffff" stroke-width="${stroke}" stroke-linecap="round" fill="none">
|
|
<path d="M32 12v40M14.7 22l34.6 20M49.3 22 14.7 42" />
|
|
<path d="M32 20.5 26.8 15.3M32 20.5l5.2-5.2M32 43.5l-5.2 5.2M32 43.5l5.2 5.2" />
|
|
<path d="M20.7 27.5l-6.6-1.7M20.7 36.5l-6.6 1.7M43.3 27.5l6.6-1.7M43.3 36.5l6.6 1.7" />
|
|
</g>
|
|
</svg>`;
|
|
|
|
function pageHtml({ size, radius, inset, background, stroke }) {
|
|
return `<!doctype html><html><head><meta charset="utf-8"><style>
|
|
html,body{margin:0;padding:0;background:transparent;width:${size}px;height:${size}px;overflow:hidden}
|
|
.icon{width:${size}px;height:${size}px;border-radius:${radius}px;
|
|
background:${background};
|
|
display:grid;place-items:center;
|
|
box-shadow:inset 0 1px 0 rgba(255,255,255,.18)}
|
|
</style></head><body><div class="icon">${SNOWFLAKE(size, stroke, inset)}</div></body></html>`;
|
|
}
|
|
|
|
const targets = [
|
|
// Standard PWA icons: rounded square, iOS-like gradient-free accent
|
|
{ file: "icon-192.png", size: 192, radius: 42, inset: 15, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 3.4 },
|
|
{ file: "icon-512.png", size: 512, radius: 112, inset: 15, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 3.4 },
|
|
// Maskable: keep the glyph inside the safe zone (80% circle)
|
|
{ file: "maskable-512.png", size: 512, radius: 0, inset: 22, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 3.6 },
|
|
// iOS home screen icon: square, the OS applies its own mask
|
|
{ file: "apple-touch-icon.png", size: 180, radius: 0, inset: 15, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 3.4 },
|
|
{ file: "apple-touch-icon-152.png", size: 152, radius: 0, inset: 15, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 3.4 },
|
|
{ file: "apple-touch-icon-167.png", size: 167, radius: 0, inset: 15, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 3.4 },
|
|
{ file: "favicon-32.png", size: 32, radius: 7, inset: 13, background: "linear-gradient(180deg,#5c88a8,#476e8c)", stroke: 4 },
|
|
];
|
|
|
|
const browser = await chromium.launch({ executablePath: CHROME, args: ["--no-sandbox"] });
|
|
for (const target of targets) {
|
|
const page = await browser.newPage({ viewport: { width: target.size, height: target.size }, deviceScaleFactor: 1 });
|
|
await page.setContent(pageHtml(target), { waitUntil: "load" });
|
|
await page.screenshot({ path: `${OUT}${target.file}`, omitBackground: true });
|
|
await page.close();
|
|
console.log(` ✓ ${target.file}`);
|
|
}
|
|
|
|
/* iOS splash screens are optional; a plain background keeps them tiny. */
|
|
const splash = `<!doctype html><html><head><meta charset="utf-8"><style>
|
|
html,body{margin:0;height:100%;background:linear-gradient(180deg,#fbfcfd,#f1f5f9);
|
|
display:grid;place-items:center;font-family:-apple-system,system-ui,sans-serif}
|
|
.mark{display:grid;gap:14px;justify-items:center}
|
|
.badge{width:96px;height:96px;border-radius:24px;background:linear-gradient(180deg,#5c88a8,#476e8c);display:grid;place-items:center}
|
|
.name{font-size:22px;font-weight:600;color:#26323b;letter-spacing:-.01em}
|
|
</style></head><body><div class="mark"><div class="badge">${SNOWFLAKE(96, 3.4, 18)}</div><div class="name">Freezmo</div></div></body></html>`;
|
|
|
|
const splashTargets = [
|
|
[1170, 2532], [1284, 2778], [1179, 2556], [1290, 2796], [750, 1334], [828, 1792], [1536, 2048], [1668, 2388],
|
|
];
|
|
for (const [width, height] of splashTargets) {
|
|
const page = await browser.newPage({ viewport: { width, height }, deviceScaleFactor: 1 });
|
|
await page.setContent(splash, { waitUntil: "load" });
|
|
await page.screenshot({ path: `${OUT}splash-${width}x${height}.png` });
|
|
await page.close();
|
|
console.log(` ✓ splash-${width}x${height}.png`);
|
|
}
|
|
|
|
await browser.close();
|
|
if (!existsSync(`${OUT}icon-512.png`)) process.exit(1);
|
|
console.log("icons written to public/icons/");
|