File size: 4,292 Bytes
d0f7894 2a921a3 d0f7894 2a921a3 | 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139 140 141 142 143 144 145 146 147 148 149 150 151 152 153 154 155 156 157 158 159 |
<!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>
|