9b5e8c6b35
Some checks failed
CI / go-lint (push) Has been skipped
CI / python-lint (push) Has been skipped
CI / nodejs-lint (push) Has been skipped
CI / test-go-school (push) Successful in 36s
CI / test-go-edu-search (push) Successful in 38s
CI / test-python-klausur (push) Failing after 2m39s
CI / test-python-agent-core (push) Successful in 33s
CI / test-nodejs-website (push) Successful in 24s
Step 1 is now document selection (full width). After selecting a file, Step 2 shows a side-by-side layout with document preview (3/5 width, scrollable, with fullscreen modal) and session naming (2/5 width, with start button). Also adds PDF preview via blob URL before upload. Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
2276 lines
111 KiB
TypeScript
2276 lines
111 KiB
TypeScript
'use client'
|
||
|
||
import React, { useState, useRef, useEffect } from 'react'
|
||
import { useTheme } from '@/lib/ThemeContext'
|
||
import { useLanguage } from '@/lib/LanguageContext'
|
||
import { useRouter } from 'next/navigation'
|
||
import { useActivity } from '@/lib/ActivityContext'
|
||
import { QRCodeUpload, UploadedFile } from '@/components/QRCodeUpload'
|
||
import { Sidebar } from '@/components/Sidebar'
|
||
|
||
// API Base URL - dynamisch basierend auf Browser-Host
|
||
// Verwendet /klausur-api/ Proxy um Zertifikat-Probleme zu vermeiden
|
||
const getApiBase = () => {
|
||
if (typeof window === 'undefined') return 'http://localhost:8086'
|
||
const { hostname, protocol } = window.location
|
||
if (hostname === 'localhost') return 'http://localhost:8086'
|
||
// Für macmini/lokales Netzwerk: Proxy-Pfad verwenden (gleiches Zertifikat wie Hauptseite)
|
||
return `${protocol}//${hostname}/klausur-api`
|
||
}
|
||
|
||
// LocalStorage Keys
|
||
const DOCUMENTS_KEY = 'bp_documents'
|
||
const OCR_PROMPTS_KEY = 'bp_ocr_prompts'
|
||
const SESSION_ID_KEY = 'bp_upload_session'
|
||
|
||
// Types
|
||
interface VocabularyEntry {
|
||
id: string
|
||
english: string
|
||
german: string
|
||
example_sentence?: string
|
||
example_sentence_gap?: string
|
||
word_type?: string
|
||
source_page?: number
|
||
selected?: boolean
|
||
extras?: Record<string, string>
|
||
}
|
||
|
||
// Dynamic column definition (per source page)
|
||
interface ExtraColumn {
|
||
key: string
|
||
label: string
|
||
}
|
||
|
||
interface Session {
|
||
id: string
|
||
name: string
|
||
status: string
|
||
vocabulary_count: number
|
||
image_path?: string
|
||
description?: string
|
||
source_language?: string
|
||
target_language?: string
|
||
created_at?: string
|
||
}
|
||
|
||
interface StoredDocument {
|
||
id: string
|
||
name: string
|
||
type: string
|
||
size: number
|
||
uploadedAt: Date
|
||
url?: string
|
||
}
|
||
|
||
interface OcrPrompts {
|
||
filterHeaders: boolean
|
||
filterFooters: boolean
|
||
filterPageNumbers: boolean
|
||
customFilter: string
|
||
headerPatterns: string[]
|
||
footerPatterns: string[]
|
||
}
|
||
|
||
type TabId = 'upload' | 'pages' | 'vocabulary' | 'worksheet' | 'export' | 'settings'
|
||
type WorksheetType = 'en_to_de' | 'de_to_en' | 'copy' | 'gap_fill'
|
||
type WorksheetFormat = 'standard' | 'nru'
|
||
|
||
// Worksheet format templates
|
||
const worksheetFormats: { id: WorksheetFormat; label: string; description: string; icon: string }[] = [
|
||
{
|
||
id: 'standard',
|
||
label: 'Standard-Format',
|
||
description: 'Klassisches Arbeitsblatt mit waehlbarer Uebersetzungsrichtung',
|
||
icon: 'document'
|
||
},
|
||
{
|
||
id: 'nru',
|
||
label: 'NRU-Vorlage',
|
||
description: '3-Spalten-Tabelle (EN|DE|Korrektur) + Lernsaetze mit Uebersetzungszeilen',
|
||
icon: 'template'
|
||
},
|
||
]
|
||
|
||
// Default OCR filtering prompts
|
||
const defaultOcrPrompts: OcrPrompts = {
|
||
filterHeaders: true,
|
||
filterFooters: true,
|
||
filterPageNumbers: true,
|
||
customFilter: '',
|
||
headerPatterns: ['Unit', 'Chapter', 'Lesson', 'Kapitel', 'Lektion'],
|
||
footerPatterns: ['zweihundert', 'dreihundert', 'vierhundert', 'Page', 'Seite']
|
||
}
|
||
|
||
export default function VocabWorksheetPage() {
|
||
const { isDark } = useTheme()
|
||
const { t } = useLanguage()
|
||
const router = useRouter()
|
||
const { startActivity, completeActivity } = useActivity()
|
||
const [mounted, setMounted] = useState(false)
|
||
|
||
// Tab state
|
||
const [activeTab, setActiveTab] = useState<TabId>('upload')
|
||
|
||
// Session state
|
||
const [session, setSession] = useState<Session | null>(null)
|
||
const [sessionName, setSessionName] = useState('')
|
||
const [isCreatingSession, setIsCreatingSession] = useState(false)
|
||
const [error, setError] = useState<string | null>(null)
|
||
const [extractionStatus, setExtractionStatus] = useState<string>('')
|
||
|
||
// Existing sessions list
|
||
const [existingSessions, setExistingSessions] = useState<Session[]>([])
|
||
const [isLoadingSessions, setIsLoadingSessions] = useState(true)
|
||
|
||
// Documents from storage
|
||
const [storedDocuments, setStoredDocuments] = useState<StoredDocument[]>([])
|
||
const [selectedDocumentId, setSelectedDocumentId] = useState<string | null>(null)
|
||
|
||
// Direct file upload
|
||
const [directFile, setDirectFile] = useState<File | null>(null)
|
||
const [directFilePreview, setDirectFilePreview] = useState<string | null>(null)
|
||
const [showFullPreview, setShowFullPreview] = useState(false)
|
||
const directFileInputRef = useRef<HTMLInputElement>(null)
|
||
|
||
// PDF page selection state
|
||
const [pdfPageCount, setPdfPageCount] = useState<number>(0)
|
||
const [selectedPages, setSelectedPages] = useState<number[]>([])
|
||
const [pagesThumbnails, setPagesThumbnails] = useState<string[]>([])
|
||
const [isLoadingThumbnails, setIsLoadingThumbnails] = useState(false)
|
||
const [excludedPages, setExcludedPages] = useState<number[]>([])
|
||
|
||
// Dynamic extra columns per source page (key: page number, value: extra columns)
|
||
const [pageExtraColumns, setPageExtraColumns] = useState<Record<number, ExtraColumn[]>>({})
|
||
|
||
// Upload state
|
||
const [uploadedImage, setUploadedImage] = useState<string | null>(null)
|
||
const [isExtracting, setIsExtracting] = useState(false)
|
||
const fileInputRef = useRef<HTMLInputElement>(null)
|
||
|
||
// Vocabulary state
|
||
const [vocabulary, setVocabulary] = useState<VocabularyEntry[]>([])
|
||
|
||
// Worksheet state
|
||
const [selectedTypes, setSelectedTypes] = useState<WorksheetType[]>(['en_to_de'])
|
||
const [worksheetTitle, setWorksheetTitle] = useState('')
|
||
const [includeSolutions, setIncludeSolutions] = useState(true)
|
||
const [lineHeight, setLineHeight] = useState('normal')
|
||
const [selectedFormat, setSelectedFormat] = useState<WorksheetFormat>('standard')
|
||
const [showIpa, setShowIpa] = useState(false)
|
||
const [showSyllables, setShowSyllables] = useState(false)
|
||
|
||
// Export state
|
||
const [worksheetId, setWorksheetId] = useState<string | null>(null)
|
||
const [isGenerating, setIsGenerating] = useState(false)
|
||
|
||
// Processing results
|
||
const [processingErrors, setProcessingErrors] = useState<string[]>([])
|
||
const [successfulPages, setSuccessfulPages] = useState<number[]>([])
|
||
const [failedPages, setFailedPages] = useState<number[]>([])
|
||
const [currentlyProcessingPage, setCurrentlyProcessingPage] = useState<number | null>(null)
|
||
const [processingQueue, setProcessingQueue] = useState<number[]>([])
|
||
|
||
// OCR Prompts/Settings
|
||
const [ocrPrompts, setOcrPrompts] = useState<OcrPrompts>(defaultOcrPrompts)
|
||
const [showSettings, setShowSettings] = useState(false)
|
||
|
||
// QR Code Upload
|
||
const [showQRModal, setShowQRModal] = useState(false)
|
||
const [uploadSessionId, setUploadSessionId] = useState('')
|
||
const [mobileUploadedFiles, setMobileUploadedFiles] = useState<UploadedFile[]>([])
|
||
const [selectedMobileFile, setSelectedMobileFile] = useState<UploadedFile | null>(null)
|
||
|
||
// OCR Comparison
|
||
const [showOcrComparison, setShowOcrComparison] = useState(false)
|
||
const [ocrComparePageIndex, setOcrComparePageIndex] = useState<number | null>(null)
|
||
const [ocrCompareResult, setOcrCompareResult] = useState<any>(null)
|
||
const [isComparingOcr, setIsComparingOcr] = useState(false)
|
||
const [ocrCompareError, setOcrCompareError] = useState<string | null>(null)
|
||
|
||
// SSR Safety
|
||
useEffect(() => {
|
||
setMounted(true)
|
||
|
||
// Initialize upload session ID for QR code
|
||
let storedSessionId = localStorage.getItem(SESSION_ID_KEY)
|
||
if (!storedSessionId) {
|
||
storedSessionId = `vocab-${Date.now()}-${Math.random().toString(36).substr(2, 9)}`
|
||
localStorage.setItem(SESSION_ID_KEY, storedSessionId)
|
||
}
|
||
setUploadSessionId(storedSessionId)
|
||
}, [])
|
||
|
||
// Load OCR prompts from localStorage
|
||
useEffect(() => {
|
||
if (!mounted) return
|
||
const stored = localStorage.getItem(OCR_PROMPTS_KEY)
|
||
if (stored) {
|
||
try {
|
||
setOcrPrompts({ ...defaultOcrPrompts, ...JSON.parse(stored) })
|
||
} catch (e) {
|
||
console.error('Failed to parse OCR prompts:', e)
|
||
}
|
||
}
|
||
}, [mounted])
|
||
|
||
// Save OCR prompts to localStorage
|
||
const saveOcrPrompts = (prompts: OcrPrompts) => {
|
||
setOcrPrompts(prompts)
|
||
localStorage.setItem(OCR_PROMPTS_KEY, JSON.stringify(prompts))
|
||
}
|
||
|
||
// Load documents from localStorage
|
||
useEffect(() => {
|
||
if (!mounted) return
|
||
const stored = localStorage.getItem(DOCUMENTS_KEY)
|
||
if (stored) {
|
||
try {
|
||
const docs = JSON.parse(stored)
|
||
const imagesDocs = docs.filter((d: StoredDocument) =>
|
||
d.type?.startsWith('image/') || d.type === 'application/pdf'
|
||
)
|
||
setStoredDocuments(imagesDocs)
|
||
} catch (e) {
|
||
console.error('Failed to parse stored documents:', e)
|
||
}
|
||
}
|
||
}, [mounted])
|
||
|
||
// Load existing sessions from API
|
||
useEffect(() => {
|
||
if (!mounted) return
|
||
const loadSessions = async () => {
|
||
const API_BASE = getApiBase()
|
||
try {
|
||
const res = await fetch(`${API_BASE}/api/v1/vocab/sessions`)
|
||
if (res.ok) {
|
||
const sessions = await res.json()
|
||
setExistingSessions(sessions)
|
||
}
|
||
} catch (e) {
|
||
console.error('Failed to load sessions:', e)
|
||
} finally {
|
||
setIsLoadingSessions(false)
|
||
}
|
||
}
|
||
loadSessions()
|
||
}, [mounted])
|
||
|
||
// Handle direct file selection
|
||
const handleDirectFileSelect = (e: React.ChangeEvent<HTMLInputElement>) => {
|
||
const file = e.target.files?.[0]
|
||
if (!file) return
|
||
|
||
setDirectFile(file)
|
||
setSelectedDocumentId(null)
|
||
setSelectedMobileFile(null)
|
||
|
||
if (file.type.startsWith('image/')) {
|
||
const reader = new FileReader()
|
||
reader.onload = (ev) => {
|
||
setDirectFilePreview(ev.target?.result as string)
|
||
}
|
||
reader.readAsDataURL(file)
|
||
} else if (file.type === 'application/pdf') {
|
||
setDirectFilePreview(URL.createObjectURL(file))
|
||
} else {
|
||
setDirectFilePreview(null)
|
||
}
|
||
}
|
||
|
||
// Create session and handle file upload
|
||
const startSession = async () => {
|
||
if (!sessionName.trim()) {
|
||
setError('Bitte geben Sie einen Namen fuer die Session ein.')
|
||
return
|
||
}
|
||
if (!selectedDocumentId && !directFile && !selectedMobileFile) {
|
||
setError('Bitte waehlen Sie ein Dokument aus oder laden Sie eine Datei hoch.')
|
||
return
|
||
}
|
||
|
||
setError(null)
|
||
setIsCreatingSession(true)
|
||
setExtractionStatus('Session wird erstellt...')
|
||
|
||
const API_BASE = getApiBase()
|
||
|
||
try {
|
||
const sessionRes = await fetch(`${API_BASE}/api/v1/vocab/sessions`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
name: sessionName,
|
||
ocr_prompts: ocrPrompts
|
||
}),
|
||
})
|
||
|
||
if (!sessionRes.ok) {
|
||
throw new Error('Session konnte nicht erstellt werden')
|
||
}
|
||
|
||
const sessionData = await sessionRes.json()
|
||
setSession(sessionData)
|
||
setWorksheetTitle(sessionName)
|
||
|
||
// Start activity tracking for time savings calculation
|
||
startActivity('vocab_extraction', { description: sessionName })
|
||
|
||
let file: File
|
||
let isPdf = false
|
||
|
||
if (directFile) {
|
||
file = directFile
|
||
isPdf = directFile.type === 'application/pdf'
|
||
} else if (selectedMobileFile) {
|
||
// Convert mobile uploaded file (base64 dataUrl) to File object
|
||
isPdf = selectedMobileFile.type === 'application/pdf'
|
||
const base64Data = selectedMobileFile.dataUrl.split(',')[1]
|
||
const byteCharacters = atob(base64Data)
|
||
const byteNumbers = new Array(byteCharacters.length)
|
||
for (let i = 0; i < byteCharacters.length; i++) {
|
||
byteNumbers[i] = byteCharacters.charCodeAt(i)
|
||
}
|
||
const byteArray = new Uint8Array(byteNumbers)
|
||
const blob = new Blob([byteArray], { type: selectedMobileFile.type })
|
||
file = new File([blob], selectedMobileFile.name, { type: selectedMobileFile.type })
|
||
} else {
|
||
const selectedDoc = storedDocuments.find(d => d.id === selectedDocumentId)
|
||
if (!selectedDoc || !selectedDoc.url) {
|
||
throw new Error('Das ausgewaehlte Dokument ist nicht verfuegbar.')
|
||
}
|
||
|
||
isPdf = selectedDoc.type === 'application/pdf'
|
||
|
||
const base64Data = selectedDoc.url.split(',')[1]
|
||
const byteCharacters = atob(base64Data)
|
||
const byteNumbers = new Array(byteCharacters.length)
|
||
for (let i = 0; i < byteCharacters.length; i++) {
|
||
byteNumbers[i] = byteCharacters.charCodeAt(i)
|
||
}
|
||
const byteArray = new Uint8Array(byteNumbers)
|
||
const blob = new Blob([byteArray], { type: selectedDoc.type })
|
||
file = new File([blob], selectedDoc.name, { type: selectedDoc.type })
|
||
}
|
||
|
||
if (isPdf) {
|
||
setExtractionStatus('PDF wird hochgeladen...')
|
||
|
||
const formData = new FormData()
|
||
formData.append('file', file)
|
||
|
||
const pdfInfoRes = await fetch(`${API_BASE}/api/v1/vocab/sessions/${sessionData.id}/upload-pdf-info`, {
|
||
method: 'POST',
|
||
body: formData,
|
||
})
|
||
|
||
if (!pdfInfoRes.ok) {
|
||
throw new Error('PDF konnte nicht verarbeitet werden')
|
||
}
|
||
|
||
const pdfInfo = await pdfInfoRes.json()
|
||
setPdfPageCount(pdfInfo.page_count)
|
||
setSelectedPages(Array.from({ length: pdfInfo.page_count }, (_, i) => i))
|
||
|
||
// Switch to pages tab immediately so user sees progress
|
||
setActiveTab('pages')
|
||
setExtractionStatus(`${pdfInfo.page_count} Seiten erkannt. Vorschau wird geladen...`)
|
||
setIsLoadingThumbnails(true)
|
||
|
||
// Load thumbnails progressively
|
||
const thumbnails: string[] = []
|
||
for (let i = 0; i < pdfInfo.page_count; i++) {
|
||
try {
|
||
const thumbRes = await fetch(`${API_BASE}/api/v1/vocab/sessions/${sessionData.id}/pdf-thumbnail/${i}?hires=true`)
|
||
if (thumbRes.ok) {
|
||
const blob = await thumbRes.blob()
|
||
thumbnails.push(URL.createObjectURL(blob))
|
||
}
|
||
} catch (e) {
|
||
console.error(`Failed to load thumbnail for page ${i}`)
|
||
}
|
||
}
|
||
|
||
setPagesThumbnails(thumbnails)
|
||
setIsLoadingThumbnails(false)
|
||
setExtractionStatus(`${pdfInfo.page_count} Seiten bereit. Waehlen Sie die zu verarbeitenden Seiten.`)
|
||
|
||
} else {
|
||
setExtractionStatus('KI analysiert das Bild... (kann 30-60 Sekunden dauern)')
|
||
|
||
const formData = new FormData()
|
||
formData.append('file', file)
|
||
|
||
const uploadRes = await fetch(`${API_BASE}/api/v1/vocab/sessions/${sessionData.id}/upload`, {
|
||
method: 'POST',
|
||
body: formData,
|
||
})
|
||
|
||
if (!uploadRes.ok) {
|
||
throw new Error('Bild konnte nicht verarbeitet werden')
|
||
}
|
||
|
||
const uploadData = await uploadRes.json()
|
||
setSession(prev => prev ? { ...prev, status: 'extracted', vocabulary_count: uploadData.vocabulary_count } : null)
|
||
|
||
const vocabRes = await fetch(`${API_BASE}/api/v1/vocab/sessions/${sessionData.id}/vocabulary`)
|
||
if (vocabRes.ok) {
|
||
const vocabData = await vocabRes.json()
|
||
setVocabulary(vocabData.vocabulary || [])
|
||
setExtractionStatus(`${vocabData.vocabulary?.length || 0} Vokabeln gefunden!`)
|
||
}
|
||
|
||
await new Promise(r => setTimeout(r, 1000))
|
||
setActiveTab('vocabulary')
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('Session start failed:', error)
|
||
setError(error instanceof Error ? error.message : 'Ein Fehler ist aufgetreten')
|
||
setExtractionStatus('')
|
||
setSession(null)
|
||
} finally {
|
||
setIsCreatingSession(false)
|
||
}
|
||
}
|
||
|
||
// Process a single page
|
||
const processSinglePage = async (pageIndex: number): Promise<{ success: boolean; vocabulary: VocabularyEntry[]; error?: string }> => {
|
||
const API_BASE = getApiBase()
|
||
|
||
try {
|
||
const ipaParam = showIpa ? 'auto' : 'none'
|
||
const syllableParam = showSyllables ? 'auto' : 'none'
|
||
const res = await fetch(`${API_BASE}/api/v1/vocab/sessions/${session!.id}/process-single-page/${pageIndex}?ipa_mode=${ipaParam}&syllable_mode=${syllableParam}`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ ocr_prompts: ocrPrompts }),
|
||
})
|
||
|
||
if (!res.ok) {
|
||
const errBody = await res.json().catch(() => ({}))
|
||
const detail = errBody.detail || `HTTP ${res.status}`
|
||
return { success: false, vocabulary: [], error: `Seite ${pageIndex + 1}: ${detail}` }
|
||
}
|
||
|
||
const data = await res.json()
|
||
|
||
if (!data.success) {
|
||
return { success: false, vocabulary: [], error: data.error || `Seite ${pageIndex + 1}: Unbekannter Fehler` }
|
||
}
|
||
|
||
return { success: true, vocabulary: data.vocabulary || [] }
|
||
} catch (e) {
|
||
return { success: false, vocabulary: [], error: `Seite ${pageIndex + 1}: ${e instanceof Error ? e.message : 'Netzwerkfehler'}` }
|
||
}
|
||
}
|
||
|
||
// Process selected PDF pages
|
||
const processSelectedPages = async () => {
|
||
if (!session || selectedPages.length === 0) return
|
||
|
||
const pagesToProcess = [...selectedPages].sort((a, b) => a - b)
|
||
|
||
setIsExtracting(true)
|
||
setProcessingErrors([])
|
||
setSuccessfulPages([])
|
||
setFailedPages([])
|
||
setProcessingQueue(pagesToProcess)
|
||
setVocabulary([])
|
||
|
||
setActiveTab('vocabulary')
|
||
|
||
const API_BASE = getApiBase()
|
||
const errors: string[] = []
|
||
const successful: number[] = []
|
||
const failed: number[] = []
|
||
|
||
for (let i = 0; i < pagesToProcess.length; i++) {
|
||
const pageIndex = pagesToProcess[i]
|
||
setCurrentlyProcessingPage(pageIndex + 1)
|
||
setExtractionStatus(`Verarbeite Seite ${pageIndex + 1} von ${pagesToProcess.length}... (kann 30-60 Sekunden dauern)`)
|
||
|
||
const result = await processSinglePage(pageIndex)
|
||
|
||
if (result.success) {
|
||
successful.push(pageIndex + 1)
|
||
setSuccessfulPages([...successful])
|
||
setVocabulary(prev => [...prev, ...result.vocabulary])
|
||
setExtractionStatus(`Seite ${pageIndex + 1} fertig: ${result.vocabulary.length} Vokabeln gefunden`)
|
||
} else {
|
||
failed.push(pageIndex + 1)
|
||
setFailedPages([...failed])
|
||
if (result.error) {
|
||
errors.push(result.error)
|
||
setProcessingErrors([...errors])
|
||
}
|
||
setExtractionStatus(`Seite ${pageIndex + 1} fehlgeschlagen`)
|
||
}
|
||
|
||
await new Promise(r => setTimeout(r, 500))
|
||
}
|
||
|
||
setCurrentlyProcessingPage(null)
|
||
setProcessingQueue([])
|
||
setIsExtracting(false)
|
||
|
||
const totalVocab = vocabulary.length
|
||
if (successful.length === pagesToProcess.length) {
|
||
setExtractionStatus(`Fertig! Alle ${successful.length} Seiten verarbeitet.`)
|
||
} else if (successful.length > 0) {
|
||
setExtractionStatus(`${successful.length} von ${pagesToProcess.length} Seiten verarbeitet. ${failed.length} fehlgeschlagen.`)
|
||
} else {
|
||
setExtractionStatus(`Alle Seiten fehlgeschlagen.`)
|
||
}
|
||
|
||
// Reload thumbnails for processed pages (server may have rotated them)
|
||
if (successful.length > 0 && session) {
|
||
const updatedThumbs = [...pagesThumbnails]
|
||
for (const pageNum of successful) {
|
||
const idx = pageNum - 1 // successful stores 1-indexed
|
||
try {
|
||
const thumbRes = await fetch(`${API_BASE}/api/v1/vocab/sessions/${session.id}/pdf-thumbnail/${idx}?hires=true&t=${Date.now()}`)
|
||
if (thumbRes.ok) {
|
||
const blob = await thumbRes.blob()
|
||
// Revoke old blob URL to avoid memory leaks
|
||
if (updatedThumbs[idx]) URL.revokeObjectURL(updatedThumbs[idx])
|
||
updatedThumbs[idx] = URL.createObjectURL(blob)
|
||
}
|
||
} catch (e) {
|
||
console.error(`Failed to refresh thumbnail for page ${pageNum}`)
|
||
}
|
||
}
|
||
setPagesThumbnails(updatedThumbs)
|
||
}
|
||
|
||
setSession(prev => prev ? { ...prev, status: 'extracted' } : null)
|
||
}
|
||
|
||
// Toggle page selection
|
||
const togglePageSelection = (pageIndex: number) => {
|
||
setSelectedPages(prev =>
|
||
prev.includes(pageIndex)
|
||
? prev.filter(p => p !== pageIndex)
|
||
: [...prev, pageIndex].sort((a, b) => a - b)
|
||
)
|
||
}
|
||
|
||
const selectAllPages = () => setSelectedPages(
|
||
Array.from({ length: pdfPageCount }, (_, i) => i).filter(p => !excludedPages.includes(p))
|
||
)
|
||
const selectNoPages = () => setSelectedPages([])
|
||
|
||
const excludePage = (pageIndex: number, e: React.MouseEvent) => {
|
||
e.stopPropagation()
|
||
setExcludedPages(prev => [...prev, pageIndex])
|
||
setSelectedPages(prev => prev.filter(p => p !== pageIndex))
|
||
}
|
||
|
||
const restoreExcludedPages = () => {
|
||
setExcludedPages([])
|
||
}
|
||
|
||
// Run OCR Comparison on a single page
|
||
const runOcrComparison = async (pageIndex: number) => {
|
||
if (!session) return
|
||
|
||
setOcrComparePageIndex(pageIndex)
|
||
setShowOcrComparison(true)
|
||
setIsComparingOcr(true)
|
||
setOcrCompareError(null)
|
||
setOcrCompareResult(null)
|
||
|
||
const API_BASE = getApiBase()
|
||
|
||
try {
|
||
const res = await fetch(`${API_BASE}/api/v1/vocab/sessions/${session.id}/compare-ocr/${pageIndex}`, {
|
||
method: 'POST',
|
||
})
|
||
|
||
if (!res.ok) {
|
||
throw new Error(`HTTP ${res.status}`)
|
||
}
|
||
|
||
const data = await res.json()
|
||
setOcrCompareResult(data)
|
||
} catch (e) {
|
||
setOcrCompareError(e instanceof Error ? e.message : 'Vergleich fehlgeschlagen')
|
||
} finally {
|
||
setIsComparingOcr(false)
|
||
}
|
||
}
|
||
|
||
// Update vocabulary entry
|
||
const updateVocabularyEntry = (id: string, field: string, value: string) => {
|
||
setVocabulary(prev => prev.map(v => {
|
||
if (v.id !== id) return v
|
||
// Check if it's a base field or an extra column
|
||
if (field === 'english' || field === 'german' || field === 'example_sentence' || field === 'word_type') {
|
||
return { ...v, [field]: value }
|
||
}
|
||
// Extra column
|
||
return { ...v, extras: { ...(v.extras || {}), [field]: value } }
|
||
}))
|
||
}
|
||
|
||
// Add a custom column for a specific source page (0 = all pages)
|
||
const addExtraColumn = (sourcePage: number) => {
|
||
const label = prompt('Spaltenname:')
|
||
if (!label || !label.trim()) return
|
||
const key = `extra_${Date.now()}`
|
||
setPageExtraColumns(prev => ({
|
||
...prev,
|
||
[sourcePage]: [...(prev[sourcePage] || []), { key, label: label.trim() }],
|
||
}))
|
||
}
|
||
|
||
// Remove a custom column
|
||
const removeExtraColumn = (sourcePage: number, key: string) => {
|
||
setPageExtraColumns(prev => ({
|
||
...prev,
|
||
[sourcePage]: (prev[sourcePage] || []).filter(c => c.key !== key),
|
||
}))
|
||
// Clean up extras from entries
|
||
setVocabulary(prev => prev.map(v => {
|
||
if (!v.extras || !(key in v.extras)) return v
|
||
const { [key]: _, ...rest } = v.extras
|
||
return { ...v, extras: rest }
|
||
}))
|
||
}
|
||
|
||
// Get extra columns for a given source page (page-specific + global)
|
||
const getExtraColumnsForPage = (sourcePage: number): ExtraColumn[] => {
|
||
const global = pageExtraColumns[0] || []
|
||
const pageSpecific = pageExtraColumns[sourcePage] || []
|
||
return [...global, ...pageSpecific]
|
||
}
|
||
|
||
// Get ALL extra columns across all pages (for unified table header)
|
||
const getAllExtraColumns = (): ExtraColumn[] => {
|
||
const seen = new Set<string>()
|
||
const result: ExtraColumn[] = []
|
||
for (const cols of Object.values(pageExtraColumns)) {
|
||
for (const col of cols) {
|
||
if (!seen.has(col.key)) {
|
||
seen.add(col.key)
|
||
result.push(col)
|
||
}
|
||
}
|
||
}
|
||
return result
|
||
}
|
||
|
||
// Delete vocabulary entry
|
||
const deleteVocabularyEntry = (id: string) => {
|
||
setVocabulary(prev => prev.filter(v => v.id !== id))
|
||
}
|
||
|
||
// Toggle vocabulary entry selection
|
||
const toggleVocabularySelection = (id: string) => {
|
||
setVocabulary(prev => prev.map(v =>
|
||
v.id === id ? { ...v, selected: !v.selected } : v
|
||
))
|
||
}
|
||
|
||
// Toggle all vocabulary entries selection
|
||
const toggleAllSelection = () => {
|
||
const allSelected = vocabulary.every(v => v.selected)
|
||
setVocabulary(prev => prev.map(v => ({ ...v, selected: !allSelected })))
|
||
}
|
||
|
||
// Add new vocabulary entry at specific position (default: end)
|
||
const addVocabularyEntry = (atIndex?: number) => {
|
||
const newEntry: VocabularyEntry = {
|
||
id: `new-${Date.now()}`,
|
||
english: '',
|
||
german: '',
|
||
example_sentence: '',
|
||
selected: true
|
||
}
|
||
setVocabulary(prev => {
|
||
if (atIndex === undefined) {
|
||
return [...prev, newEntry]
|
||
}
|
||
const newList = [...prev]
|
||
newList.splice(atIndex, 0, newEntry)
|
||
return newList
|
||
})
|
||
}
|
||
|
||
// Save vocabulary changes
|
||
const saveVocabulary = async () => {
|
||
if (!session) return
|
||
const API_BASE = getApiBase()
|
||
|
||
try {
|
||
await fetch(`${API_BASE}/api/v1/vocab/sessions/${session.id}/vocabulary`, {
|
||
method: 'PUT',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({ vocabulary }),
|
||
})
|
||
} catch (error) {
|
||
console.error('Failed to save vocabulary:', error)
|
||
}
|
||
}
|
||
|
||
// Generate worksheet
|
||
const generateWorksheet = async () => {
|
||
if (!session) return
|
||
// For standard format, require worksheet types; for NRU, types are not needed
|
||
if (selectedFormat === 'standard' && selectedTypes.length === 0) return
|
||
|
||
setIsGenerating(true)
|
||
const API_BASE = getApiBase()
|
||
|
||
try {
|
||
await saveVocabulary()
|
||
|
||
let res: Response
|
||
|
||
if (selectedFormat === 'nru') {
|
||
// Use NRU format endpoint
|
||
res = await fetch(`${API_BASE}/api/v1/vocab/sessions/${session.id}/generate-nru`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
title: worksheetTitle || session.name,
|
||
include_solutions: includeSolutions,
|
||
}),
|
||
})
|
||
} else {
|
||
// Use standard format endpoint
|
||
res = await fetch(`${API_BASE}/api/v1/vocab/sessions/${session.id}/generate`, {
|
||
method: 'POST',
|
||
headers: { 'Content-Type': 'application/json' },
|
||
body: JSON.stringify({
|
||
worksheet_types: selectedTypes,
|
||
title: worksheetTitle || session.name,
|
||
include_solutions: includeSolutions,
|
||
line_height: lineHeight,
|
||
}),
|
||
})
|
||
}
|
||
|
||
if (res.ok) {
|
||
const data = await res.json()
|
||
// NRU endpoint returns worksheet_id, standard returns id
|
||
setWorksheetId(data.worksheet_id || data.id)
|
||
setActiveTab('export')
|
||
|
||
// Complete activity tracking with vocab count
|
||
completeActivity({ vocabCount: vocabulary.length })
|
||
}
|
||
} catch (error) {
|
||
console.error('Failed to generate worksheet:', error)
|
||
} finally {
|
||
setIsGenerating(false)
|
||
}
|
||
}
|
||
|
||
// Download PDF
|
||
const downloadPDF = (type: 'worksheet' | 'solution') => {
|
||
if (!worksheetId) return
|
||
const API_BASE = getApiBase()
|
||
const endpoint = type === 'worksheet' ? 'pdf' : 'solution'
|
||
window.open(`${API_BASE}/api/v1/vocab/worksheets/${worksheetId}/${endpoint}`, '_blank')
|
||
}
|
||
|
||
// Toggle worksheet type selection
|
||
const toggleWorksheetType = (type: WorksheetType) => {
|
||
setSelectedTypes(prev =>
|
||
prev.includes(type) ? prev.filter(t => t !== type) : [...prev, type]
|
||
)
|
||
}
|
||
|
||
// Resume an existing session
|
||
const resumeSession = async (existingSession: Session) => {
|
||
setError(null)
|
||
setExtractionStatus('Session wird geladen...')
|
||
|
||
const API_BASE = getApiBase()
|
||
|
||
try {
|
||
const sessionRes = await fetch(`${API_BASE}/api/v1/vocab/sessions/${existingSession.id}`)
|
||
if (!sessionRes.ok) throw new Error('Session nicht gefunden')
|
||
const sessionData = await sessionRes.json()
|
||
setSession(sessionData)
|
||
setWorksheetTitle(sessionData.name)
|
||
|
||
if (sessionData.status === 'extracted' || sessionData.status === 'completed') {
|
||
const vocabRes = await fetch(`${API_BASE}/api/v1/vocab/sessions/${existingSession.id}/vocabulary`)
|
||
if (vocabRes.ok) {
|
||
const vocabData = await vocabRes.json()
|
||
setVocabulary(vocabData.vocabulary || [])
|
||
}
|
||
setActiveTab('vocabulary')
|
||
setExtractionStatus('')
|
||
} else if (sessionData.status === 'pending') {
|
||
setActiveTab('upload')
|
||
setExtractionStatus('Diese Session hat noch keine Vokabeln. Bitte laden Sie ein Dokument hoch.')
|
||
} else {
|
||
setActiveTab('vocabulary')
|
||
setExtractionStatus('')
|
||
}
|
||
|
||
} catch (error) {
|
||
console.error('Failed to resume session:', error)
|
||
setError(error instanceof Error ? error.message : 'Fehler beim Laden der Session')
|
||
setExtractionStatus('')
|
||
}
|
||
}
|
||
|
||
// Reset session
|
||
const resetSession = async () => {
|
||
setSession(null)
|
||
setSessionName('')
|
||
setVocabulary([])
|
||
setUploadedImage(null)
|
||
setWorksheetId(null)
|
||
setSelectedDocumentId(null)
|
||
setDirectFile(null)
|
||
setDirectFilePreview(null)
|
||
setShowFullPreview(false)
|
||
setPdfPageCount(0)
|
||
setSelectedPages([])
|
||
setPagesThumbnails([])
|
||
setExcludedPages([])
|
||
setActiveTab('upload')
|
||
setError(null)
|
||
setExtractionStatus('')
|
||
|
||
const API_BASE = getApiBase()
|
||
try {
|
||
const res = await fetch(`${API_BASE}/api/v1/vocab/sessions`)
|
||
if (res.ok) {
|
||
const sessions = await res.json()
|
||
setExistingSessions(sessions)
|
||
}
|
||
} catch (e) {
|
||
console.error('Failed to reload sessions:', e)
|
||
}
|
||
}
|
||
|
||
// Delete a session
|
||
const deleteSession = async (sessionId: string, e: React.MouseEvent) => {
|
||
e.stopPropagation()
|
||
if (!confirm('Session wirklich loeschen? Diese Aktion kann nicht rueckgaengig gemacht werden.')) {
|
||
return
|
||
}
|
||
|
||
const API_BASE = getApiBase()
|
||
try {
|
||
const res = await fetch(`${API_BASE}/api/v1/vocab/sessions/${sessionId}`, {
|
||
method: 'DELETE',
|
||
})
|
||
if (res.ok) {
|
||
setExistingSessions(prev => prev.filter(s => s.id !== sessionId))
|
||
}
|
||
} catch (e) {
|
||
console.error('Failed to delete session:', e)
|
||
}
|
||
}
|
||
|
||
// Format file size
|
||
const formatFileSize = (bytes: number): string => {
|
||
if (bytes === 0) return '0 B'
|
||
const k = 1024
|
||
const sizes = ['B', 'KB', 'MB', 'GB']
|
||
const i = Math.floor(Math.log(bytes) / Math.log(k))
|
||
return parseFloat((bytes / Math.pow(k, i)).toFixed(1)) + ' ' + sizes[i]
|
||
}
|
||
|
||
const worksheetTypes: { id: WorksheetType; label: string; description: string }[] = [
|
||
{ id: 'en_to_de', label: 'Englisch → Deutsch', description: 'Englische Woerter uebersetzen' },
|
||
{ id: 'de_to_en', label: 'Deutsch → Englisch', description: 'Deutsche Woerter uebersetzen' },
|
||
{ id: 'copy', label: 'Abschreibuebung', description: 'Woerter mehrfach schreiben' },
|
||
{ id: 'gap_fill', label: 'Lueckensaetze', description: 'Saetze mit Luecken ausfuellen' },
|
||
]
|
||
|
||
// Glassmorphism styles
|
||
const glassCard = isDark
|
||
? 'backdrop-blur-xl bg-white/10 border border-white/20'
|
||
: 'backdrop-blur-xl bg-white/70 border border-black/10'
|
||
|
||
const glassInput = isDark
|
||
? 'bg-white/10 border-white/20 text-white placeholder-white/40 focus:border-purple-400'
|
||
: 'bg-white/50 border-black/10 text-slate-900 placeholder-slate-400 focus:border-purple-500'
|
||
|
||
if (!mounted) {
|
||
return (
|
||
<div className="min-h-screen bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800 flex items-center justify-center">
|
||
<div className="w-8 h-8 border-4 border-purple-400 border-t-transparent rounded-full animate-spin" />
|
||
</div>
|
||
)
|
||
}
|
||
|
||
return (
|
||
<div className={`min-h-screen flex relative overflow-hidden ${
|
||
isDark
|
||
? 'bg-gradient-to-br from-indigo-900 via-purple-900 to-pink-800'
|
||
: 'bg-gradient-to-br from-slate-100 via-purple-50 to-pink-100'
|
||
}`}>
|
||
{/* Animated Background Blobs */}
|
||
<div className="absolute inset-0 overflow-hidden pointer-events-none">
|
||
<div className={`absolute -top-40 -right-40 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-blob ${
|
||
isDark ? 'bg-purple-500 opacity-70' : 'bg-purple-300 opacity-50'
|
||
}`} />
|
||
<div className={`absolute -bottom-40 -left-40 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-2000 ${
|
||
isDark ? 'bg-pink-500 opacity-70' : 'bg-pink-300 opacity-50'
|
||
}`} />
|
||
<div className={`absolute top-1/2 left-1/2 -translate-x-1/2 -translate-y-1/2 w-80 h-80 rounded-full mix-blend-multiply filter blur-3xl animate-blob animation-delay-4000 ${
|
||
isDark ? 'bg-indigo-500 opacity-70' : 'bg-indigo-300 opacity-50'
|
||
}`} />
|
||
</div>
|
||
|
||
{/* Sidebar */}
|
||
<div className="relative z-10 p-4">
|
||
<Sidebar />
|
||
</div>
|
||
|
||
{/* Main Content */}
|
||
<div className="flex-1 flex flex-col relative z-10 overflow-y-auto">
|
||
{/* Header */}
|
||
<div className={`border-b ${isDark ? 'border-white/10' : 'border-black/5'}`}>
|
||
<div className={`${glassCard} border-0 border-b`}>
|
||
<div className="max-w-7xl mx-auto px-6 py-4">
|
||
<div className="flex items-center justify-between">
|
||
<div className="flex items-center gap-4">
|
||
<div className={`w-12 h-12 rounded-xl flex items-center justify-center ${
|
||
isDark ? 'bg-purple-500/30' : 'bg-purple-200'
|
||
}`}>
|
||
<svg className={`w-6 h-6 ${isDark ? 'text-purple-300' : 'text-purple-600'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.747 0 3.332.477 4.5 1.253v13C19.832 18.477 18.247 18 16.5 18c-1.746 0-3.332.477-4.5 1.253" />
|
||
</svg>
|
||
</div>
|
||
<div>
|
||
<h1 className={`text-xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
Vokabel-Arbeitsblatt Generator
|
||
</h1>
|
||
<p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||
Schulbuchseiten scannen → KI extrahiert Vokabeln → Druckfertige Arbeitsblaetter
|
||
{session && (
|
||
<span className={`ml-2 font-mono text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
|
||
Session: {session.id.slice(0, 8)}
|
||
</span>
|
||
)}
|
||
</p>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="flex items-center gap-2">
|
||
{/* Settings Button */}
|
||
<button
|
||
onClick={() => setShowSettings(!showSettings)}
|
||
className={`p-2 rounded-xl transition-all ${
|
||
showSettings
|
||
? (isDark ? 'bg-purple-500/30 text-purple-300' : 'bg-purple-200 text-purple-700')
|
||
: (isDark ? 'hover:bg-white/10 text-white/60 hover:text-white' : 'hover:bg-black/5 text-slate-500 hover:text-slate-700')
|
||
}`}
|
||
title="OCR-Einstellungen"
|
||
>
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z" />
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M15 12a3 3 0 11-6 0 3 3 0 016 0z" />
|
||
</svg>
|
||
</button>
|
||
|
||
{session && (
|
||
<button
|
||
onClick={resetSession}
|
||
className={`px-4 py-2 rounded-xl text-sm font-medium transition-all ${
|
||
isDark
|
||
? 'bg-white/10 text-white/80 hover:bg-white/20'
|
||
: 'bg-black/5 text-slate-700 hover:bg-black/10'
|
||
}`}
|
||
>
|
||
← Neue Session
|
||
</button>
|
||
)}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="relative z-10 w-full px-6 py-6">
|
||
{/* OCR Settings Panel */}
|
||
{showSettings && (
|
||
<div className={`${glassCard} rounded-2xl p-6 mb-6`}>
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h2 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
OCR-Filter Einstellungen
|
||
</h2>
|
||
<button
|
||
onClick={() => setShowSettings(false)}
|
||
className={`p-1 rounded-lg ${isDark ? 'hover:bg-white/10 text-white/60' : 'hover:bg-black/5 text-slate-500'}`}
|
||
>
|
||
<svg className="w-5 h-5" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
<div className={`p-4 rounded-xl mb-4 ${isDark ? 'bg-blue-500/20 text-blue-200' : 'bg-blue-100 text-blue-800'}`}>
|
||
<p className="text-sm">
|
||
Diese Einstellungen helfen, unerwuenschte Elemente wie Seitenzahlen, Kapitelnamen oder Kopfzeilen aus dem OCR-Ergebnis zu filtern.
|
||
</p>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-1 md:grid-cols-2 gap-6">
|
||
{/* Checkboxes */}
|
||
<div className="space-y-3">
|
||
<label className={`flex items-center gap-3 cursor-pointer ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
<input
|
||
type="checkbox"
|
||
checked={ocrPrompts.filterHeaders}
|
||
onChange={(e) => saveOcrPrompts({ ...ocrPrompts, filterHeaders: e.target.checked })}
|
||
className="w-5 h-5 rounded border-2 border-purple-500 text-purple-500 focus:ring-purple-500"
|
||
/>
|
||
<span>Kopfzeilen filtern (z.B. Kapitelnamen)</span>
|
||
</label>
|
||
|
||
<label className={`flex items-center gap-3 cursor-pointer ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
<input
|
||
type="checkbox"
|
||
checked={ocrPrompts.filterFooters}
|
||
onChange={(e) => saveOcrPrompts({ ...ocrPrompts, filterFooters: e.target.checked })}
|
||
className="w-5 h-5 rounded border-2 border-purple-500 text-purple-500 focus:ring-purple-500"
|
||
/>
|
||
<span>Fusszeilen filtern</span>
|
||
</label>
|
||
|
||
<label className={`flex items-center gap-3 cursor-pointer ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
<input
|
||
type="checkbox"
|
||
checked={ocrPrompts.filterPageNumbers}
|
||
onChange={(e) => saveOcrPrompts({ ...ocrPrompts, filterPageNumbers: e.target.checked })}
|
||
className="w-5 h-5 rounded border-2 border-purple-500 text-purple-500 focus:ring-purple-500"
|
||
/>
|
||
<span>Seitenzahlen filtern (auch ausgeschrieben: "zweihundertzwoelf")</span>
|
||
</label>
|
||
</div>
|
||
|
||
{/* Patterns */}
|
||
<div className="space-y-4">
|
||
<div>
|
||
<label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/70' : 'text-slate-600'}`}>
|
||
Kopfzeilen-Muster (kommagetrennt)
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={ocrPrompts.headerPatterns.join(', ')}
|
||
onChange={(e) => saveOcrPrompts({
|
||
...ocrPrompts,
|
||
headerPatterns: e.target.value.split(',').map(s => s.trim()).filter(Boolean)
|
||
})}
|
||
placeholder="Unit, Chapter, Lesson..."
|
||
className={`w-full px-4 py-2 rounded-xl border ${glassInput} focus:outline-none focus:ring-2 focus:ring-purple-500`}
|
||
/>
|
||
</div>
|
||
|
||
<div>
|
||
<label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/70' : 'text-slate-600'}`}>
|
||
Fusszeilen-Muster (kommagetrennt)
|
||
</label>
|
||
<input
|
||
type="text"
|
||
value={ocrPrompts.footerPatterns.join(', ')}
|
||
onChange={(e) => saveOcrPrompts({
|
||
...ocrPrompts,
|
||
footerPatterns: e.target.value.split(',').map(s => s.trim()).filter(Boolean)
|
||
})}
|
||
placeholder="zweihundert, Page, Seite..."
|
||
className={`w-full px-4 py-2 rounded-xl border ${glassInput} focus:outline-none focus:ring-2 focus:ring-purple-500`}
|
||
/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="mt-4">
|
||
<label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/70' : 'text-slate-600'}`}>
|
||
Zusaetzlicher Filter-Prompt (optional)
|
||
</label>
|
||
<textarea
|
||
value={ocrPrompts.customFilter}
|
||
onChange={(e) => saveOcrPrompts({ ...ocrPrompts, customFilter: e.target.value })}
|
||
placeholder="z.B.: Ignoriere alle Zeilen, die nur Zahlen oder Buchstaben enthalten..."
|
||
rows={2}
|
||
className={`w-full px-4 py-2 rounded-xl border ${glassInput} focus:outline-none focus:ring-2 focus:ring-purple-500 resize-none`}
|
||
/>
|
||
</div>
|
||
|
||
<div className="mt-4 flex justify-end">
|
||
<button
|
||
onClick={() => saveOcrPrompts(defaultOcrPrompts)}
|
||
className={`px-4 py-2 rounded-xl text-sm ${isDark ? 'text-white/60 hover:text-white' : 'text-slate-500 hover:text-slate-700'}`}
|
||
>
|
||
Auf Standard zuruecksetzen
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Error Message */}
|
||
{error && (
|
||
<div className={`${glassCard} rounded-2xl p-4 mb-6 ${isDark ? 'bg-red-500/20 border-red-500/30' : 'bg-red-100/80 border-red-200'}`}>
|
||
<p className={isDark ? 'text-red-200' : 'text-red-700'}>{error}</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Status Message */}
|
||
{extractionStatus && (
|
||
<div className={`${glassCard} rounded-2xl p-4 mb-6 ${isDark ? 'bg-purple-500/20 border-purple-500/30' : 'bg-purple-100/80 border-purple-200'}`}>
|
||
{isCreatingSession || isExtracting ? (
|
||
<div className="flex items-center gap-3">
|
||
<div className={`w-5 h-5 border-2 ${isDark ? 'border-purple-300' : 'border-purple-600'} border-t-transparent rounded-full animate-spin`} />
|
||
<span className={isDark ? 'text-purple-200' : 'text-purple-700'}>{extractionStatus}</span>
|
||
</div>
|
||
) : (
|
||
<span className={isDark ? 'text-purple-200' : 'text-purple-700'}>{extractionStatus}</span>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Initial Upload Screen */}
|
||
{!session && (
|
||
<div className="space-y-6">
|
||
{/* Existing Sessions */}
|
||
{existingSessions.length > 0 && (
|
||
<div className={`${glassCard} rounded-2xl p-6`}>
|
||
<h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
Vorhandene Sessions fortsetzen
|
||
</h2>
|
||
{isLoadingSessions ? (
|
||
<div className="flex items-center gap-3 py-4">
|
||
<div className="w-5 h-5 border-2 border-purple-500 border-t-transparent rounded-full animate-spin" />
|
||
<span className={isDark ? 'text-white/60' : 'text-slate-500'}>Lade Sessions...</span>
|
||
</div>
|
||
) : (
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
{existingSessions.map((s) => (
|
||
<div
|
||
key={s.id}
|
||
className={`${glassCard} p-4 rounded-xl text-left transition-all hover:shadow-lg relative group cursor-pointer ${
|
||
isDark ? 'hover:border-purple-400/50' : 'hover:border-purple-400'
|
||
}`}
|
||
onClick={() => resumeSession(s)}
|
||
>
|
||
{/* Delete Button */}
|
||
<button
|
||
onClick={(e) => deleteSession(s.id, e)}
|
||
className={`absolute top-2 right-2 p-1.5 rounded-lg opacity-0 group-hover:opacity-100 transition-opacity ${
|
||
isDark ? 'hover:bg-red-500/20 text-red-400' : 'hover:bg-red-100 text-red-500'
|
||
}`}
|
||
title="Session loeschen"
|
||
>
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||
</svg>
|
||
</button>
|
||
|
||
<div className="flex items-start gap-3">
|
||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center flex-shrink-0 ${
|
||
s.status === 'extracted' || s.status === 'completed'
|
||
? (isDark ? 'bg-green-500/30' : 'bg-green-100')
|
||
: (isDark ? 'bg-white/10' : 'bg-slate-100')
|
||
}`}>
|
||
{s.status === 'extracted' || s.status === 'completed' ? (
|
||
<svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
) : (
|
||
<svg className={`w-5 h-5 ${isDark ? 'text-white/40' : 'text-slate-400'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 6v6m0 0v6m0-6h6m-6 0H6" />
|
||
</svg>
|
||
)}
|
||
</div>
|
||
<div className="flex-1 min-w-0">
|
||
<h3 className={`font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>{s.name}</h3>
|
||
<p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||
{s.vocabulary_count} Vokabeln
|
||
{s.status === 'pending' && ' • Nicht gestartet'}
|
||
{s.status === 'extracted' && ' • Bereit'}
|
||
{s.status === 'completed' && ' • Abgeschlossen'}
|
||
</p>
|
||
{s.created_at && (
|
||
<p className={`text-xs mt-1 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
|
||
{new Date(s.created_at).toLocaleDateString('de-DE', {
|
||
day: '2-digit',
|
||
month: '2-digit',
|
||
year: 'numeric',
|
||
hour: '2-digit',
|
||
minute: '2-digit'
|
||
})}
|
||
</p>
|
||
)}
|
||
</div>
|
||
<svg className={`w-5 h-5 flex-shrink-0 ${isDark ? 'text-white/30' : 'text-slate-300'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 5l7 7-7 7" />
|
||
</svg>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Explanation */}
|
||
<div className={`${glassCard} rounded-2xl p-6 ${isDark ? 'bg-gradient-to-br from-purple-500/20 to-pink-500/20' : 'bg-gradient-to-br from-purple-100/50 to-pink-100/50'}`}>
|
||
<h2 className={`text-lg font-semibold mb-3 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
{existingSessions.length > 0 ? 'Oder neue Session starten:' : 'So funktioniert es:'}
|
||
</h2>
|
||
<ol className={`space-y-2 ${isDark ? 'text-white/70' : 'text-slate-600'}`}>
|
||
<li className="flex items-start gap-2">
|
||
<span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${isDark ? 'bg-purple-500/30 text-purple-300' : 'bg-purple-200 text-purple-700'}`}>1</span>
|
||
<span>Dokument (Bild oder PDF) auswaehlen</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${isDark ? 'bg-purple-500/30 text-purple-300' : 'bg-purple-200 text-purple-700'}`}>2</span>
|
||
<span>Vorschau pruefen und Session benennen</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${isDark ? 'bg-purple-500/30 text-purple-300' : 'bg-purple-200 text-purple-700'}`}>3</span>
|
||
<span>Bei PDFs: Seiten auswaehlen die verarbeitet werden sollen</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${isDark ? 'bg-purple-500/30 text-purple-300' : 'bg-purple-200 text-purple-700'}`}>4</span>
|
||
<span>KI extrahiert Vokabeln — pruefen, korrigieren, Arbeitsblatt-Typ waehlen</span>
|
||
</li>
|
||
<li className="flex items-start gap-2">
|
||
<span className={`w-6 h-6 rounded-full flex items-center justify-center text-xs font-bold flex-shrink-0 ${isDark ? 'bg-purple-500/30 text-purple-300' : 'bg-purple-200 text-purple-700'}`}>5</span>
|
||
<span>PDF herunterladen und ausdrucken</span>
|
||
</li>
|
||
</ol>
|
||
</div>
|
||
|
||
{/* Step 1: Document Selection */}
|
||
<div className={`${glassCard} rounded-2xl p-6`}>
|
||
<h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
1. Dokument auswaehlen
|
||
</h2>
|
||
|
||
<input ref={directFileInputRef} type="file" accept="image/png,image/jpeg,image/jpg,application/pdf" onChange={handleDirectFileSelect} className="hidden" />
|
||
|
||
<div className="grid grid-cols-2 gap-3 mb-4">
|
||
{/* File Upload Button */}
|
||
<button
|
||
onClick={() => directFileInputRef.current?.click()}
|
||
className={`p-4 rounded-xl border-2 border-dashed transition-all ${
|
||
directFile
|
||
? (isDark ? 'border-green-400/50 bg-green-500/20' : 'border-green-500 bg-green-50')
|
||
: (isDark ? 'border-white/20 hover:border-purple-400/50' : 'border-slate-300 hover:border-purple-500')
|
||
}`}
|
||
>
|
||
{directFile ? (
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-2xl">{directFile.type === 'application/pdf' ? '📄' : '🖼️'}</span>
|
||
<div className="text-left flex-1 min-w-0">
|
||
<p className={`font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>{directFile.name}</p>
|
||
<p className={`text-xs ${isDark ? 'text-white/60' : 'text-slate-500'}`}>{formatFileSize(directFile.size)}</p>
|
||
</div>
|
||
<svg className="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
</div>
|
||
) : (
|
||
<div className={`text-center ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||
<span className="text-2xl block mb-1">📁</span>
|
||
<span className="text-sm">Datei auswaehlen</span>
|
||
</div>
|
||
)}
|
||
</button>
|
||
|
||
{/* QR Code Upload Button */}
|
||
<button
|
||
onClick={() => setShowQRModal(true)}
|
||
className={`p-4 rounded-xl border-2 border-dashed transition-all ${
|
||
selectedMobileFile
|
||
? (isDark ? 'border-green-400/50 bg-green-500/20' : 'border-green-500 bg-green-50')
|
||
: (isDark ? 'border-white/20 hover:border-purple-400/50' : 'border-slate-300 hover:border-purple-500')
|
||
}`}
|
||
>
|
||
{selectedMobileFile ? (
|
||
<div className="flex items-center gap-3">
|
||
<span className="text-2xl">{selectedMobileFile.type.startsWith('image/') ? '🖼️' : '📄'}</span>
|
||
<div className="text-left flex-1 min-w-0">
|
||
<p className={`font-medium truncate text-sm ${isDark ? 'text-white' : 'text-slate-900'}`}>{selectedMobileFile.name}</p>
|
||
<p className={`text-xs ${isDark ? 'text-white/60' : 'text-slate-500'}`}>vom Handy</p>
|
||
</div>
|
||
<svg className="w-5 h-5 text-green-500 flex-shrink-0" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
</div>
|
||
) : (
|
||
<div className={`text-center ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||
<span className="text-2xl block mb-1">📱</span>
|
||
<span className="text-sm">Mit Handy scannen</span>
|
||
</div>
|
||
)}
|
||
</button>
|
||
</div>
|
||
|
||
{/* Mobile Uploaded Files */}
|
||
{mobileUploadedFiles.length > 0 && !directFile && (
|
||
<>
|
||
<div className={`text-center text-sm mb-3 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>— Vom Handy hochgeladen —</div>
|
||
<div className="space-y-2 max-h-32 overflow-y-auto mb-4">
|
||
{mobileUploadedFiles.map((file) => (
|
||
<button
|
||
key={file.id}
|
||
onClick={() => { setSelectedMobileFile(file); setDirectFile(null); setSelectedDocumentId(null); setError(null) }}
|
||
className={`w-full flex items-center gap-3 p-3 rounded-xl text-left transition-all ${
|
||
selectedMobileFile?.id === file.id
|
||
? (isDark ? 'bg-green-500/30 border-2 border-green-400/50' : 'bg-green-100 border-2 border-green-500')
|
||
: (isDark ? 'bg-white/5 border-2 border-transparent hover:border-white/20' : 'bg-slate-50 border-2 border-transparent hover:border-slate-200')
|
||
}`}
|
||
>
|
||
<span className="text-xl">{file.type.startsWith('image/') ? '🖼️' : '📄'}</span>
|
||
<div className="flex-1 min-w-0">
|
||
<p className={`font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>{file.name}</p>
|
||
<p className={`text-xs ${isDark ? 'text-white/60' : 'text-slate-500'}`}>{formatFileSize(file.size)}</p>
|
||
</div>
|
||
{selectedMobileFile?.id === file.id && (
|
||
<svg className="w-5 h-5 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* Stored Documents */}
|
||
{storedDocuments.length > 0 && !directFile && !selectedMobileFile && (
|
||
<>
|
||
<div className={`text-center text-sm mb-3 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>— oder aus Ihren Dokumenten —</div>
|
||
<div className="space-y-2 max-h-32 overflow-y-auto">
|
||
{storedDocuments.map((doc) => (
|
||
<button
|
||
key={doc.id}
|
||
onClick={() => { setSelectedDocumentId(doc.id); setDirectFile(null); setSelectedMobileFile(null); setError(null) }}
|
||
className={`w-full flex items-center gap-3 p-3 rounded-xl text-left transition-all ${
|
||
selectedDocumentId === doc.id
|
||
? (isDark ? 'bg-purple-500/30 border-2 border-purple-400/50' : 'bg-purple-100 border-2 border-purple-500')
|
||
: (isDark ? 'bg-white/5 border-2 border-transparent hover:border-white/20' : 'bg-slate-50 border-2 border-transparent hover:border-slate-200')
|
||
}`}
|
||
>
|
||
<span className="text-xl">{doc.type === 'application/pdf' ? '📄' : '🖼️'}</span>
|
||
<div className="flex-1 min-w-0">
|
||
<p className={`font-medium truncate ${isDark ? 'text-white' : 'text-slate-900'}`}>{doc.name}</p>
|
||
<p className={`text-xs ${isDark ? 'text-white/60' : 'text-slate-500'}`}>{formatFileSize(doc.size)}</p>
|
||
</div>
|
||
{selectedDocumentId === doc.id && (
|
||
<svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
)}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</>
|
||
)}
|
||
</div>
|
||
|
||
{/* Step 2: Preview + Session Name (shown when document selected) */}
|
||
{(directFile || selectedMobileFile || selectedDocumentId) && (
|
||
<div className="grid grid-cols-1 lg:grid-cols-5 gap-6">
|
||
{/* Document Preview */}
|
||
<div className={`${glassCard} rounded-2xl p-6 lg:col-span-3`}>
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h2 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
Vorschau
|
||
</h2>
|
||
<button
|
||
onClick={() => setShowFullPreview(true)}
|
||
className={`px-3 py-1.5 rounded-lg text-sm font-medium transition-all flex items-center gap-2 ${
|
||
isDark ? 'bg-white/10 hover:bg-white/20 text-white' : 'bg-slate-100 hover:bg-slate-200 text-slate-700'
|
||
}`}
|
||
>
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0zM10 7v3m0 0v3m0-3h3m-3 0H7" />
|
||
</svg>
|
||
Originalgroesse
|
||
</button>
|
||
</div>
|
||
<div className={`max-h-[60vh] overflow-auto rounded-xl border ${isDark ? 'border-white/10' : 'border-black/10'}`}>
|
||
{/* Image preview from file */}
|
||
{directFile?.type.startsWith('image/') && directFilePreview && (
|
||
<img src={directFilePreview} alt="Vorschau" className="w-full h-auto" />
|
||
)}
|
||
{/* PDF preview from file */}
|
||
{directFile?.type === 'application/pdf' && directFilePreview && (
|
||
<iframe src={directFilePreview} className="w-full border-0 rounded-xl" style={{ height: '60vh' }} />
|
||
)}
|
||
{/* Mobile file preview */}
|
||
{selectedMobileFile && !directFile && (
|
||
selectedMobileFile.type.startsWith('image/')
|
||
? <img src={selectedMobileFile.dataUrl} alt="Vorschau" className="w-full h-auto" />
|
||
: <iframe src={selectedMobileFile.dataUrl} className="w-full border-0 rounded-xl" style={{ height: '60vh' }} />
|
||
)}
|
||
{/* Stored document preview */}
|
||
{selectedDocumentId && !directFile && !selectedMobileFile && (() => {
|
||
const doc = storedDocuments.find(d => d.id === selectedDocumentId)
|
||
if (!doc?.url) return <p className={`p-8 text-center ${isDark ? 'text-white/40' : 'text-slate-400'}`}>Keine Vorschau verfuegbar</p>
|
||
return doc.type.startsWith('image/')
|
||
? <img src={doc.url} alt="Vorschau" className="w-full h-auto" />
|
||
: <iframe src={doc.url} className="w-full border-0 rounded-xl" style={{ height: '60vh' }} />
|
||
})()}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Session Name + Start */}
|
||
<div className={`${glassCard} rounded-2xl p-6 lg:col-span-2 flex flex-col`}>
|
||
<h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
2. Session benennen
|
||
</h2>
|
||
<input
|
||
type="text"
|
||
value={sessionName}
|
||
onChange={(e) => { setSessionName(e.target.value); setError(null) }}
|
||
placeholder="z.B. Englisch Klasse 7 - Unit 3"
|
||
className={`w-full px-4 py-3 rounded-xl border ${glassInput} focus:outline-none focus:ring-2 focus:ring-purple-500 mb-4`}
|
||
autoFocus
|
||
/>
|
||
<p className={`text-sm mb-6 ${isDark ? 'text-white/50' : 'text-slate-500'}`}>
|
||
Benennen Sie die Session z.B. nach dem Schulbuch-Kapitel, damit Sie sie spaeter wiederfinden.
|
||
</p>
|
||
<div className="flex-1" />
|
||
<button
|
||
onClick={() => {
|
||
if (!sessionName.trim()) {
|
||
setError('Bitte geben Sie einen Session-Namen ein (z.B. "Englisch Klasse 7 - Unit 3")')
|
||
return
|
||
}
|
||
startSession()
|
||
}}
|
||
disabled={isCreatingSession || !sessionName.trim()}
|
||
className="w-full px-6 py-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-2xl font-semibold text-lg disabled:opacity-50 hover:shadow-xl hover:shadow-purple-500/30 transition-all transform hover:scale-105"
|
||
>
|
||
{isCreatingSession ? 'Verarbeite...' : 'Weiter →'}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* PDF Page Selection */}
|
||
{session && activeTab === 'pages' && (
|
||
<div className={`${glassCard} rounded-2xl p-6`}>
|
||
<div className="flex items-center justify-between mb-4">
|
||
<h2 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
PDF-Seiten auswaehlen ({selectedPages.length} von {pdfPageCount - excludedPages.length} ausgewaehlt)
|
||
</h2>
|
||
<div className="flex gap-2">
|
||
{excludedPages.length > 0 && (
|
||
<button onClick={restoreExcludedPages} className={`px-3 py-1 rounded-lg text-sm ${isDark ? 'bg-orange-500/20 text-orange-300 hover:bg-orange-500/30' : 'bg-orange-100 text-orange-700 hover:bg-orange-200'}`}>
|
||
{excludedPages.length} ausgeblendet - wiederherstellen
|
||
</button>
|
||
)}
|
||
<button onClick={selectAllPages} className={`px-3 py-1 rounded-lg text-sm transition-colors ${isDark ? 'bg-white/10 hover:bg-white/20 text-white' : 'bg-slate-100 hover:bg-slate-200 text-slate-900'}`}>
|
||
Alle
|
||
</button>
|
||
<button onClick={selectNoPages} className={`px-3 py-1 rounded-lg text-sm transition-colors ${isDark ? 'bg-white/10 hover:bg-white/20 text-white' : 'bg-slate-100 hover:bg-slate-200 text-slate-900'}`}>
|
||
Keine
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
<p className={`text-sm mb-4 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||
Klicken Sie auf eine Seite um sie auszuwaehlen. Klicken Sie auf das X um leere Seiten auszublenden.
|
||
</p>
|
||
|
||
{isLoadingThumbnails ? (
|
||
<div className="flex items-center justify-center py-12">
|
||
<div className="w-8 h-8 border-4 border-purple-500 border-t-transparent rounded-full animate-spin" />
|
||
<span className={`ml-3 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Lade Seitenvorschau...</span>
|
||
</div>
|
||
) : (
|
||
<div className="grid grid-cols-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 gap-4 mb-6">
|
||
{pagesThumbnails.map((thumb, idx) => {
|
||
if (excludedPages.includes(idx)) return null
|
||
return (
|
||
<div key={idx} className="relative group">
|
||
{/* Exclude/Delete Button */}
|
||
<button
|
||
onClick={(e) => excludePage(idx, e)}
|
||
className="absolute top-1 left-1 z-10 p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity bg-red-500/80 hover:bg-red-600 text-white"
|
||
title="Seite ausblenden"
|
||
>
|
||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
|
||
{/* OCR Compare Button */}
|
||
<button
|
||
onClick={(e) => { e.stopPropagation(); runOcrComparison(idx); }}
|
||
className="absolute top-1 right-1 z-10 p-1 rounded-full opacity-0 group-hover:opacity-100 transition-opacity bg-blue-500/80 hover:bg-blue-600 text-white"
|
||
title="OCR-Methoden vergleichen"
|
||
>
|
||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M9 19v-6a2 2 0 00-2-2H5a2 2 0 00-2 2v6a2 2 0 002 2h2a2 2 0 002-2zm0 0V9a2 2 0 012-2h2a2 2 0 012 2v10m-6 0a2 2 0 002 2h2a2 2 0 002-2m0 0V5a2 2 0 012-2h2a2 2 0 012 2v14a2 2 0 01-2 2h-2a2 2 0 01-2-2z" />
|
||
</svg>
|
||
</button>
|
||
|
||
<button
|
||
onClick={() => togglePageSelection(idx)}
|
||
className={`relative rounded-xl overflow-hidden border-2 transition-all w-full ${
|
||
selectedPages.includes(idx)
|
||
? 'border-purple-500 ring-2 ring-purple-500/50'
|
||
: (isDark ? 'border-white/20 hover:border-white/40' : 'border-slate-200 hover:border-slate-300')
|
||
}`}
|
||
>
|
||
<img src={thumb} alt={`Seite ${idx + 1}`} className="w-full h-auto" />
|
||
<div className={`absolute bottom-0 left-0 right-0 py-1 text-center text-xs font-medium ${
|
||
selectedPages.includes(idx)
|
||
? 'bg-purple-500 text-white'
|
||
: (isDark ? 'bg-black/60 text-white/80' : 'bg-white/90 text-slate-700')
|
||
}`}>
|
||
Seite {idx + 1}
|
||
</div>
|
||
{selectedPages.includes(idx) && (
|
||
<div className="absolute top-2 right-2 w-6 h-6 bg-purple-500 rounded-full flex items-center justify-center">
|
||
<svg className="w-4 h-4 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
</div>
|
||
)}
|
||
</button>
|
||
</div>
|
||
)
|
||
})}
|
||
</div>
|
||
)}
|
||
|
||
<div className="flex justify-center">
|
||
<button
|
||
onClick={processSelectedPages}
|
||
disabled={selectedPages.length === 0 || isExtracting}
|
||
className="px-8 py-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-2xl font-semibold disabled:opacity-50 hover:shadow-xl hover:shadow-purple-500/30 transition-all transform hover:scale-105"
|
||
>
|
||
{isExtracting ? 'Extrahiere Vokabeln...' : `${selectedPages.length} Seiten verarbeiten`}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Vocabulary Tab */}
|
||
{session && activeTab === 'vocabulary' && (() => {
|
||
const extras = getAllExtraColumns()
|
||
const baseCols = 3 + extras.length // english, german, example + extras
|
||
const gridCols = `14px 32px 36px repeat(${baseCols}, 1fr) 32px`
|
||
return (
|
||
<div className="flex flex-col lg:flex-row gap-4" style={{ height: 'calc(100vh - 240px)', minHeight: '500px' }}>
|
||
{/* Left: Original pages — full quality */}
|
||
<div className={`${glassCard} rounded-2xl p-4 lg:w-1/3 flex flex-col overflow-hidden`}>
|
||
<h2 className={`text-sm font-semibold mb-3 flex-shrink-0 ${isDark ? 'text-white/70' : 'text-slate-600'}`}>
|
||
Original ({(() => { const pp = selectedPages.length > 0 ? selectedPages : [...new Set(vocabulary.map(v => (v.source_page || 1) - 1))]; return pp.length; })()} Seiten)
|
||
</h2>
|
||
<div className="flex-1 overflow-y-auto space-y-3">
|
||
{(() => {
|
||
const processedPageIndices = selectedPages.length > 0
|
||
? selectedPages
|
||
: [...new Set(vocabulary.map(v => (v.source_page || 1) - 1))].sort((a, b) => a - b)
|
||
|
||
const apiBase = getApiBase()
|
||
const pagesToShow = processedPageIndices
|
||
.filter(idx => idx >= 0)
|
||
.map(idx => ({
|
||
idx,
|
||
src: session ? `${apiBase}/api/v1/vocab/sessions/${session.id}/pdf-page-image/${idx}` : null,
|
||
}))
|
||
.filter(t => t.src !== null) as { idx: number; src: string }[]
|
||
|
||
if (pagesToShow.length > 0) {
|
||
return pagesToShow.map(({ idx, src }) => (
|
||
<div key={idx} className={`relative rounded-xl overflow-hidden border ${isDark ? 'border-white/10' : 'border-black/10'}`}>
|
||
<div className={`absolute top-2 left-2 px-2 py-0.5 rounded-lg text-xs font-medium z-10 ${isDark ? 'bg-black/60 text-white' : 'bg-white/90 text-slate-700'}`}>
|
||
S. {idx + 1}
|
||
</div>
|
||
<img src={src} alt={`Seite ${idx + 1}`} className="w-full h-auto" />
|
||
</div>
|
||
))
|
||
}
|
||
if (uploadedImage) {
|
||
return (
|
||
<div className={`relative rounded-xl overflow-hidden border ${isDark ? 'border-white/10' : 'border-black/10'}`}>
|
||
<img src={uploadedImage} alt="Arbeitsblatt" className="w-full h-auto" />
|
||
</div>
|
||
)
|
||
}
|
||
return (
|
||
<div className={`flex-1 flex items-center justify-center py-12 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
|
||
<div className="text-center">
|
||
<svg className="w-12 h-12 mx-auto mb-2 opacity-50" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 16l4.586-4.586a2 2 0 012.828 0L16 16m-2-2l1.586-1.586a2 2 0 012.828 0L20 14m-6-6h.01M6 20h12a2 2 0 002-2V6a2 2 0 00-2-2H6a2 2 0 00-2 2v12a2 2 0 002 2z" />
|
||
</svg>
|
||
<p className="text-xs">Kein Bild verfuegbar</p>
|
||
</div>
|
||
</div>
|
||
)
|
||
})()}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Right: Vocabulary table (2/3 width) */}
|
||
<div className={`${glassCard} rounded-2xl p-4 lg:w-2/3 flex flex-col overflow-hidden`}>
|
||
<div className="flex items-center justify-between mb-3 flex-shrink-0">
|
||
<h2 className={`text-lg font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
Vokabeln ({vocabulary.length})
|
||
</h2>
|
||
<div className="flex gap-2">
|
||
<button onClick={saveVocabulary} className={`px-4 py-2 rounded-xl text-sm font-medium transition-colors ${isDark ? 'bg-white/10 hover:bg-white/20 text-white' : 'bg-slate-100 hover:bg-slate-200 text-slate-900'}`}>
|
||
Speichern
|
||
</button>
|
||
<button onClick={() => setActiveTab('worksheet')} className="px-4 py-2 rounded-xl text-sm font-medium bg-gradient-to-r from-purple-500 to-pink-500 text-white hover:shadow-lg transition-all">
|
||
Weiter →
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Error messages for failed pages */}
|
||
{processingErrors.length > 0 && (
|
||
<div className={`rounded-xl p-3 mb-3 flex-shrink-0 ${isDark ? 'bg-orange-500/20 text-orange-200 border border-orange-500/30' : 'bg-orange-100 text-orange-700 border border-orange-200'}`}>
|
||
<div className="font-medium mb-1 text-sm">Einige Seiten konnten nicht verarbeitet werden:</div>
|
||
<ul className="text-xs space-y-0.5">
|
||
{processingErrors.map((err, idx) => (
|
||
<li key={idx}>• {err}</li>
|
||
))}
|
||
</ul>
|
||
</div>
|
||
)}
|
||
|
||
{/* Processing Progress */}
|
||
{currentlyProcessingPage && (
|
||
<div className={`rounded-xl p-3 mb-3 flex-shrink-0 ${isDark ? 'bg-purple-500/20 border border-purple-500/30' : 'bg-purple-100 border border-purple-200'}`}>
|
||
<div className="flex items-center gap-3">
|
||
<div className={`w-4 h-4 border-2 ${isDark ? 'border-purple-300' : 'border-purple-600'} border-t-transparent rounded-full animate-spin`} />
|
||
<div>
|
||
<div className={`text-sm font-medium ${isDark ? 'text-purple-200' : 'text-purple-700'}`}>Verarbeite Seite {currentlyProcessingPage}...</div>
|
||
<div className={`text-xs ${isDark ? 'text-purple-300/70' : 'text-purple-600'}`}>
|
||
{successfulPages.length > 0 && `${successfulPages.length} Seite(n) fertig • `}
|
||
{vocabulary.length} Vokabeln bisher
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* Success info */}
|
||
{!currentlyProcessingPage && successfulPages.length > 0 && failedPages.length === 0 && (
|
||
<div className={`rounded-xl p-2 mb-3 text-xs flex-shrink-0 ${isDark ? 'bg-green-500/20 text-green-200 border border-green-500/30' : 'bg-green-100 text-green-700 border border-green-200'}`}>
|
||
Alle {successfulPages.length} Seite(n) erfolgreich verarbeitet - {vocabulary.length} Vokabeln insgesamt
|
||
</div>
|
||
)}
|
||
|
||
{/* Partial success info */}
|
||
{!currentlyProcessingPage && successfulPages.length > 0 && failedPages.length > 0 && (
|
||
<div className={`rounded-xl p-2 mb-3 text-xs flex-shrink-0 ${isDark ? 'bg-yellow-500/20 text-yellow-200 border border-yellow-500/30' : 'bg-yellow-100 text-yellow-700 border border-yellow-200'}`}>
|
||
{successfulPages.length} Seite(n) erfolgreich, {failedPages.length} fehlgeschlagen - {vocabulary.length} Vokabeln extrahiert
|
||
</div>
|
||
)}
|
||
|
||
{vocabulary.length === 0 ? (
|
||
<p className={`text-center py-8 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Keine Vokabeln gefunden.</p>
|
||
) : (
|
||
<div className="flex flex-col flex-1 overflow-hidden">
|
||
{/* Fixed Header */}
|
||
<div className={`flex-shrink-0 grid gap-1 px-2 py-2 text-sm font-medium border-b items-center ${isDark ? 'border-white/10 text-white/60' : 'border-black/10 text-slate-500'}`} style={{ gridTemplateColumns: gridCols }}>
|
||
<div>{/* insert-triangle spacer */}</div>
|
||
<div className="flex items-center justify-center">
|
||
<input
|
||
type="checkbox"
|
||
checked={vocabulary.length > 0 && vocabulary.every(v => v.selected)}
|
||
onChange={toggleAllSelection}
|
||
className="w-4 h-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500 cursor-pointer"
|
||
title="Alle auswaehlen"
|
||
/>
|
||
</div>
|
||
<div>S.</div>
|
||
<div>Englisch</div>
|
||
<div>Deutsch</div>
|
||
<div>Beispiel</div>
|
||
{extras.map(col => (
|
||
<div key={col.key} className="flex items-center gap-1 group">
|
||
<span className="truncate">{col.label}</span>
|
||
<button
|
||
onClick={() => {
|
||
const page = Object.entries(pageExtraColumns).find(([, cols]) => cols.some(c => c.key === col.key))
|
||
if (page) removeExtraColumn(Number(page[0]), col.key)
|
||
}}
|
||
className={`opacity-0 group-hover:opacity-100 transition-opacity ${isDark ? 'text-red-400 hover:text-red-300' : 'text-red-500 hover:text-red-600'}`}
|
||
title="Spalte entfernen"
|
||
>
|
||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" /></svg>
|
||
</button>
|
||
</div>
|
||
))}
|
||
<div className="flex items-center justify-center">
|
||
<button
|
||
onClick={() => addExtraColumn(0)}
|
||
className={`p-0.5 rounded transition-colors ${isDark ? 'hover:bg-white/10 text-white/40 hover:text-white/70' : 'hover:bg-slate-200 text-slate-400 hover:text-slate-600'}`}
|
||
title="Spalte hinzufuegen"
|
||
>
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" /></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Scrollable Content */}
|
||
<div className="flex-1 overflow-y-auto">
|
||
{vocabulary.map((entry, index) => (
|
||
<React.Fragment key={entry.id}>
|
||
{/* Vocabulary row */}
|
||
<div className={`grid gap-1 px-2 py-1 items-center ${isDark ? 'hover:bg-white/5' : 'hover:bg-black/5'}`} style={{ gridTemplateColumns: gridCols }}>
|
||
{/* Insert triangle */}
|
||
<button
|
||
onClick={() => addVocabularyEntry(index)}
|
||
className={`w-3.5 h-3.5 flex items-center justify-center opacity-0 hover:opacity-100 transition-opacity ${isDark ? 'text-purple-400' : 'text-purple-500'}`}
|
||
title="Zeile einfuegen"
|
||
>
|
||
<svg className="w-2.5 h-2.5" viewBox="0 0 10 10" fill="currentColor"><polygon points="0,0 10,5 0,10" /></svg>
|
||
</button>
|
||
<div className="flex items-center justify-center">
|
||
<input
|
||
type="checkbox"
|
||
checked={entry.selected || false}
|
||
onChange={() => toggleVocabularySelection(entry.id)}
|
||
className="w-4 h-4 rounded border-gray-300 text-purple-600 focus:ring-purple-500 cursor-pointer"
|
||
/>
|
||
</div>
|
||
<div className={`flex items-center justify-center text-xs font-medium rounded ${isDark ? 'bg-white/10 text-white/60' : 'bg-black/10 text-slate-600'}`}>
|
||
{entry.source_page || '-'}
|
||
</div>
|
||
<input
|
||
type="text"
|
||
value={entry.english}
|
||
onChange={(e) => updateVocabularyEntry(entry.id, 'english', e.target.value)}
|
||
className={`px-2 py-1 rounded-lg border text-sm min-w-0 ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`}
|
||
/>
|
||
<input
|
||
type="text"
|
||
value={entry.german}
|
||
onChange={(e) => updateVocabularyEntry(entry.id, 'german', e.target.value)}
|
||
className={`px-2 py-1 rounded-lg border text-sm min-w-0 ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`}
|
||
/>
|
||
<input
|
||
type="text"
|
||
value={entry.example_sentence || ''}
|
||
onChange={(e) => updateVocabularyEntry(entry.id, 'example_sentence', e.target.value)}
|
||
placeholder="Beispiel"
|
||
className={`px-2 py-1 rounded-lg border text-sm min-w-0 ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`}
|
||
/>
|
||
{extras.map(col => (
|
||
<input
|
||
key={col.key}
|
||
type="text"
|
||
value={(entry.extras && entry.extras[col.key]) || ''}
|
||
onChange={(e) => updateVocabularyEntry(entry.id, col.key, e.target.value)}
|
||
placeholder={col.label}
|
||
className={`px-2 py-1 rounded-lg border text-sm min-w-0 ${glassInput} focus:outline-none focus:ring-1 focus:ring-purple-500`}
|
||
/>
|
||
))}
|
||
<button onClick={() => deleteVocabularyEntry(entry.id)} className={`p-1 rounded-lg ${isDark ? 'hover:bg-red-500/20 text-red-400' : 'hover:bg-red-100 text-red-500'}`}>
|
||
<svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
</React.Fragment>
|
||
))}
|
||
{/* Final insert triangle after last row */}
|
||
<div className="px-2 py-1">
|
||
<button
|
||
onClick={() => addVocabularyEntry()}
|
||
className={`w-3.5 h-3.5 flex items-center justify-center opacity-30 hover:opacity-100 transition-opacity ${isDark ? 'text-purple-400' : 'text-purple-500'}`}
|
||
title="Zeile am Ende einfuegen"
|
||
>
|
||
<svg className="w-2.5 h-2.5" viewBox="0 0 10 10" fill="currentColor"><polygon points="0,0 10,5 0,10" /></svg>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* Footer */}
|
||
<div className={`flex-shrink-0 pt-2 border-t flex items-center justify-between text-xs ${isDark ? 'border-white/10 text-white/50' : 'border-black/10 text-slate-400'}`}>
|
||
<span>
|
||
{vocabulary.length} Vokabeln
|
||
{vocabulary.filter(v => v.selected).length > 0 && ` (${vocabulary.filter(v => v.selected).length} ausgewaehlt)`}
|
||
{(() => {
|
||
const pages = [...new Set(vocabulary.map(v => v.source_page).filter(Boolean))].sort((a, b) => (a || 0) - (b || 0))
|
||
return pages.length > 1 ? ` • Seiten: ${pages.join(', ')}` : ''
|
||
})()}
|
||
</span>
|
||
<button
|
||
onClick={() => addVocabularyEntry()}
|
||
className={`px-3 py-1 rounded-lg text-xs flex items-center gap-1 transition-colors ${
|
||
isDark
|
||
? 'bg-white/10 hover:bg-white/20 text-white/70'
|
||
: 'bg-slate-100 hover:bg-slate-200 text-slate-600'
|
||
}`}
|
||
>
|
||
<svg className="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M12 4v16m8-8H4" />
|
||
</svg>
|
||
Zeile
|
||
</button>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)
|
||
})()}
|
||
|
||
{/* Worksheet Tab */}
|
||
{session && activeTab === 'worksheet' && (
|
||
<div className={`${glassCard} rounded-2xl p-6`}>
|
||
{/* Step 1: Format Selection */}
|
||
<div className="mb-8">
|
||
<h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
1. Vorlage waehlen
|
||
</h2>
|
||
<div className="grid grid-cols-2 gap-4">
|
||
{worksheetFormats.map((format) => (
|
||
<button
|
||
key={format.id}
|
||
onClick={() => setSelectedFormat(format.id)}
|
||
className={`p-5 rounded-xl border text-left transition-all ${
|
||
selectedFormat === format.id
|
||
? (isDark ? 'border-purple-400/50 bg-purple-500/20 ring-2 ring-purple-500/50' : 'border-purple-500 bg-purple-50 ring-2 ring-purple-500/30')
|
||
: (isDark ? 'border-white/20 hover:border-white/40' : 'border-slate-200 hover:border-slate-300')
|
||
}`}
|
||
>
|
||
<div className="flex items-start gap-3">
|
||
<div className={`w-10 h-10 rounded-lg flex items-center justify-center shrink-0 ${
|
||
selectedFormat === format.id
|
||
? (isDark ? 'bg-purple-500/30' : 'bg-purple-200')
|
||
: (isDark ? 'bg-white/10' : 'bg-slate-100')
|
||
}`}>
|
||
{format.id === 'standard' ? (
|
||
<svg className={`w-5 h-5 ${selectedFormat === format.id ? 'text-purple-400' : (isDark ? 'text-white/60' : 'text-slate-500')}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12h6m-6 4h6m2 5H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||
</svg>
|
||
) : (
|
||
<svg className={`w-5 h-5 ${selectedFormat === format.id ? 'text-purple-400' : (isDark ? 'text-white/60' : 'text-slate-500')}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M4 5a1 1 0 011-1h14a1 1 0 011 1v2a1 1 0 01-1 1H5a1 1 0 01-1-1V5zM4 13a1 1 0 011-1h6a1 1 0 011 1v6a1 1 0 01-1 1H5a1 1 0 01-1-1v-6zM16 13a1 1 0 011-1h2a1 1 0 011 1v6a1 1 0 01-1 1h-2a1 1 0 01-1-1v-6z" />
|
||
</svg>
|
||
)}
|
||
</div>
|
||
<div className="flex-1">
|
||
<div className="flex items-center justify-between">
|
||
<span className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{format.label}</span>
|
||
{selectedFormat === format.id && (
|
||
<svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
)}
|
||
</div>
|
||
<p className={`text-sm mt-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>{format.description}</p>
|
||
</div>
|
||
</div>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* Step 2: Configuration based on format */}
|
||
<div className="mb-6">
|
||
<h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
2. Arbeitsblatt konfigurieren
|
||
</h2>
|
||
|
||
{/* Title (for both formats) */}
|
||
<div className="mb-6">
|
||
<label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Titel</label>
|
||
<input
|
||
type="text"
|
||
value={worksheetTitle}
|
||
onChange={(e) => setWorksheetTitle(e.target.value)}
|
||
placeholder="z.B. Vokabeln Unit 3"
|
||
className={`w-full px-4 py-3 rounded-xl border ${glassInput} focus:outline-none focus:ring-2 focus:ring-purple-500`}
|
||
/>
|
||
</div>
|
||
|
||
{/* Standard format options */}
|
||
{selectedFormat === 'standard' && (
|
||
<>
|
||
<div className="mb-6">
|
||
<label className={`block text-sm font-medium mb-3 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Arbeitsblatt-Typen</label>
|
||
<div className="grid grid-cols-2 gap-3">
|
||
{worksheetTypes.map((type) => (
|
||
<button
|
||
key={type.id}
|
||
onClick={() => toggleWorksheetType(type.id)}
|
||
className={`p-4 rounded-xl border text-left transition-all ${
|
||
selectedTypes.includes(type.id)
|
||
? (isDark ? 'border-purple-400/50 bg-purple-500/20' : 'border-purple-500 bg-purple-50')
|
||
: (isDark ? 'border-white/20 hover:border-white/40' : 'border-slate-200 hover:border-slate-300')
|
||
}`}
|
||
>
|
||
<div className="flex items-center justify-between">
|
||
<span className={`font-medium ${isDark ? 'text-white' : 'text-slate-900'}`}>{type.label}</span>
|
||
{selectedTypes.includes(type.id) && <svg className="w-5 h-5 text-purple-500" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" /></svg>}
|
||
</div>
|
||
<p className={`text-sm mt-1 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>{type.description}</p>
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-6 mb-6">
|
||
<div>
|
||
<label className={`block text-sm font-medium mb-2 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Zeilenhoehe</label>
|
||
<select value={lineHeight} onChange={(e) => setLineHeight(e.target.value)} className={`w-full px-4 py-3 rounded-xl border ${glassInput} focus:outline-none focus:ring-2 focus:ring-purple-500`}>
|
||
<option value="normal">Normal</option>
|
||
<option value="large">Gross</option>
|
||
<option value="extra-large">Extra gross</option>
|
||
</select>
|
||
</div>
|
||
<div className="flex items-center">
|
||
<label className={`flex items-center gap-3 cursor-pointer ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
<input type="checkbox" checked={includeSolutions} onChange={(e) => setIncludeSolutions(e.target.checked)} className="w-5 h-5 rounded border-2 border-purple-500 text-purple-500 focus:ring-purple-500" />
|
||
<span>Loesungsblatt erstellen</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</>
|
||
)}
|
||
|
||
{/* NRU format options */}
|
||
{selectedFormat === 'nru' && (
|
||
<div className="space-y-4">
|
||
<div className={`p-4 rounded-xl ${isDark ? 'bg-indigo-500/20 border border-indigo-500/30' : 'bg-indigo-50 border border-indigo-200'}`}>
|
||
<h4 className={`font-medium mb-2 ${isDark ? 'text-indigo-200' : 'text-indigo-700'}`}>NRU-Format Uebersicht:</h4>
|
||
<ul className={`text-sm space-y-1 ${isDark ? 'text-indigo-200/80' : 'text-indigo-600'}`}>
|
||
<li>• <strong>Vokabeln:</strong> 3-Spalten-Tabelle (Englisch | Deutsch leer | Korrektur leer)</li>
|
||
<li>• <strong>Lernsaetze:</strong> Deutscher Satz + 2 leere Zeilen fuer englische Uebersetzung</li>
|
||
<li>• Pro gescannter Seite werden 2 Arbeitsblatt-Seiten erzeugt</li>
|
||
</ul>
|
||
</div>
|
||
|
||
<div className="flex items-center">
|
||
<label className={`flex items-center gap-3 cursor-pointer ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
<input type="checkbox" checked={includeSolutions} onChange={(e) => setIncludeSolutions(e.target.checked)} className="w-5 h-5 rounded border-2 border-purple-500 text-purple-500 focus:ring-purple-500" />
|
||
<span>Loesungsblatt erstellen (mit deutschen Uebersetzungen)</span>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* OCR display options */}
|
||
<div className={`p-4 rounded-xl border ${isDark ? 'bg-white/5 border-white/10' : 'bg-gray-50 border-gray-200'} space-y-3`}>
|
||
<h4 className={`text-sm font-medium ${isDark ? 'text-white/70' : 'text-slate-600'}`}>Anzeigeoptionen</h4>
|
||
<div className="flex flex-col gap-2">
|
||
<label className={`flex items-center gap-3 cursor-pointer ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
<input type="checkbox" checked={showIpa} onChange={(e) => setShowIpa(e.target.checked)} className="w-5 h-5 rounded border-2 border-purple-500 text-purple-500 focus:ring-purple-500" />
|
||
<div>
|
||
<span>Lautschrift (IPA) anzeigen</span>
|
||
<p className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>z.B. achieve [əˈtʃiːv]</p>
|
||
</div>
|
||
</label>
|
||
<label className={`flex items-center gap-3 cursor-pointer ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
<input type="checkbox" checked={showSyllables} onChange={(e) => setShowSyllables(e.target.checked)} className="w-5 h-5 rounded border-2 border-purple-500 text-purple-500 focus:ring-purple-500" />
|
||
<div>
|
||
<span>Silbentrennung anzeigen</span>
|
||
<p className={`text-xs ${isDark ? 'text-white/40' : 'text-slate-400'}`}>z.B. Schmet|ter|ling</p>
|
||
</div>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
|
||
<button
|
||
onClick={generateWorksheet}
|
||
disabled={(selectedFormat === 'standard' && selectedTypes.length === 0) || isGenerating}
|
||
className="w-full py-4 bg-gradient-to-r from-purple-500 to-pink-500 text-white rounded-xl font-semibold disabled:opacity-50 hover:shadow-xl hover:shadow-purple-500/30 transition-all"
|
||
>
|
||
{isGenerating ? 'Generiere PDF...' : `${selectedFormat === 'nru' ? 'NRU-Arbeitsblatt' : 'Arbeitsblatt'} generieren`}
|
||
</button>
|
||
</div>
|
||
)}
|
||
|
||
{/* Export Tab */}
|
||
{session && activeTab === 'export' && (
|
||
<div className={`${glassCard} rounded-2xl p-6`}>
|
||
<h2 className={`text-lg font-semibold mb-4 ${isDark ? 'text-white' : 'text-slate-900'}`}>PDF herunterladen</h2>
|
||
|
||
{worksheetId ? (
|
||
<div className="space-y-4">
|
||
<div className={`p-4 rounded-xl ${isDark ? 'bg-green-500/20 border border-green-500/30' : 'bg-green-100 border border-green-200'}`}>
|
||
<div className="flex items-center gap-3">
|
||
<svg className="w-6 h-6 text-green-500" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M5 13l4 4L19 7" />
|
||
</svg>
|
||
<span className={`font-medium ${isDark ? 'text-green-200' : 'text-green-700'}`}>Arbeitsblatt erfolgreich generiert!</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="grid grid-cols-2 gap-4">
|
||
<button onClick={() => downloadPDF('worksheet')} className={`${glassCard} p-6 rounded-xl text-left transition-all hover:shadow-lg ${isDark ? 'hover:border-purple-400/50' : 'hover:border-purple-500'}`}>
|
||
<div className={`w-12 h-12 mb-3 rounded-xl flex items-center justify-center ${isDark ? 'bg-purple-500/30' : 'bg-purple-100'}`}>
|
||
<svg className={`w-6 h-6 ${isDark ? 'text-purple-300' : 'text-purple-600'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M12 10v6m0 0l-3-3m3 3l3-3m2 8H7a2 2 0 01-2-2V5a2 2 0 012-2h5.586a1 1 0 01.707.293l5.414 5.414a1 1 0 01.293.707V19a2 2 0 01-2 2z" />
|
||
</svg>
|
||
</div>
|
||
<h3 className={`font-semibold mb-1 ${isDark ? 'text-white' : 'text-slate-900'}`}>Arbeitsblatt</h3>
|
||
<p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>PDF zum Ausdrucken</p>
|
||
</button>
|
||
|
||
{includeSolutions && (
|
||
<button onClick={() => downloadPDF('solution')} className={`${glassCard} p-6 rounded-xl text-left transition-all hover:shadow-lg ${isDark ? 'hover:border-green-400/50' : 'hover:border-green-500'}`}>
|
||
<div className={`w-12 h-12 mb-3 rounded-xl flex items-center justify-center ${isDark ? 'bg-green-500/30' : 'bg-green-100'}`}>
|
||
<svg className={`w-6 h-6 ${isDark ? 'text-green-300' : 'text-green-600'}`} fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={1.5} d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z" />
|
||
</svg>
|
||
</div>
|
||
<h3 className={`font-semibold mb-1 ${isDark ? 'text-white' : 'text-slate-900'}`}>Loesungsblatt</h3>
|
||
<p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>PDF mit Loesungen</p>
|
||
</button>
|
||
)}
|
||
</div>
|
||
|
||
<button onClick={resetSession} className={`w-full py-3 rounded-xl border font-medium transition-colors ${isDark ? 'border-white/20 text-white/80 hover:bg-white/10' : 'border-slate-300 text-slate-700 hover:bg-slate-50'}`}>
|
||
Neues Arbeitsblatt erstellen
|
||
</button>
|
||
</div>
|
||
) : (
|
||
<p className={`text-center py-12 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>Noch kein Arbeitsblatt generiert.</p>
|
||
)}
|
||
</div>
|
||
)}
|
||
|
||
{/* Tab Navigation (when session exists) */}
|
||
{session && activeTab !== 'pages' && (
|
||
<div className={`mt-6 border-t pt-4 ${isDark ? 'border-white/10' : 'border-black/5'}`}>
|
||
<div className="flex justify-center gap-2">
|
||
{['vocabulary', 'worksheet', 'export'].map((tab) => (
|
||
<button
|
||
key={tab}
|
||
onClick={() => setActiveTab(tab as TabId)}
|
||
className={`px-4 py-2 rounded-xl text-sm font-medium transition-all ${
|
||
activeTab === tab
|
||
? 'bg-gradient-to-r from-purple-500 to-pink-500 text-white shadow-lg'
|
||
: (isDark ? 'bg-white/10 text-white/80 hover:bg-white/20' : 'bg-slate-100 text-slate-700 hover:bg-slate-200')
|
||
}`}
|
||
>
|
||
{tab === 'vocabulary' ? 'Vokabeln' : tab === 'worksheet' ? 'Arbeitsblatt' : 'Export'}
|
||
</button>
|
||
))}
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
|
||
{/* Fullscreen Preview Modal */}
|
||
{showFullPreview && (
|
||
<div className="fixed inset-0 z-50 bg-black/80 backdrop-blur-sm flex items-center justify-center" onClick={() => setShowFullPreview(false)}>
|
||
<button
|
||
onClick={() => setShowFullPreview(false)}
|
||
className="absolute top-4 right-4 p-2 rounded-full bg-white/10 hover:bg-white/20 text-white z-10 transition-colors"
|
||
>
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
<div className="max-w-[95vw] max-h-[95vh] overflow-auto" onClick={(e) => e.stopPropagation()}>
|
||
{directFile?.type.startsWith('image/') && directFilePreview && (
|
||
<img src={directFilePreview} alt="Original" className="max-w-none" />
|
||
)}
|
||
{directFile?.type === 'application/pdf' && directFilePreview && (
|
||
<iframe src={directFilePreview} className="border-0 rounded-xl bg-white" style={{ width: '90vw', height: '90vh' }} />
|
||
)}
|
||
{selectedMobileFile && !directFile && (
|
||
selectedMobileFile.type.startsWith('image/')
|
||
? <img src={selectedMobileFile.dataUrl} alt="Original" className="max-w-none" />
|
||
: <iframe src={selectedMobileFile.dataUrl} className="border-0 rounded-xl bg-white" style={{ width: '90vw', height: '90vh' }} />
|
||
)}
|
||
{selectedDocumentId && !directFile && !selectedMobileFile && (() => {
|
||
const doc = storedDocuments.find(d => d.id === selectedDocumentId)
|
||
if (!doc?.url) return null
|
||
return doc.type.startsWith('image/')
|
||
? <img src={doc.url} alt="Original" className="max-w-none" />
|
||
: <iframe src={doc.url} className="border-0 rounded-xl bg-white" style={{ width: '90vw', height: '90vh' }} />
|
||
})()}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* QR Code Modal */}
|
||
{showQRModal && (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4">
|
||
<div className="absolute inset-0 bg-black/50 backdrop-blur-sm" onClick={() => setShowQRModal(false)} />
|
||
<div className={`relative w-full max-w-md rounded-3xl ${
|
||
isDark ? 'bg-slate-900' : 'bg-white'
|
||
}`}>
|
||
<QRCodeUpload
|
||
sessionId={uploadSessionId}
|
||
onClose={() => setShowQRModal(false)}
|
||
onFilesChanged={(files) => {
|
||
setMobileUploadedFiles(files)
|
||
if (files.length > 0) {
|
||
// Always select the latest uploaded file
|
||
setSelectedMobileFile(files[files.length - 1])
|
||
setDirectFile(null)
|
||
setSelectedDocumentId(null)
|
||
}
|
||
}}
|
||
/>
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* OCR Comparison Modal */}
|
||
{showOcrComparison && (
|
||
<div className="fixed inset-0 z-50 flex items-center justify-center p-4 bg-black/50 backdrop-blur-sm">
|
||
<div className={`relative w-full max-w-6xl max-h-[90vh] overflow-auto rounded-3xl ${glassCard} p-6`}>
|
||
{/* Header */}
|
||
<div className="flex items-center justify-between mb-6">
|
||
<div>
|
||
<h2 className={`text-xl font-bold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
OCR-Methoden Vergleich
|
||
</h2>
|
||
<p className={`text-sm ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||
Seite {ocrComparePageIndex !== null ? ocrComparePageIndex + 1 : '-'}
|
||
</p>
|
||
</div>
|
||
<button
|
||
onClick={() => setShowOcrComparison(false)}
|
||
className={`p-2 rounded-xl ${isDark ? 'hover:bg-white/10 text-white' : 'hover:bg-black/5 text-slate-500'}`}
|
||
>
|
||
<svg className="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
||
<path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
|
||
</svg>
|
||
</button>
|
||
</div>
|
||
|
||
{/* Loading State */}
|
||
{isComparingOcr && (
|
||
<div className="flex flex-col items-center justify-center py-12">
|
||
<div className="w-12 h-12 border-4 border-purple-500 border-t-transparent rounded-full animate-spin mb-4" />
|
||
<p className={isDark ? 'text-white/60' : 'text-slate-500'}>
|
||
Vergleiche OCR-Methoden... (kann 1-2 Minuten dauern)
|
||
</p>
|
||
</div>
|
||
)}
|
||
|
||
{/* Error State */}
|
||
{ocrCompareError && (
|
||
<div className={`p-4 rounded-xl ${isDark ? 'bg-red-500/20 text-red-300' : 'bg-red-100 text-red-700'}`}>
|
||
Fehler: {ocrCompareError}
|
||
</div>
|
||
)}
|
||
|
||
{/* Results */}
|
||
{ocrCompareResult && !isComparingOcr && (
|
||
<div className="space-y-6">
|
||
{/* Method Results Grid */}
|
||
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
|
||
{Object.entries(ocrCompareResult.methods || {}).map(([key, method]: [string, any]) => (
|
||
<div
|
||
key={key}
|
||
className={`p-4 rounded-2xl ${
|
||
ocrCompareResult.recommendation?.best_method === key
|
||
? (isDark ? 'bg-green-500/20 border border-green-500/50' : 'bg-green-100 border border-green-300')
|
||
: (isDark ? 'bg-white/5 border border-white/10' : 'bg-white/50 border border-black/10')
|
||
}`}
|
||
>
|
||
<div className="flex items-center justify-between mb-3">
|
||
<h3 className={`font-semibold ${isDark ? 'text-white' : 'text-slate-900'}`}>
|
||
{method.name}
|
||
</h3>
|
||
{ocrCompareResult.recommendation?.best_method === key && (
|
||
<span className="px-2 py-1 text-xs font-medium bg-green-500 text-white rounded-full">
|
||
Beste
|
||
</span>
|
||
)}
|
||
</div>
|
||
|
||
{method.success ? (
|
||
<>
|
||
<div className={`text-sm mb-2 ${isDark ? 'text-white/60' : 'text-slate-500'}`}>
|
||
<span className="font-medium">{method.vocabulary_count}</span> Vokabeln in <span className="font-medium">{method.duration_seconds}s</span>
|
||
</div>
|
||
|
||
{method.vocabulary && method.vocabulary.length > 0 && (
|
||
<div className={`max-h-48 overflow-y-auto rounded-xl p-2 ${isDark ? 'bg-black/20' : 'bg-white/50'}`}>
|
||
{method.vocabulary.slice(0, 10).map((v: any, idx: number) => (
|
||
<div key={idx} className={`text-sm py-1 border-b last:border-0 ${isDark ? 'border-white/10 text-white/80' : 'border-black/5 text-slate-700'}`}>
|
||
<span className="font-medium">{v.english}</span> = {v.german}
|
||
</div>
|
||
))}
|
||
{method.vocabulary.length > 10 && (
|
||
<div className={`text-xs mt-2 ${isDark ? 'text-white/40' : 'text-slate-400'}`}>
|
||
+ {method.vocabulary.length - 10} weitere...
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</>
|
||
) : (
|
||
<div className={`text-sm ${isDark ? 'text-red-300' : 'text-red-600'}`}>
|
||
{method.error || 'Fehler'}
|
||
</div>
|
||
)}
|
||
</div>
|
||
))}
|
||
</div>
|
||
|
||
{/* Comparison Summary */}
|
||
{ocrCompareResult.comparison && (
|
||
<div className={`p-4 rounded-2xl ${isDark ? 'bg-blue-500/20 border border-blue-500/30' : 'bg-blue-100 border border-blue-200'}`}>
|
||
<h3 className={`font-semibold mb-3 ${isDark ? 'text-blue-300' : 'text-blue-900'}`}>
|
||
Uebereinstimmung
|
||
</h3>
|
||
<div className="grid grid-cols-2 md:grid-cols-4 gap-4 text-sm">
|
||
<div>
|
||
<span className={isDark ? 'text-blue-200' : 'text-blue-700'}>Von allen erkannt:</span>
|
||
<span className="ml-2 font-bold">{ocrCompareResult.comparison.found_by_all_methods?.length || 0}</span>
|
||
</div>
|
||
<div>
|
||
<span className={isDark ? 'text-blue-200' : 'text-blue-700'}>Nur teilweise:</span>
|
||
<span className="ml-2 font-bold">{ocrCompareResult.comparison.found_by_some_methods?.length || 0}</span>
|
||
</div>
|
||
<div>
|
||
<span className={isDark ? 'text-blue-200' : 'text-blue-700'}>Gesamt einzigartig:</span>
|
||
<span className="ml-2 font-bold">{ocrCompareResult.comparison.total_unique_vocabulary || 0}</span>
|
||
</div>
|
||
<div>
|
||
<span className={isDark ? 'text-blue-200' : 'text-blue-700'}>Uebereinstimmung:</span>
|
||
<span className="ml-2 font-bold">{Math.round((ocrCompareResult.comparison.agreement_rate || 0) * 100)}%</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
)}
|
||
</div>
|
||
)}
|
||
</div>
|
||
</div>
|
||
)}
|
||
|
||
{/* CSS for animations */}
|
||
<style jsx>{`
|
||
@keyframes blob {
|
||
0% { transform: translate(0px, 0px) scale(1); }
|
||
33% { transform: translate(30px, -50px) scale(1.1); }
|
||
66% { transform: translate(-20px, 20px) scale(0.9); }
|
||
100% { transform: translate(0px, 0px) scale(1); }
|
||
}
|
||
.animate-blob {
|
||
animation: blob 7s infinite;
|
||
}
|
||
.animation-delay-2000 {
|
||
animation-delay: 2s;
|
||
}
|
||
.animation-delay-4000 {
|
||
animation-delay: 4s;
|
||
}
|
||
`}</style>
|
||
</div>
|
||
</div>
|
||
)
|
||
}
|