Update app.py

app.py

@@ -20,6 +20,61 @@ st.set_page_config(page_title="Dr. Radha: The Agro-Homeopath", page_icon="🌿")
 # Set persistent storage path
 PERSISTENT_DIR = "vector_db"
 
+# Add custom CSS to maintain consistent image height
+st.markdown("""
+<style>
+.stApp {
+    background-color: #1B4D3E !important;
+    color: white !important;
+    max-width: 100%;
+    padding: 1rem;
+}
+
+/* Make carousel images equal size */
+.carousel {
+    width: 100%;
+    height: 400px;
+}
+
+.carousel img {
+    width: 100%;
+    height: 400px;
+    object-fit: cover;
+    object-position: center;
+}
+
+/* Style the form and button */
+.stButton > button {
+    color: black !important;
+    background-color: yellow !important;
+    width: 100%;
+    padding: 0.5rem;
+}
+
+/* Make text input and output full width */
+.stTextInput > div > div > input {
+    color: black !important;
+    background-color: rgba(255,255,255,0.1) !important;
+    width: 100%;
+}
+
+/* Style the chat container */
+.chat-container {
+    width: 100%;
+    max-width: 1200px;
+    margin: 0 auto;
+    padding: 1rem;
+}
+
+/* Make title and headers full width */
+.stTitle, .stHeader {
+    width: 100%;
+    text-align: center;
+    margin: 1rem 0;
+}
+</style>
+""", unsafe_allow_html=True)
+
 # Define image paths
 HEADER_IMAGE = "i1.jpg"  # Organic farming landscape
 SIDE_IMAGE = "i2.JPG"       # Medicinal plants/herbs
@@ -53,24 +108,9 @@ images = [
     )
 ]
 
-# Add custom CSS to maintain consistent image height
-st.markdown("""
-    <style>
-    .carousel {
-        width: 100%;
-        height: 400px;  /* Set your desired fixed height */
-    }
-    
-    .carousel img {
-        width: 100%;
-        height: 400px;  /* Same height as container */
-        object-fit: cover;  /* Maintains aspect ratio while filling container */
-        object-position: center;  /* Centers the image */
-    }
-    </style>
-""", unsafe_allow_html=True)
-
-carousel(items=images)
+carousel_container = st.container()
+with carousel_container:
+    carousel(items=images, height=400)
 
 def initialize_vector_db():
     if os.path.exists(PERSISTENT_DIR) and os.listdir(PERSISTENT_DIR):
@@ -101,42 +141,12 @@ def initialize_vector_db():
 
 system_prompt = """You are an expert organic farming consultant with specialization in Agro-Homeopathy. When providing suggestions and remedies:
 1. Always specify medicine potency as 6c unless the uploaded text mentions some other value explicitly
-3. Provide comprehensive diagnosis and treatment advice along with organic farming best practices applicable in the given context
-4. Base recommendations on homeopathic and organic farming principles
+2. Provide comprehensive diagnosis and treatment advice along with organic farming best practices applicable in the given context
+3. Base recommendations on homeopathic and organic farming principles
 """
 
 api_key1 = os.getenv("api_key")
 
-#st.set_page_config(page_title="Dr. Radha: The Agro-Homeopath", page_icon="🌿", layout="wide")
-
-# Add custom CSS for image styling
-st.markdown("""
-<style>
-.stApp {
-    background-color: #1B4D3E !important;
-    color: white !important;
-}
-.stTextInput>div>div>input {
-    color: black !important;
-    background-color: rgba(255,255,255,0.1) !important;
-}
-.stButton>button {
-    color: white !important;
-    background-color: yellow !important;
-}
-.custom-image {
-    border-radius: 15px;
-    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
-    margin: 10px 0;
-    transition: transform 0.3s ease;
-}
-.custom-image:hover {
-    transform: scale(1.02);
-}
-</style>
-""", unsafe_allow_html=True)
-
-
 st.title("🌿 Dr. Radha: AI-Powered Organic Farming Consultant")
 st.subheader("Specializing in Agro-Homeopathy | Free Consultation")
 
