Lingo: Learn English With AI✨
Tags: cloudflarechallenge, devchallenge, ai, react
Published: 2024-04-14 23:21:46

*This is a submission for the [Cloudflare AI Challenge](https://dev.to/devteam/join-us-for-the-cloudflare-ai-challenge-3000-in-prizes-5f99).*

## What I Built

English has become the universal language of communication, yet many struggle to learn it, especially non-native speakers. This inspired me to create Lingo, an AI-powered English language learning app. Lingo offers basic English lessons and advanced features to help users refine their language skills.

### Features

- Learn: Lingo's Learn feature offers a curated selection of bite-sized English concepts, carefully crafted to help new learners grasp the basics quickly and effectively. Whether you're just starting your journey or looking to brush up on your skills, our Learn feature provides a solid foundation to build upon.

- Objects: There have been countless times when I've struggled to find the right word in English for something. With Lingo's Objects feature, describing unfamiliar objects in English becomes a breeze. Simply upload an image, and the **resnet-50** image classification model, will detect and identify objects, helping users learn their English names effortlessly.

- Summarize: Reading lengthy texts can be daunting, especially for English learners. Lingo's Summarize feature streamlines this process by offering a quick and efficient way to summarize complex texts. Powered by the state-of-the-art **bart-large-cnn** model, users can easily get key information from long passages either by entering the text directly or even by uploading an image.

- Grammar: Good grammar is essential for effective communication, and Lingo's Grammar feature ensures that users can polish their writing skills with ease. Our AI-powered grammar checker, leveraging the cutting-edge **llama-2-7b-chat-fp16** model, provides instant feedback on grammar and spelling mistakes, helping users refine their language proficiency.

- Concepts: Understanding complex concepts is made simpler with Lingo's Concepts feature. Users can explore a wide range of topics, from science to literature, with simplified explanations and visually engaging content generated by AI. Whether you're struggling with static electricity or photosynthesis, our Concept feature has you covered. For this, I have used the **llama-2-7b-chat-fp16** and **stable-diffusion-xl-lightning** models.

- Translate: For efficient language learning, nothing beats comparing sentences in your native language to English. Lingo's Translate feature allows users to do just that, utilizing the powerful **m2m100-1.2b** model for accurate translation. Whether you're practicing conversation or expanding your vocabulary, our Translate feature is your go-to tool.

## Demo

- Home Page of the website

![Home Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/s83hw01qkmp1gmaoyr60.png)

- Features section listing all features of the website

![Features Section](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/f630jdkkhhh5vcyj450m.png)

- Learn Page showing bite-sized concepts for new learners

![Learn Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/8ysgzhpkvbezy0qipw35.png)

- English Tenses lesson teaching tenses by examples

![English Lesson](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/pui5w3285vsqvmawat11.png)

- Object Detection page that returns the object detected from the image upload
![Object Detection page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/n2noa0sjuklmo83ho7sy.png)

- Summarize Page allows user to either enter text or upload an image for summarization

![Summarize Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/2206xqoj8ub27313fm2b.png)

![Summarize Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/167y1y0k8ficl5h1u3s2.png)

- Grammar Page checks for spelling and grammar mistakes in the text

![Grammar Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/whwylpt0lfxazsba2mrb.png)

- Concepts Page explains difficult concepts in simple words and visualizations

![Concepts Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/b2ooxtultgvv5h73fl8f.png)

- Translate Page translates various languages into English

![Translate Page](https://dev-to-uploads.s3.amazonaws.com/uploads/articles/xi3d5qpzy91j1idagdjd.png)

**You can find link to the website [here](https://lingo.pages.dev/)**

NOTE : If the AI tasks do not return a result please wait for some time and try again. 

## My Code

For creating Lingo, I went with a web application since it can be easily accessed on all devices. I used React as the frontend framework and Cloudflare Pages to create as well as deploy my project. Pages Functions also allows you to add bindings for Workers AI allowing you to seamlessly use AI in your applications.

### Technology Stack:

- Frontend: React
- Deployment: [Cloudflare Pages](https://developers.cloudflare.com/pages/)
- AI Integration: [Cloudflare Workers AI](https://developers.cloudflare.com/workers-ai/)

You can find the link to the Github repo [here](https://github.com/Nupoor10/lingo)

## Journey

I had never used Cloudflare before, so getting started with it took some time as well as experimentation, but I am glad I was able to deliver a functioning website that utilizes a large variety of task types. Moving ahead I wish to integrate database storage and expand the website functionality for users.

Here are all the models I used:

- Text Generation: For the Text Generation feature, I used the ```llama-2-7b-chat-fp16``` model.

- Image Classification: Initially I tried experimenting with the Object Detection model but the Image classification model give me better results so I finally decided to go with the ```resnet-50``` model.

- Text Summarization: For the Text Summarization feature, I used the ```bart-large-cnn``` model.

- Text-to-Image Generation: For the Text-to-Image Generation feature, I used the ```stable-diffusion-xl-lightning``` model.

- Translation: For the Translation feature, I used the ```m2m100-1.2b``` model.

**Multiple Models and/or Triple Task Types**

My project utilizes more than three task types

- Text Generation: ```llama-2-7b-chat-fp16``` model.

- Image Classification: ```resnet-50``` model.

- Text Summarization: ```bart-large-cnn``` model.

- Text-to-Image Generation: ```stable-diffusion-xl-lightning``` model.

- Translation: ```m2m100-1.2b``` model.