Technical_Details.md

Technical Details

Tech Stack

Frontend

• JS Framework: SvelteKit meta framework for Svelte, also using TypeScript
• Design and Components: TailwindCSS along with Skeleton UI
• Query Helper : Tanstack Query for fetching and managing asynchronous data.

Backend

• API: trpc for API
• Database : PostgreSQL hosted on NeonDB and with Drizzle for ORM.
• Authentication : Using Auth Server of BetterAuth in tsc_users repository.
• Hosting Provider : Netlify for hosting our website and API. As currently our backend is Edge Compatible so we are using Netlift Edge Functions for API.

Data Processing

• Transliteration: Lipi Lekhika
• Data Source: Valmiki Ramayanam - Wikisource
• Scripts Associated the tasks in data/ramaayana/:
  • get_raw_data.py: Fetches the data from the Wikisource and stores it in data/ramaayana/raw_data/. It prefers to fetch the data from the cached zip instead also of directly fetching from the Wikisource(as the source might be edited which would cause inconsitent results).
  • get_text.py: Processes the raw data and stores the text in data/ramaayana/text_data/.
  • get_json.py: Processes the text data and stores the JSON in data/ramaayana/data/.
  • make_excel_files.ts: Processes the JSON data and stores the Excel files in data/ramaayana/out/.
  • run_tests.py: Runs the tests on the JSON data, and saves the generated test result in data/ramayan/test_out.md.
• Raw Data Cached Zip of Extarcted HTML on raw data release

Shloka Image Generation

• These are the images generated for automating the processs of which would have been done manually with photoshop.
• FabricJS is used to render the elements on the canvas. Scaling and positioning of the elements is done manually via custom formulas.
• As the native Text object had problems rendering indic text properly on the canvas we had to to use wasm version of harfbuzz.
• The harfbuzzjs library was not directlt usable in the browser. So I had to modify it from the example in https://harfbuzz.github.io/harfbuzzjs/ to work with vite in browser and also nake it compatible with Web Workers API.

AI Imaage Generation and AI Shloka Translation

• We are using OpenAI and Anthropic for the AI image generation and translation.
• Image
  • First we generate the image prompt using shloka text and available english translation. using gpt-4o and claude-3.7-sonnet model.
  • Then finally we use dall-e-3 model to generate the image.
• Shloka Translation
  • We use gpt-4o and claude-3.7-sonnet model to translate the text.
  • The entire shloka text is provided along with the translation to generate English and Indian language translations.