Skip to content

Commit

Permalink
Adding emotion tagging MVP
Browse files Browse the repository at this point in the history 
* Removed typo

* Created route for analytics.html and analysis charts

* Moved the trigger element for creating historical results into the script portion of all_results.html to allow for main_local_storage.js modularity

* Renamed main_local_storage.js to local_storage.js

* Restructured render_chart.js to be more legible

* Editing radarEmotionCategories to be more legible comments

* Modified to be using a function to retrieve the emoton catrgories

* hello world for line chart

* Skeleton of line chart with dummy data

* Initial version of linechart working

* Implemented human readable timeline chart

* Implemented human-readable timeline chart

* Cleaned up some formatting on results page

* Modified results page to be a bit more user-friendly, less information dense

* Centered and capped max radar size

* Disable neutral result printout in user-reflection component

* Cleaned up home page text

* Added go to history at bottom of processed_text.html page

* Modified suggested max value scale on radar to make it easier to read at lower score values

* Fixed radar category order

* Modified created_historical_results to specific a target element to write it into to make it more portable

* Fixed ticket size of radar chart to make it more legible

* Fixed tick size of radar chart and added angle lines to make it more legible

* Added skeleton for further reflection

* Added skeleton for further reflection

* Added link to release notes in about.html

* Initial implmementation of save input click

* Add save user reflection feature which updates the current page stored result object with their free text comment

* Added personal saved note feature + printout

* Added personal saved note feature + printout

* Removed console log from render_chart.js

* Reworked allAverageCategoryScores to be more succint and removed its two children functions.

* Fixed average category score function

* Changed how allAverageCategoryScores returns as dictionary results.

* Fixed timeline chart to work with the new method of calculating average category

* Removed some console printouts

* Added tagify script to processed_text.html

* Added skeleton for tag selection placeholder

* Using example version of tagify

* Reworked whitelist of values

* Implemented feelings tagging propt

* Added emotion tagging without save feature

* Changed wording on prompt for emotio ntagging

* Rework prompting

* Added emotion tagging to the save object

* Accordion blurb for planned features

* Fixed padding issue

* Fixed wording
  • Loading branch information
@adrianghnguyen
adrianghnguyen authored Jan 12, 2024
1 parent 1e55cac commit 1753288
Show file tree
Hide file tree
Showing 6 changed files with 144 additions and 40 deletions.
33 changes: 33 additions & 0 deletions static/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -82,3 +82,36 @@
.callout-bdc h4 {
color: #29527a;
}


.tags-look .tagify__dropdown__item{
display: inline-block;
vertical-align: middle;
border-radius: 3px;
padding: .3em .5em;
border: 1px solid #CCC;
background: #F3F3F3;
margin: .2em;
font-size: .85em;
color: black;
transition: 0s;
}

.tags-look .tagify__dropdown__item--active{
color: black;
}

.tags-look .tagify__dropdown__item:hover{
background: lightyellow;
border-color: gold;
}

.tags-look .tagify__dropdown__item--hidden {
max-width: 0;
max-height: initial;
padding: .3em 0;
margin: .2em 0;
white-space: nowrap;
text-indent: -20px;
border: 0;
}
9 changes: 8 additions & 1 deletion static/local_storage.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -46,6 +46,7 @@ function process_data_html(parsed_data) {
const original_input = parsed_data.inputText;
const payload_emotion_results = parsed_data.emotionResults;
const user_reflection_notes = parsed_data.userReflection
const user_emotion_tags = parsed_data.userEmotionTags

let html_content = `<div id=${parsed_data.keyName}>`;
html_content += `<hr>`;
Expand All @@ -62,11 +63,17 @@ function process_data_html(parsed_data) {
});
html_content += `</ul>`;

// If user never submitted an additional note - it won't output
// Personal content section
if (typeof user_reflection_notes !== 'undefined'){
html_content += `<p>Your personal notes: ${user_reflection_notes}</p>`
}

