responsive style

src/assets/style.css

@@ -0,0 +1,182 @@
+/* Base theme */
+:root {
+  --primary-color: #00b4d8;
+  --bg-color: #1b1b1b;
+  --card-bg: #2d2d2d;
+  --text-color: #f0f0f0;
+  --border-color: #404040;
+  --hover-color: #90e0ef;
+}
+
+/* Main container */
+.stApp {
+  background-color: var(--bg-color);
+  color: var(--text-color);
+}
+
+/* Responsive container */
+.stApp > div:nth-child(2) {
+  padding: 2rem !important;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+@media (min-width: 768px) {
+  .stApp > div:nth-child(2) {
+    padding: 2rem 5rem !important;
+  }
+}
+
+/* Headers */
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
+  color: white !important;
+  font-weight: 600 !important;
+  margin-bottom: 1rem !important;
+}
+
+/* Input fields */
+.stTextInput input,
+.stSelectbox select {
+  background-color: var(--card-bg) !important;
+  color: var(--text-color) !important;
+  border: 1px solid var(--border-color) !important;
+  border-radius: 8px;
+  padding: 0.75rem 1rem;
+  font-size: clamp(14px, 2vw, 16px);
+  transition: all 0.3s;
+  width: 100% !important;
+}
+
+.stTextInput input:focus,
+.stSelectbox select:focus {
+  border-color: var(--primary-color) !important;
+  box-shadow: 0 0 0 2px rgba(114, 137, 218, 0.2);
+}
+
+/* Buttons */
+.stButton button {
+  background: linear-gradient(45deg, var(--primary-color), #8ea1e1) !important;
+  color: white !important;
+  border: none !important;
+  border-radius: 8px !important;
+  padding: 0.75rem 1.5rem !important;
+  font-weight: 600 !important;
+  width: 100% !important;
+  transition: all 0.3s !important;
+  font-size: clamp(14px, 2vw, 16px);
+}
+
+.stButton button:hover {
+  transform: translateY(-2px);
+  box-shadow: 0 4px 12px rgba(114, 137, 218, 0.3);
+}
+
+/* Cards */
+.card {
+  background-color: var(--card-bg);
+  border-radius: 12px;
+  padding: clamp(1rem, 3vw, 1.5rem);
+  border: 1px solid var(--border-color);
+  margin-bottom: 1rem;
+  transition: all 0.3s;
+}
+
+.card:hover {
+  border-color: var(--primary-color);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
+}
+
+/* Expander */
+.streamlit-expanderHeader {
+  background-color: var(--card-bg) !important;
+  color: var(--text-color) !important;
+  border: 1px solid var(--border-color) !important;
+  border-radius: 8px !important;
+  padding: 1rem !important;
+  font-size: clamp(14px, 2vw, 16px);
+}
+
+.streamlit-expanderContent {
+  border: none !important;
+  padding: 1rem 0 0 0 !important;
+}
+
+/* Status messages */
+.stSuccess,
+.stInfo,
+.stWarning,
+.stError {
+  background-color: var(--card-bg) !important;
+  color: var(--text-color) !important;
+  border: 1px solid var(--border-color) !important;
+  border-radius: 8px !important;
+  padding: 1rem !important;
+  font-size: clamp(14px, 2vw, 16px);
+}
+
+/* Hide Streamlit branding */
+#MainMenu {
+  visibility: hidden;
+}
+footer {
+  visibility: hidden;
+}
+
+/* Column spacing */
+[data-testid="column"] {
+  padding: 0.5rem !important;
+}
+
+/* Checkbox and radio */
+.stCheckbox,
+.stRadio {
+  font-size: clamp(14px, 2vw, 16px);
+}
+
+/* Mobile optimizations */
+@media (max-width: 768px) {
+  .stButton button {
+    padding: 0.5rem 1rem !important;
+  }
+
+  [data-testid="column"] {
+    padding: 0.25rem !important;
+  }
+
+  .card {
+    padding: 1rem;
+  }
+}
+
+/* Add these styles for sections */
+.stTextInput,
+.stSelectbox,
+.stButton {
+  background-color: var(--card-bg);
+  border-radius: 8px;
+  padding: 1rem;
+  margin-bottom: 1rem;
+}
+
+.streamlit-expanderHeader {
+  background-color: var(--card-bg) !important;
+  border-radius: 8px !important;
+  margin-bottom: 1rem;
+}
+
+.streamlit-expanderContent {
+  background-color: var(--card-bg);
+  border-radius: 8px;
+  padding: 1rem !important;
+  margin-top: 0.5rem;
+}
+
+/* Add spacing between sections */
+.stMarkdown {
+  margin-bottom: 1.5rem;
+}

