Utilizing Unsplash API for Image Search in Python

in this Python article, We’ll discuss creating an Image Search App with Python and Unsplash API. This is a very common functionality in any web application. that provides functionality to search an image from a image library.

An image search application allows users to find images based on various criteria such as keywords, image content, or even web links to images.

Pre-Requisite:

Python 3
Flask framework
Unsplash API

Image Search with Python & Flask

Let’s create a user-friendly interface for searching images by keyword and implement the image search functionality using the Unsplash API with Python and Flask.

Create Project and Module Installation

Create a sample Python project 'image-search-using-python', which will hold all our project files:

$ mkdir image-search-using-python

Python
​x
 
$ mkdir image-search-using-python

navigate to image-search-using-python

$ cd image-search-python-flask

Python
xxxxxxxxxx
 
$ cd image-search-python-flask

Let’s install the required modules for our application. we’ll install the Flask micro-framework by using the following command:

pip install Flask

Python
xxxxxxxxxx
 
pip install Flask

Create Flask Application

Create a Python file named "app.py" for our project and import the required modules:

from flask import Flask, render_template, request, redirect, url_for
import sys
import os
import requests

configure flaask aapp and run it on defualt port:

app = Flask(__name__)
app.secret_key = '1234567890'  

if __name__ == '__main__':
    app.run()

Python
xxxxxxxxxx
 
from flask import Flask, render_template, request, redirect, url_for
import sys
import os
import requests
​
configure flaask aapp and run it on defualt port:
​
app = Flask(__name__)
app.secret_key = '1234567890'  
​
if __name__ == '__main__':
    app.run()

Create Image Search Form UI:

Next, create a template file for our Flask application. Within a “templates” directory in our project, create an "index.html" template file. Construct a search form allowing users to input keywords:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Search App Python</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">  
            <div class="col-md-6 mx-auto"><br>
                <h1>Image Search App Python</h1><br>
                <form method="POST" class="">
                    {% if message %}
                        <div class="alert alert-warning">{{ message }}</div>
                    {% endif %}
                    <div class="form-group">
                        <label>Enter Keyword : </label><br />
                        <input type="text" value="{{ searchQuery }}" class="form-control" name="searchQuery" placeholder="enter keywords ...">
                    </div>
                    <br>
                    <button type="submit" class="btn btn-primary">Search</button>       
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Python
xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Image Search App Python</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
</head>
<body>
    <div class="container">
        <div class="row">  
            <div class="col-md-6 mx-auto"><br>
                <h1>Image Search App Python</h1><br>
                <form method="POST" class="">
                    {% if message %}
                        <div class="alert alert-warning">{{ message }}</div>
                    {% endif %}
                    <div class="form-group">
                        <label>Enter Keyword : </label><br />
                        <input type="text" value="{{ searchQuery }}" class="form-control" name="searchQuery" placeholder="enter keywords ...">
                    </div>
                    <br>
                    <button type="submit" class="btn btn-primary">Search</button>       
                </form>
            </div>
        </div>
    </div>
</div>
</body>
</html>

Image Search with Unsplash API

Now, I’ll create the "index()" method in "app.py" file to facilitate image searches based on user-inputted keywords. Once the form has been submitted, We retrieve the keyword and make a request to the Unsplash API to search for images:

@app.route('/', methods=['GET', 'POST'])
def index():    
    searchResult = ''
    message = ''
    searchQuery = ''
    clientId = 'your_client_id_here'  # Replace with your actual client ID
    if request.method == 'POST':        
        searchQuery = str(request.form.get('searchQuery', ''))
        if searchQuery:            
            apiUrl = 'https://api.unsplash.com/search/photos'
            params = {'query': searchQuery, 'client_id': clientId}
            response = requests.get(apiUrl, params=params, allow_redirects=True)
            searchResult = response.json()
        else:
            message = 'Please enter search keyword'
    return render_template('index.html', message=message, searchQuery=searchQuery, searchResult=searchResult)

Python
xxxxxxxxxx
 
@app.route('/', methods=['GET', 'POST'])
def index():    
    searchResult = ''
    message = ''
    searchQuery = ''
    clientId = 'your_client_id_here'  # Replace with your actual client ID
    if request.method == 'POST':        
        searchQuery = str(request.form.get('searchQuery', ''))
        if searchQuery:            
            apiUrl = 'https://api.unsplash.com/search/photos'
            params = {'query': searchQuery, 'client_id': clientId}
            response = requests.get(apiUrl, params=params, allow_redirects=True)
            searchResult = response.json()
        else:
            message = 'Please enter search keyword'
    return render_template('index.html', message=message, searchQuery=searchQuery, searchResult=searchResult)

Make sure to replace 'your_client_id_here' with your actual client ID obtained from Unsplash API

Display Image Search Result:

Finally, in the index.html template file, display the search results:

<!-- Image Search Results Section -->
<main>
	<section id="imgs" class="pt-5">
		<div class="container">
			<div class="row g-4" id="inputResults">    
				{% if searchResult %}
					{% for image in searchResult.results %}
						<div class="col-md-6 col-lg-4">
							<div class="card searchImg">
								<div id="cardImg">
									<img src="{{ image.urls.small }}" class="card-img-top" alt="">
								</div>
								<div class="card-body">
									<a href="{{ image.links.html }}" class="card-text" target="_blank" rel="noopener">View Image</a>
								</div>
							</div>
						</div>
					{% endfor %}	
				{% endif %}     
			</div>          
		</div>
	</section>
</main>

Python
xxxxxxxxxx
 
<!-- Image Search Results Section -->
<main>
    <section id="imgs" class="pt-5">
        <div class="container">
            <div class="row g-4" id="inputResults">    
                {% if searchResult %}
                    {% for image in searchResult.results %}
                        <div class="col-md-6 col-lg-4">
                            <div class="card searchImg">
                                <div id="cardImg">
                                    <img src="{{ image.urls.small }}" class="card-img-top" alt="">
                                </div>
                                <div class="card-body">
                                    <a href="{{ image.links.html }}" class="card-text" target="_blank" rel="noopener">View Image</a>
                                </div>
                            </div>
                        </div>
                    {% endfor %}    
                {% endif %}     
            </div>          
        </div>
    </section>
</main>

The above code will display image search results accordingly.

Conclusion

We have created an awesome tool to search images based on inputted search keywords By Flask and Unsplash API. We have also created UI to display filtered images in the container. You can use this functionality in any application where you need to insert images or manage the image library.