Update UI

app.py

@@ -84,17 +84,17 @@ def bot(input_message: str, db_info="", temperature=0.1, top_p=0.9, top_k=0, rep
         formatted_query = final_query
 
     # Convert SQL to markdown (not required, but just to show how to use the markdown module)
-    final_query_markdown = f"```sql\n{formatted_query}\n```"
+    final_query_markdown = f"{formatted_query}"
     return final_query_markdown
 
-with gr.Blocks(css_theme="light") as demo:
-    header_md = gr.Markdown("""
-    # SQL Skeleton WizardCoder Demo
+with gr.Blocks(theme='gradio/soft') as demo:
+    header_md = gr.HTML("""
+    <h1 style="text-align: center">SQL Skeleton WizardCoder Demo</h1>
     """)
 
-    output_box = gr.Code(label="Generated SQL", lines=2, placeholder="Output will appear here after running the model.")
+    output_box = gr.Code(label="Generated SQL", lines=2, interactive=True)
     input_text = gr.Textbox(lines=3, placeholder='Input text here...', label='Input Text')
-    db_info = gr.Textbox(lines=6, placeholder='Example: | table_01 : column_01 , column_02 | table_02 : column_01 , column_02 | ...', label='Database Info')
+    db_info = gr.Textbox(lines=5, placeholder='Example: | table_01 : column_01 , column_02 | table_02 : column_01 , column_02 | ...', label='Database Info')
 
     with gr.Accordion("Hyperparameters", open=False):
         temperature = gr.Slider(label="Temperature", minimum=0.0, maximum=1.0, value=0.1, step=0.1)
@@ -102,7 +102,7 @@ with gr.Blocks(css_theme="light") as demo:
         top_k = gr.Slider(label="Top-k", minimum=0, maximum=200, value=0, step=1)
         repetition_penalty = gr.Slider(label="Repetition Penalty", minimum=1.0, maximum=2.0, value=1.08, step=0.1)
         
-    run_button = gr.Button("Generate SQL")
+    run_button = gr.Button("Generate SQL", variant="primary")
     
     examples = gr.Examples([
         ["What is the average, minimum, and maximum age for all French singers?", "| stadium : stadium_id , location , name , capacity , highest , lowest , average | singer : singer_id , name , country , song_name , song_release_year , age , is_male | concert : concert_id , concert_name , theme , stadium_id , year | singer_in_concert : concert_id , singer_id | concert.stadium_id = stadium.stadium_id | singer_in_concert.singer_id = singer.singer_id | singer_in_concert.concert_id = concert.concert_id |"],
@@ -112,6 +112,6 @@ with gr.Blocks(css_theme="light") as demo:
         ["List the names of all singers who performed in a concert with the theme 'Rock'", "| stadium : stadium_id , location , name , capacity , highest , lowest , average | singer : singer_id , name , country , song_name , song_release_year , age , is_male | concert : concert_id , concert_name , theme , stadium_id , year | singer_in_concert : concert_id , singer_id | concert.stadium_id = stadium.stadium_id | singer_in_concert.singer_id = singer.singer_id | singer_in_concert.concert_id = concert.concert_id |"]
     ], inputs=[input_text, db_info, temperature, top_p, top_k, repetition_penalty], fn=bot)
 
-    run_button.click(fn=bot, inputs=[input_text, db_info, temperature, top_p, top_k, repetition_penalty], outputs=output_box)
+    run_button.click(fn=bot, inputs=[input_text, db_info, temperature, top_p, top_k, repetition_penalty], outputs=output_box, api_name="txt2sql")
 
 demo.launch()

test.py

@@ -3,15 +3,15 @@ import gradio as gr
 def bot(input_message: str, db_info="", temperature=0.1, top_p=0.9, top_k=0, repetition_penalty=1.08):
     # For the stripped down version, let's just return a preset output
     final_query = "| stadium : stadium_id , location , name , capacity , highest , lowest , average | singer : singer_id , name , country , song_name , song_release_year , age , is_male | concert : concert_id , concert_name , theme , stadium_id , year | singer_in_concert : concert_id , singer_id | concert.stadium_id = stadium.stadium_id | singer_in_concert.singer_id = singer.singer_id | singer_in_concert.concert_id = concert.concert_id |" 
-    final_query_markdown = f"\n{final_query}\n"
+    final_query_markdown = f"{final_query}"
     return final_query_markdown
 
-with gr.Blocks(css_theme="light") as demo:
-    header_md = gr.Markdown("""
-    # SQL Skeleton WizardCoder Demo
+with gr.Blocks(theme='gradio/soft') as demo:
+    header_md = gr.HTML("""
+    <h1 style="text-align: center">SQL Skeleton WizardCoder Demo</h1>
     """)
 
-    output_box = gr.Code(label="Generated SQL", lines=2, placeholder="Output will appear here after running the model.")
+    output_box = gr.Code(label="Generated SQL", lines=2, interactive=True)
     input_text = gr.Textbox(lines=3, placeholder='Input text here...', label='Input Text')
     db_info = gr.Textbox(lines=6, placeholder='Example: | table_01 : column_01 , column_02 | table_02 : column_01 , column_02 | ...', label='Database Info')
 
@@ -21,7 +21,7 @@ with gr.Blocks(css_theme="light") as demo:
         top_k = gr.Slider(label="Top-k", minimum=0, maximum=200, value=0, step=1)
         repetition_penalty = gr.Slider(label="Repetition Penalty", minimum=1.0, maximum=2.0, value=1.08, step=0.1)
         
-    run_button = gr.Button("Generate SQL")
+    run_button = gr.Button("Generate SQL", variant="primary")
     
     examples = gr.Examples([
         ["What is the average, minimum, and maximum age for all French singers?", "| stadium : stadium_id , location , name , capacity , highest , lowest , average | singer : singer_id , name , country , song_name , song_release_year , age , is_male | concert : concert_id , concert_name , theme , stadium_id , year | singer_in_concert : concert_id , singer_id | concert.stadium_id = stadium.stadium_id | singer_in_concert.singer_id = singer.singer_id | singer_in_concert.concert_id = concert.concert_id |"],
@@ -31,6 +31,6 @@ with gr.Blocks(css_theme="light") as demo:
         ["List the names of all singers who performed in a concert with the theme 'Rock'", "| stadium : stadium_id , location , name , capacity , highest , lowest , average | singer : singer_id , name , country , song_name , song_release_year , age , is_male | concert : concert_id , concert_name , theme , stadium_id , year | singer_in_concert : concert_id , singer_id | concert.stadium_id = stadium.stadium_id | singer_in_concert.singer_id = singer.singer_id | singer_in_concert.concert_id = concert.concert_id |"]
     ], inputs=[input_text, db_info, temperature, top_p, top_k, repetition_penalty], fn=bot)
 
-    run_button.click(fn=bot, inputs=[input_text, db_info, temperature, top_p, top_k, repetition_penalty], outputs=output_box)
+    run_button.click(fn=bot, inputs=[input_text, db_info, temperature, top_p, top_k, repetition_penalty], outputs=output_box, api_name="txt2sql")
 
 demo.launch()