Rockingcool/india-translator
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Compare commits

base: Rockingcool:12d53370fb50866d8e58a861743bdcfc8c47ed7b
Branches Tags
Rockingcool:master Rockingcool:resizeSvg
...
compare: Rockingcool:master
Branches Tags
Rockingcool:master Rockingcool:resizeSvg

7 Commits
12d53370fb ... master

Author SHA1 Message Date
Aadhavan Srinivasan
8f7d4e477f Added my name to the bottom 2025-06-29 17:34:24 -05:00
Aadhavan Srinivasan
945d3d6526 Paying my dues 2025-05-28 08:53:57 -04:00
Aadhavan Srinivasan
485a3efd8f Added HTML sanitization for translate server 2025-04-19 10:43:42 -04:00
Aadhavan Srinivasan
17878106d4 Added maximum length to input text 2025-04-18 22:03:49 -05:00
Aadhavan Srinivasan
67fc0d4297 Added changes from production use 2025-04-18 22:02:07 -05:00
Aadhavan Srinivasan
6716a4cd40 Updated styling for buttons and textbox; made some flexbox changes 2025-04-18 22:01:50 -05:00
Aadhavan Srinivasan
4e4570ed03 Font resizing stuff; looks better on desktop and mobile now 2025-04-16 16:03:38 -05:00
6 changed files with 105 additions and 16 deletions
Expand all files Collapse all files

3
golangServer/go.mod
View File

