UI improvements

app.py

@@ -52,8 +52,16 @@ def run_edits(code):
 
 
 # User Interface Part
+theme = gr.themes.Monochrome(
+    primary_hue="indigo",
+    secondary_hue="blue",
+    neutral_hue="slate",
+    radius_size=gr.themes.sizes.radius_sm,
+    font=[gr.themes.GoogleFont("Open Sans"), "ui-sans-serif", "system-ui", "sans-serif"],
+)
 
-demo = gr.Blocks(title="Reasoning with StarCoder 💫", theme=gr.themes.Default())
+
+demo = gr.Blocks(title="Reasoning with StarCoder 💫", theme=theme)
 
 
 def render_instruction(mtd):
@@ -86,13 +94,14 @@ def render_instruction(mtd):
         )
 
 description = '''
-<h1 style="text-align: center; color: white; font-size: 40px;"><strong>Reasoning with <span style='color: #ff75b3;'> StarCoder 💫</span></strong></h1>
+<h1 style="text-align: center; font-size: 40px;"><strong>Reasoning with <span style='color: #ff75b3;'> StarCoder 💫</span></strong></h1>
 <br />
-<span style='color: white; font-size: 18px;'>This space is a playground for allowing users to interact with <a href="https://huggingface.co/bigcode/large-model" style="color: #ff75b3;">StarCoder</a> and assessing its reasoning capabilities. 
+<span style='font-size: 18px;'>This space is a playground for allowing users to interact with <a href="https://huggingface.co/bigcode/large-model" style="color: #ff75b3;">StarCoder</a> and assessing its reasoning capabilities. 
 User can select any of the evaluating strategies from the available ones <u>PAL</u>, <u>TA</u> and <u>MathPrompter</u> following with asking the query in English. The model generated code with respect to the selected strategy will be executed in the server and result is displayed.  
 In addition, the space enables users to edit the generated code and re-run it, providing a high degree of flexibility and customization in the solution process.</span>
 '''
 
+
 with demo:
     gr.Markdown(description, interactive=False)
     access_token = gr.Textbox(type="password", label="Hugging Face Access Token")