ZAS | Devpost

💡 Inspiration

As developers, we all face the same nightmare: localizing a website. You copy HTML into Google Translate, and it returns a mess. Links like <a href="#home"> become <a href="#المنزل">, classes get translated, and layout breaks. I wanted to build a tool that understands "Code Structure" vs "Content" to solve this forever.

🚀 What it does

ZAS is an intelligent HTML translator. You paste your raw code, select target languages (Arabic, Spanish, French, etc.), and it returns fully translated code that is:

Structure-Safe: It never translates IDs, Classes, or Links.
RTL-Ready: Automatically adds dir="rtl" for Arabic.
Instant: Generates 4 versions of your site in seconds using AI.
Developer-Friendly: Generates a "Language Switcher" snippet to copy-paste into your project.

⚙️ How we built it

I used a "Scientific Approach" rather than just asking AI to rewrite code:

Backend: Built with Python (Flask) hosted on Render.
The Brain: I used Groq (Llama 3.3 70B) for ultra-fast text translation.
The Surgery: I used BeautifulSoup (bs4) to parse the HTML DOM tree. The system extracts only text nodes, sends them to Groq, and injects them back into the original structure. This ensures 100% code integrity.
Frontend: Built with React and Tailwind CSS, hosted on Vercel.
Database/Auth: Used Supabase for authentication and managing user sessions.

🚧 Challenges we ran into

The biggest challenge was "AI Hallucination". Sometimes the model would add conversational text like "Here is your code". Solution: I implemented a self-correcting loop in Python that validates the output. If the output contains non-HTML text, the system automatically rejects it and prompts the AI again to provide "Raw Code Only".

🏆 Accomplishments that we're proud of

Successfully translating complex HTML files (500+ lines) without breaking a single tag.
Implementing a robust fallback mechanism (if Groq is busy, we have backups).
Building a full-stack app from scratch (Frontend + Backend + AI + DB).