I am making image retrieval project. The Images are not loading

[ayaanshkk]

Select Topic Area

Bug

Body

im working on image retrieval project. the images aren't loading when im running the program. i've attached a screenshot of it.

this is my index.html file-

<title>Image Search</title>

Image Search

Search Search

{% if query_path %}
    <h2>Query Image</h2>
    <img src="{{ url_for('static', filename=query_path.split('/')[-1]) }}" alt="Query Image">
{% endif %}

{% if scores %}
    <h2>Results</h2>
    <ul>
        {% for score, img_path in scores %}
            <li>
                <img src="{{ url_for('static', filename=img_path.split('/')[-1]) }}" alt="Result Image">

Score: {{ score }}{% endfor %}{% endif %}

this is my offline.py-

from PIL import Image
from featureextractor import FeatureExtractor
from pathlib import Path
import numpy as np
import os

if name == '_main':
fe = FeatureExtractor()

# Ensure the directories exist
vgg16_feature_dir = Path("./static/feature/vgg16")
clip_feature_dir = Path("./static/feature/clip")
vgg16_feature_dir.mkdir(parents=True, exist_ok=True)
clip_feature_dir.mkdir(parents=True, exist_ok=True)

for img_path in sorted(Path("./static/img").glob("*.jpg")):
    print(f"Processing {img_path}")  # e.g., ./static/img/xxx.jpg

    # Extract and save VGG16 features
    vgg16_feature = fe.extract_image_vgg16(img=Image.open(img_path))
    vgg16_feature_path = vgg16_feature_dir / (img_path.stem + ".npy")  # e.g., ./static/feature/vgg16/xxx.npy
    np.save(vgg16_feature_path, vgg16_feature)

    # Extract and save CLIP features
    clip_feature = fe.extract_image_clip(img=Image.open(img_path))
    clip_feature_path = clip_feature_dir / (img_path.stem + ".npy")  # e.g., ./static/feature/clip/xxx.npy
    np.save(clip_feature_path, clip_feature)

this is my feature_extractor.py file-
import numpy as np
from PIL import Image
import torch
import clip
from torchvision import models, transforms

class FeatureExtractor:
def init(self):
# Initialize VGG16 for image feature extraction
self.vgg16 = models.vgg16(pretrained=True).features
self.vgg16.eval()
self.preprocess_vgg16 = transforms.Compose([
transforms.Resize((224, 224)),
transforms.ToTensor(),
transforms.Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225]),
])

    # Initialize CLIP for image and text feature extraction
    self.clip_model, self.clip_preprocess = clip.load("ViT-B/32")

def extract_image_vgg16(self, img):
    # Extract features using VGG16
    img_t = self.preprocess_vgg16(img).unsqueeze(0)
    with torch.no_grad():
        features = self.vgg16(img_t).flatten().numpy()
    return features

def extract_image_clip(self, img):
    # Extract features using CLIP
    img_t = self.clip_preprocess(img).unsqueeze(0).to("cuda" if torch.cuda.is_available() else "cpu")
    self.clip_model.to("cuda" if torch.cuda.is_available() else "cpu")
    with torch.no_grad():
        features = self.clip_model.encode_image(img_t).cpu().numpy().flatten()
    return features

def extract_text(self, text):
    # Extract features using CLIP
    text_tokens = clip.tokenize([text])
    with torch.no_grad():
        features = self.clip_model.encode_text(text_tokens).cpu().numpy().flatten()
    return features

this is my server.py-
import numpy as np
from PIL import Image
from feature_extractor import FeatureExtractor
from datetime import datetime
from flask import Flask, request, render_template
from pathlib import Path

app = Flask(name)

Initialize the feature extractor

fe = FeatureExtractor()

Read image features

vgg16_features = []
clip_features = []
img_paths = []

Load VGG16 features

for feature_path in Path("./static/feature/vgg16").glob("*.npy"):
vgg16_features.append(np.load(feature_path))
img_paths.append(Path("./static/img") / (feature_path.stem + ".jpg"))
vgg16_features = np.array(vgg16_features)

Load CLIP features

clip_feature_paths = list(Path("./static/feature/clip").glob("*.npy"))
for feature_path in clip_feature_paths:
feature = np.load(feature_path)
if feature.size > 0:
clip_features.append(feature)
else:
print(f"Empty feature file: {feature_path}")
clip_features = np.array(clip_features)

