├── .dockerignore
├── .env.template
├── .github
    └── workflows
    │   └── run_tests.yml
├── .gitignore
├── .vscode
    ├── launch.json
    └── settings.json
├── CONTRIBUTING.md
├── Dockerfile
├── LICENSE
├── Makefile
├── README.md
├── backend
    ├── data
    │   └── redis-logo.png
    ├── poetry.lock
    ├── productsearch
    │   ├── __init__.py
    │   ├── api
    │   │   ├── __init__.py
    │   │   ├── main.py
    │   │   ├── routes
    │   │   │   ├── __init__.py
    │   │   │   └── product.py
    │   │   └── schema
    │   │   │   ├── __init__.py
    │   │   │   └── product.py
    │   ├── config.py
    │   ├── db
    │   │   ├── __init__.py
    │   │   ├── load.py
    │   │   ├── schema
    │   │   │   └── products.yml
    │   │   └── utils.py
    │   ├── main.py
    │   ├── spa.py
    │   ├── templates
    │   │   └── build
    │   │   │   └── placeholder.txt
    │   └── tests
    │   │   ├── __init__.py
    │   │   ├── api
    │   │       ├── __init__.py
    │   │       └── routes
    │   │       │   ├── __init__.py
    │   │       │   └── test_product.py
    │   │   ├── conftest.py
    │   │   └── test_vectors.json
    ├── pyproject.toml
    ├── pytest.ini
    └── scripts.py
├── data
    └── README.md
├── docker-local-redis.yml
└── frontend
    ├── .gitignore
    ├── README.md
    ├── package-lock.json
    ├── package.json
    ├── public
        ├── Redis_Mark_Red.svg
        ├── favicon.ico
        ├── github-mark-white.svg
        ├── index.html
        ├── manifest.json
        ├── robots.txt
        ├── site.webmanifest
        └── x-logo.svg
    ├── src
        ├── App.css
        ├── App.tsx
        ├── Layout.tsx
        ├── Routes.tsx
        ├── api.ts
        ├── config
        │   └── index.tsx
        ├── index.tsx
        ├── logo.svg
        ├── mobile.ts
        ├── query.ts
        ├── radio.tsx
        ├── react-app-env.d.ts
        ├── reportWebVitals.ts
        ├── styles
        │   ├── Card.css
        │   ├── Footer.css
        │   ├── Header.css
        │   └── Home.css
        └── views
        │   ├── Card.tsx
        │   ├── Footer.tsx
        │   ├── Header.tsx
        │   ├── Home.tsx
        │   └── index.ts
    └── tsconfig.json


/.dockerignore:
--------------------------------------------------------------------------------
1 | *node_modules/


--------------------------------------------------------------------------------
/.env.template:
--------------------------------------------------------------------------------
1 | REDIS_HOST=redis-vector-db
2 | REDIS_PORT=6379


--------------------------------------------------------------------------------
/.github/workflows/run_tests.yml:
--------------------------------------------------------------------------------
 1 | name: Test Suite
 2 | 
 3 | on:
 4 |   pull_request:
 5 |     branches:
 6 |       - master
 7 | 
 8 |   push:
 9 |     branches:
10 |       - master
11 | 
12 | jobs:
13 |   test:
14 |     name: Python ${{ matrix.python-version }} - ${{ matrix.connection }} [redis-stack ${{matrix.redis-stack-version}}]
15 |     runs-on: ubuntu-latest
16 | 
17 |     strategy:
18 |       fail-fast: false
19 |       matrix:
20 |         python-version: ["3.11"]
21 |         redis-stack-version: ['latest']
22 | 
23 |     services:
24 |       redis:
25 |         image: redis/redis-stack-server:${{matrix.redis-stack-version}}
26 |         ports:
27 |           - 6379:6379
28 | 
29 |     steps:
30 |     - uses: actions/checkout@v2
31 |     - name: Set up Python ${{ matrix.python-version }}
32 |       uses: actions/setup-python@v4
33 |       with:
34 |         python-version: ${{ matrix.python-version }}
35 |         cache: 'pip'
36 | 
37 |     - name: Install Poetry
38 |       uses: snok/install-poetry@v1
39 | 
40 |     - name: Install dependencies
41 |       working-directory: ./backend
42 |       run: |
43 |         poetry install --all-extras
44 | 
45 |     - name: Run tests
46 |       working-directory: ./backend
47 |       run: |
48 |         poetry run test
49 | 


--------------------------------------------------------------------------------
/.gitignore:
--------------------------------------------------------------------------------
 1 | *.egg-info
 2 | __pycache__
 3 | node_modules
 4 | .DS_Store
 5 | images
 6 | .ipynb_checkpoints
 7 | product_metadata.json
 8 | product_vectors.json
 9 | data/
10 | !backend/data
11 | .env
12 | .python-version
13 | 


--------------------------------------------------------------------------------
/.vscode/launch.json:
--------------------------------------------------------------------------------
 1 | {
 2 |     // Use IntelliSense to learn about possible attributes.
 3 |     // Hover to view descriptions of existing attributes.
 4 |     // For more information, visit: https://go.microsoft.com/fwlink/?linkid=830387
 5 |     "version": "0.2.0",
 6 |     "configurations": [
 7 |         {
 8 |             "name": "Python Debugger: FastAPI",
 9 |             "type": "debugpy",
10 |             "cwd": "${workspaceFolder}/backend/",
11 |             "env": {
12 |                 "PYTHONPATH": "${cwd}",
13 |                 "REDIS_HOST": "localhost",
14 |             },
15 |             "request": "launch",
16 |             "module": "uvicorn",
17 |             "args": [
18 |                 "productsearch.main:app",
19 |                 "--port=8888",
20 |                 "--reload"
21 |             ],
22 |             "jinja": true,
23 |         }
24 |     ]
25 | }


--------------------------------------------------------------------------------
/.vscode/settings.json:
--------------------------------------------------------------------------------
1 | {
2 |     "python.testing.pytestArgs": [
3 |         "backend"
4 |     ],
5 |     "python.testing.unittestEnabled": false,
6 |     "python.testing.pytestEnabled": true,
7 |     "python.testing.cwd": "${workspaceFolder}/backend/",
8 | }


--------------------------------------------------------------------------------
/CONTRIBUTING.md:
--------------------------------------------------------------------------------
 1 | # Contributing
 2 | 
 3 | ## Introduction
 4 | 
 5 | First off, thank you for considering contributing to our Redis VSS Fashion Demo. We value
 6 | community contributions!
 7 | 
 8 | ## Contributions We Need
 9 | 
