managarten/manadeck/apps/mobile/Docs/AI-Implementation-Plan.md

super danke lass uns jezt die ai features planen. es sollen diese dinge möglich werden, mit der open ai api: neue karten erstellen mit

1. spracheingabe (STT) 2. testeingabe 3. bildupload - ausserdem sollen die karten per STT vorgelesen werden können. schreibe dazu einen plan für die implementierung

⏺ Update Todos ⎿ ☐ AI Features Planning: Spracherkennung
(STT) für Kartenerstellung ☐ AI Features Planning: Texteingabe mit OpenAI für Kartenerstellung ☐ AI Features Planning: Bildupload mit Vision API für Kartenerstellung ☐ AI Features Planning: Text-to-Speech (TTS) für Kartenvorlesung ☐ AI Features Planning: Technische Architektur und API Integration

⏺ 🤖 AI Features Implementation Plan - Manadeck

Übersicht der AI-Features

🎯 Ziel-Features:

1. Kartenerstellung via Spracheingabe (STT → OpenAI → Karteninhalt)
2. Kartenerstellung via Texteingabe (Text → OpenAI → strukturierte Karten)
3. Kartenerstellung via Bildupload (Bild → Vision API → Karteninhalt)
4. Kartenvorlesung via TTS (Kartentext → Speech → Audio)

---

📋 Phase 7: AI Integration Roadmap

Phase 7.1: Foundation & Setup (1 Woche)

7.1.1 Dependencies & Environment Setup

// Neue Dependencies "@react-native-async-storage/async-storage": "^1.21.0", "expo-speech": "~12.1.0", // TTS "expo-av": "~14.0.0", // Audio recording/playback "react-native-audio-recorder-player": "^3.6.6", // Advanced audio "openai": "^4.24.0", // OpenAI API "expo-image-picker": "~15.0.0", // Bildauswahl "expo-file-system": "~17.0.0" // Dateisystem

7.1.2 Environment Variables

EXPO_PUBLIC_OPENAI_API_KEY=sk-... EXPO_PUBLIC_OPENAI_MODEL=gpt-4o EXPO_PUBLIC_OPENAI_VISION_MODEL=gpt-4o-vision- preview

7.1.3 API Service Layer

// utils/openaiService.ts export class OpenAIService { static async generateCardsFromText(prompt: string): Promise<CardContent[]> static async generateCardsFromSpeech(audioData: string): Promise<CardContent[]> static async generateCardsFromImage(imageBase64: string): Promise<CardContent[]> static async enhanceCardContent(content: string): Promise }

---

Phase 7.2: Speech-to-Text Integration (1-2 Wochen)

7.2.1 Audio Recording Component

// components/ai/AudioRecorder.tsx interface AudioRecorderProps { onRecordingComplete: (audioUri: string) => void; onTranscriptionComplete: (text: string) => void; }

export const AudioRecorder: React.FC = ({ onRecordingComplete, onTranscriptionComplete }) => { // Aufnahme-Button mit Wellenform-Visualisierung // Live-Transkription während Aufnahme // Aufnahme-Controls (Pause, Stopp, Wiedergabe) }

7.2.2 Speech-to-Text Service

// utils/speechService.ts export class SpeechService { static async transcribeAudio(audioUri: string): Promise<{ text: string; confidence: number; language: string; }>

static async transcribeRealtime(audioStream:

any): Promise }

7.2.3 Integration in Card Creation

• Neuer "Voice Input" Modus in Card Creation Screen
• Real-time Transkription mit Korrekturmöglichkeit
• Automatische Strukturierung durch OpenAI

---

Phase 7.3: Text-to-Cards AI Processing (1 Woche)

7.3.1 AI Card Generator Service

// utils/cardGenerator.ts export class CardGenerator { static async generateFromText(input: string, options: { cardTypes: ('flashcard' | 'quiz' | 'text')[]; difficulty: 'easy' | 'medium' | 'hard'; count: number; language: 'de' | 'en'; }): Promise<GeneratedCard[]>

static async generateFromTopics(topics:

string[]): Promise<GeneratedCard[]> static async enhanceExistingCard(card: Card): Promise }

interface GeneratedCard { type: CardType; content: CardContent; metadata: { confidence: number; source: string; tags: string[]; }; }

7.3.2 Smart Card Creation UI

// components/ai/SmartCardCreator.tsx export const SmartCardCreator: React.FC = () => { // Multi-Input Interface: // - Text Area für freie Eingabe // - Topic Tags für strukturierte Eingabe // - AI-Einstellungen (Schwierigkeit, Kartentypen) // - Vorschau der generierten Karten // - Bulk-Edit Funktionen }

---

Phase 7.4: Vision API Integration (1-2 Wochen)

7.4.1 Image Processing Service

// utils/visionService.ts export class VisionService { static async analyzeImage(imageUri: string): Promise<{ text: string; // OCR-Text objects: string[]; // Erkannte Objekte concepts: string[]; // Konzepte/Themen language: string; // Erkannte Sprache }>

static async generateCardsFromImage(
  imageUri: string,
  context?: string
): Promise<GeneratedCard[]>

}

7.4.2 Image Upload Component

// components/ai/ImageCardCreator.tsx export const ImageCardCreator: React.FC = () => { // Kamera/Galerie Integration // Image Preview mit Crop-Funktionalität // OCR-Text-Extraktion mit Editing // Context-Input für bessere AI-Generation // Generated Cards Preview }

7.4.3 Use Cases

• Lehrbücher fotografieren → Automatische Flashcard-Generierung
• Whiteboards/Notizen → Strukturierte Karten
• Diagramme/Grafiken → Erklärende Text-Karten
• Handschrift-Erkennung → Digitale Karten

---

