Update app.py

app.py

@@ -92,81 +92,139 @@ st.markdown('<p class="centered-orange-text">"Votre Réponse à Chaque Défi Mé
 user_input = st.text_input("You:", "")
 submit_button = st.button("Ask 📨")
 
-import os
-import streamlit as st
 import psycopg2
+import streamlit as st
 from datetime import datetime
+import os
 
-# Function to create a connection to PostgreSQL
+# PostgreSQL connection setup using secrets from Hugging Face Spaces
 def create_connection():
-    return psycopg2.connect(
+    conn = psycopg2.connect(
         host=os.getenv("DB_HOST"),
         database=os.getenv("DB_NAME"),
         user=os.getenv("DB_USER"),
         password=os.getenv("DB_PASSWORD"),
         port=os.getenv("DB_PORT")
     )
+    return conn
 
-# Function to create the feedback table if it doesn't exist
-def create_feedback_table(conn):
-    cursor = conn.cursor()
-    cursor.execute("""
+def create_table(conn):
+    with conn.cursor() as cur:
+        cur.execute('''
         CREATE TABLE IF NOT EXISTS feedback (
             id SERIAL PRIMARY KEY,
-            user_input TEXT NOT NULL,
-            bot_response TEXT NOT NULL,
-            rating INT CHECK (rating >= 1 AND rating <= 5),
-            comment TEXT,
-            timestamp TIMESTAMP DEFAULT CURRENT_TIMESTAMP
+            timestamp TIMESTAMP NOT NULL,
+            rating INTEGER NOT NULL,
+            comment TEXT NOT NULL
         );
-    """)
-    conn.commit()
-    cursor.close()
-
-# Function to insert feedback into the database
-def insert_feedback(conn, user_input, bot_response, rating, comment):
-    cursor = conn.cursor()
-    cursor.execute(
-        "INSERT INTO feedback (user_input, bot_response, rating, comment, timestamp) VALUES (%s, %s, %s, %s, %s)",
-        (user_input, bot_response, rating, comment, datetime.now())
-    )
-    conn.commit()
-    cursor.close()
+        ''')
+        conn.commit()
+
+# Streamlit interface with improved aesthetics
+st.set_page_config(page_title="Alter-IA Chat", page_icon="🤖")
 
-# Initialize connection and create the table if necessary
-conn = create_connection()
-create_feedback_table(conn)
+# Define function to handle user input and display chatbot response
+def chatbot_response(user_input):
+    response = qa.run(user_input)
+    return response
 
-# Streamlit app UI and logic
-st.markdown("## Rate your experience")
+# Create columns for logos
+col1, col2, col3 = st.columns([2, 3, 2])
 
-# Create a star-based rating system using radio buttons
-rating = st.radio(
-    "Rating",
-    options=[1, 2, 3, 4, 5],
-    format_func=lambda x: "★" * x  # Display stars based on the rating
-)
+with col1:
+    st.image("Design 3_22.png", width=150, use_column_width=True)
 
-# Text area for leaving a comment
-comment = st.text_area("Leave a comment")
+with col3:
+    st.image("Altereo logo 2023 original - eau et territoires durables.png", width=150, use_column_width=True)
 
-# Display bot response and user input for context
-st.markdown("### Your Question:")
-st.write(user_input)
-st.markdown("### Bot's Response:")
-st.write(bot_response)
+# CSS for styling
+st.markdown("""
+    <style>
+    .centered-text {
+        text-align: center;
+    }
+    .centered-orange-text {
+        text-align: center;
+        color: darkorange;
+    }
+    .star-rating {
+        display: flex;
+        flex-direction: row-reverse;
+        justify-content: center;
+        cursor: pointer;
+    }
+    .star-rating input[type="radio"] {
+        display: none;
+    }
+    .star-rating label {
+        font-size: 2em;
+        color: #ddd;
+        padding: 0 5px;
+        transition: color 0.3s;
+    }
+    .star-rating input[type="radio"]:checked ~ label {
+        color: gold;
+    }
+    .star-rating input[type="radio"]:hover ~ label {
+        color: gold;
+    }
+    </style>
+    """, unsafe_allow_html=True)
 
-# Submit feedback
-if st.button("Submit Feedback"):
-    if rating and comment:
-        insert_feedback(conn, user_input, bot_response, rating, comment)
-        st.success("Thank you for your feedback!")
-    else:
-        st.warning("Please provide a rating and a comment.")
+st.markdown('<h3 class="centered-text">🤖 AlteriaChat 🤖 </h3>', unsafe_allow_html=True)
+st.markdown('<p class="centered-orange-text">"Votre Réponse à Chaque Défi Méthodologique "</p>', unsafe_allow_html=True)
+
+# Input and button for user interaction
+user_input = st.text_input("You:", "")
+submit_button = st.button("Ask 📨")
 
-# Close the connection when done
-conn.close()
+if submit_button:
+    if user_input.strip() != "":
+        bot_response = chatbot_response(user_input)
+        st.markdown("### Bot:")
+        st.text_area("", value=bot_response, height=300)
+
+        # Add rating and comment section
+        st.markdown("---")
+        st.markdown("#### Rate the Response:")
+        
+        # Custom star rating HTML
+        rating_html = """
+        <div class="star-rating">
+            <input type="radio" id="5-stars" name="rating" value="5"><label for="5-stars">★</label>
+            <input type="radio" id="4-stars" name="rating" value="4"><label for="4-stars">★</label>
+            <input type="radio" id="3-stars" name="rating" value="3" checked><label for="3-stars">★</label>
+            <input type="radio" id="2-stars" name="rating" value="2"><label for="2-stars">★</label>
+            <input type="radio" id="1-star" name="rating" value="1"><label for="1-star">★</label>
+        </div>
+        """
+        st.markdown(rating_html, unsafe_allow_html=True)
+        
+        # Get the selected rating via JavaScript
+        rating = st.text_input("Selected Rating:", value="3", key="rating_input", label_visibility="hidden")
+
+        comment = st.text_area("Your Comment:")
+
+        # Submit feedback
+        feedback_button = st.button("Submit Feedback")
+
+        if feedback_button:
+            if comment.strip() == "":
+                st.warning("⚠ Please provide a comment.")
+            else:
+                st.success("Thank you for your feedback!")
+                
+                # Store feedback in PostgreSQL
+                conn = create_connection()
+                with conn.cursor() as cur:
+                    timestamp = datetime.now().strftime("%Y-%m-%d %H:%M:%S")
+                    cur.execute('INSERT INTO feedback (timestamp, rating, comment) VALUES (%s, %s, %s)', 
+                                (timestamp, int(rating), comment))
+                    conn.commit()
+                conn.close()
 
+    else:
+        st.warning("⚠ Please enter a message.")
 
 # Motivational quote at the bottom
 st.markdown("---")