JeCabrera/Creative_Idea_CopyXpert

1import streamlit as st2 3def apply_styles():4    return """5        <style>6        /* Remove top margin and reduce other margins */7        .main .block-container {8            padding-top: 1rem !important;9            margin-top: 0 !important;10            max-width: 95% !important;11        }12        13        h1, h3 {14            text-align: center;15            margin-top: 0.5rem !important;16            margin-bottom: 0.5rem !important;17        }18        19        .stButton > button {20            background-color: #FFD700 !important;21            color: black !important;22            border: 1px solid black !important;23            font-weight: bold !important;24            width: 80% !important;25            margin-left: 10% !important;26        }27        28        [data-testid="stDownloadButton"] {29            text-align: center;30            display: flex;31            justify-content: center;32            margin-top: 5px;33            width: 90%;34            margin-left: auto;35            margin-right: auto;36        }37        38        [data-testid="stDownloadButton"] button {39            width: 100%;40            border-radius: 5px;41            height: 3em;42            background: linear-gradient(to right, #00D100, #009900);43            color: white;44            font-weight: bold;45            transition: all 0.3s ease;46            border: none;47            text-transform: uppercase;48            letter-spacing: 1px;49        }50        51        [data-testid="stDownloadButton"] button:hover {52            background: linear-gradient(to right, #00C000, #008800);53            transform: translateY(-2px);54            box-shadow: 0 4px 8px rgba(0,0,0,0.1);55        }56        57        .stButton > button:hover {58            transform: translateY(-2px);59            box-shadow: 0 4px 8px rgba(0,0,0,0.1);60            transition: all 0.3s ease;61        }62        63        /* Hide the hamburger menu and Streamlit footer */64        #MainMenu {visibility: hidden;}65        footer {visibility: hidden;}66        67        /* Creative Concept Styling */68        .concept-title {69            font-size: 1.5rem;70            font-weight: bold;71            color: #2c3e50;72            margin-top: 2rem;73            padding: 0.5rem;74            border-bottom: 2px solid #3498db;75        }76        77        .section-header {78            font-size: 1.2rem;79            font-weight: bold;80            color: #3498db;81            margin-top: 1rem;82            margin-bottom: 0.5rem;83        }84        85        .analogy {86            color: #e74c3c;87            font-weight: bold;88        }89        90        .creative-concepts {91            background-color: #f8f9fa;92            padding: 1.5rem;93            border-radius: 10px;94            box-shadow: 0 4px 6px rgba(0,0,0,0.1);95            margin-bottom: 1.5rem;96        }97        </style>98    """99    st.markdown("""100        <style>101        .stTextArea > label {102            font-size: 1.2rem;103            font-weight: bold;104            color: #2c3e50;105        }106        107        .stSelectbox > label {108            font-size: 1.2rem;109            font-weight: bold;110            color: #2c3e50;111        }112        113        .stSlider > label {114            font-size: 1.2rem;115            font-weight: bold;116            color: #2c3e50;117        }118        119        .stButton > button {120            background-color: #2c3e50;121            color: white;122            padding: 0.5rem 2rem;123            font-size: 1.1rem;124            font-weight: bold;125            border-radius: 5px;126        }127        128        .stButton > button:hover {129            background-color: #34495e;130        }131        132        h1 {133            color: #2c3e50;134            font-size: 2.5rem;135            margin-bottom: 1rem;136        }137        138        h3 {139            color: #34495e;140            font-size: 1.3rem;141            font-weight: normal;142            margin-bottom: 2rem;143        }144        145        .stMarkdown {146            font-size: 1.1rem;147        }148        149        .element-container {150            margin-bottom: 1rem;151        }152        </style>153    """, unsafe_allow_html=True)154 155def format_creative_response(response_text):156    """Format the creative response with custom styling"""157    if not response_text or response_text.startswith("Error") or response_text.startswith("Debes"):158        return response_text159    160    # Parse the response into sections161    sections = []162    current_concept = {"title": "", "content": []}163    current_section = None164    165    for line in response_text.split('\n'):166        line = line.strip()167        if not line:168            continue169            170        if line.startswith("CONCEPTO CREATIVO"):171            # Start a new concept172            if current_concept["title"]:173                sections.append(current_concept)174            current_concept = {"title": line, "content": []}175            current_section = None176        elif line.startswith("Concepto:"):177            current_section = "concept"178            current_concept["content"].append({"type": current_section, "header": line, "text": ""})179        elif line.startswith("Creatividad:"):180            current_section = "creativity"181            current_concept["content"].append({"type": current_section, "header": line, "text": ""})182        elif line.startswith("Ejemplo de Titular:"):183            current_section = "headline"184            current_concept["content"].append({"type": current_section, "header": line, "text": ""})185        elif current_section:186            # Add content to the current section187            current_concept["content"][-1]["text"] = line188    189    # Add the last concept190    if current_concept["title"]:191        sections.append(current_concept)192    193    # Build the HTML194    html = ""195    for concept in sections:196        html += f'<div class="creative-concept-card">'197        html += f'<div class="concept-title">{concept["title"]}</div>'198        199        for item in concept["content"]:200            html += f'<div class="concept-section">'201            html += f'<div class="section-header">{item["header"]}</div>'202            203            # Apply special styling to analogy text204            if item["type"] == "creativity" and "es como" in item["text"] and "porque" in item["text"]:205                import re206                analogy_pattern = r'([^\.]+es como [^\.]+porque [^\.]+)'207                styled_text = re.sub(analogy_pattern, r'<span class="analogy">\1</span>', item["text"])208                html += f'<div class="section-content">{styled_text}</div>'209            else:210                html += f'<div class="section-content">{item["text"]}</div>'211            212            html += '</div>'213        214        html += '</div>'215    216    # Add custom CSS for the new layout217    css = """218    <style>219    .creative-concept-card {220        background-color: #f8f9fa;221        padding: 1.5rem;222        border-radius: 10px;223        box-shadow: 0 4px 6px rgba(0,0,0,0.1);224        margin-bottom: 2rem;225        margin-top: 0.5rem;  /* Reduced top margin */226    }227    228    .concept-title {229        font-size: 1.5rem;230        font-weight: bold;231        color: #2c3e50;232        padding-bottom: 0.5rem;233        border-bottom: 2px solid #3498db;234        margin-bottom: 1.5rem;235        margin-top: 0;  /* Remove top margin from title */236    }237    238    /* Additional style to reduce space at the top of the output area */239    .stMarkdown {240        margin-top: 0 !important;241        padding-top: 0 !important;242    }243    244    /* Ensure the first concept has minimal top margin */245    .creative-concept-card:first-child {246        margin-top: 0;247    }248    249    .concept-section {250        margin-bottom: 1.5rem;251    }252    253    .section-header {254        font-size: 1.2rem;255        font-weight: bold;256        color: #3498db;257        margin-bottom: 0.5rem;258    }259    260    .section-content {261        font-size: 1.1rem;262        line-height: 1.5;263    }264    265    .analogy {266        color: #e74c3c;267        font-weight: bold;268    }269    </style>270    """271    272    return css + html273 274def format_story_output(story_text):275    return f"""276        <div class="story-output">277            {story_text}278        </div>279    """