maidr 2.22.1 → 2.23.1

package/dist/maidr.js

@@ -405,7 +405,7 @@ class Constants {
    * @default 0
    * @memberof AdvancedUserSettings
    */
-  canTrack = 0; // 0 / 1, can we track user data
+  canTrack = 1; // 0 / 1, can we track user data
   /**
    * How are we representing braille? like, is it 1:1 with the chart, or do we do some compression and try to represent as accuratly as we can? Not currently in use.
    * @type {boolean}
@@ -446,6 +446,7 @@ class Constants {
     'LLMGeminiMulti',
     'LLMModels',
     'autoInitLLM',
+    'clientToken',
   ];
 
   // LLM settings
@@ -644,6 +645,17 @@ class Constants {
    */
   manualData = true; // pull from manual data like chart2music (true), or do the old method where we pull from the chart (false)
 
+  /**
+   * Base URL for the API calls to backend services.
+   */
+  // baseURL = 'https://maidr-service.azurewebsites.net/api/';
+  baseURL = 'http://localhost:7071/api/';
+
+  // code = '?code=I8Aa2PlPspjQ8Hks0QzGyszP8_i2-XJ3bq7Xh8-ykEe4AzFuYn_QWA%3D%3D';
+  code = '';
+
+  clientToken = null;
+
   /**
    * Stops the autoplay if it is currently running.
    *
@@ -1203,14 +1215,18 @@ class Menu {
       document.getElementById('LLM_model_openai'),
       'change',
       function (e) {
-        if (e.target.checked) {
-          document
-            .getElementById('openai_auth_key_container')
-            .classList.remove('hidden');
+        if (constants.clientToken && constants.emailAuthKey) {
+          console.log('Client token and email auth key already set');
         } else {
-          document
-            .getElementById('openai_auth_key_container')
-            .classList.add('hidden');
+          if (e.target.checked) {
+            document
+              .getElementById('openai_auth_key_container')
+              .classList.remove('hidden');
+          } else {
+            document
+              .getElementById('openai_auth_key_container')
+              .classList.add('hidden');
+          }
         }
       },
     ]);
@@ -1219,14 +1235,18 @@ class Menu {
       document.getElementById('LLM_model_gemini'),
       'change',
       function (e) {
-        if (e.target.checked) {
-          document
-            .getElementById('gemini_auth_key_container')
-            .classList.remove('hidden');
+        if (constants.clientToken && constants.emailAuthKey) {
+          console.log('Client token and email auth key already set');
         } else {
-          document
-            .getElementById('gemini_auth_key_container')
-            .classList.add('hidden');
+          if (e.target.checked) {
+            document
+              .getElementById('gemini_auth_key_container')
+              .classList.remove('hidden');
+          } else {
+            document
+              .getElementById('gemini_auth_key_container')
+              .classList.add('hidden');
+          }
         }
       },
     ]);
@@ -1235,18 +1255,26 @@ class Menu {
       document.getElementById('LLM_model_claude'),
       'change',
       function (e) {
-        // if (e.target.checked) {
-        document
-          .getElementById('claude_auth_key_container')
-          .classList.add('hidden');
-        // } else {
-        //   document
-        //     .getElementById('claude_auth_key_container')
-        //     .classList.add('hidden');
-        // }
+        if (constants.clientToken && constants.emailAuthKey) {
+          console.log('Client token and email auth key already set');
+        } else {
+          document
+            .getElementById('claude_auth_key_container')
+            .classList.add('hidden');
+        }
       },
     ]);
 
+    constants.events.push([
+      document
+        .getElementById('email_auth_key')
+        .addEventListener('keydown', function (event) {
+          if (event.key === 'Enter') {
+            document.getElementById('verify').click();
+          }
+        }),
+    ]);
+
     // Skill level other events
     constants.events.push([
       document.getElementById('skill_level'),
@@ -1293,6 +1321,9 @@ class Menu {
         if (checked.length > 2) {
           checkbox.checked = false;
           alert('You can select up to 2 AI models.');
+        } else if (checked.length === 0) {
+          checkbox.checked = true;
+          alert('You must select at least one AI model.');
         }
       });
     });
@@ -1393,12 +1424,17 @@ class Menu {
       document.getElementById('aria_mode_assertive').checked = false;
     }
 
-    for (let model in constants.LLMModels) {
-      document.getElementById(`LLM_model_${model}`).checked = true;
+    if (constants.emailAuthKey && constants.clientToken) {
+      console.log('email auth key and client token found');
+      this.DisableLLMAPIKeys();
+    } else {
+      for (let model in constants.LLMModels) {
+        document.getElementById(`LLM_model_${model}`).checked = true;
 
-      document
-        .getElementById(`${model}_auth_key_container`)
-        .classList.remove('hidden');
+        document
+          .getElementById(`${model}_auth_key_container`)
+          .classList.remove('hidden');
+      }
     }
     document
       .getElementById(`claude_auth_key_container`)
@@ -1477,38 +1513,75 @@ class Menu {
     }
   }
 
-  VerifyEmail() {
-    let email = document.getElementById('email_auth_key').value;
-    if (email && email.indexOf('@') !== -1) {
-      let url = `https://maidr-service.azurewebsites.net/api/send_email?code=I8Aa2PlPspjQ8Hks0QzGyszP8_i2-XJ3bq7Xh8-ykEe4AzFuYn_QWA%3D%3D`;
+  DisableLLMAPIKeys() {
+    document.getElementById('email_auth_key').disabled = true;
 
-      let requestJson = {
-        email: email,
-      };
+    // hide verify button
+    document.getElementById('verify').classList.add('hidden');
 
-      fetch(url, {
-        method: 'POST',
-        headers: {
-          'Content-Type': 'application/json',
-          Authentication: constants.emailAuthKey,
-        },
-        body: JSON.stringify(requestJson),
-      })
-        .then((response) => response.json())
-        .then((data) => {
-          if (data && data.success) {
-            alert('Link sent to email address: ' + email);
-          } else {
-            console.log(data);
-            alert(data.data);
-          }
+    // remove listener on enter
+    document
+      .getElementById('email_auth_key')
+      .removeEventListener('keydown', function (event) {
+        if (event.key === 'Enter') {
+          document.getElementById('verify').click();
+        }
+      });
+  }
+
+  isEmailTriggered = false;
+
+  VerifyEmail() {
+    console.log('verify email');
+    if (!this.isEmailTriggered) {
+      this.isEmailTriggered = true;
+      let email = document.getElementById('email_auth_key').value;
+      if (email && email.indexOf('@') !== -1) {
+        let url = constants.baseURL + `send_email` + constants.code;
+
+        let requestJson = {
+          email: email,
+        };
+
+        fetch(url, {
+          method: 'POST',
+          headers: {
+            'Content-Type': 'application/json',
+            Authentication: constants.emailAuthKey,
+          },
+          body: JSON.stringify(requestJson),
         })
-        .catch((error) => {
-          console.log(error);
-          alert(error.data);
-        });
-    } else {
-      alert('Please enter a valid email address.');
+          .then((response) => response.json())
+          .then((data) => {
+            if (data && data.message && data.client_token) {
+              alert(data.message);
+              constants.clientToken = data.client_token;
+
+              this.DisableLLMAPIKeys();
+
+              for (let model in constants.LLMModels) {
+                document
+                  .getElementById(`${model}_auth_key_container`)
+                  .classList.add('hidden');
+              }
+
+              this.SaveDataToLocalStorage();
+              this.isEmailTriggered = false;
+            } else {
+              console.log(data);
+              alert(data.data);
+              this.isEmailTriggered = false;
+            }
+          })
+          .catch((error) => {
+            console.log(error);
+            alert(error.data);
+            this.isEmailTriggered = false;
+          });
+      } else {
+        alert('Please enter a valid email address.');
+        this.isEmailTriggered = false;
+      }
     }
   }
 
@@ -1811,6 +1884,16 @@ class ChatLLM {
       'click',
       function (e) {
         document.getElementById('email_auth_key').value = '';
+        document.getElementById('email_auth_key').disabled = false;
+        constants.clientToken = '';
+        document.getElementById('verify').classList.remove('hidden');
+        document
+          .getElementById('email_auth_key')
+          .addEventListener('keydown', function (event) {
+            if (event.key === 'Enter') {
+              document.getElementById('verify').click();
+            }
+          });
       },
     ]);
     constants.events.push([
@@ -2290,8 +2373,7 @@ class ChatLLM {
 
   ClaudePromptAPI(text, imgBase64 = null) {
     console.log('Claude prompt API');
-    let url =
-      'https://maidr-service.azurewebsites.net/api/claude?code=I8Aa2PlPspjQ8Hks0QzGyszP8_i2-XJ3bq7Xh8-ykEe4AzFuYn_QWA%3D%3D';
+    let url = constants.baseURL + 'claude' + constants.code;
 
     // Create the prompt
     let prompt = constants.LLMSystemMessage;
@@ -2313,7 +2395,7 @@ class ChatLLM {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        Authentication: constants.emailAuthKey,
+        Authentication: constants.emailAuthKey + ' ' + constants.clientToken,
       },
       body: JSON.stringify(requestJson),
     })
@@ -2368,17 +2450,15 @@ class ChatLLM {
 
   OpenAIPromptAPI(text, img = null) {
     // request init
-    let url =
-      'https://maidr-service.azurewebsites.net/api/openai?code=I8Aa2PlPspjQ8Hks0QzGyszP8_i2-XJ3bq7Xh8-ykEe4AzFuYn_QWA%3D%3D';
+    let url = constants.baseURL + 'openai' + constants.code;
     let auth = constants.openAIAuthKey;
     let requestJson = chatLLM.OpenAIJson(text, img);
-    console.log('LLM request: ', requestJson);
 
     fetch(url, {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        Authentication: constants.emailAuthKey,
+        Authentication: constants.emailAuthKey + ' ' + constants.clientToken,
       },
       body: JSON.stringify(requestJson),
     })
@@ -2402,7 +2482,7 @@ class ChatLLM {
     if (!this.requestJson) {
       this.requestJson = {};
       //this.requestJson.model = 'gpt-4-vision-preview';
-      this.requestJson.model = 'gpt-4o-2024-08-06';
+      this.requestJson.model = 'gpt-4o-2024-11-20';
       this.requestJson.max_tokens = constants.LLMmaxResponseTokens; // note: if this is too short (tested with less than 200), the response gets cut off
 
       // sys message
@@ -2505,8 +2585,7 @@ class ChatLLM {
   }
 
   async GeminiPromptAPI(text, imgBase64 = null) {
-    let url =
-      'https://maidr-service.azurewebsites.net/api/gemini?code=I8Aa2PlPspjQ8Hks0QzGyszP8_i2-XJ3bq7Xh8-ykEe4AzFuYn_QWA%3D%3D';
+    let url = constants.baseURL + 'gemini' + constants.code;
 
     // Create the prompt
     let prompt = constants.LLMSystemMessage;
@@ -2528,7 +2607,7 @@ class ChatLLM {
       method: 'POST',
       headers: {
         'Content-Type': 'application/json',
-        Authentication: constants.emailAuthKey,
+        Authentication: constants.emailAuthKey + ' ' + constants.clientToken,
       },
       body: JSON.stringify(requestJson),
     });
@@ -3096,8 +3175,7 @@ class Helper {
  */
 class Tracker {
   // URL
-  logUrl =
-    'https://maidr-service.azurewebsites.net/api/log?code=I8Aa2PlPspjQ8Hks0QzGyszP8_i2-XJ3bq7Xh8-ykEe4AzFuYn_QWA%3D%3D'; // TODO Replace
+  logUrl = constants.baseURL + 'log' + constants.code; // TODO Replace
   isLocal = false;
 
   constructor() {
@@ -11800,13 +11878,13 @@ function SetEvents() {
   for (let i = 0; i < constants.events.length; i++) {
     if (Array.isArray(constants.events[i][0])) {
       for (let j = 0; j < constants.events[i][0].length; j++) {
-        constants.events[i][0][j].addEventListener(
+        constants.events[i][0][j]?.addEventListener(
           constants.events[i][1],
           constants.events[i][2]
         );
       }
     } else {
-      constants.events[i][0].addEventListener(
+      constants.events[i][0]?.addEventListener(
         constants.events[i][1],
         constants.events[i][2]
       );