@@ -9,14 +9,17 @@ require (
cloud.google.com/go/compute/metadata v0.6.0 // indirect
cloud.google.com/go/longrunning v0.6.2 // indirect
cloud.google.com/go/translate v1.12.3 // indirect
github.com/aymerick/douceur v0.2.0 // indirect
github.com/felixge/httpsnoop v1.0.4 // indirect
github.com/go-logr/logr v1.4.2 // indirect
github.com/go-logr/stdr v1.2.2 // indirect
github.com/google/s2a-go v0.1.8 // indirect
github.com/googleapis/enterprise-certificate-proxy v0.3.4 // indirect
github.com/googleapis/gax-go/v2 v2.14.0 // indirect
github.com/gorilla/css v1.0.1 // indirect
github.com/jmoiron/sqlx v1.4.0 // indirect
github.com/mattn/go-sqlite3 v1.14.24 // indirect
github.com/microcosm-cc/bluemonday v1.0.27 // indirect
go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.54.0 // indirect
go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.54.0 // indirect
go.opentelemetry.io/otel v1.29.0 // indirect

6
golangServer/go.sum
View File

@@ -11,6 +11,8 @@ cloud.google.com/go/longrunning v0.6.2/go.mod h1:k/vIs83RN4bE3YCswdXC5PFfWVILjm3
cloud.google.com/go/translate v1.12.3 h1:XJ7LipYJi80BCgVk2lx1fwc7DIYM6oV2qx1G4IAGQ5w=
cloud.google.com/go/translate v1.12.3/go.mod h1:qINOVpgmgBnY4YTFHdfVO4nLrSBlpvlIyosqpGEgyEg=
filippo.io/edwards25519 v1.1.0/go.mod h1:BxyFTGdWcka3PhytdK4V28tE5sGfRvvvRV7EaN4VDT4=
github.com/aymerick/douceur v0.2.0 h1:Mv+mAeH1Q+n9Fr+oyamOlAkUNPWPlA8PPGR0QAaYuPk=
github.com/aymerick/douceur v0.2.0/go.mod h1:wlT5vV2O3h55X9m7iVYN0TBM0NH/MmbLnd30/FjWUq4=
github.com/felixge/httpsnoop v1.0.4 h1:NFTV2Zj1bL4mc9sqWACXbQFVBBg2W3GPvqp8/ESS2Wg=
github.com/felixge/httpsnoop v1.0.4/go.mod h1:m8KPJKqk1gH5J9DgRY2ASl2lWCfGKXixSwevea8zH2U=
github.com/go-logr/logr v1.2.2/go.mod h1:jdQByPbusPIv2/zmleS9BjJVeZ6kBagPoEUsqbVz/1A=
@@ -25,12 +27,16 @@ github.com/googleapis/enterprise-certificate-proxy v0.3.4 h1:XYIDZApgAnrN1c855gT
github.com/googleapis/enterprise-certificate-proxy v0.3.4/go.mod h1:YKe7cfqYXjKGpGvmSg28/fFvhNzinZQm8DGnaburhGA=
github.com/googleapis/gax-go/v2 v2.14.0 h1:f+jMrjBPl+DL9nI4IQzLUxMq7XrAqFYB7hBPqMNIe8o=
github.com/googleapis/gax-go/v2 v2.14.0/go.mod h1:lhBCnjdLrWRaPvLWhmc8IS24m9mr07qSYnHncrgo+zk=
github.com/gorilla/css v1.0.1 h1:ntNaBIghp6JmvWnxbZKANoLyuXTPZ4cAMlo6RyhlbO8=
github.com/gorilla/css v1.0.1/go.mod h1:BvnYkspnSzMmwRK+b8/xgNPLiIuNZr6vbZBTPQ2A3b0=
github.com/jmoiron/sqlx v1.4.0 h1:1PLqN7S1UYp5t4SrVVnt4nUVNemrDAtxlulVe+Qgm3o=
github.com/jmoiron/sqlx v1.4.0/go.mod h1:ZrZ7UsYB/weZdl2Bxg6jCRO9c3YHl8r3ahlKmRT4JLY=
github.com/lib/pq v1.10.9/go.mod h1:AlVN5x4E4T544tWzH6hKfbfQvm3HdbOxrmggDNAPY9o=
github.com/mattn/go-sqlite3 v1.14.22/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
github.com/mattn/go-sqlite3 v1.14.24 h1:tpSp2G2KyMnnQu99ngJ47EIkWVmliIizyZBfPrBWDRM=
github.com/mattn/go-sqlite3 v1.14.24/go.mod h1:Uh1q+B4BYcTPb+yiD3kU8Ct7aC0hY9fxUwlHK0RXw+Y=
github.com/microcosm-cc/bluemonday v1.0.27 h1:MpEUotklkwCSLeH+Qdx1VJgNqLlpY2KXwXFM08ygZfk=
github.com/microcosm-cc/bluemonday v1.0.27/go.mod h1:jFi9vgW+H7c3V0lb6nR74Ib/DIB5OBs92Dimizgw2cA=
go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.54.0 h1:r6I7RJCN86bpD/FQwedZ0vSixDpwuWREjW9oRMsmqDc=
go.opentelemetry.io/contrib/instrumentation/google.golang.org/grpc/otelgrpc v0.54.0/go.mod h1:B9yO6b04uB80CzjedvewuqDhxJxi11s7/GtiGa8bAjI=
go.opentelemetry.io/contrib/instrumentation/net/http/otelhttp v0.54.0 h1:TT4fX+nBOA/+LUkobKGW1ydGcn+G3vRw9+g5HwCphpk=

8
golangServer/testing.go
View File

@@ -16,6 +16,8 @@ import (
translate "cloud.google.com/go/translate/apiv3"
"cloud.google.com/go/translate/apiv3/translatepb"
"github.com/microcosm-cc/bluemonday"
)
const project_id string = "india-translate-testing-452100"
@@ -72,6 +74,7 @@ var lang_codes []string = []string{
}
var db *sqlx.DB
var p *bluemonday.Policy
func cleanup() {
db.Close()
@@ -149,6 +152,7 @@ func translateTextHelper(projectID string, sourceLang string, targetLang string,
func handler(w http.ResponseWriter, r *http.Request) {
queries := r.URL.Query()
toTranslate := queries["query"][0]
toTranslate = p.Sanitize(toTranslate)
if ok, translation := getCachedTranslation(toTranslate); ok {
translationJson, _ := json.Marshal(translation)
@@ -182,6 +186,10 @@ func main() {
panic(err)
}
defer db.Close()
// HTML sanitization
p = bluemonday.UGCPolicy()
// Catch signal
sigs := make(chan os.Signal, 1)
signal.Notify(sigs)

85
index.html
View File

@@ -58,7 +58,8 @@
visibility: hidden;
font-family: "Noto Sans";
/* font-size:1.2em; */
font-size: max(0.8vmax, 16px);
/* font-size: max(0.8vmax, 16px);*/
font-size: 1.2em;
}
.romanizationText {
@@ -114,7 +115,8 @@
section#textStuff {
min-width: 30em;
flex: 0 1 0;
/* flex: 0 1 0; */
flex: 0 0 auto;
}
section#textStuff ul {
@@ -127,6 +129,62 @@
margin: 1em 0;
}
#query {
font-size: 1em;
padding: 6px 8px;
margin-right: 1em;
}
#submitButton {
appearance: none;
background-color: #2ea44f;
border: 1px solid rgba(27, 31, 35, .15);
border-radius: 6px;
box-shadow: rgba(27, 31, 35, .1) 0 1px 0;
box-sizing: border-box;
color: #fff;
cursor: pointer;
display: inline-block;
font-size: 1em;
font-weight: 600;
line-height: 1.2em;
padding: 6px 16px;
position: relative;
text-align: center;
text-decoration: none;
user-select: none;
-webkit-user-select: none;
touch-action: manipulation;
vertical-align: middle;
white-space: nowrap;
}
#submitButton:focus:not(:focus-visible):not(.focus-visible) {
box-shadow: none;
outline: none;
}
#submitButton:hover {
background-color: #2c974b;
}
#submitButton:focus {
box-shadow: rgba(46, 164, 79, .4) 0 0 0 3px;
outline: none;
}
#submitButton:disabled {
background-color: #94d3a2;
border-color: rgba(27, 31, 35, .1);
color: rgba(255, 255, 255, .8);
cursor: default;
}
#submitButton:active {
background-color: #298e46;
box-shadow: rgba(20, 70, 32, .2) 0 1px 0 inset;
}
/* Position map load spinner in the middle of the SVG */
#svgContainer {
position: relative;
@@ -201,14 +259,14 @@
.district {
stroke-width: 0.1;
}
/* .translationText, .romanizationText {
font-size: 1em;
.translationText, .romanizationText {
font-size: 0.8em;
}
.languageText {
font-size: 0.8em;
} */
font-size: 0.6em;
}
}
}
/* @media only screen and (max-width: 768px) {
.translationText, .romanizationText {
@@ -218,6 +276,12 @@
font-size: 0.6em;
}
} */
p.bottom-of-page {
padding-top: 1em;
text-align: center;
font-size: 1.15em;
color: #3D3C3A;
}
</style>
</head>
<body>
@@ -226,8 +290,8 @@
<h1>Indian Translate</h1>
<form hx-get="/submit" hx-swap=none hx-indicator="#loading-screen" hx-on::before-request="hideTranslationsAndShowText(event.detail.xhr.response)" hx-on::after-request="updateTranslations(event.detail.xhr.response)" class="translateForm" method="get">
<label for="query">Enter text to translate:</label>
<input type="text" name="query" id="query" required/>
<input type="submit" value="Translate"/>
<input type="text" maxlength="20" name="query" id="query" required/>
<input type="submit" id="submitButton" value="Translate"/>
</form>
<progress id="loading-screen" class="loading-indicator"></progress>
<h3 id="fetchingText">Fetching translations...</h3>
@@ -239,8 +303,9 @@
<li>Hover over a language region (denoted by color) to see the language spoken in the region. Language boundaries were drawn using census data; they may be inaccurate.</li>
<li>Translations are retrieved from Google Translate - they may be innacurate.</li>
<li>Romanizations are made with the <kbd>ai4bharat-transliteration</kbd> AI model, developed by <a href="https://ai4bharat.iitm.ac.in/">Ai4Bharat</a>.</li>
<li>This project was inspired by the <a href="https://ukdataexplorer.com/european-translator/">European Translation Map</a>, as seen on Hacker News.</li>
</ul>
<p class="bottom-of-page">Made with love by <a href="https://twomorecents.org">Aadhavan Srinivasan</a></p>
</section>

