UI v2

prompts.py

@@ -10,6 +10,7 @@ Instructions:
 Result SVG XML:
 """,
         "display": True,
+        "uploadmode" : False,
         "example": "Three dots",
         "primer": '<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg"',
     },
@@ -27,6 +28,7 @@ Instructions:
 Result SVG XML:
 """,
         "display": True,
+        "uploadmode" : True,
         "example": "Change all colors to red",
         "primer": "",
     },
@@ -41,6 +43,7 @@ SVG XML:
 Description of the image:
 """,
         "display": False,
+        "uploadmode" : True,
         "example": "N/A",
         "primer": "",
     },
@@ -91,6 +94,7 @@ SVG XML in IBM design style:
 
 """,
         "display": False,
+        "uploadmode" : False,
         "example": "Three dots",
         "primer": '<?xml version="1.0" ?><svg xmlns="http://www.w3.org/2000/svg"',
     },
@@ -112,3 +116,6 @@ def get_prompt_example(promptid):
 
 def get_prompt_primer(promptid):
     return svg_prompts[promptid]["primer"]
+
+def get_prompt_uploadmode(promptid):
+    return svg_prompts[promptid]["uploadmode"]

svg_editor_gradio.py

@@ -9,32 +9,33 @@ from prompts import (
     get_prompt_template,
     get_prompt_example,
     get_prompt_primer,
+    get_prompt_uploadmode,
 )
 from data_images import svg_three_dots
+from ibm_watsonx_ai.wml_client_error import WMLClientError
 
 
-# Functions
+# Functions - input
 def read_file(uploaded_file):
     if uploaded_file:
         svg_xml = open(uploaded_file, "r").read()
-        data_string = xml_string_to_data_string(svg_xml)
+        encoded_data_string = xml_string_to_data_string(svg_xml)
         return (
-            data_string,
+            encoded_data_string,
             svg_xml,
-            html_img_preview(data_string),
-            xml_string_to_html_img(svg_xml),
+            html_img_preview(encoded_data_string),
         )
 
 
-def encoded_string_box_change(data_string: str):
+def input_encoded_string_box_change(data_string: str):
     # print(f"encoded_string_box_change:image_data:{data_string}")
     svg_xml = decode_b64_string_to_pretty_xml(data_string)
-    return svg_xml, html_img_preview(data_string), xml_string_to_html_img(svg_xml)
+    return svg_xml, html_img_preview(data_string)
 
 
-def xml_string_box_change(svg_xml: str):
+def input_xml_string_box_change(svg_xml: str):
     data_string = xml_string_to_data_string(svg_xml)
-    return data_string, html_img_preview(data_string), xml_string_to_html_img(svg_xml)
+    return data_string, html_img_preview(data_string)
 
 
 def xml_string_to_data_string(svg_xml: str):
@@ -44,38 +45,23 @@ def xml_string_to_data_string(svg_xml: str):
 
 
 def html_img_preview(data_string):
-    return r'<center><img width=100 src="%s"/><center>' % data_string
+    return f'<img src="{data_string}" style="display: block; margin-left: auto; margin-right: auto;"/>'
 
 
-def xml_string_to_html_img(svg_xml: str):
-    data_string = xml_string_to_data_string(svg_xml)
-    return html_img_preview(data_string)
-
-
-# def replace_color(svg_xml: str, color_from, color_to):
-#     print(
-#         f"replace_color:svg_xml:{svg_xml}, color_from:{color_from}, color_to:{color_to} "
-#     )
-#     if svg_xml and color_from and color_to:
-#         new_svg_xml = svg_xml.replace(color_from, color_to)
-#         data_string = xml_string_to_data_string(new_svg_xml)
-#         return data_string, new_svg_xml, html_img_preview(data_string)
-
-
-# def switch_colors(color_from, color_to):
-#     print(f"switch_colors:color_from:{color_from}, color_to:{color_to} ")
-#     return color_to, color_from
-
+image_placeholder = html_img_preview(svg_three_dots)
 
 # Functions - watsonx
 
 
