Update card include and add ML demo (#10689)

* Update card include to show both relative and absolute links and add ML demo

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>

* Apply suggestions from code review

Signed-off-by: Nathan Bower <nbower@amazon.com>

---------

Signed-off-by: Fanit Kolchina <kolchfa@amazon.com>
Signed-off-by: Nathan Bower <nbower@amazon.com>
Co-authored-by: Nathan Bower <nbower@amazon.com>
(cherry picked from commit 2a2095f)
Signed-off-by: github-actions[bot] <github-actions[bot]@users.noreply.github.com>

Author: github-actions[bot]

_includes/cards.html

@@ -2,23 +2,28 @@
     <div class="card-container">
       {% for card in include.cards %}
         <div class="card">
-          <a href="{{ site.url }}{{ site.baseurl }}{{ card.link }}" class="card-link"></a>
-          <p class="heading">{{ card.heading }}</p>
+          {% if card.link contains 'http://' or card.link contains 'https://' %}
+            <a href="{{ card.link }}" class="card-link"></a>
+          {% else %}
+            <a href="{{ site.url }}{{ site.baseurl }}{{ card.link }}" class="card-link"></a>
+          {% endif %}
+          
+          <p class="heading">{{ card.heading }}</p>        
           {% if card.description %}
             <p class="description">{{ card.description }}</p>
           {% endif %}
           {% if card.list %}
             <ul>
-            {% for item in card.list %}
-              <li class="description">{{ item }}</li>
-            {% endfor %}  
+              {% for item in card.list %}
+                <li class="description">{{ item }}</li>
+              {% endfor %}  
             </ul>
-          {% endif %}
+          {% endif %}          
           {% if include.documentation_link %}
             <p class="last-link">Documentation &#x2192;</p>
           {% endif %}
         </div>
       {% endfor %}
     </div>
-  </div>
+</div>
 

_ml-commons-plugin/index.md

@@ -8,6 +8,10 @@ nav_exclude: true
 permalink: /ml-commons-plugin/
 redirect_from: 
   - /ml-commons-plugin/index/
+demo_cards:
+  - heading: "Explore AI search and RAG demos"
+    description: "Try interactive Hugging Face demos showcasing AI search, multimodal RAG, and agentic RAG"
+    link: "https://huggingface.co/spaces/opensearch-project/OpenSearch-AI"
 models:
   - heading: "Deploy local models to your cluster"
     link: "/ml-commons-plugin/using-ml-models/"
@@ -47,6 +51,10 @@ algorithms:
 
 OpenSearch offers two distinct approaches to machine learning (ML): using ML models for tasks like semantic search and text generation, and running statistical algorithms for data analysis. Choose the approach that best fits your use case.
 
+## Interactive demos
+
+{% include cards.html cards=page.demo_cards %}
+
 ## ML models for search and AI/ML-powered applications
 
 OpenSearch supports ML models that you can use to enhance search relevance through semantic understanding. You can either deploy models directly within your OpenSearch cluster or connect to models hosted on external platforms. These models can transform text into vector embeddings, enabling semantic search capabilities, or provide advanced features like text generation and question answering. For more information, see [Integrating ML models]({{site.url}}{{site.baseurl}}/ml-commons-plugin/integrating-ml-models/).

_vector-search/index.md

@@ -16,6 +16,10 @@ tutorial_cards:
   - heading: "Generate embeddings automatically"
     description: "Streamline your vector search using OpenSearch's built-in embedding generation"
     link: "/vector-search/getting-started/auto-generated-embeddings/"
+demo_cards:
+  - heading: "Explore AI search and RAG demos"
+    description: "Try interactive Hugging Face demos showcasing AI search, multimodal RAG, and agentic RAG"
+    link: "https://huggingface.co/spaces/opensearch-project/OpenSearch-AI"
 more_cards:
   - heading: "AI search"
     description: "Discover AI search, from <b>semantic</b>, <b>hybrid</b>, and <b>multimodal</b> search to <b>RAG</b>"
@@ -1131,6 +1135,10 @@ DELETE /neural_search_pqa
 
 </details>
 
+## Interactive demos
+
+{% include cards.html cards=page.demo_cards %}
+
 ## Getting started
 
 You can bring your own vectors or let OpenSearch generate embeddings automatically from your data. See [Preparing vectors]({{site.url}}{{site.baseurl}}/vector-search/getting-started/vector-search-options/).