src/main.py

@@ -13,174 +13,113 @@ from pathlib import Path
 # Load environment variables
 load_dotenv()
 
-# Set page config for favicon
+# Set page config first, before any other st commands
 st.set_page_config(
-    page_title="YouTube Summarizer by TCSenpai",
+    page_title="YouTube Video Companion by TCSenpai",
     page_icon="src/assets/subtitles.png",
-    layout="wide",  # This ensures full width
+    layout="wide",
 )
 
-# Add custom CSS with a modern, clean design
-st.markdown(
-    """
-    <style>
-        /* Base theme */
-        :root {
-            --primary-color: #7289da;
-            --bg-color: #1a1b1e;
-            --card-bg: #2c2d30;
-            --text-color: #e0e0e0;
-            --border-color: #404246;
-            --hover-color: #3a3b3e;
-        }
 
-        /* Main container */
+def load_css():
-        .stApp {
+    css_file = Path(__file__).parent / "assets" / "style.css"
-            background-color: var(--bg-color);
+    with open(css_file) as f:
-            color: var(--text-color);
+        st.markdown(f"<style>{f.read()}</style>", unsafe_allow_html=True)
-        }
 
-        /* Fix container width */
-        .stApp > header {
-            background-color: var(--bg-color);
-        }
 
-        .stApp > div:nth-child(2) {
+def get_ollama_models(ollama_url):
-            padding-left: 5rem !important;
+    ollama_client = OllamaClient(ollama_url, "")
-            padding-right: 5rem !important;
+    models = ollama_client.get_models()
-        }
+    return models
 
-        /* Headers */
-        h1, h2, h3, h4, h5, h6 {
-            color: white !important;
-            font-weight: 600 !important;
-            margin-bottom: 1rem !important;
-        }
 
-        /* Input fields */
+def main():
-        .stTextInput input, .stSelectbox select {
+    # Load CSS
-            background-color: var(--bg-color) !important;
+    load_css()
-            color: var(--text-color) !important;
-            border: 1px solid var(--border-color) !important;
-            border-radius: 8px;
-            padding: 12px 16px;
-            font-size: 16px;
-            transition: all 0.3s;
-            width: 100% !important;
-        }
 
-        /* Buttons */
+    st.write("#### YouTube Video Companion")
-        .stButton button {
-            background: linear-gradient(45deg, var(--primary-color), #8ea1e1) !important;
-            color: white !important;
-            border: none !important;
-            border-radius: 8px !important;
-            padding: 12px 24px !important;
-            font-weight: 600 !important;
-            width: 100% !important;
-            transition: all 0.3s !important;
-        }
 
-        .stButton button:hover {
+    # Ollama Settings section
-            transform: translateY(-2px);
+    #st.subheader("🎯 Ollama Settings")
-            box-shadow: 0 4px 12px rgba(114,137,218,0.3);
-        }
 
-        /* Settings cards */
+    default_ollama_url = os.getenv("OLLAMA_URL")
-        .settings-card {
+    ollama_url = st.text_input(
-            background-color: var(--card-bg);
+        "Ollama URL",
-            border-radius: 12px;
+        value=default_ollama_url,
-            padding: 1.5rem;
+        placeholder="Enter Ollama URL",
-            border: 1px solid var(--border-color);
+    )
-            margin-bottom: 1rem;
+    if not ollama_url:
-        }
+        ollama_url = default_ollama_url
 
-        /* Remove default container styling */
+    available_models = get_ollama_models(ollama_url)
-        .element-container {
+    default_model = os.getenv("OLLAMA_MODEL")
-            margin: 0 !important;
+    if default_model not in available_models:
-            padding: 0 !important;
+        available_models.append(default_model)
-        }
 
-        /* Clean up expander */
+    selected_model = st.selectbox(
-        .streamlit-expanderHeader {
+        "Model",
-            background-color: var(--card-bg) !important;
+        options=available_models,
-            color: var(--text-color) !important;
+        index=(
-            border: 1px solid var(--border-color) !important;
+            available_models.index(default_model)
-            border-radius: 8px !important;
+            if default_model in available_models
-            padding: 1rem !important;
+            else 0
-        }
+        ),
+    )
 
-        .streamlit-expanderContent {
+    # Video URL and buttons section
-            border: none !important;
+    video_url = st.text_input(
-            padding: 1rem 0 0 0 !important;
+        "🎥 Video URL",
-        }
+        placeholder="https://www.youtube.com/watch?v=...",
+    )
 
-        /* Status messages */
+    col1, col2 = st.columns(2)
-        .stSuccess, .stInfo, .stWarning, .stError {
+    with col1:
-            background-color: var(--card-bg) !important;
+        summarize_button = st.button("🚀 Summarize", use_container_width=True)
-            color: var(--text-color) !important;
+    with col2:
-            border: 1px solid var(--border-color) !important;
+        read_button = st.button("📖 Read", use_container_width=True)
-            border-radius: 8px !important;
-            padding: 1rem !important;
-        }
 
-        /* Hide Streamlit branding */
+    # Advanced settings section
-        #MainMenu {visibility: hidden;}
+    with st.expander("⚙️ Advanced Settings", expanded=False):
-        footer {visibility: hidden;}
+        col1, col2 = st.columns(2)
+        with col1:
+            fallback_to_whisper = st.checkbox(
+                "Fallback to Whisper",
+                value=True,
+                help="If no transcript is available, try to generate one using Whisper",
+            )
+            force_whisper = st.checkbox(
+                "Force Whisper",
+                value=False,
+                help="Always use Whisper for transcription",
+            )
+        with col2:
+            use_po_token = st.checkbox(
+                "Use PO Token",
+                value=get_po_token_setting(),
+                help="Use PO token for YouTube authentication (helps bypass restrictions)",
+            )
 
-        /* Improve spacing */
+    # Initialize session state for messages if not exists
-        [data-testid="column"] {
+    if "messages" not in st.session_state:
-            padding: 0 !important;
-            margin: 0 1rem !important;
-        }
-
-        /* Video URL input container */
-        .video-input-container {
-            background-color: var(--card-bg);
-            border-radius: 12px;
-            padding: 1.5rem;
-            border: 1px solid var(--border-color);
-            margin: 2rem 0;
-        }
-
-        /* Summary results container */
-        .results-container {
-            background-color: var(--card-bg);
-            border-radius: 12px;
-            padding: 1.5rem;
-            border: 1px solid var(--border-color);
-            margin-top: 2rem;
-        }
-    </style>
-    """,
-    unsafe_allow_html=True,
-)
-
-# Initialize session state for messages if not exists
-if "messages" not in st.session_state:
         st.session_state.messages = []
 
