Manifest V3 Chrome Side Panel translator for English to Moroccan Darija
# Darija Side Panel Translator 🇲🇦
An LLM-powered translation system that translates English text into Moroccan Arabic Dialect (Darija). The project features a robust Spring Boot RESTful API backend integrated with any OpenAI-compatible LLM API (configured for Groq by default using the free `llama-3.3-70b-versatile` model), and multiple client applications: a Chrome Extension (Manifest V3), a PHP client, a Python client, and a React Native mobile client.
---
## Technical Architecture & UML Diagrams
### 1. Deployment Diagram
Illustrates the physical nodes of the system, showcasing client-server communication using Spring Security Basic Authentication and the backend communicating with the external LLM API (Groq, OpenAI, etc.).
```mermaid
graph TD
subgraph Clients [Client Layer]
CE["Chrome Extension (Manifest V3)"]
PHPC["PHP Client"]
PYC["Python CLI Client"]
MNC["React Native Mobile Client (Expo)"]
end
subgraph BackendHost [Deployment Environment / Docker Container]
SB["Spring Boot REST API (Port 8081)"]
end
subgraph ExternalServices [External Providers]
LLM["OpenAI-Compatible LLM API (Groq, etc.)"]
end
CE -- "HTTP POST (Basic Auth)" --> SB
PHPC -- "cURL POST (Basic Auth)" --> SB
PYC -- "urllib POST (Basic Auth)" --> SB
MNC -- "Fetch POST (Basic Auth)" --> SB
SB -- "HTTP POST (Bearer Token)" --> LLM
```
### 2. Class Diagram
Details the internal clean/hexagonal architecture structure of the Spring Boot backend, mapping controllers, use cases, services, ports, and external infrastructure adapters.
```mermaid
classDiagram
class TranslationController {
-TranslateTextUseCase translateText
+translate(TranslationRequest) ResponseEntity~TranslationResponse~
}
class HealthController {
+health() Map~String, String~
}
class TranslateTextUseCase {
>
+translate(String sourceText) Translation
}
class TranslationService {
-TranslationProvider translationProvider
+translate(String sourceText) Translation
}
class TranslationProvider {
>
+translateToDarija(String sourceTe …