I created a basic web app to visualize and filter the Argos Translate datasets.
I was able to use ChatGPT to write this based on the code for the Argos Translate package index
The app supports filtering and searching the datasets’ metadata. The main use for me is to easily view the existing datasets for a language pair. You can run this locally by opening the HTML file in a local version of the Argos Train repo.
Ah, that’s very cool! Was it through CoPilot, simply asking ChatGPT (via OpenAI’s interface), Cursor… ?
I used free ChatGPT through the chatgpt.com interface.
This was the prompt:
I’m the developer of Argos Translate, an open source library written in Python. I have this web application to view my package index:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="keywords" content="Argos Open Tech, Argos Open Technologies, Argos Open Technologies LLC, Translation, Neural machine translation, Offline translation, Offline neural machine translation, argospm, index, ArgosPM Index "> <meta name="description" content="Index for argospm"> <title>Argos Open Tech</title> </head> <body> <h1>Argos Translate Package Index</h1> <!-- ArgosPM Index table --> <div id="argospm-index-table"></div> <style> #argospm-index-table { font-size: 1.2rem; /* More readable size */ width: 100%; border-collapse: collapse; border-radius: 8px; overflow: hidden; box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); } #argospm-index-table th { background-color: #007bff; /* Blue header */ color: white; text-align: left; padding: 12px; } #argospm-index-table td { padding: 12px; border-bottom: 1px solid #ddd; } #argospm-index-table tr:nth-child(even) { background-color: #f9f9f9; } #argospm-index-table tr:hover { background-color: #f1f1f1; } </style> <script src="/static/main_site/js/lib/jquery.min.js"></script> <script src="/static/main_site/js/argospm_index.js"></script> <!--end ArgosPM Index table--> </body> </html>
var packageIndex = "https://raw.githubusercontent.com/argosopentech/argospm-index/main/index.json";
$(document).ready(function(){
var baseDiv = $("#argospm-index-table");
var argospmIndexTable = $("<table/>");
baseDiv.append(argospmIndexTable);
var heading = $("<tr/>");
heading.append("<th>From</th>");
heading.append("<th>To</th>");
heading.append("<th>Download</th>");
heading.append("<th>From code</th>");
heading.append("<th>To code</th>");
heading.append("<th>Package version</th>");
heading.append("<th>Argos version</th>");
argospmIndexTable.append(heading);
$.ajax({url: packageIndex,
contentType: "",
success: function(response) {
var data = $.parseJSON(response);
$.each(data, function(i, packageData) {
var tr = $("<tr>");
var fromName = $("<td/>").append(packageData.from_name);
tr.append(fromName);
var toName = $("<td/>").append(packageData.to_name);
tr.append(toName);
var linkTd = $("<td/>");
var link = $("<a/>").append("get");
link.attr("href", packageData.links[0]);
linkTd.append(link);
tr.append(linkTd);
var fromCode = $("<td/>").append(packageData.from_code);
tr.append(fromCode);
var toCode = $("<td/>").append(packageData.to_code);
tr.append(toCode);
var packageVersion = $("<td/>").append(packageData.package_version);
tr.append(packageVersion);
var argosVersion = $("<td/>").append(packageData.argos_version);
tr.append(argosVersion);
/*
for(var i = 0; i < packageData.links.length; i++){
link = packageData.links[i]
var protocolEndIndex = link.indexOf(":");
if(protocolEndIndex < 1){
continue;
}
var protocol = link.substring(0, protocolEndIndex);
}
*/
argospmIndexTable.append(tr);
});
}
});
});
I want to develop a similar application to view the JSON file at https://raw.githubusercontent.com/argosopentech/argos-train/refs/heads/master/data-index.json in a similar way.
Here’s a sample of the file:
[
{
"name": "XLEnt",
"type": "data",
"from_code": "de",
"to_code": "fr",
"size": 1369892,
"reference": "El-Kishky, Ahmed and Renduchintala, Adi and Cross, James and Guzm\u00e1n, Francisco and Koehn, Philipp",
"links": [
"https://data.argosopentech.com/data-xlent-de_fr.argosdata"
]
},
{
"name": "OpenSubtitles",
"type": "data",
"from_code": "de",
"to_code": "fr",
"size": 15994801,
"reference": "P. Lison and J. Tiedemann, 2016, OpenSubtitles2016: Extracting Large Parallel Corpora from Movie and TV Subtitles. In Proceedings of the 10th International Conference on Language Resources and Evaluation (LREC 2016)",
"links": [
"https://data.argosopentech.com/data-opensubtitles-de_fr.argosdata"
]
},
{
"name": "MultiUN",
"type": "data",
"from_code": "de",
"to_code": "fr",
"size": 164025,
"reference": "J. Tiedemann, 2012, Parallel Data, Tools and Interfaces in OPUS. In Proceedings of the 8th International Conference on Language Resources and Evaluation (LREC 2012)",
"links": [
"https://data.argosopentech.com/data-multiun-de_fr.argosdata"
]
},
{
"name": "MultiCCAligned",
"type": "data",
"from_code": "de",
"to_code": "fr",
"size": 25626272,
"reference": "El-Kishky, Ahmed and Chaudhary, Vishrav and Guzm\u00e1n, Francisco and Koehn, Philipp",
"links": [
"https://data.argosopentech.com/data-multiccaligned-de_fr.argosdata"
]
},
{
"name": "WikiMatrix",
"type": "data",
"from_code": "de",
"to_code": "fr",
"size": 626167,
It would also be great if the website had some functionality to filter and do basic search. This should be in Javascript with no deps besides Jquery.