Iftah
Iftah
PostsComments
SSolara
Created by Iftah on 6/28/2023 in #general
Question regarding the `component vue` I
I'll tipped them and also wrote to PyCoder weekly newsletter about Solara 👍
21 replies
SSolara
Created by Iftah on 6/28/2023 in #general
Question regarding the `component vue` I
Might be a good idea to talk about it in PythonBytes podcast, I'm sure they will love it
21 replies
SSolara
Created by Iftah on 6/28/2023 in #general
Question regarding the `component vue` I
I saw the "Web Apps in Python with Solara — A Streamlit Killer?" in r/python not too long ago, and it seemed very interesting And today I had to do a chat interface for an internal tool at work; usually I would write a full blown frontend+API but figured it is a good opportunity to try the server based UI approach... I googled a bit and found the other article by same author which was near perfect fit for what I wanted. I'm not sure how I ended up finding it today, because I don't think I searched explicitly for Solara, but I'm happy I found it
21 replies
SSolara
Created by Iftah on 6/28/2023 in #general
Question regarding the `component vue` I
Overall, first day of using Solara and I'm very impressed with the capabilities and also your friendly responsive and helpful support! I'll recommend it to my Python developer friends
21 replies
SSolara
Created by Iftah on 6/28/2023 in #general
Question regarding the `component vue` I
I can confirm the column-reverse with reveresed messages works great 🙂 I see the jupyter-widget, I'll try it next time I'll make wrapper component I still think the integration will be nicer if you use the Vue.js slot mechanism to just insert the children in the default slot, but maybe I don't see the full picture yet
21 replies
SSolara
Created by Iftah on 6/28/2023 in #general
Question regarding the `component vue` I
Wow, thats a nice trick! much better than using JS to scroll down all the time! thank you! I figured the children are passed to the component, but I couldn't figure out how to render them from within vue template
21 replies
SSolara
Created by Iftah on 6/28/2023 in #general
Another question I m trying to attach
I was really impressed with Solara that this streaming of changes work so well, it would be nice to figure out how is the IconButton on_click doing this dark magic and replicate it to the other handlers, but not urgent for me - the use_thread is a bit clunky to code but it works great
28 replies
SSolara
Created by Iftah on 6/28/2023 in #general
Question regarding the `component vue` I
The python code: 
@sl.component_vue("messages-box.vue")
def MessagesBox(auto_scroll):
    pass

@sl.component
def Chat():
    with MessagesBox(auto_scroll=True):
        sl.Markdown("Testing 123")
@sl.component_vue("messages-box.vue")
def MessagesBox(auto_scroll):
    pass

@sl.component
def Chat():
    with MessagesBox(auto_scroll=True):
        sl.Markdown("Testing 123")
And the vuejs messages-box component: 
<template>
  <div class="text-center" >
    Auto scroll is {{auto_scroll}}<br>
    I was expecting children to be below:<br>
    <slot />
  </div>
</template>


<script>
export default {
  data: () => ({
    auto_scroll: true,
  }),
}
</script>
<template>
  <div class="text-center" >
    Auto scroll is {{auto_scroll}}<br>
    I was expecting children to be below:<br>
    <slot />
  </div>
</template>


<script>
export default {
  data: () => ({
    auto_scroll: true,
  }),
}
</script>
21 replies
SSolara
Created by Iftah on 6/28/2023 in #general
Another question I m trying to attach
Again, this problem is kind of hard to explain without showing a video - but I'll try - The button click is mapped "ask_chatgpt", which calls the backend and runs multiple changes to the "messages" reactive value (streaming the GPT respones one word at a time). This works great and shows up in the browser one word at a time. Idealy I wanted to call the same function when "Enter" is pressed in the textarea but when I called it from on_v_model (or from the textarea keydown event using the workaround above). The multiple changes were not visible in the browser until the end of the function.
So I moved it to use_thread and now it works great, but I think it should work from the text-area event handler directly without a thread, as it does for the button click
28 replies
SSolara
Created by Iftah on 6/28/2023 in #general
Another question I m trying to attach
Regarding the streaming changes - I solved it by using a thread, I'm sorry I can't share a link to git as it contains some company code I can't share, but recreating it should be easy as the relevant parts are a small change over the article (https://itnext.io/python-how-to-build-a-chatgpt-interface-in-solara-fd6a1e15ef95) This is how I solved it now: 
    running, set_running = sl.use_state(False)
    def check_submit_and_set(text):
        set_input(text)
        if text.endswith('\n'):
            # ask_chatgpt()  # <<<<< this doesn't work as expected
            set_running(True)

    def run_handle_enter():
        if running:
            ask_chatgpt()
            set_running(False)

    sl.use_thread(run_handle_enter, dependencies=[running])

    with sl.Row(justify="center"):
        with sl.HBox(align_items="center", classes=["chat-input"]):
            rv.Textarea(v_model=input, on_v_model=check_submit_and_set, solo=True, hide_details=True, outlined=True, rows=2, auto_grow=True)
            sl.IconButton("send", on_click=ask_chatgpt)
    running, set_running = sl.use_state(False)
    def check_submit_and_set(text):
        set_input(text)
        if text.endswith('\n'):
            # ask_chatgpt()  # <<<<< this doesn't work as expected
            set_running(True)

    def run_handle_enter():
        if running:
            ask_chatgpt()
            set_running(False)

    sl.use_thread(run_handle_enter, dependencies=[running])

    with sl.Row(justify="center"):
        with sl.HBox(align_items="center", classes=["chat-input"]):
            rv.Textarea(v_model=input, on_v_model=check_submit_and_set, solo=True, hide_details=True, outlined=True, rows=2, auto_grow=True)
            sl.IconButton("send", on_click=ask_chatgpt)
