Frankie-walsh4 commited on
Commit
d881a0d
·
1 Parent(s): dc0fedf
Files changed (1) hide show
  1. app.py +103 -32
app.py CHANGED
@@ -41,65 +41,114 @@ def respond(
41
  yield response
42
 
43
 
44
- # Custom CSS for Wix-like styling
45
  custom_css = """
46
  .gradio-container {
47
- font-family: 'Helvetica Neue', Arial, sans-serif;
48
- max-width: 800px;
49
  margin: 0 auto;
 
50
  }
51
 
52
  .contain {
53
  background-color: #ffffff;
54
- border-radius: 8px;
55
- box-shadow: 0 2px 4px rgba(0,0,0,0.1);
 
56
  }
57
 
58
  .message {
59
- padding: 12px 16px;
60
- border-radius: 8px;
61
- margin: 8px 0;
 
 
62
  }
63
 
64
  .message.user {
65
- background-color: #f0f2f5;
66
- margin-left: 20%;
 
67
  }
68
 
69
  .message.assistant {
70
- background-color: #e3f2fd;
71
- margin-right: 20%;
 
 
72
  }
73
 
74
  .submit-btn {
75
- background-color: #0078d4 !important;
76
  color: white !important;
77
- border-radius: 4px !important;
78
- padding: 8px 16px !important;
79
- font-weight: 500 !important;
 
 
 
80
  }
81
 
82
  .submit-btn:hover {
83
- background-color: #106ebe !important;
 
 
 
 
 
 
84
  }
85
 
86
  .slider-container {
87
- background-color: #f8f9fa;
88
- padding: 16px;
89
- border-radius: 8px;
90
- margin: 8px 0;
 
91
  }
92
 
93
  .textbox {
94
- border: 1px solid #e0e0e0;
95
- border-radius: 4px;
96
- padding: 8px;
 
 
 
97
  }
98
 
99
  .textbox:focus {
100
- border-color: #0078d4;
101
- outline: none;
102
- box-shadow: 0 0 0 2px rgba(0,120,212,0.1);
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
103
  }
104
  """
105
 
@@ -111,12 +160,34 @@ demo = gr.ChatInterface(
111
  title="AI Data Management Expert",
112
  description="Hello! I am your Data Management Expert, specialized in Microsoft 365. I'm here to help you with guidance on Data Management procedures. How can I assist you today?",
113
  theme=gr.themes.Base(
114
- primary_hue="blue",
115
- secondary_hue="blue",
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
116
  neutral_hue="slate",
117
- spacing_size="sm",
118
- radius_size="md",
119
- font=["Helvetica Neue", "Arial", "sans-serif"],
120
  ),
121
  css=custom_css,
122
  additional_inputs=[
 
41
  yield response
42
 
43
 
44
+ # Custom CSS for Plant Wisdom.AI styling
45
  custom_css = """
46
  .gradio-container {
47
+ font-family: 'Source Sans Pro', 'Helvetica Neue', Arial, sans-serif;
48
+ max-width: 1000px;
49
  margin: 0 auto;
50
+ background-color: #ffffff;
51
  }
52
 
53
  .contain {
54
  background-color: #ffffff;
55
+ border-radius: 12px;
56
+ box-shadow: 0 4px 6px rgba(0,0,0,0.05);
57
+ padding: 20px;
58
  }
59
 
60
  .message {
61
+ padding: 16px 20px;
62
+ border-radius: 12px;
63
+ margin: 12px 0;
64
+ font-size: 16px;
65
+ line-height: 1.5;
66
  }
67
 
68
  .message.user {
69
+ background-color: #f5f7fa;
70
+ margin-left: 15%;
71
+ border: 1px solid #e8eef7;
72
  }
73
 
74
  .message.assistant {
75
+ background-color: #f0f7f0;
76
+ margin-right: 15%;
77
+ border: 1px solid #e0ede0;
78
+ color: #2c3338;
79
  }
80
 
81
  .submit-btn {
82
+ background-color: #2e7d32 !important;
83
  color: white !important;
84
+ border-radius: 8px !important;
85
+ padding: 12px 24px !important;
86
+ font-weight: 600 !important;
87
+ font-size: 16px !important;
88
+ transition: all 0.3s ease !important;
89
+ border: none !important;
90
  }
91
 
92
  .submit-btn:hover {
93
+ background-color: #1b5e20 !important;
94
+ transform: translateY(-1px) !important;
95
+ box-shadow: 0 4px 8px rgba(0,0,0,0.1) !important;
96
+ }
97
+
98
+ .submit-btn:active {
99
+ transform: translateY(0) !important;
100
  }
101
 
102
  .slider-container {
103
+ background-color: #f8faf8;
104
+ padding: 20px;
105
+ border-radius: 12px;
106
+ margin: 12px 0;
107
+ border: 1px solid #e0ede0;
108
  }
109
 
110
  .textbox {
111
+ border: 2px solid #e0ede0 !important;
112
+ border-radius: 8px !important;
113
+ padding: 12px !important;
114
+ font-size: 16px !important;
115
+ transition: all 0.3s ease !important;
116
+ background-color: #ffffff !important;
117
  }
118
 
119
  .textbox:focus {
120
+ border-color: #2e7d32 !important;
121
+ outline: none !important;
122
+ box-shadow: 0 0 0 3px rgba(46,125,50,0.1) !important;
123
+ }
124
+
125
+ .title {
126
+ color: #2c3338 !important;
127
+ font-size: 32px !important;
128
+ font-weight: 700 !important;
129
+ margin-bottom: 16px !important;
130
+ }
131
+
132
+ .description {
133
+ color: #505a62 !important;
134
+ font-size: 18px !important;
135
+ line-height: 1.6 !important;
136
+ margin-bottom: 24px !important;
137
+ }
138
+
139
+ .additional-inputs {
140
+ background-color: #f8faf8;
141
+ border: 1px solid #e0ede0;
142
+ border-radius: 12px;
143
+ padding: 20px;
144
+ margin-top: 24px;
145
+ }
146
+
147
+ .chatbot {
148
+ height: 600px !important;
149
+ border: 1px solid #e0ede0;
150
+ border-radius: 12px;
151
+ background-color: #ffffff;
152
  }
153
  """
154
 
 
160
  title="AI Data Management Expert",
161
  description="Hello! I am your Data Management Expert, specialized in Microsoft 365. I'm here to help you with guidance on Data Management procedures. How can I assist you today?",
162
  theme=gr.themes.Base(
163
+ primary_hue=gr.themes.Color(
164
+ c50="#f3f7f3",
165
+ c100="#e0ede0",
166
+ c200="#b5d4b5",
167
+ c300="#8abb8a",
168
+ c400="#5fa25f",
169
+ c500="#2e7d32",
170
+ c600="#1b5e20",
171
+ c700="#154a19",
172
+ c800="#0e3511",
173
+ c900="#082108",
174
+ ),
175
+ secondary_hue=gr.themes.Color(
176
+ c50="#f3f7f3",
177
+ c100="#e0ede0",
178
+ c200="#b5d4b5",
179
+ c300="#8abb8a",
180
+ c400="#5fa25f",
181
+ c500="#2e7d32",
182
+ c600="#1b5e20",
183
+ c700="#154a19",
184
+ c800="#0e3511",
185
+ c900="#082108",
186
+ ),
187
  neutral_hue="slate",
188
+ spacing_size="lg",
189
+ radius_size="lg",
190
+ font=["Source Sans Pro", "Helvetica Neue", "Arial", "sans-serif"],
191
  ),
192
  css=custom_css,
193
  additional_inputs=[