Difference between revisions of "User:OverPowered/GSoC2021 Progress Report"

From Apertium
Jump to navigation Jump to search
m (added images)
 
(8 intermediate revisions by the same user not shown)
Line 9: Line 9:
   
 
=== Checklist ===
 
=== Checklist ===
  +
 
[[File:ExtensionMockup1.png|300px|thumb|right|Extension Mockup 1]]
 
[[File:ExtensionMockup1.png|300px|thumb|right|Extension Mockup 1]]
 
[[File:ExtensionMockup2.png|300px|thumb|right|Extension Mockup 2]]
 
[[File:ExtensionMockup2.png|300px|thumb|right|Extension Mockup 2]]
Line 40: Line 41:
   
 
== Week 1 (June 7 - June 14) ==
 
== Week 1 (June 7 - June 14) ==
[[File:ExtensionPopUp1.png|300px|thumb|right|Pop-Up Main]]
 
[[File:ExtensionPopUp2.png|300px|thumb|right|Pop-Up Settings]]
 
   
 
=== Checklist ===
 
=== Checklist ===
  +
 
[[File:ExtensionPopUp1.png|300px|thumb|right|Pop-Up Main]]
 
[[File:ExtensionPopUp2.png|300px|thumb|right|Pop-Up Settings]]
 
Set up a basic extension on chromium that can:
 
Set up a basic extension on chromium that can:
* Detect the word it hovers on (on websites like wikipedia, news websites, etc.)
+
* <del>Detect the word it hovers on (on websites like wikipedia, news websites, etc.)</del>
 
* <del>Shows a basic popup when clicked on</del>
 
* <del>Shows a basic popup when clicked on</del>
  +
   
 
=== Progress ===
 
=== Progress ===
  +
  +
Most basic pop-up functionalities are complete, to the point of marking some goals off of next week's checklist. There's also the matter of the word hover-on gist, which I've covered a bit in the next part. Also, the mockups for the pop-up from last week are complete, with both the front part and the settings. Word Hover has been implemented as of 13/7. Right now it is only capable of highlighting all the words nested inside a &lg;p&gt; tag.
   
   
Line 60: Line 65:
   
 
For now I'm implementing the custom tag method and figuring out a more elegant way to accomplish the second one.
 
For now I'm implementing the custom tag method and figuring out a more elegant way to accomplish the second one.
  +
   
 
== Week 2 (June 14 - June 21) ==
 
== Week 2 (June 14 - June 21) ==
Line 67: Line 73:
 
* <del>Apart from that, actually hook up the extension to use the API functionalities to translate in the pop-up</del>
 
* <del>Apart from that, actually hook up the extension to use the API functionalities to translate in the pop-up</del>
 
* <del>Properly set up the html pop-up of the extension</del>
 
* <del>Properly set up the html pop-up of the extension</del>
* Validate input given to pop-up
+
* <del>Validate input given to pop-up</del>
* Enable different options for translation
+
* <del>Enable different options for translation</del>
  +
  +
  +
=== Progress ===
  +
  +
Most of these were actually done inadvertently during the Community Bonding Period so I'll focus on getting tests up and running once all of these are done.
  +
  +
  +
== Week 3 (June 21 - June 28) ==
  +
  +
=== Checklist ===
  +
* <del>Start work on hover functionality</del>
  +
* <del>Design the hovering text-box and the details that will be shown on it</del>
  +
* <del>Implement translation features for hover function too</del>
  +
  +
  +
=== Progress ===
  +
  +
Finally the main part of the project! The basic translation functions and all have been set up, I just have to show it in the form of a tool-tip or a hovering box. Work on this has been completed fairly early in the week.
  +
  +
  +
=== Hover-On Translation ===
  +
  +
For the hover-in translation, displaying the hover-box itself is implemented entirely without javascript by wrapping every word up in a <hover> tag with two data attributes to represent information in it and its position. All the html within a &lt;p&gt; tag is replaced using the regex pattern:
  +
  +
