基于tensorflow和flask的本地图片库web图片搜索引擎

发布日期: 2019-05-24 11:09:42 浏览量: 483
评分:
star star star star star star star star star star_border
*转载请注明来自write-bug.com

1 Project Overview

1.1 Project Description

Based on tensorflow and Flask, a web-based image search engine is realized, which can realize simple image search function based on server images database.

1.2 Project function requirements

  • It contains an input box to upload an image (Formulation)

  • Users can preview the query image in the searching window (Formulation)

  • It has a search button (Initiation)

  • Provide an overview of the results (e.g. the total number of results) (Review)

  • Allow changing search parameters (e.g. select certain category/tag) when reviewing results (Refinement)

  • Users can take some actions, e.g. add selected images to a favorite list (Use)

2 Design and implementation

2.1 Design

2.1.1 Code design

The program code is divided into two parts: front end and back end. The front and back end realize data transmission through Flask. The back end is python program, and the front end is web application.

The file directory structure is as follows:

  1. ├── database
  2. ├── dataset
  3. └── tags
  4. ├── imagenet
  5. ├── static
  6. ├── favorite
  7. ├── images
  8. └── result
  9. ├── uploads
  10. ├── templates
  11. └── HTML
  12. └── .py

Main function design

front end

  1. //Show favorite function, bind with favorite button
  2. function favorite_fun()
  3. //Add a favorite function, bound to the Add to favorites button
  4. function addFavorite_fun()
  5. //Confirm the collection function, bind to the Confirm collection button
  6. function confirm_fun()
  7. //Delete favorite image function, bind with Delete button
  8. function delete_fun()
  9. //Confirm delete function, bind with Confirm delete button
  10. function confirmdelete_fun()
  11. //Tag selection function, binding to each tag button except favorite, passing arguments by str
  12. function tag_fun(str)
  13. //Search function, bound to the Search button
  14. function fun()

back end

  1. # This function is used to do the image search/image retrieval
  2. @app.route('/imgUpload', methods=['GET', 'POST']) # /imgUpload matches the url in ajax
  3. def upload_img():
  4. # This function is tag
  5. @app.route('/tag', methods=['GET', 'POST'])
  6. def tag():
  7. # This function is addFavorite
  8. @app.route('/addFavorite', methods=['GET', 'POST'])
  9. def addFavorite():
  10. # This function is displaying favorites
  11. @app.route('/favorite', methods=['GET', 'POST'])
  12. def favorite():
  13. # This function is deleting favorites
  14. @app.route('/deleteFavorite', methods=['GET', 'POST'])
  15. def deleteFavorite():

2.1.2 interface design

Start interface

Include theme、upload file button、search button、preview image、tag bar and my favorites.

Search results interface

Show search results and description of search results:

My favorites interface

Show a collection of pictures, a description of the number of pictures.

2.2 Implementation

2.2.1 Main function implementation

Show search results

front end

  1. function fun(){
  2. $('#div2').hide();//Hide favorites content
  3. $('#load').show();//Display loading animation
  4. $("#confirm").hide();//Hide Confirm Favorites button
  5. $("#addFavorite").show();//Show Add to favorites button
  6. $("form").submit(function(evt){
  7. evt.preventDefault();
  8. var formData = new FormData($(this)[0]);
  9. $.ajax({
  10. url: 'imgUpload',
  11. type: 'POST',
  12. data: formData,
  13. //async: false,
  14. cache: false,
  15. contentType: false,
  16. enctype: 'multipart/form-data',
  17. processData: false,
  18. success: function (response) {//Response returns the searched image path
  19. $('#load').hide();//Hidden loading animation
  20. $('#clearrow').show();//Show Clear button
  21. //Show searched images
  22. $("#img0").show();
  23. $("#img1").show();
  24. $("#img2").show();
  25. $("#img3").show();
  26. $("#img4").show();
  27. $("#img5").show();
  28. $("#img6").show();
  29. $("#img7").show();
  30. $("#img8").show();
  31. //Assign values ​​to each image path
  32. document.getElementById("img0").src = response.image0;
  33. console.log(response.image0);
  34. console.log(document.getElementById("img0").src);
  35. document.getElementById("img1").src = response.image1;
  36. document.getElementById("img2").src = response.image2;
  37. document.getElementById("img3").src = response.image3;
  38. document.getElementById("img4").src = response.image4;
  39. document.getElementById("img5").src = response.image5;
  40. document.getElementById("img6").src = response.image6;
  41. document.getElementById("img7").src = response.image7;
  42. document.getElementById("img8").src = response.image8;
  43. $('#table').show();//Display picture table
  44. $('#resultStats').show();//Display result statement
  45. $('#clear').show();//Show Clear button
  46. }
  47. });
  48. return false;
  49. })
  50. }

