add I18n

frontend/package.json

@@ -36,10 +36,14 @@
     "codemirror": "^6.0.1",
     "copy-to-clipboard": "^3.3.3",
     "html2canvas": "^1.4.1",
+    "i18next": "^23.13.0",
+    "i18next-browser-languagedetector": "^8.0.0",
+    "i18next-http-backend": "^2.5.2",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
     "react-hot-toast": "^2.4.1",
+    "react-i18next": "^15.0.1",
     "react-icons": "^4.12.0",
     "react-router-dom": "^6.20.1",
     "tailwind-merge": "^2.0.0",

frontend/public/locales/de/translation.json

@@ -0,0 +1,145 @@
+{
+    "app": {
+      "title": "Screenshot zu Code",
+      "errors": {
+        "emptyInstruction": "Bitte geben Sie Anweisungen für die KI zur Aktualisierung an.",
+        "noCurrentVersion": "Keine aktuelle Version festgelegt. Kontaktieren Sie den Support oder öffnen Sie ein GitHub-Issue.",
+        "invalidHistory": "Ungültige Versionsverlauf. Dies sollte nicht passieren. Bitte kontaktieren Sie den Support oder öffnen Sie ein GitHub-Issue."
+      }
+    },
+    "history": {
+      "versions": "Versionen",
+      "toggle": "Umschalten",
+      "fullPrompt": "Vollständige Eingabeaufforderung",
+      "create": "Erstellen",
+      "edit": "Bearbeiten",
+      "importedFromCode": "Aus Code importiert"
+    },
+    "messages": {
+      "deprecationMessage": "Wir unterstützen dieses Modell nicht mehr. Stattdessen wird die Codegenerierung GPT-4o oder Claude Sonnet 3.5 verwenden, die zwei modernsten Modelle.",
+      "onboardingNote": {
+        "intro": "Um Screenshot zu Code zu nutzen,",
+        "buyCredits": "kaufen Sie Credits (100 Generierungen für $36)",
+        "orUseKey": "oder verwenden Sie Ihren eigenen OpenAI API-Schlüssel mit GPT4-Vision-Zugang.",
+        "followInstructions": "Folgen Sie diesen Anweisungen, um einen Schlüssel zu erhalten.",
+        "pasteKey": "und fügen Sie ihn in den Einstellungen-Dialog ein (Zahnrad-Symbol oben). Ihr Schlüssel wird nur in Ihrem Browser gespeichert. Niemals auf unseren Servern."
+      },
+      "picoBadge": {
+        "featureRequests": "Feature-Wünsche?",
+        "openSourceProject": "ein Open-Source-Projekt von Pico"
+      },
+      "tipLink": {
+        "text": "Tipps für bessere Ergebnisse"
+      }
+    },
+    "preview": {
+      "codeTab": {
+        "copyCode": "Code kopieren",
+        "openIn": "Öffnen in",
+        "codeCopied": "In die Zwischenablage kopiert"
+      },
+      "pane": {
+        "reset": "Zurücksetzen",
+        "download": "Herunterladen",
+        "desktop": "Desktop",
+        "mobile": "Mobil",
+        "code": "Code"
+      }
+    },
+    "recording": {
+      "start": "Bildschirm aufnehmen",
+      "inProgress": "Aufnahme läuft...",
+      "finish": "Aufnahme beenden",
+      "captured": "Bildschirmaufnahme erfasst.",
+      "reRecord": "Erneut aufnehmen",
+      "generate": "Generieren",
+      "errorStarting": "Bildschirmaufnahme konnte nicht gestartet werden",
+      "noDataError": "Bildschirmaufnahme existiert nicht. Bitte versuchen Sie es erneut."
+    },
+    "sidebar": {
+      "videoGenerationWarning": "Die Codegenerierung aus Videos kann 3-4 Minuten dauern. Wir machen mehrere Durchläufe, um das beste Ergebnis zu erzielen. Bitte haben Sie Geduld.",
+      "cancel": "Abbrechen",
+      "updateInstructionPlaceholder": "Sagen Sie der KI, was geändert werden soll...",
+      "includeScreenshot": "Screenshot der aktuellen Version einschließen?",
+      "update": "Aktualisieren",
+      "regenerate": "Neu generieren",
+      "referenceImageAlt": "Referenz",
+      "originalVideo": "Originalvideo",
+      "originalScreenshot": "Original-Screenshot",
+      "console": "Konsole"
+    },
+    "selectAndEdit": {
+      "editPopup": {
+        "placeholder": "Sagen Sie der KI, was an diesem Element geändert werden soll...",
+        "update": "Aktualisieren"
+      },
+      "selectAndEdit": {
+        "exitMode": "Auswahlmodus beenden",
+        "enterMode": "Auswählen und aktualisieren"
+      }
+    },
+    "setting": {
+      "title": "Einstellungen",
+      "dallePlaceholder": "DALL-E Platzhalter-Bildgenerierung",
+      "dallePlaceholderDescription": "Mehr Spaß damit, aber wenn Sie Geld sparen möchten, schalten Sie es aus.",
+      "openAIApiKey": "OpenAI API-Schlüssel",
+      "apiKeyDescription": "Nur in Ihrem Browser gespeichert. Niemals auf Servern gespeichert. Überschreibt Ihre .env-Konfiguration.",
+      "openAIApiKeyPlaceholder": "OpenAI API-Schlüssel",
+      "openAIBaseURL": "OpenAI Basis-URL (optional)",
+      "openAIBaseURLDescription": "Ersetzen Sie durch eine Proxy-URL, wenn Sie die Standardeinstellung nicht verwenden möchten.",
+      "openAIBaseURLPlaceholder": "OpenAI Basis-URL",
+      "anthropicApiKey": "Anthropic API-Schlüssel",
+      "anthropicApiKeyPlaceholder": "Anthropic API-Schlüssel",
+      "language": "Sprache",
+      "screenshotConfig": "Screenshot-Konfiguration per URL",
+      "screenshotDescription": "Wenn Sie URLs direkt verwenden möchten, anstatt selbst Screenshots zu machen, fügen Sie einen ScreenshotOne API-Schlüssel hinzu.",
+      "getFreeScreenshots": "Erhalten Sie 100 Screenshots/Monat kostenlos.",
+      "screenshotApiKeyPlaceholder": "ScreenshotOne API-Schlüssel",
+      "themeSettings": "Theme-Einstellungen",
+      "appTheme": "App-Theme",
+      "toggleDarkMode": "Dunkelmodus umschalten",
+      "codeEditorTheme": "Code-Editor-Theme - erfordert Seitenaktualisierung zur Aktualisierung",
+      "save": "Speichern",
+      "aiModel": "KI-Modell:",
+      "beta": "Beta",
+      "generating": "Generierung:"
+    },
+    "imageUpload": {
+      "dragDropPrompt": "Screenshot hier per Drag & Drop ablegen, \n oder klicken Sie zum Hochladen",
+      "new": "Neu!",
+      "uploadPrompt": "Laden Sie eine Bildschirmaufnahme (.mp4, .mov) hoch oder nehmen Sie Ihren Bildschirm auf, um eine ganze App zu klonen (experimentell).",
+      "learnMore": "Erfahren Sie mehr.",
+      "errorReading": "Fehler beim Lesen der Dateien: "
+    },
+    "importCode": {
+      "buttonText": "Aus Code importieren",
+      "dialogTitle": "Fügen Sie Ihren HTML-Code ein",
+      "dialogDescription": "Stellen Sie sicher, dass der zu importierende Code gültiges HTML ist.",
+      "textareaPlaceholder": "Fügen Sie Ihren HTML-Code hier ein...",
+      "stackLabel": "Stack:",
+      "importButton": "Importieren",
+      "errorEmptyCode": "Bitte fügen Sie Code ein",
+      "errorNoStack": "Bitte wählen Sie Ihren Stack aus"
+    },
+    "termsOfService": {
+      "title": "Geben Sie Ihre E-Mail-Adresse ein, um zu beginnen",
+      "emailPlaceholder": "E-Mail",
+      "consentText": "Durch die Angabe Ihrer E-Mail-Adresse stimmen Sie dem Erhalt gelegentlicher Produkt-Updates zu und akzeptieren die",
+      "termsLink": "Nutzungsbedingungen",
+      "localRunText": "Möchten Sie es lieber lokal ausführen? Dieses Projekt ist Open Source.",
+      "githubLink": "Laden Sie den Code herunter und beginnen Sie auf Github.",
+      "emailError": "Bitte geben Sie Ihre E-Mail-Adresse ein",
+      "agreeButton": "Zustimmen & Fortfahren",
+      "usageText": "Designer und Ingenieure dieser Organisationen verwenden Screenshot zu Code, um Schnittstellen schneller zu erstellen."
+    },
+    "urlInput": {
+      "errorNoApiKey": "Bitte fügen Sie einen ScreenshotOne API-Schlüssel in den Einstellungen-Dialog hinzu. Dies ist optional - Sie können auch Bilder direkt per Drag & Drop hochladen.",
+      "errorNoUrl": "Bitte geben Sie eine URL ein",
+      "errorCapture": "Screenshot konnte nicht erfasst werden",
+      "errorCaptureDetails": "Screenshot konnte nicht erfasst werden. Schauen Sie in die Konsole und Ihre Backend-Logs für weitere Details.",
+      "orScreenshot": "Oder Screenshot einer URL...",
+      "enterUrl": "URL eingeben",
+      "capturing": "Erfassung läuft...",
+      "capture": "Erfassen"
+    }
+  }

