Merge pull request #634 from wjohnsto/master

Adjusting video QA tutorial URL and adding images and data snippets

Author: PrasanKumar93

docs/howtos/solutions/index-solutions.mdx

@@ -192,6 +192,14 @@ Learn how to easily build, test and deploy code for common microservice and cach
   />
 </div>
 
+<div class="col">
+  <RedisCard
+    title="AI Video Q&A with Redis and Langchain"
+    description="Building an AI-Powered Video Q&A Application with Redis and LangChain (OpenAI and Gemini)"
+    page="/howtos/solutions/vector/ai-qa-videos-langchain-redis-openai-google"
+  />
+</div>
+
 </div>
 
 ## Triggers and Functions

docs/howtos/solutions/triggers-and-functions/getting-started-tf/index-triggers-and-functions.mdx

@@ -444,13 +444,6 @@ redis.registerStreamTrigger(
   'calculateStats', // trigger name
   'TRANSACTION_STREAM', // Detects new data added to the stream
   function (client, data) {
-    // data = JSON.stringify(
-    //     data,
-    //     (key, value) => (typeof value === "bigint" ? value.toString() : value) //id conversion
-    // );
-
-    // data = JSON.parse(data);
-
     var streamEntry = {};
     for (let i = 0; i < data.record?.length; i++) {
       streamEntry[data.record[i][0]] = data.record[i][1];
@@ -528,6 +521,13 @@ redis.registerStreamTrigger(
 );
 ```
 
+In above `calculateStats` function, we are listening to `TRANSACTION_STREAM` and updating different sales statistics like
+
+- `statsTotalPurchaseAmount` variable stores total purchase amount
+- `statsProductPurchaseQtySet` is a sorted set which tracks trending products based on highest purchase quantity
+- `statsCategoryPurchaseAmountSet` is a sorted set which tracks category wise purchase interest
+- `statsBrandPurchaseAmountSet` is a sorted set which tracks largest brand purchases
+
 ### Adding the function to Redis
 
 We can add functions to Redis using various methods:
@@ -609,7 +609,7 @@ A sample command to add details to the stream:
 "XADD" "TRANSACTION_STREAM" "*" "action" "PAYMENT_PROCESSED" "userId" "USR_f0f00a86-7131"  "orderDetails" "{'orderId':'bc438c5d-117e-41bd-97fa-943c03be0b1c','products':[],'paymentId':'clrrl8yp50007pf851m7f92u2'}" "transactionPipeline" "['PAYMENT_PROCESSED']"
 ```
 
-The `calculateStats` function listens to `TRANSACTION_STREAM` stream and updates the sales statistics accordingly.
+The `calculateStats` function listens to `TRANSACTION_STREAM` stream for `PAYMENT_PROCESSED` action and updates the sales statistics accordingly.
 
 Check different stats variable values in RedisInsight which were used in trigger function `calculateStats`.
 ![stream-trigger-test-ri](./images/stream-trigger-test-ri.png)

docs/howtos/solutions/vector/video-qa/images/ask-question.png

@@ -2,7 +2,7 @@
 id: index-video-qa
 title: Building an AI-Powered Video Q&A Application with Redis and LangChain
 sidebar_label: Building an AI-Powered Video Q&A Application with Redis and LangChain
-slug: /howtos/solutions/vector/building-an-ai-powered-video-qa-application-with-redis-and-langchain
+slug: /howtos/solutions/vector/ai-qa-videos-langchain-redis-openai-google
 authors: [prasan, will]
 ---
 
@@ -45,11 +45,89 @@ Our application leverages these technologies to create a unique Q&A platform bas
 
 Here's how our application uses AI and semantic vector search to answer user questions based on video content:
 
-1. **Uploading videos**: Users can upload YouTube videos either via links (e.g. `https://www.youtube.com/watch?v=LaiQFZ5bXaM`) or video IDs (e.g. `LaiQFZ5bXaM`). The application processes these inputs to retrieve necessary video information.
-1. **Video processing and AI interaction**: Using the [Youtube Data API](https://developers.google.com/youtube/v3), the application obtains video `titles`, `descriptions`, and `thumbnails`. It also uses [SearchAPI.io](https://searchapi.io) to retrieve video transcripts. These transcripts are then passed to a large language model (LLM) - either Google Gemini or OpenAI's ChatGPT - for summarization and sample question generation. The LLM also generates vector embeddings for these summaries.
-1. **Data storage with Redis**: All generated data, including video summaries, potential questions, and vector embeddings, are stored in Redis. The app utilizes Redis's diverse data types for efficient data handling, caching, and quick retrieval.
-1. **Search and answer retrieval**: The frontend, built with Next.js, allows users to ask questions. The application then searches the Redis database using semantic vector similarity to find relevant video content. It further uses the LLM to formulate answers, prioritizing information from video transcripts.
-1. **Presentation of results**: The app displays the most relevant videos along with the AI-generated answers, offering a comprehensive and interactive user experience. It also displays cached results from previous queries using semantic vector caching for faster response times.
+1. **Uploading videos**: Users can upload YouTube videos either via links (e.g. `https://www.youtube.com/watch?v=LaiQFZ5bXaM`) or video IDs (e.g. `LaiQFZ5bXaM`). The application processes these inputs to retrieve necessary video information. For the purposes of this tutorial, the app is pre-seeded with a collection of videos from the [Redis YouTube channel](https://www.youtube.com/@Redisinc).
+
+![Upload videos screenshot](./images/upload-videos.png).
+
+2. **Video processing and AI interaction**: Using the [Youtube Data API](https://developers.google.com/youtube/v3), the application obtains video `titles`, `descriptions`, and `thumbnails`. It also uses [SearchAPI.io](https://searchapi.io) to retrieve video transcripts. These transcripts are then passed to a large language model (LLM) - either Google Gemini or OpenAI's ChatGPT - for summarization and sample question generation. The LLM also generates vector embeddings for these summaries.
+
+An example summary and sample questions generated by the LLM are shown below:
+
+```text title="https://www.youtube.com/watch?v=LaiQFZ5bXaM"
+Summary:
+The video provides a walkthrough of building a real-time stock tracking application
+using Redis Stack, demonstrating its capability to handle multiple data models and
+act as a message broker in a single integrated database. The application maintains
+a watch list of stock symbols, along with real-time trading information and a chart
+updated with live data from the Alpaca API. The presenter uses Redis Stack features
+such as sets, JSON documents, time series, Pub/Sub, and Top-K filter to store and
+manage different types of data. An architecture diagram is provided, explaining the
+interconnection between the front end, API service, and streaming service within
+the application. Code snippets highlight key aspects of the API and streaming
+service written in Python, highlighting the use of Redis Bloom, Redis JSON, Redis
+Time Series, and Redis Search for managing data. The video concludes with a
+demonstration of how data structures are visualized and managed in RedisInsight,
+emphasizing how Redis Stack can simplify the building of a complex real-time
+application by replacing multiple traditional technologies with one solution.
+
+Example Questions and Answers:
+
+Q1: What is Redis Stack and what role does it play in the application?
+A1: Redis Stack is an extension to Redis that adds additional modules, turning it
+into a multi-model database. In the application, it is used for storing various
+types of data and managing real-time communication between microservices.
+
+Q2: How is the stock watch list stored and managed within the application?
+A2: The watch list is stored as a Redis set which helps automatically prevent
+duplicate stock symbols. In addition, further information about each stock is
+stored in JSON documents within Redis Stack.
+
+Q3: What type of data does the application store using time series capabilities of
+Redis Stack?
+A3: The application uses time series data to store and retrieve the price movements
+of the stocks, making it easy to query over a date range and to visualize chart
+data with time on the x-axis.
+
+Q4: Can you explain the use of the Top-K filter in the application?
+A4: The Top-K filter is a feature of Redis Bloom that is used to maintain a
+leaderboard of the most frequently traded stocks on the watch list, updating every
+minute with the number of trades that happen.
+
+Q5: What methods are used to update the front end with real-time information in
+the application?
+A5: WebSockets are used to receive real-time updates for trending stocks, trades,
+and stock bars from the API service, which, in turn, receives the information from
+Redis Pub/Sub messages generated by the streaming service.
+
+Q6: How does the application sync the watch list with the streaming service?
+A6: The application listens to the watch list key space in Redis for updates. When
+a stock is added or removed from the watch list on the front end, the API
+communicates this to Redis, and the streaming service then subscribes or
+unsubscribes to updates from the Alpaca API for that stock.
+
+Q7: What frontend technologies are mentioned for building the UI of the application?
+A7: The UI service for the front end is built using Tailwind CSS, Chart.js, and
+Next.js, which is a typical tech stack for creating a modern web application.
+
+Q8: How does Redis Insight help in managing the application data?
+A8: Redis Insight provides a visual interface to see and manage the data structures
+used in Redis Stack, including JSON documents, sets, and time series data related
+to the stock information in the application.
+```
+
+3. **Data storage with Redis**: All generated data, including video summaries, potential questions, and vector embeddings, are stored in Redis. The app utilizes Redis's diverse data types for efficient data handling, caching, and quick retrieval.
+
+![RedisInsight keys](./images/redisinsight-keys.png)
+
+4. **Search and answer retrieval**: The frontend, built with Next.js, allows users to ask questions. The application then searches the Redis database using semantic vector similarity to find relevant video content. It further uses the LLM to formulate answers, prioritizing information from video transcripts.
+
+
+![Asking a question](./images/ask-question.png)
+
+5. **Presentation of results**: The app displays the most relevant videos along with the AI-generated answers, offering a comprehensive and interactive user experience. It also displays cached results from previous queries using semantic vector caching for faster response times.
+
+
+![Existing answers](./images/video-qa-existing-answer.png)
 
 ## Setting Up the Environment
 

docs/howtos/solutions/vector/video-qa/images/redisinsight-keys.png

@@ -398,6 +398,7 @@ module.exports = {
                 'howtos/solutions/vector/gen-ai-chatbot/index-solutions-gen-ai-chatbot',
                 'howtos/solutions/vector/semantic-text-search/index-semantic-text-search',
                 'howtos/solutions/vector/image-summary-search/index-image-summary-search',
+                'howtos/solutions/vector/video-qa/index-video-qa'
               ],
             },
             {