lates version

neelasha23 · neelasha23 · commit 0197ae0433f5 · 2023-10-30T16:23:27.000+05:30
diff --git a/examples/docker/chat-with-csv-solara/Dockerfile b/examples/docker/chat-with-csv-solara/Dockerfile
@@ -1,11 +1,9 @@
 FROM python:3.11
 
 COPY app.py app.py
-COPY user-logo.png user-logo.png
-COPY system-logo.png system-logo.png
-COPY assistant-logo.png assistant-logo.png
 COPY chat.py chat.py
-RUN pip install git+https://github.com/neelasha23/jupysql.git@boxplot
+COPY static/ static/
+RUN pip install git+https://github.com/ploomber/jupysql.git@master
 RUN pip install requests solara openai pandas duckdb duckdb-engine matplotlib
 
 
diff --git a/examples/docker/chat-with-csv-solara/README.md b/examples/docker/chat-with-csv-solara/README.md
@@ -0,0 +1,24 @@
+# Data querying and visualisation App
+
+This query and data visualisation application is designed to provide a user-friendly chatbot interface to interact with your data, making data exploration and analysis a breeze.
+
+
+## Getting Started
+
+To get started with this app, follow these steps:
+
+1. Login to your [Ploomber Cloud](https://ploomber.io/) account.
+
+2. Follow the [steps](https://docs.cloud.ploomber.io/en/latest/apps/solara.html) for deploying a Solara application and upload the `app.zip` file provided in the example.
+
+## How to use
+
+1. **Dataset**: Click the `SAMPLE DATASET` button to load a sample csv file, or upload your own content by dragging a file to the drop area. You may also clear the loaded data by clicking the `Clear Dataset` button.
+
+2. **Number of preview rows**: Input the desired number of preview rows to be displayed.
+
+3. **Interaction**: You may ask the chatbot natural language queries like : `top 20 rows of table`, `unique values of column with counts`, etc.
+
+4. **Data visualisation**: Visualize your data on the fly. Want to see a histogram or a box plot for a specific column? Just ask the chatbot, and it will generate the chart for you, e.g., `histogram on column`.
+
+5. **Export Results**: The app allows you to export the charts, or query results.
diff --git a/examples/docker/chat-with-csv-solara/app.py b/examples/docker/chat-with-csv-solara/app.py
@@ -1,19 +1,19 @@
-from sql import inspect
-from sql.run import run
-from sql.connection import ConnectionManager
-from sql.magic import SqlMagic, load_ipython_extension
-from IPython.core.interactiveshell import InteractiveShell
-
-
 import uuid
 import requests
 from functools import partial
 
+import openai
 import solara
 import solara.lab
 from solara.components.file_drop import FileDrop
 
+from sql import inspect
+from sql.run import run
+from sql.connection import ConnectionManager
+from sql.magic import SqlMagic, load_ipython_extension
+from IPython.core.interactiveshell import InteractiveShell
 from sql.plot import boxplot, histogram
+from sqlalchemy.exc import ProgrammingError
 
 from chat import *
 
@@ -28,6 +28,10 @@
         margin: auto;
         padding: 1em;
     }
+    
+    #app > div > div:nth-child(2) > div:nth-child(2) {
+    display: none;
+}
 """
 
 openai.api_key = "YOUR_API_KEY"
@@ -78,37 +82,47 @@ def delete_data():
 
 
 class State:
-    package = solara.reactive("Matplotlib")
     initial_prompt = solara.reactive("")
     sample_data_loaded = solara.reactive(False)
     upload_data = solara.reactive(False)
     upload_data_error = solara.reactive("")
     results = solara.reactive(20)
+    input = solara.reactive("")
+    loading_data = solara.reactive(False)
 
     @staticmethod
     def load_sample():
         State.reset()
         name = gen_name()
+        State.loading_data.value = True
         url = "https://raw.githubusercontent.com/mwaskom/seaborn-data/master/penguins.csv"
         response = requests.get(url)
         if response.status_code == 200:
             with open(name, "wb") as f:
                 f.write(response.content)
             cols = load_data(name)
             State.sample_data_loaded.value = True
+            State.loading_data.value = False
             State.initial_prompt.value = prompt_template.format(cols)
         else:
             solara.Warning("Failed to fetch the data. Check the URL and try again.")
 
     @staticmethod
     def load_from_file(file):
+        if not file["name"].endswith(".csv"):
+            State.upload_data_error.value = "Only csv files are supported"
+            return
         State.reset()
         name = gen_name()
+        State.loading_data.value = True
         try:
             df = pd.read_csv(file["file_obj"])
+            df.columns = df.columns.str.strip()
+            df.columns = df.columns.str.replace(' ', '_')
             df.to_csv(name, index=False)
             cols = load_data(name)
             State.upload_data.value = True
+            State.loading_data.value = False
             State.initial_prompt.value = prompt_template.format(cols)
         except Exception as e:
             State.upload_data_error.value = str(e)
@@ -117,10 +131,10 @@ def load_from_file(file):
 
     @staticmethod
     def reset():
-        delete_data()
-        State.initial_prompt.value = ""
         State.sample_data_loaded.value = False
         State.upload_data.value = False
+        delete_data()
+        State.initial_prompt.value = ""
         State.upload_data_error.value = ""
 
     @staticmethod
@@ -162,9 +176,11 @@ def Chat() -> None:
     input, set_input = solara.use_state("")
 
     def ask_chatgpt():
+        input = State.input.value
         _messages = messages + [Message(role="user", content=input, df=None, fig=None)]
         user_input = input
         set_input("")
+        State.input.value = ""
         set_messages(_messages)
         if State.initial_prompt.value:
             final = None
@@ -173,46 +189,55 @@ def ask_chatgpt():
 
             if final.startswith("%sqlplot"):
                 _, name, column = final.split(" ")
+
                 fig = Figure()
                 ax = fig.subplots()
 
                 fn_map = {"histogram": partial(histogram, bins=50),
                           "boxplot": boxplot}
 
                 fn = fn_map[name]
-                ax = fn("my_data", column, ax=ax)
-                set_messages(_messages + [Message(role="assistant", content="", df=None, fig=fig)])
-                             #[Message(role="assistant", content=final, df=None, fig=None)])
+                try:
+                    ax = fn("my_data", column, ax=ax)
+                    set_messages(_messages + [Message(role="assistant", content="", df=None, fig=fig)])
+                except Exception as e:
+                    set_messages(_messages + [
+                        Message(role="assistant", content="Please pass relevant columns", df=None, fig=None)])
             else:
-                messages_list = ';'.join([msg.content for msg in _messages])
-                query_result = run.run_statements(conn, final, sqlmagic)
-                set_messages(_messages + [Message(role="assistant", content="", df=query_result, fig=None)])
-                             # [Message(role="assistant", content=f"Setting in else part: {final} {user_input} "
-                             #                                    f"{messages_list}",
-                             #          df=None, fig=None)])
+                error = "Sorry, we couldn't run your query on the data"
+                try:
+                    query_result = run.run_statements(conn, final, sqlmagic)
+                    set_messages(_messages + [Message(role="assistant", content="", df=query_result, fig=None)])
+                except ProgrammingError as e:
+                    set_messages(_messages + [
+                        Message(role="assistant", content=error, df=None, fig=None)])
+                except Exception as e:
+                    set_messages(_messages + [
+                        Message(role="assistant", content=error, df=None, fig=None)])
+
         else:
-            set_messages(_messages + [Message(role="assistant", content="Please load some data first!", df=None, fig=None)])
+            set_messages(_messages + [Message(role="assistant",
+                                              content="Please load some data first!", df=None, fig=None)])
 
     with solara.VBox():
         for message in messages:
             ChatBox(message)
 
     with solara.Row(justify="center"):
         with solara.HBox(align_items="center", classes=["chat-input"]):
-            rv.Textarea(v_model=input, on_v_model=set_input, solo=True, hide_details=True, outlined=True,
-                        rows=1,
-                        auto_grow=True)
-            solara.IconButton("send", on_click=ask_chatgpt)
+            solara.InputText(label="Query", value=State.input, continuous_update=False)
+
+    if State.input.value:
+        ask_chatgpt()
 
 
 @solara.component
 def Page():
-    package = State.package.value
     initial_prompt = State.initial_prompt.value
     sample_data_loaded = State.sample_data_loaded.value
     upload_data = State.upload_data.value
     upload_data_error = State.upload_data_error.value
-    results =State.results.value
+    results = State.results.value
 
     with solara.AppBarTitle():
         solara.Text("Data Querying and Visualisation App")
@@ -235,11 +260,13 @@ def Page():
                     solara.Button("Clear dataset", color="primary", text=True, outlined=True, on_click=State.reset)
                 FileDrop(on_file=State.load_from_file, on_total_progress=lambda *args: None,
                          label="Drag a .csv file here")
+                if State.loading_data.value:
+                    with solara.Div():
+                        solara.Text("Loading csv...")
+                        solara.ProgressLinear(True)
                 if initial_prompt:
                     solara.InputInt("Number of preview rows", value=State.results, continuous_update=True)
 
-                solara.Select(label="Visualisation Library", value=State.package, values=['Matplotlib', 'Plotly', 'Altair'])
-
                 solara.Markdown("Hosted in [Ploomber Cloud](https://ploomber.io/)")
 
     if sample_data_loaded:
diff --git a/examples/docker/chat-with-csv-solara/chat.py b/examples/docker/chat-with-csv-solara/chat.py
@@ -0,0 +1,85 @@
+import io
+import tempfile
+from pathlib import Path
+from dataclasses import dataclass
+
+import pandas as pd
+import solara as sl
+from matplotlib.figure import Figure
+from matplotlib import pyplot as plt
+
+plt.switch_backend("agg")
+
+
+chatbox_css = """
+.message {
+    max-width: 450px;
+    width: 100%;
+}
+
+.user-message, .user-message > * {
+    background-color: #f0f0f0 !important;
+}
+
+.assistant-message, .assistant-message > * {
+    background-color: #9ab2e9 !important;
+}
+
+.avatar {
+  width: 50px;
+  height: 50px;
+  border-radius: 50%;
+  border: 2px solid transparent;
+  overflow: hidden;
+  display: flex;
+}
+
+.avatar img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+"""
+
+
+@dataclass
+class Message:
+    role: str
+    content: str
+    df: pd.DataFrame
+    fig: Figure
+
+
+def ChatBox(message: Message) -> None:
+    sl.Style(chatbox_css)
+
+    align = "start" if message.role == "assistant" else "end"
+    with sl.Column(align=align):
+        with sl.Card(classes=["message", f"{message.role}-message"]):
+            if message.content:
+                sl.Markdown(message.content)
+            elif message.df is not None:
+                with sl.Card():
+                    sl.DataFrame(message.df)
+                with sl.Card():
+                    sl.FileDownload(message.df.to_csv(index=False), filename="data.csv", label="Download file")
+            elif message.fig is not None:
+                with sl.Card():
+                    sl.FigureMatplotlib(message.fig)
+                with sl.Card():
+                    buf = io.BytesIO()
+                    message.fig.savefig(buf, format="jpg")
+                    fp = tempfile.NamedTemporaryFile()
+                    with open(f"{fp.name}.jpg", 'wb') as ff:
+                        ff.write(buf.getvalue())
+                    buf.close()
+                    file_object = sl.use_memo(lambda: open(f"{fp.name}.jpg", "rb"), [])
+                    sl.FileDownload(file_object, mime_type="image/jpeg", close_file=False)
+
+        # Image reference: https://www.flaticon.com/free-icons/bot;
+        #                  https://www.flaticon.com/free-icons/use
+
+        with sl.HBox(align_items="center"):
+            image_path = Path(f"static/{message.role}-logo.png")
+            sl.Image(str(image_path), classes=["avatar"])
+            sl.Text(message.role.capitalize())
