PADV 1584 - Add summarize functionality to plugin #130
Conversation
alexjmpb
requested review from
kuipumu,
Serafin-dev and
Squirrel18
and removed request for
kuipumu
| this.modifyDom(this.annotator); | ||
| const summarizeButton = document.getElementById('summarizeButton'); | ||
| summarizeButton.addEventListener('click', function(ev) { | ||
| document.querySelector('.annotator-outer.annotator-editor').setAttribute('is_summarizing', true); |
There was a problem hiding this comment.
Please, use the same element selector function thought the file, so in case that something in document API changes, we will apply the same change to everything and all will behave in the same way. @alexjmpb
| editor.fields[1].element.children[0].value = 'ai_summary'; | ||
| toggleLoader(editor); | ||
|
|
||
| const request = new Request("/pearson-core/llm-assistance/api/v0/summarize-text", { |
There was a problem hiding this comment.
Please, do not mix single and double quotes. @alexjmpb
Where does Request class come from?
There was a problem hiding this comment.
It is built-in https://developer.mozilla.org/en-US/docs/Web/API/Request
| method: 'POST', | ||
| headers: { | ||
| 'Content-Type': 'application/json', | ||
| 'X-CSRFToken': $.cookie('csrftoken') |
| }, | ||
| body: JSON.stringify({ | ||
| text_to_summarize: annotation.quote | ||
| }) |
| if (textArea.style.display === 'none') textArea.style.display = 'block'; | ||
| else textArea.style.display = 'none'; |
There was a problem hiding this comment.
Javascript has the toggleAttribute: https://developer.mozilla.org/en-US/docs/Web/API/Element/toggleAttribute ;jQuery has a .toggle function to handle this cases or you can use ternary operator to add the block or none value to the display attribute. @alexjmpb
| @@ -12,7 +12,7 @@ | |||
| $.extend(Annotator.Plugin.LlmSummarize.prototype, new Annotator.Plugin(), { | |||
| pluginInit: function() { | |||
| // Overrides of annotatorjs HTML/CSS to add summarize button. | |||
| var style = document.createElement('style'); | |||
| let style = document.createElement('style'); | |||
| textAreaWrapper.innerHTML += ` | ||
| <div class="summarize-loader-wrapper d-none"> | ||
| <span class="loader" style=" | ||
| // Style is being defined here since classes styling not working |
There was a problem hiding this comment.
Have you used id or class selector? @alexjmpb Please, try to be more specific on the selector, because if this is the case, how are the others styles working?
There was a problem hiding this comment.
Yes, even using id it's not applying the styles, I also tried with bs and fa spinners.
Serafin-dev
force-pushed
the
vue/PADV-1584
branch
from
72350de to
5ffa18c
Compare
Serafin-dev
force-pushed
the
vue/PADV-1584
branch
from
5ffa18c to
5845715
Compare
Serafin-dev
changed the base branch from
vue/PADV-1580
to
pearson-release/olive.stage
PADV 1684 - Add feature flag for LLM summarize for frontend
Serafin-dev
merged commit 785297a
into
pearson-release/olive.stage
Description:
This PR is part of the AI assistance project and aims to add the connection to the summarize backend to the annotator js llm_summarize plugin. The plugin sends a request to pearson core summarize api and replaces the annotation text area value with the summary.
How to test:
Screenshots
Reviewers: