Chat with AI example

examples/chat_with_ai_app/main.py

@@ -0,0 +1,68 @@
+#!/usr/bin/env python3
+import os
+from datetime import datetime
+from typing import List, Tuple
+
+from langchain.llms import OpenAI
+
+from nicegui import Client, ui
+
+os.environ['OPENAI_API_KEY'] = 'not-set'
+
+llm = OpenAI(model_name='gpt-3.5-turbo')
+
+messages: List[Tuple[str, str, str]] = []
+
+
+@ui.refreshable
+async def chat_messages() -> None:
+    for name, text, stamp in messages:
+        ui.chat_message(text=text,
+                        name=name,
+                        stamp=stamp,
+                        avatar=f'https://robohash.org/{name or "You"}?bgset=bg2',
+                        sent=name == "You")
+    await ui.run_javascript('window.scrollTo(0, document.body.scrollHeight)', respond=False)
+
+
+@ui.page('/')
+async def main(client: Client):
+    async def send() -> None:
+        stamp = datetime.utcnow().strftime('%X')
+        message = text.value
+        messages.append(('You', text.value, stamp))
+        messages.append(('Bot', 'Thinking...', stamp))
+        text.value = ""
+        chat_messages.refresh()
+
+        await query(message)
+        await ui.run_javascript('window.scrollTo(0, document.body.scrollHeight)', respond=False)
+
+    async def query(user_message: str) -> None:
+        response = await llm.agenerate([user_message])
+
+        # replace last message ('Thinking....') with response
+        messages[-1] = ('Bot', response.generations[0][0].text, datetime.now().strftime('%H:%M'))
+        chat_messages.refresh()
+
+        await ui.run_javascript('window.scrollTo(0, document.body.scrollHeight)', respond=False)
+
+    anchor_style = r'a:link, a:visited {color: inherit !important; text-decoration: none; font-weight: 500}'
+    ui.add_head_html(f'<style>{anchor_style}</style>')
+    await client.connected()
+
+    # chatbox
+    with ui.column().classes('w-full max-w-2xl mx-auto items-stretch'):
+        await chat_messages()
+
+    # footer
+    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' if os.environ['OPENAI_API_KEY'] != 'not-set' else \
+                'please provide your OPENAI key in the Python script first!'
+            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')
+
+ui.run(title='Chat with GPT-3 (example)')

examples/chat_with_ai_app/requirements.txt

@@ -0,0 +1,2 @@
+nicegui
+langchain

main.py

@@ -270,7 +270,9 @@ async def index_page(client: Client):
             example_link('Table and slots', 'shows how to use component slots in a table')
             example_link('Single Page App', 'navigate without reloading the page')
             example_link('Chat App', 'a simple chat app')
-            example_link('Pandas DataFrame', 'shows how to display an editable [pandas](https://pandas.pydata.org) DataFrame')
+            example_link('Chat with AI App', 'a simple chat app with AI')
+            example_link('Pandas DataFrame',
+                         'shows how to display an editable [pandas](https://pandas.pydata.org) DataFrame')
 
     with ui.row().classes('bg-primary w-full min-h-screen mt-16'):
         link_target('why')