Spaces:

gaia-mistral
/

msa1

Runtime error

App Files Files Community

zouhairk commited on 27 days ago

Commit

cba7fd1

1 Parent(s): ae9b179

add front et requirements

Browse files

Files changed (18) hide show

front/.gitattributes +35 -0
front/.gitignore copy +24 -0
front/eslint.config copy.js +28 -0
front/index copy.html +13 -0
front/package copy.json +35 -0
front/package-lock copy.json +0 -0
front/postcss.config copy.js +6 -0
front/src/App.tsx +4 -4
front/src/context/ChatContext.tsx +38 -2
front/src/pages/ArabicChat.tsx +34 -15
front/src/pages/FrenchChat.tsx +28 -11
front/src/pages/LanguageSelection.tsx +8 -8
front/tailwind.config copy.js +8 -0
front/tsconfig copy.json +7 -0
front/tsconfig.app copy.json +24 -0
front/tsconfig.node copy.json +22 -0
front/vite.config copy.ts +10 -0
requirements.txt +2 -1

front/.gitattributes ADDED Viewed

	@@ -0,0 +1,35 @@

+*.7z filter=lfs diff=lfs merge=lfs -text
+*.arrow filter=lfs diff=lfs merge=lfs -text
+*.bin filter=lfs diff=lfs merge=lfs -text
+*.bz2 filter=lfs diff=lfs merge=lfs -text
+*.ckpt filter=lfs diff=lfs merge=lfs -text
+*.ftz filter=lfs diff=lfs merge=lfs -text
+*.gz filter=lfs diff=lfs merge=lfs -text
+*.h5 filter=lfs diff=lfs merge=lfs -text
+*.joblib filter=lfs diff=lfs merge=lfs -text
+*.lfs.* filter=lfs diff=lfs merge=lfs -text
+*.mlmodel filter=lfs diff=lfs merge=lfs -text
+*.model filter=lfs diff=lfs merge=lfs -text
+*.msgpack filter=lfs diff=lfs merge=lfs -text
+*.npy filter=lfs diff=lfs merge=lfs -text
+*.npz filter=lfs diff=lfs merge=lfs -text
+*.onnx filter=lfs diff=lfs merge=lfs -text
+*.ot filter=lfs diff=lfs merge=lfs -text
+*.parquet filter=lfs diff=lfs merge=lfs -text
+*.pb filter=lfs diff=lfs merge=lfs -text
+*.pickle filter=lfs diff=lfs merge=lfs -text
+*.pkl filter=lfs diff=lfs merge=lfs -text
+*.pt filter=lfs diff=lfs merge=lfs -text
+*.pth filter=lfs diff=lfs merge=lfs -text
+*.rar filter=lfs diff=lfs merge=lfs -text
+*.safetensors filter=lfs diff=lfs merge=lfs -text
+saved_model/**/* filter=lfs diff=lfs merge=lfs -text
+*.tar.* filter=lfs diff=lfs merge=lfs -text
+*.tar filter=lfs diff=lfs merge=lfs -text
+*.tflite filter=lfs diff=lfs merge=lfs -text
+*.tgz filter=lfs diff=lfs merge=lfs -text
+*.wasm filter=lfs diff=lfs merge=lfs -text
+*.xz filter=lfs diff=lfs merge=lfs -text
+*.zip filter=lfs diff=lfs merge=lfs -text
+*.zst filter=lfs diff=lfs merge=lfs -text
+*tfevents* filter=lfs diff=lfs merge=lfs -text

front/.gitignore copy ADDED Viewed

	@@ -0,0 +1,24 @@

+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+node_modules
+dist
+dist-ssr
+*.local
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

front/eslint.config copy.js ADDED Viewed

	@@ -0,0 +1,28 @@

