Add Japanese translation by Claude

app.py

@@ -11,6 +11,7 @@ from src.about import (
     CITATION_BUTTON_TEXT,
     EVALUATION_QUEUE_TEXT,
     INTRODUCTION_TEXT,
+    INTRODUCTION_TEXT_JP,
     LLM_BENCHMARKS_TEXT,
     TITLE,
 )
@@ -498,9 +499,25 @@ with gr.Blocks() as demo_submission:
 
 # Main demo
 
-with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
+
+def update_language(language: str) -> gr.Markdown:
+    if language == "🇺🇸 EN":
+        return gr.Markdown(value=INTRODUCTION_TEXT)
+    else:
+        return gr.Markdown(value=INTRODUCTION_TEXT_JP)
+
+
+with gr.Blocks(css=custom_css, css_paths="style.css", theme=gr.themes.Base()) as demo:
+    with gr.Row(elem_classes="language-switch-container"):
+        language = gr.Radio(
+            choices=["🇯🇵 JP", "🇺🇸 EN"],
+            value="🇯🇵 JP",
+            elem_classes="language-switch-radio",
+            show_label=False,
+        )
+
     gr.HTML(TITLE)
-    gr.Markdown(INTRODUCTION_TEXT, elem_classes="markdown-text")
+    introduction_text = gr.Markdown(INTRODUCTION_TEXT_JP, elem_classes="markdown-text")
 
     with gr.Tabs(elem_classes="tab-buttons") as tabs:
         with gr.TabItem("🏅 LLM Benchmark", elem_id="llm-benchmark-tab-table", id=0):
@@ -523,6 +540,13 @@ with gr.Blocks(css=custom_css, theme=gr.themes.Base()) as demo:
             )
     gr.HTML(BOTTOM_LOGO)
 
+    language.change(
+        fn=update_language,
+        inputs=language,
+        outputs=introduction_text,
+        api_name=False,
+    )
+
 
 if __name__ == "__main__":
     if os.getenv("SPACE_ID"):

src/about.py

@@ -87,6 +87,19 @@ please consult the __"About"__ page or refer to the website of
 __[LLM-Jp](https://llm-jp.nii.ac.jp/en/)__. And on the __"Submit here!"__ page, you can
 evaluate the performance of your model, and be part of the leaderboard.
 """
+INTRODUCTION_TEXT_JP = """\
+__[LLM-Jp](https://llm-jp.nii.ac.jp/)__ による __オープン日本語LLMリーダーボード__ は、\
+古典的なものから最新のものまで16以上のNLPタスクを用いて日本語大規模言語モデル(LLM)の\
+性能を評価します。__オープン日本語LLMリーダーボード__ は、東京の国立情報学研究所の支援を\
+受けて日本語LLMの研究開発を行う組織横断プロジェクト __[LLM-Jp](https://llm-jp.nii.ac.jp/)__ \
+のオープンソース貢献者によって構築されました。
+
+__「LLMベンチマーク」__ ページでは、疑問符 **「?」** はHugging Faceのモデルカードで不明な\
+パラメータを示しています。データセットに関する詳細情報については、__「About」__ ページを\
+参照するか、__[LLM-Jp](https://llm-jp.nii.ac.jp/)__ のウェブサイトをご覧ください。\
+また、__「Submit here!」__ ページでは、あなたのモデルの性能を評価し、リーダーボードに\
+参加することができます。
+"""
 
 # Which evaluations are you running? how can people reproduce what you have?
 LLM_BENCHMARKS_TEXT = """

src/display/css_html_js.py

@@ -33,7 +33,7 @@ custom_css = """
     background: none;
     border: none;
 }
- 
+
 #search-bar {
     padding: 0px;
 }
@@ -77,7 +77,7 @@ table th:first-child {
 #filter_type label > .wrap{
     width: 103px;
 }
-#filter_type label > .wrap .wrap-inner{  
+#filter_type label > .wrap .wrap-inner{
     padding: 2px;
 }
 #filter_type label > .wrap .wrap-inner input{

style.css

@@ -0,0 +1,60 @@
+.language-switch-container {
+    position: absolute;
+    top: 10px;
+    right: 10px;
+    z-index: 1000;
+    width: auto;
+}
+
+#space-title {
+    margin-top: 50px; /* Add margin to the top of the title */
+}
+
+.language-switch-radio {
+    display: inline-flex !important;
+    gap: 0 !important;
+    border: 1px solid var(--border-color-primary);
+    border-radius: 4px;
+    overflow: hidden;
+    background-color: var(--background-fill-primary);
+}
+
+.language-switch-radio .gr-form {
+    display: contents;
+}
+
+.language-switch-radio .gr-radio-row {
+    display: contents;
+}
+
+.language-switch-radio .gr-radio-row > div {
+    display: contents;
+}
+
+.language-switch-radio input[type="radio"] {
+    display: none;
+}
+
+.language-switch-radio label {
+    padding: 5px 10px;
+    font-size: 14px;
+    min-width: 60px;
+    text-align: center;
+    cursor: pointer;
+    transition: background-color 0.3s, color 0.3s;
+    display: inline-block;
+    color: var(--body-text-color);
+}
+
+.language-switch-radio input[type="radio"]:checked + label {
+    background-color: var(--primary-500);
+    color: var(--background-fill-primary);
+}
+
+.language-switch-radio label:hover {
+    background-color: var(--background-fill-secondary);
+}
+
+.language-switch-radio input[type="radio"]:checked + label:hover {
+    background-color: var(--primary-600);
+}