Debugging: print shapes to ensure they are loaded correctly

print("VGG16 features shape:", vgg16_features.shape)
print("CLIP features shape:", clip_features.shape)
print("Number of image paths:", len(img_paths))
print("CLIP feature paths:", clip_feature_paths)

@app.route('/', methods=['GET', 'POST'])
def index():
if request.method == 'POST':
query = None
uploaded_img_path = None
scores = []

    if 'query_img' in request.files:
        file = request.files['query_img']

        # Save query image
        img = Image.open(file.stream).convert('RGB')
        uploaded_img_path = "static/uploaded/" + datetime.now().isoformat().replace(":", ".") + "_" + file.filename
        img.save(uploaded_img_path)

        # Run feature-based search using VGG16
        query = fe.extract_image_vgg16(img)
        if vgg16_features.size > 0:
            dists = np.linalg.norm(vgg16_features - query, axis=1)
            ids = np.argsort(dists)[:30]
            scores = [(dists[id], str(img_paths[id])) for id in ids]  # Convert Path to string
        else:
            print("VGG16 features are empty.")

    elif 'query_text' in request.form:
        query_text = request.form['query_text']
        # Run feature-based search using CLIP
        query = fe.extract_text(query_text)
        if clip_features.size > 0:
            similarities = np.dot(clip_features, query.T).flatten() / (np.linalg.norm(clip_features, axis=1) * np.linalg.norm(query))
            ids = np.argsort(similarities)[::-1][:30]
            scores = [(similarities[id], str(img_paths[id])) for id in ids]  # Convert Path to string
        else:
            print("CLIP features are empty.")

    if query is not None:
        return render_template('index.html',
                               query_path=uploaded_img_path if 'query_img' in request.files else None,
                               scores=scores)
else:
    return render_template('index.html')

if name == "main":
app.run("0.0.0.0")

[RafaelJohn9]

can I get the link to the code so that I can diagnose the problem

[ayaanshkk]

i've removed the max-width and max height, but no difference-

/* Style for the query image */
.image {
width: auto;
height: auto;
display: block;
margin: 20px auto;
}

/* Style for the result images */
.result-image {
width: auto;
height: auto;
}

/* Flex container for results */
.results-container {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
padding: 20px;
}

.results-container > div {
text-align: center;
flex: 1 1 calc(25% - 20px);
box-sizing: border-box;
}

.results-container > div > p {
margin-top: 10px;
}

[RafaelJohn9]

Try putting actual px in photos like

width: 150px;
height: 150px;

[ebndev]

@ayaanshkk taking @RafaelJohn9's suggestion of setting the width and height should do the trick. Since your images are different proportions, you'll also want to add object-fit: cover; to your CSS rule so that the images will be cropped as a square, instead of squished into 150px x 150px.

I also don't see .results-container or div in your HTML so you can target the ul as the container.

/* Style for the query image */
.image {
width: 300px;
height: 300px;
object-fit: cover;
margin: 20px auto;
display: block;
}

/* Style for the result images */
.result-image {
width: 150px;
height: 150px;
object-fit: cover;
display: block;
}

/* Flex container for results */
ul {
display: flex;
flex-wrap: wrap;
gap: 20px;
justify-content: center;
padding: 20px;
}

ul > li {
text-align: center;
flex: 1 1 calc(25% - 20px);
box-sizing: border-box;
}

ul > li > .image {
margin-bottom: 10px;
}

[ayaanshkk]

Thanks guys, the issue is resolved now. Appreciate it.

[ayaanshkk]

Hi Guys. I got one more issue. This isn't related to image sizes. I've made an app that retrieves images from the database using semantic search. The program is working, but for some searches, the images retrieved aren't accurate. how do i fix it? I've attached an example below. Here's my code-

Server.py
import streamlit as st
from PIL import Image
from feature_extractor import FeatureExtractor
from datetime import datetime
from pathlib import Path
import numpy as np
from sklearn.decomposition import PCA

Initialize the feature extractor

fe = FeatureExtractor()

Read image features

vgg16_features = []
clip_features = []
img_paths = []

Load VGG16 features

for feature_path in Path("./static/feature/vgg16").glob("*.npy"):
vgg16_features.append(np.load(feature_path))
img_paths.append("static/img/" + feature_path.stem + ".jpg")
vgg16_features = np.array(vgg16_features)

Apply PCA for dimensionality reduction (optional, if necessary)

