MoralKeeperAI を使用したコメント提案機能の追加

ckanext/feedback/assets/css/comment.css

@@ -61,3 +61,34 @@
 .comment-count {
   color: #808080;
 }
+
+.char-count {
+  text-align: right;
+  color: #808080;
+}
+
+.comment-count {
+  color: #808080;
+}
+
+.notice-container{
+  background-color: blanchedalmond;
+  padding: 10px;
+  border-radius: 10px;
+}
+
+.char-count {
+  color: #808080;
+  text-align: right;
+  right: 10px;
+  bottom: 10px;
+  font-size: 0.9em;
+}
+
+.comment-contents {
+  position: relative;
+}
+
+textarea {
+  padding-bottom: 25px; /* Adjust padding to account for char-count */
+}

ckanext/feedback/assets/css/details.css

@@ -46,6 +46,12 @@
   height: 28px !important;
 }
 
+.notice-container{
+  background-color: blanchedalmond;
+  padding: 10px;
+  border-radius: 10px;
+}
+
 .char-count {
   text-align: right;
   color: #808080;

ckanext/feedback/assets/js/comment.js

@@ -1,5 +1,15 @@
-function checkCommentExists(button) {
-  const comment = document.getElementById('comment-content').value;
+const spinner = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>'
+const spinner_bs3 = '<span class="fa fa-spinner fa-spin" role="status" aria-hidden="true"></span>'
+
+function checkCommentExists(button, bs3=false) {
+  let comment
+  if ( button.id === "comment-button" ) {
+    comment = document.getElementById('comment-content').value;
+  }
+  if ( button.id === "proposal-comment-button" ) {
+    comment = document.getElementById('proposal-comment-content').value;
+  }
+
   const rating = document.getElementById('rating').value;
   const commentNoneErrorElement = document.getElementById('comment-none-error');
   const commentOverErrorElement = document.getElementById('comment-over-error');
@@ -17,7 +27,17 @@ function checkCommentExists(button) {
     commentOverErrorElement.style.display = '';
     return false;
   }
-  button.style.pointerEvents = "none"
+  const sendButtons = document.getElementsByName('send-button');
+  sendButtons.forEach(button => {
+    button.style.pointerEvents = "none";
+    button.style.background = "#333333";
+    if (!bs3) {
+      button.innerHTML = spinner + button.innerHTML;
+    }else{
+      button.innerHTML = spinner_bs3 + button.innerHTML;
+    }
+  });
+
   return true;
 }
 
@@ -67,12 +87,30 @@ function setButtonDisable(button) {
 }
 
 //文字数カウント
-document.addEventListener('DOMContentLoaded', function() {
-  const textarea = document.getElementById('comment-content');
-  const charCount = document.getElementById('comment-count');
+document.addEventListener('DOMContentLoaded', () => {
+  const textareas = document.getElementsByName('comment-content');
+  const charCounts = document.getElementsByName('comment-count');
 
-  textarea.addEventListener('input', function() {
+  function updateCharCount(textarea, charCount) {
     const currentLength = textarea.value.length;
     charCount.textContent = currentLength;
+  }
+
+  textareas.forEach((textarea, index) => {
+    updateCharCount(textarea, charCounts[index]);
+    textarea.addEventListener('input', () => {
+      const currentLength = textarea.value.length;
+      charCounts[index].textContent = currentLength;
+    });
+  });
+});
+
+window.addEventListener('pageshow', () => {
+  const sendButtons = document.getElementsByName('send-button');
+  sendButtons.forEach(sendButton => {
+    sendButton.style.pointerEvents = "auto";
+    sendButton.style.background = "#206b82";
+    sendButton.innerHTML = sendButton.innerHTML.replace(spinner, '');
+    sendButton.innerHTML = sendButton.innerHTML.replace(spinner_bs3, '');
   });
 });

ckanext/feedback/assets/js/detail.js

@@ -1,5 +1,14 @@
-function checkCommentExists(button) {
-  const comment = document.getElementById('comment-content').value;
+const spinner = '<span class="spinner-border spinner-border-sm" role="status" aria-hidden="true"></span>'
+const spinner_bs3 = '<span class="fa fa-spinner fa-spin" role="status" aria-hidden="true"></span>'
+
+function checkCommentExists(button, bs3=false) {
+  let comment
+  if ( button.id === "comment-button" ) {
+    comment = document.getElementById('comment-content').value;
+  }
+  if ( button.id === "proposal-comment-button" ) {
+    comment = document.getElementById('proposal-comment-content').value;
+  }
   const commentNoneErrorElement = document.getElementById('comment-none-error');
   const commentOverErrorElement = document.getElementById('comment-over-error');
 
@@ -15,8 +24,16 @@ function checkCommentExists(button) {
     commentOverErrorElement.style.display = '';
     return false;  
   }
-
-  button.style.pointerEvents = "none"
+  const sendButtons = document.getElementsByName('send-button');
+  sendButtons.forEach(sendButton => {
+    sendButton.style.pointerEvents = "none";
+    sendButton.style.background = "#333333";
+    if (!bs3) {
+      sendButton.innerHTML = spinner + sendButton.innerHTML;
+    }else{
+      sendButton.innerHTML = spinner_bs3 + sendButton.innerHTML;
+    }
+  });
   return true;
 }
 
@@ -39,12 +56,30 @@ function setButtonDisable(button) {
 }
 
 //文字数カウント
-document.addEventListener('DOMContentLoaded', function() {
-  const textarea = document.getElementById('comment-content');
-  const charCount = document.getElementById('comment-count');
+document.addEventListener('DOMContentLoaded', () => {
+  const textareas = document.getElementsByName('comment-content');
+  const charCounts = document.getElementsByName('comment-count');
 
-  textarea.addEventListener('input', function() {
+  function updateCharCount(textarea, charCount) {
     const currentLength = textarea.value.length;
     charCount.textContent = currentLength;
+  }
+
+  textareas.forEach(textarea, index => {
+    updateCharCount(textarea, charCounts[index]);
+    textarea.addEventListener('input', () => {
+      const currentLength = textarea.value.length;
+      charCounts[index].textContent = currentLength;
+    });
   });
 });
+
+window.addEventListener('pageshow', () => {
+  const sendButtons = document.getElementsByName('send-button');
+  sendButtons.forEach(sendButton => {
+    sendButton.style.pointerEvents = "auto";
+    sendButton.style.background = "#206b82";
+    sendButton.innerHTML = sendButton.innerHTML.replace(spinner, '');
+    sendButton.innerHTML = sendButton.innerHTML.replace(spinner_bs3, '');
+  });
+});

ckanext/feedback/assets/js/recaptcha.js

@@ -1,19 +1,28 @@
-const contentForm = document.getElementById(feedbackRecaptchaTargetForm);
-contentForm.onsubmit = function(event) {
-  event.preventDefault();
-  grecaptcha.ready(function() {
-    grecaptcha.execute(feedbackRecaptchaPublickey, {action: feedbackRecaptchaAction}).then(function(token) {
-      const tokenInput = document.createElement('input');
-      tokenInput.type = 'hidden';
-      tokenInput.name = 'g-recaptcha-response';
-      tokenInput.value = token;
-      contentForm.appendChild(tokenInput);
-      const actionInput = document.createElement('input');
-      actionInput.type = 'hidden';
-      actionInput.name = 'action';
-      actionInput.value = feedbackRecaptchaAction;
-      contentForm.appendChild(actionInput);
-      contentForm.submit();
+window.addEventListener('pageshow', function(event) {
+  if (event.persisted || (performance.getEntriesByType("navigation")[0]?.type === "back_forward")) {
+    const existingTokenInput = document.querySelector('input[name="g-recaptcha-response"]');
+    if (existingTokenInput) existingTokenInput.remove();
+  }
+});
+
+const contentForms = document.getElementsByName(feedbackRecaptchaTargetForm);
+contentForms.forEach(contentForm => {
+  contentForm.onsubmit = function(event) {
+    event.preventDefault();
+    grecaptcha.ready(function() {
+      grecaptcha.execute(feedbackRecaptchaPublickey, {action: feedbackRecaptchaAction}).then(function(token) {
+        const tokenInput = document.createElement('input');
+        tokenInput.type = 'hidden';
+        tokenInput.name = 'g-recaptcha-response';
+        tokenInput.value = token;
+        contentForm.appendChild(tokenInput);
+        const actionInput = document.createElement('input');
+        actionInput.type = 'hidden';
+        actionInput.name = 'action';
+        actionInput.value = feedbackRecaptchaAction;
+        contentForm.appendChild(actionInput);
+        contentForm.submit();
+      });
     });
-  });
-}
+  }
+});

ckanext/feedback/controllers/resource.py

@@ -13,6 +13,10 @@
 import ckanext.feedback.services.resource.validate as validate_service
 from ckanext.feedback.controllers.pagination import get_pagination_value
 from ckanext.feedback.models.session import session
+from ckanext.feedback.services.common.ai_functions import (
+    check_ai_comment,
+    suggest_ai_comment,
+)
 from ckanext.feedback.services.common.check import (
     check_administrator,
     has_organization_admin_role,
@@ -77,18 +81,15 @@ def comment(resource_id, category='', content=''):
     def create_comment(resource_id):
         package_name = request.form.get('package_name', '')
         category = None
-        content = None
-        if request.form.get('comment-content'):
-            content = request.form.get('comment-content')
-            category = request.form.get('category')
-        rating = None
-        if request.form.get('rating'):
-            rating = int(request.form.get('rating'))
+        if content := request.form.get('comment-content', ''):
+            category = request.form.get('category', '')
+        if rating := request.form.get('rating', ''):
+            rating = int(rating)
         if not (category and content):
             toolkit.abort(400)
 
         if not is_recaptcha_verified(request):
-            helpers.flash_error(_(u'Bad Captcha. Please try again.'), allow_html=True)
+            helpers.flash_error(_('Bad Captcha. Please try again.'), allow_html=True)
             return ResourceController.comment(resource_id, category, content)
 
         if message := validate_service.validate_comment(content):
@@ -98,6 +99,9 @@ def create_comment(resource_id):
             )
             return ResourceController.comment(resource_id, category, content)
 
+        if not rating:
+            rating = None
+
         comment_service.create_resource_comment(resource_id, category, content, rating)
         summary_service.create_resource_summary(resource_id)
         session.commit()
@@ -138,6 +142,105 @@ def create_comment(resource_id):
 
         return resp
 
+    # resource_comment/<resource_id>/comment/suggested
+    @staticmethod
+    def suggested_comment(resource_id, category='', content='', rating=''):
+        softened = suggest_ai_comment(comment=content)
+
+        context = {'model': model, 'session': session, 'for_view': True}
+
+        resource = comment_service.get_resource(resource_id)
+        package = get_action('package_show')(
+            context, {'id': resource.Resource.package_id}
+        )
+        g.pkg_dict = {'organization': {'name': resource.organization_name}}
+
+        if softened is None:
+            return toolkit.render(
+                'resource/expect_suggestion.html',
+                {
+                    'resource': resource.Resource,
+                    'pkg_dict': package,
+                    'selected_category': category,
+                    'rating': rating,
+                    'content': content,
+                },
+            )
+
+        return toolkit.render(
+            'resource/suggestion.html',
+            {
+                'resource': resource.Resource,
+                'pkg_dict': package,
+                'selected_category': category,
+                'rating': rating,
+                'content': content,
+                'softened': softened,
+            },
+        )
+
+    # resource_comment/<resource_id>/comment/check
+    @staticmethod
+    def check_comment(resource_id):
+        if request.method == 'GET':
+            return toolkit.redirect_to(
+                'resource_comment.comment', resource_id=resource_id
+            )
+
+        category = None
+        if content := request.form.get('comment-content', ''):
+            category = request.form.get('category', '')
+        if rating := request.form.get('rating', ''):
+            rating = int(rating)
+        if not (category and content):
+            return toolkit.redirect_to(
+                'resource_comment.comment', resource_id=resource_id
+            )
+
+        if not is_recaptcha_verified(request):
+            helpers.flash_error(_('Bad Captcha. Please try again.'), allow_html=True)
+            return ResourceController.comment(resource_id, category, content)
+
+        if message := validate_service.validate_comment(content):
+            helpers.flash_error(
+                _(message),
+                allow_html=True,
+            )
+            return ResourceController.comment(resource_id, category, content)
+
+        categories = comment_service.get_resource_comment_categories()
+        resource = comment_service.get_resource(resource_id)
+        context = {'model': model, 'session': session, 'for_view': True}
+        package = get_action('package_show')(
+            context, {'id': resource.Resource.package_id}
+        )
+        g.pkg_dict = {'organization': {'name': resource.organization_name}}
+
+        if not request.form.get(
+            'comment-suggested', False
+        ) and FeedbackConfig().moral_keeper_ai.is_enable(
+            resource.Resource.package.owner_org
+        ):
+            if check_ai_comment(comment=content) is False:
+                return ResourceController.suggested_comment(
+                    resource_id=resource_id,
+                    rating=rating,
+                    category=category,
+                    content=content,
+                )
+
+        return toolkit.render(
+            'resource/comment_check.html',
+            {
+                'resource': resource.Resource,
+                'pkg_dict': package,
+                'categories': categories,
+                'selected_category': category,
+                'rating': rating,
+                'content': content,
+            },
+        )
+
     # resource_comment/<resource_id>/comment/approve
     @staticmethod
     @check_administrator