-# Initialize session state for rephrased transcript if not exists
+    # Initialize session state for rephrased transcript if not exists
-if "rephrased_transcript" not in st.session_state:
+    if "rephrased_transcript" not in st.session_state:
         st.session_state.rephrased_transcript = None
 
-# Create a single header container
+    # Create a single header container
-header = st.container()
+    header = st.container()
 
-
+    def show_warning(message):
-def show_warning(message):
         update_header("⚠️ " + message)
 
-
+    def show_error(message):
-def show_error(message):
         update_header("🚫 " + message)
 
-
+    def show_info(message):
-def show_info(message):
         update_header("> " + message)
 
-
+    def update_header(message):
-def update_header(message):
         with header:
             st.markdown(
                 f"""
@@ -211,15 +150,13 @@ def update_header(message):
                 unsafe_allow_html=True,
             )
 
+    # Initialize the header with a ready message
+    update_header("✅ Ready to summarize!")
 
-# Initialize the header with a ready message
+    # Add spacing after the fixed header
-update_header("✅ Ready to summarize!")
+    # st.markdown("<div style='margin-top: 120px;'></div>", unsafe_allow_html=True)
 
-# Add spacing after the fixed header
+    def get_transcript(video_id):
-# st.markdown("<div style='margin-top: 120px;'></div>", unsafe_allow_html=True)
-
-
-def get_transcript(video_id):
         cache_dir = "transcript_cache"
         cache_file = os.path.join(cache_dir, f"{video_id}.json")
 
@@ -244,21 +181,14 @@ def get_transcript(video_id):
             print(f"Error fetching transcript: {e}")
             return None
 
-
+    def summarize_video(
-def get_ollama_models(ollama_url):
-    ollama_client = OllamaClient(ollama_url, "")
-    models = ollama_client.get_models()
-    return models
-
-
-def summarize_video(
         video_url,
         model,
         ollama_url,
         fallback_to_whisper=True,
         force_whisper=False,
         use_po_token=None,
-):
+    ):
         video_id = None
         # Get the video id from the url if it's a valid youtube or invidious or any other url that contains a video id
         if "v=" in video_url:
@@ -284,7 +214,9 @@ def summarize_video(
             print("No transcript found, trying to download audio...")
             if not fallback_to_whisper:
                 print("Fallback to whisper is disabled")
-            return "Unable to fetch transcript (and fallback to whisper is disabled)"
+                return (
+                    "Unable to fetch transcript (and fallback to whisper is disabled)"
+                )
             if not force_whisper:
                 show_warning("Unable to fetch transcript. Trying to download audio...")
             try:
@@ -323,15 +255,14 @@ def summarize_video(
             "summary": summary,
         }
 
-
+    def fix_transcript(
-def fix_transcript(
         video_url,
         model,
         ollama_url,
         fallback_to_whisper=True,
         force_whisper=False,
         use_po_token=None,
-):
+    ):
         video_id = None
         # Get the video id from the url if it's a valid youtube or invidious or any other url that contains a video id
         if "v=" in video_url:
@@ -357,7 +288,9 @@ def fix_transcript(
             print("No transcript found, trying to download audio...")
             if not fallback_to_whisper:
                 print("Fallback to whisper is disabled")
-            return "Unable to fetch transcript (and fallback to whisper is disabled)"
+                return (
+                    "Unable to fetch transcript (and fallback to whisper is disabled)"
+                )
             if not force_whisper:
                 show_warning("Unable to fetch transcript. Trying to download audio...")
             try:
@@ -397,78 +330,6 @@ def fix_transcript(
             "enhanced": enhanced,
         }
 
-
-def main():
-    # Settings section
-    st.write("## AI Video Summarizer")
-
-    # Ollama Settings - single card
-    with st.container():
-        st.subheader("🎯 Ollama Settings")
-        default_ollama_url = os.getenv("OLLAMA_URL")
-        ollama_url = st.text_input(
-            "Ollama URL",
-            value=default_ollama_url,
-            placeholder="Enter Ollama URL",
-        )
-        if not ollama_url:
-            ollama_url = default_ollama_url
-
-        available_models = get_ollama_models(ollama_url)
-        default_model = os.getenv("OLLAMA_MODEL")
-        if default_model not in available_models:
-            available_models.append(default_model)
-
-        selected_model = st.selectbox(
-            "Model",
-            options=available_models,
-            index=(
-                available_models.index(default_model)
-                if default_model in available_models
-                else 0
-            ),
-        )
-
-    # Video URL input section
-    with st.container():
-        # URL in its own row
-        video_url = st.text_input(
-            "🎥 Video URL",
-            placeholder="https://www.youtube.com/watch?v=...",
-        )
-
-        # Buttons in a separate row
-        col1, col2 = st.columns(2)
-
-        with col1:
-            summarize_button = st.button("🚀 Summarize", use_container_width=True)
-
-        with col2:
-            read_button = st.button("📖 Read", use_container_width=True)
-
-    # Advanced settings in collapsible sections
-    with st.expander("⚙️ Advanced Settings", expanded=False):
-        col1, col2 = st.columns(2)
-
-        with col1:
-            fallback_to_whisper = st.checkbox(
-                "Fallback to Whisper",
-                value=True,
-                help="If no transcript is available, try to generate one using Whisper",
-            )
-            force_whisper = st.checkbox(
-                "Force Whisper",
-                value=False,
-                help="Always use Whisper for transcription",
-            )
-
-        with col2:
-            use_po_token = st.checkbox(
-                "Use PO Token",
-                value=get_po_token_setting(),  # Default from environment
-                help="Use PO token for YouTube authentication (helps bypass restrictions)",
-            )
-
     if (summarize_button or read_button) and video_url:
         if read_button:
             # Enhance transcript (now called read)