scrolling right and static left

app.py

@@ -8,23 +8,26 @@ import os
 # Set Streamlit layout to wide mode
 st.set_page_config(layout="wide")
 
-# Inject custom CSS for independent scrolling and styling
+# Inject custom CSS to fix the left column and make the right column scrollable
 st.markdown(
     """
     <style>
-    .scrollable-left {
-       height: 600px; /* Adjust as needed */
-       overflow-y: auto;
-       padding: 1rem;
-       border: 1px solid #ddd;
-       background-color: #f9f9f9;
+    /* Fixed left container */
+    .fixed-left {
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 45%;
+        height: 100vh;
+        overflow-y: auto;
+        padding: 1rem;
+        background-color: #f9f9f9;
+        border-right: 1px solid #ccc;
     }
+    /* Scrollable right container with left margin to avoid overlap */
     .scrollable-right {
-       height: 600px; /* Adjust as needed */
-       overflow-y: auto;
-       padding: 1rem;
-       border: 1px solid #ddd;
-       background-color: #f1f1f1;
+        margin-left: 47%; /* slightly more than 45% to add some gap */
+        padding: 1rem;
     }
     </style>
     """,
@@ -67,150 +70,148 @@ if not OPENAI_API_KEY:
 
 client = OpenAI(api_key=OPENAI_API_KEY)
 
-# Layout: Two columns - left for transcript, right for clip plans and extraction
-col_transcript, col_output = st.columns([1, 1])
-
-# Left Column: Transcript Input
-with col_transcript:
-    st.markdown('<div class="scrollable-left">', unsafe_allow_html=True)
-    st.subheader("📝 Paste Your Transcript")
-    transcript = st.text_area("Enter the transcript here:", height=400)
-
-    st.markdown("---")
-    st.subheader("🎥 Video/Audio Upload & Playback")
-
-    # Allow users to choose between file upload or external link
-    media_source = st.radio("Select media source", options=["Upload File", "YouTube/External Link"], index=0)
-
-    if media_source == "Upload File":
-        media_file = st.file_uploader("Upload a video or audio file", type=["mp4", "mov", "avi", "mp3", "wav", "ogg"])
-        if media_file is not None:
-            # Detect media type and play accordingly
-            if media_file.type.startswith("video"):
-                st.video(media_file)
-            elif media_file.type.startswith("audio"):
-                st.audio(media_file)
+###############################################
+# LEFT SIDE: Fixed Container for Transcript & Media
+###############################################
+st.markdown('<div class="fixed-left">', unsafe_allow_html=True)
+
+st.subheader("📝 Paste Your Transcript")
+transcript = st.text_area("Enter the transcript here:", height=300)
+
+st.markdown("---")
+st.subheader("🎥 Video/Audio Upload & Playback")
+media_source = st.radio("Select media source", options=["Upload File", "YouTube/External Link"], key="media_radio")
+if media_source == "Upload File":
+    media_file = st.file_uploader("Upload a video or audio file", type=["mp4", "mov", "avi", "mp3", "wav", "ogg"], key="media_file")
+    if media_file is not None:
+        if media_file.type.startswith("video"):
+            st.video(media_file)
+        elif media_file.type.startswith("audio"):
+            st.audio(media_file)
+else:
+    media_link = st.text_input("Enter YouTube or external media link:", key="media_link")
+    if media_link:
+        st.video(media_link)
+
+st.markdown("</div>", unsafe_allow_html=True)
+
+###############################################
+# RIGHT SIDE: Scrollable Container for Clip Plans & Extractions
+###############################################
+st.markdown('<div class="scrollable-right">', unsafe_allow_html=True)
+st.subheader("📋 Generated Clip Plans")
+
+# Button to generate clip plans from the transcript
+if st.button("Generate Plan"):
+    if not transcript.strip():
+        st.error("❌ Please enter a transcript.")
     else:
-        media_link = st.text_input("Enter YouTube or external media link:")
-        if media_link:
-            st.video(media_link)
-    st.markdown('</div>', unsafe_allow_html=True)
-
-# Right Column: Clip Plan Generation and Extraction
-with col_output:
-    st.markdown('<div class="scrollable-right">', unsafe_allow_html=True)
-    st.subheader("📋 Generated Clip Plans")
-
-    # Button to generate clip plans from the transcript
-    if st.button("Generate Plan"):
-        if not transcript.strip():
-            st.error("❌ Please enter a transcript.")
-        else:
-            with st.spinner("⏳ Generating content plan... Please wait."):
-                try:
-                    # Prepare prompts for clip plan generation
-                    system_prompt = SYSTEM_MESSAGE.format(prompt_goal=GOAL)
-                    user_prompt = USER_MESSAGE.format(source_content=transcript)
-                    messages = [
-                        {"role": "system", "content": system_prompt},
-                        {"role": "user", "content": user_prompt},
-                    ]
-
-                    openai_args = {
-                        "model": clip_plan_model,
-                        "messages": messages,
-                        "response_format": {"type": "json_object"},
-                    }
-                    if clip_plan_model == "o3-mini":
-                        openai_args["reasoning_effort"] = "low"
-                    else:
-                        openai_args["max_tokens"] = 5000
-                        openai_args["temperature"] = 0.45
-
-                    response = client.chat.completions.create(**openai_args)
-                    generated_response = response.choices[0].message.content.strip()
-                    content_plan = json.loads(generated_response)
-
-                    # Assume the response JSON has a single key containing a list of clip plans
-                    plan_key = list(content_plan.keys())[0]
-                    clip_plans = content_plan.get(plan_key, [])
-
-                    # Save clip plans in session state so they persist
-                    st.session_state.clip_plans = clip_plans
-
-                    # Clear any previous extraction outputs
-                    for i in range(len(clip_plans)):
-                        st.session_state.pop(f"extracted_clip_{i}", None)
-                except json.JSONDecodeError:
-                    st.error("⚠️ Failed to parse OpenAI response. Try again.")
-                except Exception as e:
-                    st.error(f"❌ Error: {str(e)}")
-
-    # Display clip plans if they exist in session state
-    if "clip_plans" in st.session_state:
-        # We'll work with a reference to the clip plans list
-        updated_clip_plans = st.session_state.clip_plans
-
-        for i, clip in enumerate(updated_clip_plans):
-            # Each clip is rendered in an expander with editable fields
-            with st.expander(f"🎬 Clip {i + 1}", expanded=True):
-                new_title = st.text_input("Title", value=clip.get("Title", "N/A"), key=f"title_{i}")
-                new_focus = st.text_area("Focus Prompt", value=clip.get("Focus Prompt", "N/A"), key=f"focus_{i}")
-                new_duration = st.number_input(
-                    "Duration Target (seconds)",
-                    value=float(clip.get("Duration Target", 0)),
-                    key=f"duration_{i}",
-                    step=1.0
-                )
-
-                # Update the clip plan with the edited values
-                updated_clip_plans[i]["Title"] = new_title
-                updated_clip_plans[i]["Focus Prompt"] = new_focus
-                updated_clip_plans[i]["Duration Target"] = new_duration
-
-                # Button to delete this clip plan
-                if st.button("Delete Clip", key=f"delete_{i}"):
-                    updated_clip_plans.pop(i)
-                    st.session_state.clip_plans = updated_clip_plans
-                    st.experimental_rerun()
-
-                # Button for transcript extraction for this clip
-                if st.button("Extract Transcript", key=f"extract_{i}"):
-                    with st.spinner("⏳ Extracting transcript section... Please wait."):
-                        try:
-                            # Send only the specific (and possibly edited) clip plan to the extractor
-                            single_clip_json = json.dumps(updated_clip_plans[i])
-                            clipper_user_prompt = CLIPPER_USER_MESSAGE.format(
-                                source_content=transcript,
-                                clip_plan=single_clip_json
-                            )
-                            clipper_messages = [
-                                {"role": "system", "content": CLIPPER_SYSTEM_MESSAGE},
-                                {"role": "user", "content": clipper_user_prompt},
-                            ]
-
-                            extraction_args = {
-                                "model": extraction_model,
-                                "messages": clipper_messages,
-                                "response_format": {"type": "json_object"},
-                            }
-                            if extraction_model == "o3-mini":
-                                extraction_args["reasoning_effort"] = "low"
-                            else:
-                                extraction_args["max_tokens"] = 10000
-                                extraction_args["temperature"] = 0.45
-
-                            clipper_response = client.chat.completions.create(**extraction_args)
-                            extraction_response = clipper_response.choices[0].message.content.strip()
-                            extracted_clip = json.loads(extraction_response)
-
-                            # Save the extraction result for this clip in session state
-                            st.session_state[f"extracted_clip_{i}"] = extracted_clip
-                        except Exception as e:
-                            st.error(f"❌ Extraction error: {str(e)}")
-
-                # Display extraction output if available
-                if f"extracted_clip_{i}" in st.session_state:
-                    st.markdown("#### 📝 Extracted Transcript Section:")
-                    st.write(st.session_state[f"extracted_clip_{i}"])
-        st.markdown('</div>', unsafe_allow_html=True)
+        with st.spinner("⏳ Generating content plan... Please wait."):
+            try:
+                # Prepare prompts for clip plan generation
+                system_prompt = SYSTEM_MESSAGE.format(prompt_goal=GOAL)
+                user_prompt = USER_MESSAGE.format(source_content=transcript)
+                messages = [
+                    {"role": "system", "content": system_prompt},
+                    {"role": "user", "content": user_prompt},
+                ]
+
+                openai_args = {
+                    "model": clip_plan_model,
+                    "messages": messages,
+                    "response_format": {"type": "json_object"},
+                }
+                if clip_plan_model == "o3-mini":
+                    openai_args["reasoning_effort"] = "low"
+                else:
+                    openai_args["max_tokens"] = 5000
+                    openai_args["temperature"] = 0.45
+
+                response = client.chat.completions.create(**openai_args)
+                generated_response = response.choices[0].message.content.strip()
+                content_plan = json.loads(generated_response)
+
+                # Assume the response JSON has a single key containing a list of clip plans
+                plan_key = list(content_plan.keys())[0]
+                clip_plans = content_plan.get(plan_key, [])
+
+                # Save clip plans in session state so they persist
+                st.session_state.clip_plans = clip_plans
+
+                # Clear any previous extraction outputs
+                for i in range(len(clip_plans)):
+                    st.session_state.pop(f"extracted_clip_{i}", None)
+            except json.JSONDecodeError:
+                st.error("⚠️ Failed to parse OpenAI response. Try again.")
+            except Exception as e:
+                st.error(f"❌ Error: {str(e)}")
+
+# Display clip plans if they exist in session state
+if "clip_plans" in st.session_state:
+    # We'll work with a reference to the clip plans list
+    updated_clip_plans = st.session_state.clip_plans
+
+    for i, clip in enumerate(updated_clip_plans):
+        # Each clip is rendered in an expander with editable fields
+        with st.expander(f"🎬 Clip {i + 1}", expanded=True):
+            new_title = st.text_input("Title", value=clip.get("Title", "N/A"), key=f"title_{i}")
+            new_focus = st.text_area("Focus Prompt", value=clip.get("Focus Prompt", "N/A"), key=f"focus_{i}")
+            new_duration = st.number_input(
+                "Duration Target (seconds)",
+                value=float(clip.get("Duration Target", 0)),
+                key=f"duration_{i}",
+                step=1.0
+            )
+
+            # Update the clip plan with the edited values
+            updated_clip_plans[i]["Title"] = new_title
+            updated_clip_plans[i]["Focus Prompt"] = new_focus
+            updated_clip_plans[i]["Duration Target"] = new_duration
+
+            # Button to delete this clip plan
+            if st.button("Delete Clip", key=f"delete_{i}"):
+                updated_clip_plans.pop(i)
+                st.session_state.clip_plans = updated_clip_plans
+                st.experimental_rerun()
+
+            # Button for transcript extraction for this clip
+            if st.button("Extract Transcript", key=f"extract_{i}"):
+                with st.spinner("⏳ Extracting transcript section... Please wait."):
+                    try:
+                        # Send only the specific (and possibly edited) clip plan to the extractor
+                        single_clip_json = json.dumps(updated_clip_plans[i])
+                        clipper_user_prompt = CLIPPER_USER_MESSAGE.format(
+                            source_content=transcript,
+                            clip_plan=single_clip_json
+                        )
+                        clipper_messages = [
+                            {"role": "system", "content": CLIPPER_SYSTEM_MESSAGE},
+                            {"role": "user", "content": clipper_user_prompt},
+                        ]
+
+                        extraction_args = {
+                            "model": extraction_model,
+                            "messages": clipper_messages,
+                            "response_format": {"type": "json_object"},
+                        }
+                        if extraction_model == "o3-mini":
+                            extraction_args["reasoning_effort"] = "low"
+                        else:
+                            extraction_args["max_tokens"] = 10000
+                            extraction_args["temperature"] = 0.45
+
+                        clipper_response = client.chat.completions.create(**extraction_args)
+                        extraction_response = clipper_response.choices[0].message.content.strip()
+                        extracted_clip = json.loads(extraction_response)
+
+                        # Save the extraction result for this clip in session state
+                        st.session_state[f"extracted_clip_{i}"] = extracted_clip
+                    except Exception as e:
+                        st.error(f"❌ Extraction error: {str(e)}")
+
+            # Display extraction output if available
+            if f"extracted_clip_{i}" in st.session_state:
+                st.markdown("#### 📝 Extracted Transcript Section:")
+                st.write(st.session_state[f"extracted_clip_{i}"])
+
+st.markdown('</div>', unsafe_allow_html=True)