back end

  1. @app.route('/imgUpload', methods=['GET', 'POST']) # /imgUpload matches the url in ajax
  2. def upload_img():
  3. print("image upload")
  4. result = 'static/result'
  5. if not gfile.Exists(result): # If there is no result folder, create it
  6. os.mkdir(result)
  7. shutil.rmtree(result) # Empty the result folder
  8. if request.method == 'POST' or request.method == 'GET':
  9. print(request.method)
  10. # check if the post request has the file part
  11. if 'file' not in request.files:
  12. print('No file part')
  13. return redirect(request.url)
  14. file = request.files['file']
  15. print(file.filename)
  16. # if user does not select file, browser also
  17. # submit a empty part without filename
  18. if file.filename == '':
  19. print('No selected file')
  20. return redirect(request.url)
  21. if file: # and allowed_file(file.filename):
  22. filename = secure_filename(file.filename)
  23. file.save(os.path.join(app.config['UPLOAD_FOLDER'], filename))
  24. inputloc = os.path.join(app.config['UPLOAD_FOLDER'], filename)
  25. recommend(inputloc, extracted_features)
  26. os.remove(inputloc)
  27. image_path = "/result"
  28. image_list = [os.path.join(image_path, file) for file in os.listdir(result)
  29. if not file.startswith('.')]
  30. images = {
  31. 'image0': image_list[0],
  32. 'image1': image_list[1],
  33. 'image2': image_list[2],
  34. 'image3': image_list[3],
  35. 'image4': image_list[4],
  36. 'image5': image_list[5],
  37. 'image6': image_list[6],
  38. 'image7': image_list[7],
  39. 'image8': image_list[8]
  40. }
  41. return jsonify(images)

Show favorites

front end

  1. //Show favorite function, bind with favorite button
  2. function favorite_fun(){
  3. $.ajax({
  4. url: 'favorite',
  5. type: 'POST',
  6. cache: false,
  7. contentType: false,
  8. enctype: 'multipart/form-data',
  9. processData: false,
  10. success: function (response) {//Get the image file name in the favorites from the response
  11. $('#div2').show();//Showcase your favorites
  12. $('#table').hide();//Hide search results
  13. $('#resultStats').hide();//Hide search results description
  14. var str = response;
  15. console.log(str);//Print the image file name in your favorites
  16. var rows = str.length/3 + 1;
  17. var cols = 3;
  18. div1 = document.getElementById('div1');
  19. //Dynamically add a favorite image table
  20. var tab='<div id="favoriteStats">“There are '+ str.length +' favorites” </div>';
  21. tab+='<table id = "favoritetable" class="table" style="background: white; border: 1px ;display:none;" >';
  22. var number = 0;
  23. for(var i=0;i<rows;i++){
  24. tab+='<tr>';
  25. for(var j=0;j<cols;j++){
  26. if(number < str.length){
  27. tab+='<td style= "box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s;width: 200px;height: 200px;padding-top: 0px;padding-bottom: 0px;padding-right: 0px;padding-left: 0px;border-left-width: 1px;border-bottom-width: 1px;border-right-width: 1px;background: white;">'+(i+j)+'</td>';
  28. tab+='<img id= favoriteimg'+number+' src= favorite/'+str[number]+ ' alt = Noway style= "box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2); transition: 0.3s; width: 290px;height: 200px;padding-top: 5px;padding-bottom: 5px;padding-right: 5px;padding-left: 5px;border-left-width: 0px;border-bottom-width: 0px;border-right-width: 0px;"></img>';
  29. tab+='<input type= checkbox id = checkfavoriteimg'+number+' name="checkimg2" value= favoriteimg'+number+' style= "display:none; width:30px; height:30px;">';
  30. }
  31. number ++;
  32. }
  33. tab+='</tr>';
  34. }
  35. tab+='</table>';
  36. div1.innerHTML=tab;
  37. }
  38. });
  39. }

back end

  1. @app.route('/favorite', methods=['GET', 'POST'])
  2. def favorite():
  3. print('favorite')
  4. image_list = [] # image_list store all image names under the favorite folder
  5. for filename in os.listdir(r"static/favorite"): # listdir's parameter is the path of the folder
  6. image_list.append(filename)
  7. print(filename) # The filename is the name of the files in the favorite folder.
  8. images = {}
  9. for i in range(0, len(image_list)):
  10. images['image'+str(i)] = image_list[i]
  11. return jsonify(image_list)

