Update app.py

app.py

@@ -38,44 +38,68 @@ def respond(
 
 def main():
     description_text = """
-    </br><span style="font-size: 18px;">Use <strong>KGrammar</strong>, an offline-ready evaluation framework for Korean AI models, to detect grammatical errors in an LLM-generated response. KGrammar focuses solely on identifying errors, including foreign language usage, without assessing response accuracy or usefulness. Submit the inputs to obtain the grammar evaluation results.</span></br></br>
-    <span style="font-size: 18px;">1️⃣ <strong>User Message</strong>: Input the LLM-generated response to be evaluated.</span> </br>
-    <span style="font-size: 18px;">2️⃣ <strong>System Message</strong>: Provide the prompt used for grammar evaluation.</span> </br>
-    <span style="font-size: 18px;">3️⃣ <strong>Model Selection</strong>: Choose a KGrammar model for assessment.</span> </br>
-    <span style="font-size: 18px;">4️⃣ <strong>Max New Tokens</strong>: Set the maximum number of tokens for the evaluation output.</span> </br>
-    <span style="font-size: 18px;">5️⃣ <strong>Temperature</strong>: Adjust the temperature to balance predictability and creativity in KGrammar’s evaluation.</span> </br>
-    <span style="font-size: 18px;">6️⃣ <strong>Top-p (Nucleus Sampling)</strong>: Modify the top-p value to control fluency and diversity in the evaluation output.</span> </br></br>
-    <span style="font-size: 18px;"><a href="https://huggingface.co/davidkim205/kgrammar-2-9b" target="_blank" style="text-decoration: none; color: #000080;">Kgrammar model link << Click here!</a></span> </br></br>
+    </br><span style="font-size: 22px;">Use <strong>KGrammar</strong>, an offline-ready evaluation framework for Korean AI models, to detect grammatical errors in an LLM-generated response. KGrammar focuses solely on identifying errors, including foreign language usage, without assessing response accuracy or usefulness. Submit the inputs to obtain the grammar evaluation results.</span></br></br>
+    <span style="font-size: 22px;">1️⃣ <strong>User Message</strong>: Input the LLM-generated response to be evaluated.</span> </br>
+    <span style="font-size: 22px;">2️⃣ <strong>System Message</strong>: Provide the prompt used for grammar evaluation.</span> </br>
+    <span style="font-size: 22px;">3️⃣ <strong>Model Selection</strong>: Choose a KGrammar model for assessment.</span> </br>
+    <span style="font-size: 22px;">4️⃣ <strong>Max New Tokens</strong>: Set the maximum number of tokens for the evaluation output.</span> </br>
+    <span style="font-size: 22px;">5️⃣ <strong>Temperature</strong>: Adjust the temperature to balance predictability and creativity in KGrammar’s evaluation.</span> </br>
+    <span style="font-size: 22px;">6️⃣ <strong>Top-p (Nucleus Sampling)</strong>: Modify the top-p value to control fluency and diversity in the evaluation output.</span> </br></br>
+    <span style="font-size: 22px;"><a href="https://huggingface.co/davidkim205/kgrammar-2-9b" target="_blank" style="text-decoration: none; color: #000080;">Kgrammar model link << Click here!</a></span> </br></br>
     """
+
+    example1 = [["우선, 성인 티켓의 가격은 $4입니다. 총 판매된 티켓 수는 59장이며, 학생 티켓은 9장입니다. 我们需要计算学生票价。성인 티켓은 50장이 판매되었으므로, 성인 티켓으로 얻은 수익은 50 * 4 = $200입니다. Total revenue是 $222.50, 所以学生票的收入为 $222.50 - $200 = $22.50。俄语로 说, 每张学生票的价格 = $22.50 ÷ 9 = $2.50。학생 티켓의 가격은 2.5ดอลล่าครับ.", None, None, None, None, None]]
+    example2 = [["슈트라우스의 음악에서 모차르트의 음악 형태를 띈 악장의 끝에는 호른이 중심적으로 연주됩니다. Это инструмент, который связывает эпохи и стили, создавая неповторимую атмосферу и оставляя слушателей в восхищении.", None, None, None, None, None]]
+    example3 = [["충남도가 백신 접종 안내 및 이상반응 모니터링을 위해 협정을 맺은 곳은 SK텔레콤(SKT)입니다. SKT의 AI 기술인 '누구(NUGU)'를 활용한 '누구 백신 케어콜' 서비스를 통해 이 업무를 수행할 계획입니다.", None, None, None, None, None]]
+
     with gr.Blocks() as app:
         gr.Markdown("# Checking Korean Grammar Accuracy with KGrammar")
         gr.Markdown(description_text)
-        gr.Markdown("## Example")
+
+        gr.HTML("""<style>
+            #submit-btn {
+                background-color: #FF7F00; 
+                color: white;
+                border: none;
+                padding: 10px 20px;
+                font-size: 16px;
+                cursor: pointer;
+            }
+            #submit-btn:hover {
+                background-color: #DA8A67; 
+            }
+        </style>
+        """)
+
+        gr.Markdown("## Try it out!")
         with gr.Row():
             with gr.Column(scale=1):
-                gr.Textbox(label="Input Example",
-                           value="우선, 성인 티켓의 가격은 $4입니다. \n총 판매된 티켓 수는 59장이며, 학생 티켓은 9장입니다. 我们需要计算学生票价。\n성인 티켓은 50장이 판매되었으므로, 성인 티켓으로 얻은 수익은 50 * 4 = $200입니다. \nTotal revenue是 $222.50, 所以学生票的收入为 $222.50 - $200 = $22.50。俄语로 说, 每张学生票的价格 = $22.50 ÷ 9 = $2.50。\n학생 티켓의 가격은 2.5ดอลล่าครับ.",
-                           max_lines=7)
+                text1 = gr.Textbox(label="User Message")
+                text2 = gr.Textbox(value="한국어 문맥상 부자연스러운 부분을 찾으시오. 오류 문장과 개수는 <incorrect grammar> </incorrect grammar> tag, 즉 <incorrect grammar> - 오류 문장과 설명 </incorrect grammar> 안에 담겨 있으며, <wrong count> </wrong count> tag, 즉 <wrong count> 오류 개수 </wrong count> 이다.", label="System message")
+                dropdown = gr.Dropdown(choices=["davidkim205/kgrammar-2-1b", "davidkim205/kgrammar-2-3b"], value="davidkim205/kgrammar-2-1b", label="Model Selection")
+                slider1 = gr.Slider(minimum=1, maximum=2048, value=1024, step=1, label="Max new tokens")
+                slider2 = gr.Slider(minimum=0.1, maximum=4.0, value=1.0, step=0.1, label="Temperature")
+                slider3 = gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p (nucleus sampling)")
+                submit = gr.Button("Submit", elem_id="submit-btn")
             with gr.Column(scale=1):
-                gr.Textbox(label="Output Example",
-                           value="<incorrect grammar>```\n- \"我们需要计算学生票价。\" 문장에서 중국어 사용이 문맥상 부자연스럽습니다.\n- \"Total revenue是 $222.50, 所以学生票的收入为 $222.50 - $200 = $22.50。\" 문장에서 중국어 사용이 문맥상 부자연스럽습니다.\n- \"俄语로 说, 每张学生票的价格 = $22.50 ÷ 9 = $2.50。\" 문장에서 중국어 사용이 문맥상 부자연스럽습니다.\n- \"학생 티켓의 가격은 2.5ดอลล่าครับ.\" 문장에서 태국어 사용이 문맥상 부자연스럽습니다.\n</incorrect grammar> <wrong count>4</wrong count>\n```",
-                           max_lines=7)
-        gr.Markdown("## Try it out!")
-        gr.Interface(
+                output = gr.Textbox(label="Output")
+
+        gr.Markdown("")
+        gr.Markdown("## Examples")
+        with gr.Row():
+            with gr.Column():
+                gr.Examples(label="Example1", examples=example1, inputs=[text1, text2, dropdown, slider1, slider2, slider3])
+            with gr.Column():
+                gr.Examples(label="Example2", examples=example2, inputs=[text1, text2, dropdown, slider1, slider2, slider3])
+            with gr.Column():
+                gr.Examples(label="Example3", examples=example3, inputs=[text1, text2, dropdown, slider1, slider2, slider3])
+
+        submit.click(
             fn=respond,
-            inputs=[
-                gr.Textbox(label="User Message"),
-                gr.Textbox(
-                    value="한국어 문맥상 부자연스러운 부분을 찾으시오. 오류 문장과 개수는 <incorrect grammar> </incorrect grammar> tag, 즉 <incorrect grammar> - 오류 문장과 설명 </incorrect grammar> 안에 담겨 있으며, <wrong count> </wrong count> tag, 즉 <wrong count> 오류 개수 </wrong count> 이다.",
-                    label="System message"),
-                gr.Dropdown(choices=["davidkim205/kgrammar-2-1b", "davidkim205/kgrammar-2-3b"],
-                            value="davidkim205/kgrammar-2-1b", label="Model Selection"),
-                gr.Slider(minimum=1, maximum=2048, value=1024, step=1, label="Max new tokens"),
-                gr.Slider(minimum=0.1, maximum=4.0, value=1.0, step=0.1, label="Temperature"),
-                gr.Slider(minimum=0.1, maximum=1.0, value=0.95, step=0.05, label="Top-p (nucleus sampling)"),
-            ],
-            outputs="textbox"
+            inputs=[text1, text2, dropdown, slider1, slider2, slider3],
+            outputs=output
         )
+
     app.launch()