The problem Lekhak solves

What

Lekhak converts a simple natural language prompt into a beautiful Tailwind UI component , by leveraging the power of OpenAI's GPT-3.

It currently supports 7 types of components:

• Hero Section
• Features Section
• Dashboard
• Vertical Card Grid
• Horizontal Card Grid
• Modal
• Testimonial Section

These components are rendered in the Lekhak playground, which has two sections - a code section and a preview section. After the component is generated, the user can toggle the code section and make changes right in the web app.

Why

Lekhak was conceptualised when my backend-focused friends were frustrated with having to build UI components from scratch every time they wanted to showcase a project.
I was thus looking for a way that would enable them to work on what they like most, while automating and abstracting away the creation of a frontend - thus Lekhak was borne out of a genuine need, and solves this problem by generating well-designed frontend components with TailwindCSS.

How it works

The order of operations can be summarised as :

raw text -> passed to OpenAI GPT-3 API -> returns JSON response of structure of component -> parsed by React template code -> rendered by Sandpack on Lekhak Playground

Example of JSON format generated

Here, I provided the first prompt-completion pair in the OpenAI playground. Through its one-shot completion functionality, GPT-3 generated the corresponding completion pair when prompted a second time.

The JSON response obtained from the GPT-3 completion is then parsed by the React app, which then
-> inserts data into each of the component templates.
-> extracts the theme from the JSON and sends it to the Unsplash API, which returns the top 10 images

Challenges I ran into

• While GPT-3 is usually excellent at few-shot learning, sometimes it ignores the example embedding given, and generates its own invalid JSON format. This JSON then cannot be parsed by the React template code and the application throws an error.
  The key was to find the right combination of temperature and stop sequence parameters, so that these errors could be minimised.

• The GPT-3 API can be fairly slow with returning a response when the OpenAI servers are overloaded. This leads to the component taking as much time as 2 mins to render, which is not ideal with respect to performance.

Note: I came up with the idea of Lekhak a few moths ago, but most of the application was built this week. It has also not been submitted to any other hackathons / competitions.