Spaces:
Sleeping
Sleeping
Improve Gradio UI layout: make chat window shorter and enable full-screen width
Browse files- Reduced chat window height from 500px to 400px for more compact layout
- Removed max-width limitation to enable full-screen usage
- Updated CSS to use 100% width and improved padding
- Enhanced header styling with more compact feature list
- Restored README.md for Hugging Face deployment
src/sales_assistant/ui_dashboard/gradio_app.py
CHANGED
|
@@ -101,17 +101,25 @@ def create_gradio_interface():
|
|
| 101 |
|
| 102 |
# Create the interface
|
| 103 |
with gr.Blocks(
|
| 104 |
-
title="Sales Assistant with Quote Generation",
|
| 105 |
theme=gr.themes.Soft(),
|
| 106 |
css="""
|
| 107 |
.gradio-container {
|
| 108 |
-
max-width:
|
|
|
|
|
|
|
|
|
|
| 109 |
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
| 110 |
}
|
| 111 |
/* ensure main text elements inherit the font */
|
| 112 |
.gradio-markdown, .gradio-chatbot, .gradio-textbox, .gradio-button, .gradio-accordion {
|
| 113 |
font-family: inherit;
|
| 114 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
| 115 |
"""
|
| 116 |
) as interface:
|
| 117 |
# load Google Font (Inter)
|
|
@@ -119,15 +127,12 @@ def create_gradio_interface():
|
|
| 119 |
|
| 120 |
gr.Markdown(
|
| 121 |
"""
|
| 122 |
-
# π€ Sales Assistant with Quote Generation
|
| 123 |
-
|
| 124 |
Welcome to the Sales Assistant! I can help you:
|
| 125 |
-
|
| 126 |
-
|
| 127 |
-
|
| 128 |
-
- π Provide exchange rate information
|
| 129 |
-
- β Answer questions about our products and services
|
| 130 |
-
|
| 131 |
Simply type your question or request below to get started!
|
| 132 |
"""
|
| 133 |
)
|
|
@@ -135,7 +140,7 @@ def create_gradio_interface():
|
|
| 135 |
# Chat interface
|
| 136 |
chatbot = gr.Chatbot(
|
| 137 |
value=[],
|
| 138 |
-
height=
|
| 139 |
label="Sales Assistant Chat",
|
| 140 |
show_label=True,
|
| 141 |
avatar_images=(
|
|
|
|
| 101 |
|
| 102 |
# Create the interface
|
| 103 |
with gr.Blocks(
|
| 104 |
+
title="Streamnet Sales Assistant with Quote Generation",
|
| 105 |
theme=gr.themes.Soft(),
|
| 106 |
css="""
|
| 107 |
.gradio-container {
|
| 108 |
+
max-width: 100% !important;
|
| 109 |
+
width: 100% !important;
|
| 110 |
+
margin: 0 auto !important;
|
| 111 |
+
padding: 20px !important;
|
| 112 |
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
|
| 113 |
}
|
| 114 |
/* ensure main text elements inherit the font */
|
| 115 |
.gradio-markdown, .gradio-chatbot, .gradio-textbox, .gradio-button, .gradio-accordion {
|
| 116 |
font-family: inherit;
|
| 117 |
}
|
| 118 |
+
/* Make the main content area full width */
|
| 119 |
+
.main, .container {
|
| 120 |
+
max-width: none !important;
|
| 121 |
+
width: 100% !important;
|
| 122 |
+
}
|
| 123 |
"""
|
| 124 |
) as interface:
|
| 125 |
# load Google Font (Inter)
|
|
|
|
| 127 |
|
| 128 |
gr.Markdown(
|
| 129 |
"""
|
| 130 |
+
# π€ Streamnet Sales Assistant with Quote Generation
|
| 131 |
+
|
| 132 |
Welcome to the Sales Assistant! I can help you:
|
| 133 |
+
|
| 134 |
+
**π Search products** | **π Analyze data** | **π° Generate quotes** | **π Exchange rates** | **β Answer product questions**
|
| 135 |
+
|
|
|
|
|
|
|
|
|
|
| 136 |
Simply type your question or request below to get started!
|
| 137 |
"""
|
| 138 |
)
|
|
|
|
| 140 |
# Chat interface
|
| 141 |
chatbot = gr.Chatbot(
|
| 142 |
value=[],
|
| 143 |
+
height=400,
|
| 144 |
label="Sales Assistant Chat",
|
| 145 |
show_label=True,
|
| 146 |
avatar_images=(
|