Skip to content

Commit

Permalink
Use RapidAPI, audio samples for sample words
Browse files Browse the repository at this point in the history
  • Loading branch information
@aiden2480
aiden2480 committed Jun 27, 2022
1 parent 823d4b0 commit cf831bc
Show file tree
Hide file tree
Showing 4 changed files with 88 additions and 27 deletions.
15 changes: 14 additions & 1 deletion background.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -27,7 +27,7 @@ var defaultsets = [
"会知思言立使作住生食飲休洗動働" +
"通歩待泊教始終何物自名方紙全活飯色"
},
]; // ID -1 for all kanji and -2 for favourited kanji
];


/* Set up a listener so we can receive messages from the console
Expand Down Expand Up @@ -212,6 +212,7 @@ chrome.contextMenus.onClicked.addListener(async (info, tab) => {

const ANY_REGEX = /[\u4E00-\u9FAF]+/g;
const match = info.selectionText.match(ANY_REGEX)?.join("");
const isPopup = tab.url == chrome.runtime.getURL("popup.html");

// Show a little x for a second if an error occured
if (!match) return await displayBadge(tab, "X", "#D9381E", 3000);
Expand All @@ -227,6 +228,11 @@ chrome.contextMenus.onClicked.addListener(async (info, tab) => {

await chrome.storage.local.set({ customsets: sets });
await displayBadge(tab, "✓", "#32CD32", 3000);

if (isPopup) await chrome.storage.local.set({
selectedunit: sets.at(-1).id,
selectedkanji: 0,
});
}

if (info.menuItemId.startsWith("addtoset")) {
Expand All @@ -237,6 +243,11 @@ chrome.contextMenus.onClicked.addListener(async (info, tab) => {

await chrome.storage.local.set({ customsets: sets });
await displayBadge(tab, "✓", "#32CD32", 3000);

if (isPopup) await chrome.storage.local.set({
selectedunit: set.id,
selectedkanji: 0,
});
}

// TODO If the ctx menu is being used from inside the extension,
Expand All @@ -245,6 +256,8 @@ chrome.contextMenus.onClicked.addListener(async (info, tab) => {
});

async function displayBadge(tab, text, color, milliseconds) {
if (tab.id < 0) tab = await chrome.tabs.query({ active: true });

var current = {
color: await chrome.action.getBadgeBackgroundColor({ tabId: tab.id }),
text: await chrome.action.getBadgeText({ tabId: tab.id }),
Expand Down
1 change: 1 addition & 0 deletions css/popup.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -85,6 +85,7 @@ div#infosection #exampleslist * {
white-space: nowrap;
overflow: hidden;
list-style-position: inside;
cursor: pointer;
}

/* Kanji info div */
Expand Down
39 changes: 27 additions & 12 deletions js/popup.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -32,7 +32,7 @@ async function loadKanjiIndex(index) {
vidloading = true;
video.src = "/media/loading.png";
utils.fetchKanjiDetails(kanji).then(details => {
video.src = details.video;
video.src = details.kanji.video.mp4;
})

// Update browser icon
Expand Down Expand Up @@ -64,8 +64,7 @@ async function loadKanjiSet(setID, index=0) {
loadKanjiIndex(index);
}

/* Add event listeners for the various elements */
window.addEventListener("load", async () => {
async function windowLoad() {
// Load the custom sets into the selector menu
(await utils.fetchAllSets()).forEach(set => {
if (!set.enabled) return;
Expand All @@ -88,6 +87,11 @@ window.addEventListener("load", async () => {
await loadKanjiSet(setID, kanjiIndex);
selectedset.value = setID;
selectedkanji.value = kanjiIndex;
}

/* Add event listeners for the various elements */
window.addEventListener("load", async () => {
await windowLoad();
});

video.addEventListener("loadeddata", () => {
Expand Down Expand Up @@ -261,33 +265,44 @@ async function populateInformation(kanji) {
var listelem = document.getElementById("exampleslist");

// Establish readings
var on = json.onyomi_ja ? json.onyomi_ja.split("、") : [];
var kun = json.kunyomi_ja ? json.kunyomi_ja.split("、") : [];
var unparsed_on = json.kanji.onyomi.katakana;
var unparsed_kun = json.kanji.kunyomi.hiragana;

var on = unparsed_on != "n/a" ? unparsed_on.split("、") : [];
var kun = unparsed_kun != "n/a" ? unparsed_kun.split("、") : [];
var readings = on.concat(kun).join("、");

// Populate kanji details
document.getElementById("selectedkanjidetails").textContent = kanji;
document.getElementById("selectedkanjimeaning").textContent = json.kmeaning;
document.getElementById("strokecount").innerText = json.kstroke;
document.getElementById("grade").innerText = json.kgrade;
document.getElementById("selectedkanjimeaning").textContent = json.kanji.meaning.english;
document.getElementById("strokecount").innerText = json.kanji.strokes.count;
document.getElementById("grade").innerText = json.references.grade;
document.getElementById("onkunyomi").innerText = readings;

// Add title to reading parent element
var parent = document.getElementById("onkunyomi").parentElement;
parent.title = `おん：${json.onyomi_ja || "none"}\nくん：${json.kunyomi_ja || "none"}\n\n`;
parent.title = `Onyomi：${on.join("、") || "none"}\nKunyomi ：${kun.join("、") || "none"}\n\n`;
parent.title += "Onyomi are in katakana, while kunyomi are in hiragana";

// Populate examples
listelem.textContent = null;
(json.examples || []).splice(0, 6).map(item => {
let elem = document.createElement("li");
let reading = document.createElement("b");
let meaning = document.createTextNode(item[1]);
reading.innerText = item[0];
let meaning = document.createTextNode(item.meaning.english);
reading.innerText = item.japanese;

elem.appendChild(reading);
elem.appendChild(meaning);
elem.title = item[0] + item[1];
elem.title = item.japanese + item.meaning.english;

// Only play audio if the mouse wasn't dragged and it's left click
let audio = new Audio(item.audio.mp3)
let drag = false;

elem.addEventListener("mousedown", () => drag = false);
elem.addEventListener("mousemove", () => drag = true);
elem.addEventListener("mouseup", (e) => (e.button == 0 && !drag) && audio.play());

listelem.appendChild(elem);
});
Expand Down
60 changes: 46 additions & 14 deletions js/utilities.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -21,20 +21,38 @@ function getLastFrameOfVideo(url) {
video.currentTime = video.duration;
});

video.src = await videoURLToDataURL(url);
video.src = await contentURLToDataURL(url);
video.load();
});
}

function videoURLToDataURL(url) {
function resizeSVG(dataURL) {
return new Promise((resolve, reject) => {
var fabcan = document.createElement("canvas");
var fabctx = fabcan.getContext("2d");
var img = new Image();

img.addEventListener("load", () => {
fabctx.drawImage(img, 0, 0, 248, 248);
resolve(fabcan.toDataURL());
})

img.src = dataURL;
fabcan.width = 248;
fabcan.height = 248;
});
}

function contentURLToDataURL(url) {
// Takes the video URL and fully downloads the
// video, before converting it to a Data URL

return new Promise(async (resolve, reject) => {
var resp = await fetch(url);
var resp = await fetch(url, {cache: "force-cache"});
var reader = new FileReader();

reader.addEventListener("load", () => {
// console.debug(reader.result);
resolve(reader.result);
});

Expand Down Expand Up @@ -70,7 +88,17 @@ function convertCanvasToBlackAndWhite(canvas) {

export async function checkRembrandt() {
var kanji = selectedkanji.selectedOptions[0].innerText;
var videoBase64 = await getLastFrameOfVideo((await fetchKanjiDetails(kanji)).video);

// Replit backend method
var kanjiID = (await fetchKanjiDetails(kanji)).kanji.video.mp4.split("/").at(-1);
var comparison = await getLastFrameOfVideo("https://kanjithing-backend.chocolatejade42.repl.co/video/" + kanjiID);

// SVG data URL method (broken)
// var kanjisvg = (await fetchKanjiDetails(kanji)).kanji.video.poster;
// var kanjisvgid = kanjisvg.split("/").at(-1);
// var svgBase64 = await contentURLToDataURL("https://kanjithing-backend.chocolatejade42.repl.co/svg/" + kanjisvgid);
// var comparison = await resizeSVG(svgBase64);

var blankcanv = document.createElement("canvas");
var blankctx = blankcanv.getContext("2d");

Expand All @@ -81,18 +109,18 @@ export async function checkRembrandt() {

// Compare drawing with video, and blank with video
var checkrem = new Rembrandt({
imageA: videoBase64,
imageA: comparison,
imageB: convertCanvasToBlackAndWhite(canvas),
thresholdType: Rembrandt.THRESHOLD_PERCENT,
maxThreshold: 0.08,
maxThreshold: 0.2,
maxDelta: 20,
maxOffset: 0,
// renderComposition: true,
// compositionMaskColor: new Rembrandt.Color(0.54, 0.57, 0.62)
});

var blankrem = new Rembrandt({
imageA: videoBase64,
imageA: comparison,
imageB: blankcanv.toDataURL(),
// renderComposition: true,
// compositionMaskColor: new Rembrandt.Color(0.54, 0.57, 0.62)
Expand All @@ -107,21 +135,25 @@ export async function checkRembrandt() {

export async function fetchKanjiDetails(kanji) {
// Make request for resource - either cache or online
var baseurl = "https://kanjithing-backend.chocolatejade42.repl.co";
var version = (await chrome.management.getSelf()).version.split(".").slice(0, 2).join(".");
var infosection = document.getElementById("infosection");

const rapidAPI = atob("bjZ2SVQ5ZDU0Wm1zaEVlSlk1ZUdBSFpNQmt0cXAxV1V1Tmdqc253OWxpYXVRRVVFVXU");
const infosection = document.getElementById("infosection");
const options = {
headers: {"x-rapidapi-key": rapidAPI},
cache: "force-cache",
};

try {
var resp = await fetch(`${baseurl}/kanji/${encodeURI(kanji)}?q=${version}`);
var resp = await fetch("https://kanjialive-api.p.rapidapi.com/api/public/kanji/" + kanji, options);
var json = await resp.json();
infosection.classList.remove("offline");
} catch (error) {
infosection.classList.add("offline");
return {};
}

if (json.status !== 200) {
console.error(json.error, resp);
if (!resp.ok) {
console.error(`Received status code ${resp.status} from `, resp);
infosection.classList.add("offline");
return;
}

Expand Down

0 comments on commit cf831bc

Please sign in to comment.