+
🎥 YouTube AI Writer
-
Generate professional YouTube content with AI-powered tools
+
Generate professional YouTube content with ALwrity's AI-powered tools
""", unsafe_allow_html=True)
- # Introduction
- st.markdown("""
- ## Welcome to the YouTube AI Writer Suite
-
- This dashboard provides access to a variety of tools for creating and optimizing YouTube content.
- Select a tool below to get started with generating professional content for your channel.
-
- ### How to Use This Dashboard
-
- 1. Browse the available tools below
- 2. Click on a tool card to access its specific functionality
- 3. Fill in the required information
- 4. Generate high-quality content for your YouTube channel
- """)
-
# Group tools by category
categories = {}
for tool in youtube_tools:
diff --git a/lib/utils/ui_setup.py b/lib/utils/ui_setup.py
index e2b6d623..75a13a15 100644
--- a/lib/utils/ui_setup.py
+++ b/lib/utils/ui_setup.py
@@ -5,6 +5,12 @@ from lib.utils.content_generators import content_planning_tools, ai_writers
from lib.utils.alwrity_utils import ai_social_writer
from lib.utils.seo_tools import ai_seo_tools
from lib.utils.settings_page import render_settings_page
+# Import social media writer functions
+from lib.ai_writers.facebook_ai_writer import facebook_post_writer
+from lib.ai_writers.linkedin_ai_writer import linked_post_writer
+from lib.ai_writers.twitter_ai_writer import tweet_writer
+from lib.ai_writers.insta_ai_writer import insta_writer
+from lib.ai_writers.youtube_writers.youtube_ai_writer import youtube_main_menu
def setup_ui():
@@ -17,10 +23,41 @@ def setup_ui():
background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
}
+ /* Compact layout styling with zero top padding when sub-tab selected */
+ .main .block-container {
+ padding-top: 0 !important; /* Remove all top padding */
+ padding-bottom: 0;
+ max-width: 100%;
+ }
+
+ /* Remove extra padding and margins */
+ .stMarkdown {
+ margin: 0;
+ padding: 0;
+ }
+
+ /* Header styling with zero margins when in sub-tab */
+ .sub-tab-active h1, .sub-tab-active h2, .sub-tab-active h3 {
+ display: none; /* Hide headers in sub-tab mode */
+ }
+
+ /* Remove extra padding in containers */
+ .stMarkdown {
+ margin-bottom: 0;
+ }
+
/* Header styling */
h1, h2, h3 {
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
font-weight: 600;
+ margin-top: 0;
+ margin-bottom: 0.5rem; /* Reduced from 1rem */
+ padding-top: 0;
+ }
+
+ /* Reduce spacing between elements */
+ .element-container {
+ margin-bottom: 0.5rem; /* Reduced from 1rem */
}
/* Button styling */
@@ -28,6 +65,7 @@ def setup_ui():
border-radius: 8px;
font-weight: 500;
transition: all 0.3s ease;
+ margin-bottom: 0.25rem; /* Reduced from 0.5rem */
}
.stButton > button:hover {
@@ -51,27 +89,36 @@ def setup_ui():
.streamlit-expanderHeader {
font-weight: 500;
color: #2c3e50;
+ margin-bottom: 0.5rem;
}
/* Success message styling */
.stSuccess {
background: linear-gradient(135deg, #43c6ac 0%, #191654 100%);
- padding: 1rem;
+ padding: 0.75rem;
border-radius: 8px;
color: white;
+ margin-bottom: 1rem;
}
/* Error message styling */
.stError {
background: linear-gradient(135deg, #ff6b6b 0%, #ff8e8e 100%);
- padding: 1rem;
+ padding: 0.75rem;
border-radius: 8px;
color: white;
+ margin-bottom: 1rem;
+ }
+
+ /* Info message styling */
+ .stInfo {
+ padding: 0.75rem;
+ margin-bottom: 1rem;
}
/* Sidebar navigation styling */
.sidebar-nav {
- padding: 1rem 0;
+ padding: 0.5rem 0;
}
.nav-button {
@@ -90,13 +137,157 @@ def setup_ui():
.nav-button:hover {
background: rgba(0,0,0,0.05);
- padding-left: 1.5rem;
+ padding-left: 0.5rem;
}
.nav-button.active {
background: #1565C0;
color: white;
}
+
+ /* Enhanced Sub-menu styling with minimal spacing */
+ .sub-menu {
+ padding-left: 1rem;
+ margin: 0;
+ border-left: 2px solid rgba(21, 101, 192, 0.3);
+ background: rgba(255, 255, 255, 0.05);
+ border-radius: 0 8px 8px 0;
+ padding-top: 0;
+ padding-bottom: 0;
+ }
+
+ /* Sub-menu button styling with minimal gaps */
+ .sub-menu .stButton > button {
+ font-size: 0.9rem;
+ text-align: left;
+ padding: 0.4rem 0.8rem;
+ background: transparent;
+ border: none;
+ color: #2c3e50;
+ font-weight: 500;
+ transition: all 0.2s ease;
+ margin: 0;
+ border-radius: 4px;
+ min-height: 0;
+ height: auto;
+ line-height: 1.2;
+ width: 100%;
+ }
+
+ /* Platform-specific button styles */
+ .facebook-button .stButton > button {
+ color: #4267B2;
+ background: rgba(66, 103, 178, 0.1);
+ }
+
+ .linkedin-button .stButton > button {
+ color: #0077B5;
+ background: rgba(0, 119, 181, 0.1);
+ }
+
+ .twitter-button .stButton > button {
+ color: #1DA1F2;
+ background: rgba(29, 161, 242, 0.1);
+ }
+
+ .instagram-button .stButton > button {
+ color: #E1306C;
+ background: rgba(225, 48, 108, 0.1);
+ }
+
+ .youtube-button .stButton > button {
+ color: #FF0000;
+ background: rgba(255, 0, 0, 0.1);
+ }
+
+ /* Platform-specific hover states */
+ .facebook-button .stButton > button:hover {
+ background: rgba(66, 103, 178, 0.2) !important;
+ color: #4267B2 !important;
+ }
+
+ .linkedin-button .stButton > button:hover {
+ background: rgba(0, 119, 181, 0.2) !important;
+ color: #0077B5 !important;
+ }
+
+ .twitter-button .stButton > button:hover {
+ background: rgba(29, 161, 242, 0.2) !important;
+ color: #1DA1F2 !important;
+ }
+
+ .instagram-button .stButton > button:hover {
+ background: rgba(225, 48, 108, 0.2) !important;
+ color: #E1306C !important;
+ }
+
+ .youtube-button .stButton > button:hover {
+ background: rgba(255, 0, 0, 0.2) !important;
+ color: #FF0000 !important;
+ }
+
+ /* Platform-specific active states */
+ .facebook-button.active .stButton > button {
+ background: #4267B2 !important;
+ color: white !important;
+ }
+
+ .linkedin-button.active .stButton > button {
+ background: #0077B5 !important;
+ color: white !important;
+ }
+
+ .twitter-button.active .stButton > button {
+ background: #1DA1F2 !important;
+ color: white !important;
+ }
+
+ .instagram-button.active .stButton > button {
+ background: #E1306C !important;
+ color: white !important;
+ }
+
+ .youtube-button.active .stButton > button {
+ background: #FF0000 !important;
+ color: white !important;
+ }
+
+ /* Remove any extra spacing from button containers */
+ .sub-menu .stButton {
+ margin: 0;
+ padding: 0;
+ }
+
+ .sub-menu > div {
+ margin: 0;
+ padding: 0;
+ }
+
+ .sub-menu .element-container {
+ margin: 0;
+ padding: 0;
+ }
+
+ /* Ensure minimal gaps between elements */
+ .sub-menu > div:not(:last-child) {
+ margin-bottom: 1px;
+ }
+
+ /* Sidebar icon styling */
+ .sidebar-icon {
+ padding: 1rem;
+ text-align: center;
+ position: fixed;
+ bottom: 20px;
+ left: 50%;
+ transform: translateX(-50%);
+ }
+
+ .sidebar-icon img {
+ width: 80px !important;
+ height: auto !important;
+ margin: 0 auto;
+ }
""", unsafe_allow_html=True)
@@ -106,6 +297,10 @@ def setup_alwrity_ui():
# Initialize session state for active tab if not exists
if 'active_tab' not in st.session_state:
st.session_state.active_tab = "Content Planning"
+
+ # Initialize session state for active sub-tab if not exists
+ if 'active_sub_tab' not in st.session_state:
+ st.session_state.active_sub_tab = None
# Define the navigation items with their icons and functions
nav_items = {
@@ -113,7 +308,7 @@ def setup_alwrity_ui():
"AI Writers": ("📝", ai_writers),
"Agents Teams": ("🤝", lambda: st.subheader("Agents Teams - Coming Soon!")),
"AI SEO Tools": ("🔍", ai_seo_tools),
- "AI Social Tools": ("📱", ai_social_writer),
+ "AI Social Tools": ("📱", None), # Set to None as we'll handle this separately
"Ask Alwrity": ("💬", lambda: (
st.subheader("Chat with your Data, Chat with any Data.. COMING SOON !"),
st.markdown("Create a collection by uploading files (PDF, MD, CSV, etc), or crawl a data source (Websites, more sources coming soon."),
@@ -121,6 +316,15 @@ def setup_alwrity_ui():
)),
"ALwrity Settings": ("⚙️", render_settings_page)
}
+
+ # Define sub-menu items for AI Social Tools
+ social_tools_submenu = {
+ "Facebook": ("📘", lambda: facebook_post_writer()),
+ "LinkedIn": ("💼", lambda: linked_post_writer()),
+ "Twitter": ("🐦", lambda: tweet_writer()),
+ "Instagram": ("📸", lambda: insta_writer()),
+ "YouTube": ("🎥", lambda: youtube_main_menu())
+ }
# Create sidebar navigation
st.sidebar.markdown("### ALwrity Options")
@@ -129,12 +333,106 @@ def setup_alwrity_ui():
# Create navigation buttons
for name, (icon, func) in nav_items.items():
button_class = "nav-button active" if st.session_state.active_tab == name else "nav-button"
- if st.sidebar.button(f"{icon} {name}", key=f"nav_{name}",
- help=f"Navigate to {name}", use_container_width=True):
- st.session_state.active_tab = name
+
+ if name == "AI Social Tools":
+ # For AI Social Tools, we'll create a button that toggles the sub-menu
+ if st.sidebar.button(f"{icon} {name}", key=f"nav_{name}",
+ help=f"Navigate to {name}", use_container_width=True):
+ st.session_state.active_tab = name
+ # Reset sub-tab when main tab changes
+ st.session_state.active_sub_tab = None
+
+ # If AI Social Tools is active, show the sub-menu
+ if st.session_state.active_tab == "AI Social Tools":
+ st.sidebar.markdown('', unsafe_allow_html=True)
+ else:
+ # For other navigation items, create regular buttons
+ if st.sidebar.button(f"{icon} {name}", key=f"nav_{name}",
+ help=f"Navigate to {name}", use_container_width=True):
+ st.session_state.active_tab = name
+ # Reset sub-tab when main tab changes
+ st.session_state.active_sub_tab = None
st.sidebar.markdown('