iqdb: hide low similarity results behind "show" link.

app/controllers/iqdb_queries_controller.rb

@@ -3,9 +3,9 @@ class IqdbQueriesController < ApplicationController
 
   def show
     # XXX allow bare search params for backwards compatibility.
-    search_params.merge!(params.slice(:url, :post_id, :limit, :similarity).permit!)
+    search_params.merge!(params.slice(:url, :post_id, :limit, :similarity, :high_similarity).permit!)
 
-    @matches = IqdbProxy.search(search_params)
+    @high_similarity_matches, @low_similarity_matches, @matches = IqdbProxy.search(search_params)
     respond_with(@matches, template: "iqdb_queries/show")
   end
 

app/javascript/packs/application.js

@@ -33,6 +33,7 @@ export { default as Blacklist } from '../src/javascripts/blacklists.js';
 export { default as Comment } from '../src/javascripts/comments.js';
 export { default as CurrentUser } from '../src/javascripts/current_user.js';
 export { default as Dtext } from '../src/javascripts/dtext.js';
+export { default as IqdbQuery } from '../src/javascripts/iqdb_queries.js';
 export { default as Note } from '../src/javascripts/notes.js';
 export { default as Post } from '../src/javascripts/posts.js.erb';
 export { default as PostModeMenu } from '../src/javascripts/post_mode_menu.js';

app/javascript/src/javascripts/iqdb_queries.js

@@ -0,0 +1,11 @@
+let IqdbQuery = {};
+
+IqdbQuery.initialize_all = function() {
+  $(document).on("click.danbooru", "a.toggle-iqdb-posts-low-similarity", function(event) {
+    $(".iqdb-posts-low-similarity").toggle();
+    $("a.toggle-iqdb-posts-low-similarity").toggle();
+    event.preventDefault();
+  });
+};
+
+$(document).ready(IqdbQuery.initialize_all);

app/javascript/src/javascripts/uploads.js.erb

@@ -6,7 +6,8 @@ let Upload = {};
 
 Upload.MAX_FILE_SIZE = <%= Danbooru.config.max_file_size.to_json %> / (1024 * 1024);
 Upload.IQDB_LIMIT = 5;
-Upload.IQDB_SIMILARITY = 50;
+Upload.IQDB_MIN_SIMILARITY = 50;
+Upload.IQDB_HIGH_SIMILARITY = 65;
 
 Upload.initialize_all = function() {
   if ($("#c-uploads,#c-posts").length) {
@@ -81,7 +82,14 @@ Upload.initialize_similar = function() {
 
     let source = $("#upload_source").val();
     if (/^https?:\/\//.test(source)) {
-      $.get("/iqdb_queries.js", { url: source, limit: Upload.IQDB_LIMIT, similarity: Upload.IQDB_SIMILARITY });
+      $.get("/iqdb_queries.js", {
+        limit: Upload.IQDB_LIMIT,
+        search: {
+          url: source,
+          similarity: Upload.IQDB_MIN_SIMILARITY,
+          high_similarity: Upload.IQDB_HIGH_SIMILARITY
+        }
+      });
     }
   });
 }

app/javascript/src/styles/specific/iqdb_queries.scss

@@ -0,0 +1,4 @@
+.iqdb-posts-low-similarity {
+  display: inline-block;
+  background-color: var(--error-background-color);
+}

app/logical/iqdb_proxy.rb

@@ -9,7 +9,8 @@ class IqdbProxy
     raise NotImplementedError, "the IQDBs service isn't configured" unless enabled?
 
     limit = params[:limit]&.to_i&.clamp(1, 1000) || 20
-    similarity = params[:similarity].to_f.clamp(0.0, 100.0)
+    similarity = params[:similarity]&.to_f&.clamp(0.0, 100.0) || 0.0
+    high_similarity = params[:high_similarity]&.to_f&.clamp(0.0, 100.0) || 65.0
 
     if params[:file].present?
       results = query(file: params[:file], limit: limit)
@@ -24,7 +25,10 @@ class IqdbProxy
     end
 
     results = results.select { |result| result["score"] >= similarity }.take(limit)
-    decorate_posts(results)
+    matches = decorate_posts(results)
+    high_similarity_matches, low_similarity_matches = matches.partition { |match| match["score"] >= high_similarity }
+
+    [high_similarity_matches, low_similarity_matches, matches]
   end
 
   def self.query(params)

app/views/iqdb_queries/_matches.html.erb

@@ -1,11 +1,26 @@
-<% if @matches.present? %>
-  <h3>Similar Posts</h3>
-  <p class="fineprint">Found <%= pluralize(@matches.length, "similar post") %>:</p>
+<div class="iqdb-posts">
+  <h2>Similar Posts</h2>
 
-  <% @matches.each do |match| %>
-    <%= PostPresenter.preview(match["post"], tags: "status:any", similarity: match["score"], size: true, compact: true) %>
-  <% end %>
-<% else %>
-  <h3>Similar Posts</h3>
-  <p class="fineprint">No similar posts found.</p>
-<% end %>
+  <p class="fineprint">
+    <% if @high_similarity_matches.blank? %>
+      No similar posts found.
+    <% end %>
+
+    <% if @low_similarity_matches.present? %>
+      Found <%= pluralize(@low_similarity_matches.length, "low similarity match") %>
+      (<%= link_to "show", "#", class: "toggle-iqdb-posts-low-similarity" %><%= link_to "hide", "#", class: "toggle-iqdb-posts-low-similarity", style: "display: none" %>)
+    <% end %>
+  </p>
+
+  <span class="iqdb-posts-high-similarity">
+    <% @high_similarity_matches.each do |match| %>
+      <%= PostPresenter.preview(match["post"], tags: "status:any", similarity: match["score"], size: true) %>
+    <% end %>
+  </span>
+
+  <span class="iqdb-posts-low-similarity" style="display: none">
+    <% @low_similarity_matches.each do |match| %>
+      <%= PostPresenter.preview(match["post"], tags: "status:any", similarity: match["score"], size: true) %>
+    <% end %>
+  </span>
+</div>