Update app.py

app.py

@@ -1,4 +1,166 @@
-import gradio as gr
+import streamlit as st
 import time
+import random
+import pandas as pd
+import requests
+from io import BytesIO
+from PIL import Image
 
-print('hi')
+# Define maximum dimensions for the fortune image (in pixels)
+MAX_SIZE = (400, 400)
+
+# Set page configuration
+st.set_page_config(page_title="Fortuen Stick Enquiry", layout="wide")
+
+st.title("Fortuen Stick Enquiry")
+
+# Initialize session state variables
+if "submitted_text" not in st.session_state:
+    st.session_state.submitted_text = False
+if "fortune_number" not in st.session_state:
+    st.session_state.fortune_number = None
+if "fortune_row" not in st.session_state:
+    st.session_state.fortune_row = None
+if "fortune_data" not in st.session_state:
+    try:
+        st.session_state.fortune_data = pd.read_csv("detail.csv")
+    except Exception as e:
+        st.error(f"Error loading CSV: {e}")
+        st.session_state.fortune_data = None
+
+if "stick_clicked" not in st.session_state:
+    st.session_state.stick_clicked = False
+
+
+# Callback function for the submit button:
+def submit_text_callback():
+    st.session_state.submitted_text = True
+    # Randomly generate a number from 1 to 100
+    st.session_state.fortune_number = random.randint(1, 100)
+    
+    # Look up the row in the CSV where CNumber matches the generated fortune number.
+    df = st.session_state.fortune_data
+    if df is not None:
+        matching_row = df[df['CNumber'] == st.session_state.fortune_number]
+        if not matching_row.empty:
+            row = matching_row.iloc[0]
+            st.session_state.fortune_row = {
+                "Header": row.get("Header", "N/A"),
+                "Luck": row.get("Luck", "N/A"),
+                "Description": row.get("Description", "No description available."),
+                "Detail": row.get("Detail", "No detail available."),
+                "HeaderLink": row.get("link", None)  # URL to the image
+            }
+        else:
+            st.session_state.fortune_row = {
+                "Header": "N/A",
+                "Luck": "N/A",
+                "Description": "No description available.",
+                "Detail": "No detail available.",
+                "HeaderLink": None
+            }
+
+# Function to load and resize local images using Pillow
+def load_and_resize_image(path, max_size=MAX_SIZE):
+    try:
+        img = Image.open(path)
+        img.thumbnail(max_size, Image.Resampling.LANCZOS)
+        return img
+    except Exception as e:
+        st.error(f"Error loading image: {e}")
+        return None
+
+# Function to download image from URL and resize it
+def download_and_resize_image(url, max_size=MAX_SIZE):
+    try:
+        response = requests.get(url)
+        response.raise_for_status()
+        image_bytes = BytesIO(response.content)
+        img = Image.open(image_bytes)
+        img.thumbnail(max_size, Image.Resampling.LANCZOS)
+        return img
+    except Exception as e:
+        st.error(f"Error loading image from URL: {e}")
+        return None
+
+def stick_enquiry_callback():
+    st.session_state.stick_clicked = True
+
+# Main layout: Left (input) and Right (fortune display)
+left_col, _, right_col = st.columns([3, 1, 5])
+
+# ---- Left Column ----
+with left_col:
+    left_top = st.container()
+    left_bottom = st.container()
+    # Top container: Input area and submit button
+    with left_top:
+        user_sentence = st.text_area("Enter your question in English", key="user_sentence", height=150)
+        
+        st.button("submit", key="submit_button", on_click=submit_text_callback)
+    # (The previous Stick Enquiry button has been removed)
+    
+    if st.session_state.submitted_text:
+    # Left Bottom: Centered "解籤/Stick Enquiry" button
+        with left_bottom:
+            # Add vertical spacing to approximately center the button vertically
+            for _ in range(5):
+                st.write("")
+            col1, col2, col3 = st.columns(3)
+            with col2:
+                st.button("Cfu Explain", key="stick_button", on_click=stick_enquiry_callback)
+            if st.session_state.stick_clicked:
+                # st.write("Here are the stick enquiry words...")  # Placeholder text
+                st.text_area(' ', value="Here are the stick enquiry words...", height=300, disabled=True)
+
+# ---- Right Column ----
+with right_col:
+    # Top container: Fortune image area
+    with st.container():
+        col_left, col_center, col_right = st.columns([1, 2, 1])
+        with col_center:
+            if st.session_state.submitted_text and st.session_state.fortune_row:
+                header_link = st.session_state.fortune_row.get("HeaderLink")
+                if header_link:
+                    # Download the image from the URL
+                    img_from_url = download_and_resize_image(header_link)
+                    if img_from_url:
+                        st.image(img_from_url, use_container_width=False)
+                    else:
+                        # Fallback: display a default image if download fails
+                        img = load_and_resize_image("error.png")
+                        if img:
+                            st.image(img, use_container_width=False)
+                else:
+                    # Fallback: display a default image if no header link is provided
+                    img = load_and_resize_image("error.png")
+                    if img:
+                        st.image(img, use_container_width=False)
+            else:
+                # Before submit, show the default image
+                img = load_and_resize_image("fortune.png")
+                if img:
+                    st.image(img, caption="Your Fortune", use_container_width=False)
+    
+    # Bottom container: Display fortune details using text areas
+    with st.container():
+        if st.session_state.fortune_row:
+            header_text = st.session_state.fortune_row.get("Header", "N/A")
+            luck_text = st.session_state.fortune_row.get("Luck", "N/A")
+            description_text = st.session_state.fortune_row.get("Description", "No description available.")
+            detail_text = st.session_state.fortune_row.get("Detail", "No detail available.")
+            
+            # Create a summary with larger text using HTML styling
+            summary = f"""
+            <div style="font-size: 28px; font-weight: bold;">
+                Fortune stick number: {st.session_state.fortune_number}<br>
+                Luck: {luck_text}
+            </div>
+            """
+            st.markdown(summary, unsafe_allow_html=True)
+            
+            # Second text area: Description
+            st.text_area("Description", value=description_text, height=150, disabled=True)
+            
+            # Third text area: Detail
+            st.text_area("Detail", value=detail_text, height=150, disabled=True)