shiva9876 commited on
Commit
ca90b0a
·
verified ·
1 Parent(s): 51b2142

Update app.py

Browse files
Files changed (1) hide show
  1. app.py +53 -11
app.py CHANGED
@@ -15,6 +15,11 @@ st.set_page_config(
15
  # Custom CSS for Logo & UI
16
  st.markdown("""
17
  <style>
 
 
 
 
 
18
  /* Full Center Alignment */
19
  .main-container {
20
  display: flex;
@@ -23,7 +28,6 @@ st.markdown("""
23
  align-items: center;
24
  height: 90vh;
25
  }
26
-
27
  /* Logo Centered */
28
  .logo {
29
  display: flex;
@@ -32,7 +36,6 @@ st.markdown("""
32
  width: 100%;
33
  margin-bottom: 10px;
34
  }
35
-
36
  /* Title Centered */
37
  .title {
38
  text-align: center;
@@ -40,7 +43,6 @@ st.markdown("""
40
  font-weight: bold;
41
  color: #03dac6;
42
  }
43
-
44
  /* Chatbox UI */
45
  .chat-container {
46
  border-radius: 8px;
@@ -49,12 +51,24 @@ st.markdown("""
49
  background-color: #262626;
50
  color: white;
51
  }
52
-
53
  /* User & AI Message Styling */
54
  .user-message { border-left: 5px solid #03dac6; padding-left: 10px; }
55
  .ai-message { border-left: 5px solid #ff9800; padding-left: 10px; }
56
  pre { white-space: pre-wrap; word-wrap: break-word; }
57
-
 
 
 
 
 
 
 
 
 
 
 
 
 
58
  /* Search Bar Styling */
59
  .search-container {
60
  display: flex;
@@ -63,7 +77,6 @@ st.markdown("""
63
  max-width: 600px;
64
  margin: auto;
65
  }
66
-
67
  .search-input {
68
  flex-grow: 1;
69
  padding: 12px 15px;
@@ -74,7 +87,6 @@ st.markdown("""
74
  font-size: 16px;
75
  outline: none;
76
  }
77
-
78
  /* Search Button */
79
  .search-button {
80
  width: 50px;
@@ -88,10 +100,38 @@ st.markdown("""
88
  transition: 0.3s;
89
  text-align: center;
90
  }
91
-
92
  .search-button:hover {
93
  background-color: #02c2ad;
94
  }
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
95
  </style>
96
  """, unsafe_allow_html=True)
97
 
@@ -119,16 +159,18 @@ for msg in st.session_state.messages:
119
  # st.subheader("Generated Code:")
120
  st.code(code, language="python")
121
 
122
- # Input Form
 
123
  st.markdown('<div class="search-container">', unsafe_allow_html=True)
124
 
125
- with st.form(key="input_form"):
126
- user_input = st.text_input("Your Prompt:", key="user_prompt", placeholder="Enter your prompt...")
127
 
128
  # Single send button
129
  submit_button = st.form_submit_button("SEND ↗️")
130
 
131
  st.markdown("</div>", unsafe_allow_html=True)
 
132
 
133
  # API Call Logic
134
  if submit_button:
 
15
  # Custom CSS for Logo & UI
16
  st.markdown("""
17
  <style>
18
+ /* Add padding to bottom of main container to prevent content hiding behind fixed search bar */
19
+ .main .block-container {
20
+ padding-bottom: 150px;
21
+ }
22
+
23
  /* Full Center Alignment */
24
  .main-container {
25
  display: flex;
 
28
  align-items: center;
29
  height: 90vh;
30
  }
 
31
  /* Logo Centered */
32
  .logo {
33
  display: flex;
 
36
  width: 100%;
37
  margin-bottom: 10px;
38
  }
 
39
  /* Title Centered */
40
  .title {
41
  text-align: center;
 
43
  font-weight: bold;
44
  color: #03dac6;
45
  }
 
46
  /* Chatbox UI */
47
  .chat-container {
48
  border-radius: 8px;
 
51
  background-color: #262626;
52
  color: white;
53
  }
 
54
  /* User & AI Message Styling */
55
  .user-message { border-left: 5px solid #03dac6; padding-left: 10px; }
56
  .ai-message { border-left: 5px solid #ff9800; padding-left: 10px; }
57
  pre { white-space: pre-wrap; word-wrap: break-word; }
58
+
59
+ /* Fixed Search Bar Container */
60
+ .fixed-search-bar {
61
+ position: fixed;
62
+ bottom: 0;
63
+ left: 0;
64
+ right: 0;
65
+ background-color: #0e1117;
66
+ padding: 20px;
67
+ border-top: 2px solid #262626;
68
+ z-index: 1000;
69
+ box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
70
+ }
71
+
72
  /* Search Bar Styling */
73
  .search-container {
74
  display: flex;
 
77
  max-width: 600px;
78
  margin: auto;
79
  }
 
80
  .search-input {
81
  flex-grow: 1;
82
  padding: 12px 15px;
 
87
  font-size: 16px;
88
  outline: none;
89
  }
 
90
  /* Search Button */
91
  .search-button {
92
  width: 50px;
 
100
  transition: 0.3s;
101
  text-align: center;
102
  }
 
103
  .search-button:hover {
104
  background-color: #02c2ad;
105
  }
106
+
107
+ /* Streamlit form styling to work with fixed position */
108
+ .fixed-search-bar .stForm {
109
+ border: none;
110
+ }
111
+
112
+ /* Style the text input inside the fixed bar */
113
+ .fixed-search-bar .stTextInput > div > div > input {
114
+ background-color: #262626;
115
+ color: white;
116
+ border: 2px solid #03dac6;
117
+ border-radius: 25px;
118
+ padding: 12px 15px;
119
+ }
120
+
121
+ /* Style the submit button */
122
+ .fixed-search-bar .stFormSubmitButton > button {
123
+ background-color: #00ffcc;
124
+ color: black;
125
+ border-radius: 25px;
126
+ padding: 10px 25px;
127
+ border: none;
128
+ font-weight: bold;
129
+ transition: 0.3s;
130
+ }
131
+
132
+ .fixed-search-bar .stFormSubmitButton > button:hover {
133
+ background-color: #02c2ad;
134
+ }
135
  </style>
136
  """, unsafe_allow_html=True)
137
 
 
159
  # st.subheader("Generated Code:")
160
  st.code(code, language="python")
161
 
162
+ # Fixed Input Form at the bottom
163
+ st.markdown('<div class="fixed-search-bar">', unsafe_allow_html=True)
164
  st.markdown('<div class="search-container">', unsafe_allow_html=True)
165
 
166
+ with st.form(key="input_form", clear_on_submit=True):
167
+ user_input = st.text_input("Your Prompt:", key="user_prompt", placeholder="Enter your prompt...", label_visibility="collapsed")
168
 
169
  # Single send button
170
  submit_button = st.form_submit_button("SEND ↗️")
171
 
172
  st.markdown("</div>", unsafe_allow_html=True)
173
+ st.markdown("</div>", unsafe_allow_html=True)
174
 
175
  # API Call Logic
176
  if submit_button: