A Streamlit app based on vanna.ai

[v479038280]

We can chat with our DataBase with this app. https://github.com/vanna-ai/vanna-streamlit
How can we achieve such app with nicegui?
If we could make a demo app with nicegui

[evnchn]

Hey.

First of all, welcome to the NiceGUI discussion forum and I am glad you show interest to NiceGUI.

---

Coming from streamlit, you may find that you have to get used to the different syntax.

• Why Callbacks instead of Streamlit-Like "if"-statements? #21

I'll save you the details but we use callbacks instead of if-statements, because the former is more realistic in terms of how an actual web application works. No server in the world re-executes the page code in a tight loop in order to detect an update on button click. Instead, traditionally, the frontend often communicates to the backend via XMLHttpRequest or the Fetch API, and NiceGUI uses WebSocket to do that in the same connection while also enabling the backend to update UI elements on the frontend.

---

There is a learning curve, but I assue you, (1) it is instinctive after you learn it, (2) speaking from experience the learning curve is super gentile compared to some other UI frameworks (something something TSX, it's a nightmare to read). NiceGUI strives to be the "Nicest UI framework", following the "Nice Guy" ethos throughout. Watch the talk by the one and only @falkoschindler to find out. Not only that, but he is actually also a nice guy.

• https://www.youtube.com/watch?v=D5DnLgeObq4

If you are getting confused at the start, it's OK! The map of NiceGUI lays out all features in the library, which although a bit long for humans to read through, is just about perfect for getting AIs to begin to help you along with any issues you face. https://nicegui.io/documentation#map-of-nicegui

---

The community is active and close-knitted. There are many examples on https://nicegui.io/#examples, and you can always find help in the discussion provided you have a Minimum Reproducable Example of the code pin-pointing what is the issue, or report a bug if you are sure it is a NiceGUI problem. You can check out the community Wiki, and even edit it as well! https://github.com/zauberzeug/nicegui/wiki If you are feeling adventurous, you can even contribute to new features. It is easy to setup the development environment by following https://github.com/zauberzeug/nicegui/blob/main/CONTRIBUTING.md. I myself (a Python noob) contributed to 2 speed improvements in the library as well. 😉

---

Specific to your example of an AI, check here: https://github.com/zauberzeug/nicegui/tree/main/examples/chat_with_ai/

I wish you on a pleasant journey 🥰

[falkoschindler]

Thanks for this great onboarding! I'm serious: That's a great summary about how to get started with NiceGUI!
(And thanks for your warm words about my talk... 🤭)

Just one remark: @v479038280 is definitely not new to NiceGUI 😄

[evnchn]

Imagine onboarding someone to NiceGUI when that someone began using NiceGUI since https://github.com/zauberzeug/nicegui/releases/tag/v1.3.5 🫣

[v479038280]

Thanks for this great onboarding! I'm serious: That's a great summary about how to get started with NiceGUI! (And thanks for your warm words about my talk... 🤭)

Just one remark: @v479038280 is definitely not new to NiceGUI 😄

haha,Actually I'm more new to Streamlit now

[evnchn]

Hey also, check out the Wiki! https://github.com/zauberzeug/nicegui/wiki

https://github.com/alikalik9/openllm
https://github.com/microsoft/nodeengine/blob/main/examples/apps/simple-chat-client/README.md
https://github.com/wptmdoorn/simple_nicegui_langchain_ui
https://github.com/mggger/gpt-nicegui

[v479038280]

Thank you so much for such a detailed response. I need to study the Streamlit examples, get more familiar with Vanna, and then take a closer look at NiceGUI's "Chat with AI." After that, I'll figure out how to switch between them. That should be the right path forward, though it will likely take some time.

[v479038280]

This Vanna example is specifically designed for database operations, offering some convenient features tailored for databases, such as prompts and the ability to generate report images. Compared to a general chatbot, it has many additional functionalities. Implementing these features in NiceGUI might be a bit challenging.

[v479038280]

# Import python packages
import streamlit as st

# ======= BEGIN VANNA SETUP =======

from vanna.remote import VannaDefault

vanna_model_name='chinook'
vanna_api_key = 'f1ed010f06a3454a8c0f760de65f3e61'
vn = VannaDefault(model=vanna_model_name, api_key=vanna_api_key)

vn.connect_to_sqlite("https://vanna.ai/Chinook.sqlite")
# ======= END VANNA SETUP =======

my_question = st.session_state.get("my_question", default=None)

if my_question is None:
    my_question = st.text_input(
        "Ask me a question about your data",
        key="my_question",
    )
else:
    st.text(my_question)
    
    sql = vn.generate_sql(my_question)

    st.text(sql)

    df = vn.run_sql(sql)    
        
    st.dataframe(df, use_container_width=True)

    code = vn.generate_plotly_code(question=my_question, sql=sql, df=df)

    fig = vn.get_plotly_figure(plotly_code=code, df=df)

    st.plotly_chart(fig, use_container_width=True)

Here is another streamlit app which better to start

[v479038280]

I tried implementing it with NiceGUI, and the inference from Vanna is quite good. However, the UI often freezes during output, and ui.spinner() doesn't display. Is there a way to improve this? Here's my code, which can be run directly after installing the necessary libraries. The api_key and database connection are both working properly.

#!/usr/bin/env python3
from typing import List, Tuple, Union

from vanna.openai.openai_chat import OpenAI_Chat
from vanna.chromadb.chromadb_vector import ChromaDB_VectorStore
from openai import OpenAI

from nicegui import  ui,run
import pymysql
import pandas as pd

#SET UP
client = OpenAI(
    api_key="Your api key here",
    base_url="https://api.deepseek.com",
)

class MyVanna(ChromaDB_VectorStore, OpenAI_Chat):
    def __init__(self,client=None, config=None):
        ChromaDB_VectorStore.__init__(self, config=config)
        OpenAI_Chat.__init__(self, client=client, config=config)

vn = MyVanna(client=client, config={"model": "deepseek-chat"})

conn_details = {
    "host": "host",
    "port": 3307,
    "user": "user_name",
    "password": "password",
    "database": "database_name",
    # "charset": "utf8mb4",
}
# 建立MySQL数据库连接
conn = pymysql.connect(**conn_details)
def run_sql(sql: str) -> pd.DataFrame:
    df = pd.read_sql_query(sql, conn)
    return df
vn.run_sql = run_sql
vn.run_sql_is_set = True

#Train 
vn.train(ddl="""CREATE TABLE IF NOT EXISTS titanic (
    PassengerID INT(11) NOT NULL COMMENT '旅客ID',
    Survived INT(11) UNIQUE NOT NULL COMMENT '是否生还',
    Pclass INT(11) COMMENT '席位等级',
    Name VARCHAR(255) COMMENT '姓名',
    Sex VARCHAR(255) COMMENT '性别',
    Age  DOUBLE  COMMENT '年龄',
         SibSp INT(11) COMMENT'兄弟姐妹及配偶数量',	
         Parch INT(11) COMMENT '父母及子女数量',	
         Ticket VARCHAR(255) COMMENT '船票编号',	
         Cabin  VARCHAR(255)  COMMENT '客舱号',
         Embarked VARCHAR(255) COMMENT  '登船港口',
         Fare DOUBLE COMMENT '票价'
) COMMENT='用户信息表' CHARACTER SET utf8mb4 COLLATE utf8mb4_unicode_ci;"
""",
         documentation='This is a dataset about Titanic',
         sql='SELECT PassengerID, Survived, Pclass,Name,Sex,Age,SibSp,Parch,Ticket,Cabin,Embarked FROM titanic')


@ui.page('/')
def main():

    async def send() -> None:
        question = text.value
        text.value = ''

        with message_container:
            ui.chat_message(text=question, name='你', sent=True)
            spinner = ui.spinner(type='dots')
            response_message = ui.chat_message(name='智能助手', sent=False)

        # await run.cpu_bound(answer)
        if question:
            sql= vn.generate_sql(question=question, allow_llm_to_see_data=True)
            if sql:
                if  vn.is_sql_valid(sql=sql):
                    df=vn.run_sql(sql=sql)
                    if df is not None:
                        print(df)
                        with response_message:
                            ui.table.from_pandas(df)
                        print(vn.should_generate_chart(df=df))
                        if vn.should_generate_chart(df=df):
                            code = vn.generate_plotly_code(question=question, sql=sql, df=df)
                            # if chart.value:
                            if code is not None and code !="":
                                print(f'code:{code}')
                                fig=vn.get_plotly_figure(plotly_code=code, df=df)

                                if fig is not None:
                                    print(f'fig:{fig}')
                                    with response_message:
                                        ui.plotly(fig).classes('w-full')

            else:
                with response_message:
                    ui.html('无法为该请求生成查询')
                
        
            # ui.run_javascript('window.scrollTo(0, document.body.scrollHeight)')
        message_container.remove(spinner)

    ui.add_css(r'a:link, a:visited {color: inherit !important; text-decoration: none; font-weight: 500}')

    # the queries below are used to expand the contend down to the footer (content can then use flex-grow to expand)
    ui.query('.q-page').classes('flex')
    ui.query('.nicegui-content').classes('w-full')

    with ui.tabs().classes('w-full') as tabs:
        chat_tab = ui.tab('Chat')
    with ui.tab_panels(tabs, value=chat_tab).classes('w-full  mx-auto flex-grow items-stretch'):
        message_container = ui.tab_panel(chat_tab).classes('items-stretch')
        

    with ui.footer().classes('bg-white'), ui.column().classes('w-full max-w-3xl mx-auto my-6'):
        with ui.row().classes('w-full no-wrap items-center'):
            placeholder = 'message' 
            text = ui.input(placeholder=placeholder).props('rounded outlined input-class=mx-3') \
                .classes('w-full self-center').on('keydown.enter', send)
        ui.markdown('simple chat app built with [NiceGUI](https://nicegui.io)') \
            .classes('text-xs self-end mr-8 m-[-1em] text-primary')
    with ui.left_drawer():
        chart=ui.switch('generate chart?',value=False)


ui.run(title='Chat with vanna (example)')

[evnchn]

Try AsyncOpenAI:

https://github.com/openai/openai-python?tab=readme-ov-file#async-usage

Not sure if vanna let you use AsyncOpenAI. If not, last resort would be to use run.io_bound

[v479038280]

run.io_bound() works .