added multi modal meme search application

README.md

@@ -200,6 +200,7 @@ These are ready to use applications built using LanceDB serverless vector databa
 | [Sentence Auto-Complete](https://github.com/lancedb/vectordb-recipes/tree/main/applications/node/sentance_auto_complete) | Sentance auto complete app using lanchain.js with LanceDB, allows you to get real time relevant auto complete suggestions and facts based on you written text to help you with your writing.You can also upload your data source in the form of a pdf file.You can switch between gpt models to get faster results.                 | ![Sentence auto-complete](https://github.com/lancedb/assets/blob/main/recipes/sentance_Auto_complete.gif) |
 | [Article Recommendation](https://github.com/lancedb/vectordb-recipes/tree/main/applications/node/article_recommender) | Article Recommender: Explore vast data set of articles with Instant, Context-Aware Suggestions. Leveraging Advanced NLP, Vector Search, and Customizable Datasets, Our App Delivers Real-Time, Precise Article Recommendations. Perfect for Research, Content Curation, and Staying Informed. Unlock Smarter Insights with State-of-the-Art Technology in Content Retrieval and Discovery!".                 | ![Article Recommendation](./applications/node/article_recommender/public/assets/article_recommendation_engine.gif) |
 | [AI Powered Job Search](https://github.com/lancedb/vectordb-recipes/tree/main/applications/node/AI_powered_job_search) | Transform your job search experience with this AI-driven application. Powered by LangChain.js, LanceDB, and advanced semantic search, it provides real-time, highly accurate job listings tailored to your preferences. Featuring customizable datasets and advanced filtering options (e.g., skills, location, job type, and salary range), this app ensures you find the right opportunities quickly and effortlessly. Best suited for job seekers, recruiters, career platforms, custom job boards.                 | ![Job Search](./applications//node/assets/AI-powered-job-search.gif) |
+| [AI Powered Multimodal meme search](https://github.com/lancedb/vectordb-recipes/tree/main/applications/node/multimodal_meme_finder) | An advanced AI-powered meme search engine that allows users to find memes using both text and image queries. By leveraging LanceDB as a high-performance vector database and Roboflow's CLIP model for embedding generation, the platform delivers fast and accurate meme retrieval.     | ![Multimodal meme search](./applications/node/mutimodal_meme_finder/public/assets/AI-powered-multimodal-meme-search.gif) |
 ||||
 
 | Project Name                                        | Description                                                                                                          | Screenshot                                |

applications/node/mutimodal_meme_finder/.gitignore

@@ -0,0 +1,24 @@
+# Logs
+logs
+*.log
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+pnpm-debug.log*
+lerna-debug.log*
+
+node_modules
+dist
+dist-ssr
+*.local
+
+# Editor directories and files
+.vscode/*
+!.vscode/extensions.json
+.idea
+.DS_Store
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw?

applications/node/mutimodal_meme_finder/README.md

@@ -0,0 +1,102 @@
+**AI-Powered Multimodal Meme Search**
+=====================================
+
+An advanced AI-powered **meme search engine** that allows users to find memes using **both text and image queries**. By leveraging **LanceDB** as a high-performance vector database and **Roboflow's CLIP model** for embedding generation, the platform delivers fast and accurate meme retrieval. The frontend is built using **React.js** and **Tailwind CSS**, ensuring a seamless and responsive user experience.
+
+**Demo**
+--------
+
+![demo](./public/assets/AI-powered-multimodal-meme-search.gif)
+
+* * *
+
+
+**Key Features**
+----------------
+
+✅ **Multimodal Search** -- Search memes using either text descriptions or image queries.\
+✅ **Vectorized Meme Database** -- Utilizes **LanceDB** to store and retrieve embeddings efficiently.\
+✅ **Roboflow CLIP Model** -- Uses **CLIP embeddings** for high-accuracy semantic search.\
+✅ **Optimized Frontend** -- Built with **React.js** and styled with **Tailwind CSS** for smooth user interactions.\
+✅ **Instant Retrieval** -- Returns **top 25 most relevant** memes in real time.\
+✅ **Fast & Scalable** -- Efficient storage and indexing enable rapid meme discovery.
+
+* * * * *
+
+**How It Works**
+----------------
+
+### **1\. Data Processing & Embeddings**
+
+-   Meme images are **embedded** using the **Roboflow CLIP model**.
+-   Text descriptions are **converted into vector embeddings** for similarity matching.
+-   Both image and text embeddings are **stored in LanceDB**.
+
+### **2\. Query Processing & Retrieval**
+
+-   **Text Query:** Converts text input into a vector and searches the database.
+-   **Image Query:** Converts an uploaded image into a vector and retrieves the closest matches.
+-   The **top 25 results** are returned based on similarity scores.
+
+### **3\. Display & User Interaction**
+
+-   The frontend **renders the retrieved memes** in a responsive grid.
+-   Users can **download memes** directly from the interface.
+
+* * * * *
+
+**Installation & Setup**
+------------------------
+
+### **1\. Prerequisites**
+
+-   **Node.js v20+**
+-   **NPM or Yarn**
+-   **LanceDB installed locally**
+
+### **2\. Clone Repository**
+
+`git clone <repository-url>
+cd multimodal-meme-search
+npm install`
+
+### **3\. Running the Application**
+
+#### Start the Backend:
+
+`npm run server`
+
+#### Start the Frontend:
+
+`npm run dev`
+
+#### Start both together:
+
+ `npm start`
+
+
+#### Access the App:
+
+`http://localhost:5173`
+
+* * * * *
+
+**Customizing the Meme Dataset**
+--------------------------------
+
+To add your own meme dataset:
+
+1.  Place your meme images in the `src/server/dataset/images/` directory. [memes dataset](https://www.kaggle.com/datasets/hammadjavaid/6992-labeled-meme-images-dataset)
+2.  place a labels.csv file under  `src/server/dataset/` directory.  [memes dataset](https://www.kaggle.com/datasets/hammadjavaid/6992-labeled-meme-images-dataset)
+3.  Run the embedding script to update the database.
+4.  Restart the server to apply changes.
+
+* * * * *
+
+**Future Enhancements**
+-----------------------
+
+🚀 **More Meme Sources** -- Add support for meme scraping from online sources.\
+📸 **User-Generated Memes** -- Allow users to upload and tag memes.\
+🔍 **Advanced Filters** -- Filter by meme categories, themes, or trends.\
+🌐 **Deploy to Cloud** -- Deploy on **Vercel, AWS, or DigitalOcean** for global accessibility.

applications/node/mutimodal_meme_finder/eslint.config.js

@@ -0,0 +1,38 @@
+import js from '@eslint/js'
+import globals from 'globals'
+import react from 'eslint-plugin-react'
+import reactHooks from 'eslint-plugin-react-hooks'
+import reactRefresh from 'eslint-plugin-react-refresh'
+
+export default [
+  { ignores: ['dist'] },
+  {
+    files: ['**/*.{js,jsx}'],
+    languageOptions: {
+      ecmaVersion: 2020,
+      globals: globals.browser,
+      parserOptions: {
+        ecmaVersion: 'latest',
+        ecmaFeatures: { jsx: true },
+        sourceType: 'module',
+      },
+    },
+    settings: { react: { version: '18.3' } },
+    plugins: {
+      react,
+      'react-hooks': reactHooks,
+      'react-refresh': reactRefresh,
+    },
+    rules: {
+      ...js.configs.recommended.rules,
+      ...react.configs.recommended.rules,
+      ...react.configs['jsx-runtime'].rules,
+      ...reactHooks.configs.recommended.rules,
+      'react/jsx-no-target-blank': 'off',
+      'react-refresh/only-export-components': [
+        'warn',
+        { allowConstantExport: true },
+      ],
+    },
+  },
+]

applications/node/mutimodal_meme_finder/index.html

@@ -0,0 +1,13 @@
+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <link rel="icon" type="image/svg+xml" href="/assets/logo.svg" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>Multimodal app</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.jsx"></script>
+  </body>
+</html>

applications/node/mutimodal_meme_finder/package.json

@@ -0,0 +1,61 @@
+{
+  "name": "meme_finder",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite",
+    "build": "vite build",
+    "lint": "eslint .",
+    "preview": "vite preview",
+    "server": "node src/server/server.mjs",
+    "start": "npm-run-all --parallel server dev"
+  },
+  "dependencies": {
+    "@heroicons/react": "^2.2.0",
+    "@lancedb/lancedb": "^0.12.0",
+    "@langchain/community": "^0.3.1",
+    "@langchain/core": "^0.3.27",
+    "@langchain/openai": "^0.3.14",
+    "@phosphor-icons/react": "^2.1.7",
+    "@testing-library/jest-dom": "^5.17.0",
+    "@testing-library/react": "^13.4.0",
+    "@testing-library/user-event": "^13.5.0",
+    "apache-arrow": "^18.1.0",
+    "axios": "^1.5.0",
+    "body-parser": "^1.20.3",
+    "cors": "^2.8.5",
+    "csv-parser": "^3.0.0",
+    "dotenv": "^16.4.7",
+    "express": "^4.21.2",
+    "fs": "^0.0.1-security",
+    "langchain": "^0.3.7",
+    "multer": "^1.4.5-lts.1",
+    "multi-range-slider-react": "^2.0.7",
+    "phosphor-react": "^1.4.1",
+    "react": "^18.3.1",
+    "react-dom": "^18.3.1",
+    "react-loader-spinner": "^6.1.6",
+    "react-quill": "^2.0.0",
+    "react-range-slider-input": "^3.0.7",
+    "react-scripts": "5.0.1",
+    "vectordb": "^0.1.19",
+    "web-vitals": "^2.1.4"
+  },
+  "devDependencies": {
+    "@eslint/js": "^9.17.0",
+    "@types/react": "^18.3.18",
+    "@types/react-dom": "^18.3.5",
+    "@vitejs/plugin-react": "^4.3.4",
+    "autoprefixer": "^10.4.20",
+    "eslint": "^9.17.0",
+    "eslint-plugin-react": "^7.37.2",
+    "eslint-plugin-react-hooks": "^5.0.0",
+    "eslint-plugin-react-refresh": "^0.4.16",
+    "globals": "^15.14.0",
+    "postcss": "^8.5.1",
+    "tailwindcss": "^3.4.17",
+    "vite": "^6.0.5",
+    "npm-run-all": "^4.1.5"
+  }
+}

applications/node/mutimodal_meme_finder/postcss.config.js

@@ -0,0 +1,6 @@
+export default {
+  plugins: {
+    tailwindcss: {},
+    autoprefixer: {},
+  },
+}