< Web Application / >

Pollyglot: AI Language Tutor

Back
//
npm install praevisio_labs

Interactive language tutor powered by OpenAI

Parts of this README have been generated with AI.


Purpose: I built this project to cement what I had learned about using the OpenAI library, making API calls to the 'chat' and 'response' endpoints, the difference between 'zero-shot' and 'few-shot' prompting, the impact of 'temperature' and 'stop-sequences', as well as 'frequency penalties' and 'presence penalties', through Scrimba's "Intro to AI Engineering" course in the "AI Engineer Path".

Function: Concise, AI-powered language lessons for travellers, students, or professional pollyglots. Users can choose from 12 languages: Arabic, Australian (a lighthearted Easter Egg), Chinese, Dutch, French, German, Hebrew, Italian, Japanese, Portuguese, Spanish, and Urdu.


Note on the OpenAI API & Free Alternatives


Re: OpenAI API

OpenAI no longer offers $5 in credit to new users, but I highly recommend making the investment over free options like Gemini API. In addition to the excellent documentation:

  • The Fine-Tuning tool allows you to, using either the GUI or API, create fine-tuning jobs from JSONL datasets and use your saved models. It offers less control and deployment options compared to alternatives than SageMaker AI, but is still quite powerful if you're just getting started.
  • The OpenAI Playground allows you to do 'back-of-the-napkin' model evals and experiment with different models (including your own fine-tuned models!) by saving your parameters in unique code snippets
  • For more methodical evals, you can use the Model Evaluation tool and by referencing the eval documentation here as well as the model optimization docs here

Re: Alternatives

If you're set on a no-cost alternative, you can use the Gemini API OpenAI compatibility option. I've compiled some quickstart guides and working API calls in these files:

Quickstart Guides

Sample API Calls


Project Notes

AI Usage: For this project, I really made an effort to use AI as little as possible. I also turned off tab-complete and React snippets. It came at the cost of less intricate design, but paid back in full in the form of my own sanity and helping me remember that I'm still capable of writing a full stack React/Node app without it.

I used AI to generate the README.md file, and to ask for clarification on dependencies, CORS configuration, and to debug the server setup, but I did not use AI to generate any of the actual code for this project. The code is quite simple, and mostly solidifies what I have been learning through The Odin Project and Full Stack Open.

Starter Files: The starter files provided for this project included empty index.html, index.js, and index.css files, as well as 5 images for the flags of France, Japan, Spain, a parrot logo, and a world map. While Figma design template was provided, I opted for a more minimalist approach.

App Function: Pollyglot is an AI-powered language learning application that helps users practice and learn new languages through interactive translation. Built with React and powered by OpenAI's GPT models, it provides instant translations and language learning assistance.


Tech Stack

  • Frontend: React, Vite
  • Backend: Node.js, Express (or Cloudflare Workers for lightweight alternative)
  • AI: OpenAI Models (or Gemini via the Gemini )
  • Styling: External CSS

Prerequisites

  • Node.js (v16 or higher)
  • npm or yarn
  • OpenAI API key

Local Development Setup

This project supports two development setups:

  1. Full-Stack Local Server: Run the React client and a Node.js/Express backend on your machine. This is ideal for developing and testing the backend server logic.
  2. Client with Cloudflare Worker: Run the React client locally and connect to a deployed Cloudflare Worker for API calls. This is a more lightweight setup that mirrors a serverless production environment.