UI/UX D0: fix Textbox label, hide audio accordion, hide footer, hide ingest result box

- app.py: show_label=False on msg_box to remove "Textbox" label
- app.py: wrap audio input in gr.Accordion(open=False) to hide microphone error on load
- app.py: add CSS to hide Gradio footer branding
- app.py: ingest_status starts visible=False; ingest_files returns gr.update(visible=True)
- ROADMAP.md: add UI/UX design improvement section (D0–D3) and mark D0 complete

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This commit is contained in:
2026-06-02 14:25:54 +09:00
parent 20f385e2a0
commit e08b43c785
2 changed files with 91 additions and 13 deletions
+18 -13
View File
@@ -168,7 +168,7 @@ async def reset_chat(user_id):
async def ingest_files(files):
if not files:
return "파일을 선택해주세요."
return gr.update(value="파일을 선택해주세요.", visible=True)
paths = [f if isinstance(f, str) else f.name for f in files]
results = []
for path in paths:
@@ -178,7 +178,7 @@ async def ingest_files(files):
results.append(f"{name}{result.get('chunks', '?')}개 청크")
except Exception as e:
results.append(f"{os.path.basename(path)} 오류: {e}")
return "\n".join(results)
return gr.update(value="\n".join(results), visible=True)
async def list_docs():
@@ -262,7 +262,11 @@ def _sources_html(sources: list) -> str:
)
with gr.Blocks(title="율봇") as demo:
_CUSTOM_CSS = """
footer { display: none !important; }
"""
with gr.Blocks(title="율봇", css=_CUSTOM_CSS) as demo:
gr.Markdown("# 율봇\n육아·금융 전문 AI 상담 도우미")
user_state = gr.State(DEFAULT_USER)
@@ -283,7 +287,7 @@ with gr.Blocks(title="율봇") as demo:
with gr.Row():
msg_box = gr.Textbox(
placeholder="질문을 입력하세요... (Enter로 전송)",
label="",
show_label=False,
scale=5,
autofocus=True,
)
@@ -298,14 +302,15 @@ with gr.Blocks(title="율봇") as demo:
)
gr.HTML("<div></div>", visible=False) # spacer
with gr.Row():
audio_input = gr.Audio(
sources=["microphone"],
type="filepath",
label="음성으로 질문하기",
scale=4,
)
transcribe_btn = gr.Button("음성 → 텍스트 변환", scale=1)
with gr.Accordion("🎤 음성으로 질문하기", open=False):
with gr.Row():
audio_input = gr.Audio(
sources=["microphone"],
type="filepath",
show_label=False,
scale=4,
)
transcribe_btn = gr.Button("음성 → 텍스트 변환", scale=1)
with gr.Row():
show_thinking = gr.Checkbox(label="사고 과정 표시", value=True)
@@ -346,7 +351,7 @@ with gr.Blocks(title="율봇") as demo:
label="파일 선택",
)
ingest_btn = gr.Button("문서 수집", variant="primary")
ingest_status = gr.Textbox(label="결과", interactive=False)
ingest_status = gr.Textbox(label="결과", interactive=False, visible=False)
ingest_btn.click(ingest_files, inputs=[file_input], outputs=[ingest_status])
with gr.Tab("문서 관리"):