@app.route('/translate', methods=['POST']) def translate_jawi_to_rumi(): """ API endpoint to translate Jawi to Rumi """ try: data = request.get_json()

<div class="translation-box"> <label for="outputText">Rumi Translation:</label> <div id="outputText" class="result"></div> </div>

<div class="button-group"> <button onclick="translateText()">Translate to Rumi</button> <button onclick="clearText()" class="clear-btn">Clear All</button> <button onclick="swapText()" class="swap-btn">Swap</button> </div>

.button-group { display: flex; gap: 10px; margin-bottom: 20px; }

jawi_text = "سلامت datang کأ لومبور" result = translator.translate_jawi_to_rumi(jawi_text)

async function googleTranslate(text, sourceLang, targetLang) { // Using Google Translate API via a proxy service const url = `https://translate.googleapis.com/translate_a/single?client=gtx&sl=${sourceLang}&tl=${targetLang}&dt=t&q=${encodeURIComponent(text)}`; const response = await fetch(url); if (!response.ok) { throw new Error(`HTTP error! status: ${response.status}`); } const data = await response.json(); // Parse the response let translation = ''; for (let i = 0; i < data[0].length; i++) { if (data[0][i][0]) { translation += data[0][i][0]; } } return translation; }

.character-count { text-align: right; margin-top: 5px; color: #999; font-size: 12px; } </style> </head> <body> <div class="container"> <h1>Jawi to Rumi Translator</h1> <p class="subtitle">Translate Jawi (Malay-Arabic) to Rumi (Latin-Malay)</p>