feat: Initialize Hygiéniste Pro AI app

Set up the foundational files and configurations for the Hygiéniste Pro AI application. This includes:

- Initializing `package.json` with necessary dependencies (React, Vite, Gemini SDK, Tailwind CSS).
- Configuring Vite for development and building.
- Setting up `tsconfig.json` for TypeScript.
- Creating basic `index.html` and `src/main.tsx` for React app entry point.
- Adding `.gitignore` to manage project files.
- Defining app metadata (`metadata.json`) including microphone permissions.
- Updating `README.md` with instructions for local execution and deployment.
- Adding `.env.example` for API key configuration.
- Implementing core UI and audio handling logic in `src/App.tsx` and styling in `src/index.css`.

.env.example

@@ -0,0 +1,9 @@
+# GEMINI_API_KEY: Required for Gemini AI API calls.
+# AI Studio automatically injects this at runtime from user secrets.
+# Users configure this via the Secrets panel in the AI Studio UI.
+GEMINI_API_KEY="MY_GEMINI_API_KEY"
+
+# APP_URL: The URL where this applet is hosted.
+# AI Studio automatically injects this at runtime with the Cloud Run service URL.
+# Used for self-referential links, OAuth callbacks, and API endpoints.
+APP_URL="MY_APP_URL"

.gitignore

@@ -0,0 +1,8 @@
+node_modules/
+build/
+dist/
+coverage/
+.DS_Store
+*.log
+.env*
+!.env.example

README.md

@@ -1,11 +1,20 @@
 <div align="center">
-
 <img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
 
-  <h1>Built with AI Studio</h2>
+# Run and deploy your AI Studio app
 
-  <p>The fastest path from prompt to production with Gemini.</p>
+This contains everything you need to run your app locally.
 
-  <a href="https://aistudio.google.com/apps">Start building</a>
+View your app in AI Studio: https://ai.studio/apps/5628e25f-e268-4a5d-9d6d-b6d96c02e6f7
 