19
index.js
View File

@@ -4,7 +4,7 @@ const languages = {
tamil: {name: "Tamil", color: "#75d795", code: "ta", text_align: "start", districts: []},
malayalam: {name: "Malayalam", color: "#ff7c7c", code: "ml", text_align: "end", districts: []},
kannada: {name: "Kannada", color: "#ffe77c", code: "kn", text_align: "middle", districts: []},
telugu: {name: "Telugu", color: "#7c9dff", code: "te", text_align: "middle", districts: []},
telugu: {name: "Telugu", color: "#7c9dff", code: "te", text_align: "start", districts: []},
marathi: {name: "Marathi", color: "#e0ff7c", code: "mr", text_align: "middle", districts: []},
konkani: {name: "Konkani", color: "#9b7cff", code: "gom", text_align: "end", districts: []},
hindi: {name: "Hindi", color: "#d17cff", code: "hi", text_align: "middle", districts: []},
@@ -232,7 +232,12 @@ const svg = d3.select("#svgContainer")
// .call(responsivefy);
function drawMap(world) {
const projection = d3.geoMercator().fitSize([mapWidth, mapHeight], world)
let projection = null;
if (window.innerWidth > 1366) {
projection = d3.geoMercator().fitSize([mapWidth, mapHeight], world)
} else {
projection = d3.geoMercator().fitWidth(mapWidth, world)
}
const path = d3.geoPath().projection(projection);
requestAnimationFrame(() => {
@@ -240,9 +245,9 @@ function drawMap(world) {
const bbox = newSvg.node().getBBox();
const originalWidth = +newSvg.attr("width");
newSvg
// .attr("viewBox", `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`)
.attr("viewBox", `0 ${bbox.y} ${originalWidth} ${bbox.height}`)
// .attr("width", mapHeight.toString())
.attr("viewBox", `${bbox.x} ${bbox.y} ${bbox.width} ${bbox.height}`)
// .attr("viewBox", `0 ${bbox.y} ${originalWidth} ${bbox.height}`)
.attr("width", bbox.width)
.attr("height", bbox.height)
// .style("display", "block")
// .style("max-height", "100%"); // optional: keep it scalable in a flexbox
@@ -335,7 +340,9 @@ function drawMap(world) {
rtv += 25;
}
if (d.properties.lang_name == "Hindi") {
rtv += 5 * parseFloat(getComputedStyle(document.documentElement).fontSize); // 5rem
if (window.innerWidth > 768) {
rtv += 3 * parseFloat(getComputedStyle(document.documentElement).fontSize); // rem
}
}
return rtv

BIN
translations.db
View File

Binary file not shown.