Delete favorites

front end

  1. //Confirm delete function, bind with Confirm delete button
  2. function confirmdelete_fun(){
  3. var checked = document.getElementsByName("checkimg2");//Read the contents of the picture selection box according to the name
  4. console.log(checked)//Print the read content
  5. var checkedData = [];//Store the file name of the selected picture picture
  6. var j = 0;
  7. for (var i = 0; i < checked.length; i++) {
  8. $("#checkfavoriteimg"+i).hide();
  9. if (checked[i].checked){//When the selection box is selected
  10. console.log(checked[i].value);//Print the selected image corresponding to the value of the selection box, and print the id of the selected image
  11. console.log(document.getElementById(checked[i].value).src);//Print the address of the selected image in the format of http://127.0.0.1:5000/result/im1428.jpg
  12. checkedData.push(document.getElementById(checked[i].value).src);//Get the image address according to the picture id, the address format is http://127.0.0.1:5000/result/im1428.jpg
  13. if(checkedData[j].indexOf("/")>0)//If the "/" is included, the string is intercepted starting from the last "/" +1
  14. {checkedData[j]=checkedData[j].substring(checkedData[j].lastIndexOf("/")+1,checkedData[j].length);}
  15. else
  16. {checkedData[j]=checkedData[j];}
  17. j++;
  18. checked[i].checked = false;//The status of the selection box is unchecked, otherwise the status of the selection box will not be refreshed after the final confirmation of the collection
  19. }
  20. }
  21. console.log(checkedData)//Print the file name of the selected picture
  22. console.log(JSON.stringify({checkedData}))//Print the result of checked data being jsonized
  23. $.ajax({
  24. url: 'deleteFavorite',
  25. type: 'POST',
  26. data: JSON.stringify({checkedData}),//Transfer the "checkedData" json
  27. dataType: 'json',
  28. contentType: 'application/json; charset=UTF-8',//Transfer data in json format
  29. success: function () {
  30. if(j>0){
  31. alert("Delete images successfully!");//Pop up Delete images successfully! Prompt box
  32. }
  33. $("#delete").show();//Show Delete button
  34. $("#confirmdelete").hide();//Hide Confirm Delete button
  35. favorite_fun()//Show remaining images in favorites after deletion
  36. }
  37. });
  38. }

back end

  1. # This function is deleting favorites
  2. @app.route('/deleteFavorite', methods=['GET', 'POST'])
  3. def deleteFavorite():
  4. print("deleteFavorite")
  5. favorite = 'static/favorite'
  6. if not gfile.Exists(favorite): # if favorite is not existing
  7. os.mkdir(favorite) # Create a new folder
  8. if request.method == 'POST' or request.method == 'GET':
  9. print(request.method)
  10. # checkedData stores the received data, which is the file name of the selected pictures
  11. checkedData = request.get_json()
  12. print(checkedData)
  13. imgname = [] # imgname saves the path of the selected images
  14. for i in range(0, len(checkedData['checkedData'])):
  15. imgname.append('static/favorite/'+str(checkedData['checkedData'][i])) # Get the path of the selected images
  16. print(imgname[i]+'has been deleted')
  17. os.remove(imgname[i]) # Remove the picture from the path from the favorite folder
  18. return jsonify(checkedData)

tag

