philomena/lib/philomena_web/templates/search/reverse/index.html.slime

h1 Reverse Search

= form_for :image, ~p"/search/reverse", [multipart: true], fn f ->
  p
    ' Basic image similarity search. Finds uploaded images similar to the one
    ' provided based on simple intensities and uses the median frame of
    ' animations; very low contrast images (such as sketches) will produce
    ' poor results and, regardless of contrast, results may include seemingly
    ' random images that look very different.

  .image-other
    #js-image-upload-previews
    p Upload a file from your computer, or provide a link to the page containing the image and click Fetch.
    .field
      = file_input f, :image, class: "input js-scraper"

    .field.field--inline
      = url_input f, :url, name: "url", class: "input input--wide js-scraper", placeholder: "Link a deviantART page, a Tumblr post, or the image directly"
      button.button.button--separate-left#js-scraper-preview(type="button" title="Fetch the image at the specified URL" data-disable-with="Fetch" disabled)
        ' Fetch

    .field-error-js.hidden.js-scraper

  h4 Optional settings

  .field
    = label f, :distance, "Match distance (suggested values: between 0.2 and 0.5)"
    br
    = number_input f, :distance, value: 0.25, min: 0, max: 1, step: 0.01, class: "input"

  = hidden_input f, :limit, value: 10

  .field
    = submit "Reverse Search", class: "button"

= cond do
  - is_nil(@images) ->
  
  - Enum.any?(@images) ->
    h2 Results

    table
      tr
        th  
        th Image
        th  
      
      = for match <- @images do
        tr
          th
            h3 = link "##{match.id}", to: ~p"/images/#{match}"
            p
              = if image_has_sources(match) do
                span.source_url
                  = link "Source", to: image_first_source(match)
              - else
                ' Unknown source

          th
            = render PhilomenaWeb.ImageView, "_image_container.html", image: match, size: :thumb, conn: @conn

          th
            h3
              = match.image_width
              | x
              => match.image_height
              ' -
              => round(match.image_size / 1024)
              ' KiB

            = render PhilomenaWeb.TagView, "_tag_list.html", tags: Tag.display_order(match.tags), conn: @conn

  - true ->
    h2 Results
    p
      ' We couldn't find any images matching this in our image database.