Spaces:

gaia-mistral
/

msa1

Runtime error

App Files Files Community

zouhairk commited on 24 days ago

Commit

b681a44

1 Parent(s): 63eff25

init front

Browse files

Files changed (21) hide show

front/.bolt/config.json +3 -0
front/.bolt/prompt +8 -0
front/.gitignore +24 -0
front/eslint.config.js +28 -0
front/index.html +13 -0
front/package-lock.json +0 -0
front/package.json +35 -0
front/postcss.config.js +6 -0
front/src/App.tsx +39 -0
front/src/context/ChatContext.tsx +38 -0
front/src/index.css +3 -0
front/src/main.tsx +10 -0
front/src/pages/ArabicChat.tsx +138 -0
front/src/pages/FrenchChat.tsx +138 -0
front/src/pages/LanguageSelection.tsx +65 -0
front/src/vite-env.d.ts +6 -0
front/tailwind.config.js +8 -0
front/tsconfig.app.json +24 -0
front/tsconfig.json +7 -0
front/tsconfig.node.json +22 -0
front/vite.config.ts +10 -0

front/.bolt/config.json ADDED Viewed

	@@ -0,0 +1,3 @@

+{
+  "template": "bolt-vite-react-ts"
+}

front/.bolt/prompt ADDED Viewed

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

+For all designs I ask you to make, have them be beautiful, not cookie cutter. Make webpages that are fully featured and worthy for production.
+By default, this template supports JSX syntax with Tailwind CSS classes, React hooks, and Lucide React for icons. Do not install other packages for UI themes, icons, etc unless absolutely necessary or I request them.
+Use icons from lucide-react for logos.
+Use stock photos from unsplash where appropriate, only valid URLs you know exist. Do not download the images, only link to them in image tags.

front/.gitignore 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.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.html ADDED Viewed

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

+<!doctype html>
+<html lang="en">
+  <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 translator</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

front/package-lock.json ADDED Viewed

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

front/package.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/postcss.config.js ADDED Viewed

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

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

front/src/App.tsx ADDED Viewed

	@@ -0,0 +1,39 @@

+import React from 'react';
+import { BrowserRouter as Router, Routes, Route, Link } from 'react-router-dom';
+import { Globe2 } from 'lucide-react';
+import LanguageSelection from './pages/LanguageSelection';
+import ArabicChat from './pages/ArabicChat';
+import FrenchChat from './pages/FrenchChat';
+import { ChatProvider } from './context/ChatContext';
+function App() {
+  return (
+    <ChatProvider>
+      <Router>
+        <div className="min-h-screen bg-[#F6F6F6]">
+          <nav className="bg-white shadow-md p-4">
+            <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>
+          <Routes>
+            <Route path="/" element={<LanguageSelection />} />
+            <Route path="/arabic" element={<ArabicChat />} />
+            <Route path="/french" element={<FrenchChat />} />
+          </Routes>
+        </div>
+      </Router>
+    </ChatProvider>
+  );
+}
+export default App;

front/src/context/ChatContext.tsx ADDED Viewed

	@@ -0,0 +1,38 @@

+import React, { createContext, useContext, useState } from 'react';
+interface Message {
+  id: number;
+  text: string;
+  isArabic?: boolean;
+  isFrench?: boolean;
+  timestamp: Date;
+}
+interface ChatContextType {
+  messages: Message[];
+  addMessage: (message: Message) => void;
+}
+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 (
+    <ChatContext.Provider value={{ messages, addMessage }}>
+      {children}
+    </ChatContext.Provider>
+  );
+}
+export function useChat() {
+  const context = useContext(ChatContext);
+  if (context === undefined) {
+    throw new Error('useChat must be used within a ChatProvider');
+  }
+  return context;
+}

front/src/index.css ADDED Viewed

	@@ -0,0 +1,3 @@

+@tailwind base;
+@tailwind components;
+@tailwind utilities;

front/src/main.tsx ADDED Viewed

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

+import { StrictMode } from 'react';
+import { createRoot } from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>
+);

front/src/pages/ArabicChat.tsx ADDED Viewed

	@@ -0,0 +1,138 @@

