Hugging Face's logo

Spaces:
Penguni
/
Image-Search-Engine
Configuration error

App Files Community
Image-Search-Engine
File size: 2,789 Bytes 
d9dc084
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
 
// ----- custom js ----- //
var imagePath = 'static/images/';

$(document).ready(function() {

  console.log("ready");
  modalControl();
  getAllImages();

});

// request for all images in database to display in modal
var getAllImages = function(){

     $.ajax({
      url: "/list",
      cache: false,
      contentType: false,
      processData: false,                        
      type: 'POST',
      success: function(data){
        displayModalImages(data.imgList);
      },
      error: function(error){
        console.log(error.toString()); 
      }
   });
}

// displays images in modal
var displayModalImages = function(imgList){

   for(var i = 0; i < imgList.length; i++){
      $(".modal-images-list").append("<img src="+imagePath+imgList[i]+" class=modal-image onclick=imageSelectSearch(this) />");

   }

}

// handles click of modal image
var imageSelectSearch = function(_this) {
  var src = $(_this).attr("src");

  $("#modal").css("display", "none");
  $(".img-preview").attr("src", src);
  $("#results").html("");
  $("#results").append("<div id=searching>Searching For Results...</div>");

  var image = src.split('/')[2];
  var imageName = image.split('.')[0];

  $("#preview-name").text('QUERY: '+imageName);

  $.ajax({
    url: "/search",
    data: {img: image},
    cache: false,
    type: 'POST',
    success: function(data){
      displayResults(data.results);
    },
    error: function(error){
      console.log(error.toString()); 
    }
   });

}

//display results
var displayResults = function(data){

  $("#results").html("");

  for(var i = 0; i < data.length; i++){
    var image = data[i].image;
    var score = data[i].score;
    var element = "<div class=img-result><img class=responsive src="+imagePath+image+"/>\
                   <div class=img-info>"+"<span class=image-name>IMAGE: "+image.split('.')[0]+"</span>\
                   <span class=img-score>SCORE: "+score+"</span></div></div>"
    $("#results").append(element);
  }
}

//Controls the opening and closing of the modal
var modalControl = function(){

  // Get the modal
  var modal = document.getElementById("modal");

  // Get the button that opens the modal
  var btn = document.getElementById("select");
  console.log(modal);
  
  // Get the <span> element that closes the modal
  var span = document.getElementsByClassName("close")[0];
  
  // When the user clicks the button, open the modal 
  btn.onclick = function() {
    modal.style.display = "block";
  }
  
  // When the user clicks on <span> (x), close the modal
  span.onclick = function() {
    modal.style.display = "none";
  }
  
  // When the user clicks anywhere outside of the modal, close it
  window.onclick = function(event) {
    if (event.target == modal) {
      modal.style.display = "none";
    }
  }
}