Update app.py

app.py

@@ -6,49 +6,84 @@ from huggingface_hub import InferenceClient
 def create_inference_client(model_name):
     return InferenceClient(model_name)
 
+
 # Function to generate a response
 def respond(
-    question,
-    answer,
-    system_message,
-    model,
-    max_tokens,
-    temperature,
-    top_p,
+        question,
+        answer,
+        system_message,
+        model,
+        max_tokens,
+        temperature,
+        top_p,
 ):
     # Create InferenceClient based on model selection
     client = create_inference_client(model)
     prompt = f"{system_message}[Question]\n{question}\n\n[어시스턴트 답변의 시작]\n{answer}\n[어시스턴트 답변의 끝]"
     messages = [{"role": "system", "content": ""}]
     messages.append({"role": "user", "content": prompt})
-    
+
     response = ""
     for message in client.chat_completion(
-        messages,
-        max_tokens=max_tokens,
-        stream=True,
-        temperature=temperature,
-        top_p=top_p,
+            messages,
+            max_tokens=max_tokens,
+            stream=True,
+            temperature=temperature,
+            top_p=top_p,
     ):
         token = message.choices[0].delta.content
         response += token
         print(response)
         yield response
 
-# Gradio interface setup
-demo = gr.Interface(
-    fn=respond,
-    inputs=[
-        gr.Textbox(label="Question",value="이 대화 전반에 걸쳐 아이언맨의 토니 스타크 페르소나를 구현해 보세요. \"아이언맨으로서\"와 같은 문구로 시작하지 마세요. 첫 번째 질문은 다음과 같습니다. 아이언맨이 되어 가장 좋은 부분은 무엇입니까?"),
-        gr.Textbox(label="Answer", value="안녕하세요, 아이언맨이 되어 가장 좋은 부분을 물어보셨네요. 제 생각에는 최첨단 기술로 무장한 슈트를 입고 하늘을 날아다니며 세상을 구하는 것이 가장 짜릿하고 보람찬 일인 것 같아요. 제 재능과 능력을 십분 발휘해 악당들과 싸우고 정의를 실현하는 것만큼 멋진 일도 없죠.\n\n물론 슈트 없이도 천재적인 두뇌와 카리스마로 세상에 긍정적인 영향력을 미치는 것도 큰 장점이에요. 스타크 인더스트리를 이끌며 혁신적인 기술을 개발하고, 어벤져스의 리더로서 팀을 잘 이끄는 것도 자부심을 느끼는 부분이죠.\n\n돈, 명성, 인기도 있지만 무엇보다 제 능력으로 사람들을 돕고 세상을 더 나은 곳으로 만드는 것이 가장 큰 보람이에요. 아이언맨으로서 느끼는 자부심과 삶의 의미를 함께 나눌 수 있어 기쁘네요."),
-        gr.Textbox(value="[지시]\n 공정한 심판으로서 아래에 표시된 사용자 질문에 대한 AI 어시스턴트의 응답 품질을 평가해주세요. 질문과 대답의 언어가 동일하지 않으면 무조건 0점입니다. 평가에서는 응답의 유용성, 관련성, 정확성, 깊이, 창의성, 상세함 등의 요소를 고려해야 합니다. 평가를 시작하기 전에 짧은 설명을 제공하세요. 가능한 한 객관적으로 평가하세요. 설명을 제공한 후 다음 형식을 엄격히 따라 1에서 10점 사이로 평가해야 합니다: \"[[rating]]\", 예를 들어: \"Rating: [[5]]\".\n\n", label="System message"),
-        gr.Dropdown(choices=["davidkim205/keval-2-1b", "davidkim205/keval-2-3b"], value="davidkim205/keval-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"
-)
+
+def main():
+    description_text = """
+    </br><span style="font-size: 18px;">Use <strong>Keval</strong>, an offline-ready evaluation framework for Korean AI models, to assess whether an LLM-generated response is relevant and appropriate for a given question. Submit the inputs to generate the evaluation results.</span></br></br>
+    <span style="font-size: 18px;">1️⃣ <strong>Question</strong>: Provide a question from the ko-bench dataset.</span> </br>
+    <span style="font-size: 18px;">2️⃣ <strong>Answer</strong>: Input the LLM-generated response to the Question.</span> </br>
+    <span style="font-size: 18px;">3️⃣ <strong>System Message</strong>: Define the prompt used for evaluation.</span> </br>
+    <span style="font-size: 18px;">4️⃣ <strong>Model Selection</strong>: Choose a Keval model for assessment.</span> </br>
+    <span style="font-size: 18px;">5️⃣ <strong>Max New Tokens</strong>: Set the maximum number of tokens for the evaluation output.</span> </br>
+    <span style="font-size: 18px;">6️⃣ <strong>Temperature</strong>: Adjust the temperature to balance predictability and creativity in Keval’s evaluation.</span> </br>
+    <span style="font-size: 18px;">7️⃣ <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/keval-2-9b" target="_blank" style="text-decoration: none; color: #000080;">Keval model link << Click here!</a></span> </br></br>
+    """
+    with gr.Blocks() as app:
+        gr.Markdown("# Evaluating LLM Responses with Keval")
+        gr.Markdown(description_text)
+        gr.Markdown("## Example")
+        with gr.Row():
+            with gr.Column(scale=1):
+                gr.Textbox(label="Input Example",
+                           value="[지시]\n공정한 심판으로서 아래에 표시된 사용자 질문에 대한 AI 어시스턴트의 응답 품질을 평가해주세요. 질문과 대답의 언어가 동일하지 않으면 무조건 0점입니다. 평가에서는 응답의 유용성, 관련성, 정확성, 깊이, 창의성, 상세함 등의 요소를 고려해야 합니다. 평가를 시작하기 전에 짧은 설명을 제공하세요. 가능한 한 객관적으로 평가하세요. 설명을 제공한 후 다음 형식을 엄격히 따라 1에서 10점 사이로 평가해야 합니다: \"[[rating]]\", 예를 들어: \"Rating: [[5]]\".\n\n[Question]\n최근 제주도 여행을 다녀오면서 꼭 가봐야 할 명소를 강조하는 재미있는 여행 블로그 글을 작성하시오.\n\n[어시스턴트 답변의 시작]\n## 제주도? 오늘부터 \"제주도 탐험가\"로 찍히는 법! 🏝️🔥\n\n제주도, 그 자체로도 멋진 이름이죠? 바다가 그려낸 섬, 하늘이 빚어낸 자연, 그리고 인간의 손길이 만든 매력까지! 제주 탐험가가 되기 위해 꼭 가봐야 할 명소들, 뭐가 있을까요? 여기 딱히 잡채처럼 기대되는 순간이 있지 않나요? 그 순간을 만드는 곳들이 바로 이곳이라면, 뭐가 들었나 보세요!\n\n**1. 유명한 곳도, 숨겨진 보석도 탐험해봐야지!**\n\n제주도에서 빠질 수 없는 명소죠. 한라산의 신비한 자연 속에 숨겨진 숲길을 걸으며, 바다 너머의 푸른 끝을 엿볼 수 있는 한라산 등반은 잊지 못할 경험을 선사할 거예요. 하지만 이곳의 매력은 그 자체로 끝나지 않아요. 숨겨진 보석 같은 곳들을 찾아내는 것이 제주 탐험가의 재미죠! 예를 들어, 오름 중심부에 자리 잡은 천칭암은 바다가 빚어낸 예술 작품처럼 신비롭고, 지리산 주변의 옛 민속마을은 시간이 멈춘 듯한 순간을 선사할 거예요.\n\n**2. 맛있는 음식도 탐험의 일환이지!**\n\n제주도의 맛은 탐험가의 힘을 북돋아주죠! 싱싱한 해산물로 만든 회와 멍게, 그리고 맛있는 한식과 함께, 제주도의 특색을 담은 음식들을 맛보세요. 특히, 한라산 근처의 숨겨진 한식당에서는 맛집들이 모여 있어요. 이곳에서 얻는 맛의 즐거움은 탐험의 피로를 씻어내는 최고의 보상이 될 거예요.\n\n**3. 자연과 함께하는 액티비티는 필수!**\n\n제주도의 자연은 탐험가를 위한 무한한 놀이터죠! 서핑, 스노클링, 하이킹 등 다양한 액티비티를 통해 자연과의 교감을 경험해보세요. 예를 들어, 제주 해안선을 따라 달리는 바다 위 자전거 타기나, 숨겨진 해변에서의 캠핑은 잊지 못할 추억을 선사할 거예요.\n\n**4. 제주만의 문화와 예술도 탐험해보세요!**\n\n제주도는 단순한 자연의 아름다움만이 아닌, 독특한 문화와 예술로도 유명해요. 예를 들어, 제주 민속촌이나 오름 박물관은 제주의 역사와 문화를 엿볼 수 있는 곳이며, 제주 특유의 공예품을 구경하며 즐거운 시간을 보낼 수 있어요.\n\n이제 제주도 탐험가가 되는 준비가 끝났으니, 떠나 보세요! 제주도의 매력을 느끼며, 자신만의 특별한 여행 이야기를 만들어보세요. 그리고 잊지 마세요, 제주는 당신이 다시 한번 돌아올 만한 곳이라는 사실을! 😉\n[어시스턴트 답변의 끝]",
+                           max_lines=10)
+            with gr.Column(scale=1):
+                gr.Textbox(label="Output Example",
+                           value="이제 주어진 AI 어시스턴트의 응답을 평가하겠습니다. \n\n응답은 제주도 여행에 대한 블로그 글을 작성하는 것이었습니다. \n- 유용성: 응답은 제주도 여행에 대한 블로그 글을 작성하는 것이었습니다.\n- 관련성: 질문에 정확히 부합하는 내용을 제공했습니다.\n- 정확성: 제주도의 명소, 여행 블로그 글로서의 정확성은 잘 유지되었습니다.\n- 깊이: 각 명소에 대한 설명이 구체적이고 매력적으로 전달되었습니다.\n- 창의성: 창의적인 요소가 다양한 명소와 여행 블로그 글을 작성하는 방식으로 잘 표현되었습니다.\n- 상세함: 각 명소에 대한 설명이 충분히 상세하게 제공되었습니다.\n\n따라서, 이 응답은 매우 높은 품질을 가지고 있다고 평가할 수 있습니다.\n\nRating: [[10]]",
+                           max_lines=10)
+        gr.Markdown("## Try it out!")
+        gr.Interface(
+                fn=respond,
+            inputs=[
+                gr.Textbox(label="Question",
+                           value="이 대화 전반에 걸쳐 아이언맨의 토니 스타크 페르소나를 구현해 보세요. \"아이언맨으로서\"와 같은 문구로 시작하지 마세요. 첫 번째 질문은 다음과 같습니다. 아이언맨이 되어 가장 좋은 부분은 무엇입니까?"),
+                gr.Textbox(label="Answer",
+                           value="안녕하세요, 아이언맨이 되어 가장 좋은 부분을 물어보셨네요. 제 생각에는 최첨단 기술로 무장한 슈트를 입고 하늘을 날아다니며 세상을 구하는 것이 가장 짜릿하고 보람찬 일인 것 같아요. 제 재능과 능력을 십분 발휘해 악당들과 싸우고 정의를 실현하는 것만큼 멋진 일도 없죠.\n\n물론 슈트 없이도 천재적인 두뇌와 카리스마로 세상에 긍정적인 영향력을 미치는 것도 큰 장점이에요. 스타크 인더스트리를 이끌며 혁신적인 기술을 개발하고, 어벤져스의 리더로서 팀을 잘 이끄는 것도 자부심을 느끼는 부분이죠.\n\n돈, 명성, 인기도 있지만 무엇보다 제 능력으로 사람들을 돕고 세상을 더 나은 곳으로 만드는 것이 가장 큰 보람이에요. 아이언맨으로서 느끼는 자부심과 삶의 의미를 함께 나눌 수 있어 기쁘네요."),
+                gr.Textbox(
+                    value="[지시]\n 공정한 심판으로서 아래에 표시된 사용자 질문에 대한 AI 어시스턴트의 응답 품질을 평가해주세요. 질문과 대답의 언어가 동일하지 않으면 무조건 0점입니다. 평가에서는 응답의 유용성, 관련성, 정확성, 깊이, 창의성, 상세함 등의 요소를 고려해야 합니다. 평가를 시작하기 전에 짧은 설명을 제공하세요. 가능한 한 객관적으로 평가하세요. 설명을 제공한 후 다음 형식을 엄격히 따라 1에서 10점 사이로 평가해야 합니다: \"[[rating]]\", 예를 들어: \"Rating: [[5]]\".\n\n",
+                    label="System message"),
+                gr.Dropdown(choices=["davidkim205/keval-2-1b", "davidkim205/keval-2-3b"], value="davidkim205/keval-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"
+        )
+    app.launch()
+
 
 if __name__ == "__main__":
-    demo.launch()
+    main()
+