added a image search feature

This commit is contained in:
abrendan 2024-02-15 13:01:52 +00:00
parent a972a4b7a2
commit f36d1c8613
5 changed files with 115 additions and 0 deletions

42
main.py
View File

@ -53,5 +53,47 @@ def search():
return render_template('results.html', query=query, search_results=search_results, page=page, total_pages=total_pages)
@app.route('/search/images', methods=['GET'])
def search_images():
query = request.args.get('query')
page = request.args.get('page', 1, type=int)
if not query:
return render_template('index.html')
start_index = (page - 1) * 10 + 1
search_type = "image"
search_url = "https://www.googleapis.com/customsearch/v1"
params = {
'key': GOOGLE_API_KEY,
'cx': GOOGLE_CX,
'q': query,
'searchType': search_type,
'start': start_index
}
response = requests.get(search_url, params=params)
image_results = []
if response.status_code == 200:
search_data = response.json()
items = search_data.get('items', [])
for item in items:
image = item.get('link', '/path-to-default-image.jpg')
image_results.append({
'title': item.get('title'),
'link': image,
'thumbnail': item.get('image', {}).get('thumbnailLink', '/path-to-default-thumbnail.jpg')
})
total_results = int(search_data.get('searchInformation', {}).get('totalResults', 0))
total_pages = (total_results + 9) // 10
else:
print(f"Error: {response.status_code}")
return render_template('image_results.html', query=query, image_results=image_results, page=page, total_pages=total_pages)
if __name__ == '__main__':
app.run(host='0.0.0.0', port=80)

View File

@ -107,4 +107,20 @@ body::before {
text-decoration: underline;
}
.image-search-button {
padding: 0.5rem 1rem;
background-color: #000000;
color: #fff;
border: 1px solid #000000;
margin-left: 8px; /* Spacing between buttons */
cursor: pointer;
border-radius: 6px;
font-size: 1rem;
text-align: center;
}
.image-search-button:hover {
background-color: #6e6e6e;
border: 1px solid #8a8a8a;
}

View File

@ -106,3 +106,30 @@ h1 {
.search-button:hover {
background-color: #8a8a8a; /* Darker shade on hover */
}
.image-results {
display: flex;
flex-wrap: wrap;
justify-content: center;
gap: 1rem;
}
.image-item {
width: 200px; /* Adjust width as needed */
margin-bottom: 1rem;
text-align: center;
}
.image-item img {
width: 100%;
height: auto;
border-radius: 8px;
}
.image-title {
margin-top: 0.5rem;
font-size: 0.9rem;
}

View File

@ -0,0 +1,29 @@
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Image Search Results</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles_results.css') }}">
</head>
<body>
<div class="container">
<h1>Image Search Results for "{{ query }}"</h1>
<div class="search-container">
<form action="/search/images" method="get" class="search-form">
<input type="text" name="query" class="search-input" placeholder="Search for images..." value="{{ query }}">
<button type="submit" class="search-button">&#128269;</button>
</form>
</div>
<div class="image-results">
{% for image in image_results %}
<div class="image-item">
<a href="{{ image.link }}" target="_blank">
<img src="{{ image.thumbnail }}" alt="{{ image.title }}">
<p class="image-title">{{ image.title }}</p>
</a>
</div>
{% endfor %}
</div>
</div>
</body>
</html>

View File

@ -13,6 +13,7 @@
<form class="search-form" action="/search" method="get">
<input class="search-input" type="text" name="query" required>
<button class="search-button" type="submit">Search</button>
<button type="submit" formaction="/search/images" class="search-button image-search-button">Image Search</button>
</form>
</div>
<footer class="footer">