# Novelle Workshop V3 - Komplet Plan ## 0. Formål og Faglige Overvejelser ### 0.1 Formål Novelle Workshop er en digital læringsplatform designet til at støtte og udvikle mellemtrinelevernes (4.-6. klasse) skriftlige kompetencer gennem kreativ novelleskrivning. Applikationen har til formål at: - **Styrke Skriveglæde**: - Skabe et trygt og magisk rum hvor elever tør eksperimentere med skrivning - Fjerne præstationsangst gennem fleksibel AI-støtte - Gøre skriveprocessen legende og engagerende - **Udvikle Skrivekompetencer**: - Guide eleverne gennem novellegenrens grundelementer - Træne struktureret tekstproduktion - Styrke elevernes genrebevidsthed - Udvikle ordforråd og sproglig variation - **Fremme Selvstændighed**: - Lade eleverne styre graden af AI-assistance - Støtte differentieret læring - Opbygge selvtillid gennem succesoplevelser ### 0.2 Målgruppe - **Primær**: Mellemtrinselever (10-13 år) - Forskellige faglige niveauer - Varierende skriveerfaring - Forskellige modersmål - **Sekundær**: Dansklærere - Værktøj til undervisningsdifferentiering - Støtte til elever med skriveudfordringer - Platform for kreativ tekstproduktion ### 0.3 Faglige og Didaktiske Overvejelser #### Stilladsering - **Gradvis Kompetenceopbygning**: - Fra idé til færdig tekst gennem strukturerede faser - Eksplicit fokus på novellegenrens elementer - Mulighed for at vende tilbage og revidere - **Differentieret Støtte**: - AI-assistance tilpasset den enkelte elevs behov - Forskellige grader af stilladsering i hver fase - Mulighed for at arbejde selvstændigt eller med støtte #### Motivation og Engagement - **Gamification**: - Point-system baseret på elevens indsats - Visuelle belønninger og progression - Magisk tema der appellerer til målgruppen - **Succesoplevelser**: - Opnåelige delmål i hver fase - Positiv feedback og opmuntring - Synlig progression gennem processen #### Pædagogiske Principper - **Ingen Mindstekrav**: Der er bevidst ingen mindstekrav til længden af tekst eller antal af karakterer. Dette er for at undgå at begrænse elevernes kreativitet og give dem frihed til at udtrykke sig på deres egen måde. - **Progression i Eget Tempo**: Eleverne kan bevæge sig gennem faserne i deres eget tempo og vende tilbage til tidligere faser efter behov. - **Støttende Feedback**: AI-assistenten giver konstruktiv feedback og forslag, men tvinger aldrig eleven til at følge en bestemt retning. - **Procesorienteret Skrivning**: - Fokus på skriveprocessens forskellige faser - Mulighed for revision og forbedring - Refleksion over egne valg - **Formativ Evaluering**: - Løbende feedback på elevens arbejde - Konstruktive forbedringsforslag - Fokus på udvikling frem for bedømmelse #### Didaktiske Valg - **Fase-Inddeling**: - Opdeling matcher kendt skrivedidaktik - Tydelig progression gennem faserne - Mulighed for at arbejde i eget tempo - **Sproglig Udvikling**: - Integration af fagbegreber med forklaringer - Fokus på varieret sprog og ordforråd - Støtte til tekstbinding og struktur - **Genre-Bevidsthed**: - Eksplicit arbejde med novellegenrens træk - Tydelige eksempler og modeltekster - Støtte til genre-specifikt sprog ### 0.4 Læringsteoretisk Grundlag - **Konstruktivistisk Tilgang**: - Eleven som aktiv medskaber - Bygger på eksisterende viden - Læring gennem eksperimenter og opdagelse - **Zonen for Nærmeste Udvikling**: - AI-støtte tilpasset elevens niveau - Gradvis reduktion af stilladsering - Balance mellem udfordring og mestring - **Multimodal Læring**: - Integration af tekst, billeder og animation - Forskellige repræsentationsformer - Appeallerer til forskellige læringsstile ## 1. Pædagogisk Vision og Principper ### 1.1 Grundlæggende Principper - **Elevcentreret Læring**: - Eleven bestemmer selv graden af støtte - Ingen tvungne felter eller krav - Progression i eget tempo - Tryg ramme for kreativ udfoldelse ### 1.2 AI-Støttet Progression - **Intelligent Kontekst-Genkendelse**: - Hvis genre mangler → AI læser fra titel/idé - Hvis idé mangler → AI læser fra titel/genre - Hvis titel mangler → AI bruger valgt/tilfældig genre - Hvis alt er tomt → AI starter fra tilfældig genre - **Hierarkisk Data-Anvendelse**: 1. Brug elevens input hvis det findes 2. Udled information fra eksisterende data 3. Generer kreativt indhold hvis ingen data findes ### 1.3 Støtteniveauer - Fuld selvstændig skrivning - Delvis AI-assistance - Fuld AI-generering - Mulighed for at mixe niveauer ## 2. Design og Brugeroplevelse ### 2.1 Visuelt Tema - **Magisk Skoletema**: - Venlig troldmand/troldkvinde som guide - Farverigt og indbydende design - Runde former og bløde skygger - Stor, læsevenlig skrift - God kontrast ### 2.2 Brugergrænsefladekomponenter - **Hovedcontainer**: Fleksibel to-kolonne layout - Venstre side: Info-panel (fast bredde) - Højre side: Arbejdsområde (responsivt) ### 2.3 Info-Panel - Fast position i venstre side - Indeholder: - Magisk guide-figur (animeret) - Navigationsmenu til alle faser - Beskedområde for feedback - "Gem" knap (psykologisk tryghed) - "Start forfra" knap med bekræftelsesdialog - Automatisk gem hver 30. sekund ## 3. Magiske Elementer og Interaktion ### 3.1 Fase-Specifikke Temaer - **Idéudvikling**: Magisk krystalkugle der viser idéer - **Karaktergalleri**: Tryllebog med levende portrætter - **Miljøbeskrivelse**: Magisk kort der kommer til live - **Skriveværksted**: Fortryllet pergament med magisk pen - **Gennemgang**: Magisk spejl der viser den færdige historie ### 3.2 Animationer og Effekter - **Loading Animationer**: - Idéfase: Krystalkugle med svævende idéer - Karakterfase: Magisk bog der bladrer - Miljøfase: Magisk kort der folder sig ud - Skrivefase: Magisk pen der skriver - Gennemgangsfase: Magisk spejl der glimter - **Interaktive Elementer**: - Svævende magiske objekter - Glødende knapper med partikeleffekter - Progressbar med stjerner og glimt - Feedback vises med magiske bobler ### 3.3 Tekst-Transitions - Glimmer-effekt ved AI-genereret tekst - Fade-in/out med magiske partikler - Smooth scroll til nye elementer ## 4. Fase-Specifik Funktionalitet ### 4.1 Idéudvikling - Genre-valg med dropdown - Titel-input med magisk generering - Idé-tekstfelt (max 80 ord) med ordtæller - To magiske knapper: - "Giv forslag" (genererer 3 nye idéer) - "Udvid" (bygger på eksisterende) ### 4.2 Karaktergalleri - Automatisk analyse af idé for hovedperson - Karakterinput: - Navnefelt - Beskrivelse (max 30 ord) - Karakterbegrænsninger: - Max 4 karakterer total - Max 2 hovedpersoner - Karakterliste med: - AI-genereret portræt (automatisk ved gem) - Hovedperson/biperson-toggle (med crown-ikon) - Redigeringsmulighed - Sletteknap - Tre-forslags-system: - Navn og beskrivelse for hver - One-click implementering - Automatisk billedgenerering ### 4.3 Miljøbeskrivelse - Tekstfelt (max 50 ord) - Intelligent kontekst fra tidligere faser - To magiske knapper: - "Giv forslag" (nye miljøer) - "Udvid" (uddyber eksisterende) - Automatisk keyword-udtrækning ### 4.4 Skriveværksted - Stort tekstfelt med ordtæller - Bruger al tidligere data - To magiske knapper: - "Giv forslag" (nye dele) - "Udvid" (fortsætter historien) - Real-time ordtælling ### 4.5 Gennemgang - Visning af færdig historie - Mulighed for at generere illustration - Download-muligheder - Feedback og forbedringsforslag ## 5. Feedback og Brugerinteraktion ### 5.1 Beskedsystem - Fast placering i info-panel - Viser kun seneste besked - Farvekodning: - Succes: Grøn med ✨ - Info: Blå med 🪄 - Advarsel: Gul med ⚠️ - Fejl: Rød med 💫 ### 5.2 Ordtæller - Real-time opdatering - Farveskift: - Normal: Blå - 80%: Gul - 100%: Rød med lille "shake" animation ### 5.3 Loading Feedback - "Tænker, vent 5-20 sekunder" besked - Fase-specifik animation - Tydelig visuel indikation ## 6. Teknisk Implementation ### 6.1 Data-Håndtering - Automatisk gem hver 30. sekund - Karakterbilleder gemmes i 24 timer på server - En aktiv historie ad gangen ### 6.2 API Integration - Base URL: https://story-generator-507410248879.europe-west1.run.app - Endpoints som specificeret i README_V2 - Fejlhåndtering med brugervenlige beskeder ### 6.3 Performance og Sikkerhed - Lazy loading af billeder - Optimerede API-kald - Smooth transitions og animationer - Ingen pop-ups - Bekræftelsesdialoger integreret i design - Sikker datahåndtering ### 6.4 Responsivt Design - Tilpasser sig forskellige skærmstørrelser - Touch-venligt interface - Store klikområder - Tydelig visuel feedback ## 7. Intelligent Dataflow og Integration ### 7.1 Intelligent Karakter-Flow - **Automatisk Karakter-Analyse**: - Bruger `/api/story/extract-character` endpoint ved start - Analyserer automatisk idéen for hovedperson - Hvis hovedperson findes → Auto-udfyld navn og beskrivelse - Hvis ingen hovedperson → Vis 3 karakterforslag - **Karakter-Forslag System**: - Hvert forslag indeholder: - Unikt navn med placeholder - Beskrivelse (max 30 ord) med placeholder - Knap til at vælge forslaget - Bruger `/api/story/generate-characters` endpoint - One-click implementation af valgt forslag - Automatisk portræt-generering ved valg ### 7.2 Kontekst-Baseret Miljøbeskrivelse - **Data-Integration**: - Bruger analyse fra idé-fasen - Inkluderer valgte karakterer - Anvender `/api/story/generate/environment` endpoint - Automatisk keyword-udtrækning - Intelligent sammenkædning af elementer ### 7.3 Progressive Data-Anvendelse - **Historieskrivning**: - Bruger al tidligere data: - Idé og genre - Karakterer og deres relationer - Miljøbeskrivelse og stemning - Intelligent sammenkædning via API - Automatisk billedgenerering baseret på kontekst - Adaptiv tekstgenerering ### 7.4 Magiske Knapper System - **To Typer pr. Sektion**: - "Giv forslag" knap: - Genererer nyt indhold - Bruger relevante generate endpoints - Kontekstbaserede forslag - "Udvid" knap: - Bygger på eksisterende indhold - Bruger expand/continue endpoints - Bevarer original kontekst ### 7.5 API Orchestrering - **Endpoint Koordinering**: - Intelligent valg af endpoints baseret på kontekst - Kædet datahåndtering mellem faser - Fejlhåndtering med fallback-muligheder - **Data Flow**: - Idé → Karakter → Miljø → Historie - Hver fase beriger den samlede kontekst - Automatisk databerigelse ved manglende input - Intelligent genbrug af eksisterende data ## 8. Backend og Deployment ### 8.1 Backend Arkitektur - **Stabilitet er Kritisk**: - Fuldt funktionelt og stabilt produktionssystem - Undgå unødige ændringer i server-setup - Bevar eksisterende arkitektur - Fokuser ændringer på frontend - **Backend Komponenter**: 1. Cloud Functions: - Håndterer alle API endpoints - Integrerer med AI-modeller - Fejl og logging 2. Database: - Sikker brugerdata - Sessionshåndtering - API-forbrugs tracking 3. Security: - JWT authentication - Rate limiting - CORS beskyttelse 4. AI Integration: - Optimeret prompt engineering - Kontekst håndtering - Fejlhåndtering ### 8.2 Deployment - **Deploy Script** (`scripts/deploy.sh`): 1. ESLint validering 2. Docker container build 3. Upload til Google Cloud 4. Cloud Run deployment - **Miljøvariabler**: - `OPENAI_API_KEY`: AI-integration - `PORT`: Server port (8080) - `NODE_ENV`: development/production - `JWT_SECRET`: Sikkerhed ### 8.3 State Variabler - `genre`: historietypen (eventyr, novelle, fabel) - `platform`: 'edu' - `phase`: 'middle' - `targetAge`: 10-14 år ### 8.4 Vedligeholdelse - API-kald monitorering - 24-timers backup cyklus - Automatisk Cloud Run skalering - Kritisk operations-logging ### 8.5 Ekstra API Endpoints - **Dialog og Forbedring**: - `/api/story/add-dialog`: Tilføj dialog til historien - `/api/story/improve`: Forbedre eksisterende tekst - `/api/story/check-spelling`: Stavekontrol - `/api/story/check-grammar`: Grammatikkontrol - `/api/story/expand-scene`: Udvid specifik scene - **Analyse**: - `/api/story/suggest-next`: Forslag til næste del - `/api/story/regenerate`: Generer alternativ version ## 9. Detaljerede Specifikationer ### 9.1 Billede-Generering - **DALL-E Integration**: - Implementeret via GPT-4 - Billedstørrelse: 4x normal pasfoto-størrelse - Konsistent art style gennem alle genererede billeder - Prompt engineering sikrer børnevenlige billeder - Ingen regenerering af billeder ### 9.2 Gem-Funktionalitet - **Auto-Save**: - "Gemmer..." indikator med magisk tema - "Sidst gemt" timestamp i børnevenligt format - 30-sekunders interval - Visuel feedback i info-panel ### 9.3 Ordgrænser og Beregning - **Grænser**: - Blød grænse ved max ord - Kun ordtælling (ikke tegn) - Dynamisk historielængde (1500-3000 ord) - **Point-System**: - Formel for "optjente ord": * Idéfase tekst × 5 * Karakterbeskrivelser × 4 * Miljøbeskrivelse × 3 - Vises i infoboks: "Optjente point ud af x-mulige" - Visuel progression: * Gradvist voksende drage * Specielle effekter ved 25%, 50%, 75%, 100% milepæle * Stjerner og glimmer ved hver milepæl - Magisk animation ved point-optjening ### 9.4 Info-Boks og Faglighed - **Fagindhold**: - Foruddefinerede fagord for hver fase - Fagord markeret i teksten - Hover-effekt med alderstilpasset forklaring - Fast position under infoboks for forklaringer - Forklaringer gemt i database ### 9.5 Data-Håndtering - **Lokal Cache**: - Alt arbejde caches lokalt under aktiv session (browser session storage) - Billeder gemmes på Google Cloud (24 timer) - Færdige historier udvælges manuelt til showcase - Manuel gem-funktion for elever (indtil login implementeres) - Cache ryddes automatisk ved session udløb ### 9.6 Tilgængelighed og Begrænsninger - **Animationer**: - Ingen lydeffekter - Fase-specifikke visuelle temaer bevares - Smooth transitions og feedback - **Fejlhåndtering**: - Tydelig besked ved fejlet billedgenerering - Offline support med lokal caching - Synkronisering ved online-forbindelse ### 9.7 Brugergrænseflader - **Info-Panel**: - Faglig information om aktuel fase - Point-system visning med historik (seneste 5 optjeninger) - Gem-status og timestamp - Tydelige fejl- og statusbeskeder med fade-out effekt - Kontekstbaserede facts: * Opdateres ved faseskift eller hvert 2. minut * Genereres baseret på historiens indhold og kontekst * Inspirerende facts relateret til historiens emner - Genvejstaster for kritiske funktioner: * Navigation mellem faser * Gem-funktion * Tastatur-indikatorer vises kun ved hover - Gem-funktionalitet: * Export muligheder: PDF (med karakterbilleder), Word og Google Drive * Mappe-valg og auto-sync til Google Drive (hver 30. sekund) * Sync-status indikator i info-panel * Preview i info-panel før download/gem med fuld-skærm mulighed * Bekræftelsesbesked i info-boksen med fade-out (3-6 sek) ### 9.8 Progression og Navigation - **Visuel Tidslinje**: - Horisontal tidslinje i toppen - Simpel og intuitiv visning af faser - Tydelig markering af nuværende fase - Indikation af færdiggjorte faser - Cirkulær progress-indikator med magisk tema - Smooth animation ved progress opdatering ### 9.9 Export og Dokumentation - **Forfatterinformation**: - Input felt for elevens navn - Input felt for skolens navn - Automatisk årstal (kun år) - Vises på forside og i footer - Dropdown med de 3 senest brugte skoler - **PDF Format**: - Forside med titel, forfatter, skole og årstal - Karakterbilleder placeret ved siden af beskrivelser - Genre og målgruppe information - Professionelt layout med magisk tema - Print-indstillinger med farve som standard - Print preview før endelig udskrift - **Google Drive Integration**: - Magisk sync-animation (3-6 sekunders varighed) - Forskellige animationer for upload/download - Filnavn inkluderer oprettelsesdato - Real-time sync-status med magisk progress-bar - **Preview Funktionalitet**: - Fuld-skærm visning - Print-mulighed direkte fra preview - Zoom-funktioner - Fast scroll-position - **Hjælp og Support**: - "Lærer-hjælp" knap i hovedmenu - Modal-baseret hjælpevisning: * Fuld-skærm responsiv overlay (max-bredde: 1200px) * Breadcrumbs navigation i toppen med tydelige sektionsnavne * Pile til at navigere mellem sektioner med fade ved start/slut * Let navigation mellem sektioner med keyboard support * Lukkeknap med fade-effekt i både top og bund * ESC-tast support for lukning * Magiske partikler integreret med hovedtema * Let blur-effekt på baggrund - Quick-tips for hver fase: * Korte, præcise vejledninger i kortformat * Fast korthøjde for konsistent layout * Fase-specifikke anbefalinger * Praktiske eksempler - Visuelle guides og forklaringer: * Klare, enkle instruktioner * Fremhævede nøglefunktioner - Let tilgængelig fra alle skærme - Integreret i det magiske tema med svævende partikler ## 10. API Integration og Endpoints ### 10.1 Historie-Generering - **Grundlæggende Endpoints**: - `/api/story/generate` (POST): * Input: `{ genre, targetAge, platform, phase, storyline, protagonist, setting, theme }` * Output: `{ success: true, story: string }` * Bruger GPT-3.5-turbo model * Inkluderer genre, målgruppe og platform-tilpasning - `/api/story/regenerate` (POST): * Input: `{ genre, targetAge, platform, phase, storyline, previousStory }` * Output: `{ success: true, story: string }` * Bruger GPT-3.5-turbo model * Bevarer kerneelementerne men med ny vinkel - `/api/story/generate/ideas` (POST): * Input: `{ genre: string }` * Output: `{ success: true, ideas: string[] }` * Bruger GPT-3.5-turbo model * Målgruppespecifik tilpasning * Fokus på relevante temaer og konflikter - `/api/story/expand` (POST): * Input: `{ text: string, genre: string, instruction?: string, fromGenre?: string, toGenre?: string }` * Output: `{ success: true, expanded: string }` * Bruger GPT-3.5-turbo model * Understøtter genre-transformation * Max 80 ord output - `/api/story/generate-creative-title` (POST): * Input: `{ genre: string, analysis?: object }` * Output: `{ success: true, title: string }` * Bruger GPT-3.5-turbo model * Kontekstbevidst titeldannelse ### 10.2 Karakter-Håndtering - **Karakter Endpoints**: - `/api/story/analyze-character` (POST): * Input: `{ text?: string, genre?: string }` * Output: `{ success: true, characters: Array }` - `/api/story/generate-characters` (POST): * Input: `{ text?: string, genre?: string, type?: 'main'|'supporting' }` * Output: `{ success: true, characters: Array }` - `/api/story/extract-character` (POST): * Input: `{ idea?: string, genre?: string }` * Output: `{ success: true, characters: Array }` ### 10.3 Miljø og Setting - **Miljø Endpoints**: - `/api/story/generate/environment` (POST): * Input: `{ genre?: string, idea?: string, characters?: array, existingEnvironment?: string, maxWords?: number }` * Output: `{ success: true, environment: string, mood: string, keywords: string[] }` - `/api/story/analyze-environment` (POST): * Input: `{ environment?: string, genre?: string, idea?: string }` * Output: `{ success: true, feedback: string, isValid: boolean, suggestions: string[] }` - `/api/story/extract-keywords` (POST): * Input: `{ text?: string, maxKeywords?: number }` * Output: `{ success: true, keywords: string[], categories: object }` ### 10.4 Historie Udvikling - **Udviklings-Endpoints**: - `/api/story/continue` (POST): * Input: `{ genre?: string, currentStory: string, characters?: array, environment?: string }` * Output: `{ success: true, continuation: string, wordCount: number }` - `/api/story/suggest-next` (POST): * Input: `{ content: string, style: { detail: number, mood: number } }` * Output: `{ success: true, text: string }` - `/api/story/expand-scene` (POST): * Input: `{ scene: string, style: { detail: number, mood: number } }` * Output: `{ success: true, text: string }` ### 10.5 Dialog og Forbedring - **Dialog Endpoints**: - `/api/story/add-dialog` (POST): * Input: `{ content: string, position: number, style: { detail: number, mood: number } }` * Output: `{ success: true, text: string }` - `/api/story/improve` (POST): * Input: `{ text: string, style: { detail: number, mood: number } }` * Output: `{ success: true, text: string }` ### 10.6 Analyse og Validering - **Analyse Endpoints**: - `/api/story/analyze` (POST): * Input: `{ story: string, genre?: string }` * Output: `{ success: true, analysis: object, score: object }` - `/api/story/validate` (POST): * Input: `{ story: string, genre?: string, characters?: array, environment?: string }` * Output: `{ success: true, isValid: boolean, issues: string[], suggestions: string[] }` - `/api/story/suggest-improvements` (POST): * Input: `{ story: string, genre?: string, analysis?: object }` * Output: `{ success: true, improvements: Array, encouragement: string }` ### 10.7 Sprog og Grammatik - **Kvalitetssikring Endpoints**: - `/api/story/check-spelling` (POST): * Input: `{ text: string }` * Output: `{ success: true, errors: Array }` - `/api/story/check-grammar` (POST): * Input: `{ text: string }` * Output: `{ success: true, errors: Array }` ### 10.8 Genre og Analyse - **Genre Endpoints**: - `/api/story/suggest-genre` (POST): * Input: `{ title?: string, idea?: string }` * Output: `{ success: true, suggestions: Array }` - `/api/story/analyze-story` (POST): * Input: `{ text: string }` * Output: `{ success: true, analysis: StoryAnalysis }` ### 10.9 Export og Billeder - **Export Endpoints**: - `/api/story/generate-image` (POST): * Input: `{ title: string, story: string, environment: string }` * Output: `{ success: true, imagePrompt: string, style: string, focusElements: string[] }` * Bruger DALL-E via GPT-4 for optimal prompt engineering * Billedstørrelse: 4x normal pasfoto-størrelse * Konsistent art style gennem alle genererede billeder - `/api/story/export/pdf` (POST): * Input: `{ title: string, story: string, imageUrl?: string }` * Output: PDF fil - `/api/story/export/word` (POST): * Input: `{ title: string, story: string, imageUrl?: string }` * Output: DOCX fil