Merge pull request #756 from Avaiga/chatbot_tutorial

Adds an LLM ChatBot tutorial and demo

docs/knowledge_base/demos/chatbot.md

@@ -0,0 +1,16 @@
+This demo showcases Taipy's ability to enable end-users to run inference using LLMs. Here, we
+use GPT-3 to create a chatbot and display the conversation in an interactive chat interface.
+
+[Try it live](https://demo-llm-chat.taipy.cloud/){: .tp-btn target='blank' }
+[Get it on GitHub](https://github.com/Avaiga/demo-llm-chat){: .tp-btn .tp-btn--accent target='blank' }
+
+# Understanding the Application
+This application allows the user to chat with GPT-3 by sending 
+its input to the OpenAI API and returning the conversation in 
+a chat window. The user is also able to come back to a previous 
+conversation and continue it.
+
+![ChatBot](images/chatbot_meds_conv.png){width=100%}
+
+A tutorial on how to write this application and similar 
+LLM inference applications is available [here](../tutorials/chatbot/index.md).

docs/knowledge_base/demos/index.md

@@ -228,4 +228,64 @@ Let's explore demos of applications made with Taipy.
       </div> 
     </a>
   </li>
+
+
+  <li class="tp-col-12 tp-col-md-6 d-flex" data-keywords="gui ai scenario datanode dag configuration">
+    <a class="tp-content-card tp-content-card--horizontal tp-content-card--small" href="drift_detection">
+      <header class="tp-content-card-header">
+        <img class="tp-content-card-image" src="images/drift-detection-pipeline.png">
+      </header>
+      <div class="tp-content-card-body">
+        <h4>Drift Detection</h4>
+        <span class="tp-tag">Front-end | Back-end</span>
+        <p> Showcases the ability to select inputs and execute and visualize outputs of data
+            pipelines in a Taipy application by using the example of detecting drift on a
+            dataset.
+        </p>
+      </div> 
+    </a>
+  </li>
+
+  <li class="tp-col-12 tp-col-md-6 d-flex" data-keywords="gui dashboard vizelement layout chart">
+    <a class="tp-content-card tp-content-card--horizontal tp-content-card--small" href="pollution_sensors">
+      <header class="tp-content-card-header">
+        <img class="tp-content-card-image" src="images/pollution_dashboard.png">
+      </header>
+      <div class="tp-content-card-body">
+        <h4>Realtime Pollution Dashboard</h4>
+        <span class="tp-tag">Front-end | Back-end</span>
+        <p> Displays real-time pollution data from sensors around a factory. The data is streamed
+            from another server and displayed in a dashboard.
+        </p>
+      </div> 
+    </a>
+  </li>
+
+  <li class="tp-col-12 tp-col-md-6 d-flex" data-keywords="gui vizelement ai">
+    <a class="tp-content-card tp-content-card--horizontal tp-content-card--small" href="pollution_sensors">
+      <header class="tp-content-card-header">
+        <img class="tp-content-card-image" src="images/chatbot_roundconv.png">
+      </header>
+      <div class="tp-content-card-body">
+        <h4>LLM ChatBot</h4>
+        <span class="tp-tag">Front-end</span>
+        <p> A chatbot that uses OpenAI's API with GPT-3. Can be used as a template for implementing apps that use LLM inference.
+        </p>
+      </div> 
+    </a>
+  </li>
+
+  <li class="tp-col-12 tp-col-md-6 d-flex" data-keywords="gui dashboard vizelement layout chart ai multi-page classification">
+    <a class="tp-content-card tp-content-card--horizontal tp-content-card--small" href="pollution_sensors">
+      <header class="tp-content-card-header">
+        <img class="tp-content-card-image" src="images/fraud_threshold.png">
+      </header>
+      <div class="tp-content-card-body">
+        <h4>Fraud Detection</h4>
+        <span class="tp-tag">Front-end</span>
+        <p> A Taipy Application that analyzes credit card transactions to detect fraud.
+        </p>
+      </div> 
+    </a>
+  </li>
 </ul>

docs/knowledge_base/index.md

@@ -200,6 +200,19 @@ hide:
       </div> 
     </a>
   </li>
+  <li data-keywords="gui vizelement markdown">
+    <a class="tp-content-card tp-content-card--horizontal tp-content-card--small" href="tutorials/chatbot/">
+      <header class="tp-content-card-header">
+        <img class="tp-content-card-icon" src="tutorials/images/icon-code.svg">
+      </header>
+      <div class="tp-content-card-body">
+        <h4>LLM ChatBot</h4>
+        <p>
+          Create a chatbot interface using Taipy and an LLM API. 
+        </p>
+      </div> 
+    </a>
+  </li>
   <li data-keywords="gui markdown vizelement">
     <a class="tp-content-card tp-content-card--horizontal tp-content-card--small" href="tutorials/markdown_syntax">
       <header class="tp-content-card-header">
@@ -464,6 +477,60 @@ hide:
       </div> 
     </a>
   </li>
+
+  <li data-keywords="gui ai scenario datanode dag configuration">
+    <a class="tp-content-card tp-content-card--horizontal tp-content-card--small" href="demos/drift_detection/">
+      <header class="tp-content-card-header">
+        <img class="tp-content-card-icon" src="demos/images/icon-code.svg">
+      </header>
+      <div class="tp-content-card-body">
+        <h4> Drift Detection </h4>
+        <p> Showcases the ability to select inputs and execute and visualize outputs of data
+            pipelines in a Taipy application by using the example of detecting drift on a
+            dataset.
+        </p>
+      </div> 
+    </a>
+  </li>
+  <li data-keywords="gui dashboard vizelement layout chart">
+    <a class="tp-content-card tp-content-card--horizontal tp-content-card--small" href="demos/pollution_sensors/">
+      <header class="tp-content-card-header">
+        <img class="tp-content-card-icon" src="demos/images/icon-code.svg">
+      </header>
+      <div class="tp-content-card-body">
+        <h4> Realtime Pollution Dashboard </h4>
+        <p> Displays real-time pollution data from sensors around a factory. The data is streamed
+            from another server and displayed in a dashboard.
+        </p>
+      </div> 
+    </a>
+  </li>
+
+  <li data-keywords="gui vizelement ai">
+    <a class="tp-content-card tp-content-card--horizontal tp-content-card--small" href="demos/chatbot/">
+      <header class="tp-content-card-header">
+        <img class="tp-content-card-icon" src="demos/images/icon-code.svg">
+      </header>
+      <div class="tp-content-card-body">
+        <h4> LLM ChatBot </h4>
+        <p> A chatbot that uses OpenAI's API with GPT-3. Can be used as a template for implementing apps that use LLM inference.
+        </p>
+      </div> 
+    </a>
+  </li>
+
+  <li data-keywords="gui dashboard vizelement layout chart ai multi-page classification">
+    <a class="tp-content-card tp-content-card--horizontal tp-content-card--small" href="demos/fraud_detection/">
+      <header class="tp-content-card-header">
+        <img class="tp-content-card-icon" src="demos/images/icon-code.svg">
+      </header>
+      <div class="tp-content-card-body">
+        <h4> Fraud Detection </h4>
+        <p> A Taipy Application that analyzes credit card transactions to detect fraud.
+        </p>
+      </div> 
+    </a>
+  </li>
 </ul>
 
 # Tips & Tricks