Multilingual Word Explorer

An interactive learning tool designed to help young children become familiar with words in three languages: English, Thai, and Cantonese.

Overview

The Multilingual Word Explorer App listens to a spoken word in any of these languages, then presents the word's translation in all three languages along with a relevant image and audio pronunciation for each.

Features

• Speech Recognition: Say a word in English, Thai, or Cantonese and the app will recognize it
• Multilingual Support: See and hear words in English, Thai, and Cantonese
• Visual Learning: Each word comes with a relevant image
• Audio Pronunciation: Hear how each word sounds in all three languages
• Child-Friendly Interface: Designed with simplicity for preschool-aged children

Project Structure

multilingual-word-explorer/
├── index.html       # Main HTML file
├── styles.css       # CSS styles
├── app.js           # Core application logic
├── config.js        # Configuration settings
└── README.md        # Project documentation

Setup Instructions

Prerequisites

• Modern web browser (Chrome, Firefox, Safari, Edge)
• Internet connection
• API keys for:
  • OpenAI Whisper API (for speech recognition)
  • Google Cloud Translation API
  • Google Cloud Text-to-Speech API
  • Google Custom Search API

Getting Started

1. Clone or download this repository

   git clone https://github.com/yourusername/multilingual-word-explorer.git
   cd multilingual-word-explorer

2. Install dependencies

   npm install

3. Configure environment variables

   • Create a .env file in the root directory
   • Add your API keys (see .env.example for reference):

     GOOGLE_CLOUD_API_KEY=your_google_cloud_api_key
     TRANSLATION_API_KEY=your_translation_api_key
     TTS_API_KEY=your_tts_api_key
     CUSTOM_SEARCH_API_KEY=your_custom_search_api_key
     CUSTOM_SEARCH_ENGINE_ID=your_search_engine_id
     

Running in a Web Browser

Option 1: Using a Simple HTTP Server (Recommended)

1. Start the development server:

   npm start

2. Open your web browser and navigate to:

   http://localhost:3000
   

Option 2: Direct File Access

1. Install the Live Server extension for VS Code or use Python's built-in server:
   • For Python 3:

     python -m http.server 8000

   • Then open http://localhost:8000 in your browser

Option 3: Using Live Server (VS Code)

1. Install the "Live Server" extension in VS Code
2. Right-click on index.html and select "Open with Live Server"

Deploying to iOS

To deploy as an iOS app:

1. Use a tool like Capacitor or Cordova to wrap the web application
2. Follow the tool's documentation for building and deploying to iOS

Usage

1. Tap the microphone button
2. Speak a word in English, Thai, or Cantonese
3. View the word's translations, image, and hear pronunciations
4. Tap "Listen to Another Word" to start again

Configuration Options

Access the settings menu by tapping the gear icon in the bottom right:

• Multiple Meanings Handling: Choose how the app handles words with multiple meanings
  • "Prompt for clarification" (Default): Shows options for you to choose
  • "Show first result": Automatically selects the most common meaning

Development

Available Scripts

• npm start - Starts the development server
• npm test - Runs the test suite for API integrations
• npm run build - Builds the application for production

API Integration

The application uses the following Google Cloud APIs:

• Google Cloud Translation API - For text translation between languages
• Google Cloud Text-to-Speech - For generating spoken word pronunciations
• Google Custom Search API - For finding relevant images for words

Note for Production Use

When deploying to production:

1. Set up environment variables securely (not in version control)
2. Implement proper CORS configuration
3. Consider rate limiting and API quota management
4. Set up proper error handling and fallback mechanisms
5. Enable only the necessary Google Cloud APIs to minimize security surface

License

This project is created for educational purposes only.