French Learning - AI Conversation Practice Website

A beautiful, modern website for learning French through real-time, face-to-face conversation practice with an AI French tutor powered by Beyond Presence. Practice speaking French anytime, anywhere with our efficient AI-powered conversation agent.

Features

• French Learning Focus: Specifically designed for French language practice
• 24/7 Availability: Practice French conversation at any time that's convenient for you
• Real-time Face-to-Face Conversation: Natural, real-time video/audio conversation with AI French tutor using Beyond Presence
• Efficient Learning: Learn French faster through immersive conversation practice
• Modern UI: Clean, beautiful interface with French-themed design
• Error Handling: Comprehensive error handling and status messages

Setup Instructions

1. Get your Beyond Presence credentials:

   • Sign up at Beyond Presence Dashboard
   • Get your API key from the dashboard (API Key Management section)
   • Optional: Get your Avatar ID:
     • Browse available avatars in the Beyond Presence dashboard
     • Select an avatar you'd like to use for your French tutor
     • Copy the Avatar ID (if you want a specific avatar, otherwise the system will use a default)

2. Configure the application:

   • Open app.js
   • Replace YOUR_API_KEY_HERE with your actual Beyond Presence API key
   • (Optional) Replace YOUR_AVATAR_ID_HERE with your chosen avatar ID, or leave it as is to use the default

3. Run the website:

   • Simply open index.html in a web browser, or
   • Use a local server (recommended):

     # Using Python 3
     python -m http.server 8000
     
     # Using Node.js (if you have http-server installed)
     npx http-server

   • Open http://localhost:8000 in your browser

How It Works

1. When you click "Start Practicing French", the app:

   • Creates a French learning agent using Beyond Presence API
   • Configures the agent with French language settings and tutoring prompts
   • Creates a real-time session with the agent
   • Embeds the AI avatar in a video container for face-to-face conversation

2. You can then practice speaking French in real-time with the AI tutor:

   • Have natural conversations in French
   • Improve your pronunciation
   • Build confidence through practice
   • Learn at your own pace
   • See and interact with the AI tutor face-to-face

3. Click "End Practice Session" to finish your French practice session

API Integration

This project uses the Beyond Presence API for real-time conversational AI. The integration includes:

• Agent Creation: Creates a specialized French tutor agent with custom system prompts
• Session Management: Handles real-time session creation and management
• Avatar Embedding: Embeds the AI avatar using iframe for face-to-face interaction
• Error Handling: Comprehensive error handling for API calls

API Endpoints Used

• POST /v1/agents - Create a new French learning agent
• POST /v1/agents/{agent_id}/sessions - Create a real-time session
• DELETE /v1/sessions/{session_id} - End a session

Files

• index.html - Main HTML structure
• styles.css - Styling for the website
• app.js - JavaScript logic for Beyond Presence API integration
• README.md - This file

Notes

• Make sure you have a stable internet connection
• The website requires browser permissions for microphone and camera
• CORS may be an issue if running from file:// protocol - use a local server instead
• Beyond Presence offers a free tier with 2,000 credits per month for development
• For production use, consider using the Beyond Presence SDK (@bey-dev/sdk) via npm for better integration

Alternative: Using Beyond Presence SDK

For a more robust integration, you can use the official Beyond Presence SDK:

npm install @bey-dev/sdk

Then in app.js, you can import and use it:

import { Bey } from '@bey-dev/sdk';

const bey = new Bey({ apiKey: BEY_API_KEY });
// Use bey.createAgent(), bey.createSession(), etc.

Resources

• Beyond Presence Documentation
• Beyond Presence API Reference
• Beyond Presence Pricing