Update app.py

app.py

@@ -1546,66 +1546,84 @@ def explanation_questions():
         key=f"explanation_q_{current_q['key']}"
     )
 
-    # اگر سوال مربوط به explanation_received باشد، دکمه مثال را نمایش بده
-    if current_q["key"] == "explanation_received":
-        # مدیریت حالت باز/بسته بودن مدال
-        if "show_modal" not in st.session_state:
-            st.session_state.show_modal = False
 
+    # وقتی به سوال explanation_received رسیدیم
+    if current_q["key"] == "explanation_received":
         if st.button("مشاهده مثال از توضیحات", key="show_example_btn"):
             st.session_state.show_modal = True
 
-            # نمایش مدال اگر باز باشد
-    from PIL import Image
-    
-    # نمایش تصاویر در یک مدال
-    if st.session_state.show_modal:
-        with st.container():
-            st.markdown("""
+        # نمایش مدال
+        if st.session_state.show_modal:
+            # استایل‌های ریسپانسیو
+            modal_style = """
             <style>
-                .modal {
+                .modal-overlay {
                     position: fixed;
                     top: 0;
                     left: 0;
-                    width: 100%;
-                    height: 100%;
-                    background-color: rgba(0,0,0,0.8);
+                    right: 0;
+                    bottom: 0;
+                    background-color: rgba(0,0,0,0.7);
                     z-index: 1000;
                     display: flex;
-                    flex-direction: column;
-                    align-items: center;
                     justify-content: center;
+                    align-items: center;
                 }
-                .modal-content {
+                .modal-container {
                     background: white;
-                    padding: 20px;
                     border-radius: 10px;
-                    max-width: 80%;
-                    max-height: 80%;
-                    overflow: auto;
+                    width: 90%;
+                    max-width: 500px;
+                    max-height: 90vh;
+                    overflow-y: auto;
+                    padding: 20px;
+                    position: relative;
+                }
+                .close-btn {
+                    position: absolute;
+                    top: 10px;
+                    left: 10px;
+                    font-size: 24px;
+                    cursor: pointer;
+                    color: #333;
+                }
+                .modal-image {
+                    width: 100%;
+                    margin: 10px 0;
+                    border-radius: 5px;
+                }
+                @media (max-width: 600px) {
+                    .modal-container {
+                        width: 95%;
+                        padding: 15px;
+                    }
                 }
             </style>
-            <div class="modal">
-                <div class="modal-content">
-            """, unsafe_allow_html=True)
-            
-            try:
-                img1 = Image.open("explanation_control.png")
-                st.image(img1, caption="مثال توضیحات")
-                
-                img2 = Image.open("explanation_input.png")
-                st.image(img2, caption="مثال ورودی")
-                
-                img3 = Image.open("explanation_counterfactual.png")
-                st.image(img3, caption="مثال شرایط متفاوت")
-            except FileNotFoundError:
-                st.error("فایل تصویر یافت نشد!")
-            
-            st.markdown("</div></div>", unsafe_allow_html=True)
-            
-            if st.button("بستن"):
+            """
+
+            # محتوای مدال
+            modal_content = f"""
+            {modal_style}
+            <div class="modal-overlay">
+                <div class="modal-container">
+                    <div class="close-btn" onclick="document.getElementById('close-modal').click()">×</div>
+                    <h3 style="text-align: center; margin-bottom: 20px;">نمونه توضیحات قیمت‌گذاری</h3>
+                    
+                    <img class="modal-image" src="data:image/png;base64,{img_to_base64('explanation_control.png')}">
+                    <img class="modal-image" src="data:image/png;base64,{img_to_base64('explanation_input.png')}">
+                    <img class="modal-image" src="data:image/png;base64,{img_to_base64('explanation_counterfactual.png')}">
+                </div>
+            </div>
+            <button id="close-modal" style="display: none;"></button>
+            """
+
+            # نمایش مدال
+            st.components.v1.html(modal_content, height=0)
+
+            # دکمه بستن در استریملیت
+            if st.button("بستن", key="modal_close_btn"):
                 st.session_state.show_modal = False
-                st.rerun() 
+                st.rerun()
 
     # دکمه ادامه
     if st.button("ادامه", key=f"continue_{current_q['key']}"):
@@ -1620,6 +1638,12 @@ def explanation_questions():
             
             # رفرش صفحه برای نمایش سوال بعدی
             st.rerun()
+
+# تابع کمکی برای تبدیل تصویر به base64
+def img_to_base64(img_path):
+    import base64
+    with open(img_path, "rb") as img_file:
+        return base64.b64encode(img_file.read()).decode('utf-8')
             
 def demographic_form():
     """فرم اطلاعات دموگرافیک"""