add sentiment (#47)

ml5js · Mar 28, 2024 · fdec211 · fdec211
1 parent a0fc5b5
commit fdec211
Show file tree

Hide file tree

Showing 6 changed files with 234 additions and 2 deletions.
diff --git a/docs/reference/iframes/body-segmentation/index.html b/docs/reference/iframes/body-segmentation/index.html
@@ -11,8 +11,8 @@
 
 <body>
   <div class="content-container">
-    <h1>Body Segmentation Model</h1>
-    <p>(Add description.) Ensure to enable the webcam.</p>
+    <h1>Sentiment Analysis Model</h1>
+    <p>(Add description.)</p>
     <button>
       <a href="main.html">Start!</a>
     </button>

diff --git a/docs/reference/iframes/sentiment/index.html b/docs/reference/iframes/sentiment/index.html
@@ -0,0 +1,22 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <meta charset="UTF-8">
+  <meta http-equiv="X-UA-Compatible" content="IE=edge">
+  <meta name="viewport" content="width=device-width, initial-scale=1.0">
+  <title>p5.js iframe</title>
+  <link rel="stylesheet" href="../style.css">
+</head>
+
+<body>
+  <div class="content-container">
+    <h1>Body Segmentation Model</h1>
+    <p>(Add description.) Ensure to enable the webcam.</p>
+    <button>
+      <a href="main.html">Start!</a>
+    </button>
+  </div>
+</body>
+
+</html>
diff --git a/docs/reference/iframes/sentiment/main.html b/docs/reference/iframes/sentiment/main.html
@@ -0,0 +1,24 @@
+<!DOCTYPE html>
+<html lang="en">
+
+<head>
+  <script src="https://unpkg.com/ml5@alpha/dist/ml5.js"></script>
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>
+  <!-- <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/addons/p5.sound.min.js"></script> -->
+  <script src="https://cdnjs.cloudflare.com/ajax/libs/dat-gui/0.7.9/dat.gui.min.js"></script>
+  <link rel="stylesheet" type="text/css" href="../style.css">
+  <meta charset="utf-8" />
+</head>
+
+<body>
+  <main>
+  </main>
+  <div class="content-container">
+    <button>
+      <a href="index.html">Stop</a>
+    </button>
+  </div>
+  <script src="script.js"></script>
+</body>
+
+</html>
diff --git a/docs/reference/iframes/sentiment/script.js b/docs/reference/iframes/sentiment/script.js
@@ -0,0 +1,49 @@
+// Copyright (c) 2023 ml5
+//
+// This software is released under the MIT License.
+// https://opensource.org/licenses/MIT
+
+let sentiment;
+let statusEl; // to display model loading status
+let submitBtn;
+let inputBox;
+let sentimentResult;
+
+function setup() {
+  noCanvas();
+  // initialize sentiment analysis model
+  sentiment = ml5.sentiment("movieReviews", modelReady);
+
+  // setup the html dom elements
+  statusEl = createP("Loading Model...");
+  inputBox = createInput("Today is the happiest day and is full of rainbows!");
+  inputBox.attribute("size", "75");
+  submitBtn = createButton("submit");
+  sentimentResult = createP("Sentiment score:");
+
+  // predicting the sentiment when submit button is pressed
+  submitBtn.mousePressed(getSentiment);
+}
+
+function getSentiment() {
+  // get the values from the input
+  let text = inputBox.value();
+
+  // make the prediction
+  let prediction = sentiment.predict(text);
+
+  // display sentiment result on html page
+  sentimentResult.html("Sentiment score: " + prediction.score);
+}
+
+// a callback function that is called when model is ready
+function modelReady() {
+  statusEl.html("Model loaded");
+}
+
+// predicting the sentiment when 'Enter' key is pressed
+function keyPressed() {
+  if (keyCode == ENTER) {
+    getSentiment();
+  }
+}
diff --git a/docs/reference/sentiment.md b/docs/reference/sentiment.md
@@ -0,0 +1,136 @@
+# Sentiment
+
+<center>
+    <img style="display:block;max-height:20rem" alt="sentiment" src="_media/reference__header-sentiment.png">
+</center>
+
+## Description
+Sentiment is a model trained to predict the sentiment of any given text. For example, it can predict how positive or negative a review is with a value between 0 ("negative") and 1 ("positive"). 
+
+The model is trained using IMDB reviews that have been truncated to a maximum of 200 words, only the 20000 most used words in the reviews are used.
+
+### Key Features
+* **Sentiment Analysis**: The model can predict the sentiment of a given text.
+
+### Output Example
+The output is a value between 0 and 1, where 0 is negative and 1 is positive.
+
+```javascript
+{score: 0.9999948740005493}
+```
+
+## Getting Started
+Integrating Sentiment into your ml5.js projects is straightforward. Our documentation and user-friendly API will help you make the most of this model!
+
+### Demo
+[p5 Web Editor](iframes/sentiment ':include :type=iframe width=100% height=550px')
+
+### Quickstart
+Before you start, let's create an empty project in the [p5 web editor](https://editor.p5js.org/).
+
+First of all, copy and paste the following code into your **index.html** file. If you are not familiar with the p5 web editor interface, you can find a guide on how to find your **index.html** file [here](/?id=try-ml5js-online-1).
+
+```html
+<script src="https://unpkg.com/ml5@alpha/dist/ml5.js"></script>
+```
+
+Next, copy and paste the following code into your **sketch.js** file.
+
+```javascript
+let sentiment;
+let statusEl; // to display model loading status
+let submitBtn;
+let inputBox;
+let sentimentResult;
+
+function setup() {
+  noCanvas();
+  // initialize sentiment analysis model
+  sentiment = ml5.sentiment("movieReviews", modelReady);
+
+  // setup the html dom elements
+  statusEl = createP("Loading Model...");
+  inputBox = createInput("Today is the happiest day and is full of rainbows!");
+  inputBox.attribute("size", "75");
+  submitBtn = createButton("submit");
+  sentimentResult = createP("Sentiment score:");
+
+  // predicting the sentiment when submit button is pressed
+  submitBtn.mousePressed(getSentiment);
+}
+
+function getSentiment() {
+  // get the values from the input
+  let text = inputBox.value();
+
+  // make the prediction
+  let prediction = sentiment.predict(text);
+
+  // display sentiment result on html page
+  sentimentResult.html("Sentiment score: " + prediction.score);
+}
+
+// a callback function that is called when model is ready
+function modelReady() {
+  statusEl.html("Model loaded");
+}
+
+// predicting the sentiment when 'Enter' key is pressed
+function keyPressed() {
+  if (keyCode == ENTER) {
+    getSentiment();
+  }
+}
+```
+Alternatively, you can open [this example code](https://github.com/ml5js/ml5-next-gen/tree/main/examples/Sentiment) and try it yourself on p5.js web editor!
+
+### Additional Examples
+(To be added)
+
+## Usage
+### Initialize
+
+```js
+const sentiment = ml5.sentiment(model, ?callback);
+```
+
+#### Parameters
+* **model**: REQUIRED. Defaults to 'moviereviews'. You can also use a path to a `manifest.json` file via a relative or absolute path.
+* **callback**: OPTIONAL. A callback function that is called once the model has loaded. If no callback is provided, it will return a promise that will be resolved once the model has loaded.
+
+
+### Properties
+
+***
+#### .ready
+> Boolean value that specifies if the model has loaded.
+***
+
+***
+#### .model
+> The model being used.
+***
+
+
+### Methods
+
+
+***
+#### .predict()
+> Given a number, will make magicSparkles
+
+```js
+sentiment.predict(text);
+```
+
+📥 **Inputs**
+
+* **text**: Required. String. A string of text to predict
+
+
+📤 **Outputs**
+
+* **Object**: Scores the sentiment of given text with a value between 0 ("negative") and 1 ("positive").
+
+***
+
diff --git a/docs/sidebar.md b/docs/sidebar.md
@@ -15,6 +15,7 @@
     * [Handpose](/reference/handpose.md)
     * [Facemesh](/reference/facemesh.md)
     * [ImageClassifier](/reference/image-classifier.md)
+    * [Sentiment](/reference/sentiment.md)
     <!-- * [SoundClassifier](/reference/sound-classifier.md) -->
   * **ml5 + Teachable Machine** ✍️
     * [Image + Teachable Machine](/reference/image-classifier-tm.md)