Merge pull request #759 from Avaiga/demo_talktotaipy

Adds TalkToTaipy to demos
Avaiga · Dec 27, 2023 · 6b5c6b2 · 6b5c6b2
2 parents 93294fd + 03a1a0c
commit 6b5c6b2
Show file tree

Hide file tree

Showing 6 changed files with 73 additions and 36 deletions.
diff --git a/docs/knowledge_base/demos/images/talk_to_taipy_example.gif b/docs/knowledge_base/demos/images/talk_to_taipy_example.gif
diff --git a/docs/knowledge_base/demos/images/talk_to_taipy_image.jpeg b/docs/knowledge_base/demos/images/talk_to_taipy_image.jpeg
diff --git a/docs/knowledge_base/demos/index.md b/docs/knowledge_base/demos/index.md
@@ -55,10 +55,10 @@ Let's explore demos of applications made with Taipy.
         <h4> Sales Dashboard </h4>
         <span class="tp-tag">Front-end | Back-end</span>
         <p> Check out our Sales Dashboard demo. It reads Excel files and shows valuable insights.
-            You can filter data by city, customer, and gender to find specific metrics and use 
+            You can filter data by city, customer, and gender to find specific metrics and use
             two dynamic charts for trend analysis.
         </p>
-      </div> 
+      </div>
     </a>
   </li>
 
@@ -70,10 +70,10 @@ Let's explore demos of applications made with Taipy.
       <div class="tp-content-card-body">
         <h4> Tweet Generation </h4>
         <span class="tp-tag">Front-end | Back-end</span>
-        <p> Experience the AI-powered Tweet Generation. Create compelling Tweets effortlessly 
-            using GPT-3's Davinci engine for text and DALL·E for images. 
+        <p> Experience the AI-powered Tweet Generation. Create compelling Tweets effortlessly
+            using GPT-3's Davinci engine for text and DALL·E for images.
         </p>
-      </div> 
+      </div>
     </a>
   </li>
 
@@ -87,7 +87,7 @@ Let's explore demos of applications made with Taipy.
         <span class="tp-tag">Front-end | Back-end</span>
         <p> Background Remover simplifies background removal of your images with automatic detection, an interactive interface, and efficient Python code.
         </p>
-      </div> 
+      </div>
     </a>
   </li>
 
@@ -99,10 +99,10 @@ Let's explore demos of applications made with Taipy.
       <div class="tp-content-card-body">
         <h4> Real-time Face Recognition </h4>
         <span class="tp-tag">Front-end | Back-end</span>
-        <p> Explore real-time face detection and recognition demo. Learn how to create custom UI 
+        <p> Explore real-time face detection and recognition demo. Learn how to create custom UI
             components and use OpenCV for accurate face identification.
         </p>
-      </div> 
+      </div>
     </a>
   </li>
 
@@ -114,10 +114,10 @@ Let's explore demos of applications made with Taipy.
       <div class="tp-content-card-body">
         <h4>Sentiment Analysis: Detect emotional tones from a text</h4>
         <span class="tp-tag">Front-end | Back-end</span>
-        <p> Explore the power of Taipy's sentiment analysis capabilities with our two-page 
-            application. Analyze user input and uploaded text to uncover sentiments effortlessly. 
+        <p> Explore the power of Taipy's sentiment analysis capabilities with our two-page
+            application. Analyze user input and uploaded text to uncover sentiments effortlessly.
         </p>
-      </div> 
+      </div>
     </a>
   </li>
 
@@ -129,11 +129,11 @@ Let's explore demos of applications made with Taipy.
       <div class="tp-content-card-body">
         <h4>Optimize Bar Cut Sizes</h4>
         <span class="tp-tag">Front-end | Back-end</span>
-        <p> Try out our Bar Cut Optimization demo. It uses Taipy to optimize bar cut sizes for two 
-            scenarios with distinct algorithms that reduces raw material waste in a visually 
+        <p> Try out our Bar Cut Optimization demo. It uses Taipy to optimize bar cut sizes for two
+            scenarios with distinct algorithms that reduces raw material waste in a visually
             intuitive way.
         </p>
-      </div> 
+      </div>
     </a>
   </li>
 
@@ -145,10 +145,10 @@ Let's explore demos of applications made with Taipy.
       <div class="tp-content-card-body">
         <h4>Image Classification</h4>
         <span class="tp-tag">Front-end | Back-end</span>
-        <p> Explore our interactive image classification application built with Taipy, Nvidia CUDA, 
+        <p> Explore our interactive image classification application built with Taipy, Nvidia CUDA,
             and TensorFlow.
         </p>
-      </div> 
+      </div>
     </a>
   </li>
 
@@ -161,10 +161,10 @@ Let's explore demos of applications made with Taipy.
         <h4>Churn Classification</h4>
         <span class="tp-tag">Front-end | Back-end</span>
         <p> Explore our Churn Classification demo. Use Taipy for data analysis, model management,
-            and model comparison in churn prediction. Witness the capabilities of Taipy in 
+            and model comparison in churn prediction. Witness the capabilities of Taipy in
             streamlining and improving decision-making.
         </p>
-      </div> 
+      </div>
     </a>
   </li>
 
@@ -176,10 +176,10 @@ Let's explore demos of applications made with Taipy.
       <div class="tp-content-card-body">
         <h4>Production Planning</h4>
         <span class="tp-tag">Front-end | Back-end</span>
