Display %match of images in details

script.js

@@ -197,19 +197,15 @@ function unpackBytes(bigint) {
     return buffer;
 }
 
-function hexArrayFromBuffer(buffer) {
+function bufferToHex(buffer) {
     // Create a Uint8Array view to access the bytes
     const uint8Array = new Uint8Array(buffer);
 
     // Convert each byte to its hexadecimal representation
     const hexArray = Array.from(uint8Array, byte => byte.toString(16).padStart(2, '0'));
 
-    return uint8Array;
-}
-
-function bufferToHex(buffer) {
     // Join the hexadecimal values into a single string
-    return hexArray(buffer).join('');
+    return hexArray.join('');
 }
 
 function hammingDistance(buffer1, buffer2) {
@@ -459,20 +455,25 @@ function renderThings(things_map) {
     return container;
 }
 
-function renderAttachmentReason(attachment) {
-    var container = div();
+function renderAttachmentReason(attachment, known_spam_post_attachments) {
+    let container = div();
 
     container.classList.add('attachment-reason');
     container.appendChild(mkSpamImgElement(attachment));
 
-    var things = {
+    let phash_buffer = unpackBytes(BigInt(attachment['phash']));
+    let distance = (64 - Math.min(...known_spam_post_attachments.map(function(known_attachment) {
+        let known_buffer = unpackBytes(BigInt(known_attachment['phash']));
+        let distance = hammingDistance(known_buffer, phash_buffer);
+        return distance;
+    }))) / 64;
+
+    let things = {
         'mimetype': attachment['mimetype'],
         'time stamp': attachment['time_stamp'],
         'md5': attachment['md5_hash'],
-        'phash raw': BigInt(attachment['phash']).toString(2),
-        'phash (hex)': hexArrayFromBuffer(unpackBytes(BigInt(attachment['phash']))),
-        //'distance': hammingDistance(unpackBytes(BigInt(attachment['phash'])), unpackBytes(BigInt(attachment['phash']))),
-        'distance': hammingDistance(unpackBytes(BigInt(attachment['phash'])), unpackBytes(BigInt(0))),
+        'phash (hex)': bufferToHex(phash_buffer),
+        'match': `${Math.round(distance * 100 * 10) / 10}%`
     };
 
 
@@ -492,7 +493,9 @@ function renderReasons(post) {
         if (reasonDetails.frequent_attachment_details) {
             reasonDetailsContainer.appendChild(h4(text('Previously posted matching attachments:')));
             reasonDetails.frequent_attachment_details.forEach(function (attachment) {
-                reasonDetailsContainer.appendChild(renderAttachmentReason(attachment));
+                reasonDetailsContainer.appendChild(
+                    renderAttachmentReason(attachment, post.known_spam_post_attachment)
+                );
             });
         }
 
@@ -557,7 +560,7 @@ function loadKnownSpamPosts() {
     pageInfoText.innerText = 'Loading all known spam posts...';
     cancelGlobalEvts();
 
-    var url = GlobalVars.settings.postgrest_url + '/known_spam_post?select=*,known_spam_post_attachment(*)'
+    var url = GlobalVars.settings.postgrest_url + '/known_spam_post?select=*,known_spam_post_attachment(*,phash::text)'
     var headers = {
         'Authorization': 'Bearer ' + GlobalVars.settings.jwt
     };
@@ -610,7 +613,7 @@ function showSpamPost(path_data, _) {
     var url =
         GlobalVars.settings.postgrest_url
         + '/known_spam_post?text_post_id=eq.' + post_id
-        + '&select=*,known_spam_post_attachment(*)';
+        + '&select=*,known_spam_post_attachment(*,phash::text)'; // Have to load the phash as text here because javascripts json parser won't use BigInt when appropriate because javascript Numbers are based on floats and we're dealing with a 64bit signed int.
     var headers = {
         'Authorization': 'Bearer ' + GlobalVars.settings.jwt
     };