Production: Integrated Vite-React-Tailwind-Typescript Frontend with FastAPI and Qwen

.gitignore

@@ -0,0 +1,15 @@
+# Python
+__pycache__/
+.venv/
+.env
+*.pyc
+
+# Node / React
+frontend/node_modules/
+frontend/dist/
+.eslintcache
+
+# AI Models & OS
+models/
+.DS_Store
+Thumbs.db

.python-version

@@ -0,0 +1 @@
+3.12

agent.py

@@ -0,0 +1,135 @@
+import torch 
+from transformers import AutoModelForCausalLM, AutoTokenizer, TextIteratorStreamer, SpeechT5Processor, SpeechT5Tokenizer, SpeechT5ForTextToSpeech, SpeechT5HifiGan
+from faster_whisper import WhisperModel
+import asyncio
+import numpy as np
+from dotenv import load_dotenv
+import re
+from threading import Thread
+from datasets import load_dataset
+load_dotenv()
+
+print('trace 0')
+
+class TeacherAgent:
+    def __init__(self):
+
+        # 1. Initialize the "Gatekeeper" (VAD)
+        # Silero is tiny and runs perfectly on your Intel CPU
+        self.vad_model, utils = torch.hub.load(repo_or_dir='snakers4/silero-vad', model='silero_vad')
+        print("vad model loaded")
+        (_, self.get_speech_timestamps, _, _, _) = utils
+        # Setup Ears
+        self.whisper_model = WhisperModel("base", device="cpu", compute_type="int8")
+        print("trace 1")
+        #Setup Brain 
+        self.brain_context= "You are a helpful Arabic teacher. Answer in short sentences."
+        model_name = "Qwen/Qwen2.5-1.5B-Instruct" 
+        self.tokenizer = AutoTokenizer.from_pretrained(model_name)
+        self.brain_model = AutoModelForCausalLM.from_pretrained(model_name, device_map="cpu", torch_dtype="auto")
+        print("Brain model loaded")
+
+        #Setup Mouth
+        self.device = "cuda" if torch.cuda.is_available() else "cpu"
+        # model_id = "MBZUAI/speecht5_tts_clartts_ar"
+        model_id= "microsoft/speecht5_tts"
+        tokenizer_tts = SpeechT5Tokenizer.from_pretrained(model_id)
+        self.processor = SpeechT5Processor.from_pretrained(model_id, tokenizer=tokenizer_tts )
+        self.mouth_model = SpeechT5ForTextToSpeech.from_pretrained(model_id, token=True).to(self.device)
+        self.vocoder = SpeechT5HifiGan.from_pretrained("microsoft/speecht5_hifigan").to(self.device)
+
+        # 2. Load a 'Speaker Embedding' (This gives the voice a specific tone)
+        # We use a default one from a dataset for now
+        embeddings_dataset = load_dataset("herwoww/arabic_xvector_embeddings", split="validation")
+        self.speaker_embeddings = torch.tensor(embeddings_dataset[105]["speaker_embeddings"]).unsqueeze(0).to(self.device)
+  
+        
+        print("✅ Models loaded and ready.")
+        self.input_queue = asyncio.Queue()  # Raw audio blobs from browser
+        self.text_queue = asyncio.Queue()   # Transcribed text -> Brain
+        self.voice_queue = asyncio.Queue()  # Text to speak -> Mouth
+        
+        self.is_ready= True
+        
+    async def start_workers(self, websocket):
+        """This replaces your old main()"""
+        await asyncio.gather(
+            self.ears_worker(websocket),  # Pulls from WebSocket, puts in text_queue
+            self.brain_worker(),          # Pulls from text_queue, puts in voice_queue
+            self.mouth_worker(websocket)  # Pulls from voice_queue, sends to WebSocket
+        )
+
+    #Ears
+    async def ears_worker(self, websocket):
+        """The 'Ears' of the Agent: Captures and filters live mic audio."""
+        while True:
+            try:
+                # Receive audio chunk from browser
+                audio_bytes = await websocket.receive_bytes()
+                # Whisper logic here... (convert bytes -> transcribe)
+                audio_np = np.frombuffer(audio_bytes, np.int16).astype(np.float32) / 32768.0
+                segments, _ = self.whisper_model.transcribe(audio_np)
+                user_text = " ".join([s.text for s in segments]).strip()
+
+                if user_text:
+                    print(f"👤 User: {user_text}")
+                    await self.text_queue.put(user_text)
+            except Exception as e:
+                print(f"Ears Error: {e}")
+                break
+    #Brain
+    async def brain_worker(self):
+        """The 'Brain': Processes your text and streams sentences to the Mouth."""
+        while True:   
+            user_text = await self.text_queue.get()
+            
+            # Prepare the conversation for Qwen
+            messages = [{"role": "system", "content": self.brain_context},
+                        {"role": "user", "content": user_text}]
+
+            input_text = self.tokenizer.apply_chat_template(messages, tokenize=False, add_generation_prompt=True)
+            inputs = self.tokenizer([input_text], return_tensors="pt")
+
+            # Setup the Streamer
+            streamer = TextIteratorStreamer(self.tokenizer, skip_prompt=True, skip_special_tokens=True)
+            generation_kwargs = dict(inputs, streamer=streamer, max_new_tokens=512)
+            
+            # Start generation in a separate thread so it doesn't block our loop
+            thread = Thread(target=self.brain_model.generate, kwargs=generation_kwargs)
+            thread.start()
+
+            sentence_buffer = ""
+            for new_text in streamer:
+                sentence_buffer += new_text
+                
+                # Use Regex to find the end of a sentence (. ! ? or Arabic equivalents)
+                if re.search(r'[.!?؟]\s', sentence_buffer):
+                    # Split and send the finished sentence to the Mouth belt
+                    parts = re.split(r'([.!?؟]\s)', sentence_buffer)
+                    finished_sentence = "".join(parts[:-1]).strip()
+                    if finished_sentence:
+                        print(finished_sentence)
+                        await self.voice_queue.put(finished_sentence)
+                    sentence_buffer = parts[-1] # Keep the partial sentence for next time
+
+            # Send any leftover text after the stream ends
+            if sentence_buffer.strip():
+                await self.voice_queue.put(sentence_buffer.strip())
+
+            self.text_queue.task_done()
+    
+    async def mouth_worker(self, websocket):
+        while True:
+            text_to_speak = await self.voice_queue.get()
+            inputs = self.processor(text=text_to_speak, return_tensors="pt")
+            
+            with torch.no_grad():
+                speech = self.mouth_model.generate_speech(inputs["input_ids"], self.speaker_embeddings, vocoder=self.vocoder)
+            
+            # Convert to float32 bytes for the browser to play
+            audio_data = speech.cpu().numpy().astype(np.float32).tobytes()
+            await websocket.send_bytes(audio_data)
+            self.voice_queue.task_done()
+
+    
+    

