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

本文涉及的产品
图像搜索,任选一个服务类型 1个月
简介: 基于tensorflow和flask的本地图片库web图片搜索引擎

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:


├── database
│       ├── dataset
│       └── tags
├── imagenet
├── static
│       ├── favorite
│       ├── images
│       └── result
├── uploads
├── templates
│       └── HTML
└── .py

Main function design

front end

//Show favorite function, bind with favorite button
functionfavorite_fun()//Add a favorite function, bound to the Add to favorites button
functionaddFavorite_fun()//Confirm the collection function, bind to the Confirm collection button
functionconfirm_fun()//Delete favorite image function, bind with Delete button
functiondelete_fun()//Confirm delete function, bind with Confirm delete button
functionconfirmdelete_fun()//Tag selection function, binding to each tag button except favorite, passing arguments by str
functiontag_fun(str)//Search function, bound to the Search button
functionfun()

back end

# This function is used to do the image search/image retrieval@app.route('/imgUpload',methods=['GET','POST'])# /imgUpload matches the url in ajaxdefupload_img():# This function is tag@app.route('/tag',methods=['GET','POST'])deftag():# This function is addFavorite@app.route('/addFavorite',methods=['GET','POST'])defaddFavorite():# This function is displaying favorites@app.route('/favorite',methods=['GET','POST'])deffavorite():# This function is deleting favorites@app.route('/deleteFavorite',methods=['GET','POST'])defdeleteFavorite():


2.1.2 interface design

Start interface

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

6f1d026cd1cbff26a884f43b1fe99812.jpg

Search results interface

Show search results and description of search results:



e690f183b559239902072cd4ea3d8ecf.jpg



My favorites interface

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


f092ae6ab13dbf4bdde581fdd071d6fc.jpg


2.2 Implementation


2.2.1 Main function implementation

Show search results

front end


functionfun(){$('#div2').hide();//Hide favorites content
    $('#load').show();//Display loading animation
$("#confirm").hide();//Hide Confirm Favorites button
$("#addFavorite").show();//Show Add to favorites button   
      $("form").submit(function(evt){   
            evt.preventDefault();varformData=newFormData($(this)[0]);$.ajax({url:'imgUpload',type:'POST',data:formData,//async: false,
cache:false,contentType:false,enctype:'multipart/form-data',processData:false,success:function(response){//Response returns the searched image path
$('#load').hide();//Hidden loading animation
$('#clearrow').show();//Show Clear button
//Show searched images
$("#img0").show();$("#img1").show();$("#img2").show();$("#img3").show();$("#img4").show();$("#img5").show();$("#img6").show();$("#img7").show();$("#img8").show();//Assign values ​​to each image path
document.getElementById("img0").src=response.image0;console.log(response.image0);console.log(document.getElementById("img0").src);document.getElementById("img1").src=response.image1;document.getElementById("img2").src=response.image2;document.getElementById("img3").src=response.image3;document.getElementById("img4").src=response.image4;document.getElementById("img5").src=response.image5;document.getElementById("img6").src=response.image6;document.getElementById("img7").src=response.image7;document.getElementById("img8").src=response.image8;$('#table').show();//Display picture table
$('#resultStats').show();//Display result statement
$('#clear').show();//Show Clear button
}});returnfalse;})}

back end

@app.route('/imgUpload',methods=['GET','POST'])# /imgUpload matches the url in ajaxdefupload_img():print("image upload")result='static/result'ifnotgfile.Exists(result):# If there is no result folder, create itos.mkdir(result)shutil.rmtree(result)# Empty the result folderifrequest.method=='POST'orrequest.method=='GET':print(request.method)# check if the post request has the file partif'file'notinrequest.files:print('No file part')returnredirect(request.url)file=request.files['file']print(file.filename)# if user does not select file, browser also# submit a empty part without filenameiffile.filename=='':print('No selected file')returnredirect(request.url)iffile:# and allowed_file(file.filename):filename=secure_filename(file.filename)file.save(os.path.join(app.config['UPLOAD_FOLDER'],filename))inputloc=os.path.join(app.config['UPLOAD_FOLDER'],filename)recommend(inputloc,extracted_features)os.remove(inputloc)image_path="/result"image_list=[os.path.join(image_path,file)forfileinos.listdir(result)ifnotfile.startswith('.')]images={'image0':image_list[0],'image1':image_list[1],'image2':image_list[2],'image3':image_list[3],'image4':image_list[4],'image5':image_list[5],'image6':image_list[6],'image7':image_list[7],'image8':image_list[8]}returnjsonify(images)

Show favorites

front end


