mirror of
https://github.com/abrendan/NochuSearch.git
synced 2025-06-16 12:45:06 +02:00
added a image search feature
This commit is contained in:
parent
a972a4b7a2
commit
f36d1c8613
42
main.py
42
main.py
@ -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)
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
@ -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;
|
||||
}
|
||||
|
||||
|
||||
|
29
templates/image_results.html
Normal file
29
templates/image_results.html
Normal 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">🔍</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>
|
@ -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">
|
||||
|
Loading…
x
Reference in New Issue
Block a user