More settings: a clear blue button with an icon and what it holds; developer views as vellum buttons

app.py

@@ -178,7 +178,7 @@ TEXT = {
            "question_ph": "For example: Which team should handle this?",
            "choices_ph": "Billing: payments and refunds\nTechnical: bugs and outages\nSales: prices and contracts",
            "choices": "Options", "choices_info": "One per line, or separated by commas. Leave empty for a yes/no answer.",
-           "settings": "Settings", "reasoning": "Reasoning", "reasoning_info": "On: the model thinks it through before it decides. Auto: only when the answer is unclear.",
+           "settings": "More settings: reasoning, “unknown”, answer set", "reasoning": "Reasoning", "reasoning_info": "On: the model thinks it through before it decides. Auto: only when the answer is unclear.",
            "modes": ("Off", "Auto", "On"), "off": "Off",
            "unknown": "Allow “unknown”", "unknown_info": "Lets the model answer “unknown” when the text does not say.",
            "coverage": "Answer set", "coverage_info": "Also lists the options that together contain the right answer with this probability.",
@@ -206,7 +206,7 @@ TEXT = {
            "question_ph": "Örneğin: Bu talebi hangi ekip ele almalı?",
            "choices_ph": "Fatura: ödemeler ve iadeler\nTeknik: hatalar ve kesintiler\nSatış: fiyatlar ve sözleşmeler",
            "choices": "Seçenekler", "choices_info": "Her satıra bir tane ya da virgülle ayırarak yazın. Evet/hayır sorusu için boş bırakın.",
-           "settings": "Ayarlar", "reasoning": "Düşünme", "reasoning_info": "Açık: model karar vermeden önce düşünür. Otomatik: yalnızca cevap belirsizse.",
+           "settings": "Diğer ayarlar: düşünme, “bilinmiyor”, cevap kümesi", "reasoning": "Düşünme", "reasoning_info": "Açık: model karar vermeden önce düşünür. Otomatik: yalnızca cevap belirsizse.",
            "modes": ("Kapalı", "Otomatik", "Açık"), "off": "Kapalı",
            "unknown": "“Bilinmiyor” cevabına izin ver", "unknown_info": "Metin cevabı vermiyorsa model “bilinmiyor” diyebilir.",
            "coverage": "Cevap kümesi", "coverage_info": "Doğru cevabı bu olasılıkla birlikte içeren seçenekleri de listeler.",
@@ -234,7 +234,7 @@ TEXT = {
            "question_ph": "Zum Beispiel: Welches Team soll das bearbeiten?",
            "choices_ph": "Abrechnung: Zahlungen und Erstattungen\nTechnik: Fehler und Ausfälle\nVertrieb: Preise und Verträge",
            "choices": "Optionen", "choices_info": "Eine pro Zeile oder durch Kommas getrennt. Für eine Ja/Nein-Antwort leer lassen.",
-           "settings": "Einstellungen", "reasoning": "Nachdenken", "reasoning_info": "An: Das Modell denkt vor der Entscheidung nach. Automatisch: nur, wenn die Antwort unklar ist.",
+           "settings": "Weitere Einstellungen: Nachdenken, „unbekannt“, Antwortmenge", "reasoning": "Nachdenken", "reasoning_info": "An: Das Modell denkt vor der Entscheidung nach. Automatisch: nur, wenn die Antwort unklar ist.",
            "modes": ("Aus", "Automatisch", "An"), "off": "Aus",
            "unknown": "„Unbekannt“ erlauben", "unknown_info": "Das Modell darf „unbekannt“ antworten, wenn der Text es nicht sagt.",
            "coverage": "Antwortmenge", "coverage_info": "Nennt auch die Optionen, die zusammen die richtige Antwort mit dieser Wahrscheinlichkeit enthalten.",
@@ -529,6 +529,19 @@ footer { display: none !important; }
 .gradio-container .game .tag2 { font-size: 26px; font-weight: 650; letter-spacing: -.02em; line-height: 1.12; color: #F5F1E8; margin: 8px 0 10px; }
 .game .links a { color: #A9BFE6 !important; border-color: rgba(169,191,230,.35); }
 .fine { font-size: 12px; color: var(--ink3); text-align: center; margin: 18px 0 8px; }
+/* Folds read as buttons: the settings in lapis with a sliders icon, the developer views in vellum. Closed, each is a plain
+   button on the page; open, its card comes back around the content. */
+.gradio-container .acc-more.block, .gradio-container .acc-dev.block { padding: 0; background: transparent; box-shadow: none; }
+.gradio-container .acc-more.block:has(> .label-wrap.open), .gradio-container .acc-dev.block:has(> .label-wrap.open) { padding: 10px; background: var(--card); }
+.gradio-container .acc-more > button.label-wrap, .gradio-container .acc-dev > button.label-wrap { padding: 14px 18px; border-radius: 14px; text-align: left; gap: 12px; transition: background .2s; }
+.gradio-container .acc-more > button.label-wrap { background: #DCE3EF; color: var(--lapis); }
+.gradio-container .acc-more > button.label-wrap:hover { background: #C9D4E8; }
+.gradio-container .acc-dev > button.label-wrap { background: var(--vellum); color: var(--ink2); }
+.gradio-container .acc-dev > button.label-wrap:hover { background: #E2D9C6; }
+.gradio-container .acc-more > button.label-wrap > span:first-child { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; font-weight: 650; }
+.gradio-container .acc-dev > button.label-wrap > span:first-child { font-size: 15px; font-weight: 600; }
+.gradio-container .acc-more > button.label-wrap .icon, .gradio-container .acc-dev > button.label-wrap .icon { color: inherit; font-size: 14px; }
+.gradio-container .acc-more > button.label-wrap > span:first-child::before { content: ""; flex: none; width: 20px; height: 20px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M4 6h9M17 6h3M4 12h3M11 12h9M4 18h11M19 18h1'/%3E%3Ccircle cx='15' cy='6' r='2'/%3E%3Ccircle cx='9' cy='12' r='2'/%3E%3Ccircle cx='17' cy='18' r='2'/%3E%3C/svg%3E") center / contain no-repeat; }
 button.primary, .decide button { background: var(--lapis) !important; border-color: var(--lapis) !important; color: #fff !important; font-size: 17px !important; border-radius: 999px !important; min-height: 50px; }
 button.primary:hover { background: #253D68 !important; }
 """
@@ -563,16 +576,16 @@ with gr.Blocks(title="JevAlt") as demo:
         choices = gr.Textbox(first[3], label=T["choices"], info=T["choices_info"], placeholder=T["choices_ph"], lines=4, max_lines=14)
     go = gr.Button(T["decide"], variant="primary", elem_classes="decide")
     view = gr.HTML()
-    with gr.Accordion(T["settings"], open=False) as settings:
+    with gr.Accordion(T["settings"], open=False, elem_classes="acc-more") as settings:
         with gr.Row():
             reasoning = gr.Radio(list(zip(T["modes"], MODES)), value=first[4], label=T["reasoning"], info=T["reasoning_info"])
             abstain = gr.Checkbox(value=first[5], label=T["unknown"], info=T["unknown_info"])
             coverage = gr.Radio(coverages("en"), value=first[6], label=T["coverage"], info=T["coverage_info"])
-    with gr.Accordion(T["dev"], open=False) as dev:
+    with gr.Accordion(T["dev"], open=False, elem_classes="acc-dev") as dev:
         request = gr.Code(load_example("en", 0)[-1], language="json", label="JSON")
         go_json = gr.Button(T["decide_json"], variant="secondary")
         dev_note = gr.Markdown(T["dev_note"])
-    with gr.Accordion(T["raw"], open=False) as raw_box:
+    with gr.Accordion(T["raw"], open=False, elem_classes="acc-dev") as raw_box:
         raw = gr.JSON(label="JSON")
     bottom = gr.HTML(footer("en"))