app.py

@@ -1,11 +1,37 @@
-from fastapi import FastAPI
+from fastapi import FastAPI, WebSocket, WebSocketDisconnect
+from fastapi.responses import FileResponse
+from agent import TeacherAgent
+from contextlib import asynccontextmanager
+import asyncio
 
-app = FastAPI()
+# 1. Global Agent Variable
+teacher_agent = None
 
+@asynccontextmanager
+async def lifespan(app: FastAPI):
+    # This runs when the server starts
+    global teacher_agent
+    print("🚀 Initializing Teacher Agent Models...")
+    teacher_agent = TeacherAgent()
+    yield
+    # This runs when the server shuts down
+    del teacher_agent
+
+app = FastAPI(lifespan=lifespan)
+
+# 2. Simple HTML Frontend (Temporary for testing)
 @app.get("/")
-def home():
-    return {
-        "status": "Teacher Agent is Online", 
-        "mode": "Docker Deployment",
-        "message": "Marhaban! Ready to learn Arabic?"
-    }
+async def get():
+    return FileResponse("index.html")
+
+# 3. The WebSocket "Bridge"
+@app.websocket("/ws")
+async def websocket_endpoint(websocket: WebSocket):
+    await websocket.accept()
+    try:
+        # Launch the three workers (Ears, Brain, Mouth) for this specific user
+        await teacher_agent.start_workers(websocket)
+    except WebSocketDisconnect:
+        print("❌ Client disconnected")
+    except Exception as e:
+        print(f"⚠️ Error: {e}")

