chat based

Author: neelasha23

examples/docker/chat-with-csv-solara/Dockerfile

@@ -1,7 +1,12 @@
 FROM python:3.11
 
 COPY app.py app.py
-RUN pip install requests jupysql solara openai pandas duckdb duckdb-engine matplotlib
+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
+RUN pip install requests solara openai pandas duckdb duckdb-engine matplotlib
 
 
 ENTRYPOINT ["solara", "run", "app.py", "--host=0.0.0.0", "--port=80"]

examples/docker/chat-with-csv-solara/app.py

@@ -2,30 +2,34 @@
 from sql.run import run
 from sql.connection import ConnectionManager
 from sql.magic import SqlMagic, load_ipython_extension
-from sql import _current
 from IPython.core.interactiveshell import InteractiveShell
 
 
 import uuid
 import requests
 from functools import partial
 
-import openai
-from typing import Optional, cast
-
-import duckdb
-import pandas as pd
-from matplotlib.figure import Figure
-import matplotlib.pyplot as plt
-
 import solara
 import solara.lab
 from solara.components.file_drop import FileDrop
 
 from sql.plot import boxplot, histogram
 
+from chat import *
+
+from matplotlib import pyplot as plt
 plt.switch_backend("agg")
 
+css = """
+    .main {
+        width: 100%;
+        height: 100%;
+        max-width: 1200px;
+        margin: auto;
+        padding: 1em;
+    }
+"""
+
 openai.api_key = "YOUR_API_KEY"
 
 prompt_template = """
@@ -41,16 +45,21 @@
 And replace NAME with the column name, do not include the table  name
 """
 
+
 def gen_name():
     return str(uuid.uuid4())[:8] + '.csv'
 
+
 def load_data(name):
     run.run_statements(conn, "drop table if exists my_data", sqlmagic)
     run.run_statements(conn, f"create table my_data as (select * from '{name}')", sqlmagic)
     cols = inspect.get_columns("my_data")
     return cols
 
 
+def delete_data():
+    run.run_statements(conn, "drop table if exists my_data", sqlmagic)
+
 ip = InteractiveShell()
 
 sqlmagic = SqlMagic(shell=ip)
@@ -67,13 +76,14 @@ def load_data(name):
             config=sqlmagic,
         )
 
+
 class State:
-    user_message = solara.reactive("")
     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)
 
     @staticmethod
     def load_sample():
@@ -89,7 +99,6 @@ def load_sample():
             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):
@@ -105,41 +114,117 @@ def load_from_file(file):
             State.upload_data_error.value = str(e)
             return
         State.upload_data_error.value = ""
-    
-        
 
     @staticmethod
     def reset():
-        State.user_message.value = ""
+        delete_data()
+        State.initial_prompt.value = ""
+        State.sample_data_loaded.value = False
+        State.upload_data.value = False
+        State.upload_data_error.value = ""
 
     @staticmethod
-    def chat_with_gpt3(prompt):
+    def chat_with_gpt3(prompts):
         response = openai.ChatCompletion.create(
             model="gpt-3.5-turbo",
             messages=[
                 {"role": "system", "content": State.initial_prompt.value},
                 {"role": "user", "content": "Show me the first 5 rows"},
                 {"role": "assistant", "content": "SELECT * FROM my_data LIMIT 5"},
-                {"role": "user", "content": prompt}
-            ]
+            ] + [{"role": prompt.role, "content": prompt.content} for prompt in prompts],
+            temperature=0.1,
+            stream=True
         )
-        return response['choices'][0]['message']['content']
+
+        total = ""
+        for chunk in response:
+            part = chunk['choices'][0]['delta'].get("content", "")
+            total += part
+            yield total
+
+
+@solara.component
+def Chat() -> None:
+    solara.Style("""
+        .chat-input {
+            max-width: 800px;
+        })
+    """)
+
+    messages, set_messages = solara.use_state([
+        Message(
+            role="assistant",
+            content=f"Welcome. Please post your queries!",
+            df=None,
+        fig=None)
+    ]
+    )
+    input, set_input = solara.use_state("")
+
+    def ask_chatgpt():
+        _messages = messages + [Message(role="user", content=input, df=None, fig=None)]
+        user_input = input
+        set_input("")
+        set_messages(_messages)
+        if State.initial_prompt.value:
+            final = None
+            for command in State.chat_with_gpt3([Message(role="user", content=user_input, df=None, fig=None)]):
+                final = command
+
+            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)])
+            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)])
+        else:
+            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.component
 def Page():
-    user_message = State.user_message.value
     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
 
     with solara.AppBarTitle():
-        solara.Text("Data Visualisation App")
+        solara.Text("Data Querying and Visualisation App")
 
     with solara.Card(title="About", elevation=6, style="background-color: #f5f5f5;"):
-        solara.Markdown("""This Solara app is designed for automatic data visualizations""")
+        solara.Markdown("""This Solara app is designed for chatting with your data. <br> <br>
+        Examples of queries :
+        unique column-name values ;  
+        select top 20 rows from table ; <br> <br>
+        Example of queries that will return a plot :
+        histogram on column ; 
+        boxplot on column""")
 
     with solara.Sidebar():
         with solara.Card("Controls", margin=0, elevation=0):
@@ -150,50 +235,35 @@ 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 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:
         solara.Info("Sample data is loaded")
-        sql_output = run.run_statements(conn, "select * from my_data limit 5", sqlmagic)
-        solara.DataFrame(sql_output)
+        sql_output = run.run_statements(conn, f"select * from my_data limit {results}", sqlmagic)
+        solara.DataFrame(sql_output, items_per_page=10)
 
     if upload_data:
         solara.Info("Data is successfully uploaded")
-        sql_output = run.run_statements(conn, "select * from my_data limit 5", sqlmagic)
-        solara.DataFrame(sql_output)
+        sql_output = run.run_statements(conn, f"select * from my_data limit {results}", sqlmagic)
+        solara.DataFrame(sql_output, items_per_page=10)
 
     if upload_data_error:
         solara.Error(f"Error uploading data: {upload_data_error}")
-        
-    if user_message:
-        if initial_prompt == "" :
-            solara.Info("You must upload data first")
-        
-        command = State.chat_with_gpt3(user_message)
-    
-        if command.startswith("%sqlplot"):
-            _, name, column = command.split(" ")
-            fig = Figure()
-            ax = fig.subplots()
-            
-            fn_map = {"histogram": partial(histogram, bins=50, ax=ax),
-                      "boxplot": partial(boxplot, ax=ax)}
-            fn = fn_map[name]
-            ax = fn("my_data", column)
-            solara.FigureMatplotlib(fig)
 
-        else:
-            sql_output = run.run_statements(conn, command, sqlmagic)
-            solara.DataFrame(sql_output)
-        
-        solara.Markdown(f"Command: {command}")
-            
-
-    solara.InputText("Enter your query", value=State.user_message)
-    
+    if initial_prompt == "":
+        solara.Info("No data loaded")
+
+    solara.Style(css)
+    with solara.VBox(classes=["main"]):
+        solara.HTML(tag="h3", style="margin: auto;", unsafe_innerHTML="Chat with your data")
+
+        Chat()
+
 
 @solara.component
 def Layout(children):