//Show favorite function, bind with favorite button
functionfavorite_fun(){$.ajax({
           url:'favorite',
           type:'POST',
           cache:false,
           contentType:false,
           enctype:'multipart/form-data',
           processData:false,
           success:function(response){//Get the image file name in the favorites from the response
$('#div2').show();//Showcase your favorites
$('#table').hide();//Hide search results
$('#resultStats').hide();//Hide search results description
varstr=response;console.log(str);//Print the image file name in your favorites
varrows=str.length/3+1;varcols=3;div1=document.getElementById('div1');//Dynamically add a favorite image table
vartab='<div id="favoriteStats">“There are '+str.length+' favorites” </div>';tab+='<table id = "favoritetable" class="table" style="background: white; border: 1px ;display:none;" >';varnumber=0;for(vari=0;i<rows;i++){tab+='<tr>';for(varj=0;j<cols;j++){if(number<str.length){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>';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>';tab+='<input type= checkbox id = checkfavoriteimg'+number+' name="checkimg2" value= favoriteimg'+number+' style= "display:none; width:30px; height:30px;">';}number++;}tab+='</tr>';}tab+='</table>';div1.innerHTML=tab;}  
      });}

back end

@app.route('/favorite',methods=['GET','POST'])deffavorite():print('favorite')image_list=[]# image_list store all image names under the favorite folderforfilenameinos.listdir(r"static/favorite"):# listdir's parameter is the path of the folderimage_list.append(filename)print(filename)# The filename is the name of the files in the favorite folder.images={}foriinrange(0,len(image_list)):images['image'+str(i)]=image_list[i]returnjsonify(image_list)


Delete favorites

front end

//Confirm delete function, bind with Confirm delete button
functionconfirmdelete_fun(){varchecked=document.getElementsByName("checkimg2");//Read the contents of the picture selection box according to the name
console.log(checked)//Print the read content
varcheckedData=[];//Store the file name of the selected picture picture
varj=0;for(vari=0;i<checked.length;i++){$("#checkfavoriteimg"+i).hide();if(checked[i].checked){//When the selection box is selected
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
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
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
if(checkedData[j].indexOf("/")>0)//If the "/" is included, the string is intercepted starting from the last "/" +1
{checkedData[j]=checkedData[j].substring(checkedData[j].lastIndexOf("/")+1,checkedData[j].length);}else{checkedData[j]=checkedData[j];}j++;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
}}console.log(checkedData)//Print the file name of the selected picture
console.log(JSON.stringify({checkedData}))//Print the result of checked data being jsonized         
$.ajax({url:'deleteFavorite',type:'POST',data:JSON.stringify({checkedData}),//Transfer the "checkedData" json
dataType:'json',contentType:'application/json; charset=UTF-8',//Transfer data in json format
success:function(){if(j>0){alert("Delete images successfully!");//Pop up Delete images successfully! Prompt box
}$("#delete").show();//Show Delete button
$("#confirmdelete").hide();//Hide Confirm Delete button
favorite_fun()//Show remaining images in favorites after deletion
}});}


back end

# This function is deleting favorites@app.route('/deleteFavorite',methods=['GET','POST'])defdeleteFavorite():print("deleteFavorite")favorite='static/favorite'ifnotgfile.Exists(favorite):# if favorite is not existingos.mkdir(favorite)# Create a new folderifrequest.method=='POST'orrequest.method=='GET':print(request.method)# checkedData stores the received data, which is the file name of the selected picturescheckedData=request.get_json()print(checkedData)imgname=[]# imgname saves the path of the selected imagesforiinrange(0,len(checkedData['checkedData'])):imgname.append('static/favorite/'+str(checkedData['checkedData'][i]))# Get the path of the selected imagesprint(imgname[i]+'has been deleted')os.remove(imgname[i])# Remove the picture from the path from the favorite folderreturnjsonify(checkedData)

tag

front end

functiontag_fun(str){$('#div2').hide();//Hide content from favorites
$('#load').show();//Display loading animation
$.ajax({
           url:'tag',
           type:'POST',
           cache:false,
           contentType:false,
           enctype:'multipart/form-data',
           processData:false,
           success:function(response){//Response returns the tag of each image
$("#confirm").hide();//Hide the Confirm collection button
$("#addFavorite").show();//Show Add to favorites button
$('#table').show();//Display result table
$('#resultStats').show();//Display result statement
$('#load').hide();//Hidden loading animation
$('#clearrow').show();//Show clearrow button
if(str=='all'){//If you choose all tag
//Show all images
$("#img0").show();$("#img1").show();$("#img2").show();$("#img3").show();$("#img4").show();$("#img5").show();$("#img6").show();$("#img7").show();$("#img8").show();}else{//If the tag of the image is not equal to the selected tag, hide it, otherwise display it
if(response.image0!=str){$("#img0").hide();}else{$("#img0").show();}if(response.image1!=str){$("#img1").hide();}else{$("#img1").show();}if(response.image2!=str){$("#img2").hide();}else{$("#img2").show();}if(response.image3!=str){$("#img3").hide();}else{$("#img3").show();}if(response.image4!=str){$("#img4").hide();}else{$("#img4").show();}if(response.image5!=str){$("#img5").hide();}else{$("#img5").show();}if(response.image6!=str){$("#img6").hide();}else{$("#img6").show();}if(response.image7!=str){$("#img7").hide();}else{$("#img7").show();}if(response.image8!=str){$("#img8").hide();}else{$("#img8").show();}}
          }
      });}


