Slides-Template Generator

The Slide-Template Generator App is an innovative solution to help you effortlessly design, brainstorm, and get an informative slide' template of the theme with simple one-word typing.

Comment

Inspiration

  1. As students frequently tasked with creating presentations, we recognize the challenges and time constraints involved in developing informative slides on diverse themes.
  2. Additionally, understanding that individuals with learning disabilities may face even greater difficulties.
  3. SO, our group was motivated to develop an easy-to-use program to assist and help everyone in efficiently creating impactful presentations.

What it does

  1. Generates slide themes/templates for users, so they can shift their focus on the Content
  2. Users only need to type the topic and it will generate in 3 seconds, which is time-consuming
  3. Friendly to all users!

How we built it

  1. Frontend: Angular Framework with TypeScript and JavaScript
  2. Backend: Express.js and Node.js
  3. API: OpenAI GPT-4o
  4. Version Control: Git

Key Features:

  1. Dynamic Slide Creation: Enter a theme and generate slides based on cutting-edge AI technology.
  2. Download Functionality: Option to download the generated slides directly. (in works 🚧🔨)
  3. Responsive Design: Optimized for various devices using CSS.

Components:

  1. Home Page: First interaction point.
  2. Landing Page: Core functionality where users input themes and trigger slide generation using OpenAI API.
  3. Login/Sign Up Pages: User authentication and account management.

Assets (icon images):

  1. Camera.svg
  2. icon.svg
  3. SearchIcon.svg

Library

  1. express
  2. openai
  3. dotenv

Challenges we ran into

  1. Understanding the basic structure of artificial intelligence
  2. Understanding API
  3. Keep the API secure
  4. Embedding openai
  5. Schedule meetings that fits everyone's time
  6. Let generated text able to show within the screen instead of the console
  7. Generate downloadable slides using a combination of express.js and pptxgenjs (need to work on it in the future)

Accomplishments that we're proud of

1, Beautiful Figma design: https://www.figma.com/design/3JlejQDNdpecu2obxX1LYR/Slide-Sage?node-id=0-1&t=x0f9EZSGawFgnVd2-1

  1. Well done full-stack application: https://github.com/mori1221/Gen-AI.git
  2. Presentation video: https://youtu.be/f6iFcXzoW8s
  3. Presentation slides: https://docs.google.com/presentation/d/1QHFLGQJQjZJgJsMxbEAj3I3etU4YYSlxAIfOOB-WBMo/edit?usp=sharing

What we learned

  1. Learn basic machine learning
  2. Understand how the simple structure of AI training
  3. Integration of APIs
  4. Handling API Responses
  5. Setting Up an Express Server:
  6. Creating API Endpoints
  7. Building a Responsive UI
  8. Service Integration
  9. Data Binding and Event Handling
  10. Building a Full-Stack Application
  11. Use environment variables to securely manage sensitive information like API keys

What's next for Slides-Template Generator

  1. Download Feature: Capability to download the slides made
  2. Refined User Interface: Update the UI with a modern, sleek design that improves navigation and usability.
  3. Security Updates: Implement encryption methods for storing and transmitting user data
  4. Specialized GPTs: Using GPT’s feature of creating specialized GPT for generating slides.
Share this project:

Updates