feat: word frequency distribution

Author: jo-elimu

src/main/java/ai/elimu/util/WordFrequencyHelper.java

@@ -1,8 +1,6 @@
 package ai.elimu.util;
 
 import ai.elimu.model.v2.enums.Language;
-import java.util.Collections;
-import java.util.Comparator;
 import java.util.HashMap;
 import java.util.LinkedHashMap;
 import java.util.LinkedList;

src/main/java/ai/elimu/web/content/letter/LetterListController.java

@@ -9,7 +9,6 @@
 import ai.elimu.util.LetterFrequencyHelper;
 
 import java.util.ArrayList;
-import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
 

src/main/java/ai/elimu/web/content/word/WordListController.java

@@ -1,10 +1,16 @@
 package ai.elimu.web.content.word;
 
 import ai.elimu.dao.EmojiDao;
+import ai.elimu.dao.StoryBookParagraphDao;
 import ai.elimu.dao.WordDao;
 import ai.elimu.entity.content.Emoji;
+import ai.elimu.entity.content.StoryBookParagraph;
 import ai.elimu.entity.content.Word;
+import ai.elimu.model.v2.enums.Language;
+import ai.elimu.util.ConfigHelper;
+import ai.elimu.util.WordFrequencyHelper;
 
+import java.util.ArrayList;
 import java.util.HashMap;
 import java.util.List;
 import java.util.Map;
@@ -26,6 +32,8 @@ public class WordListController {
 
   private final EmojiDao emojiDao;
 
+  private final StoryBookParagraphDao storyBookParagraphDao;
+
   @GetMapping
   public String handleRequest(Model model) {
     log.info("handleRequest");
@@ -42,6 +50,17 @@ public String handleRequest(Model model) {
     }
     model.addAttribute("maxUsageCount", maxUsageCount);
 
+    // Extract letter frequency distribution from storybook paragraphs
+    List<String> wordsInParagraphs = new ArrayList<>();
+    for (StoryBookParagraph storyBookParagraph : storyBookParagraphDao.readAll()) {
+      for (String word : storyBookParagraph.getOriginalText().split(" ")) {
+        wordsInParagraphs.add(word);
+      }
+    }
+    Language language = Language.valueOf(ConfigHelper.getProperty("content.language"));
+    Map<String, Integer> wordFrequencyMap = WordFrequencyHelper.getWordFrequency(wordsInParagraphs, language);
+    model.addAttribute("wordFrequencyMap", wordFrequencyMap);
+
     return "content/word/list";
   }
 

src/main/webapp/WEB-INF/jsp/content/sound/list.jsp

@@ -22,7 +22,7 @@
                                     '${sound.usageCount}',
                                 </c:forEach>
                             ],
-                            label: 'Sound distribution',
+                            label: 'Sound frequency distribution',
                             backgroundColor: 'rgba(149,117,205, 0.5)', // #9575cd deep-purple lighten-2
                         }
                     ]

src/main/webapp/WEB-INF/jsp/content/word/list.jsp

@@ -4,6 +4,42 @@
 
 <content:section cssId="wordListPage">
     <div class="section row">
+        <div class="card-panel">
+            <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.4/dist/chart.umd.min.js"></script>
+            <canvas id="chart"></canvas>
+            <script>
+                var ctx = document.getElementById('chart');
+                var data = {
+                    labels: [
+                        <c:forEach var="key" items="${wordFrequencyMap.keySet()}" varStatus="status">
+                            <c:if test="${status.index < 100}">
+                                "${key}",
+                            </c:if>
+                        </c:forEach>
+                    ],
+                    datasets: [
+                        {
+                            data: [
+                                <c:forEach var="key" items="${wordFrequencyMap}">
+                                    <c:if test="${status.index < 100}">
+                                        ${key.value},
+                                    </c:if>
+                                </c:forEach>
+                            ],
+                            label: 'Word frequency distribution (top 100)',
+                            backgroundColor: 'rgba(149,117,205, 0.5)', // #9575cd deep-purple lighten-2
+                        }
+                    ]
+                };
+                var options = {};
+                new Chart(ctx, {
+                    type: 'bar',
+                    data: data,
+                    options: options
+                });
+            </script>
+        </div>
+
         <a id="exportToCsvButton" class="right btn waves-effect waves-light grey-text white" 
            href="<spring:url value='/content/word/list/words.csv' />">
             Export to CSV<i class="material-icons right">vertical_align_bottom</i>