Create updated_components.py

updated_components.py

@@ -0,0 +1,396 @@
+import streamlit as st
+from visual_elements import (
+    search_stock_images, 
+    download_image, 
+    analyze_slide_for_visuals,
+    generate_html_preview_with_visuals,
+    STANDARD_SHAPES,
+    ICON_CATEGORIES
+)
+import os
+import requests
+from PIL import Image
+from io import BytesIO
+import base64
+
+def render_enhanced_slide_editor(slide_index, slide, template_name="professional"):
+    """Render the enhanced editor for a single slide with visual elements"""
+    from utils import TEMPLATES, create_slide_preview
+    
+    # Get template info
+    template = TEMPLATES.get(template_name, TEMPLATES["professional"])
+    colors = template["colors"]
+    
+    # Split into preview and editor columns
+    col1, col2 = st.columns([2, 3])
+    
+    with col1:
+        st.subheader("Preview")
+        # Generate and display HTML preview with visuals
+        try:
+            # Use enhanced preview with visuals
+            preview_html = generate_html_preview_with_visuals(slide, template_name)
+            st.components.v1.html(preview_html, height=400)
+        except Exception as e:
+            st.error(f"Error generating preview: {str(e)}")
+            # Fall back to standard preview
+            preview_html = create_slide_preview(slide, template_name)
+            st.components.v1.html(preview_html, height=350)
+        
+        # Visual elements analysis
+        analysis = analyze_slide_for_visuals(slide)
+        
+        # Quick styling options
+        with st.expander("🎨 Layout & Style"):
+            # Smart layout suggestion
+            suggested_layout = analysis['suggested_layout']
+            layout_options = ["Standard", "Two Column", "Title Only", "Quote", "Picture with Caption"]
+            
+            st.write(f"💡 **Suggested layout:** {suggested_layout}")
+            
+            selected_layout = st.selectbox(
+                "Layout", 
+                options=layout_options,
+                index=layout_options.index(suggested_layout) if suggested_layout in layout_options else 0,
+                key=f"layout_{slide_index}"
+            )
+            
+            # Color scheme options
+            st.write("🎭 **Color Accent**")
+            color_options = {
+                "Default": colors["accent"],
+                "Blue": "#0066CC", 
+                "Green": "#00AA55", 
+                "Red": "#CC3300",
+                "Purple": "#9933CC", 
+                "Orange": "#FF6600"
+            }
+            selected_color = st.color_picker(
+                "Accent Color", 
+                value=colors["accent"],
+                key=f"color_{slide_index}"
+            )
+            
+            # Apply button
+            if st.button("Apply Style", key=f"apply_style_{slide_index}"):
+                if "design" not in slide:
+                    slide["design"] = {}
+                slide["design"]["layout"] = selected_layout
+                slide["design"]["accent_color"] = selected_color
+                st.success("Style applied!")
+        
+        # Visual elements section
+        with st.expander("🖼️ Visual Elements"):
+            # Chart options if analysis suggests a chart
+            if analysis['need_chart']:
+                st.write("📊 **Chart Recommendation**")
+                st.write(f"The content suggests a {analysis['chart_type']} chart would be appropriate.")
+                
+                chart_types = ["column", "bar", "line", "pie", "area", "scatter"]
+                selected_chart = st.selectbox(
+                    "Chart Type", 
+                    options=chart_types,
+                    index=chart_types.index(analysis['chart_type']) if analysis['chart_type'] in chart_types else 0,
+                    key=f"chart_{slide_index}"
+                )
+                
+                if st.button("Add Chart", key=f"add_chart_{slide_index}"):
+                    if "visuals" not in slide:
+                        slide["visuals"] = {}
+                    slide["visuals"]["chart"] = {
+                        "type": selected_chart,
+                        "data": "sample" # Will be replaced with actual data
+                    }
+                    st.success(f"Added {selected_chart} chart!")
+            
+            # Image options
+            st.write("🏞️ **Images**")
+            image_source = st.radio(
+                "Image Source",
+                ["Stock Images", "Upload Image"],
+                key=f"img_source_{slide_index}"
+            )
+            
+            if image_source == "Stock Images":
+                search_query = st.text_input(
+                    "Search for images", 
+                    value=analysis['image_query'],
+                    key=f"img_search_{slide_index}"
+                )
+                
+                if st.button("Search", key=f"search_btn_{slide_index}"):
+                    with st.spinner("Searching for images..."):
+                        images = search_stock_images(search_query)
+                        
+                        if not images:
+                            st.warning("No images found. Try a different search term.")
+                        else:
+                            # Store images in session state for this slide
+                            if "stock_images" not in st.session_state:
+                                st.session_state.stock_images = {}
+                            st.session_state.stock_images[slide_index] = images
+                            
+                            st.success(f"Found {len(images)} images!")
+                
+                # Display stored images if available
+                if "stock_images" in st.session_state and slide_index in st.session_state.stock_images:
+                    images = st.session_state.stock_images[slide_index]
+                    
+                    # Create a grid of images using columns
+                    columns = st.columns(3)
+                    
+                    for i, img in enumerate(images[:6]):  # Limit to 6 images
+                        with columns[i % 3]:
+                            # Display thumbnail
+                            st.image(img["thumbnail"], use_column_width=True)
+                            
+                            if st.button("Select", key=f"select_img_{slide_index}_{i}"):
+                                # Add image to slide
+                                if "visuals" not in slide:
+                                    slide["visuals"] = {}
+                                slide["visuals"]["image"] = {
+                                    "url": img["url"],
+                                    "source": "stock"
+                                }
+                                st.success("Image selected!")
+            else:
+                # Upload image
+                uploaded_file = st.file_uploader(
+                    "Upload an image", 
+                    type=["jpg", "jpeg", "png", "gif"],
+                    key=f"upload_{slide_index}"
+                )
+                
+                if uploaded_file:
+                    image = Image.open(uploaded_file)
+                    st.image(image, width=250)
+                    
+                    if st.button("Use This Image", key=f"use_upload_{slide_index}"):
+                        # Store image in session state
+                        if "uploaded_images" not in st.session_state:
+                            st.session_state.uploaded_images = {}
+                        
+                        # Convert image to base64 for storage
+                        buffered = BytesIO()
+                        image.save(buffered, format="PNG")
+                        img_str = base64.b64encode(buffered.getvalue()).decode()
+                        
+                        st.session_state.uploaded_images[slide_index] = img_str
+                        
+                        # Add to slide
+                        if "visuals" not in slide:
+                            slide["visuals"] = {}
+                        slide["visuals"]["image"] = {
+                            "data": img_str,
+                            "source": "upload"
+                        }
+                        st.success("Image added to slide!")
+            
+            # Icon options
+            st.write("🔍 **Icons & Shapes**")
+            
+            # Create tabs for different icon categories
+            icon_tabs = st.tabs(list(ICON_CATEGORIES.keys()))
+            
+            for i, (category, icons) in enumerate(ICON_CATEGORIES.items()):
+                with icon_tabs[i]:
+                    # Display icons in a grid
+                    cols = st.columns(4)
+                    for j, icon in enumerate(icons):
+                        with cols[j % 4]:
+                            if st.button(icon, key=f"icon_{slide_index}_{category}_{j}"):
+                                # Add icon to slide
+                                if "visuals" not in slide:
+                                    slide["visuals"] = {}
+                                if "icons" not in slide["visuals"]:
+                                    slide["visuals"]["icons"] = []
+                                
+                                slide["visuals"]["icons"].append(icon)
+                                st.success(f"Added {icon} icon!")
+        
+        # AI image generation
+        with st.expander("🤖 AI Image Generation"):
+            st.write("Generate a custom image using AI based on your slide content")
+            
+            # Image prompt
+            prompt_base = f"Creating an image for slide '{slide.get('title', '')}'"
+            image_prompt = st.text_area(
+                "Image description", 
+                value=prompt_base,
+                key=f"img_prompt_{slide_index}",
+                height=100
+            )
+            
+            image_style = st.selectbox(
+                "Style", 
+                ["Realistic", "Digital Art", "Watercolor", "Minimalist", "Corporate"],
+                key=f"img_style_{slide_index}"
+            )
+            
+            if st.button("Generate Image", key=f"gen_img_{slide_index}"):
+                # In a real implementation, this would call an AI image generation API
+                st.info("AI Image generation would be implemented here with your preferred provider (DALL-E, Midjourney, etc.)")
+                st.info("For now, we'll use a placeholder to demonstrate the functionality")
+                
+                if "visuals" not in slide:
+                    slide["visuals"] = {}
+                slide["visuals"]["ai_image"] = {
+                    "prompt": image_prompt,
+                    "style": image_style
+                }
+                st.success("AI image generation request saved!")
+    
+    with col2:
+        st.subheader("Content Editor")
+        
+        # Title editing with AI assistance
+        st.write("##### 📝 Slide Title")
+        col1, col2 = st.columns([3, 1])
+        with col1:
+            slide_title = st.text_input(f"Title ###{slide_index}", value=slide.get('title', ''))
+        with col2:
+            if st.button("🪄 Improve", key=f"improve_title_{slide_index}"):
+                try:
+                    with st.spinner("🐊 SlideGator.AI is enhancing your title..."):
+                        from agents import enhance_slide_component
+                        updated_slide, result = enhance_slide_component(slide, "title", "Make it concise and impactful")
+                        if "error" not in result:
+                            st.session_state.slides_content[slide_index] = updated_slide
+                            st.success("Title improved!")
+                            st.rerun()
+                        else:
+                            st.error(f"Error: {result.get('error')}")
+                except Exception as e:
+                    st.error(f"Error improving title: {str(e)}")
+        
+        # Content editing
+        st.write("##### 📄 Content")
+        if isinstance(slide.get('content', []), list):
+            content_text = "\n".join(slide.get('content', []))
+        else:
+            content_text = slide.get('content', '')
+            
+        col1, col2 = st.columns([3, 1])
+        with col1:
+            content = st.text_area(f"Content ###{slide_index}", value=content_text, height=150)
+        with col2:
+            st.write("")
+            st.write("")
+            if st.button("🪄 Improve", key=f"improve_content_{slide_index}"):
+                try:
+                    with st.spinner("🐊 SlideGator.AI is enhancing your content..."):
+                        from agents import enhance_slide_component
+                        slide["content"] = content.split("\n") if "\n" in content else [content]
+                        updated_slide, result = enhance_slide_component(slide, "content", "Make it clear and concise")
+                        if "error" not in result:
+                            st.session_state.slides_content[slide_index] = updated_slide
+                            st.success("Content improved!")
+                            st.rerun()
+                        else:
+                            st.error(f"Error: {result.get('error')}")
+                except Exception as e:
+                    st.error(f"Error improving content: {str(e)}")
+        
+        # Visual elements with AI assistance
+        st.write("##### 🖼️ Visual Suggestions")
+        if isinstance(slide.get('visual_elements', []), list):
+            visuals_text = "\n".join(slide.get('visual_elements', []))
+        else:
+            visuals_text = slide.get('visual_elements', '')
+            
+        col1, col2 = st.columns([3, 1])
+        with col1:
+            visuals = st.text_area(f"Visual Elements ###{slide_index}", value=visuals_text, height=100)
+        with col2:
+            st.write("")
+            if st.button("🎨 Suggest", key=f"suggest_visuals_{slide_index}"):
+                try:
+                    with st.spinner("🐊 SlideGator.AI is suggesting visuals..."):
+                        from agents import enhance_slide_component
+                        slide["visual_elements"] = visuals.split("\n") if "\n" in visuals else [visuals]
+                        updated_slide, result = enhance_slide_component(slide, "visuals", "Be specific and creative")
+                        if "error" not in result:
+                            st.session_state.slides_content[slide_index] = updated_slide
+                            st.success("Visual suggestions added!")
+                            st.rerun()
+                        else:
+                            st.error(f"Error: {result.get('error')}")
+                except Exception as e:
+                    st.error(f"Error suggesting visuals: {str(e)}")
+        
+        # Presenter notes
+        st.write("##### 🎤 Presenter Notes")
+        notes = st.text_area(f"Notes ###{slide_index}", value=slide.get('notes', ''), height=100)
+        if st.button("🪄 Generate Notes", key=f"generate_notes_{slide_index}"):
+            try:
+                with st.spinner("🐊 SlideGator.AI is writing speaker notes..."):
+                    from agents import enhance_slide_component
+                    updated_slide, result = enhance_slide_component(slide, "notes")
+                    if "error" not in result:
+                        st.session_state.slides_content[slide_index] = updated_slide
+                        st.success("Speaker notes generated!")
+                        st.rerun()
+                    else:
+                        st.error(f"Error: {result.get('error')}")
+            except Exception as e:
+                st.error(f"Error generating notes: {str(e)}")
+        
+        # LLM model selection for this specific slide
+        st.write("##### 🧠 AI Enhancement Settings")
+        with st.expander("Advanced AI Settings"):
+            llm_options = {
+                "claude-3-sonnet": "Claude 3 Sonnet (Default)",
+                "claude-3-haiku": "Claude 3 Haiku (Faster)",
+                "claude-3-opus": "Claude 3 Opus (Highest Quality)",
+                "gpt-4": "GPT-4 (If OpenAI key provided)",
+                "gpt-3.5-turbo": "GPT-3.5 Turbo (Faster)",
+                "deepseek-chat": "DeepSeek Chat"
+            }
+            
+            selected_llm = st.selectbox(
+                "AI Model for this slide",
+                options=list(llm_options.keys()),
+                format_func=lambda x: llm_options[x],
+                key=f"llm_{slide_index}"
+            )
+            
+            if "ai_settings" not in slide:
+                slide["ai_settings"] = {}
+            
+            slide["ai_settings"]["model"] = selected_llm
+            
+            # Web search integration
+            st.write("##### 🔍 Web Search Integration")
+            enable_search = st.checkbox(
+                "Enable web search for up-to-date content",
+                value=slide.get("ai_settings", {}).get("web_search", False),
+                key=f"search_{slide_index}"
+            )
+            
+            if enable_search:
+                search_query = st.text_input(
+                    "Search query",
+                    value=slide.get("ai_settings", {}).get("search_query", f"latest {slide.get('title', '')}"),
+                    key=f"search_query_{slide_index}"
+                )
+                
+                slide["ai_settings"]["web_search"] = enable_search
+                slide["ai_settings"]["search_query"] = search_query
+                
+                if st.button("Fetch Latest Content", key=f"fetch_{slide_index}"):
+                    st.info("This would fetch the latest information from the web to update your slide.")
+                    # In a real implementation, this would call a search API
+    
+    # Update slide with edits
+    slide["title"] = slide_title
+    if "\n" in content:
+        slide["content"] = content.split("\n") 
+    else:
+        slide["content"] = [content] if content else []
+    if "\n" in visuals:
+        slide["visual_elements"] = visuals.split("\n")
+    else:
+        slide["visual_elements"] = [visuals] if visuals else []
+    slide["notes"] = notes
+    
+    return slide