+import js from '@eslint/js';
+import globals from 'globals';
+import reactHooks from 'eslint-plugin-react-hooks';
+import reactRefresh from 'eslint-plugin-react-refresh';
+import tseslint from 'typescript-eslint';
+export default tseslint.config(
+  { ignores: ['dist'] },
+  {
+    extends: [js.configs.recommended, ...tseslint.configs.recommended],
+    files: ['**/*.{ts,tsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+    plugins: {
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...reactHooks.configs.recommended.rules,
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  }
+);

front/index copy.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!doctype html>
+<html lang="fr">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/vite.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>MSA TRANSLATE</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

front/package copy.json ADDED Viewed

	@@ -0,0 +1,35 @@

+{
+  "name": "voice-chat-translation-app",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "@microsoft/fetch-event-source": "^2.0.1",
+    "lucide-react": "^0.344.0",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-router-dom": "^6.22.3"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.9.1",
+    "@types/react": "^18.3.5",
+    "@types/react-dom": "^18.3.0",
+    "@vitejs/plugin-react": "^4.3.1",
+    "autoprefixer": "^10.4.18",
+    "eslint": "^9.9.1",
+    "eslint-plugin-react-hooks": "^5.1.0-rc.0",
+    "eslint-plugin-react-refresh": "^0.4.11",
+    "globals": "^15.9.0",
+    "postcss": "^8.4.35",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5.5.3",
+    "typescript-eslint": "^8.3.0",
+    "vite": "^5.4.2"
+  }
+}

front/package-lock copy.json ADDED Viewed

The diff for this file is too large to render. See raw diff

front/postcss.config copy.js ADDED Viewed

	@@ -0,0 +1,6 @@

+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+};

front/src/App.tsx CHANGED Viewed

