krinya commited on
Commit
a721ff8
Β·
1 Parent(s): f4f2765

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: 1200px !important;
 
 
 
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
- - πŸ” Search and explore our product database
126
- - πŸ“Š Analyze product data and statistics
127
- - πŸ’° Generate quotes with pricing
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=500,
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=(