added diagram

README.md

@@ -24,78 +24,141 @@ In this demo, we demonstrate how to build such a system. To showcase its ability
 
 The system follows a multi-stage pipeline that processes movie data and user current preferences to generate personalized recommendations:
 
-```mermaid
-graph TD
-    %% ========================
-    %% Data Preparation Section
-    %% ========================
-    A["📽️ Movie Titles Dataset"] --> B["Mistral LLM Embedding<br/>(Text Representation)"]
-    B --> C["Graph Convolution Layers<br/>(Relationship Learning)"]
-    C --> D["🔗 Graph-Enhanced Embeddings"]
-    
-    %% ========================
-    %% User Input Section
-    %% ========================
-    F["🎬 User's Liked Movies"] --> G["User Preference Profile<br/>(Average of Graph-Enhanced<br/>Movie Embeddings)"]
-    H["🔍 Natural Language Query<br/>(e.g. 'funny sci-fi movies')"] --> I["Query Embedding"]
-    G --> J["🧩 Combined User Vector"]
-    I --> J
-    
-    %% ========================
-    %% System Flow
-    %% ========================
-    D --> K["📊 Similarity Matching"]
-    J --> K
-    K --> L["🏆 Top 100 Candidates"]
-    L --> M["🤖 AI Agent Ranking<br/>(Context-Aware Filtering)"]
-    M --> N["🎯 Final Recommendations<br/>(Top 10 Movies)"]
-    
-    %% ========================
-    %% Visual Grouping
-    %% ========================
-    subgraph "Data Preparation Pipeline"
-        A
-        B
-        C
-        D
-    end
-    
-    subgraph "User Understanding"
-        F
-        H
-        G
-        I
-        J
-    end
-    
-    subgraph "Two-Stage Retrieval"
-        K
-        L
-    end
-    
-    subgraph "Intelligent Ranking"
-        M
-        N
-    end
-    
-    %% ========================
-    %% Styling
-    %% ========================
-    style A fill:#e1f5fe,stroke:#039be5
-    style N fill:#c8e6c9,stroke:#2e7d32
-    style K fill:#fff3e0,stroke:#fb8c00
-    style M fill:#fce4ec,stroke:#e91e63
-    
-    classDef data fill:#e1f5fe,stroke:#039be5
-    classDef result fill:#c8e6c9,stroke:#2e7d32
-    classDef process fill:#fff3e0,stroke:#fb8c00
-    classDef ai fill:#fce4ec,stroke:#e91e63
-    
-    class A data
-    class N result
-    class K,L process
-    class M ai
-```
+[//]: # (```mermaid)
+
+[//]: # (graph TD)
+
+[//]: # (    %% ========================)
+
+[//]: # (    %% Data Preparation Section)
+
+[//]: # (    %% ========================)
+
+[//]: # (    A["📽️ Movie Titles Dataset"] --> B["Mistral LLM Embedding<br/>&#40;Text Representation&#41;"])
+
+[//]: # (    B --> C["Graph Convolution Layers<br/>&#40;Relationship Learning&#41;"])
+
+[//]: # (    C --> D["🔗 Graph-Enhanced Embeddings"])
+
+[//]: # (    )
+[//]: # (    %% ========================)
+
+[//]: # (    %% User Input Section)
+
+[//]: # (    %% ========================)
+
+[//]: # (    F["🎬 User's Liked Movies"] --> G["User Preference Profile<br/>&#40;Average of Graph-Enhanced<br/>Movie Embeddings&#41;"])
+
+[//]: # (    H["🔍 Natural Language Query<br/>&#40;e.g. 'funny sci-fi movies'&#41;"] --> I["Query Embedding"])
+
+[//]: # (    G --> J["🧩 Combined User Vector"])
+
+[//]: # (    I --> J)
+
+[//]: # (    )
+[//]: # (    %% ========================)
+
+[//]: # (    %% System Flow)
+
+[//]: # (    %% ========================)
+
+[//]: # (    D --> K["📊 Similarity Matching"])
+
+[//]: # (    J --> K)
+
+[//]: # (    K --> L["🏆 Top 100 Candidates"])
+
+[//]: # (    L --> M["🤖 AI Agent Ranking<br/>&#40;Context-Aware Filtering&#41;"])
+
+[//]: # (    M --> N["🎯 Final Recommendations<br/>&#40;Top 10 Movies&#41;"])
+
+[//]: # (    )
+[//]: # (    %% ========================)
+
+[//]: # (    %% Visual Grouping)
+
+[//]: # (    %% ========================)
+
+[//]: # (    subgraph "Data Preparation Pipeline")
+
+[//]: # (        A)
+
+[//]: # (        B)
+
+[//]: # (        C)
+
+[//]: # (        D)
+
+[//]: # (    end)
+
+[//]: # (    )
+[//]: # (    subgraph "User Understanding")
+
+[//]: # (        F)
+
+[//]: # (        H)
+
+[//]: # (        G)
+
+[//]: # (        I)
+
+[//]: # (        J)
+
+[//]: # (    end)
+
+[//]: # (    )
+[//]: # (    subgraph "Two-Stage Retrieval")
+
+[//]: # (        K)
+
+[//]: # (        L)
+
+[//]: # (    end)
+
+[//]: # (    )
+[//]: # (    subgraph "Intelligent Ranking")
+
+[//]: # (        M)
+
+[//]: # (        N)
+
+[//]: # (    end)
+
+[//]: # (    )
+[//]: # (    %% ========================)
+
+[//]: # (    %% Styling)
+
+[//]: # (    %% ========================)
+
+[//]: # (    style A fill:#e1f5fe,stroke:#039be5)
+
+[//]: # (    style N fill:#c8e6c9,stroke:#2e7d32)
+
+[//]: # (    style K fill:#fff3e0,stroke:#fb8c00)
+
+[//]: # (    style M fill:#fce4ec,stroke:#e91e63)
+
+[//]: # (    )
+[//]: # (    classDef data fill:#e1f5fe,stroke:#039be5)
+
+[//]: # (    classDef result fill:#c8e6c9,stroke:#2e7d32)
+
+[//]: # (    classDef process fill:#fff3e0,stroke:#fb8c00)
+
+[//]: # (    classDef ai fill:#fce4ec,stroke:#e91e63)
+
+[//]: # (    )
+[//]: # (    class A data)
+
+[//]: # (    class N result)
+
+[//]: # (    class K,L process)
+
+[//]: # (    class M ai)
+
+[//]: # (```)
+![Recommendation System Diagram](./diagram.svg)
 
 ### Pipeline Stages