if (typeof user_emotion_tags !== 'undefined'){
console.log(user_emotion_tags)
const list_user_emotion_tags = user_emotion_tags.map(item => ' '+item.value)
html_content += `Tagged emotions: ${list_user_emotion_tags}</p>`
}

html_content += `</div>`; // Close the container div for each entry
return html_content;
}
Expand Down
2 changes: 0 additions & 2 deletions static/render_chart.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -124,7 +124,6 @@ function radarEmotionCategories(emotion_result_object, element_id) { // Right no
sorted_chart_data.push(chart_data[category])
}

console.log(sorted_chart_data)
createRadarChart(higher_emotion_categories, sorted_chart_data, 'Category average', element_id)
}

Expand Down Expand Up @@ -179,7 +178,6 @@ function lineChartTimelineCategory(all_data, element_name) {
category_timeline_values[category] = [];
}

console.log(category_averages_dict[category])
category_timeline_values[category].push(category_averages_dict[category])
}

Expand Down
Empty file added static/tag_selection.js
View file
Empty file.
18 changes: 18 additions & 0 deletions templates/index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -9,6 +9,7 @@ <h2 class="text-center">Cultivate your emotional awareness with an ML-powered fe
</div>
<!-- Explaining the website -->
<div class="accordion mb-3" id="accordionExample">
<!-- Accordion fold -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne"
Expand Down Expand Up @@ -52,6 +53,23 @@ <h2 class="accordion-header">
</div>
</div>
</div>
<!-- Accordion fold -->
<div class="accordion-item">
<h2 class="accordion-header">
<button class="accordion-button collapsed" type="button" data-bs-toggle="collapse" data-bs-target="#collapseThree"
aria-expanded="true" aria-controls="collapseThree">
Planned features/Under consideration
</button>
</h2>
<div id="collapseThree" class="accordion-collapse collapse" data-bs-parent="#accordionExample">
<div class="accordion-body">
<ul>Polish pass to make it prettier - UI prettiness is secondary at the moment</ul>
<ul>Re-work emotion dictionary selection to be more intuitive. Add description to emotion selection</ul>
<ul>Adding in more graphs to the Analytics page</ul>
<ul>Interactive exercises based on the mood of the user</ul>
</div>
</div>
</div>
</div>
<!-- Input form -->
<div class="mb-3">
Expand Down
122 changes: 85 additions & 37 deletions templates/processed_text.html
View file
Original file line number Diff line number Diff line change
@@ -1,10 +1,15 @@
{% extends "base.html" %}
{% block title %} Processed entry {% endblock %}
{% block head %}
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify"></script>
<script src="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.polyfills.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/@yaireo/tagify/dist/tagify.css" rel="stylesheet" type="text/css" />
{% endblock %}
{% block content %}

<!-- Machine-learning model results-->
<div class="container border border-secondary rounded mb-3" id="chart_displays" >
<h3 class="py-3">Machine-learning detected results</h3>
<h3 class="py-3">Here's a starting point...</h3>
<div class="row justify-content-center">
<div class="col-sm" id="custom-container" style="max-width: 400px">
<canvas id="radarEmotionCategories"></canvas>
Expand Down Expand Up @@ -38,7 +43,30 @@ <h3 class="py-3">Machine-learning detected results</h3>
<div class="container" id="text_input">
<p id="inputText" >{{ input_text }}</p>
</div>
<!-- Ask user to begin investigating their emotion -->
<div class="container my-3" id="feelings_prompt">
<div class="py-3" id="human_friendly_emotion_result">
<h5>Am I experiencing a sense of...</h5>
{% for result in emotion_results %}
{% if result.get("filter") == True and result.get("emotion") != "neutral" %}
<li>
<b>{{ result.get("emotion")|capitalize }}?</b> {{ result.get("definition")}}
</li>
<!-- Any other emotions -->
{% endif %}
{% endfor %}

