add label

app.py

@@ -749,7 +749,8 @@ css = """
     margin-bottom: 10px;
     border-radius: 8px;
     border: 1px solid rgb(229, 231, 235);
-    padding: 10px 12px;
+    padding: 15px 12px 10px 12px;
+    position: relative;
 }
 
 # .problem-text {
@@ -764,6 +765,12 @@ css = """
 .copy-button {
     flex: none;
 }
+.problem-container-label{
+    position: absolute;
+    top: 3px;
+    left: 4px;
+    color: rgb(107, 114, 128);
+}
 """
 
 with gr.Blocks(css=css) as demo:
@@ -774,16 +781,22 @@ with gr.Blocks(css=css) as demo:
     problem_1_text, problem_2_text = get_random_problems()
 
     with gr.Row(elem_classes="problem-container"):
+        gr.Markdown(
+            value="Problem example 1", latex_delimiters=latex_delimiters, elem_classes="problem-container-label"
+        )
         problem_1_text_contract = problem_1_text[:120] + "..." if len(problem_1_text) > 100 else problem_1_text
         problem_1 = gr.Markdown(value=problem_1_text_contract, latex_delimiters=latex_delimiters)
         copy_btn_1 = gr.Button("Copy", elem_classes="copy-button")
     with gr.Row(elem_classes="problem-container"):
+        gr.Markdown(
+            value="Problem example 2", latex_delimiters=latex_delimiters, elem_classes="problem-container-label"
+        )
         problem_2_text_contract = problem_2_text[:120] + "..." if len(problem_2_text) > 100 else problem_2_text
         problem_2 = gr.Markdown(value=problem_2_text_contract, latex_delimiters=latex_delimiters)
         copy_btn_2 = gr.Button("Copy", elem_classes="copy-button")
 
     with gr.Row():
-        inp = gr.Textbox(placeholder="Problem", label="Problem", lines=5)
+        inp = gr.Textbox(placeholder="Problem", label="Problem input", lines=5)
     with gr.Accordion("Advanced Options", open=False):
         temperature = gr.Slider(minimum=0.0, maximum=1.0, value=0.1, step=0.1, label="Temperature")
     with gr.Row():