-def wx_prompt_change(prompt_template_name):
-    return (
-        get_prompt_template(prompt_template_name),
-        get_prompt_example(prompt_template_name),
-        get_prompt_primer(prompt_template_name),
-    )
+def wx_prompt_drop_change(prompt_template_name):
+    show_upload = get_prompt_uploadmode(prompt_template_name)
+    return {
+        wx_prompt_box: get_prompt_template(prompt_template_name),
+        wx_instructions_box: get_prompt_example(prompt_template_name),
+        wx_primer_box: get_prompt_primer(prompt_template_name),
+        upload_row: gr.Row(visible=show_upload),
+        upload_accordeon: gr.Accordion(visible=show_upload),
+    }
 
 
 def wx_models_dropdown(wx_engine_state):
@@ -86,8 +72,11 @@ def wx_models_dropdown(wx_engine_state):
     if wx_engine is not None:
         model_list = wx_engine.list_models()
         default_value = (
-            (recommended_model if recommended_model in model_list else model_list[0]),
+            recommended_model if recommended_model in model_list else model_list[0]
         )
+        # print(f"wx_models_dropdown:model_list:{model_list}")
+        # print(f"wx_models_dropdown:default_value:{default_value}")
+
     return gr.Dropdown(
         label="Model",
         info=recommended_model + " recommended",
@@ -96,10 +85,30 @@ def wx_models_dropdown(wx_engine_state):
     )
 
 