</div>
<div id="additional_resources">
<p>Here are some list of additional resources to find other words to describe your emotional experience --
Placeholder</p>
<li><a
href="https://brenebrown.com/wp-content/uploads/2023/05/Atlas-Resources_02_List-of-Emotions_FeaturedCover.png">Atlas of the Heart</a></li>
<li><a href="https://tomdrummond.com/wp-content/uploads/2019/11/Emotion-Feelings.pdf">Emotion dictionary</a></li>
</div>
</div>
</div>
<!-- Save results into local storage script -->
<script>
function saveResult(){
<!-- Write in submitted values to local storage. Keep as local script to pass in results -->
Expand Down Expand Up @@ -78,40 +106,61 @@ <h3 class="py-3">Machine-learning detected results</h3>
radarEmotionCategories(latest_emotion_result, 'radarEmotionCategories')
}

saveResult()
saveResult()
</script>
<!-- Ask user to begin investigating their emotion -->
<div class="container my-3" id="feelings_prompt">
<div class="py-3" id="human_friendly_emotion_result">
<h5>Am I experiencing a sense of...</h5>
{% for result in emotion_results %}
{% if result.get("filter") == True and result.get("emotion") != "neutral" %}
<li>
<b>{{ result.get("emotion")|capitalize }}?</b> {{ result.get("definition")}}
</li>
<!-- Any other emotions -->
{% endif %}
{% endfor %}
</div>
<div id="additional_resources">
<p>Here are some list of additional resources to find other words to describe your emotional experience --
Placeholder</p>
<li><a
href="https://brenebrown.com/wp-content/uploads/2023/05/Atlas-Resources_02_List-of-Emotions_FeaturedCover.png">Atlas of the Heart</a></li>
<li><a href="https://tomdrummond.com/wp-content/uploads/2019/11/Emotion-Feelings.pdf">Emotion dictionary</a></li>
</div>
</div>

<!--Ask for user to reflect-->
<div class="container p-3" id="user_reflection">
<div id="saveAlertPlaceholder"></div>
<div class="input-group">
<textarea class="form-control" id="user_reflection_text" name="input_text" rows="5"
placeholder="(Placeholder) Write down additional thoughts such as bodily sensations, etc."></textarea>
</div>
<button type="submit" id="saveButton" class="btn btn-primary mt-3"
onclick="saveUserReflection('user_reflection_text')" >Save
personal note</button>
<!-- Pop up when the user clicks "Save personal note" -->
<div id="saveAlertPlaceholder"></div>
<!-- Ask the user to tag their emotions -->
<div class="" id="user_emotion_tagging">
<h4>I am feeling...</h4>
<!-- Reads from the valid results to generate the pre-suggested emotion tags -->
{% set emotion_valid_results = [] %}
{% for result in emotion_results %}
{% if result.get("filter") == True and result.get("emotion") != "neutral" %}
{% set _ = emotion_valid_results.append(result.get("emotion").capitalize()) %}
{% endif %}
{% endfor %}
<input name='input-custom-dropdown' class="container rounded mb-2" placeholder='I am feeling...' value={{ emotion_valid_results|join(',')}}>
<script>
var input = document.querySelector('input[name="input-custom-dropdown"]'),
// init Tagify script on the above inputs
tagify = new Tagify(input, {
whitelist: ["Admiration", "Agitated", "Agonized Alone", "Amusement", "Anger", "Annoyance", "Anxious", "Approval", "Ashamed", "Bashful", "Betrayed", "Blue", "Boiling", "Caring", "Cautious", "Cheerful", "Confused", "Contented", "Curious", "Dazed", "Defamed", "Defended", "Delighted", "Depressed", "Desire", "Desolate", "Despair", "Despondent", "Determined", "Deterred", "Devastated", "Devotion", "Dishonored", "Disappointed", "Disapproval", "Discouraged", "Disgraced", "Disgusted", "Dismayed", "Dissatisfied", "Distressed", "Ecstatic", "Embarrassed", "Enraged", "Excitement", "Exuberant", "Frustrated", "Glad", "Gleeful", "Glorious", "Glum", "Glowing", "Grateful", "Grief", "Guilty", "Happy", "Heartbroken", "Hopeless", "Horrified", "Hurt", "Irate", "Irritated Touchy", "Joy", "Loathsome", "Lost", "Love", "Melancholy", "Mellow", "Miserable", "Moody", "Mortified", "Nervous", "Nervousness", "Optimism", "Ornery", "Outraged Boiling", "Overjoyed", "Panic", "Passionate", "Perturbed", "Petrified", "Pleased", "Pride", "Realization", "Relieved", "Remorse", "Remorseful", "Relief", "Regretful", "Remorse", "Remorseful", "Ridiculous", "Sadness", "Satisfied", "Scared stiff", "Seething", "Secretive", "Shocked", "Silly", "Sneaky", "Somber", "Sorrowful", "Startled", "Stifled", "Stunned", "Surprise", "Tender", "Terrified", "Threatened", "Thrilled", "Timid", "Touched", "Trapped", "Uncertain", "Uneasy", "Unhappy", "Unsure", "Upset", "Uptight", "Wary", "Weird", "Wishful", "Worried", "Worthless"],
maxTags: 30,
placeholder: "I am feeling...",
dropdown: {
maxItems: 20, // <- maximum allowed rendered suggestions
classname: "tags-look", // <- custom classname for this dropdown, so it could be targeted
enabled: 0, // <- Logic is kinda backward. Enabled to 0 makes it show the suggestions on clicking into the search bar.
closeOnSelect: false // <- do not hide the suggestions dropdown once an item has been selected
}
})

