Merge branch 'zauberzeug:main' into main

Author: python-and-novella

.devcontainer/Dockerfile

@@ -1,4 +1,4 @@
-FROM --platform=linux/amd64 python:3.9
+FROM python:3.9
 
 ENV POETRY_VERSION=2.1.2 \
     POETRY_NO_INTERACTION=1 \

.github/workflows/test.yml

@@ -44,12 +44,7 @@ jobs:
       - name: install dependencies
         run: |
           set -x
-          poetry install --all-extras
-          # install packages to run the examples
-          poetry run pip install opencv-python opencv-contrib-python-headless httpx isort replicate langchain openai simpy tortoise-orm
-          poetry run pip install -r tests/requirements.txt
-          # try fix issue with importlib_resources
-          poetry run pip install importlib-resources
+          poetry install --all-extras --with dev
       - name: setup chromedriver
         uses: nanasess/[email protected]
       - name: pytest
@@ -61,8 +56,18 @@ jobs:
           name: screenshots-${{ matrix.python }}
           path: screenshots/*.failed.png
           retention-days: 14
+      - name: install test startup dependencies
+        run: |
+          set -x
+          # install packages to run the examples
+          poetry run pip install opencv-python opencv-contrib-python-headless httpx isort replicate openai simpy tortoise-orm
       - name: test startup
         run: poetry run ./test_startup.sh
+      - name: restore dependencies for effective caching
+        if: always()
+        run: |
+          set -x
+          poetry install --all-extras --with dev
 
   slack:
     needs:

examples/chat_with_ai/log_callback_handler.py

@@ -1,15 +1,13 @@
 #!/usr/bin/env python3
 from html_sanitizer import Sanitizer
 from langchain_openai import ChatOpenAI
-from log_callback_handler import NiceGuiLogElementCallbackHandler
 
 from nicegui import ui
 
 OPENAI_API_KEY = 'not-set'  # TODO: set your OpenAI API key here
 
 
-@ui.page('/')
-def main():
+def root():
     llm = ChatOpenAI(model_name='gpt-4o-mini', streaming=True, openai_api_key=OPENAI_API_KEY)
 
     async def send() -> None:
@@ -22,27 +20,15 @@ async def send() -> None:
             spinner = ui.spinner(type='dots')
 
         response = ''
-        async for chunk in llm.astream(question, config={'callbacks': [NiceGuiLogElementCallbackHandler(log)]}):
+        async for chunk in llm.astream(question):
             response += chunk.content
             response_message.clear()
             with response_message:
                 ui.html(response, sanitize=Sanitizer().sanitize)
             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')
-        logs_tab = ui.tab('Logs')
-    with ui.tab_panels(tabs, value=chat_tab).classes('w-full max-w-2xl mx-auto flex-grow items-stretch'):
-        message_container = ui.tab_panel(chat_tab).classes('items-stretch')
-        with ui.tab_panel(logs_tab):
-            log = ui.log().classes('w-full h-full')
+    message_container = ui.column().classes('w-full max-w-2xl mx-auto flex-grow 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'):
@@ -51,7 +37,8 @@ async def send() -> None:
             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')
+            .classes('text-xs self-end mr-8 m-[-1em] text-primary') \
+            .classes('[&_a]:text-inherit [&_a]:no-underline [&_a]:font-medium')
 
 
-ui.run(title='Chat with GPT-3 (example)')
+ui.run(root, title='Chat with GPT-4o-mini')

examples/chat_with_ai/main.py

@@ -1,5 +1,3 @@
 html-sanitizer>=2.6.0
-langchain>=0.2
-langchain-community
-langchain_openai
+langchain_openai>=0.3
 nicegui>=3.0

examples/chat_with_ai/requirements.txt

@@ -1,53 +1,48 @@
 #!/usr/bin/env python3
 from openai import AsyncOpenAI
-from openai.types.beta.assistant_stream_event import ThreadMessageInProgress
-from openai.types.beta.threads import MessageDeltaEvent, TextDeltaBlock
 
 from nicegui import ui
 
 client = AsyncOpenAI(api_key='provide your OpenAI API key here')
 
 
-@ui.page('/')
-async def main():
-    assistant = await client.beta.assistants.create(
-        name='NiceGUI Assistant',
-        instructions='''
-            You are a personal assistant for NiceGUI developers.
-            Your sole focus is to help with questions about the NiceGUI framework.
-            You are precise and concise.
-            Stay on the topic.
-            Very short answers are preferred, but always be friendly and polite.
-        ''',
-        tools=[{'type': 'code_interpreter'}],
-        model='gpt-4o-mini',
-    )
-
-    thread = await client.beta.threads.create()
+async def root():
+    messages = []
 
     async def send() -> None:
+        messages.append({'role': 'user', 'content': question.value})
+
         response.content = ''
         spinner = ui.spinner(size='5em', type='comment').classes('mx-auto')
-        await client.beta.threads.messages.create(
-            thread_id=thread.id,
-            role='user',
-            content=question.value,
-        )
-        stream = await client.beta.threads.runs.create(
-            assistant_id=assistant.id,
-            thread_id=thread.id,
+
+        stream = await client.chat.completions.create(
+            model='gpt-4o-mini',
+            messages=[
+                {
+                    'role': 'system',
+                    'content': '''
+                        You are a personal assistant for NiceGUI developers.
+                        Your sole focus is to help with questions about the NiceGUI framework.
+                        You are precise and concise.
+                        Stay on the topic.
+                        Very short answers are preferred, but always be friendly and polite.
+                    ''',
+                },
+                *messages,
+            ],
             stream=True,
         )
+
+        spinner.delete()
+        assistant_message = ''
+
         async for chunk in stream:
-            if isinstance(chunk, ThreadMessageInProgress):
-                spinner.delete()
-            # NOTE: the stream contains a lot of different types so we need to filter out the ones we don't need
-            if not isinstance(chunk.data, MessageDeltaEvent) or not chunk.data.delta.content:
-                continue
-            content = chunk.data.delta.content[0]
-            if not isinstance(content, TextDeltaBlock) or content.text is None or content.text.value is None:
-                continue
-            response.content += content.text.value
+            if chunk.choices and chunk.choices[0].delta.content:
+                content = chunk.choices[0].delta.content
+                assistant_message += content
+                response.content += content
+
+        messages.append({'role': 'assistant', 'content': assistant_message})
 
     with ui.column().classes('mx-auto w-full max-w-xl my-16'):
         ui.label('NiceGUI Assistant').classes('text-2xl font-bold mx-auto')
@@ -57,4 +52,4 @@ async def send() -> None:
         response = ui.markdown().classes('mx-4 mt-2')
         ui.timer(0, send, once=True)  # NOTE: we send the prepared demo question immediately
 
-ui.run()
+ui.run(root=root)

examples/openai_assistant/main.py

@@ -1,2 +1,2 @@
 nicegui>=3.0
-openai==1.58.1
+openai>=2.3.0

examples/openai_assistant/requirements.txt

@@ -10,6 +10,9 @@ def build_svg() -> str:
         Original was borrowed from https://de.m.wikipedia.org/wiki/Datei:Station_Clock.svg.
     """
     now = datetime.now()
+    seconds_angle = now.second / 60 * 360
+    minutes_angle = now.minute / 60 * 360 + seconds_angle / 60
+    hours_angle = now.hour / 12 * 360 + minutes_angle / 12
     return f'''
         <svg width="800" height="800" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
             <circle cx="400" cy="400" r="400" fill="#fff"/>
@@ -30,13 +33,13 @@ def build_svg() -> str:
                 </g>
                 <use transform="rotate(90 400 400)" xlink:href="#d"/>
             </g>
-            <g transform="rotate({250 + now.hour / 12 * 360} 400 400)">
+            <g transform="rotate({250 + hours_angle} 400 400)">
                 <path d="m334.31 357.65-12.068 33.669 283.94 100.8 23.565-10.394-13.332-24.325z"/>
             </g>
-            <g transform="rotate({117 + now.minute / 60 * 360} 400 400)">
+            <g transform="rotate({117 + minutes_angle} 400 400)">
                 <path d="m480.73 344.98 11.019 21.459-382.37 199.37-18.243-7.2122 4.768-19.029z"/>
             </g>
-            <g transform="rotate({169 + now.second / 60 * 360} 400 400)">
+            <g transform="rotate({169 + seconds_angle} 400 400)">
                 <path d="m410.21 301.98-43.314 242.68a41.963 41.963 0 0 0-2.8605-0.091 41.963 41.963 0 0 0-41.865 42.059 41.963 41.963 0 0 0 30.073 40.144l-18.417 103.18 1.9709 3.9629 3.2997-2.9496 21.156-102.65a41.963 41.963 0 0 0 3.9771 0.1799 41.963 41.963 0 0 0 41.865-42.059 41.963 41.963 0 0 0-29.003-39.815l49.762-241.44zm-42.448 265.56a19.336 19.336 0 0 1 15.703 18.948 19.336 19.336 0 0 1-19.291 19.38 19.336 19.336 0 0 1-19.38-19.291 19.336 19.336 0 0 1 19.291-19.38 19.336 19.336 0 0 1 3.6752 0.3426z" fill="#a40000"/>
             </g>
         </svg>

examples/svg_clock/main.py

@@ -15,10 +15,10 @@ In addition to the normal NiceGUI dependencies, the zmq library must be installe
 ### Running the publisher
 
 The publisher is a simple Python script that sends random data to a ZeroMQ socket.
-To run it, simply execute the following command:
+To run the publisher in the background, simply execute the following command:
 
 ```bash
-python zmq-server.py
+python zmq-server.py &
 ```
 
 ### Running the NiceGUI server
@@ -35,3 +35,9 @@ python main.py
 Once both the publisher and GUI server are running, you will see an updating plot on the UI.
 
 ![plot](images/plot.png)
+
+To kill zmq-server.py running in the background, execute the following command after main.py ends.
+
+```bash
+kill -9 %%
+```

examples/zeromq/README.md

@@ -74,9 +74,6 @@ export default {
       return runMethod(this.api.getRowNode(row_id), name, args);
     },
     handle_event(type, args) {
-      if (type === "gridSizeChanged" && this.auto_size_columns) {
-        this.api.sizeColumnsToFit();
-      }
       this.$emit(type, {
         value: args.value,
         oldValue: args.oldValue,
@@ -114,6 +111,5 @@ export default {
   props: {
     options: Object,
     html_columns: Array,
-    auto_size_columns: Boolean,
   },
 };