# Project export: LangUR
This document was generated by HackStack to give an AI agent context about a hackathon project. Sections are labeled with their provenance; content marked as truncated was cut to keep this document small.
## Project metadata
- Hackathon: TreeHacks 2024
- Tagline: LangUR: Your language learning companion. Effortless fluency with personalized articles, translations, and progress tracking. Join us today, and master languages at your leisure!
- Devpost: https://devpost.com/software/polyaiglot
- GitHub: https://github.com/langur-treehacks/langur
- Result: winner (Vespa.ai: Best Hack using a Large Language Model (4x Bose Headphones))
- Team: 4 GitHub contributor(s) — Harshith Senthilkumaran (12 commits), pyraxo (3 commits), Robin (3 commits), Wong Yu Fei (1 commits)
## Devpost submission (written by the team)
### Overview
Learning languages is one thing, but what does it take to be fluent in them? LangUR is a groundbreaking project which bridges the difficult phases of learning languages. In a diverse business world with hundreds of languages being used in high commerical settings, modern applications serve to teach proficiency in langauges, but per a fluency study of Duolingo patrons learning French and Spanish, only 52.94% of 102 French learners reached a pre-intermediate level, and 66.03% of 156 Spanish speakers reached a similar level. (Jiang X, 2021) So the question stands: what helps set apart LangUR from language learning apps that help learners breach a beginner level of linguistic competence? Efficiency. Scalability. Practicality. Uses a grounded evaluation metric to measure your performance (LIX scoring algorithm) Application learns and adapts to individual learner's abilities Learning of language conveniently incorporated into daily workflow Reinforced learning of queries words through review quizzes PostmanAPI: Testing and Integrating API Endpoints Between Frontend and Backend-> enabled synchronous development by different teams Testing of MonsterAPI's inference engine-> enable quick iteration and testing of various baseline models and their associated hyperparameters Facilitated collaboration between Frontend and Backend Team with a shareable link detailing communication format PostmanAPI: Testing and Integrating API Endpoints Between Frontend and Backend-> enabled synchronous development by different teams Testing of MonsterAPI's inference engine-> enable quick iteration and testing of various baseline models and their associated hyperparameters Facilitated collaboration between Frontend and Backend Team with a shareable link detailing communication format Bun: Leveraging Bun as a JavaScript ecosystem for web deployment ultra fast and all in one bundler, runtime and package manager that saved us a lot of time Bun: Leveraging Bun as a JavaScript ecosystem for web deployment ultra fast and all in one bundler, runtime and package manager that saved us a lot of time MonsterAPI: Fine tuning the baseline models and using the inference engines easy to access deployment and fine-tuning platform greatly reduced the learning curve round-clock support by staff made development easier MonsterAPI: Fine tuning the baseline models and using the inference engines easy to access deployment and fine-tuning platform greatly reduced the learning curve round-clock support by staff made development easier Chroma Vector DB: Quick and reliable retrieval of semantic lists and articles for rapid processing with the LLM Engines. Chroma Vector DB: Quick and reliable retrieval of semantic lists and articles for rapid processing with the LLM Engines. Sample on a webpage Research The project's premise and continuity relies very heavily on social research. When Robin was learning his languages, he found that maintaining continuous performance on a daily basis aided his performance in learning a language, and such a trend is commonly correlated with higher testing proportions among students that are fed information on a consistent daily basis when studying, as demonstrated by the American Psychological Society (Mawhinney et al., 1971). Moreover, the concept of integrating language learning seamlessly into daily routines aligns with principles of habit formation and behavioral psychology. By embedding language practice within the natural flow of a user's day, LangUR capitalizes on the psychological phenomenon of habit stacking. This approach leverages existing habits as anchors for new behaviors, making language learning feel less like a burdensome task and more like an integrated aspect of daily life. Stacking habits is quintessential as evidenced for learning, so, how would one be able to consider a new approach to structuring a language learning app based off of this? Let's look back at the presented graph. In any instance, Distributed Practice and Practice Testing appear to be the largest factors associated with higher testing in general study areas, where we based our project idea off of: a gradual but slow streamline of language implementation, albeit slowly and consistently. By being passive and seamless, LangUR has the capability to gradually streamline language learning modes into a user's daily workflow, providing an excellent UI, with a diverse array of features such as translation, suggested articles based off of past history, and progressively improving the user's ability to take in the language with the readability algorithm. We often encounter the issue that learning a language is daunting, requiring continuous effort, where a lot of people simply don't have that time to invest, whereas the practicality of being fluent in languages has a high yield in business returns by eliminating barriers between multinational individuals and corporations. The idea behind LangUR had to critically emphasize the parallel and efficient nature of learning, which other applications failed to consider. Giving users a comfortable experience, automatically determining skill level through a customized LIX Algorithm, and structuring the application to cater to their learning pace was imperative during the building phase. In conclusion, taking into account human study patterns, the demanding needs of learning a language and daily time constraints, LangUR was built with the mindfulness that dedication is always on the users side, but we can do our job to make it as seamless as possible, accessible, and catered to the users.
### What's next
LangUR's potential is unbelievable. It has the ability to drive a stake in the educational world, collectivizing language learners, teachers, students, and anyone through simplicity. As the project's development continues, more functions will be added such as social integrations, connecting learners across the world, and more advanced algorithms will be put in place to create more personalized suggestions, helping people learn their new languages.
## README (from the GitHub repository)
# LangUR: Linguistic Mastery at Your Fingertips
## Learning languages is one thing, but what does it take to be fluent in them?
**LangUR** is a groundbreaking project which bridges the difficult phases of learning languages. In a diverse business world with hundreds of languages being used in high commerical settings, modern applications serve to teach proficiency in langauges, but per a fluency study of Duolingo patrons learning French and Spanish, only 52.94% of 102 French learners reached a pre-intermediate level, and 66.03% of 156 Spanish speakers reached a similar level. (Jiang X, 2021)
## Submission
- [Devpost](https://devpost.com/software/polyaiglot)
- [Pitch Deck](https://www.canva.com/design/DAF9HinNkw0/Yuv1ZjFAmGS2q4FJtvNacA/edit?utm_content=DAF9HinNkw0&utm_campaign=designshare&utm_medium=link2&utm_source=sharebutton)
## So the question stands: what helps set apart LangUR from language learning apps that help learners breach a beginner level of linguistic competence?
## **Efficiency. Scalability. Practicality.**
# Key Features
1. Uses a grounded evaluation metric to measure your performance (LIX scoring algorithm)
2. Application learns and adapts to individual learner's abilities
3. Learning of language conveniently incorporated into daily workflow
4. Reinforced learning of queries words through review quizzes
# Development
This repository hosts the web dashboard of LangUR. The instructions to install and run the [extension](https://github.com/langur-treehacks/langur-ext) and [LLM backend](https://github.com/langur-treehacks/llm) are in their individual repos.
## Installation
1. Clone the repository and install the required dependencies. Using [Bun](https://bun.sh) is optional but highly recommended!
```sh
git clone https://github.com/langur-treehacks/langur.git
cd langur-dashboard
bun i
```
2. Run as needed!
```sh
bun run start
npm start
```
# Research
The project's premise and continuity relies very heavily on social research. When Robin was learning his languages, he found that maintaining continuous performance on a daily basis aided his performance in learning a language, and such a trend is commonly correlated with higher testing proportions among students that are fed information on a consistent daily basis when studying, as demonstrated by the American Psychological Society (Mawhinney et al., 1971).
Moreover, the concept of integrating language learning seamlessly into daily routines aligns with principles of habit formation and behavioral psychology. By embedding language practice within the natural flow of a user's day, LangUR capitalizes on the psychological phenomenon of habit stacking. This approach leverages existing habits as anchors for new behaviors, making language learning feel less like a burdensome task and more like an integrated aspect of daily life. Stacking habits is quintessential as evidenced for learning, so, how would one be able to consider a new approach to structuring a language learning app based off of this? Let's look back at the presented graph.
In any instance, Distributed Practice and Practice Testing appear to be the largest factors associated with higher testing in general study areas, where we based our project idea off of: a gradual but slow streamline of language implementation, albeit slowly and consistently. By being passive and seamless, LangUR has the capability to gradually streamline language learning modes into a user's daily workflow, providing an excellent UI, with a diverse array of features such as translation, suggested articles based off of past history, and progressively improving the user's ability to take in the language with the readability algorithm.
We often encounter the issue that learning a language is daunting, requiring contiuous effort, where a lot of people simply don't have that time to invest, whereas the practicality of being fluent in languages has a high yield in business returns by eliminating barriers between multinational individuals and corporations. The idea behind LangUR had to critically emphasize the parallel and efficient nature of learning, which other applications failed to consider. Giving users a comfortable experience, automatically determining skill level through a customized LIX Algorithm, and structuring the application to cater to their learning pace was imperative during the building phase.
In conclusion, taking into account human study patterns, the demanding needs of learning a language and daily time constraints, LangUR was built with the mindfulness that dedication is always on the users side, but we can do our job to make it as seamless as possible, accessible, and catered to the users.
# Gallery
## Detected evidence (automated analysis)
Indexed codebase: 25 recognized source files, 33 KB.
- CSS (language) — detected in the code
- HTML (language) — detected in the code
- JavaScript (language) — detected in the code
- React (technology) — detected in the code
- Tailwind CSS (technology) — detected in the code
- TypeScript (language) — detected in the code
- Flask (technology) — claimed on Devpost, not found in the code
- Python (language) — claimed on Devpost, not found in the code
## Codebase structure (from repository index)
### Files (36 of 36)
```
.gitignore
.vscode/settings.json
langur-dashboard/.gitignore
langur-dashboard/package.json
langur-dashboard/public/fonts/Poligon Bold.otf
langur-dashboard/public/fonts/Poligon Light.otf
langur-dashboard/public/fonts/Poligon Medium.otf
langur-dashboard/public/fonts/Poligon Regular.otf
langur-dashboard/public/index.html
langur-dashboard/public/manifest.json
langur-dashboard/public/robots.txt
langur-dashboard/src/App.css
langur-dashboard/src/App.tsx
langur-dashboard/src/components/ChatWithAIPage/ChatWithAIPage.module.css
langur-dashboard/src/components/ChatWithAIPage/ChatWithAIPage.tsx
langur-dashboard/src/components/FlashCardReviewPage/ArticleCard.module.css
langur-dashboard/src/components/FlashCardReviewPage/ArticleCard.tsx
langur-dashboard/src/components/FlashCardReviewPage/FlashCard.module.css
langur-dashboard/src/components/FlashCardReviewPage/FlashCard.tsx
langur-dashboard/src/components/FlashCardReviewPage/FlashCardReviewPage.module.css
langur-dashboard/src/components/FlashCardReviewPage/FlashCardReviewPage.tsx
langur-dashboard/src/components/Navbar/Navbar.module.css
langur-dashboard/src/components/Navbar/Navbar.tsx
langur-dashboard/src/components/ProfilePage/ProfilePage.module.css
langur-dashboard/src/components/ProfilePage/ProfilePage.tsx
langur-dashboard/src/components/WelcomePage/WelcomePage.module.css
langur-dashboard/src/components/WelcomePage/WelcomePage.tsx
langur-dashboard/src/index.css
langur-dashboard/src/index.tsx
langur-dashboard/src/react-app-env.d.ts
langur-dashboard/src/reportWebVitals.ts
langur-dashboard/src/routing/routes.tsx
langur-dashboard/src/setupTests.ts
langur-dashboard/tailwind.config.js
langur-dashboard/tsconfig.json
README.md
```
### Dependencies
- langur-dashboard/package.json: @emotion/react@^11.11.3, @emotion/styled@^11.11.0, @mui/material@^5.15.10, @testing-library/jest-dom@^5.17.0, @testing-library/react@^13.4.0, @testing-library/user-event@^13.5.0, @types/react@^18.2.56, @types/react-dom@^18.2.19, localforage@^1.10.0, match-sorter@^6.3.4, react@^18.2.0, react-card-flip@^1.2.2, react-dom@^18.2.0, react-router-dom@^6.22.1, react-scripts@5.0.1, sort-by@^1.2.0, tailwindcss@^3.4.1, typescript@^5.3.3, web-vitals@^2.1.4
### Recent commits (newest first)
- Update readme
- Update readme
- Update readme
- Merge branch 'main' of https://github.com/langur-treehacks/langur
- connected to extension
- Update README.md
- Update README.md
- Update README.md
- Chat Skeleton
- Completed difficulty slider
- Article Picker
- Update README.md
- Profile Page completed
- Link click bug fix
- added word
- Flashcard Screen done
- Welcome page done
- navbar done, TS setup completed
- Initial commit
## Key source files (fetched from GitHub, selected and truncated for size)
### langur-dashboard/package.json
```
{
"name": "langur-dashboard",
"version": "0.1.0",
"private": true,
"dependencies": {
"@emotion/react": "^11.11.3",
"@emotion/styled": "^11.11.0",
"@mui/material": "^5.15.10",
"@testing-library/jest-dom": "^5.17.0",
"@testing-library/react": "^13.4.0",
"@testing-library/user-event": "^13.5.0",
"@types/react": "^18.2.56",
"@types/react-dom": "^18.2.19",
"localforage": "^1.10.0",
"match-sorter": "^6.3.4",
"react": "^18.2.0",
"react-card-flip": "^1.2.2",
"react-dom": "^18.2.0",
"react-router-dom": "^6.22.1",
"react-scripts": "5.0.1",
"sort-by": "^1.2.0",
"web-vitals": "^2.1.4"
},
"scripts": {
"start": "react-scripts start",
"build": "react-scripts build",
"test": "react-scripts test",
"eject": "react-scripts eject"
},
"eslintConfig": {
"extends": [
"react-app",
"react-app/jest"
]
},
"browserslist": {
"production": [
">0.2%",
"not dead",
"not op_mini all"
],
"development": [
"last 1 chrome version",
"last 1 firefox version",
"last 1 safari version"
]
},
"devDependencies": {
"tailwindcss": "^3.4.1",
"typescript": "^5.3.3"
}
}
```
### langur-dashboard/src/App.tsx
```typescript
import { RouterProvider } from "react-router-dom";
import router from "./routing/routes";
import React from 'react';
function App() {
return (
);
}
export default App;
```
### langur-dashboard/src/index.tsx
```typescript
import React from 'react';
import ReactDOM from 'react-dom/client';
import './index.css';
// import './styles/datepicker.css';
// import './styles/timepicker.css';
import App from './App';
import reportWebVitals from './reportWebVitals';
const root = ReactDOM.createRoot(
document.getElementById('root') as HTMLElement
);
root.render(
);
reportWebVitals();
```
### langur-dashboard/tailwind.config.js
```javascript
/** @type {import('tailwindcss').Config} */
module.exports = {
content: [
"./src/**/*.{js,jsx,ts,tsx}",
],
theme: {
extend: {},
},
plugins: [],
}
```
### langur-dashboard/src/setupTests.ts
```typescript
import '@testing-library/jest-dom';
```
### langur-dashboard/src/react-app-env.d.ts
```typescript
///
```
### langur-dashboard/src/reportWebVitals.ts
```typescript
import { ReportHandler } from 'web-vitals';
const reportWebVitals = (onPerfEntry?: ReportHandler) => {
if (onPerfEntry && onPerfEntry instanceof Function) {
import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
getCLS(onPerfEntry);
getFID(onPerfEntry);
getFCP(onPerfEntry);
getLCP(onPerfEntry);
getTTFB(onPerfEntry);
});
}
};
export default reportWebVitals;
```
### langur-dashboard/src/App.css
```css
.App {
text-align: center;
}
.App-logo {
height: 40vmin;
pointer-events: none;
}
@media (prefers-reduced-motion: no-preference) {
.App-logo {
animation: App-logo-spin infinite 20s linear;
}
}
.App-header {
background-color: #282c34;
min-height: 100vh;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: calc(10px + 2vmin);
color: white;
}
.App-link {
color: #61dafb;
}
@keyframes App-logo-spin {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
```
### langur-dashboard/src/index.css
```css
@tailwind base;
@tailwind components;
@tailwind utilities;
/* Custom Fonts */
@font-face {
font-family: 'Poligon';
src: url('../public/fonts/Poligon Regular.otf') format('opentype');
}
@font-face {
font-family: 'Poligon-Bold';
src: url('../public/fonts/Poligon Bold.otf') format('opentype');
}
@font-face {
font-family: 'Poligon-Light';
src: url('../public/fonts/Poligon Light.otf') format('opentype');
}
@font-face {
font-family: 'Poligon-Medium';
src: url('../public/fonts/Poligon Medium.otf') format('opentype');
}
body {
font-family: 'Poligon-Light';
}
```
### langur-dashboard/public/index.html
```html
React App
```
[15 more indexed source files omitted to keep this export small. The full file list is in the Codebase structure section above.]