Font Search System 🔍

A semantic font search system that uses natural language processing and vector embeddings to find fonts based on descriptions, characteristics, and use cases.

🌟 Features

• Natural language font search
• Semantic understanding of font characteristics
• Vector-based similarity matching
• Real-time preview of fonts
• Dynamic card-based results interface
• Persistent search index
• RESTful API interface

🏗 Architecture

graph TD
A[Frontend] -->|HTTP Request| B[Flask Backend]
B -->|Vector Search| C[FAISS Index]
B -->|Serve Images| D[Font Images]
C -->|Load/Save| E[Saved Index]
B -->|Load| F[Font Descriptions]
subgraph "Search System"
C
G[Sentence Transformer]
H[Vector Store]
end
subgraph "Static Assets"
D
F
end

Loading

📁 Project Structure

fontsearch/
├── frontend/ # Frontend files
│ ├── index.html # Main search interface
│ └── index_old.html # Previous version
├── font_descriptions/ # Font JSON metadata
├── rendered_fonts/ # Font preview images
├── serving_index/ # Search index files
├── app.py # Flask application
├── vector_font_search.py # Vector search implementation
├── indexer.ipynb # Index building notebook
└── sandbox.ipynb # Development sandbox

🔄 Search Flow

sequenceDiagram
participant U as User
participant F as Frontend
participant B as Backend
participant S as Search Engine
participant I as Image Store
U->>F: Enter search query
F->>B: POST /api/search
B->>S: Vector search
S->>B: Return matches
B->>I: Get font previews
B->>F: Return results
F->>U: Display results

Loading

🚀 Getting Started

1. Clone the repository:

git clone https://github.com/yourusername/fontsearch.git
cd fontsearch

2. Install dependencies:

pip install -r requirements.txt

3. Build the search index:

python -c "from vector_font_search import VectorFontSearch; \ search = VectorFontSearch(images_dir='rendered_fonts'); \ search.build_index('font_descriptions')"

4. Start the Flask server:

python app.py

5. Open frontend/index.html in your browser

💻 API Reference

Search Endpoint

POST /api/searchContent-Type: application/json
{
"query": "fonts that are usually used in memes and trolling"
}

Response Format

[
{
"filename": "font_name.png",
"description": "Font description...",
"technical_characteristics": ["Bold", "Sans-serif"],
"personality_traits": ["Modern", "Clean"],
"practical_contexts": ["Headlines", "UI"],
"score": 0.85,
"image": "/fonts/font_name.png"
}
]

🔍 Search Engine Architecture

graph LR
A[Query] -->|Encode| B[Query Vector]
B -->|Search| C[FAISS Index]
C -->|Retrieve| D[Top K Results]
D -->|Format| E[Response]
subgraph "Vector Store"
F[Font Vectors]
G[Font Metadata]
C -->|Index| F
C -->|Lookup| G
end

Loading

🛠 Technical Components

Vector Search

• Uses Sentence Transformers for text embedding
• FAISS for efficient similarity search
• Inner product similarity metric
• Automatic index persistence

Frontend

• Pure HTML/JS implementation
• Tailwind CSS for styling
• Dynamic card layout
• Responsive design
• Real-time search

Backend

• Flask REST API
• Static file serving
• CORS support
• Error handling
• JSON response formatting

🎨 Font Description Format

{
"filename": "font_name.png",
"status": "success",
"description": {
"detailed_description": "...",
"technical_characteristics": [],
"personality_traits": [],
"practical_contexts": [],
"cultural_intuition": [],
"search_keywords": []
}
}

🔧 Configuration

Key configuration options are available in the vector_font_search.py:

EMBEDDING_MODEL='all-MiniLM-L6-v2'# Sentence transformer modelINDEX_TYPE='FlatIP'# FAISS index typeNORMALIZE_VECTORS=True# L2 normalization

📈 Performance

The system uses:

• FAISS for efficient similarity search
• Batched processing for embeddings
• Caching of computed vectors
• Persistent index storage

🤝 Contributing

1. Fork the repository
2. Create your feature branch
3. Commit your changes
4. Push to the branch
5. Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.