-</div>
+## Run Locally
+
+**Prerequisites:**  Node.js
+
+
+1. Install dependencies:
+   `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+   `npm run dev`

index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Google AI Studio App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>
+

metadata.json

@@ -0,0 +1,5 @@
+{
+  "name": "Hygiéniste Pro: Swiss Dental Roleplay",
+  "description": "A real-time voice-only interactive app for dental hygienists to practice professional French in a Swiss clinic setting.",
+  "requestFramePermissions": ["microphone"]
+}

package.json

@@ -0,0 +1,34 @@
+{
+  "name": "react-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port=3000 --host=0.0.0.0",
+    "build": "vite build",
+    "preview": "vite preview",
+    "clean": "rm -rf dist",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@google/genai": "^1.29.0",
+    "@tailwindcss/vite": "^4.1.14",
+    "@vitejs/plugin-react": "^5.0.4",
+    "lucide-react": "^0.546.0",
+    "react": "^19.0.0",
+    "react-dom": "^19.0.0",
+    "vite": "^6.2.0",
+    "express": "^4.21.2",
+    "dotenv": "^17.2.3",
+    "motion": "^12.23.24"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "autoprefixer": "^10.4.21",
+    "tailwindcss": "^4.1.14",
+    "tsx": "^4.21.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.0",
+    "@types/express": "^4.17.21"
+  }
+}

src/App.tsx

@@ -0,0 +1,258 @@
+import { useState, useEffect, useRef, useCallback, ReactNode } from 'react';
+import { motion, AnimatePresence } from 'motion/react';
+import { Mic, MicOff, Stethoscope, Languages, ClipboardList, Info } from 'lucide-react';
+import { GeminiLiveService } from './services/geminiLiveService';
+import { LiveServerMessage } from '@google/genai';
+
+export default function App() {
+  const [isConnected, setIsConnected] = useState(false);
+  const [isRecording, setIsRecording] = useState(false);
+  const [isSpeaking, setIsSpeaking] = useState(false);
+  const [feedbackText, setFeedbackText] = useState<string | null>(null);
+  const [error, setError] = useState<string | null>(null);
+  
+  const liveServiceRef = useRef<GeminiLiveService | null>(null);
+  const audioContextRef = useRef<AudioContext | null>(null);
+  const audioQueueRef = useRef<Int16Array[]>([]);
+  const isPlayingRef = useRef(false);
+
+  const playNextInQueue = useCallback(async () => {
+    if (isPlayingRef.current || audioQueueRef.current.length === 0 || !audioContextRef.current) return;
+
+    isPlayingRef.current = true;
+    setIsSpeaking(true);
+
+    const pcmData = audioQueueRef.current.shift()!;
+    const buffer = audioContextRef.current.createBuffer(1, pcmData.length, 24000);
+    const channelData = buffer.getChannelData(0);
+
+    for (let i = 0; i < pcmData.length; i++) {
+      channelData[i] = pcmData[i] / 0x7FFF;
+    }
+
+    const source = audioContextRef.current.createBufferSource();
+    source.buffer = buffer;
+    source.connect(audioContextRef.current.destination);
+    
+    source.onended = () => {
+      isPlayingRef.current = false;
+      if (audioQueueRef.current.length === 0) {
+        setIsSpeaking(false);
+      }
+      playNextInQueue();
+    };
+
+    source.start();
+  }, []);
+
+  const handleMessage = useCallback((message: LiveServerMessage) => {
+    // Handle audio output
+    const base64Audio = message.serverContent?.modelTurn?.parts?.[0]?.inlineData?.data;
+    if (base64Audio) {
+      const binaryString = atob(base64Audio);
+      const len = binaryString.length;
+      const bytes = new Uint8Array(len);
+      for (let i = 0; i < len; i++) {
+        bytes[i] = binaryString.charCodeAt(i);
+      }
+      const pcmData = new Int16Array(bytes.buffer);
+      audioQueueRef.current.push(pcmData);
+      
+      if (!audioContextRef.current) {
+        audioContextRef.current = new AudioContext({ sampleRate: 24000 });
+      }
+      playNextInQueue();
+    }
+
+    // Handle text output (for "Gere a tabela")
+    const text = message.serverContent?.modelTurn?.parts?.[0]?.text;
+    if (text && (text.includes('Disse:') || text.includes('Correção:'))) {
+      setFeedbackText(text);
+    }
+
+    // Handle interruption
+    if (message.serverContent?.interrupted) {
+      audioQueueRef.current = [];
+      isPlayingRef.current = false;
+      setIsSpeaking(false);
+    }
+  }, [playNextInQueue]);
+
+  const toggleConnection = async () => {
+    if (isConnected) {
+      liveServiceRef.current?.disconnect();
+      setIsConnected(false);
+      setIsRecording(false);
+      setIsSpeaking(false);
+    } else {
+      try {
+        setError(null);
+        if (!liveServiceRef.current) {
+          liveServiceRef.current = new GeminiLiveService();
+        }
+        await liveServiceRef.current.connect({
+          onOpen: () => {
+            setIsConnected(true);
+            setIsRecording(true);
+          },
+          onClose: () => {
+            setIsConnected(false);
+            setIsRecording(false);
+          },
+          onMessage: handleMessage,
+          onError: (err) => {
+            setError("Connection error. Please check your API key.");
+            setIsConnected(false);
+          },
+          onInterrupted: () => {
+            // Handled in handleMessage
+          }
+        });
+      } catch (err) {
+        setError("Failed to connect to Gemini Live.");
+      }
+    }
+  };
+
+  useEffect(() => {
+    return () => {
+      liveServiceRef.current?.disconnect();
+      audioContextRef.current?.close();
+    };
+  }, []);
+
+  return (
+    <div className="min-h-screen flex flex-col items-center justify-center p-6 relative">
+      <div className="atmosphere" />
+      
+      <header className="absolute top-8 left-8 flex items-center gap-3">
+        <div className="w-10 h-10 rounded-full bg-orange-500 flex items-center justify-center shadow-lg">
+          <Stethoscope className="text-white w-6 h-6" />
+        </div>
+        <div>
+          <h1 className="text-xl font-serif font-light tracking-wide">Hygiéniste Pro</h1>
+          <p className="text-[10px] uppercase tracking-[0.2em] text-orange-400 font-medium">Bienne, Suisse</p>
+        </div>
+      </header>
+
+      <main className="w-full max-w-2xl flex flex-col items-center gap-12">
+        <AnimatePresence mode="wait">
+          {!isConnected ? (
+            <motion.div 
+              key="start"
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.9 }}
+              className="text-center space-y-8"
+            >
+              <div className="space-y-4">
+                <h2 className="text-5xl font-serif font-light leading-tight">
+                  Pratiquez votre <br />
+                  <span className="italic text-orange-500">Français Médical</span>
+                </h2>
+                <p className="text-zinc-400 max-w-md mx-auto text-sm leading-relaxed">
+                  Entraînez-vous avec un patient virtuel suisse. 
+                  Améliorez votre vocabulaire professionnel en temps réel.
+                </p>
+              </div>
+
+              <button 
+                onClick={toggleConnection}
+                className="group relative px-12 py-4 rounded-full bg-white text-black font-medium transition-all hover:scale-105 active:scale-95 overflow-hidden"
+              >
+                <div className="absolute inset-0 bg-orange-500 translate-y-full group-hover:translate-y-0 transition-transform duration-300" />
+                <span className="relative z-10 flex items-center gap-2 group-hover:text-white transition-colors">
+                  Commencer la séance
+                </span>
+              </button>
+              
+              {error && <p className="text-red-400 text-xs mt-4">{error}</p>}
+            </motion.div>
+          ) : (
+            <motion.div 
+              key="active"
+              initial={{ opacity: 0, scale: 0.9 }}
+              animate={{ opacity: 1, scale: 1 }}
+              className="w-full flex flex-col items-center gap-12"
+            >
+              <div className="relative">
+                <div className={`w-48 h-48 rounded-full flex items-center justify-center glass-card transition-all duration-500 ${isRecording ? 'recording-glow' : ''}`}>
+                  {isSpeaking ? (
+                    <div className="speaking-wave">
+                      {[1, 2, 3, 4, 5].map((i) => (
+                        <motion.div 
+                          key={i}
+                          className="wave-bar"
+                          animate={{ height: [10, 40, 10] }}
+                          transition={{ repeat: Infinity, duration: 0.8, delay: i * 0.1 }}
+                        />
+                      ))}
+                    </div>
+                  ) : (
+                    <Mic className={`w-12 h-12 ${isRecording ? 'text-orange-500' : 'text-zinc-500'}`} />
+                  )}
+                </div>
+                
+                <div className="absolute -bottom-4 left-1/2 -translate-x-1/2 px-4 py-1 rounded-full bg-black/50 backdrop-blur-md border border-white/10 text-[10px] uppercase tracking-widest">
+                  {isSpeaking ? 'Le patient parle...' : 'À vous de parler'}
+                </div>
+              </div>
+
+              <div className="grid grid-cols-3 gap-4 w-full">
+                <StatusCard icon={<Languages size={16} />} label="Langue" value="Français (CH)" />
+                <StatusCard icon={<ClipboardList size={16} />} label="Phase" value="Roleplay" />
+                <StatusCard icon={<Info size={16} />} label="Lieu" value="Bienne, BE" />
+              </div>
+
+              <button 
+                onClick={toggleConnection}
+                className="flex items-center gap-2 text-zinc-500 hover:text-red-400 transition-colors text-sm uppercase tracking-widest"
+              >
+                <MicOff size={16} />
+                Terminer la connexion
+              </button>
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        <AnimatePresence>
+          {feedbackText && (
+            <motion.div 
+              initial={{ opacity: 0, y: 40 }}
+              animate={{ opacity: 1, y: 0 }}
+              className="w-full glass-card rounded-3xl p-8 space-y-6 max-h-[400px] overflow-y-auto custom-scrollbar"
+            >
+              <div className="flex items-center justify-between border-b border-white/10 pb-4">
+                <h3 className="font-serif text-xl italic">Récapitulatif de la séance</h3>
+                <button 
+                  onClick={() => setFeedbackText(null)}
+                  className="text-zinc-500 hover:text-white"
+                >
+                  Fermer
+                </button>
+              </div>
+              <div className="whitespace-pre-wrap font-mono text-sm text-zinc-300 leading-relaxed">
+                {feedbackText}
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </main>
+
+      <footer className="absolute bottom-8 text-[10px] text-zinc-600 uppercase tracking-[0.3em]">
+        Interactive Voice Training System &copy; 2026
+      </footer>
+    </div>
+  );
+}
+
+function StatusCard({ icon, label, value }: { icon: ReactNode, label: string, value: string }) {
+  return (
+    <div className="glass-card rounded-2xl p-4 flex flex-col gap-1 items-center text-center">
+      <div className="text-orange-500 mb-1">{icon}</div>
+      <span className="text-[9px] uppercase tracking-wider text-zinc-500">{label}</span>
+      <span className="text-xs font-medium">{value}</span>
+    </div>
+  );
+}
+

src/index.css

@@ -0,0 +1,76 @@
+@import "tailwindcss";
+
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+  --font-serif: "Cormorant Garamond", serif;
+}
+
+:root {
+  --color-bg: #0a0502;
+  --color-accent: #ff4e00;
+  --glass-surface: rgba(255, 80, 20, 0.1);
+  --glass-border: rgba(255, 200, 150, 0.1);
+}
+
+body {
+  background-color: var(--color-bg);
+  color: #fff;
+  overflow: hidden;
+}
+
+.atmosphere {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  background: 
+    radial-gradient(circle at 50% 30%, #3a1510 0%, transparent 60%),
+    radial-gradient(circle at 10% 80%, var(--color-accent) 0%, transparent 50%);
+  filter: blur(80px);
+  opacity: 0.6;
+  z-index: -1;
+  animation: pulse 15s ease-in-out infinite alternate;
+}
+
+@keyframes pulse {
+  0% { opacity: 0.4; transform: scale(1); }
+  100% { opacity: 0.7; transform: scale(1.1); }
+}
+
+.glass-card {
+  background: var(--glass-surface);
+  backdrop-filter: blur(40px);
+  border: 1px solid var(--glass-border);
+  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.3);
+}
+
+.recording-glow {
+  box-shadow: 0 0 20px rgba(255, 78, 0, 0.5);
+  animation: glow 1.5s ease-in-out infinite alternate;
+}
+
+@keyframes glow {
+  0% { box-shadow: 0 0 10px rgba(255, 78, 0, 0.3); }
+  100% { box-shadow: 0 0 30px rgba(255, 78, 0, 0.8); }
+}
+
+.speaking-wave {
+  display: flex;
+  align-items: center;
+  gap: 4px;
+}
+
+.wave-bar {
+  width: 3px;
+  height: 10px;
+  background: var(--color-accent);
+  border-radius: 2px;
+  animation: wave 1s ease-in-out infinite;
+}
+
+@keyframes wave {
+  0%, 100% { height: 10px; }
+  50% { height: 30px; }
+}
+

src/main.tsx

@@ -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>,
+);

src/services/geminiLiveService.ts

@@ -0,0 +1,160 @@
+import { GoogleGenAI, LiveServerMessage, Modality } from "@google/genai";
+
+export enum AppPhase {
+  ROLEPLAY = 'roleplay',
+  FEEDBACK = 'feedback'
+}
+
+export interface LiveSessionCallbacks {
+  onOpen?: () => void;
+  onClose?: () => void;
+  onMessage?: (message: LiveServerMessage) => void;
+  onError?: (error: any) => void;
+  onInterrupted?: () => void;
+}
+
+export class GeminiLiveService {
+  private ai: GoogleGenAI;
+  private session: any = null;
+  private audioContext: AudioContext | null = null;
+  private workletNode: AudioWorkletNode | null = null;
+  private stream: MediaStream | null = null;
+
+  constructor() {
+    this.ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY });
+  }
+
+  async connect(callbacks: LiveSessionCallbacks) {
+    const systemInstruction = `
+You are a virtual dental patient in a Swiss clinic (Bienne, Canton de Berne). The user is your dental hygienist, a native Brazilian Portuguese speaker currently at a B1 French level, training to improve her professional French.
+
+Your behavior is divided into two strict phases: Phase 1 (Roleplay) and Phase 2 (Feedback).
+
+Phase 1: Voice Roleplay
+Act as a patient undergoing a 60-minute hygiene session. The flow is: Anamnesis -> Scaling (Détartrage) -> Polishing (Polissage) -> Fluoridation.
+Let the user lead the conversation. Do not anticipate her lines.
+Keep your answers highly concise (1-2 short sentences maximum).
+Speak entirely in French.
+Vary your language skills: use Swiss-French regionalisms (e.g., septante, huitante, lolette, chanterelle). As Bienne is bilingual, occasionally drop in a basic Swiss-German greeting or loanword (e.g., "Grüessech", "Merci vielmal").
+Incorporate natural small talk at the beginning or during pauses (e.g., weather, CFF/SBB trains, holidays).
+Occasionally ask administrative questions, such as the estimated cost in CHF or if the treatment is covered by basic health insurance (assurance de base / LAMal).
+During the scaling phase, occasionally simulate sudden pain or sensitivity (e.g., "Aïe !", "C'est sensible ici") to test her clinical response.
+NEVER break character, offer advice, or correct her French during the roleplay.
+FORMATTING: Do not use emojis, asterisks, bolding, bullet points, or any markdown. Use only plain text and standard punctuation to ensure smooth text-to-speech playback.
+Continue the roleplay until the user explicitly says: "Fin de la séance", "Fim da consulta", "Fim da sessão" or "Session terminée".
+
+Phase 2: Feedback & Recap (Post-Roleplay)
+Trigger this phase ONLY when the user uses one of the termination phrases above.
+Drop the patient persona and act as an expert French language tutor.
+Respond with exactly two spoken sentences in Brazilian Portuguese: First, encourage her. Second, highlight one main area of improvement regarding her medical vocabulary or B1-to-B2 grammar progression.
+Conclude by asking her to say "Gere a tabela" if she wants to see a detailed written breakdown of her mistakes.
+
+If the user says "Gere a tabela", provide a structured text response. List the errors clearly in plain text (not a markdown table) using this format for each mistake:
+Disse: [What she said in FR]
+Correção: [Correction in FR]
+Explicação: [Explanation in PT-BR]
+    `.trim();
+
+    this.session = await this.ai.live.connect({
+      model: "gemini-2.5-flash-native-audio-preview-12-2025",
+      config: {
+        systemInstruction,
+        responseModalities: [Modality.AUDIO],
+        speechConfig: {
+          voiceConfig: { prebuiltVoiceConfig: { voiceName: "Zephyr" } },
+        },
+      },
+      callbacks: {
+        onopen: () => {
+          console.log("Live session opened");
+          callbacks.onOpen?.();
+          this.startAudioCapture();
+        },
+        onmessage: (message: LiveServerMessage) => {
+          if (message.serverContent?.interrupted) {
+            callbacks.onInterrupted?.();
+          }
+          callbacks.onMessage?.(message);
+        },
+        onclose: () => {
+          console.log("Live session closed");
+          callbacks.onClose?.();
+          this.stopAudioCapture();
+        },
+        onerror: (error) => {
+          console.error("Live session error:", error);
+          callbacks.onError?.(error);
+        },
+      },
+    });
+  }
+
+  private async startAudioCapture() {
+    try {
+      this.audioContext = new AudioContext({ sampleRate: 16000 });
+      this.stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const source = this.audioContext.createMediaStreamSource(this.stream);
+
+      // We need an AudioWorklet to handle raw PCM data
+      await this.audioContext.audioWorklet.addModule(this.getWorkletUrl());
+      this.workletNode = new AudioWorkletNode(this.audioContext, 'input-processor');
+
+      this.workletNode.port.onmessage = (event) => {
+        if (this.session && event.data) {
+          const base64Data = this.arrayBufferToBase64(event.data);
+          this.session.sendRealtimeInput({
+            audio: { data: base64Data, mimeType: 'audio/pcm;rate=16000' }
+          });
+        }
+      };
+
+      source.connect(this.workletNode);
+    } catch (err) {
+      console.error("Error starting audio capture:", err);
+    }
+  }
+
+  private stopAudioCapture() {
+    this.stream?.getTracks().forEach(track => track.stop());
+    this.workletNode?.disconnect();
+    this.audioContext?.close();
+  }
+
+  private arrayBufferToBase64(buffer: ArrayBuffer): string {
+    let binary = '';
+    const bytes = new Uint8Array(buffer);
+    const len = bytes.byteLength;
+    for (let i = 0; i < len; i++) {
+      binary += String.fromCharCode(bytes[i]);
+    }
+    return btoa(binary);
+  }
+
+  private getWorkletUrl(): string {
+    const code = `
+      class InputProcessor extends AudioWorkletProcessor {
+        process(inputs, outputs, parameters) {
+          const input = inputs[0];
+          if (input.length > 0) {
+            const channelData = input[0];
+            // Convert Float32 to Int16
+            const pcmData = new Int16Array(channelData.length);
+            for (let i = 0; i < channelData.length; i++) {
+              pcmData[i] = Math.max(-1, Math.min(1, channelData[i])) * 0x7FFF;
+            }
+            this.port.postMessage(pcmData.buffer);
+          }
+          return true;
+        }
+      }
+      registerProcessor('input-processor', InputProcessor);
+    `;
+    const blob = new Blob([code], { type: 'application/javascript' });
+    return URL.createObjectURL(blob);
+  }
+
+  disconnect() {
+    this.session?.close();
+    this.stopAudioCapture();
+  }
+}

tsconfig.json

@@ -0,0 +1,26 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

vite.config.ts

@@ -0,0 +1,24 @@
+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import {defineConfig, loadEnv} from 'vite';
+
+export default defineConfig(({mode}) => {
+  const env = loadEnv(mode, '.', '');
+  return {
+    plugins: [react(), tailwindcss()],
+    define: {
+      'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+    },
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, '.'),
+      },
+    },
+    server: {
+      // HMR is disabled in AI Studio via DISABLE_HMR env var.
+      // Do not modify—file watching is disabled to prevent flickering during agent edits.
+      hmr: process.env.DISABLE_HMR !== 'true',
+    },
+  };
+});