-def wx_connect(wx_engine_state, apiendpoint, apikey, projectid):
-    wx_engine_state = wxEngine(apiendpoint, apikey, projectid)
-    print("watsonx.ai activated")
-    return wx_engine_state, wx_models_dropdown(wx_engine_state)
+def wx_connect_click(wx_engine_state, apiendpoint, apikey, projectid):
+    # if apiendpoint is not None and apikey is not None and projectid is not None:
+    try:
+        wx_engine_state = wxEngine(apiendpoint, apikey, projectid)
+        msg = "watsonx.ai sucessfully activated"
+        print(msg)
+        return (
+            wx_engine_state,
+            wx_models_dropdown(wx_engine_state),
+            gr.Accordion(open=False),
+            gr.Button(interactive=True),
+            gr.Textbox(msg),
+        )
+    except WMLClientError as ex:
+        template = "Exception {0} occurred: {1!r}"
+        msg = template.format(type(ex).__name__, ex.args)
+        print(msg)
+    return (
+        wx_engine_state,
+        [],
+        gr.Accordion(open=True),
+        gr.Button(interactive=False),
+        gr.Textbox(msg),
+    )
 
 
 def prepare_prompt(
@@ -136,7 +145,8 @@ def wx_generate(
         stop_sequences=["</svg>"],
     )
     print(f"wx_generate:wx_result:{wx_result}")
-    return wx_status, wx_result, xml_string_to_html_img(wx_result)
+    data_string = xml_string_to_data_string(wx_result)
+    return wx_status, data_string, wx_result, html_img_preview(data_string)
 
 
 def wx_stream(
@@ -157,211 +167,214 @@ def wx_stream(
     )
     for chunk in wx_result_generator:
         wx_result += chunk
-        yield f"Processing.{'.'*int(randrange(3))}", wx_result, None
+        status = f"Processing.{'.'*int(randrange(3))}"
+        yield status, status, wx_result, None
     print(f"wx_stream:wx_result:{wx_result}")
-    yield wx_status, wx_result, xml_string_to_html_img(wx_result)
+    data_string = xml_string_to_data_string(wx_result)
+    yield wx_status, data_string, wx_result, html_img_preview(data_string)
 
 
-def wx_result_box_change(wx_result):
-    return xml_string_to_html_img(wx_result)
+# Functions - output
 
 
-def wx_accept(svg_xml):
-    data_string = xml_string_to_data_string(svg_xml)
+def output_xml_string_box_change(xml_string):
+    data_string = xml_string_to_data_string(xml_string)
     return (
         data_string,
-        svg_xml,
+        xml_string,
         html_img_preview(data_string),
-        xml_string_to_html_img(svg_xml),
     )
 
 
-# APP
+# APP layout
 with gr.Blocks() as demo:
     gr.Markdown("# SVG editor")
-    with gr.Accordion("Get started:", open=True):
-        gr.Markdown(
-            """
-            - Create a new SVG: Select the prompt template 'Create SVG', enter a description in the 'Instructions' box and click 'Submit'
-            - Modify an existing SVG: Upload an SVG file, or paste an image string or SVG XML, then Select the prompt template 'Modify SVG', enter a change instruction in the 'Instructions' box and click 'Submit'
-            - Describe an SVG: Upload, paste or generate an SVG file, Select the prompt template 'Describe SVG' and click 'Submit' """
-        )
+    gr.Markdown(
+        """### Get started:
+        - Create a new SVG: Enter a description in the 'Instructions' box and click 'Submit'
+        - Modify an existing SVG: Upload an SVG file, or paste an image string or SVG XML, then Select the prompt template 'Modify SVG', enter a change instruction in the 'Instructions' box and click 'Submit'"""
+    )
 
-    # load env variables
-    status, env_apiendpoint, env_apikey, env_projectid = load_credentials()
     # init state - note gr.State() initial value must be deep-copyable - my wx_engine class is not
     wx_engine_state = gr.State(None)
-    with gr.Column():
-        # Encoded string and preview
-        with gr.Accordion("Load SVG:", open=True):
-            with gr.Row():
+    with gr.Row():  # main UI
+        with gr.Column(scale=0):  # watsonx setup
+            # prompt template selection
+            prompt_template_names = list_prompts()
+            default_prompt_template_name = prompt_template_names[0]
+            wx_prompt_drop = gr.Dropdown(
+                label="Action",
+                choices=prompt_template_names,
+                value=default_prompt_template_name,
+            )
+            # credentials
+            # load env variables
+            status_unused, env_apiendpoint, env_apikey, env_projectid = (
+                load_credentials()
+            )
+            with gr.Accordion("Credentials", open=True) as credentials_accordeon:
+                wx_creds_endpoint = gr.Textbox(
+                    label="Endpoint", value=env_apiendpoint, max_lines=1
+                )
+                wx_creds_apikey = gr.Textbox(
+                    label="API key", value=env_apikey, max_lines=1
+                )
+                wx_creds_projectid = gr.Textbox(
+                    label="Project id", value=env_projectid, max_lines=1
+                )
+                wx_connect_btn = gr.Button("Connect")
+            # model
+            wx_models_drop = wx_models_dropdown(None)
+            # prompt text and primer
+            wx_prompt_box = gr.Textbox(
+                info="Text",
+                show_label=False,
+                max_lines=5,
+                value=get_prompt_template(prompt_template_names[0]),
+            )
+            wx_primer_box = gr.Textbox(
+                info="Primer",
+                show_label=False,
+                max_lines=2,
+                value=get_prompt_primer(prompt_template_names[0]),
+            )
+        with gr.Column():  # main pane
+            # Upload
+            with gr.Row(
+                visible=get_prompt_uploadmode(default_prompt_template_name)
+            ) as upload_row:
                 # Upload an .svg file
-                uploaded_file = gr.File(scale=0, label="Upload an SVG file")
-                # Paste an image string
-                encoded_string_box = gr.Textbox(
+                input_file = gr.File(scale=0, label="Upload an SVG file")
+                # original preview
+                input_svg_preview = gr.HTML(image_placeholder)
+                # decoded SVG XML
+                input_xml_string_box = gr.Textbox(
+                    label="Input SVG XML",
+                    lines=7,
+                    max_lines=7,
+                    show_copy_button=True,
+                    scale=3,
+                )
+            with gr.Accordion(
+                label="Input encoded string",
+                open=False,
+                visible=get_prompt_uploadmode(default_prompt_template_name),
+            ) as upload_accordeon:
+                # Encoded image string
+                input_encoded_string_box = gr.Textbox(
                     label="Image string",
                     info="data:image/svg+xml;base64,...",
                     lines=7,
                     max_lines=7,
                     show_copy_button=True,
                     scale=3,
+                    container=False,
                 )
-                # original preview
-                encoded_svg_preview = gr.HTML(f"<img src='{svg_three_dots}'/>")
-            # Decoded string and preview
+
+            # modification
             with gr.Row():
-                xml_string_box = gr.Textbox(
-                    label="SVG XML",
+                wx_instructions_box = gr.Textbox(
+                    label="Instructions",
+                    scale=3,
+                    value=get_prompt_example(prompt_template_names[0]),
+                    show_copy_button=True,
+                )
+                wx_generate_btn = gr.Button("↓Generate↓", scale=0, interactive=False)
+            output_svg_preview = gr.HTML(image_placeholder)
+            output_xml_string_box = gr.Textbox(
+                label="Result SVG XML",
+                lines=7,
+                max_lines=7,
+                scale=3,
+                show_copy_button=True,
+            )
+            with gr.Accordion(label="Result encoded string", open=False):
+                output_encoded_string_box = gr.Textbox(
+                    label="Image string",
+                    info="data:image/svg+xml;base64,...",
                     lines=7,
                     max_lines=7,
                     show_copy_button=True,
                     scale=3,
-                )
-                # decoded preview
-                decoded_svg_preview = gr.HTML(f"<img src='{svg_three_dots}'/>")
-        # with gr.Row():  # Color changer
-        #     color_from_area = gr.ColorPicker(label="Search color:", value="#000000", scale=0)
-        #     color_switch_btn = gr.Button("<->", scale=0)
-        #     color_to_area = gr.ColorPicker(label="Replace color:", value="#FFFFFF", scale=0)
-        #     color_replace_btn = gr.Button("Replace", scale=0)
-
-        with gr.Accordion("watsonx.ai:", open=True):
-            with gr.Row():  # watsonx
-                with gr.Column(scale=0):
-                    with gr.Group():
-                        # credentials
-                        with gr.Accordion("Credentials:", open=True):
-                            wx_creds_endpoint = gr.Textbox(
-                                label="Endpoint", value=env_apiendpoint, max_lines=1
-                            )
-                            wx_creds_apikey = gr.Textbox(
-                                label="API key", value=env_apikey, max_lines=1
-                            )
-                            wx_creds_projectid = gr.Textbox(
-                                label="Project id", value=env_projectid, max_lines=1
-                            )
-                            wx_connect_btn = gr.Button("Connect")
-                        # model
-                        wx_models_drop = wx_models_dropdown(None)
-                        wx_connect_btn.click(
-                            fn=wx_connect,
-                            inputs=[
-                                wx_engine_state,
-                                wx_creds_endpoint,
-                                wx_creds_apikey,
-                                wx_creds_projectid,
-                            ],
-                            outputs=[wx_engine_state, wx_models_drop],
-                        )
-                        # prompt template
-                        prompt_template_names = list_prompts()
-                        wx_prompt_drop = gr.Dropdown(
-                            label="Prompt template",
-                            choices=prompt_template_names,
-                            value=prompt_template_names[0],
-                        )
-                        wx_prompt_box = gr.Textbox(
-                            info="Text",
-                            show_label=False,
-                            max_lines=5,
-                            value=get_prompt_template(prompt_template_names[0]),
-                        )
-                        wx_primer_box = gr.Textbox(
-                            info="Primer",
-                            show_label=False,
-                            max_lines=2,
-                            value=get_prompt_primer(prompt_template_names[0]),
-                        )
-                with gr.Column():
-                    with gr.Row():
-                        wx_instructions_box = gr.Textbox(
-                            label="Instructions",
-                            scale=3,
-                            value=get_prompt_example(prompt_template_names[0]),
-                            show_copy_button=True,
-                        )
-                        wx_submit_btn = gr.Button("↓Submit↓", scale=0)
-                        wx_accept_btn = gr.Button("↑Accept↑", scale=0)
-                    with gr.Row():
-                        wx_result_box = gr.Textbox(
-                            label="Result",
-                            lines=7,
-                            max_lines=7,
-                            scale=3,
-                            show_copy_button=True,
-                        )
-                        wx_svg_preview = gr.HTML(f"<img src='{svg_three_dots}'/>")
-                    wx_status_box = gr.Markdown("Status")
-
-                wx_prompt_drop.input(
-                    fn=wx_prompt_change,
-                    inputs=wx_prompt_drop,
-                    outputs=[wx_prompt_box, wx_instructions_box, wx_primer_box],
-                )
-                wx_submit_btn.click(
-                    # fn=wx_generate,
-                    fn=wx_stream,
-                    inputs=[
-                        wx_engine_state,
-                        wx_models_drop,
-                        wx_prompt_box,
-                        wx_instructions_box,
-                        wx_primer_box,
-                        xml_string_box,
-                    ],
-                    outputs=[wx_status_box, wx_result_box, wx_svg_preview],
-                    api_name="wx_generate",
-                )
-                wx_result_box.input(
-                    fn=wx_result_box_change,
-                    inputs=[wx_result_box],
-                    outputs=[wx_svg_preview],
-                )
-                wx_accept_btn.click(
-                    fn=wx_accept,
-                    inputs=[wx_result_box],
-                    outputs=[
-                        encoded_string_box,
-                        xml_string_box,
-                        encoded_svg_preview,
-                        decoded_svg_preview,
-                    ],
+                    container=False,
                 )
 
-    # Actions
-    encoded_string_box.input(
-        fn=encoded_string_box_change,
-        inputs=[encoded_string_box],
-        outputs=[xml_string_box, encoded_svg_preview, decoded_svg_preview],
+            wx_status_box = gr.Markdown("Status")
+
+    # Map controls to functions
+    wx_prompt_drop.input(
+        fn=wx_prompt_drop_change,
+        inputs=wx_prompt_drop,
+        outputs=[
+            wx_prompt_box,
+            wx_instructions_box,
+            wx_primer_box,
+            upload_row,
+            upload_accordeon,
+        ],
     )
-    uploaded_file.upload(
+    wx_connect_btn.click(
+        fn=wx_connect_click,
+        inputs=[
+            wx_engine_state,
+            wx_creds_endpoint,
+            wx_creds_apikey,
+            wx_creds_projectid,
+        ],
+        outputs=[
+            wx_engine_state,
+            wx_models_drop,
+            credentials_accordeon,
+            wx_generate_btn,
+            wx_status_box,
+        ],
+    )
+    input_file.upload(
         fn=read_file,
-        inputs=uploaded_file,
+        inputs=input_file,
         outputs=[
-            encoded_string_box,
-            xml_string_box,
-            encoded_svg_preview,
-            decoded_svg_preview,
+            input_encoded_string_box,
+            input_xml_string_box,
+            input_svg_preview,
         ],
     )
-    xml_string_box.input(
-        fn=xml_string_box_change,
-        inputs=[xml_string_box],
-        outputs=[encoded_string_box, encoded_svg_preview, decoded_svg_preview],
+    input_encoded_string_box.input(
+        fn=input_encoded_string_box_change,
+        inputs=[input_encoded_string_box],
+        outputs=[input_xml_string_box, input_svg_preview],
+    )
+    input_xml_string_box.input(
+        fn=input_xml_string_box_change,
+        inputs=[input_xml_string_box],
+        outputs=[input_encoded_string_box, input_svg_preview],
+    )
+    wx_generate_btn.click(
+        fn=wx_stream,
+        inputs=[
+            wx_engine_state,
+            wx_models_drop,
+            wx_prompt_box,
+            wx_instructions_box,
+            wx_primer_box,
+            input_xml_string_box,
+        ],
+        outputs=[
+            wx_status_box,
+            output_encoded_string_box,
+            output_xml_string_box,
+            output_svg_preview,
+        ],
+        api_name="wx_generate",
+    )
+    output_xml_string_box.input(
+        fn=output_xml_string_box_change,
+        inputs=[output_xml_string_box],
+        outputs=[
+            output_encoded_string_box,
+            output_xml_string_box,
+            output_svg_preview,
+        ],
     )
-    # color_switch_btn.click(
-    #     fn=switch_colors,
-    #     inputs=[color_from_area, color_to_area],
-    #     outputs=[color_from_area, color_to_area],
-    #     api_name="color_switch",
-    # )
-    # color_replace_btn.click(
-    #     fn=replace_color,
-    #     inputs=[xml_string_box, color_from_area, color_to_area],
-    #     outputs=[encoded_string_box, xml_string_box, svg_preview],
-    #     api_name="color_replace",
-    # )
-
 
 # Main
 if __name__ == "__main__":