10 | You may already know what you want to contribute \-- a fix for a bug you
11 | encountered, or a new feature your team wants to use.
12 | 
13 | If you don't know what to contribute, keep an open mind! Improving
14 | documentation, bug triaging, and writing tutorials are all examples of
15 | helpful contributions that mean less work for you.
16 | 
17 | ## Your First Contribution
18 | 
19 | Unsure where to begin contributing? You can start by looking through some of our issues [listed here](https://github.com/redis-developer/redis-product-search).
20 | 
21 | ## Getting Started
22 | 
23 | Here's how to get started with your code contribution:
24 | 
25 | 1.  Create your own fork of this repo
26 | 2.  Apply the changes in your fork
27 | 3.  _We're still working on a development environment setup -- so stay tuned_
28 | 4.  If you like the change and think the project could use it, send a
29 |     pull request.
30 | 
31 | ### Docker Tips
32 | 
33 | >COMING SOON
34 | 
35 | ## How to Report a Bug
36 | 
37 | ### Security Vulnerabilities
38 | 
39 | **NOTE**: If you find a security vulnerability, do NOT open an issue.
40 | Email [Sam Partee (<sam.partee@redis.com>)](mailto:sam.partee@redis.com) instead.
41 | 
42 | In order to determine whether you are dealing with a security issue, ask
43 | yourself these two questions:
44 | 
45 | -   Can I access something that's not mine, or something I shouldn't
46 |     have access to?
47 | -   Can I disable something for other people?
48 | 
49 | If the answer to either of those two questions are *yes*, then you're
50 | probably dealing with a security issue. Note that even if you answer
51 | *no*  to both questions, you may still be dealing with a security
52 | issue, so if you're unsure, just email us.
53 | 
54 | ### Everything Else
55 | 
56 | When filing an issue, make sure to answer these five questions:
57 | 
58 | 1.  What version of python are you using?
59 | 2.  What version of redis are you using?
60 | 3.  What did you do?
61 | 4.  What did you expect to see?
62 | 5.  What did you see instead?
63 | 
64 | ## How to Suggest a Feature or Enhancement
65 | 
66 | If you'd like to contribute a new feature, make sure you check our
67 | issue list to see if someone has already proposed it. Work may already
68 | be under way on the feature you want -- or we may have rejected a
69 | feature like it already.
70 | 
71 | If you don't see anything, open a new issue that describes the feature
72 | you would like and how it should work.
73 | 
74 | ## Code Review Process
75 | 
76 | The core team looks at Pull Requests on a regular basis. We will give
77 | feedback as as soon as possible. After feedback, we expect a response
78 | within two weeks. After that time, we may close your PR if it isn't
79 | showing any activity.


--------------------------------------------------------------------------------
/Dockerfile:
--------------------------------------------------------------------------------
 1 | FROM node:22.0-alpine AS ReactImage
 2 | 
 3 | WORKDIR /app/frontend
 4 | 
 5 | ENV NODE_PATH=/app/frontend/node_modules
 6 | ENV PATH=$PATH:/app/frontend/node_modules/.bin
 7 | 
 8 | COPY ./frontend/package.json ./
 9 | RUN npm install
10 | 
11 | ADD ./frontend ./
12 | RUN npm run build
13 | 
14 | FROM python:3.11-slim-buster AS ApiImage
15 | 
16 | ENV PYTHONUNBUFFERED 1
17 | ENV PYTHONDONTWRITEBYTECODE 1
18 | 
19 | WORKDIR /app/
20 | VOLUME [ "/data" ]
21 | 
22 | RUN apt-get update && \
23 |     apt-get install -y curl && \
24 |     rm -rf /var/lib/apt/lists/*
25 | 
26 | RUN curl -sSL https://install.python-poetry.org | POETRY_HOME=/opt/poetry python && \
27 |     cd /usr/local/bin && \
28 |     ln -s /opt/poetry/bin/poetry && \
29 |     poetry config virtualenvs.create false
30 | 
31 | RUN mkdir -p /app/backend
32 | 
33 | # copy deps first so we don't have to reload everytime
34 | COPY ./backend/poetry.lock ./backend/pyproject.toml ./backend/
35 | 
36 | WORKDIR /app/backend
37 | RUN poetry install --all-extras --no-interaction
38 | 
39 | COPY ./backend/ .
40 | 
41 | # add static react files to fastapi image
42 | COPY --from=ReactImage /app/frontend/build /app/backend/productsearch/templates/build
43 | 
44 | CMD ["poetry", "run", "start-app"]


--------------------------------------------------------------------------------
/LICENSE:
--------------------------------------------------------------------------------
 1 | BSD 3-Clause License
 2 | 
 3 | Copyright (c) 2022, Redis Inc
 4 | All rights reserved.
 5 | 
 6 | Redistribution and use in source and binary forms, with or without
 7 | modification, are permitted provided that the following conditions are met:
 8 | 
 9 | * Redistributions of source code must retain the above copyright notice, this
10 |   list of conditions and the following disclaimer.
11 | 
12 | * Redistributions in binary form must reproduce the above copyright notice,
13 |   this list of conditions and the following disclaimer in the documentation
14 |   and/or other materials provided with the distribution.
15 | 
16 | * Neither the name of the copyright holder nor the names of its
17 |   contributors may be used to endorse or promote products derived from
18 |   this software without specific prior written permission.
19 | 
20 | THIS SOFTWARE IS PROVIDED BY THE COPYRIGHT HOLDERS AND CONTRIBUTORS "AS IS"
21 | AND ANY EXPRESS OR IMPLIED WARRANTIES, INCLUDING, BUT NOT LIMITED TO, THE
22 | IMPLIED WARRANTIES OF MERCHANTABILITY AND FITNESS FOR A PARTICULAR PURPOSE ARE
23 | DISCLAIMED. IN NO EVENT SHALL THE COPYRIGHT HOLDER OR CONTRIBUTORS BE LIABLE
24 | FOR ANY DIRECT, INDIRECT, INCIDENTAL, SPECIAL, EXEMPLARY, OR CONSEQUENTIAL
25 | DAMAGES (INCLUDING, BUT NOT LIMITED TO, PROCUREMENT OF SUBSTITUTE GOODS OR
26 | SERVICES; LOSS OF USE, DATA, OR PROFITS; OR BUSINESS INTERRUPTION) HOWEVER
27 | CAUSED AND ON ANY THEORY OF LIABILITY, WHETHER IN CONTRACT, STRICT LIABILITY,
28 | OR TORT (INCLUDING NEGLIGENCE OR OTHERWISE) ARISING IN ANY WAY OUT OF THE USE
29 | OF THIS SOFTWARE, EVEN IF ADVISED OF THE POSSIBILITY OF SUCH DAMAGE.
30 | 


--------------------------------------------------------------------------------
/Makefile:
--------------------------------------------------------------------------------
1 | .PHONY: build
2 | 
3 | build:
4 | 	docker compose -f docker-local-redis.yml up


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
  1 | 
  2 | <div align="center">
  3 |     <a href="https://github.com/spartee/redis-vector-search"><img src="https://redis.io/wp-content/uploads/2024/04/Logotype.svg?raw=true" width="30%"><img></a>
  4 |     <br />
  5 |     <br />
  6 | <div display="inline-block">
  7 |     <a href="https://ecommerce.redisvl.com/"><b>Hosted Demo</b></a>&nbsp;&nbsp;&nbsp;
  8 |     <a href="https://github.com/redis-developer/redis-product-search"><b>Code</b></a>&nbsp;&nbsp;&nbsp;
  9 |     <a href="https://redis.io/docs/stack/search/reference/vectors/"><b>Redis VSS Documentation</b></a>&nbsp;&nbsp;&nbsp;
 10 |   </div>
 11 |     <br />
 12 |     <br />
 13 | </div>
 14 | 
 15 | # Redis Vector Search Demo Application
 16 | 
 17 | This demo showcases the vector search similarity (VSS) capability within Redis Stack and Redis Enterprise.
 18 | Through the RediSearch module, vector types and indexes can be added to Redis. This turns Redis into
 19 | a highly performant vector database which can be used for all types of applications.
 20 | 
 21 | The following Redis Stack capabilities are available in this demo:
 22 |    - **Vector Similarity Search**
 23 |      - by image
 24 |      - by text
 25 |    - **Multiple vector indexing types**
 26 |      - HNSW
 27 |      - Flat (brute-force)
 28 |    - **Hybrid Queries**
 29 |      - Apply tags as pre-filter for vector search
 30 | 
 31 | ## Application
 32 | 
 33 | This app was built as a Single Page Application (SPA) with the following components:
 34 | 
 35 | - **[Redis Stack](https://redis.io/docs/stack/)**: Vector database + JSON storage
 36 | - **[RedisVL](https://redisvl.com)** for Python vector db client
 37 | - **[FastAPI](https://fastapi.tiangolo.com/)** for backend API
 38 | - **[Pydantic](https://pydantic-docs.helpmanual.io/)** for schema and validation
 39 | - **[React](https://reactjs.org/)** (with Typescript)
 40 | - **[Docker Compose](https://docs.docker.com/compose/)** for development
 41 | - **[MaterialUI](https://material-ui.com/)** for some UI elements
 42 | - **[React-Bootstrap](https://react-bootstrap.github.io/)** for some UI elements
 43 | - **[Pytorch/Img2Vec](https://github.com/christiansafka/img2vec)** and **[Huggingface Sentence Transformers](https://huggingface.co/sentence-transformers)** for vector embedding creation
 44 | 
 45 | Some inspiration was taken from this [Cookiecutter project](https://github.com/Buuntu/fastapi-react)
 46 | and turned into a SPA application instead of a separate front-end server approach.
 47 | 
 48 | ### General Project Structure
 49 | 
 50 | Much inspiration taken from [tiangelo/full-stack-fastapi-template](https://github.com/tiangolo/full-stack-fastapi-template)
 51 | 
 52 | ```
 53 | /backend
 54 |     /productsearch
 55 |         /api
 56 |             /routes
 57 |                 product.py # primary API logic lives here
 58 |         /db
 59 |             load.py # seeds Redis DB
 60 |             utils.py # redis util
 61 |         /schema
 62 |             # pydantic models for serialization/validation from API
 63 |         /tests
 64 |         /utils
 65 |         config.py
 66 |         spa.py # logic for serving compiled react project
 67 |         main.py # entrypoint
 68 | /frontend
 69 |     /public
 70 |         # index, manifest, logos, etc.
 71 |     /src
 72 |         /config
 73 |         /styles
 74 |         /views
 75 |             # primary components live here
 76 | 
 77 |         api.ts # logic for connecting with BE
 78 |         App.tsx # project entry
 79 |         Routes.tsk # route definitions
 80 |         ...
 81 | /data
 82 |     # folder mounted as volume in Docker
 83 |     # load script auto populates initial data from S3
 84 | 
 85 | ```
 86 | 
 87 | ### Datasets
 88 | 
 89 | The dataset was taken from the the following Kaggle links.
 90 | 
 91 | - [Large Dataset](https://www.kaggle.com/datasets/paramaggarwal/fashion-product-images-dataset)
 92 | - [Smaller Dataset](https://www.kaggle.com/datasets/paramaggarwal/fashion-product-images-small)
 93 | 
 94 | A formatted version is available for use with this demo at:
 95 | 
 96 | 
 97 | ## Running the App with docker-compose
 98 | Before running the app, install [Docker Desktop](https://www.docker.com/products/docker-desktop/).
 99 | 
100 | 1. Copy .env file
101 | 
102 | ```bash
103 | cp .env.template .env
104 | ```
105 | 
106 | 2. Run docker containers with `make`
107 | 
108 | ```bash
109 | make build
110 | ```
111 | 
112 | Note: you can add `--build` and `--force-recreate` if caching old images.
113 | 
114 | ## Running local without docker-compose
115 | 
116 | ### Run frontend
117 | 
118 | 1. Install NPM packages
119 |     ```bash
120 |     $ cd frontend/
121 |     $ npm install
122 |     ````
123 | 2. Use `npm` to serve the application from your machine
124 |     ```bash
125 |     $ npm run start
126 |     ```
127 | 3. Navigate to `http://localhost:3000` in a browser.
128 | 
129 | All changes to your local code will be reflected in your display in semi realtime.
130 | 
131 | ### Run backend
132 | Pre-step: install [poetry](https://python-poetry.org/).
133 | 
134 | 1. `cd backend`
135 | 2. `poetry install` to get necessary python deps
136 | 3. `poetry run start` to launch uvicorn server with FastAPI app
137 | 
138 | ### vscode debugger
139 | 
140 | Included in the project is a `./vscode/launch.json` for local debugging purposes.
141 | 
142 | ### Troubleshooting
143 | Sometimes you need to clear out some Docker cached artifacts. Run `docker system prune`, restart Docker Desktop, and try again.
144 | 
145 | Open an issue here on GitHub and we will try to be responsive to these. Additionally, please consider [contributing](CONTRIBUTING.md).


--------------------------------------------------------------------------------
/backend/data/redis-logo.png:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/redis-developer/redis-product-search/081e2413d594e2171db1750731d2c30a715c0e9e/backend/data/redis-logo.png


--------------------------------------------------------------------------------
/backend/productsearch/__init__.py:
--------------------------------------------------------------------------------
1 | 
2 | 


--------------------------------------------------------------------------------
/backend/productsearch/api/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/redis-developer/redis-product-search/081e2413d594e2171db1750731d2c30a715c0e9e/backend/productsearch/api/__init__.py


--------------------------------------------------------------------------------
/backend/productsearch/api/main.py:
--------------------------------------------------------------------------------
1 | from fastapi import APIRouter
2 | 
3 | from productsearch.api.routes import product
4 | 
5 | api_router = APIRouter()
6 | api_router.include_router(product.router, prefix="/product", tags=["product"])
7 | 


--------------------------------------------------------------------------------
/backend/productsearch/api/routes/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/redis-developer/redis-product-search/081e2413d594e2171db1750731d2c30a715c0e9e/backend/productsearch/api/routes/__init__.py


--------------------------------------------------------------------------------
/backend/productsearch/api/routes/product.py:
--------------------------------------------------------------------------------
  1 | import asyncio
  2 | 
  3 | import numpy as np
  4 | from fastapi import APIRouter, Depends
  5 | from redisvl.index import AsyncSearchIndex
  6 | from redisvl.query import CountQuery, FilterQuery, VectorQuery
  7 | from redisvl.query.filter import Tag
  8 | 
  9 | from productsearch import config
 10 | from productsearch.api.schema.product import (
 11 |     ProductSearchResponse,
 12 |     ProductVectorSearchResponse,
 13 |     SimilarityRequest,
 14 | )
 15 | from productsearch.db import utils
 16 | 
 17 | router = APIRouter()
 18 | 
 19 | 
 20 | @router.get(
 21 |     "/",
 22 |     response_model=ProductSearchResponse,
 23 |     name="product:get_product_samples",
 24 |     operation_id="get_products_samples",
 25 | )
 26 | async def get_products(
 27 |     limit: int = 20,
 28 |     skip: int = 0,
 29 |     gender: str = "",
 30 |     category: str = "",
 31 |     index: AsyncSearchIndex = Depends(utils.get_async_index),
 32 | ) -> ProductSearchResponse:
 33 |     """Fetch and return products based on gender and category fields
 34 | 
 35 |     Args:
 36 |         limit (int, optional): _description_. Defaults to 20.
 37 |         skip (int, optional): _description_. Defaults to 0.
 38 |         gender (str, optional): _description_. Defaults to "".
 39 |         category (str, optional): _description_. Defaults to "".
 40 | 
 41 |     Returns:
 42 |         ProductSearchResponse: Pydantic model containing products and total count
 43 |     """
 44 |     # Build query
 45 |     filter_expression = (Tag("gender") == gender) & (Tag("category") == category)
 46 |     filter_query = FilterQuery(return_fields=[], filter_expression=filter_expression)
 47 |     # Execute search
 48 |     result_papers = await index.search(filter_query.query.paging(skip, limit))
 49 |     return ProductSearchResponse(
 50 |         total=result_papers.total, products=[d.__dict__ for d in result_papers.docs]
 51 |     )
 52 | 
 53 | 
 54 | @router.post(
 55 |     "/vectorsearch/image",
 56 |     response_model=ProductVectorSearchResponse,
 57 |     name="product:find_similar_by_image",
 58 |     operation_id="compute_image_similarity",
 59 | )
 60 | async def find_products_by_image(
 61 |     similarity_request: SimilarityRequest,
 62 |     index: AsyncSearchIndex = Depends(utils.get_async_index),
 63 | ) -> ProductVectorSearchResponse:
 64 |     """Fetch and return products based on image similarity
 65 | 
 66 |     Args:
 67 |         SimilarityRequest:
 68 |             number_of_results (int): Number of results to return
 69 |             search_type (str): Search type
 70 |             gender (str): filter criteria
 71 |             category (str): filter criteria
 72 | 
 73 |     Returns:
 74 |         ProductSearchResponse:
 75 |             total (int): Total number of results
 76 |             products (list[VectorSearchProduct]): List of products
 77 |                 product_id (str): Product ID
 78 |                 name (str): Product name
 79 |                 gender (str): fashion tag
 80 |                 category (str): fashion tag
 81 |                 img_url (str): Image URL for displaying in FE
 82 |                 text_vector (str): Text vector for similarity computation
 83 |                 img_vector (str): Image vector for similarity computation
 84 |     """
 85 |     # Fetch paper key and the vector from the HASH, cast to numpy array
 86 |     product = await index.fetch(similarity_request.product_id)
 87 |     product_img_vector = np.frombuffer(product["img_vector"], dtype=np.float32)
 88 | 
 89 |     # Build filter expression
 90 |     filter_expression = (Tag("gender") == similarity_request.gender) & (
 91 |         Tag("category") == similarity_request.category
 92 |     )
 93 | 
 94 |     # Create queries
 95 |     paper_similarity_query = VectorQuery(
 96 |         vector=product_img_vector,
 97 |         vector_field_name="img_vector",
 98 |         num_results=similarity_request.number_of_results,
 99 |         return_fields=config.RETURN_FIELDS,
100 |         filter_expression=filter_expression,
101 |     )
102 |     count_query = CountQuery(filter_expression)
103 | 
104 |     # Execute search
105 |     count, result_papers = await asyncio.gather(
106 |         index.query(count_query), index.query(paper_similarity_query)
107 |     )
108 |     # Get Paper records of those results
109 |     return ProductVectorSearchResponse(total=count, products=result_papers)
110 | 
111 | 
112 | @router.post(
113 |     "/vectorsearch/text",
114 |     response_model=ProductVectorSearchResponse,
115 |     name="product:find_similar_by_text",
116 |     operation_id="compute_text_similarity",
117 | )
118 | async def find_products_by_text(
119 |     similarity_request: SimilarityRequest,
120 |     index: AsyncSearchIndex = Depends(utils.get_async_index),
121 | ) -> ProductVectorSearchResponse:
122 |     """Fetch and return products based on image similarity
123 | 
124 |     Args:
125 |         SimilarityRequest:
126 |             number_of_results (int): Number of results to return
127 |             search_type (str): Search type
128 |             gender (str): filter criteria
129 |             category (str): filter criteria
130 | 
131 |     Returns:
132 |         ProductSearchResponse:
133 |             total (int): Total number of results
134 |             products (list[VectorSearchProduct]): List of products
135 |                 product_id (str): Product ID
136 |                 name (str): Product name
137 |                 gender (str): fashion tag
138 |                 category (str): fashion tag
139 |                 img_url (str): Image URL for displaying in FE
140 |                 text_vector (str): Text vector for similarity computation
141 |                 img_vector (str): Image vector for similarity computation
142 |     """
143 |     # Fetch paper key and the vector from the HASH, cast to numpy array
144 |     product = await index.fetch(similarity_request.product_id)
145 |     product_text_vector = np.frombuffer(product["text_vector"], dtype=np.float32)
146 | 
147 |     # Build filter expression
148 |     filter_expression = (Tag("gender") == similarity_request.gender) & (
149 |         Tag("category") == similarity_request.category
150 |     )
151 | 
152 |     # Create queries
153 |     paper_similarity_query = VectorQuery(
154 |         vector=product_text_vector,
155 |         vector_field_name="text_vector",
156 |         num_results=similarity_request.number_of_results,
157 |         return_fields=config.RETURN_FIELDS,
158 |         filter_expression=filter_expression,
159 |     )
160 |     count_query = CountQuery(filter_expression)
161 | 
162 |     # Execute search
163 |     count, result_papers = await asyncio.gather(
164 |         index.query(count_query), index.query(paper_similarity_query)
165 |     )
166 |     # Get Paper records of those results
167 |     return ProductVectorSearchResponse(total=count, products=result_papers)
168 | 


--------------------------------------------------------------------------------
/backend/productsearch/api/schema/__init__.py:
--------------------------------------------------------------------------------
1 | from .product import SearchRequest, SimilarityRequest, UserTextSimilarityRequest
2 | 


--------------------------------------------------------------------------------
/backend/productsearch/api/schema/product.py:
--------------------------------------------------------------------------------
 1 | from pydantic import BaseModel
 2 | 
 3 | 
 4 | class Product(BaseModel):
 5 |     product_id: str
 6 |     name: str
 7 |     gender: str
 8 |     category: str
 9 |     img_url: str
10 |     text_vector: str
11 |     img_vector: str
12 | 
13 | 
14 | class VectorSearchProduct(Product):
15 |     vector_distance: float
16 |     similarity_score: float
17 | 
18 |     def __init__(self, *args, **kwargs):
19 |         kwargs["similarity_score"] = 1 - float(kwargs["vector_distance"])
20 |         super().__init__(*args, **kwargs)
21 | 
22 | 
23 | class BaseRequest(BaseModel):
24 |     number_of_results: int = 15
25 |     search_type: str = "KNN"
26 |     gender: str = ""
27 |     category: str = ""
28 | 
29 | 
30 | class SimilarityRequest(BaseRequest):
31 |     product_id: int
32 | 
33 | 
34 | class SearchRequest(BaseModel):
35 |     text: str
36 |     number_of_results: int = 15
37 | 
38 | 
39 | class UserTextSimilarityRequest(BaseRequest):
40 |     user_text: str
41 | 
42 | 
43 | class ProductSearchResponse(BaseModel):
44 |     total: int
45 |     products: list[Product]
46 | 
47 | 
48 | class ProductVectorSearchResponse(BaseModel):
49 |     total: int
50 |     products: list[VectorSearchProduct]
51 | 


--------------------------------------------------------------------------------
/backend/productsearch/config.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | 
 3 | S3_DATA_URL = "https://redis-product-search.s3.us-east-2.amazonaws.com/products.json"
 4 | 
 5 | RETURN_FIELDS = [
 6 |     "product_id",
 7 |     "name",
 8 |     "gender",
 9 |     "category",
10 |     "img_url",
11 |     "img_vector",
12 |     "text_vector",
13 | ]
14 | 
15 | PROJECT_NAME = "productsearch"
16 | API_DOCS = "/api/docs"
17 | OPENAPI_DOCS = "/api/openapi.json"
18 | INDEX_NAME = "products"
19 | 
20 | REDIS_HOST = os.environ.get("REDIS_HOST", "redis-vector-db")
21 | REDIS_PORT = os.environ.get("REDIS_PORT", 6379)
22 | REDIS_DB = os.environ.get("REDIS_DB", 0)
23 | REDIS_PASSWORD = os.environ.get("REDIS_PASSWORD")
24 | 
25 | if REDIS_PASSWORD:
26 |     REDIS_URL = f"redis://:{REDIS_PASSWORD}@{REDIS_HOST}:{REDIS_PORT}"
27 | else:
28 |     REDIS_URL = f"redis://{REDIS_HOST}:{REDIS_PORT}"
29 | 
30 | API_V1_STR = "/api/v1"
31 | DATA_LOCATION = os.environ.get("DATA_LOCATION", "../data")
32 | DEPLOYMENT_ENV = os.environ.get("DEPLOYMENT", "dev")
33 | 
34 | WRITE_CONCURRENCY = os.environ.get("WRITE_CONCURRENCY", 150)
35 | 


--------------------------------------------------------------------------------
/backend/productsearch/db/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/redis-developer/redis-product-search/081e2413d594e2171db1750731d2c30a715c0e9e/backend/productsearch/db/__init__.py


--------------------------------------------------------------------------------
/backend/productsearch/db/load.py:
--------------------------------------------------------------------------------
 1 | #!/usr/bin/env python3
 2 | import asyncio
 3 | import json
 4 | from typing import List
 5 | 
 6 | import numpy as np
 7 | import requests
 8 | from redisvl.index import AsyncSearchIndex
 9 | 
10 | from productsearch import config
11 | from productsearch.db.utils import get_schema
12 | 
13 | 
14 | def read_from_s3():
15 |     res = requests.get(config.S3_DATA_URL)
16 |     return res.json()
17 | 
18 | 
19 | def read_product_json_vectors() -> List:
20 |     try:
21 |         with open(config.DATA_LOCATION + "/products.json") as f:
22 |             product_vectors = json.load(f)
23 |     except FileNotFoundError:
24 |         print("File not found, reading from S3")
25 |         product_vectors = read_from_s3()
26 | 
27 |     return product_vectors
28 | 
29 | 
30 | async def write_products(index: AsyncSearchIndex, products: List[dict]):
31 |     """
32 |     Write product records to Redis.
33 | 
34 |     Args:
35 |         index (AsyncSearchIndex): Redis search index.
36 |         products (list): List of documents to store.
37 |     """
38 | 
39 |     def preprocess(product: dict) -> dict:
40 |         return {
41 |             "product_id": product["product_id"],
42 |             # add tag fields to vectors for hybrid search
43 |             "gender": product["product_metadata"]["gender"],
44 |             "category": product["product_metadata"]["master_category"],
45 |             # text fields
46 |             "name": product["product_metadata"]["name"],
47 |             "img_url": product["product_metadata"]["img_url"],
48 |             # add image and text vectors as blobs
49 |             "img_vector": np.array(product["img_vector"], dtype=np.float32).tobytes(),
50 |             "text_vector": np.array(product["text_vector"], dtype=np.float32).tobytes(),
51 |         }
52 | 
53 |     # TODO add an optional preprocessor callable to index.load()
54 |     await index.load(
55 |         data=[preprocess(product) for product in products],
56 |         concurrency=config.WRITE_CONCURRENCY,
57 |         id_field="product_id",
58 |     )
59 | 
60 | 
61 | async def load_data():
62 |     schema = get_schema()
63 |     index = AsyncSearchIndex(schema, redis_url=config.REDIS_URL)
64 | 
65 |     # Check if index exists
66 |     if await index.exists() and len((await index.search("*")).docs) > 0:
67 |         print("Index already exists and products ")
68 |     else:
69 |         # create a search index
70 |         await index.create(overwrite=True)
71 |         print("Loading products from file")
72 |         products = read_product_json_vectors()
73 |         print("Loading products into Redis")
74 |         await write_products(index, products)
75 |         print("Products successfully loaded")
76 | 
77 | 
78 | if __name__ == "__main__":
79 |     asyncio.run(load_data())
80 | 


--------------------------------------------------------------------------------
/backend/productsearch/db/schema/products.yml:
--------------------------------------------------------------------------------
 1 | index:
 2 |   name: products
 3 |   prefix: product
 4 | 
 5 | fields:
 6 |   - name: gender
 7 |     type: tag
 8 |   - name: category
 9 |     type: tag
10 |   - name: img_url
11 |     type: text
12 |   - name: name
13 |     type: text
14 |   - name: img_vector
15 |     type: vector
16 |     attrs:
17 |       dims: 512
18 |       type: float32
19 |       algorithm: hnsw
20 |       distance_metric: cosine
21 |   - name: text_vector
22 |     type: vector
23 |     attrs:
24 |       dims: 768
25 |       type: float32
26 |       algorithm: hnsw
27 |       distance_metric: cosine


--------------------------------------------------------------------------------
/backend/productsearch/db/utils.py:
--------------------------------------------------------------------------------
 1 | import logging
 2 | import os
 3 | 
 4 | from redisvl.index import AsyncSearchIndex
 5 | from redisvl.schema import IndexSchema
 6 | 
 7 | from productsearch import config
 8 | 
 9 | logger = logging.getLogger(__name__)
10 | 
11 | # global search index
12 | _global_index = None
13 | 
14 | 
15 | def get_schema() -> IndexSchema:
16 |     dir_path = os.path.dirname(os.path.realpath(__file__)) + "/schema"
17 |     file_path = os.path.join(dir_path, "products.yml")
18 |     return IndexSchema.from_yaml(file_path)
19 | 
20 | 
21 | async def get_async_index():
22 |     global _global_index
23 |     if not _global_index:
24 |         _global_index = AsyncSearchIndex(get_schema(), redis_url=config.REDIS_URL)
25 |     return _global_index
26 | 


--------------------------------------------------------------------------------
/backend/productsearch/main.py:
--------------------------------------------------------------------------------
 1 | from contextlib import asynccontextmanager
 2 | from pathlib import Path
 3 | 
 4 | import uvicorn
 5 | from fastapi import FastAPI
 6 | from fastapi.staticfiles import StaticFiles
 7 | from starlette.middleware.cors import CORSMiddleware
 8 | 
 9 | from productsearch import config
10 | from productsearch.api.main import api_router
11 | from productsearch.db.utils import get_async_index
12 | from productsearch.spa import SinglePageApplication
13 | 
14 | 
15 | @asynccontextmanager
16 | async def lifespan(app: FastAPI):
17 |     index = await get_async_index()
18 |     async with index:
19 |         yield
20 | 
21 | 
22 | app = FastAPI(
23 |     title=config.PROJECT_NAME,
24 |     docs_url=config.API_DOCS,
25 |     openapi_url=config.OPENAPI_DOCS,
26 |     lifespan=lifespan,
27 | )
28 | 
29 | app.add_middleware(
30 |     CORSMiddleware,
31 |     allow_origins="*",
32 |     allow_credentials=True,
33 |     allow_methods=["*"],
34 |     allow_headers=["*"],
35 | )
36 | 
37 | # Routers
38 | app.include_router(api_router, prefix=config.API_V1_STR)
39 | 
40 | # static image files
41 | app.mount("/data", StaticFiles(directory="data"), name="data")
42 | 
43 | ## mount the built GUI react files into the static dir to be served.
44 | current_file = Path(__file__)
45 | project_root = current_file.parent.resolve()
46 | frontend_build_dir = project_root / "templates" / "build"
47 | app.mount(path="/", app=SinglePageApplication(directory=frontend_build_dir), name="SPA")
48 | 
49 | 
50 | def main():
51 |     server_attr = {"host": "0.0.0.0", "reload": True, "port": 8888, "workers": 1}
52 |     if config.DEPLOYMENT_ENV == "prod":
53 |         server_attr.update(
54 |             {
55 |                 "reload": False,
56 |                 "workers": 2,
57 |                 "ssl_keyfile": "key.pem",
58 |                 "ssl_certfile": "full.pem",
59 |             }
60 |         )
61 | 
62 |     uvicorn.run("productsearch.main:app", **server_attr)
63 | 
64 | 
65 | if __name__ == "__main__":
66 |     main()
67 | 


--------------------------------------------------------------------------------
/backend/productsearch/spa.py:
--------------------------------------------------------------------------------
 1 | import os
 2 | from typing import Tuple
 3 | 
 4 | from fastapi.staticfiles import StaticFiles
 5 | 
 6 | 
 7 | class SinglePageApplication(StaticFiles):
 8 |     """Configure a FastAPI application to both serve static files mounted
 9 |     at a specific directory and also serve a number of routers for a backend
10 |     API at the same time.
11 |     """
12 | 
13 |     def __init__(self, directory: os.PathLike, index="index.html") -> None:
14 |         self.index = index
15 | 
16 |         # set html=True to resolve the index even when no
17 |         # the base path is passed in
18 |         super().__init__(directory=directory, packages=None, html=True, check_dir=True)
19 | 
20 |     async def get_response(self, path: str, scope):
21 |         response = await super().get_response(path, scope)
22 |         if response.status_code == 404:
23 |             response = await super().get_response(".", scope)
24 |         return response
25 | 
26 |     def lookup_path(self, path: str) -> Tuple[str, os.stat_result | None]:
27 |         results = super().lookup_path(path)
28 |         full_path, stat_result = results
29 | 
30 |         # if a file cannot be found
31 |         if stat_result is None:
32 |             return super().lookup_path(self.index)
33 | 
34 |         return (full_path, stat_result)
35 | 


--------------------------------------------------------------------------------
/backend/productsearch/templates/build/placeholder.txt:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/redis-developer/redis-product-search/081e2413d594e2171db1750731d2c30a715c0e9e/backend/productsearch/templates/build/placeholder.txt


--------------------------------------------------------------------------------
/backend/productsearch/tests/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/redis-developer/redis-product-search/081e2413d594e2171db1750731d2c30a715c0e9e/backend/productsearch/tests/__init__.py


--------------------------------------------------------------------------------
/backend/productsearch/tests/api/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/redis-developer/redis-product-search/081e2413d594e2171db1750731d2c30a715c0e9e/backend/productsearch/tests/api/__init__.py


--------------------------------------------------------------------------------
/backend/productsearch/tests/api/routes/__init__.py:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/redis-developer/redis-product-search/081e2413d594e2171db1750731d2c30a715c0e9e/backend/productsearch/tests/api/routes/__init__.py


--------------------------------------------------------------------------------
/backend/productsearch/tests/api/routes/test_product.py:
--------------------------------------------------------------------------------
  1 | import pytest
  2 | from httpx import AsyncClient
  3 | 
  4 | from productsearch.api.schema.product import SimilarityRequest
  5 | 
  6 | 
  7 | @pytest.fixture(scope="module")
  8 | def gender(test_data):
  9 |     return test_data[0]["gender"]
 10 | 
 11 | 
 12 | @pytest.fixture(scope="module")
 13 | def category(test_data):
 14 |     return test_data[0]["category"]
 15 | 
 16 | 
 17 | @pytest.fixture(scope="module")
 18 | def bad_req_json():
 19 |     return {"not": "valid"}
 20 | 
 21 | 
 22 | @pytest.fixture(scope="module")
 23 | def product_req(gender, category, test_data):
 24 |     return SimilarityRequest(
 25 |         gender=gender,
 26 |         category=category,
 27 |         product_id=test_data[0]["product_id"],
 28 |     )
 29 | 
 30 | 
 31 | @pytest.mark.asyncio(scope="session")
 32 | async def test_root_w_filters(
 33 |     async_client: AsyncClient, gender: str, category: str
 34 | ) -> None:
 35 | 
 36 |     response = await async_client.get(f"product/?gender={gender}&category={category}")
 37 | 
 38 |     assert response.status_code == 200
 39 |     content = response.json()
 40 | 
 41 |     assert content["total"] == 2
 42 |     assert len(content["products"]) == 2
 43 |     for p in content["products"]:
 44 |         assert p["category"] == category
 45 |         assert p["gender"] == gender
 46 | 
 47 | 
 48 | @pytest.mark.asyncio(scope="session")
 49 | async def test_root_na_category(async_client: AsyncClient, gender: str):
 50 | 
 51 |     response = await async_client.get(f"product/?gender={gender}&category=NA")
 52 | 
 53 |     assert response.status_code == 200
 54 |     content = response.json()
 55 |     assert content["total"] == 0
 56 |     assert len(content["products"]) == 0
 57 | 
 58 | 
 59 | @pytest.mark.asyncio(scope="session")
 60 | async def test_vector_by_text(
 61 |     async_client: AsyncClient,
 62 |     gender: str,
 63 |     category: str,
 64 |     product_req: SimilarityRequest,
 65 | ):
 66 |     response = await async_client.post(
 67 |         f"product/vectorsearch/text", json=product_req.model_dump()
 68 |     )
 69 | 
 70 |     assert response.status_code == 200
 71 |     content = response.json()
 72 | 
 73 |     assert content["total"] == 2
 74 |     assert len(content["products"]) == 2
 75 |     for p in content["products"]:
 76 |         assert p["category"] == category
 77 |         assert p["gender"] == gender
 78 | 
 79 | 
 80 | @pytest.mark.asyncio(scope="session")
 81 | async def test_vector_by_text_bad_input(async_client: AsyncClient, bad_req_json: dict):
 82 | 
 83 |     response = await async_client.post(f"product/vectorsearch/text", json=bad_req_json)
 84 | 
 85 |     assert response.status_code == 422
 86 | 
 87 | 
 88 | @pytest.mark.asyncio(scope="session")
 89 | async def test_vector_by_img(
 90 |     async_client: AsyncClient,
 91 |     product_req: SimilarityRequest,
 92 | ):
 93 |     response = await async_client.post(
 94 |         f"product/vectorsearch/image", json=product_req.model_dump()
 95 |     )
 96 | 
 97 |     assert response.status_code == 200
 98 |     content = response.json()
 99 | 
100 |     assert content["total"] == 2
101 |     assert len(content["products"]) == 2
102 | 
103 | 
104 | @pytest.mark.asyncio(scope="session")
105 | async def test_vector_by_img_bad_input(async_client: AsyncClient, bad_req_json: dict):
106 | 
107 |     response = await async_client.post(f"product/vectorsearch/image", json=bad_req_json)
108 | 
109 |     assert response.status_code == 422
110 | 


--------------------------------------------------------------------------------
/backend/productsearch/tests/conftest.py:
--------------------------------------------------------------------------------
 1 | import json
 2 | import os
 3 | 
 4 | import httpx
 5 | import numpy as np
 6 | import pytest
 7 | import pytest_asyncio
 8 | from asgi_lifespan import LifespanManager
 9 | from httpx import AsyncClient
10 | from redisvl.index import SearchIndex
11 | 
12 | from productsearch import config
13 | from productsearch.db.utils import get_schema
14 | from productsearch.main import app
15 | 
16 | 
17 | @pytest.fixture(scope="session")
18 | def index():
19 |     index = SearchIndex(schema=get_schema(), redis_url=config.REDIS_URL)
20 |     index.create()
21 |     yield index
22 |     index.disconnect()
23 | 
24 | 
25 | @pytest.fixture(scope="session", autouse=True)
26 | def test_data(index):
27 |     cwd = os.getcwd()
28 |     with open(f"{cwd}/productsearch/tests/test_vectors.json", "r") as f:
29 |         products = json.load(f)
30 | 
31 |     parsed_products = []
32 | 
33 |     # convert to bytes
34 |     for product in products:
35 |         parsed = {}
36 |         parsed["text_vector"] = np.array(
37 |             product["text_vector"], dtype=np.float32
38 |         ).tobytes()
39 |         parsed["img_vector"] = np.array(
40 |             product["img_vector"], dtype=np.float32
41 |         ).tobytes()
42 |         parsed["category"] = product["product_metadata"]["master_category"]
43 |         parsed["img_url"] = product["product_metadata"]["img_url"]
44 |         parsed["name"] = product["product_metadata"]["name"]
45 |         parsed["gender"] = product["product_metadata"]["gender"]
46 |         parsed["product_id"] = product["product_id"]
47 |         parsed_products.append(parsed)
48 | 
49 |     _ = index.load(data=parsed_products, id_field="product_id")
50 |     return parsed_products
51 | 
52 | 
53 | @pytest_asyncio.fixture(scope="session")
54 | async def async_client():
55 |     async with LifespanManager(app=app) as lifespan:
56 |         async with AsyncClient(
57 |             transport=httpx.ASGITransport(app=app), base_url="http://test/api/v1/"  # type: ignore
58 |         ) as client:
59 |             yield client
60 | 


--------------------------------------------------------------------------------
/backend/pyproject.toml:
--------------------------------------------------------------------------------
 1 | [tool.poetry]
 2 | name = "productsearch"
 3 | version = "0.2.0"
 4 | description = "Reference architecture for vector search application with Redis"
 5 | authors = ["Robert Shelton  <robert.shelton@redis.com>"]
 6 | readme = "README.md"
 7 | package-mode = false
 8 | 
 9 | [tool.poetry.dependencies]
10 | python = ">=3.11,<3.14"
11 | fastapi = "^0.111.0"
12 | uvicorn = "^0.30.1"
13 | ipython = "^8.26.0"
14 | numpy = "1.26.4"
15 | redisvl = "^0.4.1"
16 | cohere = "^5.5.8"
17 | openai = "^1.35.9"
18 | sentence-transformers = "^3.0.1"
19 | sentencepiece = "^0.2.0"
20 | redis = "^5.2.1"
21 | asgi-lifespan = "^2.1.0"
22 | 
23 | [tool.poetry.group.dev.dependencies]
24 | mypy = "1.9.0"
25 | black = ">=20.8b1"
26 | pylint = "3.1.0"
27 | isort = ">=5.6.4"
28 | pytest-cov = "5.0.0"
29 | pytest-asyncio = "^0.23.7"
30 | pytest = "^8.2.2"
31 | types-redis = "*"
32 | types-pyyaml = "*"
33 | types-tabulate = "*"
34 | anyio = {extras = ["trio"], version = "^4.4.0"}
35 | pytest-env = "^1.1.3"
36 | 
37 | [tool.poetry.scripts]
38 | start = "productsearch.main:main"
39 | start-app = "scripts:start_app"
40 | load = "scripts:load_data"
41 | format = "scripts:format"
42 | check-format = "scripts:check_format"
43 | sort-imports = "scripts:sort_imports"
44 | check-sort-imports = "scripts:check_sort_imports"
45 | check-lint = "scripts:check_lint"
46 | mypy = "scripts:mypy"
47 | test = "scripts:test"
48 | test-cov = "scripts:test_cov"
49 | cov = "scripts:cov"
50 | 
51 | [build-system]
52 | requires = ["poetry-core"]
53 | build-backend = "poetry.core.masonry.api"
54 | 
55 | [tool.coverage.html]
56 | directory = "htmlcov"
57 | 
58 | [tool.mypy]
59 | warn_unused_configs = true
60 | ignore_missing_imports = true
61 | 


--------------------------------------------------------------------------------
/backend/pytest.ini:
--------------------------------------------------------------------------------
1 | [pytest]
2 | env = 
3 |     REDIS_HOST=localhost


--------------------------------------------------------------------------------
/backend/scripts.py:
--------------------------------------------------------------------------------
 1 | import subprocess
 2 | 
 3 | 
 4 | def load_data():
 5 |     subprocess.run(["python", "-m", "productsearch.db.load"], check=True)
 6 | 
 7 | 
 8 | def start_app():
 9 |     # load data
10 |     subprocess.run(["python", "-m", "productsearch.db.load"], check=True)
11 |     # start app
12 |     subprocess.run(["python", "-m", "productsearch.main"], check=True)
13 | 
14 | 
15 | def format():
16 |     subprocess.run(
17 |         ["isort", "./productsearch", "./tests/", "--profile", "black"], check=True
18 |     )
19 |     subprocess.run(["black", "./productsearch"], check=True)
20 | 
21 | 
22 | def check_format():
23 |     subprocess.run(["black", "--check", "./productsearch"], check=True)
24 | 
25 | 
26 | def sort_imports():
27 |     subprocess.run(
28 |         ["isort", "./productsearch", "./tests/", "--profile", "black"], check=True
29 |     )
30 | 
31 | 
32 | def check_sort_imports():
33 |     subprocess.run(
34 |         ["isort", "./productsearch", "--check-only", "--profile", "black"], check=True
35 |     )
36 | 
37 | 
38 | def check_lint():
39 |     subprocess.run(["pylint", "--rcfile=.pylintrc", "./productsearch"], check=True)
40 | 
41 | 
42 | def mypy():
43 |     subprocess.run(["python", "-m", "mypy", "./productsearch"], check=True)
44 | 
45 | 
46 | def test():
47 |     subprocess.run(
48 |         ["python", "-m", "pytest", "productsearch", "--log-level=CRITICAL"], check=True
49 |     )
50 | 
51 | 
52 | def test_cov():
53 |     subprocess.run(
54 |         [
55 |             "python",
56 |             "-m",
57 |             "pytest",
58 |             "-vv",
59 |             "--cov=./productsearch",
60 |             "--cov-report=xml",
61 |             "--log-level=CRITICAL",
62 |         ],
63 |         check=True,
64 |     )
65 | 
66 | 
67 | def cov():
68 |     subprocess.run(["coverage", "html"], check=True)
69 |     print("If data was present, coverage report is in ./htmlcov/index.html")
70 | 


--------------------------------------------------------------------------------
/data/README.md:
--------------------------------------------------------------------------------
 1 | 
 2 | # Data
 3 | 
 4 | The application uses a static dataset of products from Kaggle. There are two
 5 | versions that can be used for the demo
 6 | 
 7 |  - [Small](https://www.kaggle.com/datasets/paramaggarwal/fashion-product-images-dataset) (~.5 GB)
 8 |  - [Large](https://www.kaggle.com/datasets/paramaggarwal/fashion-product-images-small) (~25 GB)
 9 | 
10 | 
11 | The small dataset is currently used so that the container remains small but the process is similar for the
12 | larger dataset. The hosted version will use the high-resolution dataset at some point.
13 | 
14 | 
15 | ### Product Metadata
16 | 
17 | The file ``styles.csv`` contains the product metadata needed for the demo.
18 | 
19 | Columns and datatypes of the metadata are listed below.
20 | ```text
21 | Int64Index: 44077 entries, 0 to 44423
22 | Data columns (total 10 columns):
23 |  #   Column              Non-Null Count  Dtype
24 | ---  ------              --------------  -----
25 |  0   id                  44077 non-null  int64
26 |  1   gender              44077 non-null  object
27 |  2   masterCategory      44077 non-null  object
28 |  3   subCategory         44077 non-null  object
29 |  4   articleType         44077 non-null  object
30 |  5   baseColour          44077 non-null  object
31 |  6   season              44077 non-null  object
32 |  7   year                44077 non-null  int64
33 |  8   usage               44077 non-null  object
34 |  9   productDisplayName  44077 non-null  object
35 | dtypes: int64(2), object(8)
36 | memory usage: 3.7+ MB
37 | ```
38 | 
39 | ### Product Images
40 | 
41 | The images extracted from the archive should
42 | 
43 | 
44 | 
45 | 


--------------------------------------------------------------------------------
/docker-local-redis.yml:
--------------------------------------------------------------------------------
 1 | version: '3.11'
 2 | 
 3 | services:
 4 |   backend:
 5 |     build:
 6 |       context: .
 7 |       dockerfile: Dockerfile
 8 |     env_file:
 9 |       - .env
10 |     expose:
11 |       - "8888"
12 |     ports:
13 |       - "8888:8888"
14 |     depends_on:
15 |       - "redis-vector-db"
16 |   redis-vector-db:
17 |     image: redis:8.0-M03
18 |     ports:
19 |       - "6379:6379"
20 |       - "8001:8001"
21 |     volumes:
22 |         - redis-vector-db:/data
23 |     healthcheck:
24 |       test: ["CMD", "redis-cli", "-h", "localhost", "-p", "6379", "ping"]
25 |       interval: 2s
26 |       timeout: 1m30s
27 |       retries: 5
28 |       start_period: 5s
29 | 
30 | 
31 | volumes:
32 |   redis-vector-db:


--------------------------------------------------------------------------------
/frontend/.gitignore:
--------------------------------------------------------------------------------
 1 | # See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
 2 | 
 3 | # dependencies
 4 | /node_modules
 5 | /.pnp
 6 | .pnp.js
 7 | 
 8 | # testing
 9 | /coverage
10 | 
11 | # production
12 | /build
13 | 
14 | # misc
15 | .DS_Store
16 | .env.local
17 | .env.development.local
18 | .env.test.local
19 | .env.production.local
20 | 
21 | npm-debug.log*
22 | yarn-debug.log*
23 | yarn-error.log*
24 | yarn.lock


--------------------------------------------------------------------------------
/frontend/README.md:
--------------------------------------------------------------------------------
 1 | # Getting Started with Create React App
 2 | 
 3 | This project was bootstrapped with [Create React App](https://github.com/facebook/create-react-app).
 4 | 
 5 | ## Available Scripts
 6 | 
 7 | In the project directory, you can run:
 8 | 
 9 | ### `yarn start`
10 | 
11 | Runs the app in the development mode.\
12 | Open [http://localhost:3000](http://localhost:3000) to view it in the browser.
13 | 
14 | The page will reload if you make edits.\
15 | You will also see any lint errors in the console.
16 | 
17 | ### `yarn test`
18 | 
19 | Launches the test runner in the interactive watch mode.\
20 | See the section about [running tests](https://facebook.github.io/create-react-app/docs/running-tests) for more information.
21 | 
22 | ### `yarn build`
23 | 
24 | Builds the app for production to the `build` folder.\
25 | It correctly bundles React in production mode and optimizes the build for the best performance.
26 | 
27 | The build is minified and the filenames include the hashes.\
28 | Your app is ready to be deployed!
29 | 
30 | See the section about [deployment](https://facebook.github.io/create-react-app/docs/deployment) for more information.
31 | 
32 | ### `yarn eject`
33 | 
34 | **Note: this is a one-way operation. Once you `eject`, you can’t go back!**
35 | 
36 | If you aren’t satisfied with the build tool and configuration choices, you can `eject` at any time. This command will remove the single build dependency from your project.
37 | 
38 | Instead, it will copy all the configuration files and the transitive dependencies (webpack, Babel, ESLint, etc) right into your project so you have full control over them. All of the commands except `eject` will still work, but they will point to the copied scripts so you can tweak them. At this point you’re on your own.
39 | 
40 | You don’t have to ever use `eject`. The curated feature set is suitable for small and middle deployments, and you shouldn’t feel obligated to use this feature. However we understand that this tool wouldn’t be useful if you couldn’t customize it when you are ready for it.
41 | 
42 | ## Learn More
43 | 
44 | You can learn more in the [Create React App documentation](https://facebook.github.io/create-react-app/docs/getting-started).
45 | 
46 | To learn React, check out the [React documentation](https://reactjs.org/).
47 | 


--------------------------------------------------------------------------------
/frontend/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "productsearch",
 3 |   "version": "0.1.0",
 4 |   "private": true,
 5 |   "dependencies": {
 6 |     "@emotion/react": "^11.9.3",
 7 |     "@emotion/styled": "^11.9.3",
 8 |     "@mui/icons-material": "^5.8.4",
 9 |     "@mui/material": "^5.8.4",
10 |     "@testing-library/jest-dom": "^5.14.1",
11 |     "@testing-library/react": "^13.0.0",
12 |     "@testing-library/user-event": "^13.2.1",
13 |     "@types/jest": "^27.0.1",
14 |     "@types/node": "^16.7.13",
15 |     "@types/react": "^18.0.0",
16 |     "@types/react-dom": "^18.0.0",
17 |     "bootstrap": "^5.1.3",
18 |     "ra-data-simple-rest": "^4.2.0",
19 |     "react": "^18.2.0",
20 |     "react-bootstrap": "^2.4.0",
21 |     "react-dom": "^18.2.0",
22 |     "react-router": "^6.3.0",
23 |     "react-router-dom": "^6.3.0",
24 |     "react-scripts": "5.0.1",
25 |     "typescript": "^4.4.2",
26 |     "web-vitals": "^2.1.0"
27 |   },
28 |   "scripts": {
29 |     "start": "react-scripts start",
30 |     "build": "react-scripts build",
31 |     "test": "react-scripts test",
32 |     "eject": "react-scripts eject"
33 |   },
34 |   "eslintConfig": {
35 |     "extends": [
36 |       "react-app",
37 |       "react-app/jest"
38 |     ]
39 |   },
40 |   "browserslist": {
41 |     "production": [
42 |       ">0.2%",
43 |       "not dead",
44 |       "not op_mini all"
45 |     ],
46 |     "development": [
47 |       "last 1 chrome version",
48 |       "last 1 firefox version",
49 |       "last 1 safari version"
50 |     ]
51 |   },
52 |   "proxy": "http://localhost:8888"
53 | }


--------------------------------------------------------------------------------
/frontend/public/Redis_Mark_Red.svg:
--------------------------------------------------------------------------------
 1 | <?xml version="1.0" encoding="utf-8"?>
 2 | <!-- Generator: Adobe Illustrator 28.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
 3 | <!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd" [
 4 | 	<!ENTITY ns_extend "http://ns.adobe.com/Extensibility/1.0/">
 5 | 	<!ENTITY ns_ai "http://ns.adobe.com/AdobeIllustrator/10.0/">
 6 | 	<!ENTITY ns_graphs "http://ns.adobe.com/Graphs/1.0/">
 7 | 	<!ENTITY ns_vars "http://ns.adobe.com/Variables/1.0/">
 8 | 	<!ENTITY ns_imrep "http://ns.adobe.com/ImageReplacement/1.0/">
 9 | 	<!ENTITY ns_sfw "http://ns.adobe.com/SaveForWeb/1.0/">
10 | 	<!ENTITY ns_custom "http://ns.adobe.com/GenericCustomNamespace/1.0/">
11 | 	<!ENTITY ns_adobe_xpath "http://ns.adobe.com/XPath/1.0/">
12 | ]>
13 | <svg version="1.1" id="Layer_1" xmlns:x="&ns_extend;" xmlns:i="&ns_ai;" xmlns:graph="&ns_graphs;"
14 | 	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 156.0529938 144"
15 | 	 style="enable-background:new 0 0 156.0529938 144;" xml:space="preserve">
16 | <style type="text/css">
17 | 	.st0{fill:#FF4438;}
18 | </style>
19 | <metadata>
20 | 	<sfw  xmlns="&ns_sfw;">
21 | 		<slices></slices>
22 | 		<sliceSourceBounds  bottomLeftOrigin="true" height="144" width="156.0530246" x="0" y="-144"></sliceSourceBounds>
23 | 	</sfw>
24 | </metadata>
25 | <path class="st0" d="M147.670166,79.4482727c-10.7946014,13.6012039-22.452774,29.1454315-45.7691193,29.1454315
26 | 	c-20.8268356,0-28.5858765-18.3700104-29.1313019-33.2931824c4.5630417,9.6490479,13.4846115,17.4628525,27.4041672,17.1012802
27 | 	c26.7706146-0.8635712,45.1214371-25.0434799,45.1214371-47.0644722C145.2953491,18.9985008,125.6491776,0,91.5382309,0
28 | 	C67.1424255,0,36.9175415,9.2833586,17.0554714,23.9640179c-0.2158909,15.1124439,8.2038994,34.7586212,11.226387,32.5997009
29 | 	c17.21908-12.3804817,30.8731976-20.3501434,44.1166153-24.3462563C52.7944603,54.0785866,5.7588782,104.8391037,0,113.775116
30 | 	C0.6476762,121.9790115,10.7946024,144,15.7601204,144c1.5112438,0,2.8065968-0.8635712,4.3178406-2.3748169
31 | 	c14.1801453-15.9326324,25.7396469-30.2172928,36.0215034-43.985733
32 | 	c1.443779,20.1794739,11.366806,44.8493042,39.1089325,44.8493042c24.8275833,0,49.4392776-17.9190369,60.6656723-58.2908554
33 | 	C157.1694183,79.2323837,151.1244354,75.3463287,147.670166,79.4482727z M119.3883057,46.8485756
34 | 	c0,12.7376328-12.5217361,18.9985008-23.9640198,18.9985008c-6.1162338,0-10.8146286-1.6060638-14.5303345-3.6929359
35 | 	c6.8368607-10.3524857,13.6045761-20.9680939,20.8757477-32.3321533
36 | 	C114.5906143,31.9920292,119.3883057,39.1185226,119.3883057,46.8485756z"/>
37 | </svg>
38 | 


--------------------------------------------------------------------------------
/frontend/public/favicon.ico:
--------------------------------------------------------------------------------
https://raw.githubusercontent.com/redis-developer/redis-product-search/081e2413d594e2171db1750731d2c30a715c0e9e/frontend/public/favicon.ico


--------------------------------------------------------------------------------
/frontend/public/github-mark-white.svg:
--------------------------------------------------------------------------------
1 | <svg width="98" height="96" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M48.854 0C21.839 0 0 22 0 49.217c0 21.756 13.993 40.172 33.405 46.69 2.427.49 3.316-1.059 3.316-2.362 0-1.141-.08-5.052-.08-9.127-13.59 2.934-16.42-5.867-16.42-5.867-2.184-5.704-5.42-7.17-5.42-7.17-4.448-3.015.324-3.015.324-3.015 4.934.326 7.523 5.052 7.523 5.052 4.367 7.496 11.404 5.378 14.235 4.074.404-3.178 1.699-5.378 3.074-6.6-10.839-1.141-22.243-5.378-22.243-24.283 0-5.378 1.94-9.778 5.014-13.2-.485-1.222-2.184-6.275.486-13.038 0 0 4.125-1.304 13.426 5.052a46.97 46.97 0 0 1 12.214-1.63c4.125 0 8.33.571 12.213 1.63 9.302-6.356 13.427-5.052 13.427-5.052 2.67 6.763.97 11.816.485 13.038 3.155 3.422 5.015 7.822 5.015 13.2 0 18.905-11.404 23.06-22.324 24.283 1.78 1.548 3.316 4.481 3.316 9.126 0 6.6-.08 11.897-.08 13.526 0 1.304.89 2.853 3.316 2.364 19.412-6.52 33.405-24.935 33.405-46.691C97.707 22 75.788 0 48.854 0z" fill="#fff"/></svg>


--------------------------------------------------------------------------------
/frontend/public/index.html:
--------------------------------------------------------------------------------
 1 | <!DOCTYPE html>
 2 | <html lang="en">
 3 | 
 4 | <head>
 5 |   <meta charset="utf-8" />
 6 |   <meta name="viewport" content="width=device-width, initial-scale=1" />
 7 |   <meta name="theme-color" content="#000000" />
 8 |   <meta name="description" content="Redis vector similarity search demonstration" />
 9 |   <link rel="apple-touch-icon" sizes="180x180" href="%PUBLIC_URL%/apple-touch-icon.png">
10 |   <link rel="icon" type="image/png" sizes="32x32" href="%PUBLIC_URL%/favicon-32x32.png">
11 |   <link rel="icon" type="image/png" sizes="16x16" href="%PUBLIC_URL%/favicon-16x16.png">
12 |   <link rel="icon" href="%PUBLIC_URL%/Redis_Mark_Red.svg" />
13 |   <link rel="preconnect" href="https://fonts.googleapis.com">
14 |   <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
15 |   <link href="https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@300..700&display=swap" rel="stylesheet">
16 |   <!--
17 |       manifest.json provides metadata used when your web app is installed on a
18 |       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
19 |     -->
20 |   <link rel="manifest" href="%PUBLIC_URL%/site.webmanifest">
21 |   <!--
22 |       Notice the use of %PUBLIC_URL% in the tags above.
23 |       It will be replaced with the URL of the `public` folder during the build.
24 |       Only files inside the `public` folder can be referenced from the HTML.
25 | 
26 |       Unlike "/favicon.ico" or "favicon.ico", "%PUBLIC_URL%/favicon.ico" will
27 |       work correctly both with client-side routing and a non-root public URL.
28 |       Learn how to configure a non-root public URL by running `npm run build`.
29 |     -->
30 |   <title>Redis Product Search</title>
31 | </head>
32 | 
33 | <body>
34 |   <noscript>You need to enable JavaScript to run this app.</noscript>
35 |   <div id="root"></div>
36 |   <!--
37 |       This HTML file is a template.
38 |       If you open it directly in the browser, you will see an empty page.
39 | 
40 |       You can add webfonts, meta tags, or analytics to this file.
41 |       The build step will place the bundled scripts into the <body> tag.
42 | 
43 |       To begin the development, run `npm start` or `yarn start`.
44 |       To create a production bundle, use `npm run build` or `yarn build`.
45 |     -->
46 | </body>
47 | 
48 | </html>


--------------------------------------------------------------------------------
/frontend/public/manifest.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "short_name": "React App",
 3 |   "name": "Create React App Sample",
 4 |   "icons": [
 5 |     {
 6 |       "src": "favicon.ico",
 7 |       "sizes": "64x64 32x32 24x24 16x16",
 8 |       "type": "image/x-icon"
 9 |     },
10 |     {
11 |       "src": "Redis_Mark_Red.svg",
12 |       "type": "image/svg"
13 |     }
14 |   ],
15 |   "start_url": ".",
16 |   "display": "standalone",
17 |   "theme_color": "#000000",
18 |   "background_color": "#ffffff"
19 | }


--------------------------------------------------------------------------------
/frontend/public/robots.txt:
--------------------------------------------------------------------------------
1 | # https://www.robotstxt.org/robotstxt.html
2 | User-agent: *
3 | Disallow:
4 | 


--------------------------------------------------------------------------------
/frontend/public/site.webmanifest:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "Redis Vector Similarity Search Demo",
 3 |   "short_name": "Redis VSS",
 4 |   "icons": [
 5 |     {
 6 |       "src": "/android-chrome-192x192.png",
 7 |       "sizes": "192x192",
 8 |       "type": "image/png"
 9 |     },
10 |     {
11 |       "src": "/android-chrome-512x512.png",
12 |       "sizes": "512x512",
13 |       "type": "image/png"
14 |     }
15 |   ],
16 |   "theme_color": "#ffffff",
17 |   "background_color": "#ffffff",
18 |   "display": "standalone"
19 | }
20 | 


--------------------------------------------------------------------------------
/frontend/public/x-logo.svg:
--------------------------------------------------------------------------------
1 | <svg width="1200" height="1227" viewBox="0 0 1200 1227" fill="none" xmlns="http://www.w3.org/2000/svg">
2 | <path d="M714.163 519.284L1160.89 0H1055.03L667.137 450.887L357.328 0H0L468.492 681.821L0 1226.37H105.866L515.491 750.218L842.672 1226.37H1200L714.137 519.284H714.163ZM569.165 687.828L521.697 619.934L144.011 79.6944H306.615L611.412 515.685L658.88 583.579L1055.08 1150.3H892.476L569.165 687.854V687.828Z" fill="white"/>
3 | </svg>
4 | 


--------------------------------------------------------------------------------
/frontend/src/App.css:
--------------------------------------------------------------------------------
 1 | html,
 2 | body {
 3 |   font-family: 'Space Grotesk', sans-serif;
 4 | }
 5 | 
 6 | .App {
 7 |   text-align: center;
 8 | }
 9 | 
10 | .App-logo {
11 |   height: 40vmin;
12 |   pointer-events: none;
13 | }
14 | 
15 | @media (prefers-reduced-motion: no-preference) {
16 |   .App-logo {
17 |     animation: App-logo-spin infinite 20s linear;
18 |   }
19 | }
20 | 
21 | .App-header {
22 |   background-color: #282c34;
23 |   min-height: 100vh;
24 |   display: flex;
25 |   flex-direction: column;
26 |   align-items: center;
27 |   justify-content: center;
28 |   font-size: calc(10px + 2vmin);
29 |   color: white;
30 | }
31 | 
32 | .App-link {
33 |   color: #61dafb;
34 | }
35 | 
36 | @keyframes App-logo-spin {
37 |   from {
38 |     transform: rotate(0deg);
39 |   }
40 | 
41 |   to {
42 |     transform: rotate(360deg);
43 |   }
44 | }


--------------------------------------------------------------------------------
/frontend/src/App.tsx:
--------------------------------------------------------------------------------
1 | import { FC } from 'react';
2 | import { AppRoutes } from './Routes';
3 | import './App.css';
4 | 
5 | const App: FC = () => <AppRoutes />;
6 | 
7 | export default App;


--------------------------------------------------------------------------------
/frontend/src/Layout.tsx:
--------------------------------------------------------------------------------
 1 | import { FC, useState } from 'react';
 2 | 
 3 | import { Header } from './views/Header';
 4 | import { Home } from './views/Home';
 5 | import { Footer } from './views/Footer';
 6 | 
 7 | 
 8 | export const Layout: FC = () => {
 9 |     const [products, setProducts] = useState<any[]>([]);
10 |     const [gender, setGender] = useState<string>('');
11 |     const [category, setCategory] = useState<string>('');
12 |     const [total, setTotal] = useState<number>(0);
13 | 
14 |     return (
15 |         <>
16 |             <Header />
17 |             <Home
18 |                 products={products}
19 |                 setProducts={setProducts}
20 |                 gender={gender}
21 |                 category={category}
22 |                 setCategory={setCategory}
23 |                 total={total}
24 |                 setTotal={setTotal}
25 |                 setGender={setGender}
26 |             />
27 |             <Footer />
28 |         </>
29 |     );
30 | };
31 | 
32 | export default Layout;


--------------------------------------------------------------------------------
/frontend/src/Routes.tsx:
--------------------------------------------------------------------------------
 1 | import { FC } from 'react';
 2 | import { BrowserRouter as Router, Route, Routes } from 'react-router-dom';
 3 | import Layout from './Layout';
 4 | 
 5 | export const AppRoutes: FC = () => {
 6 | 
 7 |   return (
 8 |     <Router>
 9 |       <Routes>
10 |         <Route path="/" element={<Layout />} />
11 |       </Routes>
12 |     </Router>
13 |   );
14 | };
15 | 


--------------------------------------------------------------------------------
/frontend/src/api.ts:
--------------------------------------------------------------------------------
  1 | import { MASTER_URL } from './config';
  2 | 
  3 | export const fetchFromBackend = async (url: string, method: string, body?: any) => {
  4 |   const request = new Request(url, {
  5 |     method,
  6 |     body: JSON.stringify(body),
  7 |     headers: {
  8 |       'Content-Type': 'application/json',
  9 |       'Authorization': `Bearer ${localStorage.getItem("token")}`,
 10 |     },
 11 |   });
 12 | 
 13 |   const response = await fetch(request);
 14 | 
 15 |   if (response.status === 500) {
 16 |     throw new Error('Internal server error');
 17 |   }
 18 |   if (response.status === 401 || response.status === 403) {
 19 |     // redirect to home page
 20 |     window.location.href = "/";
 21 |   }
 22 | 
 23 |   const data = await response.json();
 24 | 
 25 |   if (response.status > 400 && response.status < 500) {
 26 |     if (data.detail) {
 27 |       throw data.detail;
 28 |     }
 29 |     throw data;
 30 |   }
 31 | 
 32 |   return data;
 33 | }
 34 | 
 35 | export const getProducts = async (limit = 15, skip = 0, gender = "", category = "") => {
 36 |   var params: string;
 37 |   if (gender == "" && category == "") {
 38 |     var params = `?limit=${limit}&skip=${skip}`
 39 |   } else {
 40 |     if (gender != "" && category != "") {
 41 |       var params = `?limit=${limit}&skip=${skip}&gender=${gender}&category=${category}`
 42 |     } else if (gender != "") {
 43 |       var params = `?limit=${limit}&skip=${skip}&gender=${gender}`
 44 |     } else {
 45 |       var params = `?limit=${limit}&skip=${skip}&category=${category}`
 46 |     }
 47 |   }
 48 |   return fetchFromBackend(`${MASTER_URL}${params}`, 'GET');
 49 | }
 50 | // get products from Redis through the FastAPI backend
 51 | 
 52 | export const getProductsByText = async (search_text: string, limit = 15, skip = 0) => {
 53 |   // TODO use limit and skip to paginate through search results
 54 |   let body = {
 55 |     text: search_text,
 56 |     number_of_results: limit
 57 |   }
 58 | 
 59 |   const url = MASTER_URL + 'search?limit=' + limit;
 60 |   return fetchFromBackend(url, 'POST', body);
 61 | };
 62 | 
 63 | 
 64 | export const getVisuallySimilarProducts = async (id: number,
 65 |   search = 'KNN',
 66 |   gender = "",
 67 |   category = "",
 68 |   limit = 15,
 69 |   skip = 0) => {
 70 |   let body = {
 71 |     product_id: id,
 72 |     search_type: search,
 73 |     gender: gender,
 74 |     category: category,
 75 |     number_of_results: limit
 76 |   }
 77 | 
 78 |   const url = MASTER_URL + "vectorsearch/image";
 79 |   return fetchFromBackend(url, 'POST', body);
 80 | };
 81 | 
 82 | 
 83 | export const getSemanticallySimilarProducts = async (id: number,
 84 |   search = 'KNN',
 85 |   gender = "",
 86 |   category = "",
 87 |   limit = 15,
 88 |   skip = 0) => {
 89 |   let body = {
 90 |     product_id: id,
 91 |     search_type: search,
 92 |     gender: gender,
 93 |     category: category,
 94 |     number_of_results: limit
 95 |   }
 96 | 
 97 |   const url = MASTER_URL + "vectorsearch/text";
 98 |   return fetchFromBackend(url, 'POST', body);
 99 | };
100 | 
101 | 
102 | export const getSemanticallySimilarProductsbyText = async (text: string,
103 |   gender = "",
104 |   category = "",
105 |   search = 'KNN',
106 |   limit = 15,
107 |   skip = 0) => {
108 |   let body = {
109 |     user_text: text,
110 |     search_type: search,
111 |     number_of_results: limit,
112 |     gender: gender,
113 |     category: category
114 |   }
115 | 
116 |   const url = MASTER_URL + "vectorsearch/text/user";
117 |   return fetchFromBackend(url, 'POST', body);
118 | };
119 | 


--------------------------------------------------------------------------------
/frontend/src/config/index.tsx:
--------------------------------------------------------------------------------
1 | export const BASE_URL: string = '';
2 | export const MASTER_URL: string = '/api/v1/product/';
3 | export const EMAIL = "applied.ai@redis.com"
4 | 


--------------------------------------------------------------------------------
/frontend/src/index.tsx:
--------------------------------------------------------------------------------
 1 | import 'bootstrap';
 2 | import 'bootstrap/dist/css/bootstrap.css';
 3 | import 'bootstrap/dist/js/bootstrap.js';
 4 | import React from 'react';
 5 | import ReactDOM from 'react-dom/client';
 6 | import App from './App';
 7 | import reportWebVitals from './reportWebVitals';
 8 | 
 9 | 
10 | const root = ReactDOM.createRoot(
11 |   document.getElementById('root') as HTMLElement
12 | );
13 | root.render(
14 |   <React.StrictMode>
15 |     <App />
16 |   </React.StrictMode>
17 | );
18 | 
19 | // If you want to start measuring performance in your app, pass a function
20 | // to log results (for example: reportWebVitals(console.log))
21 | // or send to an analytics endpoint. Learn more: https://bit.ly/CRA-vitals
22 | reportWebVitals();
23 | 


--------------------------------------------------------------------------------
/frontend/src/logo.svg:
--------------------------------------------------------------------------------
1 | <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 841.9 595.3"><g fill="#61DAFB"><path d="M666.3 296.5c0-32.5-40.7-63.3-103.1-82.4 14.4-63.6 8-114.2-20.2-130.4-6.5-3.8-14.1-5.6-22.4-5.6v22.3c4.6 0 8.3.9 11.4 2.6 13.6 7.8 19.5 37.5 14.9 75.7-1.1 9.4-2.9 19.3-5.1 29.4-19.6-4.8-41-8.5-63.5-10.9-13.5-18.5-27.5-35.3-41.6-50 32.6-30.3 63.2-46.9 84-46.9V78c-27.5 0-63.5 19.6-99.9 53.6-36.4-33.8-72.4-53.2-99.9-53.2v22.3c20.7 0 51.4 16.5 84 46.6-14 14.7-28 31.4-41.3 49.9-22.6 2.4-44 6.1-63.6 11-2.3-10-4-19.7-5.2-29-4.7-38.2 1.1-67.9 14.6-75.8 3-1.8 6.9-2.6 11.5-2.6V78.5c-8.4 0-16 1.8-22.6 5.6-28.1 16.2-34.4 66.7-19.9 130.1-62.2 19.2-102.7 49.9-102.7 82.3 0 32.5 40.7 63.3 103.1 82.4-14.4 63.6-8 114.2 20.2 130.4 6.5 3.8 14.1 5.6 22.5 5.6 27.5 0 63.5-19.6 99.9-53.6 36.4 33.8 72.4 53.2 99.9 53.2 8.4 0 16-1.8 22.6-5.6 28.1-16.2 34.4-66.7 19.9-130.1 62-19.1 102.5-49.9 102.5-82.3zm-130.2-66.7c-3.7 12.9-8.3 26.2-13.5 39.5-4.1-8-8.4-16-13.1-24-4.6-8-9.5-15.8-14.4-23.4 14.2 2.1 27.9 4.7 41 7.9zm-45.8 106.5c-7.8 13.5-15.8 26.3-24.1 38.2-14.9 1.3-30 2-45.2 2-15.1 0-30.2-.7-45-1.9-8.3-11.9-16.4-24.6-24.2-38-7.6-13.1-14.5-26.4-20.8-39.8 6.2-13.4 13.2-26.8 20.7-39.9 7.8-13.5 15.8-26.3 24.1-38.2 14.9-1.3 30-2 45.2-2 15.1 0 30.2.7 45 1.9 8.3 11.9 16.4 24.6 24.2 38 7.6 13.1 14.5 26.4 20.8 39.8-6.3 13.4-13.2 26.8-20.7 39.9zm32.3-13c5.4 13.4 10 26.8 13.8 39.8-13.1 3.2-26.9 5.9-41.2 8 4.9-7.7 9.8-15.6 14.4-23.7 4.6-8 8.9-16.1 13-24.1zM421.2 430c-9.3-9.6-18.6-20.3-27.8-32 9 .4 18.2.7 27.5.7 9.4 0 18.7-.2 27.8-.7-9 11.7-18.3 22.4-27.5 32zm-74.4-58.9c-14.2-2.1-27.9-4.7-41-7.9 3.7-12.9 8.3-26.2 13.5-39.5 4.1 8 8.4 16 13.1 24 4.7 8 9.5 15.8 14.4 23.4zM420.7 163c9.3 9.6 18.6 20.3 27.8 32-9-.4-18.2-.7-27.5-.7-9.4 0-18.7.2-27.8.7 9-11.7 18.3-22.4 27.5-32zm-74 58.9c-4.9 7.7-9.8 15.6-14.4 23.7-4.6 8-8.9 16-13 24-5.4-13.4-10-26.8-13.8-39.8 13.1-3.1 26.9-5.8 41.2-7.9zm-90.5 125.2c-35.4-15.1-58.3-34.9-58.3-50.6 0-15.7 22.9-35.6 58.3-50.6 8.6-3.7 18-7 27.7-10.1 5.7 19.6 13.2 40 22.5 60.9-9.2 20.8-16.6 41.1-22.2 60.6-9.9-3.1-19.3-6.5-28-10.2zM310 490c-13.6-7.8-19.5-37.5-14.9-75.7 1.1-9.4 2.9-19.3 5.1-29.4 19.6 4.8 41 8.5 63.5 10.9 13.5 18.5 27.5 35.3 41.6 50-32.6 30.3-63.2 46.9-84 46.9-4.5-.1-8.3-1-11.3-2.7zm237.2-76.2c4.7 38.2-1.1 67.9-14.6 75.8-3 1.8-6.9 2.6-11.5 2.6-20.7 0-51.4-16.5-84-46.6 14-14.7 28-31.4 41.3-49.9 22.6-2.4 44-6.1 63.6-11 2.3 10.1 4.1 19.8 5.2 29.1zm38.5-66.7c-8.6 3.7-18 7-27.7 10.1-5.7-19.6-13.2-40-22.5-60.9 9.2-20.8 16.6-41.1 22.2-60.6 9.9 3.1 19.3 6.5 28.1 10.2 35.4 15.1 58.3 34.9 58.3 50.6-.1 15.7-23 35.6-58.4 50.6zM320.8 78.4z"/><circle cx="420.9" cy="296.5" r="45.7"/><path d="M520.5 78.1z"/></g></svg>


--------------------------------------------------------------------------------
/frontend/src/mobile.ts:
--------------------------------------------------------------------------------
 1 | import {useEffect, useState} from "react";
 2 | 
 3 | const useCheckMobileScreen = () => {
 4 |     const [width, setWidth] = useState(window.innerWidth);
 5 |     const handleWindowSizeChange = () => {
 6 |             setWidth(window.innerWidth);
 7 |     }
 8 | 
 9 |     useEffect(() => {
10 |         window.addEventListener('resize', handleWindowSizeChange);
11 |         return () => {
12 |             window.removeEventListener('resize', handleWindowSizeChange);
13 |         }
14 |     }, []);
15 | 
16 |     return (width <= 1050);
17 | }
18 | 
19 | export default useCheckMobileScreen
20 | 


--------------------------------------------------------------------------------
/frontend/src/query.ts:
--------------------------------------------------------------------------------
 1 | import { getProducts } from './api';
 2 | 
 3 | interface Props {
 4 |   products: any[];
 5 |   setProducts: (state: any) => void;
 6 |   gender: string;
 7 |   setGender: (state: any) => void;
 8 |   category: string;
 9 |   setCategory: (state: any) => void;
10 |   total: number;
11 |   setTotal: (state: any) => void;
12 | }
13 | 
14 | let skip = 0;
15 | const limit = 15;
16 | 
17 | export const queryProducts = async (props: Props, gender: string, category: string) => {
18 |   try {
19 |     const result = await getProducts(limit, skip, gender, category);
20 |     props.setProducts(result.products)
21 |     props.setTotal(result.total)
22 |   } catch (err) {
23 |     console.log(err);
24 |   }
25 | };
26 | 
27 | export const queryProductsWithLimit = async (props: Props) => {
28 |   try {
29 |     skip = skip + limit;
30 |     queryProducts(props, props.gender, props.category);
31 |   } catch (err) {
32 |     console.log(err);
33 |   };
34 | };


--------------------------------------------------------------------------------
/frontend/src/radio.tsx:
--------------------------------------------------------------------------------
  1 | import * as React from 'react';
  2 | import Radio from '@mui/material/Radio';
  3 | import RadioGroup from '@mui/material/RadioGroup';
  4 | import FormControlLabel from '@mui/material/FormControlLabel';
  5 | import FormControl from '@mui/material/FormControl';
  6 | import FormLabel from '@mui/material/FormLabel';
  7 | import Popover from '@mui/material/Popover';
  8 | import Typography from '@mui/material/Typography';
  9 | import Tooltip from '@mui/material/Tooltip';
 10 | import { queryProducts } from './query';
 11 | 
 12 | interface Props {
 13 |   products: any[];
 14 |   setProducts: (state: any) => void;
 15 |   gender: string;
 16 |   setGender: (state: any) => void;
 17 |   category: string;
 18 |   setCategory: (state: any) => void;
 19 |   total: number;
 20 |   setTotal: (state: any) => void;
 21 | }
 22 | 
 23 | 
 24 | export const TagRadios = (props: Props) => {
 25 |   const [anchorEl, setAnchorEl] = React.useState<HTMLButtonElement | null>(null);
 26 | 
 27 |   const handleClick = (event: React.MouseEvent<HTMLButtonElement>) => {
 28 |     setAnchorEl(event.currentTarget);
 29 |   };
 30 | 
 31 |   const handleClose = () => {
 32 |     setAnchorEl(null);
 33 |   };
 34 | 
 35 |   const open = Boolean(anchorEl);
 36 |   const id = open ? 'simple-popover' : undefined;
 37 | 
 38 |   const setProductGender = (event: any) => {
 39 |     if (event.target.value === props.gender) {
 40 |       props.setGender("");
 41 |     } else {
 42 |       props.setGender(event.target.value);
 43 |       queryProducts(props, event.target.value, props.category)
 44 |     }
 45 |   }
 46 |   const setProductCategory = (event: any) => {
 47 |     if (event.target.value === props.category) {
 48 |       props.setCategory("");
 49 |     } else {
 50 |       props.setCategory(event.target.value);
 51 |       queryProducts(props, props.gender, event.target.value)
 52 |     }
 53 |   }
 54 |   return (
 55 |     <FormControl>
 56 |       <div>
 57 |         <Tooltip title="Select product tags to use as filters" arrow>
 58 |           <button className="btn btn-secondary m-2" onClick={(e) => handleClick(e)}>
 59 |             Apply Filters
 60 |           </button>
 61 |         </Tooltip>
 62 |       </div>
 63 |       <Popover
 64 |         id={id}
 65 |         open={open}
 66 |         anchorEl={anchorEl}
 67 |         onClose={handleClose}
 68 |         anchorOrigin={{
 69 |           vertical: 'bottom',
 70 |           horizontal: 'left',
 71 |         }}
 72 |       >
 73 |         <div style={{ paddingTop: "10px" }}>
 74 |           <Typography sx={{ p: 2 }}>
 75 |             Hybrid Search combines product filters with vector similarity search.
 76 |           </Typography>
 77 |           <div style={{ paddingLeft: "10px", display: "flex", paddingTop: "5% ", gap: "30px" }}>
 78 |             <div>
 79 |               <FormLabel className="radio-label-1" id="demo-row-radio-buttons-group-label">Gender</FormLabel>
 80 |               <RadioGroup
 81 |                 value={props.gender}
 82 |                 aria-labelledby="demo-row-radio-buttons-group-label"
 83 |                 name="row-radio-buttons-group"
 84 |               >
 85 |                 <FormControlLabel value="Women" control={<Radio size="small" onClick={setProductGender} />} label="Women" />
 86 |                 <FormControlLabel value="Men" control={<Radio size="small" onClick={setProductGender} />} label="Men" />
 87 |               </RadioGroup>
 88 |             </div>
 89 |             <div>
 90 |               <FormLabel className="radio-label-2" id="demo-row-radio-buttons-group-label">Category</FormLabel>
 91 |               <RadioGroup
 92 |                 value={props.category}
 93 |                 aria-labelledby="demo-row-radio-buttons-group-label"
 94 |                 name="row-radio-buttons-group"
 95 |               >
 96 |                 <FormControlLabel value="Apparel" control={<Radio size="small" onClick={setProductCategory} />} label="Apparel" />
 97 |                 <FormControlLabel value="Accessories" control={<Radio size="small" onClick={setProductCategory} />} label="Accessories" />
 98 |                 <FormControlLabel value="Footwear" control={<Radio size="small" onClick={setProductCategory} />} label="Footwear" />
 99 |               </RadioGroup>
100 |             </div>
101 |           </div>
102 |         </div>
103 |       </Popover>
104 |     </FormControl>
105 |   );
106 | }


--------------------------------------------------------------------------------
/frontend/src/react-app-env.d.ts:
--------------------------------------------------------------------------------
1 | /// <reference types="react-scripts" />
2 | 


--------------------------------------------------------------------------------
/frontend/src/reportWebVitals.ts:
--------------------------------------------------------------------------------
 1 | import { ReportHandler } from 'web-vitals';
 2 | 
 3 | const reportWebVitals = (onPerfEntry?: ReportHandler) => {
 4 |   if (onPerfEntry && onPerfEntry instanceof Function) {
 5 |     import('web-vitals').then(({ getCLS, getFID, getFCP, getLCP, getTTFB }) => {
 6 |       getCLS(onPerfEntry);
 7 |       getFID(onPerfEntry);
 8 |       getFCP(onPerfEntry);
 9 |       getLCP(onPerfEntry);
10 |       getTTFB(onPerfEntry);
11 |     });
12 |   }
13 | };
14 | 
15 | export default reportWebVitals;
16 | 


--------------------------------------------------------------------------------
/frontend/src/styles/Card.css:
--------------------------------------------------------------------------------
 1 | .card {
 2 |     display: flex;
 3 |     flex-direction: column;
 4 |     justify-content: space-around;
 5 |     width: 26rem;
 6 |     margin: 1rem 0;
 7 |     padding: 1rem;
 8 |     border: 1px solid black;
 9 |     border-radius: 0.5rem;
10 | }
11 | 
12 | .card-top {
13 |     padding-top: 1rem;
14 | }
15 | 
16 | .card-btns-space {
17 |     width: 0.5rem;
18 |     display: inline-block;
19 | }
20 | 
21 | .card-btn {
22 |     background: #f0f0f0;
23 |     padding: 0.5rem;
24 |     border: none;
25 |     font: inherit;
26 |     border-radius: 0.25rem;
27 |     text-decoration: none;
28 | }


--------------------------------------------------------------------------------
/frontend/src/styles/Footer.css:
--------------------------------------------------------------------------------
1 | .footer {
2 |     background: #f0f0f0;
3 |     padding: 2rem;
4 |     text-align: center;
5 | }


--------------------------------------------------------------------------------
/frontend/src/styles/Header.css:
--------------------------------------------------------------------------------
 1 | .header {
 2 |     background: #091a23;
 3 |     display: flex;
 4 |     justify-content: space-between;
 5 |     align-items: center;
 6 |     padding: 2.25rem;
 7 | }
 8 | 
 9 | .header-logo {
10 |     height: 2rem;
11 | }
12 | 
13 | .header-icon-link {
14 |     height: 1.5rem;
15 |     width: 1.5rem;
16 |     margin-right: 1rem;
17 | }
18 | 
19 | .header-cta {
20 |     background: #dcff1e;
21 |     padding: 10px;
22 |     border-radius: 2px;
23 |     color: black;
24 |     text-decoration: none;
25 | }
26 | 
27 | .cta-nav {
28 |     display: flex;
29 |     align-items: center;
30 | }


--------------------------------------------------------------------------------
/frontend/src/styles/Home.css:
--------------------------------------------------------------------------------
 1 | .home-padding {
 2 |     padding: 0 25px;
 3 | }
 4 | 
 5 | .home-heading {
 6 |     text-align: center;
 7 | }
 8 | 
 9 | .home-options {
10 |     padding: 2rem 5%;
11 | }
12 | 
13 | .home-filters {
14 |     padding: 1rem 0 3rem 0;
15 | }
16 | 
17 | .home-search-results {
18 |     padding: 0 0 0 5%;
19 | }
20 | 
21 | .home-cards {
22 |     display: flex;
23 |     flex-wrap: wrap;
24 |     justify-content: space-between;
25 |     padding: 0 5%;
26 | }
27 | 
28 | .home-loader {
29 |     display: flex;
30 |     padding: 2rem 5%;
31 | }


--------------------------------------------------------------------------------
/frontend/src/views/Card.tsx:
--------------------------------------------------------------------------------
  1 | /* eslint-disable jsx-a11y/anchor-is-valid */
  2 | import { getVisuallySimilarProducts, getSemanticallySimilarProducts } from "../api"
  3 | import useCheckMobileScreen from "../mobile"
  4 | import Chip from '@mui/material/Chip';
  5 | import Tooltip from '@mui/material/Tooltip';
  6 | 
  7 | interface Props {
  8 |   productId: number;
  9 |   numProducts: number;
 10 |   imageUrl: string;
 11 |   name: string;
 12 |   gender: string;
 13 |   category: string;
 14 |   similarityScore: number;
 15 |   setProducts: (state: any) => void;
 16 |   setTotal: (state: any) => void;
 17 | }
 18 | 
 19 | 
 20 | export const Card = (props: Props) => {
 21 | 
 22 |   const isMobile = useCheckMobileScreen();
 23 | 
 24 |   const queryVisuallySimilarProducts = async () => {
 25 |     try {
 26 |       const res = await getVisuallySimilarProducts(
 27 |         props.productId,
 28 |         "KNN",
 29 |         props.gender,
 30 |         props.category,
 31 |         props.numProducts);
 32 |       props.setProducts(res.products)
 33 |       props.setTotal(res.total)
 34 |     } catch (err) {
 35 |       console.log(String(err));
 36 |     }
 37 |   };
 38 | 
 39 |   const querySemanticallySimilarProducts = async () => {
 40 |     try {
 41 |       const res = await getSemanticallySimilarProducts(
 42 |         props.productId,
 43 |         "KNN",
 44 |         props.gender,
 45 |         props.category,
 46 |         props.numProducts);
 47 |       props.setProducts(res.products)
 48 |       props.setTotal(res.total)
 49 |     } catch (err) {
 50 |       console.log(String(err));
 51 |     }
 52 |   };
 53 | 
 54 | 
 55 |   const getCardSize = () => {
 56 |     if (isMobile) {
 57 |       return '50%';
 58 |     }
 59 |     else {
 60 |       return '20%';
 61 |     }
 62 |   }
 63 | 
 64 |   return (
 65 |     <div className="col-md-2" style={{ width: getCardSize() }}>
 66 |       <div className="card mb-2 box-shadow" style={{ alignContent: 'center' }}>
 67 |         <img
 68 |           className="card-img-top"
 69 |           style={{ height: '60%', width: '60%', alignSelf: 'center' }}
 70 |           src={props.imageUrl}
 71 |           alt={props.name}
 72 |         />
 73 |         <div className="card-body">
 74 |           <p className="card-text">
 75 |             {props.name}
 76 |           </p>
 77 |           <div style={{ alignContent: "left" }}>
 78 |             <b>View Similar:</b>
 79 |           </div>
 80 |           <div className="d-flex justify-content-between align-items-center">
 81 |             <div className="btn-group">
 82 |               <Tooltip title="Search for similar products by text" arrow>
 83 |                 <button
 84 |                   type="button"
 85 |                   className="btn btn-sm btn-outline-secondary"
 86 |                   onClick={() => querySemanticallySimilarProducts()}
 87 |                   style={{ fontSize: 12 }}
 88 |                 >
 89 |                   By Text
 90 |                 </button>
 91 |               </Tooltip>
 92 |               <Tooltip title="Search for similar products by image" arrow>
 93 |                 <button
 94 |                   type="button"
 95 |                   className="btn btn-sm btn-outline-secondary"
 96 |                   onClick={() => queryVisuallySimilarProducts()}
 97 |                   style={{ fontSize: 12 }}
 98 |                 >
 99 |                   By Image
100 |                 </button>
101 |               </Tooltip>
102 |             </div>
103 |             <div className="btn-group">
104 |               {props.similarityScore ? (
105 |                 <Tooltip title="Similarity Score" arrow>
106 |                   <Chip
107 |                     style={{ margin: "auto", fontSize: 12 }}
108 |                     label={props.similarityScore.toFixed(2)}
109 |                     color='primary'
110 |                   />
111 |                 </Tooltip>
112 |               ) : (
113 |                 <></>
114 |               )}
115 |             </div>
116 |           </div>
117 |         </div>
118 |       </div>
119 |     </div>
120 |   );
121 | };
122 | 
123 | 


--------------------------------------------------------------------------------
/frontend/src/views/Footer.tsx:
--------------------------------------------------------------------------------
 1 | /* eslint-disable jsx-a11y/anchor-is-valid */
 2 | import { EMAIL } from '../config'
 3 | import '../styles/Footer.css';
 4 | 
 5 | export const Footer = () => {
 6 |     return (
 7 |         <footer>
 8 |             <div className='footer'>
 9 |                 <div>
10 |                     All Redis software used in this demo is licensed according to the  <a href="https://redis.io/docs/stack/license/" > Redis Stack License. </a>
11 |                 </div>
12 |                 <div>
13 |                     <a href="https://github.com/redis-developer/redis-ai-resources">
14 |                         Redis AI Resources
15 |                     </a>
16 | 
17 |                     <span> | </span>
18 | 
19 |                     <a href='https://github.com/redis/redis-vl-python'>
20 |                         RedisVL
21 |                     </a>
22 | 
23 |                     <span> | </span>
24 | 
25 |                     <a href='https://redis.io/docs/latest/develop/get-started/vector-database/'>
26 |                         Vector Search Docs
27 |                     </a>
28 |                 </div>
29 |                 <div>contact: {EMAIL}</div>
30 |             </div>
31 |         </footer>
32 |     );
33 | };


--------------------------------------------------------------------------------
/frontend/src/views/Header.tsx:
--------------------------------------------------------------------------------
 1 | import { BASE_URL, EMAIL } from "../config";
 2 | import Tooltip from '@mui/material/Tooltip';
 3 | import '../styles/Header.css';
 4 | 
 5 | /* eslint-disable jsx-a11y/anchor-is-valid */
 6 | export const Header = () => {
 7 |   return (
 8 |     <header>
 9 |       <div className="header">
10 |         <img
11 |           src={BASE_URL + `/data/redis-logo.png`}
12 |           alt="Redis Logo"
13 |           className="header-logo">
14 |         </img>
15 |         <div className="cta-nav">
16 |           <a href='https://x.com/Redisinc'>
17 |             <Tooltip title="Redis twitter" arrow>
18 |               <img
19 |                 alt="x logo"
20 |                 src={"/x-logo.svg"}
21 |                 className="header-icon-link"
22 |               ></img>
23 |             </Tooltip>
24 |           </a>
25 |           <a href='https://github.com/redis-developer/redis-product-search'>
26 |             <Tooltip title="Project source" arrow>
27 |               <img
28 |                 alt="Github logo"
29 |                 src="/github-mark-white.svg"
30 |                 className="header-icon-link"
31 |               ></img>
32 |             </Tooltip>
33 |           </a>
34 |           <Tooltip title={`${EMAIL}`} arrow>
35 |             <a className="header-cta" href={`mailto:${EMAIL}`}>
36 |               Talk with us!
37 |             </a>
38 |           </Tooltip>
39 |         </div>
40 |       </div>
41 |     </header>
42 |   );
43 | };
44 | 


--------------------------------------------------------------------------------
/frontend/src/views/Home.tsx:
--------------------------------------------------------------------------------
  1 | import { useEffect } from 'react';
  2 | import { Card } from "./Card"
  3 | import { TagRadios } from '../radio';
  4 | import Chip from '@mui/material/Chip';
  5 | import Tooltip from '@mui/material/Tooltip';
  6 | import { queryProducts, queryProductsWithLimit } from '../query';
  7 | 
  8 | /* eslint-disable jsx-a11y/anchor-is-valid */
  9 | /* eslint-disable @typescript-eslint/no-unused-vars */
 10 | 
 11 | interface Props {
 12 |   products: any[];
 13 |   setProducts: (state: any) => void;
 14 |   gender: string;
 15 |   setGender: (state: any) => void;
 16 |   category: string;
 17 |   setCategory: (state: any) => void;
 18 |   total: number;
 19 |   setTotal: (state: any) => void;
 20 | }
 21 | 
 22 | export const Home = (props: Props) => {
 23 |   // Execute this one when the component loads up
 24 |   useEffect(() => {
 25 |     // clear filters
 26 |     props.setGender("");
 27 |     props.setCategory("");
 28 |     queryProductsWithLimit(props);
 29 |   }, []);
 30 | 
 31 |   return (
 32 |     <>
 33 |       <main role="main">
 34 |         <section className="jumbotron text-center mb-0 bg-white" style={{ paddingTop: '40px' }}>
 35 |           <div className="container">
 36 |             <h1 className="jumbotron-heading">Fashion Product Finder</h1>
 37 |             <p className="lead text-muted">
 38 |               This demo uses the built in Vector Search capabilities of Redis Enterprise
 39 |               to show how unstructured data, such as images and text, can be used to create powerful
 40 |               search engines.
 41 |             </p>
 42 |             <div>
 43 |               <div className="btn-group">
 44 |                 {props.products && props.products.length > 0 ? (
 45 |                   <div>
 46 |                     <TagRadios
 47 |                       gender={props.gender}
 48 |                       category={props.category}
 49 |                       products={props.products}
 50 |                       total={props.total}
 51 |                       setGender={props.setGender}
 52 |                       setCategory={props.setCategory}
 53 |                       setProducts={props.setProducts}
 54 |                       setTotal={props.setTotal}
 55 |                     />
 56 |                   </div>
 57 |                 ) : (
 58 |                   <></>
 59 |                 )}
 60 |                 <Tooltip title="Fetch more products from Redis" arrow>
 61 |                   <a className="btn btn-primary m-2" onClick={() => queryProductsWithLimit(props)}>
 62 |                     Load More Products
 63 |                   </a>
 64 |                 </Tooltip>
 65 |               </div>
 66 |             </div>
 67 |           </div>
 68 |         </section>
 69 |         <div className="album py-5 bg-light">
 70 |           <div className="container">
 71 |             <p style={{ fontSize: 15 }}>
 72 |               <Tooltip title="Filtered product count" arrow>
 73 |                 <em>{props.total} searchable products</em>
 74 |               </Tooltip>
 75 |             </p>
 76 |             <div>
 77 |               {props.category !== "" ? (
 78 |                 <Chip
 79 |                   style={{ margin: "5px 5px 25px 5px" }}
 80 |                   label={`Category: ${props.category}`}
 81 |                   variant='outlined'
 82 |                   clickable
 83 |                   color='primary'
 84 |                   onDelete={() => { props.setCategory(""); queryProducts(props, props.gender, "") }}
 85 |                   disabled={props.category === ''}
 86 |                 />
 87 |               ) : (
 88 |                 <></>
 89 |               )}
 90 |               {props.gender !== "" ? (
 91 |                 <Chip
 92 |                   style={{ margin: "5px 5px 25px 5px" }}
 93 |                   label={`Gender: ${props.gender}`}
 94 |                   variant='outlined'
 95 |                   clickable
 96 |                   color='primary'
 97 |                   onDelete={() => { props.setGender(""); queryProducts(props, "", props.category) }}
 98 |                   disabled={props.gender === ''}
 99 |                 />
100 |               ) : (
101 |                 <></>
102 |               )}
103 |             </div>
104 |             {props.products && (
105 |               <div className="row">
106 | 
107 |                 {props.products.map((product) => (
108 |                   <Card
109 |                     key={product.product_id}
110 |                     imageUrl={product.img_url}
111 |                     name={product.name}
112 |                     productId={product.product_id}
113 |                     numProducts={15}
114 |                     similarityScore={product.similarity_score}
115 |                     gender={props.gender}
116 |                     category={props.category}
117 |                     setProducts={props.setProducts}
118 |                     setTotal={props.setTotal}
119 |                   />
120 | 
121 |                 ))}
122 |               </div>
123 |             )}
124 |           </div>
125 |         </div>
126 |       </main>
127 |     </>
128 |   );
129 | };


--------------------------------------------------------------------------------
/frontend/src/views/index.ts:
--------------------------------------------------------------------------------
1 | export * from './Home';
2 | export * from './Header';
3 | export * from './Footer';
4 | 


--------------------------------------------------------------------------------
/frontend/tsconfig.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "compilerOptions": {
 3 |     "target": "es5",
 4 |     "lib": [
 5 |       "dom",
 6 |       "dom.iterable",
 7 |       "esnext"
 8 |     ],
 9 |     "allowJs": true,
10 |     "skipLibCheck": true,
11 |     "esModuleInterop": true,
12 |     "allowSyntheticDefaultImports": true,
13 |     "strict": true,
14 |     "forceConsistentCasingInFileNames": true,
15 |     "noFallthroughCasesInSwitch": true,
16 |     "module": "esnext",
17 |     "moduleResolution": "node",
18 |     "resolveJsonModule": true,
19 |     "isolatedModules": true,
20 |     "noEmit": true,
21 |     "jsx": "react-jsx"
22 |   },
23 |   "include": [
24 |     "src"
25 |   ]
26 | }
27 | 


--------------------------------------------------------------------------------