back end

# This function is tag@app.route('/tag',methods=['GET','POST'])deftag():print("tag")ifrequest.method=='POST'orrequest.method=='GET':print(request.method)# Create a file to read the stream object and read each tag fileanimalsfile_object=open('database/tags/animals.txt')babyfile_object=open('database/tags/baby.txt')birdfile_object=open('database/tags/bird.txt')carfile_object=open('database/tags/car.txt')dogfile_object=open('database/tags/dog.txt')femalefile_object=open('database/tags/female.txt')flowerfile_object=open('database/tags/flower.txt')foodfile_object=open('database/tags/food.txt')indoorfile_object=open('database/tags/indoor.txt')lakefile_object=open('database/tags/lake.txt')malefile_object=open('database/tags/male.txt')nightfile_object=open('database/tags/night.txt')peoplefile_object=open('database/tags/people.txt')plant_lifefile_object=open('database/tags/plant_life.txt')portraitfile_object=open('database/tags/portrait.txt')riverfile_object=open('database/tags/river.txt')seafile_object=open('database/tags/sea.txt')skyfile_object=open('database/tags/sky.txt')structuresfile_object=open('database/tags/structures.txt')sunsetfile_object=open('database/tags/sunset.txt')transportfile_object=open('database/tags/transport.txt')treefile_object=open('database/tags/tree.txt')waterfile_object=open('database/tags/water.txt')try:# Read the contents of each tag file and store it as a stringanimalsfile_context=animalsfile_object.read()babyfile_context=babyfile_object.read()birdfile_context=birdfile_object.read()carfile_context=carfile_object.read()dogfile_context=dogfile_object.read()femalefile_context=femalefile_object.read()flowerfile_context=flowerfile_object.read()foodfile_context=foodfile_object.read()indoorfile_context=indoorfile_object.read()lakefile_context=lakefile_object.read()malefile_context=malefile_object.read()nightfile_context=nightfile_object.read()peoplefile_context=peoplefile_object.read()plant_liftfile_context=plant_lifefile_object.read()portraitfile_context=portraitfile_object.read()riverfile_context=riverfile_object.read()seafile_context=seafile_object.read()skyfile_context=skyfile_object.read()structuresfile_context=structuresfile_object.read()sunsetfile_context=sunsetfile_object.read()transportfile_context=transportfile_object.read()treefile_context=treefile_object.read()waterfile_context=waterfile_object.read()finally:# Close fileanimalsfile_object.close()babyfile_object.close()birdfile_object.close()carfile_object.close()dogfile_object.close()femalefile_object.close()flowerfile_object.close()foodfile_object.close()indoorfile_object.close()lakefile_object.close()malefile_object.close()nightfile_object.close()peoplefile_object.close()plant_lifefile_object.close()portraitfile_object.close()riverfile_object.close()seafile_object.close()skyfile_object.close()structuresfile_object.close()sunsetfile_object.close()transportfile_object.close()treefile_object.close()waterfile_object.close()image_path="/result"# Read each image file in the result folderimage_list=[os.path.join(image_path,file)forfileinos.listdir('static/result')ifnotfile.startswith('.')]foriinrange(0,9):image_list[i]=('\n'+str(re.findall("\d+",image_list[i])[0])+'\n')# image_list存储每个图片文件的序号# image_tag stores the tag of each image fileimage_tag=[]foriinrange(0,9):# Determine which tag each image belongs toifimage_list[i]inanimalsfile_context:image_tag.append('animals')elifimage_list[i]inbabyfile_context:image_tag.append('baby')elifimage_list[i]inbirdfile_context:image_tag.append('bird')elifimage_list[i]incarfile_context:image_tag.append('car')elifimage_list[i]indogfile_context:image_tag.append('dog')elifimage_list[i]infemalefile_context:image_tag.append('female')elifimage_list[i]inflowerfile_context:image_tag.append('flower')elifimage_list[i]infoodfile_context:image_tag.append('food')elifimage_list[i]inindoorfile_context:image_tag.append('indoor')elifimage_list[i]inlakefile_context:image_tag.append('lake')elifimage_list[i]inmalefile_context:image_tag.append('male')elifimage_list[i]innightfile_context:image_tag.append('night')elifimage_list[i]inpeoplefile_context:image_tag.append('people')elifimage_list[i]inplant_liftfile_context:image_tag.append('plant_life')elifimage_list[i]inportraitfile_context:image_tag.append('portrait')elifimage_list[i]inriverfile_context:image_tag.append('river')elifimage_list[i]inseafile_context:image_tag.append('sea')elifimage_list[i]inskyfile_context:image_tag.append('sky')elifimage_list[i]instructuresfile_context:image_tag.append('structures')elifimage_list[i]insunsetfile_context:image_tag.append('sunset')elifimage_list[i]intransportfile_context:image_tag.append('transport')elifimage_list[i]intreefile_context:image_tag.append('tree')elifimage_list[i]inwaterfile_context:image_tag.append('water')images={'image0':image_tag[0],'image1':image_tag[1],'image2':image_tag[2],'image3':image_tag[3],'image4':image_tag[4],'image5':image_tag[5],'image6':image_tag[6],'image7':image_tag[7],'image8':image_tag[8]}print(images)returnjsonify(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.


