From 78f0e1150614348b83d5c651f4ea6ae6d7701a79 Mon Sep 17 00:00:00 2001 From: Alexander Metzger Date: Tue, 30 Apr 2024 01:18:15 -0700 Subject: [PATCH 1/7] added tooltips to copilot --- daras_ai_v2/doc_search_settings_widgets.py | 2 +- daras_ai_v2/text_to_speech_settings_widgets.py | 2 +- gooey_ui/components/__init__.py | 5 +++++ recipes/VideoBots.py | 15 +++++++-------- 4 files changed, 14 insertions(+), 10 deletions(-) diff --git a/daras_ai_v2/doc_search_settings_widgets.py b/daras_ai_v2/doc_search_settings_widgets.py index 0598c66e8..4619d97ca 100644 --- a/daras_ai_v2/doc_search_settings_widgets.py +++ b/daras_ai_v2/doc_search_settings_widgets.py @@ -39,7 +39,7 @@ def document_uploader( accept: typing.Iterable[str] = None, accept_multiple_files=True, ) -> list[str] | str: - st.write(label, className="gui-input") + st.write(label, className="gui-input", unsafe_allow_html=True) documents = st.session_state.get(key) or [] if isinstance(documents, str): documents = [documents] diff --git a/daras_ai_v2/text_to_speech_settings_widgets.py b/daras_ai_v2/text_to_speech_settings_widgets.py index 895bb8fbe..dba25c5c6 100644 --- a/daras_ai_v2/text_to_speech_settings_widgets.py +++ b/daras_ai_v2/text_to_speech_settings_widgets.py @@ -373,7 +373,7 @@ def elevenlabs_selector(page): ) elevenlabs_use_custom_key = st.checkbox( - "Use custom API key + Voice ID", + f"Use custom API key + Voice ID {st.tooltip('[Learn how](https://gooey.ai/docs/guides/lipsync-videos-with-custom-voices) to add custom voices!')}", value=bool(st.session_state.get("elevenlabs_api_key")), ) if elevenlabs_use_custom_key: diff --git a/gooey_ui/components/__init__.py b/gooey_ui/components/__init__.py index e4ec593a1..297d41491 100644 --- a/gooey_ui/components/__init__.py +++ b/gooey_ui/components/__init__.py @@ -979,3 +979,8 @@ def js(src: str, **kwargs): args=kwargs, ), ).mount() + + +def tooltip(text: str): + # must be one line to work with input labels + return f'{text}' diff --git a/recipes/VideoBots.py b/recipes/VideoBots.py index 618ac0c2d..6e996022f 100644 --- a/recipes/VideoBots.py +++ b/recipes/VideoBots.py @@ -347,8 +347,8 @@ def render_description(self): def render_form_v2(self): st.text_area( - """ - #### 📝 Instructions + f""" + #### 📝 Instructions {st.tooltip("[Learn more](https://gooey.ai/docs/guides/build-your-ai-copilot/craft-your-ai-copilots-personality) about how to prompt your copilot's personality!")} """, key="bot_script", height=300, @@ -365,9 +365,8 @@ def render_form_v2(self): ) document_uploader( - """ - #### 📄 Knowledge - Add documents or links to give your copilot a knowledge base. When asked a question, we'll search them to generate an answer with citations. + f""" + #### 📄 Knowledge {st.tooltip("Add documents or links to give your copilot a knowledge base. When asked a question, we'll search them to generate an answer with citations. [Learn more](https://gooey.ai/docs/guides/build-your-ai-copilot/curate-your-knowledge-base-documents)")} """, accept=["audio/*", "application/*", "video/*", "text/*"], ) @@ -492,7 +491,7 @@ def render_settings(self): ): st.markdown("##### 🔠 Translation Settings") enable_glossary = st.checkbox( - "📖 Add Glossary", + f'📖 Add Glossary {st.tooltip("[Learn more](https://gooey.ai/docs/guides/build-your-ai-copilot/advanced-settings#fine-tuned-language-understanding-with-custom-glossaries) about how to super-charge your copilots domain specific language understanding!")}', value=bool( st.session_state.get("input_glossary_document") or st.session_state.get("output_glossary_document") @@ -522,8 +521,8 @@ def render_settings(self): if documents: st.write("#### 📄 Knowledge Base") st.text_area( - """ - ###### 👩‍🏫 Search Instructions + f""" + ###### 👩‍🏫 Search Instructions {st.tooltip("[Learn how](https://gooey.ai/docs/guides/build-your-ai-copilot/advanced-settings) to get the most out of your copilot with advanced settings.")} How should the LLM interpret the results from your knowledge base? """, key="task_instructions", From ab8ea533148468f831d25ff17567b6f8e6a6dd62 Mon Sep 17 00:00:00 2001 From: Alexander Metzger Date: Tue, 30 Apr 2024 01:25:48 -0700 Subject: [PATCH 2/7] more readable --- gooey_ui/components/__init__.py | 11 +++++++++-- 1 file changed, 9 insertions(+), 2 deletions(-) diff --git a/gooey_ui/components/__init__.py b/gooey_ui/components/__init__.py index 297d41491..0b94d3334 100644 --- a/gooey_ui/components/__init__.py +++ b/gooey_ui/components/__init__.py @@ -982,5 +982,12 @@ def js(src: str, **kwargs): def tooltip(text: str): - # must be one line to work with input labels - return f'{text}' + """Usage: st.markdown(f'Some text that needs a tooltip. {st.tooltip("The tooltip text")}')""" + return f""" + + + {text} + + """.replace( + "\n", "" + ) # must not have newlines to work in markdown From f79600cf9611ecf90872399fa9c7aca4d9facea3 Mon Sep 17 00:00:00 2001 From: Alexander Metzger Date: Tue, 30 Apr 2024 12:34:39 -0700 Subject: [PATCH 3/7] lighter style --- gooey_ui/components/__init__.py | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/gooey_ui/components/__init__.py b/gooey_ui/components/__init__.py index 0b94d3334..8d543e593 100644 --- a/gooey_ui/components/__init__.py +++ b/gooey_ui/components/__init__.py @@ -985,7 +985,7 @@ def tooltip(text: str): """Usage: st.markdown(f'Some text that needs a tooltip. {st.tooltip("The tooltip text")}')""" return f""" - + {text} """.replace( From 26a2219bd8a681434b41fde186211cb9e7e5edbf Mon Sep 17 00:00:00 2001 From: Alexander Metzger Date: Tue, 30 Apr 2024 12:40:01 -0700 Subject: [PATCH 4/7] new icon and shadow --- gooey_ui/components/__init__.py | 4 ++-- 1 file changed, 2 insertions(+), 2 deletions(-) diff --git a/gooey_ui/components/__init__.py b/gooey_ui/components/__init__.py index 8d543e593..fbccb0351 100644 --- a/gooey_ui/components/__init__.py +++ b/gooey_ui/components/__init__.py @@ -984,8 +984,8 @@ def js(src: str, **kwargs): def tooltip(text: str): """Usage: st.markdown(f'Some text that needs a tooltip. {st.tooltip("The tooltip text")}')""" return f""" - - + + {text} """.replace( From 2c9a08cdb763b9c92d8856d26077c12027eab5c1 Mon Sep 17 00:00:00 2001 From: Alexander Metzger Date: Tue, 28 May 2024 03:02:26 -0700 Subject: [PATCH 5/7] move tooltips to gooey-ui --- daras_ai_v2/doc_search_settings_widgets.py | 6 ++++- .../text_to_speech_settings_widgets.py | 3 ++- gooey_ui/components/__init__.py | 24 +++++++++---------- recipes/VideoBots.py | 17 +++++++------ 4 files changed, 29 insertions(+), 21 deletions(-) diff --git a/daras_ai_v2/doc_search_settings_widgets.py b/daras_ai_v2/doc_search_settings_widgets.py index 4619d97ca..597b00b0e 100644 --- a/daras_ai_v2/doc_search_settings_widgets.py +++ b/daras_ai_v2/doc_search_settings_widgets.py @@ -38,8 +38,12 @@ def document_uploader( key: str = "documents", accept: typing.Iterable[str] = None, accept_multiple_files=True, + tooltip: str | None = None, ) -> list[str] | str: - st.write(label, className="gui-input", unsafe_allow_html=True) + with st.div(style={"display": "flex"}): + st.write(label, className="gui-input", unsafe_allow_html=True) + if tooltip: + st.tooltip(tooltip) documents = st.session_state.get(key) or [] if isinstance(documents, str): documents = [documents] diff --git a/daras_ai_v2/text_to_speech_settings_widgets.py b/daras_ai_v2/text_to_speech_settings_widgets.py index dba25c5c6..62d29ec5d 100644 --- a/daras_ai_v2/text_to_speech_settings_widgets.py +++ b/daras_ai_v2/text_to_speech_settings_widgets.py @@ -373,8 +373,9 @@ def elevenlabs_selector(page): ) elevenlabs_use_custom_key = st.checkbox( - f"Use custom API key + Voice ID {st.tooltip('[Learn how](https://gooey.ai/docs/guides/lipsync-videos-with-custom-voices) to add custom voices!')}", + "Use custom API key + Voice ID", value=bool(st.session_state.get("elevenlabs_api_key")), + tooltip="[Learn how](https://gooey.ai/docs/guides/lipsync-videos-with-custom-voices) to add custom voices!", ) if elevenlabs_use_custom_key: st.session_state["elevenlabs_voice_name"] = None diff --git a/gooey_ui/components/__init__.py b/gooey_ui/components/__init__.py index 487a28bc2..9abf88ca9 100644 --- a/gooey_ui/components/__init__.py +++ b/gooey_ui/components/__init__.py @@ -323,6 +323,8 @@ def text_area( placeholder: str = None, disabled: bool = False, label_visibility: LabelVisibility = "visible", + tooltip: str | None = None, + reverse_tooltip: bool = False, **props, ) -> str: style = props.setdefault("style", {}) @@ -359,6 +361,8 @@ def text_area( help=help, placeholder=placeholder, disabled=disabled, + tooltip=tooltip, + tooltip_direction="left" if reverse_tooltip else "right", **props, ), ).mount() @@ -755,6 +759,10 @@ def text_input( return value or "" +def tooltip(text: str, **props): + return _node("tooltip", text=text, **props) + + def date_input( label: str, value: str | None = None, @@ -882,6 +890,7 @@ def checkbox( key: str = None, help: str = None, *, + tooltip: str | None = None, disabled: bool = False, label_visibility: LabelVisibility = "visible", ) -> bool: @@ -894,6 +903,7 @@ def checkbox( disabled=disabled, label_visibility=label_visibility, default_value_attr="defaultChecked", + tooltip=tooltip, ) return bool(value) @@ -908,6 +918,7 @@ def _input_widget( disabled: bool = False, label_visibility: LabelVisibility = "visible", default_value_attr: str = "defaultValue", + tooltip: str | None = None, **kwargs, ) -> typing.Any: # if key: @@ -927,6 +938,7 @@ def _input_widget( default_value_attr: value, "help": help, "disabled": disabled, + "tooltip": tooltip, **kwargs, }, ).mount() @@ -978,15 +990,3 @@ def js(src: str, **kwargs): args=kwargs, ), ).mount() - - -def tooltip(text: str): - """Usage: st.markdown(f'Some text that needs a tooltip. {st.tooltip("The tooltip text")}')""" - return f""" - - - {text} - - """.replace( - "\n", "" - ) # must not have newlines to work in markdown diff --git a/recipes/VideoBots.py b/recipes/VideoBots.py index 3803e82ce..d4ba64ca1 100644 --- a/recipes/VideoBots.py +++ b/recipes/VideoBots.py @@ -351,10 +351,11 @@ def render_description(self): def render_form_v2(self): st.text_area( f""" - #### 📝 Instructions {st.tooltip("[Learn more](https://gooey.ai/docs/guides/build-your-ai-copilot/craft-your-ai-copilots-personality) about how to prompt your copilot's personality!")} + #### 📝 Instructions """, key="bot_script", height=300, + tooltip="[Learn more](https://gooey.ai/docs/guides/build-your-ai-copilot/craft-your-ai-copilots-personality) about how to prompt your copilot's personality!", ) prompt_vars_widget( "bot_script", @@ -368,10 +369,9 @@ def render_form_v2(self): ) document_uploader( - f""" - #### 📄 Knowledge {st.tooltip("Add documents or links to give your copilot a knowledge base. When asked a question, we'll search them to generate an answer with citations. [Learn more](https://gooey.ai/docs/guides/build-your-ai-copilot/curate-your-knowledge-base-documents)")} - """, + "#### 📄 Knowledge", accept=["audio/*", "application/*", "video/*", "text/*"], + tooltip="Add documents or links to give your copilot a knowledge base. When asked a question, we'll search them to generate an answer with citations. [Learn more](https://gooey.ai/docs/guides/build-your-ai-copilot/curate-your-knowledge-base-documents)", ) st.markdown("#### Capabilities") @@ -501,11 +501,12 @@ def render_settings(self): ): st.markdown("##### 🔠 Translation Settings") enable_glossary = st.checkbox( - f'📖 Add Glossary {st.tooltip("[Learn more](https://gooey.ai/docs/guides/build-your-ai-copilot/advanced-settings#fine-tuned-language-understanding-with-custom-glossaries) about how to super-charge your copilots domain specific language understanding!")}', + "📖 Add Glossary", value=bool( st.session_state.get("input_glossary_document") or st.session_state.get("output_glossary_document") ), + tooltip="[Learn more](https://gooey.ai/docs/guides/build-your-ai-copilot/advanced-settings#fine-tuned-language-understanding-with-custom-glossaries) about how to super-charge your copilots domain specific language understanding!", ) if enable_glossary: st.caption( @@ -531,12 +532,14 @@ def render_settings(self): if documents: st.write("#### 📄 Knowledge Base") st.text_area( - f""" - ###### 👩‍🏫 Search Instructions {st.tooltip("[Learn how](https://gooey.ai/docs/guides/build-your-ai-copilot/advanced-settings) to get the most out of your copilot with advanced settings.")} + """ + ###### 👩‍🏫 Search Instructions How should the LLM interpret the results from your knowledge base? """, key="task_instructions", height=300, + tooltip="[Learn how](https://gooey.ai/docs/guides/build-your-ai-copilot/advanced-settings) to get the most out of your copilot with advanced settings.", + reverse_tooltip=True, ) prompt_vars_widget( "task_instructions", From b3558722df5722e0fc61e1fdb1564882b52cadef Mon Sep 17 00:00:00 2001 From: Alexander Metzger Date: Tue, 28 May 2024 15:50:55 -0700 Subject: [PATCH 6/7] move to rendermarkdown --- daras_ai_v2/doc_search_settings_widgets.py | 5 +---- gooey_ui/components/__init__.py | 4 ---- 2 files changed, 1 insertion(+), 8 deletions(-) diff --git a/daras_ai_v2/doc_search_settings_widgets.py b/daras_ai_v2/doc_search_settings_widgets.py index 597b00b0e..457bc5fa2 100644 --- a/daras_ai_v2/doc_search_settings_widgets.py +++ b/daras_ai_v2/doc_search_settings_widgets.py @@ -40,10 +40,7 @@ def document_uploader( accept_multiple_files=True, tooltip: str | None = None, ) -> list[str] | str: - with st.div(style={"display": "flex"}): - st.write(label, className="gui-input", unsafe_allow_html=True) - if tooltip: - st.tooltip(tooltip) + st.write(label, tooltip=tooltip, unsafe_allow_html=True) documents = st.session_state.get(key) or [] if isinstance(documents, str): documents = [documents] diff --git a/gooey_ui/components/__init__.py b/gooey_ui/components/__init__.py index 9abf88ca9..5f6150ab4 100644 --- a/gooey_ui/components/__init__.py +++ b/gooey_ui/components/__init__.py @@ -759,10 +759,6 @@ def text_input( return value or "" -def tooltip(text: str, **props): - return _node("tooltip", text=text, **props) - - def date_input( label: str, value: str | None = None, From 172a9ba4e063c32f876301236860348d0b64db75 Mon Sep 17 00:00:00 2001 From: Alexander Metzger Date: Wed, 29 May 2024 22:30:57 -0700 Subject: [PATCH 7/7] remove unwarrented indirection --- gooey_ui/components/__init__.py | 4 ++-- recipes/VideoBots.py | 2 +- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/gooey_ui/components/__init__.py b/gooey_ui/components/__init__.py index 5f6150ab4..d03b0c24a 100644 --- a/gooey_ui/components/__init__.py +++ b/gooey_ui/components/__init__.py @@ -324,7 +324,7 @@ def text_area( disabled: bool = False, label_visibility: LabelVisibility = "visible", tooltip: str | None = None, - reverse_tooltip: bool = False, + tooltip_direction: typing.Literal["left", "right"] = "right", **props, ) -> str: style = props.setdefault("style", {}) @@ -362,7 +362,7 @@ def text_area( placeholder=placeholder, disabled=disabled, tooltip=tooltip, - tooltip_direction="left" if reverse_tooltip else "right", + tooltip_direction=tooltip_direction, **props, ), ).mount() diff --git a/recipes/VideoBots.py b/recipes/VideoBots.py index d4ba64ca1..64abf6b60 100644 --- a/recipes/VideoBots.py +++ b/recipes/VideoBots.py @@ -539,7 +539,7 @@ def render_settings(self): key="task_instructions", height=300, tooltip="[Learn how](https://gooey.ai/docs/guides/build-your-ai-copilot/advanced-settings) to get the most out of your copilot with advanced settings.", - reverse_tooltip=True, + tooltip_direction="left", ) prompt_vars_widget( "task_instructions",