VectorSearchShop/diagram.html at main · heymeowcat/VectorSearchShop · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
<!DOCTYPE html>
<html>
  <head>
    <title>App Diagram</title>
    <script src="https://cdn.jsdelivr.net/npm/mermaid/dist/mermaid.min.js"></script>
  </head>

  <body>
    <div class="mermaid">
      sequenceDiagram
          User->>App: Search query (text/image/both)
          App->>BM25: Perform text search
          BM25-->>App: Text search results
          App->>CLIPModel: Encode query text/image
          CLIPModel-->>App: Query embeddings
          App->>Qdrant: Search with query embeddings
          Qdrant-->>App: Vector search results
          App->>Database: Load product data
          Database-->>App: Product data
          App-->>User: Display combined search results
          User->>App: View product details
          App->>CLIPModel: Encode product image
          CLIPModel-->>App: Image embedding
          App->>Qdrant: Search for similar products
          Qdrant-->>App: Similar products
          App-->>User: Display similar products
          User->>App: Add new product
          App->>CLIPModel: Encode product text/image
          CLIPModel-->>App: Combined embeddings
          App->>Qdrant: Store combined embeddings
          App->>Database: Store product data
    </div>
    <div class="mermaid">
      graph TD
        subgraph Backend
            AppServer[App Server]
            SQLiteDB[SQLite Database]
            QdrantVectorStore[Qdrant Vector Store]
        end

        User[User] -->|Interact| Streamlit
        Streamlit -->|Send Requests| AppServer
        AppServer -->|Read/Write| SQLiteDB
        AppServer -->|Read/Write| QdrantVectorStore
        AppServer -->|Generate Embeddings| CLIPModel
        AppServer -->|Perform Text Search| BM25

        subgraph Models
            CLIPModel[CLIP Model]
        end

        CLIPModel -->|Provide Embeddings| AppServer

        subgraph External
            HuggingFaceHub[Hugging Face Hub]
        end

        HuggingFaceHub -->|Load Pre-trained Model| CLIPModel

        subgraph TextSearch
            BM25[BM25]
        end

        BM25 -->|Provide Text Search Results| AppServer

        classDef frontend fill:#f2f2f2,stroke:#333,stroke-width:2px;
        classDef backend fill:#e6e6e6,stroke:#333,stroke-width:2px;
        classDef models fill:#d9d9d9,stroke:#333,stroke-width:2px;
        classDef external fill:#cccccc,stroke:#333,stroke-width:2px;
        classDef textsearch fill:#bfbfbf,stroke:#333,stroke-width:2px;

        class Streamlit frontend;
        class AppServer,SQLiteDB,QdrantVectorStore backend;
        class CLIPModel models;
        class HuggingFaceHub external;
        class BM25 textsearch;
    </div>
    <script>
      mermaid.initialize({
        startOnLoad: true,
        theme: "default",
      });
    </script>
  </body>
</html>