@@ -15,12 +15,12 @@ function App() {
             <div className="container mx-auto flex items-center justify-between">
               <Link to="/" className="flex items-center space-x-2">
                 <Globe2 className="h-6 w-6 text-blue-600" />
-                <span className="text-xl font-semibold">MSA Translator</span>
               </Link>
               <div className="flex space-x-4">
-                <Link to="/" className="px-4 py-2 rounded hover:bg-gray-100">Home</Link>
-                <Link to="/arabic" className="px-4 py-2 rounded hover:bg-gray-100">Arabic Chat</Link>
-                <Link to="/french" className="px-4 py-2 rounded hover:bg-gray-100">French Chat</Link>
               </div>
             </div>
           </nav>

             <div className="container mx-auto flex items-center justify-between">
               <Link to="/" className="flex items-center space-x-2">
                 <Globe2 className="h-6 w-6 text-blue-600" />
+                <span className="text-xl font-semibold">MSA Translate</span>
               </Link>
               <div className="flex space-x-4">
+                <Link to="/" className="px-4 py-2 rounded hover:bg-gray-100">Choix langue</Link>
+                <Link to="/arabic" className="px-4 py-2 rounded hover:bg-gray-100">Adherent</Link>
+                <Link to="/french" className="px-4 py-2 rounded hover:bg-gray-100">Agent</Link>
               </div>
             </div>
           </nav>

front/src/context/ChatContext.tsx CHANGED Viewed

@@ -3,6 +3,7 @@ import React, { createContext, useContext, useState } from 'react';
 interface Message {
   id: number;
   text: string;
   isArabic?: boolean;
   isFrench?: boolean;
   timestamp: Date;
@@ -18,8 +19,43 @@ const ChatContext = createContext<ChatContextType | undefined>(undefined);
 export function ChatProvider({ children }: { children: React.ReactNode }) {
   const [messages, setMessages] = useState<Message[]>([]);
-  const addMessage = (message: Message) => {
-    setMessages(prev => [...prev, message]);
   };
   return (

 interface Message {
   id: number;
   text: string;
+  translatedText?: string;
   isArabic?: boolean;
   isFrench?: boolean;
   timestamp: Date;
 export function ChatProvider({ children }: { children: React.ReactNode }) {
   const [messages, setMessages] = useState<Message[]>([]);
+  const translateText = async (text: string, from: string, to: string) => {
+    try {
+      // Utilisation de l'API Google Translate via RapidAPI
+      const response = await fetch('https://translate.googleapis.com/translate_a/single?client=gtx&sl=' + from + '&tl=' + to + '&dt=t&q=' + encodeURI(text));
+      if (!response.ok) {
+        throw new Error('Translation failed');
+      }
+      const data = await response.json();
+      // La traduction se trouve dans le premier élément du premier tableau
+      const translatedText = data[0][0][0];
+      return translatedText;
+    } catch (error) {
+      console.error('Translation error:', error);
+      return text;
+    }
+  };
+  const addMessage = async (message: Message) => {
+    const from = message.isArabic ? 'ar' : 'fr';
+    const to = message.isArabic ? 'fr' : 'ar';
+    try {
+      const translatedText = await translateText(message.text, from, to);
+      const messageWithTranslation = {
+        ...message,
+        translatedText,
+      };
+      setMessages(prev => [...prev, messageWithTranslation]);
+    } catch (error) {
+      console.error('Error in message translation:', error);
+      setMessages(prev => [...prev, message]);
+    }
   };
   return (

front/src/pages/ArabicChat.tsx CHANGED Viewed

@@ -1,17 +1,17 @@
 import React, { useState, useRef } from 'react';
-import { Mic, Play, Square } from 'lucide-react';
 import { useChat } from '../context/ChatContext';
 const ArabicChat = () => {
   const { messages, addMessage } = useChat();
   const [isRecording, setIsRecording] = useState(false);
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
   const chunksRef = useRef<Blob[]>([]);
   const recognitionRef = useRef<SpeechRecognition | null>(null);
   const startRecording = async () => {
     try {
-      // Initialize speech recognition
       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
       const recognition = new SpeechRecognition();
       recognitionRef.current = recognition;
@@ -39,7 +39,6 @@ const ArabicChat = () => {
       recognition.start();
       setIsRecording(true);
-      // Also start audio recording for WAV file
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
       const mediaRecorder = new MediaRecorder(stream);
       mediaRecorderRef.current = mediaRecorder;
@@ -67,28 +66,42 @@ const ArabicChat = () => {
     }
   };
-  const speakText = (text: string, isArabic: boolean) => {
     if ('speechSynthesis' in window) {
-      window.speechSynthesis.cancel();
       const utterance = new SpeechSynthesisUtterance(text);
-      utterance.lang = isArabic ? 'ar-SA' : 'fr-FR';
-      utterance.rate = 1.0;
       utterance.pitch = 1.0;
       utterance.volume = 1.0;
       window.speechSynthesis.speak(utterance);
     }
   };
   return (
-    <div className="container mx-auto p-4 max-w-2xl">
       <div className="bg-white rounded-lg shadow-md h-[calc(100vh-12rem)] flex flex-col">
         <div className="flex-1 overflow-y-auto p-4">
           {messages.map((message) => (
             <div
               key={message.id}
-              className={`flex ${message.isArabic ? 'justify-end' : 'justify-start'} mb-4`}
             >
               <div
                 className={`rounded-lg p-3 max-w-[70%] ${
@@ -97,14 +110,20 @@ const ArabicChat = () => {
                     : 'bg-white border border-gray-300'
                 }`}
               >
-                <p dir={message.isArabic ? 'rtl' : 'ltr'}>{message.text}</p>
                 {!message.isArabic && (
                   <button
                     className="mt-2 p-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors"
-                    onClick={() => speakText(message.text, false)}
-                    title="Écouter la traduction"
                   >
-                    <Play className="h-4 w-4" />
                   </button>
                 )}
               </div>
@@ -113,7 +132,7 @@ const ArabicChat = () => {
         </div>
         <div className="border-t p-4">
-          <div className="flex items-center justify-center space-x-4">
             <button
               onClick={isRecording ? stopRecording : startRecording}
               className="relative p-4 rounded-full bg-blue-500 hover:bg-blue-600 text-white"
@@ -127,7 +146,7 @@ const ArabicChat = () => {
                 <div className="absolute inset-0 animate-ping rounded-full bg-blue-400 opacity-75"></div>
               )}
             </button>
-            <p className="text-gray-600 text-right" dir="rtl">انقر ثم تحدث</p>
           </div>
         </div>
       </div>

 import React, { useState, useRef } from 'react';
+import { Mic, Play, Square, StopCircle } from 'lucide-react';
 import { useChat } from '../context/ChatContext';
 const ArabicChat = () => {
   const { messages, addMessage } = useChat();
   const [isRecording, setIsRecording] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
   const chunksRef = useRef<Blob[]>([]);
   const recognitionRef = useRef<SpeechRecognition | null>(null);
   const startRecording = async () => {
     try {
       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
       const recognition = new SpeechRecognition();
       recognitionRef.current = recognition;
       recognition.start();
       setIsRecording(true);
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
       const mediaRecorder = new MediaRecorder(stream);
       mediaRecorderRef.current = mediaRecorder;
     }
   };
+  const speakText = (text: string) => {
     if ('speechSynthesis' in window) {
+      window.speechSynthesis.cancel(); // Arrête toute lecture en cours
+      setIsPlaying(true);
       const utterance = new SpeechSynthesisUtterance(text);
+      utterance.lang = 'ar-SA';
+      utterance.rate = 0.9;
       utterance.pitch = 1.0;
       utterance.volume = 1.0;
+      utterance.onend = () => {
+        setIsPlaying(false);
+      };
+      utterance.onerror = () => {
+        setIsPlaying(false);
+      };
       window.speechSynthesis.speak(utterance);
     }
   };
+  const stopSpeaking = () => {
+    window.speechSynthesis.cancel();
+    setIsPlaying(false);
+  };
   return (
+    <div className="container mx-auto p-4 max-w-2xl" dir="rtl">
       <div className="bg-white rounded-lg shadow-md h-[calc(100vh-12rem)] flex flex-col">
         <div className="flex-1 overflow-y-auto p-4">
           {messages.map((message) => (
             <div
               key={message.id}
+              className={`flex ${message.isArabic ? 'justify-start' : 'justify-end'} mb-4`}
             >
               <div
                 className={`rounded-lg p-3 max-w-[70%] ${
                     : 'bg-white border border-gray-300'
                 }`}
               >
+                <p className="text-right" style={{ direction: 'rtl' }}>
+                  {message.isArabic ? message.text : message.translatedText}
+                </p>
                 {!message.isArabic && (
                   <button
                     className="mt-2 p-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors"
+                    onClick={() => isPlaying ? stopSpeaking() : speakText(message.translatedText || '')}
+                    title={isPlaying ? 'إيقاف الاستماع' : 'الاستماع إلى الرسالة'}
                   >
+                    {isPlaying ? (
+                      <StopCircle className="h-4 w-4 text-red-500" />
+                    ) : (
+                      <Play className="h-4 w-4" />
+                    )}
                   </button>
                 )}
               </div>
         </div>
         <div className="border-t p-4">
+          <div className="flex items-center justify-center space-x-4 flex-row-reverse">
             <button
               onClick={isRecording ? stopRecording : startRecording}
               className="relative p-4 rounded-full bg-blue-500 hover:bg-blue-600 text-white"
                 <div className="absolute inset-0 animate-ping rounded-full bg-blue-400 opacity-75"></div>
               )}
             </button>
+            <p className="text-gray-600">انقر ثم تحدث</p>
           </div>
         </div>
       </div>

front/src/pages/FrenchChat.tsx CHANGED Viewed

@@ -1,17 +1,17 @@
 import React, { useState, useRef } from 'react';
-import { Mic, Play, Square } from 'lucide-react';
 import { useChat } from '../context/ChatContext';
 const FrenchChat = () => {
   const { messages, addMessage } = useChat();
   const [isRecording, setIsRecording] = useState(false);
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
   const chunksRef = useRef<Blob[]>([]);
   const recognitionRef = useRef<SpeechRecognition | null>(null);
   const startRecording = async () => {
     try {
-      // Initialize speech recognition
       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
       const recognition = new SpeechRecognition();
       recognitionRef.current = recognition;
@@ -39,7 +39,6 @@ const FrenchChat = () => {
       recognition.start();
       setIsRecording(true);
-      // Also start audio recording for WAV file
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
       const mediaRecorder = new MediaRecorder(stream);
       mediaRecorderRef.current = mediaRecorder;
@@ -67,20 +66,34 @@ const FrenchChat = () => {
     }
   };
-  const speakText = (text: string, isFrench: boolean) => {
     if ('speechSynthesis' in window) {
-      window.speechSynthesis.cancel();
       const utterance = new SpeechSynthesisUtterance(text);
-      utterance.lang = isFrench ? 'fr-FR' : 'ar-SA';
-      utterance.rate = 1.0;
       utterance.pitch = 1.0;
       utterance.volume = 1.0;
       window.speechSynthesis.speak(utterance);
     }
   };
   return (
     <div className="container mx-auto p-4 max-w-2xl">
       <div className="bg-white rounded-lg shadow-md h-[calc(100vh-12rem)] flex flex-col">
@@ -97,14 +110,18 @@ const FrenchChat = () => {
                     : 'bg-white border border-gray-300'
                 }`}
               >
-                <p>{message.text}</p>
                 {!message.isFrench && (
                   <button
                     className="mt-2 p-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors"
-                    onClick={() => speakText(message.text, false)}
-                    title="Écouter le message"
                   >
-                    <Play className="h-4 w-4" />
                   </button>
                 )}
               </div>

 import React, { useState, useRef } from 'react';
+import { Mic, Play, Square, StopCircle } from 'lucide-react';
 import { useChat } from '../context/ChatContext';
 const FrenchChat = () => {
   const { messages, addMessage } = useChat();
   const [isRecording, setIsRecording] = useState(false);
+  const [isPlaying, setIsPlaying] = useState(false);
   const mediaRecorderRef = useRef<MediaRecorder | null>(null);
   const chunksRef = useRef<Blob[]>([]);
   const recognitionRef = useRef<SpeechRecognition | null>(null);
   const startRecording = async () => {
     try {
       const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition;
       const recognition = new SpeechRecognition();
       recognitionRef.current = recognition;
       recognition.start();
       setIsRecording(true);
       const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
       const mediaRecorder = new MediaRecorder(stream);
       mediaRecorderRef.current = mediaRecorder;
     }
   };
+  const speakText = (text: string) => {
     if ('speechSynthesis' in window) {
+      window.speechSynthesis.cancel(); // Arrête toute lecture en cours
+      setIsPlaying(true);
       const utterance = new SpeechSynthesisUtterance(text);
+      utterance.lang = 'fr-FR';
+      utterance.rate = 0.9;
       utterance.pitch = 1.0;
       utterance.volume = 1.0;
+      utterance.onend = () => {
+        setIsPlaying(false);
+      };
+      utterance.onerror = () => {
+        setIsPlaying(false);
+      };
       window.speechSynthesis.speak(utterance);
     }
   };
+  const stopSpeaking = () => {
+    window.speechSynthesis.cancel();
+    setIsPlaying(false);
+  };
   return (
     <div className="container mx-auto p-4 max-w-2xl">
       <div className="bg-white rounded-lg shadow-md h-[calc(100vh-12rem)] flex flex-col">
                     : 'bg-white border border-gray-300'
                 }`}
               >
+                <p>{message.isFrench ? message.text : message.translatedText}</p>
                 {!message.isFrench && (
                   <button
                     className="mt-2 p-2 bg-gray-100 rounded-full hover:bg-gray-200 transition-colors"
+                    onClick={() => isPlaying ? stopSpeaking() : speakText(message.translatedText || '')}
+                    title={isPlaying ? 'Arrêter la lecture' : 'Écouter le message'}
                   >
+                    {isPlaying ? (
+                      <StopCircle className="h-4 w-4 text-red-500" />
+                    ) : (
+                      <Play className="h-4 w-4" />
+                    )}
                   </button>
                 )}
               </div>

front/src/pages/LanguageSelection.tsx CHANGED Viewed

@@ -8,22 +8,22 @@ const LanguageSelection = () => {
     {
       name: 'Bulgarian',
       nativeName: 'Говоря български',
-      flag: 'https://images.unsplash.com/photo-1607427293702-036707fc51c0?auto=format&fit=crop&w=64&h=64',
     },
     {
       name: 'Arabic',
       nativeName: 'أتحدث العربية',
-      flag: 'https://images.unsplash.com/photo-1607427293702-036707fc51c0?auto=format&fit=crop&w=64&h=64',
     },
     {
       name: 'Spanish',
       nativeName: 'Hablo español',
-      flag: 'https://images.unsplash.com/photo-1607427293702-036707fc51c0?auto=format&fit=crop&w=64&h=64',
     },
     {
       name: 'Romanian',
       nativeName: 'Vorbesc română',
-      flag: 'https://images.unsplash.com/photo-1607427293702-036707fc51c0?auto=format&fit=crop&w=64&h=64',
     },
   ];
@@ -32,9 +32,9 @@ const LanguageSelection = () => {
       <div className="max-w-2xl mx-auto">
         <div className="flex justify-center mb-8">
           <img
-            src="https://images.unsplash.com/photo-1607427293702-036707fc51c0?auto=format&fit=crop&w=200&h=100"
             alt="MSA Logo"
-            className="h-24"
           />
         </div>
@@ -48,10 +48,10 @@ const LanguageSelection = () => {
               <img
                 src={lang.flag}
                 alt={`${lang.name} flag`}
-                className="w-12 h-12 rounded-full"
               />
               <div className="text-left">
-                <p className="text-sm text-gray-600">Je parle</p>
                 <p className="text-lg font-semibold">{lang.nativeName}</p>
               </div>
             </button>

     {
       name: 'Bulgarian',
       nativeName: 'Говоря български',
+      flag: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Flag_of_Bulgaria.svg/langfr-2560px-Flag_of_Bulgaria.svg.png',
     },
     {
       name: 'Arabic',
       nativeName: 'أتحدث العربية',
+      flag: 'https://upload.wikimedia.org/wikipedia/commons/thumb/2/2c/Flag_of_Morocco.svg/langfr-1920px-Flag_of_Morocco.svg.png',
     },
     {
       name: 'Spanish',
       nativeName: 'Hablo español',
+      flag: 'https://upload.wikimedia.org/wikipedia/commons/thumb/9/9a/Flag_of_Spain.svg/langfr-1920px-Flag_of_Spain.svg.png',
     },
     {
       name: 'Romanian',
       nativeName: 'Vorbesc română',
+      flag: 'https://upload.wikimedia.org/wikipedia/commons/thumb/7/73/Flag_of_Romania.svg/langfr-1920px-Flag_of_Romania.svg.png',
     },
   ];
       <div className="max-w-2xl mx-auto">
         <div className="flex justify-center mb-8">
           <img
+            src="https://upload.wikimedia.org/wikipedia/fr/1/18/Mutualite_sociale_agricole_logo.svg"
             alt="MSA Logo"
+            className="h-16"
           />
         </div>
               <img
                 src={lang.flag}
                 alt={`${lang.name} flag`}
+                className="w-12 shadow-md border-solid"
               />
               <div className="text-left">
                 <p className="text-lg font-semibold">{lang.nativeName}</p>
               </div>
             </button>

front/tailwind.config copy.js ADDED Viewed

	@@ -0,0 +1,8 @@

+/** @type {import('tailwindcss').Config} */
+export default {
+  content: ['./index.html', './src/**/*.{js,ts,jsx,tsx}'],
+  theme: {
+    extend: {},
+  },
+  plugins: [],
+};

front/tsconfig copy.json ADDED Viewed

	@@ -0,0 +1,7 @@

+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

front/tsconfig.app copy.json ADDED Viewed

	@@ -0,0 +1,24 @@

+{
+  "compilerOptions": {
+    "target": "ES2020",
+    "useDefineForClassFields": true,
+    "lib": ["ES2020", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["src"]
+}

front/tsconfig.node copy.json ADDED Viewed

	@@ -0,0 +1,22 @@

+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "skipLibCheck": true,
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true
+  },
+  "include": ["vite.config.ts"]
+}

front/vite.config copy.ts ADDED Viewed

	@@ -0,0 +1,10 @@

+import { defineConfig } from 'vite';
+import react from '@vitejs/plugin-react';
+// https://vitejs.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  optimizeDeps: {
+    exclude: ['lucide-react'],
+  },
+});

requirements.txt CHANGED Viewed

@@ -7,4 +7,5 @@ huggingface-hub
 tiktoken
 blobfile
 protobuf
-sentencepiece

 tiktoken
 blobfile
 protobuf
+sentencepiece
+torchaudio