frontend/.gitignore

@@ -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?

frontend/README.md

@@ -0,0 +1,73 @@
+# React + TypeScript + Vite
+
+This template provides a minimal setup to get React working in Vite with HMR and some ESLint rules.
+
+Currently, two official plugins are available:
+
+- [@vitejs/plugin-react](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react) uses [Babel](https://babeljs.io/) (or [oxc](https://oxc.rs) when used in [rolldown-vite](https://vite.dev/guide/rolldown)) for Fast Refresh
+- [@vitejs/plugin-react-swc](https://github.com/vitejs/vite-plugin-react/blob/main/packages/plugin-react-swc) uses [SWC](https://swc.rs/) for Fast Refresh
+
+## React Compiler
+
+The React Compiler is currently not compatible with SWC. See [this issue](https://github.com/vitejs/vite-plugin-react/issues/428) for tracking the progress.
+
+## Expanding the ESLint configuration
+
+If you are developing a production application, we recommend updating the configuration to enable type-aware lint rules:
+
+```js
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+
+      // Remove tseslint.configs.recommended and replace with this
+      tseslint.configs.recommendedTypeChecked,
+      // Alternatively, use this for stricter rules
+      tseslint.configs.strictTypeChecked,
+      // Optionally, add this for stylistic rules
+      tseslint.configs.stylisticTypeChecked,
+
+      // Other configs...
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```
+
+You can also install [eslint-plugin-react-x](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-x) and [eslint-plugin-react-dom](https://github.com/Rel1cx/eslint-react/tree/main/packages/plugins/eslint-plugin-react-dom) for React-specific lint rules:
+
+```js
+// eslint.config.js
+import reactX from 'eslint-plugin-react-x'
+import reactDom from 'eslint-plugin-react-dom'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      // Other configs...
+      // Enable lint rules for React
+      reactX.configs['recommended-typescript'],
+      // Enable lint rules for React DOM
+      reactDom.configs.recommended,
+    ],
+    languageOptions: {
+      parserOptions: {
+        project: ['./tsconfig.node.json', './tsconfig.app.json'],
+        tsconfigRootDir: import.meta.dirname,
+      },
+      // other options...
+    },
+  },
+])
+```

frontend/eslint.config.js

@@ -0,0 +1,23 @@
+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'
+import { defineConfig, globalIgnores } from 'eslint/config'
+
+export default defineConfig([
+  globalIgnores(['dist']),
+  {
+    files: ['**/*.{ts,tsx}'],
+    extends: [
+      js.configs.recommended,
+      tseslint.configs.recommended,
+      reactHooks.configs.flat.recommended,
+      reactRefresh.configs.vite,
+    ],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+    },
+  },
+])

frontend/index.html

@@ -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>frontend</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

frontend/package.json

@@ -0,0 +1,33 @@
+{
+  "name": "frontend",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "tsc -b && vite build",
+    "lint": "eslint .",
+    "preview": "vite preview"
+  },
+  "dependencies": {
+    "react": "^19.2.0",
+    "react-dom": "^19.2.0"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.39.1",
+    "@types/node": "^24.10.1",
+    "@types/react": "^19.2.7",
+    "@types/react-dom": "^19.2.3",
+    "@vitejs/plugin-react-swc": "^4.2.2",
+    "autoprefixer": "^10.4.24",
+    "eslint": "^9.39.1",
+    "eslint-plugin-react-hooks": "^7.0.1",
+    "eslint-plugin-react-refresh": "^0.4.24",
+    "globals": "^16.5.0",
+    "postcss": "^8.5.6",
+    "tailwindcss": "^4.1.18",
+    "typescript": "~5.9.3",
+    "typescript-eslint": "^8.48.0",
+    "vite": "^7.3.1"
+  }
+}

frontend/src/App.css

@@ -0,0 +1,42 @@
+#root {
+  max-width: 1280px;
+  margin: 0 auto;
+  padding: 2rem;
+  text-align: center;
+}
+
+.logo {
+  height: 6em;
+  padding: 1.5em;
+  will-change: filter;
+  transition: filter 300ms;
+}
+.logo:hover {
+  filter: drop-shadow(0 0 2em #646cffaa);
+}
+.logo.react:hover {
+  filter: drop-shadow(0 0 2em #61dafbaa);
+}
+
+@keyframes logo-spin {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+@media (prefers-reduced-motion: no-preference) {
+  a:nth-of-type(2) .logo {
+    animation: logo-spin infinite 20s linear;
+  }
+}
+
+.card {
+  padding: 2em;
+}
+
+.read-the-docs {
+  color: #888;
+}

frontend/src/App.tsx

@@ -0,0 +1,134 @@
+import { useState, useEffect, useRef } from 'react'
+
+interface ChatMessage {
+  role: 'user' | 'ai';
+  text: string;
+}
+
+function App() {
+  const [status, setStatus] = useState<'Offline' | 'Online' | 'Connecting'>('Offline');
+  const [messages, setMessages] = useState<ChatMessage[]>([]);
+  const [isRecording, setIsRecording] = useState(false);
+  
+  const ws = useRef<WebSocket | null>(null);
+  const audioCtx = useRef<AudioContext | null>(null);
+  const processor = useRef<ScriptProcessorNode | null>(null);
+  const input = useRef<MediaStreamAudioSourceNode | null>(null);
+
+  // 1. Initialize WebSocket Connection
+  useEffect(() => {
+    const protocol = window.location.protocol === 'https:' ? 'wss:' : 'ws:';
+    // The /ws path works because of our proxy in vite.config.ts
+    const socket = new WebSocket(`${protocol}//${window.location.host}/ws`);
+
+    socket.onopen = () => setStatus('Online');
+    socket.onclose = () => setStatus('Offline');
+    
+    socket.onmessage = async (event) => {
+      if (event.data instanceof Blob) {
+        // Handle incoming AI audio
+        playAudioBlob(event.data);
+      } else {
+        // Handle incoming text transcript
+        const data = JSON.parse(event.data);
+        setMessages(prev => [...prev, { role: 'ai', text: data.text }]);
+      }
+    };
+
+    ws.current = socket;
+    return () => socket.close();
+  }, []);
+
+  // 2. Microphone Logic
+  const startRecording = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      audioCtx.current = new (window.AudioContext || (window as any).webkitAudioContext)({ sampleRate: 16000 });
+      
+      input.current = audioCtx.current.createMediaStreamSource(stream);
+      // Create a processor that grabs audio in chunks of 4096 samples
+      processor.current = audioCtx.current.createScriptProcessor(4096, 1, 1);
+
+      processor.current.onaudioprocess = (e) => {
+        const inputData = e.inputBuffer.getChannelData(0);
+        // Convert Float32 to Int16 for faster-whisper compatibility
+        const pcmData = new Int16Array(inputData.length);
+        for (let i = 0; i < inputData.length; i++) {
+          pcmData[i] = Math.max(-1, Math.min(1, inputData[i])) * 0x7FFF;
+        }
+        
+        if (ws.current?.readyState === WebSocket.OPEN) {
+          ws.current.send(pcmData.buffer);
+        }
+      };
+
+      input.current.connect(processor.current);
+      processor.current.connect(audioCtx.current.destination);
+      setIsRecording(true);
+    } catch (err) {
+      console.error("Mic access denied:", err);
+    }
+  };
+
+  const stopRecording = () => {
+    processor.current?.disconnect();
+    input.current?.disconnect();
+    setIsRecording(false);
+  };
+
+  const playAudioBlob = async (blob: Blob) => {
+    const context = new AudioContext();
+    const arrayBuffer = await blob.arrayBuffer();
+    const audioBuffer = await context.decodeAudioData(arrayBuffer);
+    const source = context.createBufferSource();
+    source.buffer = audioBuffer;
+    source.connect(context.destination);
+    source.start();
+  };
+
+  return (
+    <div className="min-h-screen bg-slate-900 text-white p-8 flex flex-col items-center">
+      <div className="w-full max-w-2xl bg-slate-800 rounded-3xl shadow-2xl border border-slate-700 overflow-hidden">
+        {/* Header */}
+        <div className="p-6 bg-slate-800 border-b border-slate-700 flex justify-between items-center">
+          <div>
+            <h1 className="text-2xl font-bold text-emerald-400">Arabic Teacher AI</h1>
+            <p className="text-sm text-slate-400">Level: Beginner</p>
+          </div>
+          <div className={`flex items-center gap-2 px-3 py-1 rounded-full text-xs font-medium ${status === 'Online' ? 'bg-emerald-500/10 text-emerald-400' : 'bg-rose-500/10 text-rose-400'}`}>
+            <div className={`w-2 h-2 rounded-full ${status === 'Online' ? 'bg-emerald-500 animate-pulse' : 'bg-rose-500'}`} />
+            {status}
+          </div>
+        </div>
+
+        {/* Chat Area */}
+        <div className="h-[400px] overflow-y-auto p-6 space-y-4 flex flex-col">
+          {messages.map((m, i) => (
+            <div key={i} className={`p-4 rounded-2xl max-w-[80%] ${m.role === 'ai' ? 'bg-slate-700 self-start text-emerald-50' : 'bg-emerald-600 self-end'}`}>
+              {m.text}
+            </div>
+          ))}
+        </div>
+
+        {/* Controls */}
+        <div className="p-8 bg-slate-800/50 flex flex-col items-center border-t border-slate-700">
+          <button
+            onMouseDown={startRecording}
+            onMouseUp={stopRecording}
+            onMouseLeave={stopRecording}
+            className={`w-20 h-20 rounded-full flex items-center justify-center transition-all shadow-xl active:scale-90 ${isRecording ? 'bg-rose-500 animate-pulse scale-110' : 'bg-emerald-500 hover:bg-emerald-400'}`}
+          >
+            <svg className="w-10 h-10 text-white" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+              <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M19 11a7 7 0 01-7 7m0 0a7 7 0 01-7-7m7 7v4m0 0H8m8 0h-3m4-8a3 3 0 01-3-3V5a3 3 0 116 0v6a3 3 0 01-3 3z" />
+            </svg>
+          </button>
+          <p className="mt-4 text-slate-400 text-sm font-medium uppercase tracking-widest">
+            {isRecording ? "Listening..." : "Hold to Speak"}
+          </p>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default App

frontend/src/index.css

@@ -0,0 +1,68 @@
+:root {
+  font-family: system-ui, Avenir, Helvetica, Arial, sans-serif;
+  line-height: 1.5;
+  font-weight: 400;
+
+  color-scheme: light dark;
+  color: rgba(255, 255, 255, 0.87);
+  background-color: #242424;
+
+  font-synthesis: none;
+  text-rendering: optimizeLegibility;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+
+a {
+  font-weight: 500;
+  color: #646cff;
+  text-decoration: inherit;
+}
+a:hover {
+  color: #535bf2;
+}
+
+body {
+  margin: 0;
+  display: flex;
+  place-items: center;
+  min-width: 320px;
+  min-height: 100vh;
+}
+
+h1 {
+  font-size: 3.2em;
+  line-height: 1.1;
+}
+
+button {
+  border-radius: 8px;
+  border: 1px solid transparent;
+  padding: 0.6em 1.2em;
+  font-size: 1em;
+  font-weight: 500;
+  font-family: inherit;
+  background-color: #1a1a1a;
+  cursor: pointer;
+  transition: border-color 0.25s;
+}
+button:hover {
+  border-color: #646cff;
+}
+button:focus,
+button:focus-visible {
+  outline: 4px auto -webkit-focus-ring-color;
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+    color: #213547;
+    background-color: #ffffff;
+  }
+  a:hover {
+    color: #747bff;
+  }
+  button {
+    background-color: #f9f9f9;
+  }
+}

frontend/src/main.tsx

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

frontend/tsconfig.app.json

@@ -0,0 +1,28 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.app.tsbuildinfo",
+    "target": "ES2022",
+    "useDefineForClassFields": true,
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "types": ["vite/client"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+    "jsx": "react-jsx",
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["src"]
+}

frontend/tsconfig.json

@@ -0,0 +1,7 @@
+{
+  "files": [],
+  "references": [
+    { "path": "./tsconfig.app.json" },
+    { "path": "./tsconfig.node.json" }
+  ]
+}

frontend/tsconfig.node.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "tsBuildInfoFile": "./node_modules/.tmp/tsconfig.node.tsbuildinfo",
+    "target": "ES2023",
+    "lib": ["ES2023"],
+    "module": "ESNext",
+    "types": ["node"],
+    "skipLibCheck": true,
+
+    /* Bundler mode */
+    "moduleResolution": "bundler",
+    "allowImportingTsExtensions": true,
+    "verbatimModuleSyntax": true,
+    "moduleDetection": "force",
+    "noEmit": true,
+
+    /* Linting */
+    "strict": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "erasableSyntaxOnly": true,
+    "noFallthroughCasesInSwitch": true,
+    "noUncheckedSideEffectImports": true
+  },
+  "include": ["vite.config.ts"]
+}

frontend/vite.config.ts

@@ -0,0 +1,18 @@
+import { defineConfig } from 'vite'
+import react from '@vitejs/plugin-react-swc'
+
+// https://vite.dev/config/
+export default defineConfig({
+  plugins: [react()],
+  server: {
+    proxy: {
+      // Proxying WebSocket requests to the FastAPI backend
+      '/ws': {
+        target: 'ws://localhost:8000',
+        ws: true,
+      },
+      // Optional: Proxy standard API calls if you add them later
+      '/api': 'http://localhost:8000'
+    }
+  }
+})

main.py

@@ -0,0 +1,6 @@
+def main():
+    print("Hello from language-teacher!")
+
+
+if __name__ == "__main__":
+    main()

pyproject.toml

@@ -0,0 +1,24 @@
+[project]
+name = "language-teacher"
+version = "0.1.0"
+description = "Add your description here"
+readme = "README.md"
+requires-python = ">=3.12"
+dependencies = [
+    "accelerate>=1.12.0",
+    "datasets>=4.5.0",
+    "dotenv>=0.9.9",
+    "fastapi>=0.128.7",
+    "faster-whisper>=1.2.1",
+    "numpy>=2.4.2",
+    "pyaudio>=0.2.14",
+    "pydantic>=2.12.5",
+    "python-dotenv>=1.2.1",
+    "sentencepiece>=0.2.1",
+    "soundfile>=0.13.1",
+    "torch>=2.10.0",
+    "torchaudio>=2.10.0",
+    "transformers>=5.1.0",
+    "uvicorn>=0.40.0",
+    "websockets>=16.0",
+]