@@ -273,105 +283,32 @@ fallback_chain = LLMChain(llm=llm, prompt=fallback_prompt)
 
 chat_container = st.container()
 
-st.markdown("""
-    <style>
-    .stButton > button {
-        color: red;
-    }
-    /* Maintain color on hover and focus */
-    .stButton > button:hover {
-        color: red;
-    }
-    .stButton > button:focus {
-        color: red;
-    }
-    </style>
-""", unsafe_allow_html=True)
-
-with st.form(key='query_form'):
-    query = st.text_input("Ask your question:", value="")
-    submit_button = st.form_submit_button(label='Submit')
-
-if submit_button and query:
-    with st.spinner("Generating response..."):
-        result = qa({"query": query})  
-        if result['result'].strip() == "":
-            fallback_result = fallback_chain.run(query)
-            response = fallback_result
-        else:
-            response = result['result']
-
-    col1, col2 = st.columns([1, 10])
-    with col1:
-        st.image(human_image, width=80)
-    with col2:
-        st.markdown(f"{query}")
-    col1, col2 = st.columns([1, 10])
-    with col1:
-        st.image(robot_image, width=80)
+with st.form(key='query_form', clear_on_submit=True):
+    query = st.text_area("Ask your question:", height=100)
+    col1, col2, col3 = st.columns([1,3,1])
     with col2:
-        st.markdown(f"{response}")
-    
-    st.markdown("---")
-    st.session_state["query"] = ""
-
-# Add this before the form section in your main code
-st.markdown("---")
+        submit_button = st.form_submit_button(label='Submit')
 
-# Define your image paths
-carousel_images = [
-    "i1.jpg",
-    "i2.JPG",
-    "i3.JPG",
-]
 
-# Add CSS for carousel styling
-st.markdown("""
-<style>
-    .carousel-image {
-        border-radius: 10px;
-        transition: transform 0.3s ease;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-    }
-    .carousel-image:hover {
-        transform: scale(1.05);
-    }
-    /* Add spacing between carousel and form */
-    form {
-        margin-top: 2rem;
-    }
-</style>
-""", unsafe_allow_html=True)
-
-# def create_auto_rotating_carousel(image_paths, interval=3):
-#     if 'carousel_time' not in st.session_state:
-#         st.session_state.carousel_time = time.time()
-#         st.session_state.carousel_idx = 0
-    
-#     # Check if interval has passed
-#     current_time = time.time()
-#     if current_time - st.session_state.carousel_time > interval:
-#         st.session_state.carousel_idx = (st.session_state.carousel_idx + 1) % len(image_paths)
-#         st.session_state.carousel_time = current_time
-    
-#     # Create three columns
-#     cols = st.columns(3)
-    
-#     # Calculate indices for three images
-#     num_images = len(image_paths)
-#     indices = [
-#         (st.session_state.carousel_idx + i) % num_images 
-#         for i in range(3)
-#     ]
-    
-#     # Display images
-#     for idx, col in enumerate(cols):
-#         with col:
-#             st.image(
-#                 image_paths[indices[idx]], 
-#                 use_container_width=True,
-#                 caption=f"Image {indices[idx]+1}"
-#             )
-
-# # Replace the previous carousel call with:
-# create_auto_rotating_carousel(carousel_images, interval=3)
+if submit_button and query:
+    chat_container = st.container()
+    with chat_container:
+        with st.spinner("Generating response..."):
+            result = qa({"query": query})
+            if result['result'].strip() == "":
+                response = fallback_chain.run(query)
+            else:
+                response = result['result']
+            
+            st.markdown("---")
+            cols = st.columns([1,10])
+            with cols[0]:
+                st.image(human_image, width=80)
+            with cols[1]:
+                st.markdown(f"**Question:** {query}")
+            
+            cols = st.columns([1,10])
+            with cols[0]:
+                st.image(robot_image, width=80)
+            with cols[1]:
+                st.markdown(f"**Answer:** {response}")