first try

app.py

@@ -163,44 +163,32 @@ async () => {
 """
 
 with gr.Blocks(css="style.css") as demo:
-
- 
-    
     # these are hidden buttons that are used to trigger the canvas changes
     line = gr.Checkbox(label="line", value=False, elem_id="cb-line")
     eraser = gr.Checkbox(label="eraser", value=False, elem_id="cb-eraser")
-    with gr.Row(elem_id="main_row"):
-        with gr.Column(elem_id="column_input"):
-            image = gr.Image(
-                source="canvas", tool="color-sketch", type="pil", image_mode="L",
-                invert_colors=True, shape=(512, 512), brush_radius=4, height=440, width=440,
-                brush_color="#000000", interactive=True, show_download_button=False, elem_id="input_image", show_label=False)
-            download_sketch = gr.Button("Download sketch", scale=1, elem_id="download_sketch")
-            gr.HTML("""
-            <div class="button-row">
-                <div id="my-div-pencil" class="pad2"> <button id="my-toggle-pencil" onclick="return togglePencil(this)"></button> </div>
-                <div id="my-div-eraser" class="pad2"> <button id="my-toggle-eraser" onclick="return toggleEraser(this)"></button> </div>
-                <div class="pad2"> <button id="my-button-clear" onclick="return DELETE_SKETCH_FUNCTION(this)"></button> </div>
-            </div>
-            """)
-            with gr.Row():
-                item = gr.Radio(choices=ITEMS_NAMES, value=DEFAULT_ITEM_NAME)
-       
-
-        with gr.Column(elem_id="column_output"):
-            result = gr.Image(label="Result", height=440, width=440, elem_id="output_image", show_label=False, show_download_button=True)
-            download_output = gr.Button("Download output", elem_id="download_output")
-        gr.HTML("""
-            <button id="fullscreen" onclick="document.body.querySelector('#main_row').requestFullscreen();">fullscreen</button>
-            """)
-
-    
-    eraser.change(fn=lambda x: gr.update(value=not x), inputs=[eraser], outputs=[line]).then(update_canvas, [line, eraser], [image])
-    line.change(fn=lambda x: gr.update(value=not x), inputs=[line], outputs=[eraser]).then(update_canvas, [line, eraser], [image])
+    with gr.Row(elem_id="header_block"):
+        gr.HTML("""<img src="assets/title.png" alt="title" /><img src="assets/logos.png" alt="title" />""")
+    with gr.Column(elem_id="main_block"):
+        with gr.Row(elem_id="board_row"):
+            with gr.Group(elem_id="input_image_container", elem_classes="image_container" ):
+                image = gr.Image(
+                    source="canvas", tool="color-sketch", type="pil", image_mode="L",
+                    invert_colors=True, shape=(512, 512), brush_radius=4, height=440, width=440,
+                    brush_color="#000000", interactive=True, show_download_button=False, elem_id="input_image", show_label=False)
+                gr.HTML("""<img src="assets/drawCta.png" id="draw_cta" alt="draw here image" />
+                    <button id="eraser" onclick="return DELETE_SKETCH_FUNCTION(this)">
+                    <span id="eraser_icon"></span>
+                    </button>""")
+            with gr.Group(elem_id="output_image_container", elem_classes="image_container"):
+                result = gr.Image(label="Result", height=440, width=440, elem_id="output_image", show_label=False, show_download_button=True)
+        with gr.Row(elem_id="radio_row"):
+            item = gr.Radio(choices=ITEMS_NAMES, value=DEFAULT_ITEM_NAME)
+    with gr.Row(elem_id="footer_block"):
+        gr.HTML("""<button id="fullscreen" onclick="document.body.querySelector('#main_row').requestFullscreen();" class="fullscreen" title="fullscreen"></button>""")
 
     demo.load(None,None,None,_js=scripts)
     inputs = [image, item]
-    outputs = [result, download_sketch, download_output]
+    outputs = [result]
     item.change(fn=run, inputs=inputs, outputs=outputs)
     image.change(fn=run, inputs=inputs, outputs=outputs,)