Spaces:
Sleeping
Sleeping
File size: 5,411 Bytes
ba71fca |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 |
import gradio as gr
from config import ui_config
from pathlib import Path
# UI function: only handles UI, not workflow logic
def create_app(chat_fn, clear_fn):
"""
Create the Gradio UI for SupportFlowX.
chat_fn: function to handle chat (inputs: user_message, history, api_key)
clear_fn: function to clear chat (no inputs)
Returns: gr.Blocks object
"""
base_dir = Path(__file__).parent.parent
css_path = base_dir / "ui" / "theme.css"
with open(css_path, "r", encoding="utf-8") as f:
custom_css = f.read()
with gr.Blocks(
title=ui_config.APP_TITLE,
css=custom_css,
theme=gr.themes.Soft()
) as app:
gr.HTML(f"""
<link rel="icon" type="image/png" href="file={ui_config.LOGO_PATH}">
""")
with gr.Row(elem_classes="main-container animate-fade-in"):
with gr.Column(scale=3):
gr.HTML(f"""
<div class="header-title">
{ui_config.WELCOME_TITLE}
</div>
<div style="text-align: center; margin-bottom: 20px;">
<p style="font-size: 1.2em; color: #666; font-weight: 500;">
{ui_config.WELCOME_MESSAGE}
</p>
</div>
""")
with gr.Column(scale=1):
gr.Image(
ui_config.COVER_PATH,
height=200,
show_label=False,
container=False,
show_download_button=False
)
with gr.Row(elem_classes="main-container"):
with gr.Column(scale=3, elem_classes="chat-container card-hover"):
chatbot = gr.Chatbot(
type='messages',
label="💬 Chat with our Cafe Assistant",
height=400,
elem_classes="chatbot",
show_copy_button=True
)
with gr.Column(elem_classes="input-area"):
msg = gr.Textbox(
label="💭 What can I help you with today?",
placeholder="Ask about our menu, prices, promotions, or table availability...",
lines=1,
scale=7
)
with gr.Row():
send_btn = gr.Button(
"📤 Send Message",
scale=2,
elem_classes="send-button",
variant="primary"
)
clear_btn = gr.Button(
"🗑️ Clear Chat",
scale=1,
elem_classes="clear-button",
variant="secondary"
)
with gr.Column(elem_classes="examples-container"):
gr.HTML('<div class="examples-title">💡 Quick Questions</div>')
gr.Examples(
examples=ui_config.EXAMPLES,
inputs=[msg],
)
with gr.Column(scale=1, elem_classes="sidebar card-hover"):
gr.Image(
ui_config.ICON_PATH,
height=120,
show_label=False,
container=False,
show_download_button=False
)
gr.HTML("""
<div style="text-align: center; margin-bottom: 20px;">
<h3 style="color: white; margin: 0;">🔐 API Configuration</h3>
</div>
""")
with gr.Column(elem_classes="api-key-container"):
api_key_box = gr.Textbox(
label="🔑 Gemini API Key",
placeholder="Enter your Gemini API key here...",
type="password",
info="Get your API key from https://makersuite.google.com/app/apikey",
lines=1
)
with gr.Column(elem_classes="log-container"):
gr.HTML('<h4 style="color: white; margin-top: 0;">📋 System Logs</h4>')
logbox = gr.Textbox(
label="",
interactive=False,
lines=18,
placeholder="System logs will appear here...",
show_label=False
)
# Event handlers
# Both send_btn.click and msg.submit trigger chat_fn
send_btn.click(
fn=chat_fn,
inputs=[msg, chatbot, api_key_box],
outputs=[chatbot, logbox]
).then(
fn=lambda: "",
outputs=[msg]
)
msg.submit(
fn=chat_fn,
inputs=[msg, chatbot, api_key_box],
outputs=[chatbot, logbox]
).then(
fn=lambda: "",
outputs=[msg]
)
clear_btn.click(
fn=clear_fn,
outputs=[chatbot, logbox]
)
return app |