Update app.py

app.py

@@ -5,7 +5,7 @@ from ai_utils import generate_response as _generate_response
 # Set the page configuration to wide layout
 st.set_page_config(layout="wide")
 
-# Custom CSS to style the page and text area
+# Custom CSS to style the page, text area, and flashcards
 st.markdown("""
     <style>
         .main .block-container {
@@ -23,17 +23,48 @@ st.markdown("""
             margin-top: 1rem;
             margin-bottom: 1rem;
         }
+        .flashcard-container {
+            display: flex;
+            flex-wrap: wrap;
+            gap: 1rem;
+        }
         .flashcard {
-            border: 1px solid #ddd;
+            width: 250px;
+            height: 200px;
+            border: 1px solid blue;
             border-radius: 5px;
-            padding: 1rem;
-            margin: 0.5rem 0;
+            font-size: 16px;
+            color: blue;
             background-color: #f9f9f9;
+            perspective: 1000px;
+            cursor: pointer;
         }
-        .stTextArea textarea {
-            font-size: 16px;
-            border-radius: 5px;
-            border: 2px solid #ddd;
+        .flashcard-inner {
+            position: relative;
+            width: 100%;
+            height: 100%;
+            transition: transform 0.6s;
+            transform-style: preserve-3d;
+        }
+        .flashcard:hover .flashcard-inner {
+            transform: rotateY(180deg);
+        }
+        .flashcard-front, .flashcard-back {
+            position: absolute;
+            width: 100%;
+            height: 100%;
+            backface-visibility: hidden;
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            padding: 1rem;
+        }
+        .flashcard-front {
+            background-color: #fff;
+        }
+        .flashcard-back {
+            background-color: #f9f9f9;
+            transform: rotateY(180deg);
         }
     </style>
 """, unsafe_allow_html=True)
@@ -80,60 +111,37 @@ if st.session_state.input_text:
     def generate_response(system_message, user_message):
         return _generate_response(system_message, user_message)
 
-    # Buttons for processing
+    # Process the input text and generate results
     if st.button("Generate Summary"):
         summary_prompt = "Summarize the following text into a brief summary:"
         st.session_state.summary = generate_response(summary_prompt, st.session_state.input_text)
-        st.text_area("Summary", value=st.session_state.summary, height=200, key="summary", help="Summary of the input text.")
 
     if st.button("Extract Main Points"):
         main_points_prompt = "Extract the main points from the following text and format them as a bulleted list:"
         st.session_state.main_points = generate_response(main_points_prompt, st.session_state.input_text)
-        # Format main points as a bulleted list
-        if st.session_state.main_points:
-            bullet_points = "\n".join([f"- {point.strip()}" for point in st.session_state.main_points.split("\n")])
-            st.markdown(f"### Main Points\n{bullet_points}", unsafe_allow_html=True)
 
     if st.button("Generate Flashcards"):
         flashcards_prompt = "Create flashcards with questions and answers based on the following text:"
         st.session_state.flashcards = generate_response(flashcards_prompt, st.session_state.input_text)
         
-        # Display flashcards as actual cards
+        # Display flashcards as interactive cards
         flashcards = st.session_state.flashcards.split("\n\n")  # Assuming flashcards are separated by double newlines
+        st.markdown('<div class="flashcard-container">', unsafe_allow_html=True)
         for card in flashcards:
+            question, answer = card.split('\n', 1)  # Assuming each card is in "question\nanswer" format
             st.markdown(f"""
                 <div class="flashcard">
-                    {card}
+                    <div class="flashcard-inner">
+                        <div class="flashcard-front">
+                            <p>{question.strip()}</p>
+                        </div>
+                        <div class="flashcard-back">
+                            <p>{answer.strip()}</p>
+                        </div>
+                    </div>
                 </div>
             """, unsafe_allow_html=True)
+        st.markdown('</div>', unsafe_allow_html=True)
 
-# Results
-if st.session_state.summary or st.session_state.main_points or st.session_state.flashcards:
-    st.subheader("Results")
-    
-    st.subheader("Summary")
-    st.text_area("Summary", value=st.session_state.summary, height=200, key="summary_results", help="Generated summary.")
-
-    st.subheader("Main Points")
-    if st.session_state.main_points:
-        bullet_points = "\n".join([f"- {point.strip()}" for point in st.session_state.main_points.split("\n")])
-        st.markdown(f"### Main Points\n{bullet_points}", unsafe_allow_html=True)  # Displaying the main points as a bulleted list
-
-    st.subheader("Flashcards")
-    if st.session_state.flashcards:
-        flashcards = st.session_state.flashcards.split("\n\n")  # Assuming flashcards are separated by double newlines
-        for card in flashcards:
-            st.markdown(f"""
-                <div class="flashcard">
-                    {card}
-                </div>
-            """, unsafe_allow_html=True)
-    
-    st.subheader("Download Results")
-    results = f"Summary:\n{st.session_state.summary}\n\nMain Points:\n{st.session_state.main_points}\n\nFlashcards:\n{st.session_state.flashcards}"
-    st.download_button(
-        label="Download Results",
-        data=results,
-        file_name="results.txt",
-        mime="text/plain"
-    )
+    # Prepare results for download
+    if st.session_state.summary or st.session_state.main_points or st.session_state.flashcards: