Update src/ui.py
Browse files
src/ui.py
CHANGED
|
@@ -31,10 +31,12 @@ def create_ui():
|
|
| 31 |
|
| 32 |
# Right Section — answer mode selector
|
| 33 |
with gr.Column(scale=1):
|
|
|
|
| 34 |
mode = gr.Radio(
|
| 35 |
["Quick Summary (Offline)", "LLM Precision (Groq Llama-3.1 70B)"],
|
| 36 |
value="Quick Summary (Offline)",
|
| 37 |
-
label=
|
|
|
|
| 38 |
)
|
| 39 |
|
| 40 |
# Output section
|
|
@@ -56,13 +58,49 @@ def create_ui():
|
|
| 56 |
clear_btn.click(lambda: ("", "", ""), outputs=[q, out, status])
|
| 57 |
q.submit(fn=lambda x, m: generate_answer(x, m), inputs=[q, mode], outputs=out)
|
| 58 |
|
| 59 |
-
# Styling
|
| 60 |
gr.HTML("""
|
| 61 |
<style>
|
| 62 |
#component-0 { max-width: 950px; margin: auto; }
|
| 63 |
textarea { font-size: 15px !important; }
|
| 64 |
-
|
| 65 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 66 |
</style>
|
| 67 |
""")
|
| 68 |
|
|
|
|
| 31 |
|
| 32 |
# Right Section — answer mode selector
|
| 33 |
with gr.Column(scale=1):
|
| 34 |
+
gr.Markdown("### Answer Mode")
|
| 35 |
mode = gr.Radio(
|
| 36 |
["Quick Summary (Offline)", "LLM Precision (Groq Llama-3.1 70B)"],
|
| 37 |
value="Quick Summary (Offline)",
|
| 38 |
+
label=None,
|
| 39 |
+
elem_id="answer-mode",
|
| 40 |
)
|
| 41 |
|
| 42 |
# Output section
|
|
|
|
| 58 |
clear_btn.click(lambda: ("", "", ""), outputs=[q, out, status])
|
| 59 |
q.submit(fn=lambda x, m: generate_answer(x, m), inputs=[q, mode], outputs=out)
|
| 60 |
|
| 61 |
+
# --- Styling ---
|
| 62 |
gr.HTML("""
|
| 63 |
<style>
|
| 64 |
#component-0 { max-width: 950px; margin: auto; }
|
| 65 |
textarea { font-size: 15px !important; }
|
| 66 |
+
|
| 67 |
+
/* Button Styles */
|
| 68 |
+
button {
|
| 69 |
+
font-size: 14px !important;
|
| 70 |
+
font-weight: 600;
|
| 71 |
+
border-radius: 8px !important;
|
| 72 |
+
}
|
| 73 |
+
|
| 74 |
+
/* Align Radio Buttons */
|
| 75 |
+
#answer-mode .wrap {
|
| 76 |
+
display: flex !important;
|
| 77 |
+
flex-direction: column !important;
|
| 78 |
+
align-items: stretch !important;
|
| 79 |
+
width: 100% !important;
|
| 80 |
+
}
|
| 81 |
+
|
| 82 |
+
#answer-mode label {
|
| 83 |
+
display: block !important;
|
| 84 |
+
width: 100% !important;
|
| 85 |
+
padding: 10px 14px !important;
|
| 86 |
+
border-radius: 8px !important;
|
| 87 |
+
text-align: left !important;
|
| 88 |
+
font-size: 14px !important;
|
| 89 |
+
font-weight: 500;
|
| 90 |
+
}
|
| 91 |
+
|
| 92 |
+
/* Make both radio options equal width */
|
| 93 |
+
#answer-mode input[type="radio"] {
|
| 94 |
+
width: 16px !important;
|
| 95 |
+
height: 16px !important;
|
| 96 |
+
}
|
| 97 |
+
|
| 98 |
+
#answer-mode .item {
|
| 99 |
+
width: 100% !important;
|
| 100 |
+
display: flex !important;
|
| 101 |
+
align-items: center !important;
|
| 102 |
+
justify-content: flex-start !important;
|
| 103 |
+
}
|
| 104 |
</style>
|
| 105 |
""")
|
| 106 |
|