Asesor Psicopedagógico

Prompt

# ASESOR PSICOPEDAGÓGICO — Pure functional brief (no reference code) > Paste into LMArena (Direct Chat recommended) or any frontier model. > App UI language: Spanish (es). --- ## 1. ROLE You are a senior front-end engineer and learning-science designer. Build a single-file web application in Spanish for teachers: the **Asesor Psicopedagógico** — an orientative psychopedagogical triage and teaching-creation instrument. It helps educators detect AI-related cognitive dependence in students, design metacognitive friction ("desirable difficulties"), and produce psychoeducational materials grounded in a verified scientific corpus. ## 2. OUTPUT CONTRACT - ONE self-contained `.html` file. No build step, no bundler, no external JS libraries. Must open and run directly from `file://`. - COMPLETE output ending with `</html>`. Never truncate. Write compact code (terse, minimal comments) — completeness outranks commentary. - Output ONLY the HTML document. No explanations, no markdown fences. - Spanish UI, academic tone. No emojis in the interface; use inline SVG icons. ## 3. DESIGN FREEDOM — ABSOLUTE You have **total, unconditional creative freedom** over visual identity, palette, typography, layout, navigation pattern, motion, and UX. There is no reference design — do not imitate any existing version of this app. - Invent a distinctive, professional, memorable identity worthy of a psychopedagogical instrument. Aim for "crafted tool for educators", never generic SaaS. - Avoid AI-slop aesthetics: default purple/blue gradients, glassmorphism clichés, interchangeable card grids. - Usability is the only hard interface constraint: keyboard-navigable with visible focus, 44px touch targets, responsive to 360px, light + dark theme toggle, `prefers-reduced-motion` respected. Beauty must never break function. ## 4. FUNCTIONALITY — PRESERVE EVERYTHING, OPTIMIZE TO THE MAXIMUM Reimplement ALL modules below. Nothing functional may be removed. You are encouraged to IMPROVE, extend, and optimize every feature — better flows, smarter defaults, new capabilities that serve the mission — as long as the listed behaviors exist and work. ### 4.1 Panel (dashboard) Landing view: app identity, API-key status indicator, live stats (cases in local history, friction-template count, corpus source count), navigation to all 11 other modules, recent-history list (open/delete entries), "view demo report without API key" action. ### 4.2 Triaje psicopedagógico (core module) Structured intake → AI-generated orientative report: - Inputs: subject/area selector, context fields (grade, group size, etc.), grouped checklist of observable cognitive-dependence signals, free-text case description, file attachments via drag & drop (images, documents; images sent to the model, text extracted from documents). - Action "Generate": calls the AI cascade (§6) with a grounding system prompt (§7) and renders a structured report in 4 blocks: (1) case reading, (2) cognitive-dependence analysis, (3) metacognitive-friction plan, (4) follow-up and classroom strategies. - Report actions: send the case into the Consultor as context, print (clean stylesheet), copy to clipboard, save to local history. - Works WITHOUT a key via a built-in demo report (fictional case) shown in a modal. ### 4.3 Consultor (AI chat, corpus-grounded) - Chat whose system prompt restricts it to the 12-source corpus (§7): it must cite Author (year), never invent references, and explicitly declare when a question goes beyond the corpus. - Suggestion chips with starter questions; message log; per-message source citations. - Spoken answers via TTS (two voices, user-selectable), plus a hands-free "talk mode" (voice input → voice answer loop). - Must degrade gracefully with a clear message when no API key is set. ### 4.4 Taller de producción didáctica Generates classroom materials via the AI cascade: the teacher picks material type (lesson guide, rubric, activity sequence, assessment, etc.), subject, and target audience; the AI produces structured, printable content. Print + copy. ### 4.5 Plantillas de fricción metacognitiva Gallery of 4 ready-to-use "desirable difficulty" templates (e.g., pre-digital draft, exam without AI then with AI, error analysis). Each: preview, copy, and one-click "use in Taller". ### 4.6 Infografías (builder + exporter) - Template gallery (several distinct layouts). - Fields: title, subtitle, bullet points (one per line, parsed into items), accent line, footer; template-specific accent color. - "AI fill" (cascade generates the content), "AI image" (image model; if the free quota returns 429, say so clearly — never fail silently). - Live SVG preview, fully self-drawn (no external assets). - Export SVG (download), export PNG (render the SVG to canvas at 2x; embed the app's fonts as @font-face inside the exported SVG string FIRST so canvas text never falls back to system fonts), copy SVG. ### 4.7 Pódcast (studio with real DSP) - Script editor: list of segments, each with selectable voice (two TTS voices) and text. - "Generate audio": synthesizes each segment via TTS, then processes the real audio buffers with this exact chain per segment — (a) trim leading/trailing silence below −45 dB, cutting only at zero-crossings; (b) RMS-normalize each segment to −20 dBFS; (c) 60 ms raised-cosine fades in/out; then (d) join segments with 150 ms equal-power crossfades; (e) final peak limit 0.89. - Playback of the mix, per-stage progress display, download of the final audio file (WAV). - Silence-only segments must not be destroyed by the trimmer (guard against trimming pure silence into nothing). ### 4.8 Video (short explainer generator) - Scene list editor (title + body + visual style per scene). - Canvas-rendered animated scenes in selectable visual styles (at least 3), with legible text layout and word wrapping. - Timeline: play/preview from any scene, stop; export the rendered video file. ### 4.9 Herramientas de estudio (4 tabs) From a user-provided topic/text, via the AI cascade: - **Mapa**: concept map with automatic node layout, rendered as SVG. - **Flashcards**: flip cards, deck navigation. - **Quiz**: multiple-choice self-test with per-option feedback and score. - **Guía**: structured study guide. All four work from the same input; tab switching preserves state. ### 4.10 Corpus Browsable list of the 12 verified sources (§7) with full citations and links. The user can add their own sources (title, authors, year, DOI/URL), persisted locally and included as extra context for the Consultor. ### 4.11 Manual In-app user manual covering every module. ### 4.12 Ajustes API key management (paste, save, TEST against the API, delete — the key lives ONLY in localStorage and is sent ONLY to Google's API), model cascade order (user-reorderable), theme, talk-mode defaults, and "erase all local data" with confirmation. ## 5. DATA COMPATIBILITY (the only code-level constraints) Existing users have data stored under these exact localStorage keys — keep the key names AND the record shapes, or their data is lost: - `apikey`: string (the Google AI Studio key). - `cascade`: array of model-id strings (fallback order). - `history`: array of `{date: ISO string, area: string, report: HTML string}`. - `mysources`: array of `{title, authors, year, url}` (user-added bibliography). - `talkMode`: boolean-ish; `theme`: "light" | "dark". Everything else about the implementation (element IDs, function names, architecture) is YOUR choice. ## 6. AI BACKEND CONTRACT - Provider: Google AI Studio (`generativelanguage.googleapis.com`), key supplied by the user in Ajustes. - Text cascade with automatic fallback on error/429, in user-configurable order; default: `gemini-3.8-flash` → `gemini-3.7-flash` → `gemini-3.6-flash` → `gemini-3.5-flash` → `gemini-3.5-flash-lite`. - TTS: `gemini-3.8-flash-lite-tts`, voices "Kore" and "Sulafat"; the API returns raw PCM — convert to a WAV blob (44.1 kHz, 16-bit, mono) for playback/download. - Image generation: the image-capable flash models; on 429/quota errors show a clear in-app message, never a silent failure. - A key-status indicator must be visible in the navigation on every view; every AI feature must offer a no-key path or a clear explanation. ## 7. THEORETICAL CORPUS (only allowed grounding) Every empirical/theoretical claim the app's AI makes must be supportable by these 12 verified sources — nothing else: 1. Chan (2024), "AI guilt" — arXiv:2407.10777 2. Chan (2024), "AI-giarism" — arXiv:2306.03358 3. Vendrell & Johnston (2026) — doi:10.1016/j.caeai.2026.100572 4. Tian & Zhang (2025) — doi:10.1016/j.actpsy.2025.105725 5. Darvishi et al. (2024) — doi:10.1016/j.compedu.2023.104967 6. Zhu et al. (2026) — doi:10.3389/fpsyg.2026.1878629 7. Kasneci et al. (2023) — doi:10.1016/j.lindif.2023.102274 8. Sparrow, Liu & Wegner (2011) — doi:10.1126/science.1207745 9. Risko & Gilbert (2016) — doi:10.1016/j.tics.2016.01.002 10. Bjork & Bjork (2011) — desirable difficulties 11. UNESCO (2023) — AI guidance for education 12. Gerada Pérez & Valdés Rodríguez (2026), UCLV working paper Rules: cite as Author (year); never invent references/DOIs/findings; when a claim exceeds the corpus, say so explicitly; do NOT use Chen & Alibakhshi (2025) or Shen et al. (2026). ## 8. TERMINOLOGY & ETHICS - It is "triaje psicopedagógico" — NEVER "triaje psicológico". - The app is orientative: the manual and every report must state it does not replace a professional clinical or psychopedagogical evaluation. ## 9. DELIVERY Return the COMPLETE single HTML file. Then stop. If you cannot complete it in one response, deliver the complete document anyway — a truncated file is a failed delivery. Prioritize: (1) all 12 modules reachable and functional, (2) the AI backend and exports working, (3) visual excellence.