Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

PADV 1584 - Add summarize functionality to plugin #130

Merged
merged 3 commits into from
Oct 8, 2024
Merged

PADV 1584 - Add summarize functionality to plugin #130

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
3 commits
Select commit Hold shift + click to select a range
5845715
feat: adding backend connection to summarize annotatorjs plugin
alexjmpb Sep 13, 2024
8da7b59
feat: add feature flag for LLM summarize
alexjmpb Aug 23, 2024
b264959
Merge pull request #131 from Pearson-Advance/vue/PADV-1684
Serafin-dev Oct 8, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
7 changes: 7 additions & 0 deletions lms/djangoapps/edxnotes/decorators.py
View file
Open in desktop
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
Open in desktop
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;
}
Squirrel18 marked this conversation as resolved.
Show resolved Hide resolved

@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.'));
Squirrel18 marked this conversation as resolved.
Show resolved Hide resolved
})
.then((data) => {
textAreaWrapper.children[0].value = data.summary;
})
.catch((error) => {
alert(error.message);
editor.hide();
});
Squirrel18 marked this conversation as resolved.
Show resolved Hide resolved
},
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;">
Squirrel18 marked this conversation as resolved.
Show resolved Hide resolved
</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
Open in desktop
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
Loading