A web application that analyzes the semantic similarity between text and images using the DFN (Data Filtering Networks) model. Built with Next.js, Transformers.js, and NextUI.
- Real-time text and image URL similarity analysis
- Client-side model processing using Web Workers
- Progressive model loading with status indicators
- Modern UI with responsive design
- Browser-based inference without server requirements
- Framework: Next.js 14 (App Router)
- UI Library: NextUI
- ML Model: Transformers.js
- Model: DFN-public (CLIP-based Data Filtering Networks)
- Styling: Tailwind CSS
- Node.js 18+
- pnpm (recommended) or npm
- Clone the repository
- Navigate to the project directory
- Install dependencies using pnpm or npm
pnpm install
# or
npm install- Enter text in the "Text" input field
- Provide an image URL in the "URL" input field
- Click "Submit" to analyze
- View the similarity score and match level
The application will calculate a similarity score between 0-100%, indicating how well the text semantically matches the image.
- Uses the DFN (Data Filtering Networks) model
- Processes text and images in parallel
- Computes cosine similarity between text and image embeddings
- Model is loaded and cached in the browser
- Client-side processing using Web Workers
- Progressive model downloading with size indicators
- Caches model for subsequent uses
- FP16 precision for optimal performance
- Modern browsers with WebAssembly support
- Recommended: Chrome, Firefox, Safari, Edge (latest versions)
[Your chosen license]
- Transformers.js by Hugging Face
- NextUI for the UI components
- DFN Model by XudongShen