ClarityLearn

Inspiration

Ever since I moved to the United States from Russia in 2022, I have started reading difficult books in school. This is why I thought of creating a website/app that would help students with reading their textbooks or worksheets. Oftentimes, they get the context, but the real barrier is understanding the text.

What it does

With ClarityLearn, students in middle school and higher upload an image of their reading. AI will rewrite the text more clearly, depending on the level that the user chooses: Elementary, Middle school, Plain English (tuned specifically for language learners, not just "simpler"), or a Summary mode for the key points. It can translate the text into 6 languages and detect and analyze text from any language (because the AI behind it is OpenAI gpt-5.4-mini). Afterward, the AI can read the text aloud in different voices and speeds. Finally, the user can quiz themselves with AI-generated questions that can be regenerated. Phones are also supported.

How we built it

An HTML/CSS/JavaScript frontend talking to four Vercel serverless functions that call the OpenAI API: gpt-5.4-mini for vision transcription, language detection, and text rewriting, and gpt-4o-mini-tts for speech. A photo is only ever sent to the vision model once, up front; every later action — changing the reading level, translating, regenerating the quiz — reuses that transcription instead of reprocessing the image, which keeps the app fast and cheap to run per use. Read-aloud audio is split into chunks and streamed so a long passage starts playing in a couple of seconds instead of waiting for the whole thing to generate. It's deployed live on Vercel.

Challenges we ran into

First, every time the user would press "Analyze and rewrite", the image and the rewritten version would be saved to History as its own chat. Now, for an individual chat to be saved in History, the user has to create a completely new chat session by pressing "+" in the top left corner and running the analysis system. Second, I had to fix the interface for the phone so the website would work on different devices accordingly. Finally, in order for the AI not to take a long time to read out the text, I created a process of splitting it into chunks. Now, all text is read out in just a couple of seconds.

Accomplishments that we're proud of

Getting the cost model right: one vision API call per photo no matter how many times you re-analyze it, because the transcription is cached and reused. Proving the quiz fix actually works, not just assuming a prompt tweak solved it. We measured the answer distribution before and after. And building read-aloud so it starts playing almost immediately even on a full page of text, instead of the multi-second wait a naive implementation would have.

What we learned

The biggest lesson I learned was how to split up the text into chunks to read it out. I believe this has been a big plus for this project and will become a major benefit in my future builds. Along with that, I learned a lot about connecting different parts of my website (OpenAI API keys, Vercel, HTML & CSS code)

What's next for ClarityLearn

In the future, I would like to build a fully functioning ClarityLearn app. This will be a big move for me, as I have never built and published apps (just websites). Also, even before starting to create the app, I would like to add an account system (where the person can create an account and sign in to see their own chat history).

Built With

• css
• gpt-5.4-mini
• html
• javascript
• openai
• vercel