accordion gray

app.py

@@ -480,6 +480,9 @@ CSS = """
     .accordion-prompts {
         background-color: orange;
     }
+    .accordion-gray {
+        background-color: #f0f0f0;
+    }
 """
 
 with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary_hue=gr.themes.colors.orange), css=CSS) as demo:
@@ -527,7 +530,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                     with gr.Column():
                         gr.Markdown("""## 主題是整個段落要探討、闡述的主要議題。確定主題對於段落的架構、內容非常重要，幫助讀者預期段落的內容，增加閱讀的速度及理解度。寫作過程中，掌握主題可以幫助作者有效傳達自己的想法和觀點，幫助讀者更容易理解。""")
                     with gr.Column():
-                        with gr.Accordion("參考指引：情境與主題如何搭配呢？", open=False):
+                        with gr.Accordion("參考指引：情境與主題如何搭配呢？", open=False, elem_classes=['accordion-gray']):
                             gr.Markdown("""
                             例如，情境是 `School & Learning` ，你可以依照自己的興趣、背景及經驗，決定合適的主題，像是：`My First Day at School` 或 `The Role of Internet in Learning`
                             例如，情境是 `Climate Change`，相關主題可能是 `Global Warming` 或 `Extreme Weather Events`
@@ -659,7 +662,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                         gr.Markdown("## 主題句通常位於段落的開頭，幫助讀者迅速理解段落的內容。如果沒有主題句，段落的架構及內容的一致性及連貫性就會受影響。")
                         gr.Markdown("## 主題句的範圍，應能適當含括你剛才決定的各個要點，範圍不要太大，以致無法在一個段落清楚説明，也不能太小，無法含括段落的所有要點。")
                     with gr.Column():
-                        with gr.Accordion("參考指引：合適的主題句？", open=False):
+                        with gr.Accordion("參考指引：合適的主題句？", open=False, elem_classes=['accordion-gray']):
                             gr.Markdown("""舉例，情境是 `School & Learning`，段落主題是 `Time Management`，那麼 `Balancing school work and leisure time is a crucial aspect of effective time management` 就是合適的主題句，因為它清楚點出該段落將説明有效運用時間來讓課業及娛樂取得平衡。""")
                 with gr.Row():
                     with gr.Column():
@@ -735,7 +738,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                     with gr.Column():
                         gr.Markdown("### 支持句：以支持句來解釋要點，必要時舉例説明，來支持主題句。這些句子應該按照邏輯順序來組織，例如時間順序、空間順序、重要性順序、因果關係等。並使用轉折詞來引導讀者從一個 idea 到下一個 idea，讓讀者讀起來很順暢，不需反覆閱讀。")
                     with gr.Column():
-                        with gr.Accordion("參考指引：撰寫支持句的方法？", open=False):
+                        with gr.Accordion("參考指引：撰寫支持句的方法？", open=False, elem_classes=['accordion-gray']):
                             gr.Markdown("""
                                 - Explanation 解釋説明：說明居住城市的優點，例如住在城市可享受便利的交通。
                                 - Fact 陳述事實：説明運動可以增強心肺功能和肌肉力量，對於身體健康有正面影響。
@@ -745,7 +748,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                                 - Evidence 提供證據：引用相關數據、研究或事實來佐證。例如全球互聯網用戶數已經突破了 50 億人，佔全球總人口近 65%。
                                 - Example 舉例：舉自家為例，説明如何將家事的責任分配給每個家庭成員。
                             """)
-                        with gr.Accordion("參考指引：針對要點的支持句，要寫幾句呢？", open=False):
+                        with gr.Accordion("參考指引：針對要點的支持句，要寫幾句呢？", open=False, elem_classes=['accordion-gray']):
                             gr.Markdown("""
                                 - 一個要點，寫 3-6 句
                                 - 兩個要點，每個要點寫 2-3 句
@@ -812,7 +815,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                     with gr.Column():
                         gr.Markdown("## 總結主要觀點，強化整個資訊的傳遞。重述、摘要、回應或評論主題句。")
                     with gr.Column():
-                        with gr.Accordion("參考指引：撰寫結論句的方法？", open=False):
+                        with gr.Accordion("參考指引：撰寫結論句的方法？", open=False, elem_classes=['accordion-gray']):
                             gr.Markdown("""
                                 - 以換句話說 (paraphrase) 的方式把主題句再說一次
                                 - 摘要三要點方式寫結論句
@@ -860,7 +863,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                                         3. 整個段落是否連貫、流暢、容易理解
                                     """)
                     with gr.Column():
-                        with gr.Accordion("參考指引：什麼是段落的連貫性？", open=False):
+                        with gr.Accordion("參考指引：什麼是段落的連貫性？", open=False, elem_classes=['accordion-gray']):
                             gr.Markdown("""
                                 - 能夠以清晰、邏輯的方式表達自己的想法，使讀者易於理解。
                                 - 連貫的段落應該有一個清晰的主題句來介紹主要想法（main idea），接著是支持句，提供更多細節和例子來支持主題句。
@@ -1034,7 +1037,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                     with gr.Column():
                         gr.Markdown("## 修訂文法與拼字錯誤（Correct Grammatical and Spelling Errors）")
                     with gr.Column():
-                        with gr.Accordion("參考指引：AI 的混淆狀況？", open=False):
+                        with gr.Accordion("參考指引：AI 的混淆狀況？", open=False, elem_classes=['accordion-gray']):
                             gr.Markdown("""
                                 - 段落寫作的過程，如果全程採用 JUTOR 的建議例句，則不會有文法與拼字錯誤。JUTOR 有時後仍會挑出一些字詞修訂，並非原本字詞錯誤，而是改換不同說法，你可以參考。
                                 - 若是自行完成段落寫作，則不會發生自我修訂的混淆狀況。
@@ -1107,7 +1110,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                 
                 with gr.Row() as paragraph_refine_html:
                     gr.Markdown("# Step 9. 段落改善建議（Refine Paragraph）")
-                    with gr.Accordion("參考指引：段落改善建議？", open=False):
+                    with gr.Accordion("參考指引：段落改善建議？", open=False, elem_classes=['accordion-gray']):
                         gr.Markdown("""
                             - 段落寫作的過程，如果全程採用 JUTOR 的建議例句，在這部分的批改可能會發生自我修訂的現象。例如：為了符合級別需求，JUTOR 會將自已建議的例句，以換句話說的方式再次修改，你可以忽略。
                             - 若是自行完成段落寫作，則不會發生自我修訂的混淆狀況。
@@ -1151,7 +1154,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                 with gr.Row():
                     paragraph_save_button = gr.Button("建立歷程回顧", variant="primary")
                 with gr.Row():
-                    with gr.Accordion("歷程回顧", open=False) as history_accordion:
+                    with gr.Accordion("歷程回顧", open=False, elem_classes=['accordion-gray']) as history_accordion:
                         scenario_input_history = gr.Textbox(label="情境")
                         topic_input_history = gr.Textbox(label="主題")
                         points_input_history = gr.Textbox(label="要點")
@@ -1479,7 +1482,7 @@ with gr.Blocks(theme=gr.themes.Soft(primary_hue=gr.themes.colors.blue, secondary
                         with gr.Row():
                             past_exam_question = gr.Markdown()
                         with gr.Row():
-                            with gr.Accordion("提示", open=False):
+                            with gr.Accordion("提示", open=False, elem_classes=['accordion-gray']):
                                 with gr.Row():
                                     past_exam_hint = gr.Markdown()
                     with gr.Column():