Lost in Photos? My First GenAI Project Finds Them Fast
1/30: content-based image search app
1/30: content-based image search app
Published: December 9, 2024 URL: https://buildtolaunch.ai/p/ai-photo-search-first-project Engagement: 6 likes, 1 comments, 1 restacks Word count: 1094
Do you have thousands of photos on your computer but no time to organize or tag them?
Do you find it nearly impossible to locate the one unique photo you wanted?
I don't even take photos that often, yet I've accumulated thousands of them. Every now and then, I transfer them to my computer to free up space on my phone. But once they're there, they just sit in some mega-folder, staring back at me.
To solve this immediate problem, I decided to start my first project: a content-based image search app. Thanks to generative AI tools and models, building this app feels more accessible than ever before.
Project Goals
- Display all images from a selected folder.
- Let me search for images based on their content, not just filenames.
After some back-and-forth discussion with Cursor, I learned about CLIP, an amazing AI model developed by OpenAI. CLIP can match images with text, making it ideal for finding images that match a search query.
Building the Basics: Initial Setup
Cursor really came to the rescue by generating code and organizing a neat folder structure. In no time, it had:
- Created a
requirements.txtfile with all necessary dependencies. - Set up the main backend application file.
- Built an HTML template along with JavaScript and CSS for the frontend.
All I had to do was click through the steps, accept, apply, and run them as they popped up.
A Few Hiccups
Image Rendering Issues: Initially, images weren't rendering properly. It was an issue with path.relative_to(static_path) not being generated correctly.
Search Results Display: After fixing the path, the search results didn't display images the way the "Show All" button did. The problem was with Flask and its Jinja2 template engine. While the "Show All" button rendered images server-side, the "Search" button needed dynamic updates without reloading the entire page. The solution? An AJAX request to update just the gallery section.
Final Outcome
After fixing the issues, my app was up and running locally. Testing the search function:
- I typed "trees" — it returned relevant images featuring trees.
- I tried "ice cream" — there it was, a massive ice cream image right in the first spot!
I'm completely pleased with this first app that helps me search images by content. It required minimal coding effort on my part, yet it does exactly what I envisioned!
Questions, Ideas, and Future Improvements
- Flexible Image Folder: Allow users to select any folder on their device.
- Scaling the UI: A more modular, component-based approach for scalability.
- UI Improvements: Bring in a library like TailwindCSS or Bootstrap.
- Low Matching Scores: Match scores weren't very high even for clear matches. Something to explore.
Final Thoughts
This first trial in my 30-Project GenAI journey has been a fantastic experience! From troubleshooting setup issues to building a functional content-based image search app, I've already gained so much insight into using AI for practical purposes.
Working with Cursor was also a huge help — having it assist with the code generation and structure really sped up the process. Before this project, I had never used Flask framework, but now I'd love to try it more in future projects.