<code>/(?![^<]*?>)([A-z0-9']+)/g</code>
  +
  +
Referred to [https://stackoverflow.com/a/25836471/14131011 this stackoverflow answer] for designing the tooltips

Latest revision as of 16:32, 23 June 2021

Google Summer of Code 2021 Progress Report- A Reworked Apertium Browser Plugin



Community Bonding Period (May 17 - June 7)[edit]

Checklist[edit]

Extension Mockup 1
Extension Mockup 2
Extension Mockup 3
  • Understand better how the Apertium API works
  • Identify parts of the Geriaoueg extension that still work
  • Check Source Code of similar extensions
  • Design tests, experiments and evaluation procedures for an extension (which sites it should be able to read, etc.)
  • Write a workflow diagram of the improved extension, what background processes it will have and what permissions it will need


Progress[edit]

I've gone through the Apertium Apy code and built it from source. The parts that I need are outlined in the initial proposal and I don't feel I need to add anything more. As for the Geriaoueg extension, given how outdated it is, it's better to build a new one from scratch with web-ext than to use parts of it.

As for other extensions, I've been looking at OnHover Translate for inspiration regarding layout and background processes. I also believe it's best not to copy the exact method they've used there and opt for a normal popup.html instead of a element created with JavaScript on the page itself, if only to keep it simpler.

As for the sites it should be able to read, a good start would be wiki's, news sites and more popular social media websites like Reddit, Facebook, etc. It should also be able to operate on the Google Search page. I'm still learning about implementing unit, integration and system tests for a web extension. And it seems to be more complex than I previously thought, so it might take me a bit more time.

The permissions I would need for the extension are not too many. Storage will be required only for storing existing language pairs and the default target language, so the limit of 5mb will be more than enough. The only permissions I feel are needed are `tabs`, `contextmenus` if I add any anything to the right-click menu and `clipboardWrite` to allow copying data with a button.


Layout[edit]

The Layout is mostly inspired by the layout of the actual Apertium website. I created three mockups of the extension, with the first one being completely identical to the website. The second one is a bit more compact, with the input and output text areas positioned vertically. As for the third mockup, it is the one most geared to be an extension, with a single text bar used for both input and output.

As for the checkbox at the bottom, initially I felt it best to include a 'Disable on this Website' check to disable the hover-in functionalities of the extension. But owing to concerns about increased traffic for the API, it seems a better idea to set the option to 'Enable on this Website'.

Also while easy to change later, I'll be going for the second layout as a single input bar would make copy/paste operations harder.

Week 1 (June 7 - June 14)[edit]

Checklist[edit]

Pop-Up Main
Pop-Up Settings

Set up a basic extension on chromium that can:

  • Detect the word it hovers on (on websites like wikipedia, news websites, etc.)
  • Shows a basic popup when clicked on


Progress[edit]

Most basic pop-up functionalities are complete, to the point of marking some goals off of next week's checklist. There's also the matter of the word hover-on gist, which I've covered a bit in the next part. Also, the mockups for the pop-up from last week are complete, with both the front part and the settings. Word Hover has been implemented as of 13/7. Right now it is only capable of highlighting all the words nested inside a &lg;p> tag.


Detecting a Hovered Word[edit]

I've been looking into the word-hover function and I had two leads -

One, wrap every single word in a or better yet, a custom element like say <hover> or something (Because messing with 's might absolutely destroy some webpages) which shows a hovered translation. An example of that would be this site. It's machine translation for native Chinese webnovels but the webpage source is much more interesting. And most of this is also tied in to the html of the page, which seems much better than the JavaScript hell that is the next option.

The Second option is to get the position of the cursor from the browser (major browser-compatibility issues right there) and then traverse the entire DOM-tree looking for the exact leaf-node the cursor is on. Example for this one is in section 2 of this StackOverflow Answer. And sidenote, this is an old answer but it covers the method pretty well.

For now I'm implementing the custom tag method and figuring out a more elegant way to accomplish the second one.


Week 2 (June 14 - June 21)[edit]

Checklist[edit]

  • If needed, this is the time to tweak Apy functionalities slightly but should not be necessary
  • Apart from that, actually hook up the extension to use the API functionalities to translate in the pop-up
  • Properly set up the html pop-up of the extension
  • Validate input given to pop-up
  • Enable different options for translation


Progress[edit]

Most of these were actually done inadvertently during the Community Bonding Period so I'll focus on getting tests up and running once all of these are done.


Week 3 (June 21 - June 28)[edit]

Checklist[edit]

  • Start work on hover functionality
  • Design the hovering text-box and the details that will be shown on it
  • Implement translation features for hover function too


Progress[edit]

Finally the main part of the project! The basic translation functions and all have been set up, I just have to show it in the form of a tool-tip or a hovering box. Work on this has been completed fairly early in the week.


Hover-On Translation[edit]

For the hover-in translation, displaying the hover-box itself is implemented entirely without javascript by wrapping every word up in a <hover> tag with two data attributes to represent information in it and its position. All the html within a <p> tag is replaced using the regex pattern:

/(?![^<]*?>)([A-z0-9']+)/g

Referred to this stackoverflow answer for designing the tooltips