|
|
| <!doctype html> |
| <html> |
| <head> |
| <meta charset="utf-8" /> |
| <meta name="viewport" content="width=device-width, initial-scale=1" /> |
|
|
| <title>English to Urdu Translator</title> |
|
|
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@stlite/browser@0.85.1/build/stlite.css" /> |
| <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/@stlite/browser@0.85.1/build/style.css" /> |
| </head> |
|
|
| <body> |
| <streamlit-app> |
|
|
| import json |
| import streamlit as st |
| from pyodide.code import run_js |
| from js import JSON |
|
|
| # Model names |
| URDU_MODEL = "Xenova/opus-mt-en-ur" |
| FRENCH_MODEL = "Xenova/opus-mt-en-fr" |
|
|
| st.set_page_config( |
| page_title="English Translator", |
| page_icon="🌍" |
| ) |
|
|
| # Student information |
| st.title("Dawar Shariq | B04-0923-000022") |
| st.subheader("English to Urdu / French Translator") |
|
|
| st.write( |
| "Enter English text below to translate it into Urdu. " |
| "If Urdu is unavailable, French translation will be used." |
| ) |
|
|
| # Load and cache translation models |
| if "translator" not in st.session_state: |
| st.session_state["translator"] = None |
|
|
| if "language" not in st.session_state: |
| st.session_state["language"] = None |
|
|
| if "model_name" not in st.session_state: |
| st.session_state["model_name"] = None |
|
|
| # Input widget |
| text = st.text_area( |
| "Enter English Text:", |
| height=150, |
| max_chars=2000, |
| placeholder="Type your English text here..." |
| ) |
|
|
| # Translation button |
| if st.button("Translate"): |
|
|
| if not text.strip(): |
| st.warning("Please enter some English text first.") |
|
|
| else: |
| try: |
| # Load Transformers.js |
| if st.session_state["translator"] is None: |
|
|
| msg = st.empty() |
| msg.info("Loading translation model... Please wait.") |
|
|
| mod = await run_js( |
| "import('https://cdn.jsdelivr.net/npm/@huggingface/transformers@3.8.1')" |
| ) |
|
|
| # Try Urdu model first |
| try: |
| translator = await mod.pipeline( |
| "translation", |
| URDU_MODEL |
| ) |
|
|
| st.session_state["translator"] = translator |
| st.session_state["language"] = "Urdu" |
| st.session_state["model_name"] = URDU_MODEL |
|
|
| except Exception: |
| # French fallback |
| msg.warning( |
| "Urdu model unavailable. Loading French model..." |
| ) |
|
|
| translator = await mod.pipeline( |
| "translation", |
| FRENCH_MODEL |
| ) |
|
|
| st.session_state["translator"] = translator |
| st.session_state["language"] = "French" |
| st.session_state["model_name"] = FRENCH_MODEL |
|
|
| msg.empty() |
|
|
| # Use cached model |
| translator = st.session_state["translator"] |
|
|
| # Perform translation |
| raw = await translator(text) |
|
|
| result = json.loads(JSON.stringify(raw))[0] |
|
|
| translated_text = result["translation_text"] |
| language = st.session_state["language"] |
|
|
| # Display original text |
| st.subheader("Original English Text") |
| st.write(text) |
|
|
| # Display translated result |
| st.subheader("Translated Text (" + language + ")") |
| st.write(translated_text) |
|
|
| # Required feature: Character counts |
| st.subheader("Character Counts") |
|
|
| english_count = len(text) |
| translated_count = len(translated_text) |
|
|
| col1, col2 = st.columns(2) |
|
|
| with col1: |
| st.metric( |
| "English Characters", |
| english_count |
| ) |
|
|
| with col2: |
| st.metric( |
| language + " Characters", |
| translated_count |
| ) |
|
|
| st.caption( |
| "Model used: " + st.session_state["model_name"] |
| ) |
|
|
| except Exception as e: |
| st.error("Translation failed: " + str(e)) |
|
|
| </streamlit-app> |
|
|
| <script |
| type="module" |
| src="https://cdn.jsdelivr.net/npm/@stlite/browser@0.85.1/build/stlite.js"> |
| </script> |
|
|
| </body> |
| </html> |
|
|