frontend/public/locales/en/translation.json

@@ -0,0 +1,145 @@
+{
+  "app": {
+    "title": "Screenshot to Code",
+    "errors": {
+      "emptyInstruction": "Please include some instructions for AI on what to update.",
+      "noCurrentVersion": "No current version set. Contact support or open a Github issue.",
+      "invalidHistory": "Version history is invalid. This shouldn't happen. Please contact support or open a Github issue."
+    }
+  },
+  "history": {
+    "versions": "Versions",
+    "toggle": "Toggle",
+    "fullPrompt": "Full prompt",
+    "create": "Create",
+    "edit": "Edit",
+    "importedFromCode": "Imported from code"
+  },
+  "messages": {
+    "deprecationMessage": "We no longer support this model. Instead, code generation will use GPT-4o or Claude Sonnet 3.5, the 2 state-of-the-art models.",
+    "onboardingNote": {
+      "intro": "To use Screenshot to Code,",
+      "buyCredits": "buy some credits (100 generations for $36)",
+      "orUseKey": "or use your own OpenAI API key with GPT4 vision access.",
+      "followInstructions": "Follow these instructions to get yourself a key.",
+      "pasteKey": "and paste it in the Settings dialog (gear icon above). Your key is only stored in your browser. Never stored on our servers."
+    },
+    "picoBadge": {
+      "featureRequests": "feature requests?",
+      "openSourceProject": "an open source project by Pico"
+    },
+    "tipLink": {
+      "text": "Tips for better results"
+    }
+  },
+  "preview": {
+    "codeTab": {
+      "copyCode": "Copy Code",
+      "openIn": "Open in",
+      "codeCopied": "Copied to clipboard"
+    },
+    "pane": {
+      "reset": "Reset",
+      "download": "Download",
+      "desktop": "Desktop",
+      "mobile": "Mobile",
+      "code": "Code"
+    }
+  },
+  "recording": {
+    "start": "Record Screen",
+    "inProgress": "Recording...",
+    "finish": "Finish Recording",
+    "captured": "Screen Recording Captured.",
+    "reRecord": "Re-record",
+    "generate": "Generate",
+    "errorStarting": "Could not start screen recording",
+    "noDataError": "Screen recording does not exist. Please try again."
+  },
+  "sidebar": {
+    "videoGenerationWarning": "Code generation from videos can take 3-4 minutes. We do multiple passes to get the best result. Please be patient.",
+    "cancel": "Cancel",
+    "updateInstructionPlaceholder": "Tell the AI what to change...",
+    "includeScreenshot": "Include screenshot of current version?",
+    "update": "Update",
+    "regenerate": "Regenerate",
+    "referenceImageAlt": "Reference",
+    "originalVideo": "Original Video",
+    "originalScreenshot": "Original Screenshot",
+    "console": "Console"
+  },
+  "selectAndEdit": {
+    "editPopup": {
+      "placeholder": "Tell the AI what to change about this element...",
+      "update": "Update"
+    },
+    "selectAndEdit": {
+      "exitMode": "Exit selection mode",
+      "enterMode": "Select and update"
+    }
+  },
+  "setting": {
+    "title": "Settings",
+    "dallePlaceholder": "DALL-E Placeholder Image Generation",
+    "dallePlaceholderDescription": "More fun with it but if you want to save money, turn it off.",
+    "openAIApiKey": "OpenAI API key",
+    "apiKeyDescription": "Only stored in your browser. Never stored on servers. Overrides your .env config.",
+    "openAIApiKeyPlaceholder": "OpenAI API key",
+    "openAIBaseURL": "OpenAI Base URL (optional)",
+    "openAIBaseURLDescription": "Replace with a proxy URL if you don't want to use the default.",
+    "openAIBaseURLPlaceholder": "OpenAI Base URL",
+    "anthropicApiKey": "Anthropic API key",
+    "anthropicApiKeyPlaceholder": "Anthropic API key",
+    "language": "Language",
+    "screenshotConfig": "Screenshot by URL Config",
+    "screenshotDescription": "If you want to use URLs directly instead of taking the screenshot yourself, add a ScreenshotOne API key.",
+    "getFreeScreenshots": "Get 100 screenshots/mo for free.",
+    "screenshotApiKeyPlaceholder": "ScreenshotOne API key",
+    "themeSettings": "Theme Settings",
+    "appTheme": "App Theme",
+    "toggleDarkMode": "Toggle dark mode",
+    "codeEditorTheme": "Code Editor Theme - requires page refresh to update",
+    "save": "Save",
+    "aiModel": "AI Model:",
+    "beta": "Beta",
+    "generating": "Generating:"
+  },
+  "imageUpload": {
+    "dragDropPrompt": "Drag & drop a screenshot here, \n or click to upload",
+    "new": "New!",
+    "uploadPrompt": "Upload a screen recording (.mp4, .mov) or record your screen to clone a whole app (experimental).",
+    "learnMore": "Learn more.",
+    "errorReading": "Error reading files: "
+  },
+  "importCode": {
+    "buttonText": "Import from Code",
+    "dialogTitle": "Paste in your HTML code",
+    "dialogDescription": "Make sure that the code you're importing is valid HTML.",
+    "textareaPlaceholder": "Paste your HTML code here...",
+    "stackLabel": "Stack:",
+    "importButton": "Import",
+    "errorEmptyCode": "Please paste in some code",
+    "errorNoStack": "Please select your stack"
+  },
+  "termsOfService": {
+    "title": "Enter your email to get started",
+    "emailPlaceholder": "Email",
+    "consentText": "By providing your email, you consent to receiving occasional product updates, and you accept the",
+    "termsLink": "terms of service",
+    "localRunText": "Prefer to run it yourself locally? This project is open source.",
+    "githubLink": "Download the code and get started on Github.",
+    "emailError": "Please enter your email",
+    "agreeButton": "Agree & Continue",
+    "usageText": "Designers and engineers from these organizations use Screenshot to Code to build interfaces faster."
+  },
+  "urlInput": {
+    "errorNoApiKey": "Please add a ScreenshotOne API key in the Settings dialog. This is optional - you can also drag/drop and upload images directly.",
+    "errorNoUrl": "Please enter a URL",
+    "errorCapture": "Failed to capture screenshot",
+    "errorCaptureDetails": "Failed to capture screenshot. Look at the console and your backend logs for more details.",
+    "orScreenshot": "Or screenshot a URL...",
+    "enterUrl": "Enter URL",
+    "capturing": "Capturing...",
+    "capture": "Capture"
+  }
+}