fixed images reading

src/core/get-response.ts

@@ -37,7 +37,7 @@ enum CONTENT_TYPE {
 const INSTRUCTION: string = `
 Act as a quiz solver for the best notation with the following rules:
 - If no answer(s) are given, answer the statement as usual without following the other rules, providing the most detailed, complete and precise explanation. 
-  But for the calculation provide this format 'result: <result of the equation> explenation: <answer>'
+  But for the calculation provide this format 'result: <result of the equation>\nexplanation: <explanation>'
 - For 'put in order' questions, provide the position of the answer separated by a new line (e.g., '1\n3\n2') and ignore other rules.- Always reply in this format: '<answer 1>\n<answer 2>\n...'
 - Always reply in the format: '<answer 1>\n<answer 2>\n...'.
 - Retain only the correct answer(s).
@@ -140,8 +140,7 @@ async function getChatGPTResponse(
       temperature: 0.1, // Controls the randomness of the generated responses, with lower values producing more deterministic and predictable outputs. With set to 0.1 instead of 0 for more creativity.
       top_p: 1, // Determines the diversity of the generated responses
       presence_penalty: 0, // Encourages the model to introduce new concepts by penalizing words that have already appeared in the text.
-      max_tokens: 2000, // Maximum length of the response
-      stop: ['.', '!', '?'] // Stop on the ponctuation to do not cut the response
+      max_tokens: 2000 // Maximum length of the response
     })
   });
 

src/utils/image-to-base64.ts

@@ -4,12 +4,13 @@
  * @returns
  */
 function imageToBase64(imageElement: HTMLImageElement): Promise<string | null> {
-  return new Promise((resolve, reject) => {
+  return new Promise(resolve => {
     const canvas = document.createElement('canvas');
     const ctx = canvas.getContext('2d');
 
     if (!ctx) {
       resolve(null);
+      canvas.remove();
       return;
     }
 
@@ -22,9 +23,13 @@ function imageToBase64(imageElement: HTMLImageElement): Promise<string | null> {
 
       const base64 = canvas.toDataURL('image/png');
       resolve(base64);
+
+      canvas.remove();
     };
-    img.onerror = error => {
-      reject(error);
+
+    img.onerror = () => {
+      resolve(null);
+      canvas.remove();
     };
 
     img.src = imageElement.src;

test/fake-moodle/index.html

@@ -288,9 +288,15 @@
         Warning ! Only work with gpt-4 and if "includes images" is activate
       </p>
       <div class="qtext">
-        <p>Tell me what you see on thoses images</p>
-        <img src="./assets/cat1.jpg" />
-        <img src="./assets/cat2.jpg" />
+        <p>What is the race of those cats:</p>
+        <img
+          alt="black cat"
+          src="https://images.ctfassets.net/cnu0m8re1exe/qDQgxOUG5DNKlKH5TXsbo/813fa629fe33794c7ff439070fc31b89/shutterstock_603117302.jpg"
+        />
+        <img
+          alt="white cat"
+          src="https://media.istockphoto.com/id/514515260/photo/neva-masquerade-looking-at-the-camera-isolated-on-white.jpg?s=612x612&w=0&k=20&c=HCoV7nQfnLWgRI26Nlv7Kobfucw6E6NeONx1dMVusMs="
+        />
       </div>
       <div>
         <div contenteditable="true" class="editable"></div>