Spaces:
Sleeping
Sleeping
| import streamlit as st | |
| import json | |
| import openai | |
| import os | |
| import time | |
| import base64 | |
| from io import BytesIO | |
| import zipfile | |
| # Set page configuration | |
| st.set_page_config(page_title="AI PowerPoint Maker", layout="wide") | |
| # Initialize session state variables if they don't exist | |
| if 'slides_html' not in st.session_state: | |
| st.session_state.slides_html = {} | |
| if 'current_slide' not in st.session_state: | |
| st.session_state.current_slide = None | |
| if 'presentation_plan' not in st.session_state: | |
| st.session_state.presentation_plan = None | |
| if 'slide_order' not in st.session_state: | |
| st.session_state.slide_order = [] | |
| if 'presentation_title' not in st.session_state: | |
| st.session_state.presentation_title = "" | |
| if 'openai_api_key' not in st.session_state: | |
| st.session_state.openai_api_key = "" | |
| if 'style_instructions' not in st.session_state: | |
| st.session_state.style_instructions = "" | |
| if 'content_instructions' not in st.session_state: | |
| st.session_state.content_instructions = "" | |
| if 'css_style' not in st.session_state: | |
| st.session_state.css_style = """ | |
| body { | |
| font-family: 'Arial', sans-serif; | |
| margin: 0; | |
| padding: 0; | |
| display: flex; | |
| justify-content: center; | |
| align-items: center; | |
| height: 100vh; | |
| background-color: #f5f5f5; | |
| } | |
| .slide { | |
| width: 900px; | |
| height: 500px; | |
| background-color: white; | |
| box-shadow: 0 4px 8px rgba(0,0,0,0.1); | |
| padding: 40px; | |
| box-sizing: border-box; | |
| position: relative; | |
| overflow: hidden; | |
| } | |
| h1 { | |
| font-size: 2.5em; | |
| color: #2c3e50; | |
| margin-bottom: 20px; | |
| } | |
| h2 { | |
| font-size: 1.8em; | |
| color: #3498db; | |
| margin-bottom: 15px; | |
| } | |
| p { | |
| font-size: 1.2em; | |
| line-height: 1.6; | |
| color: #34495e; | |
| } | |
| ul, ol { | |
| font-size: 1.2em; | |
| line-height: 1.6; | |
| color: #34495e; | |
| margin-left: 20px; | |
| } | |
| li { | |
| margin-bottom: 10px; | |
| } | |
| .slide-number { | |
| position: absolute; | |
| bottom: 10px; | |
| right: 10px; | |
| font-size: 12px; | |
| color: #95a5a6; | |
| } | |
| """ | |
| # Function to create presentation plan using LLM as "Planning Agent" | |
| def create_presentation_plan(topic, num_slides, key_points): | |
| try: | |
| if st.session_state.openai_api_key: | |
| # Use actual OpenAI API | |
| client = openai.OpenAI(api_key=st.session_state.openai_api_key) | |
| response = client.chat.completions.create( | |
| model="gpt-3.5-turbo", # You can change to gpt-4 if available | |
| messages=[ | |
| {"role": "system", "content": "You are a presentation planning expert. Create a detailed presentation outline."}, | |
| {"role": "user", "content": f"Create a presentation plan on '{topic}' with {num_slides} slides. Key points to include: {key_points}. Return your response as a JSON object with this structure: {{\"title\": \"Presentation Title\", \"num_slides\": number, \"slides\": [{{\"slide_number\": 1, \"title\": \"Slide Title\", \"type\": \"title_slide\", \"content\": \"Content description\"}}]}}"} | |
| ], | |
| response_format={"type": "json_object"} | |
| ) | |
| # Parse the JSON response | |
| try: | |
| return json.loads(response.choices[0].message.content) | |
| except json.JSONDecodeError: | |
| # Fallback to simulated response if JSON parsing fails | |
| st.warning("Could not parse LLM response as JSON. Using simulated plan instead.") | |
| return simulate_presentation_plan(topic, num_slides, key_points) | |
| else: | |
| # Fallback to simulated response | |
| return simulate_presentation_plan(topic, num_slides, key_points) | |
| except Exception as e: | |
| st.error(f"Error creating presentation plan: {str(e)}") | |
| # Fallback to simulated response | |
| return simulate_presentation_plan(topic, num_slides, key_points) | |
| def simulate_presentation_plan(topic, num_slides, key_points): | |
| # Simulate an LLM response with a predefined structure | |
| time.sleep(1) # Simulate API call time | |
| slides = [] | |
| # Always create a title slide | |
| slides.append({ | |
| "slide_number": 1, | |
| "title": topic.title(), | |
| "type": "title_slide", | |
| "content": "Presentation overview and introduction" | |
| }) | |
| # Parse key points and distribute across slides | |
| points = [p.strip() for p in key_points.split(',') if p.strip()] | |
| points_per_slide = max(1, len(points) // (num_slides - 2)) # Reserve title and conclusion slides | |
| # Content slides | |
| for i in range(2, num_slides): | |
| start_idx = (i-2) * points_per_slide | |
| end_idx = min(start_idx + points_per_slide, len(points)) | |
| current_points = points[start_idx:end_idx] if start_idx < len(points) else ["Further exploration of the topic"] | |
| slides.append({ | |
| "slide_number": i, | |
| "title": f"Key Point {i-1}" if start_idx < len(points) else "Additional Insights", | |
| "type": "content_slide", | |
| "content": ", ".join(current_points) | |
| }) | |
| # Conclusion slide | |
| slides.append({ | |
| "slide_number": num_slides, | |
| "title": "Conclusion", | |
| "type": "conclusion_slide", | |
| "content": "Summary of key points and final thoughts" | |
| }) | |
| return { | |
| "title": topic.title(), | |
| "num_slides": num_slides, | |
| "slides": slides | |
| } | |
| except Exception as e: | |
| st.error(f"Error creating presentation plan: {str(e)}") | |
| return None | |
| # Function to generate HTML for a slide using LLM as "HTML Creation Agent" | |
| def generate_slide_html(slide_info, css_style): | |
| try: | |
| # Simulating LLM call - In production, you would replace this with an actual LLM API call | |
| # For demo purposes, we'll create simple HTML based on slide type | |
| slide_type = slide_info.get("type", "content_slide") | |
| slide_number = slide_info.get("slide_number", 1) | |
| slide_title = slide_info.get("title", "Slide") | |
| slide_content = slide_info.get("content", "") | |
| if slide_type == "title_slide": | |
| html = f"""<!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>{slide_title}</title> | |
| <style>{css_style}</style> | |
| </head> | |
| <body> | |
| <div class="slide"> | |
| <h1 style="text-align: center; margin-top: 150px;">{slide_title}</h1> | |
| <p style="text-align: center; font-size: 1.5em;">AI Generated Presentation</p> | |
| <div class="slide-number">{slide_number}</div> | |
| </div> | |
| </body> | |
| </html>""" | |
| elif slide_type == "conclusion_slide": | |
| html = f"""<!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>{slide_title}</title> | |
| <style>{css_style}</style> | |
| </head> | |
| <body> | |
| <div class="slide"> | |
| <h1>{slide_title}</h1> | |
| <p>Thank you for your attention!</p> | |
| <ul> | |
| <li>We've covered the key aspects of {st.session_state.presentation_title}</li> | |
| <li>Remember the main takeaways</li> | |
| <li>Questions and feedback welcome</li> | |
| </ul> | |
| <div class="slide-number">{slide_number}</div> | |
| </div> | |
| </body> | |
| </html>""" | |
| else: # content_slide | |
| # Convert the content to bullet points if it's comma-separated | |
| if "," in slide_content: | |
| bullet_points = slide_content.split(",") | |
| content_html = "<ul>" | |
| for point in bullet_points: | |
| if point.strip(): | |
| content_html += f"<li>{point.strip()}</li>" | |
| content_html += "</ul>" | |
| else: | |
| content_html = f"<p>{slide_content}</p>" | |
| html = f"""<!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>{slide_title}</title> | |
| <style>{css_style}</style> | |
| </head> | |
| <body> | |
| <div class="slide"> | |
| <h1>{slide_title}</h1> | |
| {content_html} | |
| <div class="slide-number">{slide_number}</div> | |
| </div> | |
| </body> | |
| </html>""" | |
| return html | |
| except Exception as e: | |
| st.error(f"Error generating slide HTML: {str(e)}") | |
| return None | |
| # Function to download all slides as a ZIP file | |
| def get_slide_download_link(): | |
| buffer = BytesIO() | |
| with zipfile.ZipFile(buffer, 'w') as zip_file: | |
| for slide_number in st.session_state.slide_order: | |
| html_content = st.session_state.slides_html.get(str(slide_number), "") | |
| if html_content: | |
| zip_file.writestr(f"slide_{slide_number}.html", html_content) | |
| # Add a CSS file | |
| zip_file.writestr("styles.css", st.session_state.css_style) | |
| # Add an index.html that links all slides | |
| index_html = """<!DOCTYPE html> | |
| <html> | |
| <head> | |
| <title>Presentation Slides</title> | |
| <style> | |
| body { | |
| font-family: Arial, sans-serif; | |
| max-width: 800px; | |
| margin: 0 auto; | |
| padding: 20px; | |
| } | |
| h1 { | |
| color: #2c3e50; | |
| } | |
| ul { | |
| list-style-type: none; | |
| padding: 0; | |
| } | |
| li { | |
| margin: 10px 0; | |
| } | |
| a { | |
| display: block; | |
| padding: 10px; | |
| background-color: #3498db; | |
| color: white; | |
| text-decoration: none; | |
| border-radius: 5px; | |
| } | |
| a:hover { | |
| background-color: #2980b9; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <h1>""" + st.session_state.presentation_title + """</h1> | |
| <ul>""" | |
| for slide_number in st.session_state.slide_order: | |
| index_html += f""" | |
| <li><a href="slide_{slide_number}.html" target="_blank">Slide {slide_number}</a></li>""" | |
| index_html += """ | |
| </ul> | |
| </body> | |
| </html>""" | |
| zip_file.writestr("index.html", index_html) | |
| buffer.seek(0) | |
| b64 = base64.b64encode(buffer.read()).decode() | |
| return f'<a href="data:application/zip;base64,{b64}" download="{st.session_state.presentation_title.replace(" ", "_")}_slides.zip">Download All Slides</a>' | |
| # Function to update or edit a slide | |
| def update_slide(slide_number, html_content): | |
| st.session_state.slides_html[str(slide_number)] = html_content | |
| # Main app layout | |
| st.title("AI PowerPoint Maker") | |
| st.markdown("### Multi-Agent System for Creating Editable HTML Presentations") | |
| tabs = st.tabs(["Create Presentation", "Edit Slides", "Customize Styling", "Preview & Export"]) | |
| # Tab 1: Create Presentation | |
| with tabs[0]: | |
| st.subheader("Planning Agent: Define Your Presentation") | |
| col1, col2 = st.columns(2) | |
| with col1: | |
| topic = st.text_input("Presentation Topic", value=st.session_state.presentation_title) | |
| num_slides = st.slider("Number of Slides", min_value=3, max_value=15, value=5) | |
| with col2: | |
| key_points = st.text_area("Key Points (comma separated)", height=100, | |
| help="Enter the main points you want to cover, separated by commas") | |
| if st.button("Generate Presentation Plan"): | |
| if not topic: | |
| st.error("Please enter a presentation topic") | |
| else: | |
| with st.spinner("Planning Agent is thinking..."): | |
| plan = create_presentation_plan(topic, num_slides, key_points) | |
| if plan: | |
| st.session_state.presentation_plan = plan | |
| st.session_state.presentation_title = plan["title"] | |
| st.session_state.slide_order = [slide["slide_number"] for slide in plan["slides"]] | |
| st.success("Presentation plan created successfully!") | |
| # Auto-generate all slides | |
| with st.spinner("HTML Creation Agent is generating slides..."): | |
| for slide in plan["slides"]: | |
| html = generate_slide_html(slide, st.session_state.css_style) | |
| if html: | |
| st.session_state.slides_html[str(slide["slide_number"])] = html | |
| st.success("All slides generated! Go to the Edit Slides tab to view and modify them.") | |
| # Display the presentation plan if it exists | |
| if st.session_state.presentation_plan: | |
| st.subheader("Presentation Plan") | |
| st.json(st.session_state.presentation_plan) | |
| # Tab 2: Edit Slides | |
| with tabs[1]: | |
| if not st.session_state.slides_html: | |
| st.info("No slides have been generated yet. Go to the Create Presentation tab to get started.") | |
| else: | |
| st.subheader("HTML Creation Agent: Edit Your Slides") | |
| # Select a slide to edit | |
| slide_numbers = list(map(str, st.session_state.slide_order)) | |
| selected_slide = st.selectbox("Select Slide to Edit", slide_numbers) | |
| if selected_slide: | |
| st.session_state.current_slide = selected_slide | |
| slide_html = st.session_state.slides_html.get(selected_slide, "") | |
| # Edit HTML | |
| new_html = st.text_area("Edit HTML", value=slide_html, height=300) | |
| if st.button("Update Slide"): | |
| update_slide(selected_slide, new_html) | |
| st.success(f"Slide {selected_slide} updated successfully!") | |
| # Preview the current slide | |
| st.subheader("Slide Preview") | |
| st.components.v1.html(new_html, height=600, scrolling=True) | |
| # Tab 3: Customize Styling | |
| with tabs[2]: | |
| st.subheader("Customize Presentation Styling") | |
| new_css = st.text_area("Edit CSS Styles", value=st.session_state.css_style, height=400) | |
| if st.button("Update Styling"): | |
| st.session_state.css_style = new_css | |
| # Update all slides with new CSS | |
| for slide_number in st.session_state.slide_order: | |
| html = st.session_state.slides_html.get(str(slide_number), "") | |
| if html: | |
| # Replace the CSS in the HTML | |
| start_tag = "<style>" | |
| end_tag = "</style>" | |
| start_idx = html.find(start_tag) + len(start_tag) | |
| end_idx = html.find(end_tag) | |
| if start_idx > len(start_tag) - 1 and end_idx > -1: | |
| new_html = html[:start_idx] + new_css + html[end_idx:] | |
| st.session_state.slides_html[str(slide_number)] = new_html | |
| st.success("Styling updated for all slides!") | |
| # Show a sample of how the styling looks | |
| if st.session_state.slides_html and st.session_state.slide_order: | |
| st.subheader("Style Preview") | |
| sample_slide = st.session_state.slides_html.get(str(st.session_state.slide_order[0]), "") | |
| if sample_slide: | |
| st.components.v1.html(sample_slide, height=600, scrolling=True) | |
| # Tab 4: Preview & Export | |
| with tabs[3]: | |
| if not st.session_state.slides_html: | |
| st.info("No slides have been generated yet. Go to the Create Presentation tab to get started.") | |
| else: | |
| st.subheader("Preview All Slides") | |
| for slide_number in st.session_state.slide_order: | |
| st.markdown(f"### Slide {slide_number}") | |
| html = st.session_state.slides_html.get(str(slide_number), "") | |
| if html: | |
| st.components.v1.html(html, height=600, scrolling=True) | |
| st.markdown("---") | |
| st.subheader("Export Presentation") | |
| st.markdown(get_slide_download_link(), unsafe_allow_html=True) | |
| st.info("This will download a ZIP file containing all your slides as HTML files with consistent styling. You can open each slide in a browser or use them in your presentation software.") | |
| # Sidebar with instructions and settings | |
| st.sidebar.title("AI PowerPoint Maker") | |
| # OpenAI API Key input | |
| st.sidebar.subheader("OpenAI API Settings") | |
| api_key = st.sidebar.text_input("Enter your OpenAI API Key", | |
| value=st.session_state.openai_api_key, | |
| type="password", | |
| help="Your API key will be used to generate better presentation content and slides.") | |
| if api_key: | |
| st.session_state.openai_api_key = api_key | |
| st.sidebar.success("✅ API Key set successfully!") | |
| else: | |
| st.sidebar.info("ℹ️ No API Key provided. The app will use simulated responses.") | |
| st.sidebar.markdown("---") | |
| st.sidebar.subheader("How It Works") | |
| st.sidebar.markdown(""" | |
| This app uses a multi-agent approach to create presentations: | |
| 1. **Planning Agent**: Develops the structure and content flow of your presentation | |
| 2. **HTML Creation Agent**: Creates editable HTML slides with consistent styling | |
| ### Steps to Use: | |
| 1. Define your presentation topic and key points | |
| 2. Generate the presentation plan | |
| 3. Edit individual slides if needed | |
| 4. Customize the styling to match your preferences | |
| 5. Preview all slides and export them as HTML files | |
| ### Benefits: | |
| - Get a professionally structured presentation quickly | |
| - Edit the HTML directly for complete customization | |
| - Consistent styling across all slides | |
| - Export as individual HTML files for easy use | |
| """) | |
| st.sidebar.markdown("---") | |
| st.sidebar.info("When the OpenAI API key is provided, this app will use the actual OpenAI API for both the planning and HTML creation steps. Without an API key, it will use simulated responses for demonstration purposes.") |