diff --git a/lms/djangoapps/edxnotes/decorators.py b/lms/djangoapps/edxnotes/decorators.py index c522ba36bed4..7e058c3a2368 100644 --- a/lms/djangoapps/edxnotes/decorators.py +++ b/lms/djangoapps/edxnotes/decorators.py @@ -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 @@ -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: @@ -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), + }, }, }) diff --git a/lms/static/js/edxnotes/plugins/llm_summarize.js b/lms/static/js/edxnotes/plugins/llm_summarize.js index 6f812511118b..85644466e3f5 100644 --- a/lms/static/js/edxnotes/plugins/llm_summarize.js +++ b/lms/static/js/edxnotes/plugins/llm_summarize.js @@ -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: ''; @@ -68,9 +68,85 @@ 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 = ''; annotator.adder[0].innerHTML += ` @@ -78,6 +154,26 @@ `; + // Style is being defined here since classes styling not working + // for this element. + textAreaWrapper.innerHTML += ` +
+ + + + ${gettext('Summarizing...')} + +
`; }, }); }); diff --git a/lms/static/js/edxnotes/views/notes_factory.js b/lms/static/js/edxnotes/views/notes_factory.js index 8d8b5b1dcfec..bad59e3471ab 100644 --- a/lms/static/js/edxnotes/views/notes_factory.js +++ b/lms/static/js/edxnotes/views/notes_factory.js @@ -51,7 +51,11 @@ destroy: '/annotations/:id/', search: '/search/' } - } + }, + llmSummarize: { + isEnabled: params?.llmSummarize?.isEnabled, + courseId: params?.llmSummarize?.courseId, + }, }; }; @@ -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(