Image retrieval system based on Flask and PyQt5
Article Directory
The requirements of an image search task
A task for image search needs to meet the following requirements:
-
Image search function: This is the core function of an image search task. Users need to be able to upload or enter an image they want to search for, and the search engine will search the database for similar or matching images and return the results to the user.
-
Database: A good image search site needs to have a large, high-quality image database in which search engines can find matching images.
-
Search algorithm: In order to achieve accurate image search, a search engine needs to have an efficient and accurate search algorithm. The algorithm should be able to match similar images together and rank the results by similarity.
-
User interface: An excellent image search task needs to have an intuitive and easy-to-use user interface, so that users can easily upload or enter their own images, and browse and filter search results. The user interface should include a search button, upload button, search results page, filter options, etc.
-
Self-select upload content: users can select local files to preview and find out the pictures to be searched through the upload button, and then upload them for the system to search.
-
Display of search results: The display of search results is also an important requirement. The search engine should be able to provide a set of search results with a high matching degree, display similar pictures in groups, provide picture thumbnails and other information, and allow users to view the specific style of the original picture of the picture.
-
Add favorite operation: The image search task also needs to provide users with the ability to add the pictures they want to the favorite list, so that users can continue to view the pictures they like or need to use in the favorite list, and select them for subsequent operations.
-
User-defined filtering: users can perform custom filtering on the searched image results in some aspects, such as image size, image ratio, image color, and so on.
-
Compatibility: A good image search website should work well on different devices and browsers, and provide a responsive design to present a good user experience on different screen sizes.
-
Security: Image search sites need to protect user privacy and security. This includes security checks on images uploaded by users, protecting users' personal information and search history, and more.
My designs for five stages
My design concept for the Five-stage search framework is mainly to use a simple and beautiful UI and functional design so that users can easily obtain the picture information they want to find through this system. The specific design of FIve-stages is as follows:
- Formulation: The image search system provides a button for uploading files, so that users can browse the images in the local file image library and select the source image to be searched.
- Initiation of action: There is a search button in the page to make the user start the process of searching for pictures.
- Review: Display the nine images searched at one time under the search box, arranged in a 3×3 matrix.
- Refinement: When the user searches, an option to select the type of search result is added, which represents the type of the searched image. The available types are horizontal version (the width of the image is greater than the height), vertical version (the height of the image is greater than the width), and This is to provide search results that are more in line with user requirements.
- Use: After the user completes the search and the search results are displayed on the interface, the user can click the button on the right of the result image to add the image to the favorites list. When the user clicks the "show favorites" button in the search bar, the pictures in the favorite list will be displayed sequentially in the form of a carousel.
Features that I implement
The first is the overall interface style, which adopts a relatively simple style and clear operation prompts to enable users to better use this image search system.
In the basic function part, set up an HTML form, use the POST method to submit data, and use the multipart/form-data encoding type to upload the image files that users need to search. At the same time, the search button can submit the uploaded image file and start the search operation.
The code is implemented as follows:
<form method="post" enctype="multipart/form-data">
<input type="file" name="file" style="font-family: 'YaSongTi', cursive;" required />
<input type="submit" value="Search!" onclick="fun()">
On the back end, search.pyimplement the search algorithm in the file, store the search results in an image list, and wait for the front end to send a POST request. On the front end, use the ajax() method of jQuery to send a POST request, where the url attribute is "imgUpload", the request method is POST, and the data is formData. The contentType, cache and processData properties are all false so that the uploaded image data is processed correctly.
$.ajax({
url: 'imgUpload',
type: 'POST',
data: formData,
cache: false,
contentType: false,
enctype: 'multipart/form-data',
processData: false,
...
});
After obtaining the search results related to the uploaded pictures, they will be displayed in the nine picture areas in turn. The search results are implemented using a basic HTML table structure, where each row contains three cells, and each cell contains a picture and A clickable favorite button, styled with CSS.
The specific UI interface code is implemented as follows (take 3 search results arranged in one line as an example):
<tr>
<td class="tdstyle">
<img id="img0" src="" alt="Norway" width="200" height="200">
<span class="addfavorite" onclick="addToFavorites('img0')">
<img id="fav0" src="{
{ url_for('static', filename='images/favor_before.svg') }}" text="favorite" alt="Add to favorites" width="20" height="20" style="vertical-align: middle;">
<span style="font-family: 'Great Vibes', cursive; font-size: 1.2em;
vertical-align: top;">favorite</span>
</span>
</td>
<td class="tdstyle">
<img id="img1" src="" alt="Norway" width="200" height="200">
<span class="addfavorite" onclick="addToFavorites('img1')">
<img id="fav1" src="{
{ url_for('static', filename='images/favor_before.svg') }}" text="favorite" alt="Add to favorites" width="20" height="20" style="vertical-align: middle;">
<span style="font-family: 'Great Vibes', cursive; font-size: 1.2em;
vertical-align: top;">favorite</span>
</span>
</td>
<td class="tdstyle">
<img id="img2" src="" alt="Norway" width="200" height="200">
<span class="addfavorite" onclick="addToFavorites('img2')">
<img id="fav2" src="{
{ url_for('static', filename='images/favor_before.svg') }}" text="favorite" alt="Add to favorites" width="20" height="20" style="vertical-align: middle;">
<span style="font-family: 'Great Vibes', cursive; font-size: 1.2em;
vertical-align: top;">favorite</span>
</span>
</td>
</tr>
In order to give users a more accurate experience of searching for the pictures they need, a function is added: set a drop-down menu to select the type of search pictures, and users can choose three picture styles: random, horizontal (the width of the picture is greater than the height), vertical ( Image width is smaller than height). After adding this function, the pictures that users search for will be in a specific style, which is convenient for users to further narrow the search scope.
The specific implementation is as follows: on the backend, search.pymodify and add a new search algorithm in , and rest-sever.pyadd judgment conditions in the original , which is used to process image uploads and process Flask Web application endpoints, and orientationcall one of three different recommendation functions according to the value of One ( recommend(), recommend1()or recommend2()) and pass inputlocthe and extracted_featuresas parameters.
def upload_img():
print("image upload")
result = 'static/result'
if not gfile.Exists(result):
os.mkdir(result)
shutil.rmtree(result)
orientation = request.form.get('orientation')
if request.method == 'POST' or request.method == 'GET':
print(request.method)
# check if the post request has the file part
if 'file' not in request.files:
print('No file part')
return redirect(request.url)
file = request.files['file']
print(file.filename)
# if user does not select file, browser also
# submit a empty part without filename
if file.filename == '':
print('No selected file')
return redirect(request.url)
if file:# 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)
if orientation=="none":
recommend(inputloc, extracted_features)
elif orientation=="horizontal":
recommend1(inputloc, extracted_features)
elif orientation=="vertical":
recommend2(inputloc, extracted_features)
os.remove(inputloc)
image_path = "/result"
image_list =[os.path.join(image_path, file) for file in os.listdir(result)
if not file.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]
}
return jsonify(images)
In terms of UI interface, a drop-down list is created to select random, landscape or portrait image type. On submitting the form, the selected option name will be set to "orientation". The style class "custom-select" is used to beautify the drop-down list, and the Chinese italic font "YaSongTi" is used to set the font style of the option text. The first option is set as a disabled and hidden option by default to instruct the user to select an image type.
<select id="orientationSelect" name="orientation" class="custom-select">
<option value="" disabled selected hidden style="font-family: 'YaSongTi', cursive;">选择图片类型</option>
<option value="none" style="font-family: 'YaSongTi', cursive;">随机</option>
<option value="horizontal" style="font-family: 'YaSongTi', cursive;">横版</option>
<option value="vertical" style="font-family: 'YaSongTi', cursive;">竖版</option>
</select>
During the loading of search results, provide an animation effect of a water balloon to show the loading percentage. Implemented via a loading animation with three wavy SVG paths, hidden using CSS, and revealed when clicked to search. During the loading process, the fill color of the SVG path will change dynamically, showing the percentage of the loading progress.
<div id="load" class="box flex-row j_c" style="display:none">
<div class="box-inner">
<div class="inner" style="--per:0%" id="box">
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 600 140" class="box-waves">
<path d="M 0 70 Q 75 20,150 70 T 300 70 T 450 70 T 600 70 L 600 140 L 0 140 L 0 70Z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 600 140" class="box-waves">
<path d="M 0 70 Q 75 20,150 70 T 300 70 T 450 70 T 600 70 L 600 140 L 0 140 L 0 70Z">
</path>
</svg>
<svg xmlns="http://www.w3.org/2000/svg" version="1.0" viewBox="0 0 600 140" class="box-waves">
<path d="M 0 70 Q 75 20,150 70 T 300 70 T 450 70 T 600 70 L 600 140 L 0 140 L 0 70Z">
</path>
</svg>
</div>
</div>
<div id="percentText" class="box-text">--%</div>
</div>
In order to enable users to record the desired search results for subsequent operations, I have added a favorite function to this system, adding a button to each searched image result so that users can add them favorite picture. Then add a show favoritesbutton in the search bar, so that users can click to view the pictures they have already collected for follow-up operations.
In terms of specific implementation, an "add to favorites" button is set for each picture, including a click event for triggering the adding operation and an HTML element including an icon and text. The icon is an SVG image, and a JavaScript function is used to change it to a different image when the favorite is added successfully. The text part uses the handwritten font "Great Vibes" and sets the font size to 1.2em, indicating that the action of the button is "favorite".
<span class="addfavorite" onclick="addToFavorites('img0')">
<img id="fav0" src="{
{ url_for('static', filename='images/favor_before.svg') }}" text="favorite" alt="Add to favorites" width="20" height="20" style="vertical-align: middle;">
<span style="font-family: 'Great Vibes', cursive; font-size: 1.2em;vertical-align:top;">favorite</span>
</span>
var favorites = [];
var currentIndex = 0;
function addToFavorites(imgId) {
var img = document.getElementById(imgId);
var imgUrl = img.src;
if (!favorites.includes(imgUrl)) {
document.getElementById("fav"+imgId.charAt(3)).src="{
{ url_for('static', filename='images/favor_after.svg') }}";
favorites.push(imgUrl);
console.log(favorites);
}
};
After clicking show favoritesthe button, bind the function after the successful click through JavaScript to display the pictures in the favorite list.
function showFavorites() {
var favList = document.getElementById("favList");
$('#favList').show();
favList.innerHTML = "";
$('#pictures').hide();
for (var i = 0; i < favorites.length; i++) {
var img = document.createElement("img");
img.src = favorites[i];
img.addEventListener('click', function() {
// 切换到下一张图片
currentIndex = (currentIndex + 1) % favorites.length;
updateActiveClass();
});
favList.appendChild(img);
}
updateActiveClass();
}
At the same time, this picture search system has some other designs. For example, when the mouse moves to the title bar, the title bar will change color, and the mouse moves to the magnifying glass picture on the right side of the title bar, and the picture will have the effect of rotating 360 degrees. Clicking it will refresh the page.