a235238b91fa2a5170645224ea599983.jpg

3.2 Upload image and display search results


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


7201747b8c8f97e76dabd5ee11c5fc43.jpg




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.


2466999e39a014d37a9bc847a5e0d654.jpg




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

97045ac098bdea112ec5c8cc34003a3f.jpg

Add successfully

82e653c1e28360f7f161eadcfea4283c.jpg


3.5 Show my favorites

Click the favorite button to display my favorites:


c177a836e079768304907943e501749c.jpg



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


787e850375b7a9147ad69c70b70c5b05.jpg


Delete successfully



13cf37b22fe26e7dcccd9b54d418f129.jpg



Delete result

b80bf4026652da92260aa7168f657ee4.jpg

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

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

相关文章
|
3月前
WEB端交互元件库:Axure设计师的高效利器
EQL UI是一款功能强大、组件丰富的Axure元件库,涵盖500+设计组件与完整后台模板,助力设计师高效搭建高保真原型,提升产品设计效率与质量。
578 128
|
8月前
|
数据采集 Web App开发 API
FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
本文介绍了如何使用FastAPI和Selenium搭建RESTful接口,访问免版权图片网站Pixabay并采集图片及其描述信息。通过配置代理IP、User-Agent和Cookie,提高爬虫的稳定性和防封禁能力。环境依赖包括FastAPI、Uvicorn和Selenium等库。代码示例展示了完整的实现过程,涵盖代理设置、浏览器模拟及数据提取,并提供了详细的中文注释。适用于需要高效、稳定的Web数据抓取服务的开发者。
369 15
FastAPI与Selenium:打造高效的Web数据抓取服务 —— 采集Pixabay中的图片及相关信息
|
12月前
|
iOS开发 MacOS Python
Python编程小案例—利用flask查询本机IP归属并输出网页图片
Python编程小案例—利用flask查询本机IP归属并输出网页图片
140 1
|
前端开发 Windows
【前端web入门第一天】02 HTML图片标签 超链接标签 音频标签 视频标签
本文档详细介绍了HTML中的图片、超链接、音频和视频标签的使用方法。首先讲解了`&lt;img&gt;`标签的基本用法及其属性,包括如何使用相对路径和绝对路径。接着介绍了`&lt;a&gt;`标签,用于创建超链接,并展示了如何设置目标页面打开方式。最后,文档还涵盖了如何在网页中嵌入音频和视频文件,包括简化写法及常用属性。
251 13
|
移动开发 JavaScript 数据可视化
|
12月前
|
Python
Flask学习笔记(四):基于Flask网页显示图片
这篇博客文章介绍了如何使用Flask框架在网页上显示图片。
208 0
|
开发者 UED
Axure“Web高端交互元件库”:产品与设计的得力助手
这套“Web高端交互元件库”精心构建了四大板块内容,分别是登陆首页集合、Web框架集合、表单元件集合以及主流后台组件。每一板块都包含了大量实用且美观的交互元件,设计师与开发者可以根据具体项目需求,快速找到并应用这些元件,从而大大提升工作效率。
239 1
|
开发者 搜索推荐 Java
超越传统:JSF自定义标签库如何成为现代Web开发的个性化引擎
【8月更文挑战第31天】JavaServer Faces(JSF)框架支持通过自定义标签库扩展其内置组件,以满足特定业务需求。这涉及创建`.taglib`文件定义标签库及组件,并实现对应的Java类与渲染器。本文介绍如何构建和应用JSF自定义标签库,包括定义标签库、实现标签类与渲染器逻辑,以及在JSF页面中使用这些自定义标签,从而提升代码复用性和可维护性,助力开发更复杂且个性化的Web应用。
143 0
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
262 0
|
数据可视化 Python
通过python建立一个web服务查看服务器上的文本、图片、视频等文件
通过python建立一个web服务查看服务器上的文本、图片、视频等文件
201 0