front end

  1. function tag_fun(str){
  2. $('#div2').hide();//Hide content from favorites
  3. $('#load').show();//Display loading animation
  4. $.ajax({
  5. url: 'tag',
  6. type: 'POST',
  7. cache: false,
  8. contentType: false,
  9. enctype: 'multipart/form-data',
  10. processData: false,
  11. success: function (response) {//Response returns the tag of each image
  12. $("#confirm").hide();//Hide the Confirm collection button
  13. $("#addFavorite").show();//Show Add to favorites button
  14. $('#table').show();//Display result table
  15. $('#resultStats').show();//Display result statement
  16. $('#load').hide();//Hidden loading animation
  17. $('#clearrow').show();//Show clearrow button
  18. if (str == 'all'){//If you choose all tag
  19. //Show all images
  20. $("#img0").show();
  21. $("#img1").show();
  22. $("#img2").show();
  23. $("#img3").show();
  24. $("#img4").show();
  25. $("#img5").show();
  26. $("#img6").show();
  27. $("#img7").show();
  28. $("#img8").show();
  29. }
  30. else{
  31. //If the tag of the image is not equal to the selected tag, hide it, otherwise display it
  32. if (response.image0 != str)
  33. {$("#img0").hide();}
  34. else
  35. {$("#img0").show();}
  36. if (response.image1 != str)
  37. {$("#img1").hide();}
  38. else
  39. {$("#img1").show();}
  40. if (response.image2 != str)
  41. {$("#img2").hide();}
  42. else
  43. {$("#img2").show();}
  44. if (response.image3 != str)
  45. {$("#img3").hide();}
  46. else
  47. {$("#img3").show();}
  48. if (response.image4 != str)
  49. {$("#img4").hide();}
  50. else
  51. {$("#img4").show();}
  52. if (response.image5 != str)
  53. {$("#img5").hide();}
  54. else
  55. {$("#img5").show();}
  56. if (response.image6 != str)
  57. {$("#img6").hide();}
  58. else
  59. {$("#img6").show();}
  60. if (response.image7 != str)
  61. {$("#img7").hide();}
  62. else
  63. {$("#img7").show();}
  64. if (response.image8 != str)
  65. {$("#img8").hide();}
  66. else
  67. {$("#img8").show();}
  68. }
  69. }
  70. });
  71. }