Phase 7.5: Text-to-Speech Integration (1 Woche)

7.5.1 TTS Service

// utils/ttsService.ts export class TTSService { static async speakText(text: string, options: { language: string; rate: number; pitch: number; voice?: string; }): Promise

static async generateAudioFile(text:

string): Promise // Return audio URI static getAvailableVoices(): Promise<Voice[]> }

7.5.2 Audio Playback in Cards

// components/study/AudioCard.tsx export const AudioCard: React.FC<{ card: Card }> = ({ card }) => { // Play/Pause Button für Karteninhalt // Geschwindigkeitsregelung // Auto-Play Optionen // Audio-Caching für Offline-Nutzung }

7.5.3 Study Session Audio Features

• Automatische Vorlesung während Study Sessions
• Hände-frei Lernen für Unterwegs
• Aussprache-Training für Fremdsprachen
• Audio-Speed-Control für verschiedene Lerngeschwindigkeiten

---

Phase 7.6: AI-Enhanced Study Experience (1-2 Wochen)

7.6.1 Smart Study Recommendations

// store/aiStore.ts export const useAIStore = create((set, get) => ({ recommendations: [],

generateStudyPlan: async (userId: string) =>

{ // AI-basierte Lernplan-Generierung // Berücksichtigt Fortschritt, Schwächen, Präferenzen },

suggestCardImprovements: async (cardId:

string) => { // Vorschläge zur Kartenverbesserung // Basierend auf Lernperformance },

generateRelatedCards: async (card: Card) =>

{ // Ähnliche/verwandte Karten vorschlagen } }));

7.6.2 Intelligent Content Enhancement

• Automatische Hinweise zu schwierigen Karten
• Kontext-Erweiterungen für besseres Verständnis
• Adaptive Schwierigkeit basierend auf Performance
• Personalisierte Erklärungen je nach Lernstil

---

🏗️ Technische Architektur

Backend Extensions

7.A.1 Neue Datenbank-Tabellen

-- AI-generierte Karten tracking CREATE TABLE ai_generated_cards ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), card_id UUID REFERENCES cards(id), generation_method TEXT, -- 'speech', 'text', 'image' source_data JSONB, -- Original input data confidence_score DECIMAL, created_at TIMESTAMP DEFAULT NOW() );

-- Audio-Dateien für TTS CREATE TABLE card_audio_files ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), card_id UUID REFERENCES cards(id), audio_url TEXT, language TEXT, voice_settings JSONB, created_at TIMESTAMP DEFAULT NOW() );

-- AI-Verbesserungsvorschläge CREATE TABLE ai_suggestions ( id UUID PRIMARY KEY DEFAULT gen_random_uuid(), card_id UUID REFERENCES cards(id), suggestion_type TEXT, suggestion_data JSONB, applied BOOLEAN DEFAULT FALSE, created_at TIMESTAMP DEFAULT NOW() );

7.A.2 Supabase Functions

-- Edge Function für OpenAI Integration CREATE OR REPLACE FUNCTION generate_cards_from_content( content TEXT, generation_type TEXT, user_id UUID ) RETURNS JSON;

-- Edge Function für Audio-Processing CREATE OR REPLACE FUNCTION process_audio_upload( audio_data BYTEA, user_id UUID ) RETURNS JSON;

Security & Performance

7.B.1 API Rate Limiting

// utils/rateLimiter.ts export class RateLimiter { static checkAPILimit(userId: string, endpoint: string): Promise static trackUsage(userId: string, endpoint: string, cost: number): Promise }

7.B.2 Caching Strategy

• Audio Files: Supabase Storage mit CDN
• AI Responses: Redis/Memory Cache
• Image Processing: Optimierte Komprimierung
• Offline Support: SQLite für generierte Inhalte

---

💰 Kostenoptimierung

7.C.1 Token/API Management

// utils/costOptimizer.ts export class CostOptimizer { static estimateTokens(text: string): number static compressPrompt(prompt: string): string static batchRequests(requests: any[]): Promise<any[]> static cacheCommonResponses(key: string, response: any): void }

7.C.2 Smart Usage Strategies

• Prompt Engineering für effiziente Token-Nutzung
• Batch Processing für multiple Karten
• Caching häufiger Anfragen
• Fallback Models für einfache Aufgaben
• User Limits für API-Kosten-Kontrolle

---

🎮 User Experience Features

7.D.1 AI Assistant Interface

// components/ai/AIAssistant.tsx export const AIAssistant: React.FC = () => { // Chat-Interface für AI-Interaktion // Voice Commands // Smart Suggestions Overlay // Progress-aware Recommendations }

7.D.2 Personalization Engine

• Lernstil-Erkennung basierend auf Nutzungsmustern
• Adaptive Kartenformate je nach Präferenz
• Personalisierte Schwierigkeit für AI-generierte Inhalte
• Custom Prompts für wiederkehrende Kartenerstellung

---

📈 Success Metrics & Analytics

KPIs für AI Features:

• Card Generation Success Rate (Qualität der generierten Karten)
• User Adoption Rate (% der Nutzer die AI-Features verwenden)
• Time Savings (Vergleich manuelle vs. AI-Kartenerstellung)
• Learning Effectiveness (Performance bei AI vs. manuellen Karten)
• API Cost per User (Kostenoptimierung)

---

🚀 Implementation Timeline

| Phase | Duration | Key Deliverables

---------
7.1	1 Woche	Setup, Dependencies, API
Services
7.2	2 Wochen	Speech-to-Text
Integration
7.3	1 Woche	Text-to-Cards AI
Processing
7.4	2 Wochen	Vision API Integration
7.5	1 Woche	Text-to-Speech
Integration
7.6	2 Wochen	Enhanced Study Experience

Total: ~9 Wochen für vollständige AI-Integration