update layout

app.css

@@ -0,0 +1,57 @@
+.title-content {
+  font-size: 24px;
+  font-weight: 600;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.sub-title-content {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 18px;
+}
+
+.main-area {
+  border-radius: 10px;
+  padding: 20px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+}
+
+.probelm-example-container {
+  position: relative;
+  padding: 24px 8px 8px 8px;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 10px;
+}
+
+.probelm-example-title-content {
+  position: absolute;
+  top: 0;
+  left: 0;
+  border-right: 1px solid rgba(0, 0, 0, 0.15);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 10px 0 10px 0;
+}
+
+.probelm-example-another {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0 10px 0 10px;
+}
+
+.probelm-example-copy {
+  position: absolute;
+  top: 0;
+  right: 0;
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 0 10px 0 10px;
+}
+
+.right {
+  border: 1px solid rgba(0, 0, 0, 0.15);
+  border-radius: 10px;
+}

app.py

@@ -16,10 +16,10 @@ from sympy.parsing.latex import parse_latex
 from openai import OpenAI
 
 
-client = OpenAI(
-    base_url=os.environ.get("SERVER_URL"),
-    api_key=os.environ.get("HF_TOKEN"),
-)
+# client = OpenAI(
+#     base_url=os.environ.get("SERVER_URL"),
+#     api_key=os.environ.get("HF_TOKEN"),
+# )
 
 
 @dataclass
@@ -749,96 +749,49 @@ def clear():
     return "", 0.1, "", problem_1_display, problem_2_display, problem_1_full, problem_2_full
 
 
-css = """
-.top-margin { 
-    margin-top: 20px; 
-}
-
-.problem-examples-container {
-    display: flex;
-    align-items: center;
-    margin-bottom: 10px;
-    border-radius: 8px;
-    border: 1px solid rgb(229, 231, 235);
-    padding: 24px 16px 10px 16px;
-    position: relative;
-}
-
-.copy-button {
-    flex: none;
-}
-.problem-container-label{
-    position: absolute;
-    top: 4px;
-    left: 6px;
-    color: rgb(107, 114, 128);
-}
-"""
-
-
-with gr.Blocks(css=css) as demo:
-    latex_delimiters = [
-        {"left": "[", "right": "]", "display": True},
-    ]
+with open("app.css", "r") as f:
+    css = f.read()
 
-    problem_1_display, problem_2_display, problem_1_full, problem_2_full = update_problems()
+latex_delimiters = [
+    {"left": "[", "right": "]", "display": True},
+]
 
-    with gr.Row(elem_classes="problem-examples-container"):
-        gr.Markdown(
-            value="Problem example 1", latex_delimiters=latex_delimiters, elem_classes="problem-container-label"
-        )
-        problem_example_1 = gr.Markdown(value=problem_1_display, elem_classes="problem-text")
-        copy_btn_1 = gr.Button("Copy", elem_classes="copy-button")
-    with gr.Row(elem_classes="problem-examples-container"):
-        gr.Markdown(
-            value="Problem example 2", latex_delimiters=latex_delimiters, elem_classes="problem-container-label"
-        )
-        problem_example_2 = gr.Markdown(value=problem_2_display, elem_classes="problem-text")
-        copy_btn_2 = gr.Button("Copy", elem_classes="copy-button")
-
-    with gr.Row():
-        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():
-        out = gr.Markdown(elem_classes=["top-margin"], latex_delimiters=latex_delimiters)
-    with gr.Row():
-        btn = gr.Button("Run")
-        btn_clear = gr.Button("Clear")
-
-    btn.click(fn=solve_problem, inputs=[inp, temperature], outputs=out)
-
-    problem_1_full_hidden = gr.Markdown(value=problem_1_full, visible=False)
-    problem_2_full_hidden = gr.Markdown(value=problem_2_full, visible=False)
-
-    copy_btn_1.click(fn=copy_problem_to_input, inputs=[problem_1_full_hidden], outputs=[inp])
-    copy_btn_2.click(fn=copy_problem_to_input, inputs=[problem_2_full_hidden], outputs=[inp])
-
-    btn_clear.click(
-        fn=clear,
-        inputs=[],
-        outputs=[
-            inp,
-            temperature,
-            out,
-            problem_example_1,
-            problem_example_2,
-            problem_1_full_hidden,
-            problem_2_full_hidden,
-        ],
-        scroll_to_output=True,
-    )
+with gr.Blocks(css=css, title="Math Olympiad Solver") as demo:
+    with gr.Row(elem_classes="title"):
+        gr.HTML("Math Olympiad Solver", elem_classes="title-content")
 
-    demo.load(
-        update_problems,
-        inputs=None,
-        outputs=[
-            problem_example_1,
-            problem_example_2,
-            problem_1_full_hidden,
-            problem_2_full_hidden,
-        ],
-    )
+    with gr.Row(elem_classes="sub-title"):
+        gr.HTML("Here may need to add some description string", elem_classes="sub-title-content")
+
+    with gr.Row(elem_classes="main-area"):
+        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")
+
+                with gr.Blocks(elem_classes="action-container"):
+                    gr.HTML("another", elem_classes="probelm-example-another")
+                    gr.HTML("copy", elem_classes="probelm-example-copy")
+
+                with gr.Row(elem_classes="copy-icon-container"):
+                    gr.Markdown(
+                        value="Problem example 2",
+                        latex_delimiters=latex_delimiters,
+                        elem_classes="probelm-example-content",
+                    )
+
+            with gr.Accordion("Advanced Options", open=False):
+                temperature = gr.Slider(minimum=0.0, maximum=1.0, value=0.1, step=0.1, label="Temperature")
+
+            inp = gr.Textbox(placeholder="Problem", label="Problem input", lines=5)
+
+            with gr.Row():
+                btn = 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(latex_delimiters=latex_delimiters)
 
 if __name__ == "__main__":
     demo.queue(default_concurrency_limit=5).launch()