back end

  1. # This function is tag
  2. @app.route('/tag', methods=['GET', 'POST'])
  3. def tag():
  4. print("tag")
  5. if request.method == 'POST' or request.method == 'GET':
  6. print(request.method)
  7. # Create a file to read the stream object and read each tag file
  8. animalsfile_object = open('database/tags/animals.txt')
  9. babyfile_object = open('database/tags/baby.txt')
  10. birdfile_object = open('database/tags/bird.txt')
  11. carfile_object = open('database/tags/car.txt')
  12. dogfile_object = open('database/tags/dog.txt')
  13. femalefile_object = open('database/tags/female.txt')
  14. flowerfile_object = open('database/tags/flower.txt')
  15. foodfile_object = open('database/tags/food.txt')
  16. indoorfile_object = open('database/tags/indoor.txt')
  17. lakefile_object = open('database/tags/lake.txt')
  18. malefile_object = open('database/tags/male.txt')
  19. nightfile_object = open('database/tags/night.txt')
  20. peoplefile_object = open('database/tags/people.txt')
  21. plant_lifefile_object = open('database/tags/plant_life.txt')
  22. portraitfile_object = open('database/tags/portrait.txt')
  23. riverfile_object = open('database/tags/river.txt')
  24. seafile_object = open('database/tags/sea.txt')
  25. skyfile_object = open('database/tags/sky.txt')
  26. structuresfile_object = open('database/tags/structures.txt')
  27. sunsetfile_object = open('database/tags/sunset.txt')
  28. transportfile_object = open('database/tags/transport.txt')
  29. treefile_object = open('database/tags/tree.txt')
  30. waterfile_object = open('database/tags/water.txt')
  31. try:
  32. # Read the contents of each tag file and store it as a string
  33. animalsfile_context = animalsfile_object.read()
  34. babyfile_context = babyfile_object.read()
  35. birdfile_context = birdfile_object.read()
  36. carfile_context = carfile_object.read()
  37. dogfile_context = dogfile_object.read()
  38. femalefile_context = femalefile_object.read()
  39. flowerfile_context = flowerfile_object.read()
  40. foodfile_context = foodfile_object.read()
  41. indoorfile_context = indoorfile_object.read()
  42. lakefile_context = lakefile_object.read()
  43. malefile_context = malefile_object.read()
  44. nightfile_context = nightfile_object.read()
  45. peoplefile_context = peoplefile_object.read()
  46. plant_liftfile_context = plant_lifefile_object.read()
  47. portraitfile_context = portraitfile_object.read()
  48. riverfile_context = riverfile_object.read()
  49. seafile_context = seafile_object.read()
  50. skyfile_context = skyfile_object.read()
  51. structuresfile_context = structuresfile_object.read()
  52. sunsetfile_context = sunsetfile_object.read()
  53. transportfile_context = transportfile_object.read()
  54. treefile_context = treefile_object.read()
  55. waterfile_context = waterfile_object.read()
  56. finally:
  57. # Close file
  58. animalsfile_object.close()
  59. babyfile_object.close()
  60. birdfile_object.close()
  61. carfile_object.close()
  62. dogfile_object.close()
  63. femalefile_object.close()
  64. flowerfile_object.close()
  65. foodfile_object.close()
  66. indoorfile_object.close()
  67. lakefile_object.close()
  68. malefile_object.close()
  69. nightfile_object.close()
  70. peoplefile_object.close()
  71. plant_lifefile_object.close()
  72. portraitfile_object.close()
  73. riverfile_object.close()
  74. seafile_object.close()
  75. skyfile_object.close()
  76. structuresfile_object.close()
  77. sunsetfile_object.close()
  78. transportfile_object.close()
  79. treefile_object.close()
  80. waterfile_object.close()
  81. image_path = "/result"
  82. # Read each image file in the result folder
  83. image_list = [os.path.join(image_path, file) for file in os.listdir('static/result')
  84. if not file.startswith('.')]
  85. for i in range(0, 9):
  86. image_list[i] = ('\n'+str(re.findall("\d+", image_list[i])[0])+'\n') # image_list存储每个图片文件的序号
  87. # image_tag stores the tag of each image file
  88. image_tag =[]
  89. for i in range(0, 9): # Determine which tag each image belongs to
  90. if image_list[i] in animalsfile_context:
  91. image_tag.append('animals')
  92. elif image_list[i] in babyfile_context:
  93. image_tag.append('baby')
  94. elif image_list[i] in birdfile_context:
  95. image_tag.append('bird')
  96. elif image_list[i] in carfile_context:
  97. image_tag.append('car')
  98. elif image_list[i] in dogfile_context:
  99. image_tag.append('dog')
  100. elif image_list[i] in femalefile_context:
  101. image_tag.append('female')
  102. elif image_list[i] in flowerfile_context:
  103. image_tag.append('flower')
  104. elif image_list[i] in foodfile_context:
  105. image_tag.append('food')
  106. elif image_list[i] in indoorfile_context:
  107. image_tag.append('indoor')
  108. elif image_list[i] in lakefile_context:
  109. image_tag.append('lake')
  110. elif image_list[i] in malefile_context:
  111. image_tag.append('male')
  112. elif image_list[i] in nightfile_context:
  113. image_tag.append('night')
  114. elif image_list[i] in peoplefile_context:
  115. image_tag.append('people')
  116. elif image_list[i] in plant_liftfile_context:
  117. image_tag.append('plant_life')
  118. elif image_list[i] in portraitfile_context:
  119. image_tag.append('portrait')
  120. elif image_list[i] in riverfile_context:
  121. image_tag.append('river')
  122. elif image_list[i] in seafile_context:
  123. image_tag.append('sea')
  124. elif image_list[i] in skyfile_context:
  125. image_tag.append('sky')
  126. elif image_list[i] in structuresfile_context:
  127. image_tag.append('structures')
  128. elif image_list[i] in sunsetfile_context:
  129. image_tag.append('sunset')
  130. elif image_list[i] in transportfile_context:
  131. image_tag.append('transport')
  132. elif image_list[i] in treefile_context:
  133. image_tag.append('tree')
  134. elif image_list[i] in waterfile_context:
  135. image_tag.append('water')
  136. images = {
  137. 'image0': image_tag[0],
  138. 'image1': image_tag[1],
  139. 'image2': image_tag[2],
  140. 'image3': image_tag[3],
  141. 'image4': image_tag[4],
  142. 'image5': image_tag[5],
  143. 'image6': image_tag[6],
  144. 'image7': image_tag[7],
  145. 'image8': image_tag[8]
  146. }
  147. print(images)
  148. return jsonify(images)

3 how to run

3.1 Start

Run the rest-sever.py file to start the server

Start the search engine by typing 127.0.0.1:5000 in the browser.

3.2 Upload image and display search results

Upload a local file and click the Search button to display the search results.

3.3 Tag

After getting the search results, click on the different tag buttons to display the images of the different tags under the results.

3.4 Add to favorites

Click the Add to favorites button, the selection box is displayed under the picture, select the picture, click the confirmation button, add the favorites, and the collection is successful (the picture is not prompted if no picture is selected)

Add to favorites

Add successfully

3.5 Show my favorites

Click the favorite button to display my favorites:

3.6 Delete favorite images

Click the Delete button, the selection box will be displayed next to the picture, select the picture, click the confirmation button, delete the picture, the prompt is deleted successfully (the picture is not prompted if no picture is selected)

Delete

Delete successfully

Delete result

由于包含图片集以及索引集,文件较大无法上传,所以下载文件中只包含代码以及readme。

完整文件附上百度网盘地址及其提取码

上传的附件 cloud_download 基于tensorflow和flask的本地图片库web图片搜索引擎.zip ( 12.85mb, 5次下载 )
error_outline 下载需要5点积分

发送私信

6
文章数
1
评论数
eject