Integrate business logic

app.css

@@ -39,7 +39,7 @@
 .probelm-example-another {
   position: absolute;
   top: 0;
-  right: 22.4px;
+  right: 27.4px;
   border-left: 1px solid rgba(0, 0, 0, 0.15);
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0 0px 0 10px;
@@ -48,6 +48,7 @@
   justify-content: center;
   height: 28.49px;
   width: 36px;
+  cursor: pointer;
 }
 
 .probelm-example-another > svg {
@@ -62,14 +63,15 @@
   border-left: 1px solid rgba(0, 0, 0, 0.15);
   border-bottom: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 0 10px 0 0px;
-  padding: 4px 8px;
+  padding: 4px 12px;
+  cursor: pointer;
 }
 
 .right {
   border: 1px solid rgba(0, 0, 0, 0.15);
   border-radius: 10px;
   position: relative;
-  padding: 28px 14p 14p 14px;
+  padding: 40px 14px 14px 14px;
   min-height: 500px;
 }
 
@@ -86,4 +88,6 @@
 .solution-content {
   border-radius: 10px;
   border: 1px solid rgba(0, 0, 0, 0.15);
+  height: 480px;
+  overflow-y: visible;
 }

app.py

@@ -724,42 +724,39 @@ example_data = datasets.load_dataset(
 )
 
 
-def get_random_problems():
-    examples = random.sample(list(example_data), 2)
-    problems = [ex["problem"] for ex in examples]
-    return problems[0], problems[1]
+with open("app.css", "r") as f:
+    css = f.read()
+
+with open("./static/icon/reset.svg", "r") as f:
+    reset_svg = f.read()
+
+latex_delimiters = [
+    {"left": "[", "right": "]", "display": True},
+]
 
 
-def copy_problem_to_input(problem):
+def get_random_problem():
+    example = random.choice(list(example_data))
+    problem = example["problem"]
     return problem
 
 
-def update_problems():
-    problem_1_text, problem_2_text = get_random_problems()
-    return (
-        problem_1_text[:100] + "..." if len(problem_1_text) > 100 else problem_1_text,
-        problem_2_text[:100] + "..." if len(problem_2_text) > 100 else problem_2_text,
-        problem_1_text,
-        problem_2_text,
+def update_example_problem():
+    problem_example_text = get_random_problem()
+    problem_example_text_display = (
+        problem_example_text[:100] + "..." if len(problem_example_text) > 100 else problem_example_text
     )
+    return problem_example_text, problem_example_text_display
 
 
 def clear():
-    problem_1_display, problem_2_display, problem_1_full, problem_2_full = update_problems()
-    return "", 0.1, "", problem_1_display, problem_2_display, problem_1_full, problem_2_full
-
-
-with open("app.css", "r") as f:
-    css = f.read()
-
-with open("./static/icon/reset.svg", "r") as f:
-    reset_svg = f.read()
+    problem_example_text, problem_example_text_display = update_example_problem()
+    return "", 0.1, "", problem_example_text_display, problem_example_text
 
-latex_delimiters = [
-    {"left": "[", "right": "]", "display": True},
-]
 
 with gr.Blocks(css=css, title="Math Olympiad Solver") as demo:
+    problem_example_text, problem_example_text_display = update_example_problem()
+
     with gr.Row(elem_classes="title"):
         gr.HTML("Math Olympiad Solver", elem_classes="title-content")
 
@@ -770,15 +767,15 @@ with gr.Blocks(css=css, title="Math Olympiad Solver") as demo:
         with gr.Column(scale=1, elem_classes="left"):
             with gr.Row(elem_classes="probelm-example-container"):
                 with gr.Blocks(elem_classes="probelm-example-title"):
-                    gr.HTML("Probelm example", elem_classes="probelm-example-title-content")
+                    gr.HTML(problem_example_text_display, elem_classes="probelm-example-title-content")
 
                 with gr.Blocks(elem_classes="action-container"):
-                    gr.HTML(reset_svg, elem_classes="probelm-example-another")
-                    gr.HTML("copy", elem_classes="probelm-example-copy")
+                    gr.Button("", elem_classes="probelm-example-another", icon=reset_svg)
+                    copy_btn = gr.Button("Copy", elem_classes="probelm-example-copy")
 
                 with gr.Row(elem_classes="copy-icon-container"):
-                    gr.Markdown(
-                        value="Problem example 2",
+                    problem_example = gr.Markdown(
+                        problem_example_text_display,
                         latex_delimiters=latex_delimiters,
                         elem_classes="probelm-example-content",
                     )
@@ -789,12 +786,38 @@ with gr.Blocks(css=css, title="Math Olympiad Solver") as demo:
                 temperature = gr.Slider(minimum=0.0, maximum=1.0, value=0.1, step=0.1, label="Temperature")
 
             with gr.Row():
-                btn = gr.Button("Run")
+                btn_run = gr.Button("Run")
                 btn_clear = gr.Button("Clear")
 
         with gr.Column(scale=1, elem_classes="right"):
             gr.HTML("Solution", elem_classes="solution-title-content")
             out = gr.Markdown(elem_classes="solution-content", latex_delimiters=latex_delimiters)
 
+        problem_example_text_hidden = gr.Markdown(value=problem_example_text, visible=False)
+        btn_run.click(fn=solve_problem, inputs=[inp, temperature], outputs=out)
+
+        copy_btn.click(fn=lambda example: example, inputs=[problem_example_text_hidden], outputs=[inp])
+
+        btn_clear.click(
+            fn=clear,
+            inputs=[],
+            outputs=[
+                inp,
+                temperature,
+                out,
+                problem_example,
+                problem_example_text_hidden,
+            ],
+        )
+
+        demo.load(
+            update_example_problem,
+            inputs=None,
+            outputs=[
+                problem_example,
+                problem_example_text_hidden,
+            ],
+        )
+
 if __name__ == "__main__":
     demo.queue(default_concurrency_limit=5).launch()