Skip to content

Commit

Permalink
Merge pull request #130 from Pearson-Advance/vue/PADV-1584
Browse files Browse the repository at this point in the history 
PADV 1584 - Add summarize functionality to plugin
  • Loading branch information
@Serafin-dev
Serafin-dev authored Oct 8, 2024
2 parents a94c821 + b264959 commit 785297a
Show file tree
Hide file tree
Showing 3 changed files with 111 additions and 3 deletions.
7 changes: 7 additions & 0 deletions lms/djangoapps/edxnotes/decorators.py
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,6 +7,7 @@

from django.conf import settings
from xblock.exceptions import NoSuchServiceError
from openedx.core.djangoapps.plugins.plugins_hooks import run_extension_point

from common.djangoapps.edxmako.shortcuts import render_to_string
from common.djangoapps.student.auth import is_ccx_course
Expand Down Expand Up @@ -50,6 +51,8 @@ def get_html(self, *args, **kwargs):
except NoSuchServiceError:
user = None

is_llm_summarize_enabled = run_extension_point('PEARSON_CORE_ENABLE_LLM_SUMMARIZE', course_id=str(course.id))

if is_studio or not is_feature_enabled(course, user):
return original_get_html(self, *args, **kwargs)
else:
Expand All @@ -69,6 +72,10 @@ def get_html(self, *args, **kwargs):
"endpoint": get_public_endpoint(),
"debug": settings.DEBUG,
"eventStringLimit": settings.TRACK_MAX_EVENT / 6,
"llmSummarize": {
"isEnabled": is_llm_summarize_enabled,
"courseId": str(course.id),
},
},
})

Expand Down
100 changes: 98 additions & 2 deletions lms/static/js/edxnotes/plugins/llm_summarize.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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');
const style = document.createElement('style');
style.innerHTML = `
.annotator-adder::before {
content: '';
Expand Down Expand Up @@ -68,16 +68,112 @@
background-color: white;
border: 1px solid gray;
}
// Defining content loader since fontawesome icons don't work
// inside the annotatorjs modal.
.loader {
width: 5em !important;
border-color: red !important;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
`;
let annotator = this.annotator;
document.head.appendChild(style);
var annotator = this.annotator;
this.modifyDom(this.annotator);
annotator.editor.options.llmSummarize = annotator.options.llmSummarize
const summarizeButton = document.getElementById('summarizeButton');

summarizeButton.addEventListener('click', function(ev) {
annotator.editor.options.isSummarizing = true;
});
annotator.subscribe('annotationEditorShown', this.handleSummarize);
annotator.subscribe('annotationEditorHidden', this.cleanupSummarize);
},
handleSummarize: function (editor, annotation) {
if (!editor.options?.isSummarizing) return;

function toggleLoader() {
const saveButton = document.querySelector('.annotator-controls .annotator-save');
const loaderWrapper = document.querySelector('.summarize-loader-wrapper');
editor.fields[0].element.children[0].classList.toggle('d-none');
loaderWrapper.classList.toggle('d-none');
saveButton.disabled = !saveButton.disabled;
}
const textAreaWrapper = editor.fields[0].element;
const request = new Request('/pearson-core/llm-assistance/api/v0/summarize-text', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
'X-CSRFToken': $.cookie('csrftoken'),
},
body: JSON.stringify({
text_to_summarize: annotation.quote,
course_id: editor.options?.llmSummarize?.courseId,
}),
});

editor.fields[1].element.children[0].value = 'ai_summary';
toggleLoader(editor);
fetch(request)
.then((response) => {
toggleLoader();
if (response.ok) return response.json();
throw new Error(gettext('There was an error while summarizing the content.'));
})
.then((data) => {
textAreaWrapper.children[0].value = data.summary;
})
.catch((error) => {
alert(error.message);
editor.hide();
});
},
cleanupSummarize: function(editor) {
const textAreaWrapper = editor.fields[0].element;
const loaderWrapper = document.querySelector('.summarize-loader-wrapper');

textAreaWrapper.children[0].value = '';
textAreaWrapper.children[1].value = '';
editor.options.isSummarizing = false;
loaderWrapper.classList.add('d-none');
},
modifyDom: function(annotator) {
const textAreaWrapper = annotator.editor.fields[0].element;

annotator.adder[0].children[0].id = 'annotateButton';
annotator.adder[0].children[0].innerHTML = '<i class="fa fa-pencil" aria-hidden="true"></i>';
annotator.adder[0].innerHTML += `
<button class="summarize-button" id="summarizeButton" title="${gettext('Summarize text using AI.')}">
<i class="fa fa-star" aria-hidden="true"></i>
</button>
`;
// Style is being defined here since classes styling not working
// for this element.
textAreaWrapper.innerHTML += `
<div class="summarize-loader-wrapper d-none">
<span class="loader" style="
width: 1.2em;
height: 1.2em;
border: 3px solid rgb(0, 48, 87);
border-bottom-color: white;
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 3s linear infinite;
margin-right: 5px;
transform-origin: center;">
</span>
<span style="font-size: 1.2em; color: rgb(0, 48, 87);">
${gettext('Summarizing...')}
</span>
</div>`;
},
});
});
Expand Down
7 changes: 6 additions & 1 deletion lms/static/js/edxnotes/views/notes_factory.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -51,7 +51,11 @@
destroy: '/annotations/:id/',
search: '/search/'
}
}
},
llmSummarize: {
isEnabled: params?.llmSummarize?.isEnabled,
courseId: params?.llmSummarize?.courseId,
},
};
};

Expand Down Expand Up @@ -85,6 +89,7 @@
logger = NotesLogger.getLogger(element.id, params.debug),
annotator;

if (options?.llmSummarize?.isEnabled) plugins.push('LlmSummarize')
annotator = $el.annotator(options).data('annotator');
setupPlugins(annotator, plugins, options);
NotesCollector.storeNotesRequestData(
Expand Down

0 comments on commit 785297a

Please sign in to comment.