Update pages/Introduction.py

pages/Introduction.py

@@ -8,17 +8,17 @@ st.set_page_config(
 )
 
 # Main Title
-st.markdown("<h1; color: #FF5733;'>🌟 Exploring Artificial Intelligence, Machine Learning, Deep Learning, and Generative AI</h1>", unsafe_allow_html=True)
+st.markdown("<h1 style='color: #FF5733;'>🌟 Exploring Artificial Intelligence, Machine Learning, Deep Learning, and Generative AI</h1>", unsafe_allow_html=True)
 
 # Visual Section: Comparison of AI, ML, DL, and Generative AI
-st.markdown("<h2 ; color: #2C3E50;'>AI vs ML vs DL vs Generative AI</h2>", unsafe_allow_html=True)
+st.markdown("<h2 style='color: #2C3E50;'>AI vs ML vs DL vs Generative AI</h2>", unsafe_allow_html=True)
 
 image_url = "https://huggingface.co/spaces/varshitha22/ML/resolve/main/images/im1.jpg"
 
 st.markdown(
     f"""
     <div style="display: flex; justify-content: center;">
-        <img src="{image_url}" alt="AI vs ML vs DL vs Generative AI" width="600">
+        <img src="{image_url}" alt="AI vs ML vs DL vs Generative AI" width="800">
     </div>
     """,
     unsafe_allow_html=True
@@ -36,7 +36,8 @@ st.markdown("""
         <li><b>Artificial Satellites</b>: A man-made object that orbits Earth or other planets. These are built for specific purposes like communication, navigation, weather monitoring, and research.</li>
         <li><b>Artificial Flowers</b>: These are man-made replicas of real flowers, crafted using materials like silk, plastic, or fabric. They are used for decoration, religious ceremonies, events, and artistic arrangements.</li>
     </ul>
-    """, unsafe_allow_html=True)
+    </div>
+""", unsafe_allow_html=True)
 
 # Section 2: Intelligence
 st.markdown("<h2 style='color: #8E44AD; font-size: 30px; font-weight: bold;'> Intelligence :</h2>", unsafe_allow_html=True)
@@ -50,7 +51,7 @@ st.markdown("""
         <li>The child sees a dog for the first time and hears their parents say, “This is a dog.”</li>
         <li>The child observes its shape, fur, barking sound, and movement.</li>
     </ul>
-    """, unsafe_allow_html=True)
+""", unsafe_allow_html=True)
 
 # Section 3: Artificial Intelligence (AI)
 st.markdown("<h2 style='color: #F39C12; font-size: 30px; font-weight: bold;'> Artificial Intelligence (AI) :</h2>", unsafe_allow_html=True)
@@ -74,7 +75,7 @@ st.markdown("""
     <ul style='font-size: 24px;'>
         <li><b>Siri, Alexa, and Google Assistant:</b> These AI systems process natural language to answer questions.</li>
     </ul>
-    """, unsafe_allow_html=True)
+""", unsafe_allow_html=True)
 
 # Section 4: Techniques and Tools for AI
 st.markdown("<h2 style='color: #3498DB; font-size: 30px; font-weight: bold;'> Techniques and Tools for AI</h2>", unsafe_allow_html=True)
@@ -82,7 +83,7 @@ st.markdown("""
     <p style='font-size: 24px;'>
     If you want to mimic or clone human intelligence on a machine, there are several techniques and tools involved.
     </p>
-    """, unsafe_allow_html=True)
+""", unsafe_allow_html=True)
 
 # Image Section for Techniques and Tools
 image_url = "https://huggingface.co/spaces/varshitha22/ML/resolve/main/images/im2.jpg"
@@ -90,11 +91,12 @@ image_url = "https://huggingface.co/spaces/varshitha22/ML/resolve/main/images/im
 st.markdown(
     f"""
     <div style="display: flex; justify-content: center;">
-        <img src="{image_url}" alt="AI Techniques and Tools" width="600">
+        <img src="{image_url}" alt="AI Techniques and Tools" width="900">
     </div>
     """,
     unsafe_allow_html=True
 )
+
 # Section: Machine Learning
 st.markdown("""
     <div style='background: linear-gradient(to right, #E1F5FE, #FCE4EC); padding: 25px; border-radius: 12px; box-shadow: 2px 2px 12px rgba(0, 0, 0, 0.1);'>
@@ -120,7 +122,7 @@ st.markdown("""
             <li><b>Object Detection & Sentiment Analysis:</b> Used in computer vision and NLP applications like fraud detection, emotion analysis.</li>
         </ul>
     </div>
-    """, unsafe_allow_html=True)
+""", unsafe_allow_html=True)
 
 # Section: Deep Learning
 st.markdown("""
@@ -131,7 +133,7 @@ st.markdown("""
         </p>
         <p style='font-size: 24px;'>These neural networks are composed of multiple layers (hence the term “deep”) that enable the model to automatically extract features from the data.</p>
     </div>
-    """, unsafe_allow_html=True)
+""", unsafe_allow_html=True)
 
 # Section: Generative AI
 st.markdown("""
@@ -141,7 +143,7 @@ st.markdown("""
         <b>Generative AI</b> refers to the branch of AI that focuses on creating new content, such as images, music, text, or videos, that is indistinguishable from human-created content.
         </p>
     </div>
-    """, unsafe_allow_html=True)
+""", unsafe_allow_html=True)
 
 # Section: Relationship Between AI, ML, DL, and Generative AI
 st.markdown("""
@@ -155,4 +157,4 @@ st.markdown("""
             <li><b>Generative AI:</b> A creative branch of DL that generates new content.</li>
         </ul>
     </div>
-    """, unsafe_allow_html=True)
+""", unsafe_allow_html=True)