-        <p> Discover our Production Planning demo application that optimize production, reduce 
-            costs, and simulate manufacturing scenarios. 
+        <p> Discover our Production Planning demo application that optimize production, reduce
+            costs, and simulate manufacturing scenarios.
         </p>
-      </div> 
+      </div>
     </a>
   </li>
 
@@ -191,10 +191,10 @@ Let's explore demos of applications made with Taipy.
       <div class="tp-content-card-body">
         <h4>Stock Visualization</h4>
         <span class="tp-tag">Front-end | Back-end</span>
-        <p> Explore the Stock Visualization Dashboard that leverages Taipy GUI and Prophet to 
+        <p> Explore the Stock Visualization Dashboard that leverages Taipy GUI and Prophet to
             visualize historical stock data and make predictions over 5 years.
         </p>
-      </div> 
+      </div>
     </a>
   </li>
 
@@ -207,10 +207,10 @@ Let's explore demos of applications made with Taipy.
         <h4>Covid Dashboard</h4>
         <span class="tp-tag">Front-end | Back-end</span>
         <p> Discover our minimalist yet powerful COVID-19 dashboard. View and forecast COVID-19
-            data for various countries, interact with maps, and gain insights into the global 
+            data for various countries, interact with maps, and gain insights into the global
             pandemic impact.
         </p>
-      </div> 
+      </div>
     </a>
   </li>
 
@@ -222,13 +222,13 @@ Let's explore demos of applications made with Taipy.
       <div class="tp-content-card-body">
         <h4>Movie Genre Selector</h4>
         <span class="tp-tag">Front-end | Back-end</span>
-        <p> Explore Movie Genre Selector demo. See how this user-friendly tool helps you 
+        <p> Explore Movie Genre Selector demo. See how this user-friendly tool helps you
             effortlessly discover movies from your favorite movie genres.
         </p>
-      </div> 
+      </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">
@@ -241,10 +241,10 @@ Let's explore demos of applications made with Taipy.
             pipelines in a Taipy application by using the example of detecting drift on a
             dataset.
         </p>
-      </div> 
+      </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">
@@ -256,7 +256,21 @@ Let's explore demos of applications made with Taipy.
         <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> 
+      </div>
+    </a>
+  </li>
+
+  <li class="tp-col-12 tp-col-md-6 d-flex" data-keywords="gui vizelement layout chart ai">
+    <a class="tp-content-card tp-content-card--horizontal tp-content-card--small" href="talk_to_taipy">
+      <header class="tp-content-card-header">
+        <img class="tp-content-card-image" src="images/talk_to_taipy_image.jpeg">
+      </header>
+      <div class="tp-content-card-body">
+        <h4>TalkToTaipy</h4>
+        <span class="tp-tag">Front-end</span>
+        <p> Explore datasets using only natural language using TalkToTaipy!
+        </p>
+      </div>
     </a>
   </li>
 

diff --git a/docs/knowledge_base/demos/talk_to_taipy.md b/docs/knowledge_base/demos/talk_to_taipy.md
@@ -0,0 +1,17 @@
+Explore datasets using only natural language using TalkToTaipy!
+
+[Try it live](https://talk-to-taipy.taipy.cloud/){: .tp-btn target='blank' }
+
+# Understanding the Application
+This application allows users to enter a prompt to manipulate or visualize data such
+as "Plot sales by product line in a pie chart" and the app will generate the
+appropriate visualization.
+
+This works by calling a quantized version of HuggingFace's StarCoder code generation
+LLM model hosted on Azure. The user prompt entered on the Taipy app gets sent to the
+model which uses few-shot learning to generate pandas code to manipulate the data and
+Taipy code to create the visualization.
+
+![An example use of TTT](images/talk_to_taipy_example.gif){width=100%}
+
+![What are the 5 most profitable cities?](images/talk_to_taipy_image.jpeg){width=100%}
diff --git a/docs/knowledge_base/index.md b/docs/knowledge_base/index.md
@@ -505,19 +505,24 @@ hide:
     </a>
   </li>
 
-  <li data-keywords="gui vizelement ai">
-    <a class="tp-content-card tp-content-card--horizontal tp-content-card--small" href="demos/chatbot/">
+  <li data-keywords="gui vizelement layout chart ai">
+    <a class="tp-content-card tp-content-card--horizontal tp-content-card--small" href="demos/talk_to_taipy/">
       <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.
+        <h4> TalkToTaipy </h4>
+        <p> Explore datasets using only natural language using TalkToTaipy!
         </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/">
+        <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.
+
   <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">

diff --git a/mkdocs.yml_template b/mkdocs.yml_template
@@ -58,7 +58,8 @@ nav:
         - "Drift Detection": knowledge_base/demos/drift_detection.md
         - "Realtime Pollution Dashboard" : knowledge_base/demos/pollution_sensors.md
         - "Background Remover" : knowledge_base/demos/background_remover.md
-        - "LLM ChatBot" : knowledge_base/demos/chatbot.md
+        - "TalkToTaipy" : knowledge_base/demos/talk_to_taipy.md
+        - "Creating an LLM Chatbot" : knowledge_base/demos/chatbot.md
         - "Fraud Detection": knowledge_base/demos/fraud_detection.md
     - "Tips and tricks":
         - "Tips and tricks": knowledge_base/tips/index.md