28 replies
SSolara
Created by Iftah on 6/28/2023 in #general
Another question I m trying to attach
Thank you for the workaround, I can confirm it works. The key_down is not very useful without the key event data, but I managed to use it for my purpose (checking if the textarea text ends with \n) There is however some weirdness streaming changes - when I click "send" button it triggers stream of changes that beautifully make their way to the browser, but when I run the same function from the keydown event (when the text ends with \n) then I only see the browser update after all the changes are complete (several seconds) instead of streaming change by change
28 replies
SSolara
Created by Iftah on 6/28/2023 in #general
Another question I m trying to attach
thank you!
28 replies
SSolara
Created by Iftah on 6/28/2023 in #general
Another question I m trying to attach
I just added the rv.use_event(...)
28 replies
SSolara
Created by Iftah on 6/28/2023 in #general
Another question I m trying to attach
It is based on https://itnext.io/python-how-to-build-a-chatgpt-interface-in-solara-fd6a1e15ef95
28 replies
SSolara
Created by Iftah on 6/28/2023 in #general
Another question I m trying to attach
@sl.component
def Chat() -> None:
    sl.Style("""
        .chat-input {
            max-width: 800px;
        })
    """)

    # states
    messages, set_messages = sl.use_state([
        Message(
            role="system",
            content="Assist the user with whatever they need.")
    ]
    )
    input, set_input = sl.use_state("")

    def ask_chatgpt():
        _messages = messages + [Message(role="user", content=input)]
        set_input("")
        set_messages(_messages)
        for new_message in get_chatgpt_response(_messages):
            set_messages(_messages + [new_message])

    def text_area_key_down(*args, **kwargs):
        print(args, kwargs)


    # interface
    with sl.VBox(classes=["messages"]):
        for message in messages:
            ChatBox(message)

    with sl.Row(justify="center"):
        with sl.HBox(align_items="center", classes=["chat-input"]):
            text_area = rv.Textarea(v_model=input, on_v_model=set_input, solo=True, hide_details=True, outlined=True, rows=2, auto_grow=True)
            rv.use_event(text_area, "keydown", text_area_key_down)
            sl.IconButton("send", on_click=ask_chatgpt)
@sl.component
def Chat() -> None:
    sl.Style("""
        .chat-input {
            max-width: 800px;
        })
    """)

    # states
    messages, set_messages = sl.use_state([
        Message(
            role="system",
            content="Assist the user with whatever they need.")
    ]
    )
    input, set_input = sl.use_state("")

    def ask_chatgpt():
        _messages = messages + [Message(role="user", content=input)]
        set_input("")
        set_messages(_messages)
        for new_message in get_chatgpt_response(_messages):
            set_messages(_messages + [new_message])

    def text_area_key_down(*args, **kwargs):
        print(args, kwargs)


    # interface
    with sl.VBox(classes=["messages"]):
        for message in messages:
            ChatBox(message)

    with sl.Row(justify="center"):
        with sl.HBox(align_items="center", classes=["chat-input"]):
            text_area = rv.Textarea(v_model=input, on_v_model=set_input, solo=True, hide_details=True, outlined=True, rows=2, auto_grow=True)
            rv.use_event(text_area, "keydown", text_area_key_down)
            sl.IconButton("send", on_click=ask_chatgpt)
28 replies