// Listen to changed values of tagify selection value
// Re-work this into a wrapper?
var user_emotion_tag = []
input.addEventListener('change', onChange)
function onChange(e){
tagify_object = JSON.parse(e.target.value)
user_emotion_tag = tagify_object
console.log(user_emotion_tag)
}
</script>
</div>
<div id="additional_notes_user">
<h5>Describe what might be making you experiencing these feelings</h5>
<ul>
<li>What else am I experiencing?</li>
<li>Record any bodily sensations as you explore these emotions with curiosity</li>
<li>Are there experiences that may be distorting this current experience?</li>
</ul>
<div class="input-group" id="user_free_text">
<textarea class="form-control" id="user_reflection_text" name="input_text" rows="5" placeholder="Write down anything you deem appropriate."></textarea>
</div>
</div>
<button type="submit" id="saveButton" class="btn btn-primary mt-3" onclick="saveUserReflection('user_reflection_text')">Save note to diary</button>
</div>
<script>
// When user clicks button to save their free response comments, append it to our stored object
Expand All @@ -125,7 +174,9 @@ <h5>Am I experiencing a sense of...</h5>

if (updated_entry && typeof updated_entry === 'object' && 'keyName' in updated_entry) {
updated_entry['userReflection'] = user_reflection_comment;

updated_entry['userEmotionTags'] = user_emotion_tag; // From the event listener of tagify
console.log(`Updated the user entry log`)

// Update the existing local_storage key with the newly updated object
let key_name = updated_entry.keyName;
let jsonString = JSON.stringify(updated_entry);
Expand All @@ -141,8 +192,5 @@ <h5>Am I experiencing a sense of...</h5>
// Triggers message alert after user clicks save
alertTrigger('saveAlertPlaceholder', 'saveButton', 'Personal note has been saved.', 'success')
</script>
<!--Disable for the moment-->
<!--<div class="container">-->
<!-- <button type="button" class="btn btn-secondary" onclick="window.location.href='/results'">Go to History</button>-->
<!--</div>-->
<!-- <button type="button" class="btn btn-secondary" onclick="window.location.href='/results'">Go to History</button> -->
{% endblock %}

0 comments on commit 1753288

Please sign in to comment.