Set n_components based on min(samples, features)

n_samples, n_features = vgg16_features.shape
n_components = min(n_samples, n_features, 256) # Ensure it doesn't exceed allowable range
pca = PCA(n_components=n_components)
vgg16_features = pca.fit_transform(vgg16_features)

Load CLIP features

for feature_path in Path("./static/feature/clip").glob("*.npy"):
clip_features.append(np.load(feature_path))
clip_features = np.array(clip_features)

Function to search images based on VGG16 features

def search_vgg16(query):
query = pca.transform(query.reshape(1, -1)) # Apply PCA to query as well
dists = np.linalg.norm(vgg16_features - query, axis=1)
ids = np.argsort(dists)[:30]
scores = [(dists[id], img_paths[id]) for id in ids]
return scores

Function to search images based on CLIP features

def search_clip(query):
similarities = np.dot(clip_features, query.T).flatten() / (np.linalg.norm(clip_features, axis=1) * np.linalg.norm(query))
ids = np.argsort(similarities)[::-1][:30]
scores = [(similarities[id], img_paths[id]) for id in ids]
return scores

Function to filter results based on a similarity threshold

def filter_results(scores, threshold=0.2):
filtered_scores = [score for score in scores if score[0] > threshold]
return filtered_scores

def main():
st.sidebar.title("Navigation")
choice = st.sidebar.selectbox("Select your choice", ["Home", "Image Retrieval Engine"])

if choice == "Home":
    image = Image.open(r'C:\Users\ayashaik1\Image generator project\logo.png.png')
    st.image(image, width=100)
    st.title('Image Retrieval Application using Semantic Search')

elif choice == "Image Retrieval Engine":
    st.title("Image Retrieval Engine")

    # Image upload section
    image = st.file_uploader("Upload an image", type=["jpg", "png", "jpeg"])
    if image:
        st.image(image, caption='Query Image', use_column_width=True)
        img = Image.open(image).convert('RGB')
        uploaded_img_path = "static/uploaded/" + datetime.now().isoformat().replace(":", ".") + "_" + image.name
        img.save(uploaded_img_path)

        # Extract features and find similar images
        query = fe.extract_image_vgg16(img)
        scores = search_vgg16(query)

        st.write("Results:")
        columns = st.columns(2)  
        for i in range(len(scores)):
            with columns[i % 2]:
                st.image(scores[i][1], caption=f'Score: {scores[i][0]}', use_column_width=True)

    # Text input section
    text = st.text_input("Enter search text")
    if text:
        query = fe.extract_text(text)
        scores = search_clip(query)
        scores = filter_results(scores)

        st.write("Results:")
        columns = st.columns(2) 
        for i in range(len(scores)):
            with columns[i % 2]:
                st.image(scores[i][1], caption=f'Score: {scores[i][0]}', use_column_width=True)

if name == "main":
main()

feature_extractor.py
import numpy as np
from PIL import Image
import torch
import clip
from torchvision import models, transforms

class FeatureExtractor:
def init(self):
# Initialize VGG16 for image feature extraction
self.vgg16 = models.vgg16(pretrained=True).features
self.vgg16.eval()
self.preprocess_vgg16 = transforms.Compose([
transforms.Resize((224, 224)),
transforms.ToTensor(),
transforms.Normalize(mean=[0.485, 0.456, 0.406], std=[0.229, 0.224, 0.225]),
])

    # Initialize CLIP for image and text feature extraction
    self.clip_model, self.clip_preprocess = clip.load("ViT-B/32")

def extract_image_vgg16(self, img):
    # Extract features using VGG16
    img_t = self.preprocess_vgg16(img).unsqueeze(0)
    with torch.no_grad():
        features = self.vgg16(img_t).flatten().numpy()
    return features

def extract_image_clip(self, img):
    # Extract features using CLIP
    img_t = self.clip_preprocess(img).unsqueeze(0).to("cuda" if torch.cuda.is_available() else "cpu")
    self.clip_model.to("cuda" if torch.cuda.is_available() else "cpu")
    with torch.no_grad():
        features = self.clip_model.encode_image(img_t).cpu().numpy().flatten()
    return features

def extract_text(self, text):
    # Extract features using CLIP
    text_tokens = clip.tokenize([text])
    with torch.no_grad():
        features = self.clip_model.encode_text(text_tokens).cpu().numpy().flatten()
    return features