+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;
+      recognition.lang = 'ar-SA';
+      recognition.continuous = true;
+      recognition.interimResults = true;
+      recognition.onresult = (event) => {
+        const transcript = Array.from(event.results)
+          .map(result => result[0].transcript)
+          .join('');
+        if (event.results[0].isFinal) {
+          const newMessage = {
+            id: Date.now(),
+            text: transcript,
+            isArabic: true,
+            timestamp: new Date(),
+          };
+          addMessage(newMessage);
+        }
+      };
+      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;
+      chunksRef.current = [];
+      mediaRecorder.ondataavailable = (e) => {
+        chunksRef.current.push(e.data);
+      };
+      mediaRecorder.start();
+    } catch (err) {
+      console.error('Error accessing microphone:', err);
+    }
+  };
+  const stopRecording = () => {
+    if (recognitionRef.current) {
+      recognitionRef.current.stop();
+    }
+    if (mediaRecorderRef.current && isRecording) {
+      mediaRecorderRef.current.stop();
+      setIsRecording(false);
+      mediaRecorderRef.current.stream.getTracks().forEach(track => track.stop());
+    }
+  };
+  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%] ${
+                  message.isArabic
+                    ? 'bg-blue-500 text-white'
+                    : '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>
+            </div>
+          ))}
+        </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"
+            >
+              {isRecording ? (
+                <Square className="h-6 w-6" />
+              ) : (
+                <Mic className="h-6 w-6" />
+              )}
+              {isRecording && (
+                <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>
+    </div>
+  );
+};
+export default ArabicChat;

front/src/pages/FrenchChat.tsx ADDED Viewed

	@@ -0,0 +1,138 @@

+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;
+      recognition.lang = 'fr-FR';
+      recognition.continuous = true;
+      recognition.interimResults = true;
+      recognition.onresult = (event) => {
+        const transcript = Array.from(event.results)
+          .map(result => result[0].transcript)
+          .join('');
+        if (event.results[0].isFinal) {
+          const newMessage = {
+            id: Date.now(),
+            text: transcript,
+            isFrench: true,
+            timestamp: new Date(),
+          };
+          addMessage(newMessage);
+        }
+      };
+      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;
+      chunksRef.current = [];
+      mediaRecorder.ondataavailable = (e) => {
+        chunksRef.current.push(e.data);
+      };
+      mediaRecorder.start();
+    } catch (err) {
+      console.error('Error accessing microphone:', err);
+    }
+  };
+  const stopRecording = () => {
+    if (recognitionRef.current) {
+      recognitionRef.current.stop();
+    }
+    if (mediaRecorderRef.current && isRecording) {
+      mediaRecorderRef.current.stop();
+      setIsRecording(false);
+      mediaRecorderRef.current.stream.getTracks().forEach(track => track.stop());
+    }
+  };
+  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">
+        <div className="flex-1 overflow-y-auto p-4">
+          {messages.map((message) => (
+            <div
+              key={message.id}
+              className={`flex ${message.isFrench ? 'justify-end' : 'justify-start'} mb-4`}
+            >
+              <div
+                className={`rounded-lg p-3 max-w-[70%] ${
+                  message.isFrench
+                    ? 'bg-blue-500 text-white'
+                    : '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>
+            </div>
+          ))}
+        </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"
+            >
+              {isRecording ? (
+                <Square className="h-6 w-6" />
+              ) : (
+                <Mic className="h-6 w-6" />
+              )}
+              {isRecording && (
+                <div className="absolute inset-0 animate-ping rounded-full bg-blue-400 opacity-75"></div>
+              )}
+            </button>
+            <p className="text-gray-600">Cliquer puis parler</p>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+export default FrenchChat;

front/src/pages/LanguageSelection.tsx ADDED Viewed

	@@ -0,0 +1,65 @@

+import React from 'react';
+import { useNavigate } from 'react-router-dom';
+const LanguageSelection = () => {
+  const navigate = useNavigate();
+  const languages = [
+    {
+      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',
+    },
+  ];
+  return (
+    <div className="container mx-auto px-4 py-8">
+      <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>
+        <div className="grid grid-cols-2 gap-4">
+          {languages.map((lang) => (
+            <button
+              key={lang.name}
+              onClick={() => navigate('/arabic')}
+              className="bg-white rounded-lg shadow-md p-4 flex items-center space-x-4 hover:shadow-lg transition-shadow"
+            >
+              <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>
+          ))}
+        </div>
+      </div>
+    </div>
+  );
+};
+export default LanguageSelection;

front/src/vite-env.d.ts ADDED Viewed

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

+/// <reference types="vite/client" />
+interface Window {
+  SpeechRecognition: typeof SpeechRecognition;
+  webkitSpeechRecognition: typeof SpeechRecognition;
+}

front/tailwind.config.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.app.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.json ADDED Viewed

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

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

front/tsconfig.node.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.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'],
+  },
+});