Update styles.py

styles.py

@@ -1,266 +1,279 @@
-import streamlit as st
-
-def apply_styles():
-    return """
-        <style>
-        /* Remove top margin and reduce other margins */
-        .main .block-container {
-            padding-top: 1rem !important;
-            margin-top: 0 !important;
-            max-width: 95% !important;
-        }
-        
-        h1, h3 {
-            text-align: center;
-            margin-top: 0.5rem !important;
-            margin-bottom: 0.5rem !important;
-        }
-        
-        .stButton > button {
-            background-color: #FFD700 !important;
-            color: black !important;
-            border: 1px solid black !important;
-            font-weight: bold !important;
-            width: 80% !important;
-            margin-left: 10% !important;
-        }
-        
-        [data-testid="stDownloadButton"] {
-            text-align: center;
-            display: flex;
-            justify-content: center;
-            margin-top: 5px;
-            width: 90%;
-            margin-left: auto;
-            margin-right: auto;
-        }
-        
-        [data-testid="stDownloadButton"] button {
-            width: 100%;
-            border-radius: 5px;
-            height: 3em;
-            background: linear-gradient(to right, #00D100, #009900);
-            color: white;
-            font-weight: bold;
-            transition: all 0.3s ease;
-            border: none;
-            text-transform: uppercase;
-            letter-spacing: 1px;
-        }
-        
-        [data-testid="stDownloadButton"] button:hover {
-            background: linear-gradient(to right, #00C000, #008800);
-            transform: translateY(-2px);
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-        }
-        
-        .stButton > button:hover {
-            transform: translateY(-2px);
-            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
-            transition: all 0.3s ease;
-        }
-        
-        /* Hide the hamburger menu and Streamlit footer */
-        #MainMenu {visibility: hidden;}
-        footer {visibility: hidden;}
-        
-        /* Creative Concept Styling */
-        .concept-title {
-            font-size: 1.5rem;
-            font-weight: bold;
-            color: #2c3e50;
-            margin-top: 2rem;
-            padding: 0.5rem;
-            border-bottom: 2px solid #3498db;
-        }
-        
-        .section-header {
-            font-size: 1.2rem;
-            font-weight: bold;
-            color: #3498db;
-            margin-top: 1rem;
-            margin-bottom: 0.5rem;
-        }
-        
-        .analogy {
-            color: #e74c3c;
-            font-weight: bold;
-        }
-        
-        .creative-concepts {
-            background-color: #f8f9fa;
-            padding: 1.5rem;
-            border-radius: 10px;
-            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-            margin-bottom: 1.5rem;
-        }
-        </style>
-    """
-    st.markdown("""
-        <style>
-        .stTextArea > label {
-            font-size: 1.2rem;
-            font-weight: bold;
-            color: #2c3e50;
-        }
-        
-        .stSelectbox > label {
-            font-size: 1.2rem;
-            font-weight: bold;
-            color: #2c3e50;
-        }
-        
-        .stSlider > label {
-            font-size: 1.2rem;
-            font-weight: bold;
-            color: #2c3e50;
-        }
-        
-        .stButton > button {
-            background-color: #2c3e50;
-            color: white;
-            padding: 0.5rem 2rem;
-            font-size: 1.1rem;
-            font-weight: bold;
-            border-radius: 5px;
-        }
-        
-        .stButton > button:hover {
-            background-color: #34495e;
-        }
-        
-        h1 {
-            color: #2c3e50;
-            font-size: 2.5rem;
-            margin-bottom: 1rem;
-        }
-        
-        h3 {
-            color: #34495e;
-            font-size: 1.3rem;
-            font-weight: normal;
-            margin-bottom: 2rem;
-        }
-        
-        .stMarkdown {
-            font-size: 1.1rem;
-        }
-        
-        .element-container {
-            margin-bottom: 1rem;
-        }
-        </style>
-    """, unsafe_allow_html=True)
-
-def format_creative_response(response_text):
-    """Format the creative response with custom styling"""
-    if not response_text or response_text.startswith("Error") or response_text.startswith("Debes"):
-        return response_text
-    
-    # Parse the response into sections
-    sections = []
-    current_concept = {"title": "", "content": []}
-    current_section = None
-    
-    for line in response_text.split('\n'):
-        line = line.strip()
-        if not line:
-            continue
-            
-        if line.startswith("CONCEPTO CREATIVO"):
-            # Start a new concept
-            if current_concept["title"]:
-                sections.append(current_concept)
-            current_concept = {"title": line, "content": []}
-            current_section = None
-        elif line.startswith("Concepto:"):
-            current_section = "concept"
-            current_concept["content"].append({"type": current_section, "header": line, "text": ""})
-        elif line.startswith("Creatividad:"):
-            current_section = "creativity"
-            current_concept["content"].append({"type": current_section, "header": line, "text": ""})
-        elif line.startswith("Ejemplo de Titular:"):
-            current_section = "headline"
-            current_concept["content"].append({"type": current_section, "header": line, "text": ""})
-        elif current_section:
-            # Add content to the current section
-            current_concept["content"][-1]["text"] = line
-    
-    # Add the last concept
-    if current_concept["title"]:
-        sections.append(current_concept)
-    
-    # Build the HTML
-    html = ""
-    for concept in sections:
-        html += f'<div class="creative-concept-card">'
-        html += f'<div class="concept-title">{concept["title"]}</div>'
-        
-        for item in concept["content"]:
-            html += f'<div class="concept-section">'
-            html += f'<div class="section-header">{item["header"]}</div>'
-            
-            # Apply special styling to analogy text
-            if item["type"] == "creativity" and "es como" in item["text"] and "porque" in item["text"]:
-                import re
-                analogy_pattern = r'([^\.]+es como [^\.]+porque [^\.]+)'
-                styled_text = re.sub(analogy_pattern, r'<span class="analogy">\1</span>', item["text"])
-                html += f'<div class="section-content">{styled_text}</div>'
-            else:
-                html += f'<div class="section-content">{item["text"]}</div>'
-            
-            html += '</div>'
-        
-        html += '</div>'
-    
-    # Add custom CSS for the new layout
-    css = """
-    <style>
-    .creative-concept-card {
-        background-color: #f8f9fa;
-        padding: 1.5rem;
-        border-radius: 10px;
-        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
-        margin-bottom: 2rem;
-    }
-    
-    .concept-title {
-        font-size: 1.5rem;
-        font-weight: bold;
-        color: #2c3e50;
-        padding-bottom: 0.5rem;
-        border-bottom: 2px solid #3498db;
-        margin-bottom: 1.5rem;
-    }
-    
-    .concept-section {
-        margin-bottom: 1.5rem;
-    }
-    
-    .section-header {
-        font-size: 1.2rem;
-        font-weight: bold;
-        color: #3498db;
-        margin-bottom: 0.5rem;
-    }
-    
-    .section-content {
-        font-size: 1.1rem;
-        line-height: 1.5;
-    }
-    
-    .analogy {
-        color: #e74c3c;
-        font-weight: bold;
-    }
-    </style>
-    """
-    
-    return css + html
-
-def format_story_output(story_text):
-    return f"""
-        <div class="story-output">
-            {story_text}
-        </div>
+import streamlit as st
+
+def apply_styles():
+    return """
+        <style>
+        /* Remove top margin and reduce other margins */
+        .main .block-container {
+            padding-top: 1rem !important;
+            margin-top: 0 !important;
+            max-width: 95% !important;
+        }
+        
+        h1, h3 {
+            text-align: center;
+            margin-top: 0.5rem !important;
+            margin-bottom: 0.5rem !important;
+        }
+        
+        .stButton > button {
+            background-color: #FFD700 !important;
+            color: black !important;
+            border: 1px solid black !important;
+            font-weight: bold !important;
+            width: 80% !important;
+            margin-left: 10% !important;
+        }
+        
+        [data-testid="stDownloadButton"] {
+            text-align: center;
+            display: flex;
+            justify-content: center;
+            margin-top: 5px;
+            width: 90%;
+            margin-left: auto;
+            margin-right: auto;
+        }
+        
+        [data-testid="stDownloadButton"] button {
+            width: 100%;
+            border-radius: 5px;
+            height: 3em;
+            background: linear-gradient(to right, #00D100, #009900);
+            color: white;
+            font-weight: bold;
+            transition: all 0.3s ease;
+            border: none;
+            text-transform: uppercase;
+            letter-spacing: 1px;
+        }
+        
+        [data-testid="stDownloadButton"] button:hover {
+            background: linear-gradient(to right, #00C000, #008800);
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+        }
+        
+        .stButton > button:hover {
+            transform: translateY(-2px);
+            box-shadow: 0 4px 8px rgba(0,0,0,0.1);
+            transition: all 0.3s ease;
+        }
+        
+        /* Hide the hamburger menu and Streamlit footer */
+        #MainMenu {visibility: hidden;}
+        footer {visibility: hidden;}
+        
+        /* Creative Concept Styling */
+        .concept-title {
+            font-size: 1.5rem;
+            font-weight: bold;
+            color: #2c3e50;
+            margin-top: 2rem;
+            padding: 0.5rem;
+            border-bottom: 2px solid #3498db;
+        }
+        
+        .section-header {
+            font-size: 1.2rem;
+            font-weight: bold;
+            color: #3498db;
+            margin-top: 1rem;
+            margin-bottom: 0.5rem;
+        }
+        
+        .analogy {
+            color: #e74c3c;
+            font-weight: bold;
+        }
+        
+        .creative-concepts {
+            background-color: #f8f9fa;
+            padding: 1.5rem;
+            border-radius: 10px;
+            box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+            margin-bottom: 1.5rem;
+        }
+        </style>
+    """
+    st.markdown("""
+        <style>
+        .stTextArea > label {
+            font-size: 1.2rem;
+            font-weight: bold;
+            color: #2c3e50;
+        }
+        
+        .stSelectbox > label {
+            font-size: 1.2rem;
+            font-weight: bold;
+            color: #2c3e50;
+        }
+        
+        .stSlider > label {
+            font-size: 1.2rem;
+            font-weight: bold;
+            color: #2c3e50;
+        }
+        
+        .stButton > button {
+            background-color: #2c3e50;
+            color: white;
+            padding: 0.5rem 2rem;
+            font-size: 1.1rem;
+            font-weight: bold;
+            border-radius: 5px;
+        }
+        
+        .stButton > button:hover {
+            background-color: #34495e;
+        }
+        
+        h1 {
+            color: #2c3e50;
+            font-size: 2.5rem;
+            margin-bottom: 1rem;
+        }
+        
+        h3 {
+            color: #34495e;
+            font-size: 1.3rem;
+            font-weight: normal;
+            margin-bottom: 2rem;
+        }
+        
+        .stMarkdown {
+            font-size: 1.1rem;
+        }
+        
+        .element-container {
+            margin-bottom: 1rem;
+        }
+        </style>
+    """, unsafe_allow_html=True)
+
+def format_creative_response(response_text):
+    """Format the creative response with custom styling"""
+    if not response_text or response_text.startswith("Error") or response_text.startswith("Debes"):
+        return response_text
+    
+    # Parse the response into sections
+    sections = []
+    current_concept = {"title": "", "content": []}
+    current_section = None
+    
+    for line in response_text.split('\n'):
+        line = line.strip()
+        if not line:
+            continue
+            
+        if line.startswith("CONCEPTO CREATIVO"):
+            # Start a new concept
+            if current_concept["title"]:
+                sections.append(current_concept)
+            current_concept = {"title": line, "content": []}
+            current_section = None
+        elif line.startswith("Concepto:"):
+            current_section = "concept"
+            current_concept["content"].append({"type": current_section, "header": line, "text": ""})
+        elif line.startswith("Creatividad:"):
+            current_section = "creativity"
+            current_concept["content"].append({"type": current_section, "header": line, "text": ""})
+        elif line.startswith("Ejemplo de Titular:"):
+            current_section = "headline"
+            current_concept["content"].append({"type": current_section, "header": line, "text": ""})
+        elif current_section:
+            # Add content to the current section
+            current_concept["content"][-1]["text"] = line
+    
+    # Add the last concept
+    if current_concept["title"]:
+        sections.append(current_concept)
+    
+    # Build the HTML
+    html = ""
+    for concept in sections:
+        html += f'<div class="creative-concept-card">'
+        html += f'<div class="concept-title">{concept["title"]}</div>'
+        
+        for item in concept["content"]:
+            html += f'<div class="concept-section">'
+            html += f'<div class="section-header">{item["header"]}</div>'
+            
+            # Apply special styling to analogy text
+            if item["type"] == "creativity" and "es como" in item["text"] and "porque" in item["text"]:
+                import re
+                analogy_pattern = r'([^\.]+es como [^\.]+porque [^\.]+)'
+                styled_text = re.sub(analogy_pattern, r'<span class="analogy">\1</span>', item["text"])
+                html += f'<div class="section-content">{styled_text}</div>'
+            else:
+                html += f'<div class="section-content">{item["text"]}</div>'
+            
+            html += '</div>'
+        
+        html += '</div>'
+    
+    # Add custom CSS for the new layout
+    css = """
+    <style>
+    .creative-concept-card {
+        background-color: #f8f9fa;
+        padding: 1.5rem;
+        border-radius: 10px;
+        box-shadow: 0 4px 6px rgba(0,0,0,0.1);
+        margin-bottom: 2rem;
+        margin-top: 0.5rem;  /* Reduced top margin */
+    }
+    
+    .concept-title {
+        font-size: 1.5rem;
+        font-weight: bold;
+        color: #2c3e50;
+        padding-bottom: 0.5rem;
+        border-bottom: 2px solid #3498db;
+        margin-bottom: 1.5rem;
+        margin-top: 0;  /* Remove top margin from title */
+    }
+    
+    /* Additional style to reduce space at the top of the output area */
+    .stMarkdown {
+        margin-top: 0 !important;
+        padding-top: 0 !important;
+    }
+    
+    /* Ensure the first concept has minimal top margin */
+    .creative-concept-card:first-child {
+        margin-top: 0;
+    }
+    
+    .concept-section {
+        margin-bottom: 1.5rem;
+    }
+    
+    .section-header {
+        font-size: 1.2rem;
+        font-weight: bold;
+        color: #3498db;
+        margin-bottom: 0.5rem;
+    }
+    
+    .section-content {
+        font-size: 1.1rem;
+        line-height: 1.5;
+    }
+    
+    .analogy {
+        color: #e74c3c;
+        font-weight: bold;
+    }
+    </style>
+    """
+    
+    return css + html
+
+def format_story_output(story_text):
+    return f"""
+        <div class="story-output">
+            {story_text}
+        </div>
     """