Epic 2.16 Frontend for Presentation Generator

[Ahmedr275]

Frontend Implementation: Presentation Generator Tool

---

Overview
Upon completion of Issue #117 for developing the Presentation Generator, the FE functionality can be implemented. This issue focuses on the frontend implementation to provide a seamless and user-friendly interface for generating and customizing slide presentations tailored to educators' needs.

Details from Backend Issue (#117):
The Presentation Generator tool enables users to create structured, visually engaging presentations by specifying inputs such as grade level, number of slides, and content topic. The backend generates logical slide content tailored to the user’s input while adhering to the specified parameters.

---

Scope of Work

1. Tool Description
   The Presentation Generator tool will allow users to input parameters (e.g., grade level, number of slides, topic) and view generated presentations in a structured layout. Users will have the option to export the generated content as text or PPTX files.

2. Design Implementation
   The frontend should adhere to the provided design mockups to ensure a user-friendly and visually appealing interface.
   Design Mockup

3. API Integration

   • Use the backend API endpoint to fetch generated slide content.
   • Ensure seamless communication between the frontend and backend for slide generation, customization, and export functionality.

4. Features to Implement

   • Input Form: Build an interactive form for users to input parameters like grade level, number of slides, and topic.
   • Slide Preview: Display generated slide content in a structured, scrollable preview.
   • Export Functionality: Add options to export slides as text.
   • Validation: Implement frontend validation to ensure inputs meet required formats and criteria.

---

Acceptance Criteria

• The frontend matches the design mockup and provides a seamless user experience.
• The input form correctly sends data to the backend API.
• Generated presentations are displayed in a structured and user-friendly format.
• Export functionality (text) works as expected.
• The tool is responsive and functional across devices and browsers.

---

Resources

1. Design Mockup
2. Backend API Documentation
3. Backend Issue (#117)

---

Notes
This issue depends on the backend implementation. Frontend developers should refer to the API documentation to test the integration and ensure the generated presentations are accurate and meet user expectations.

[yamunajayan]

Hi I would like to work on this issue

[arashghezavati]

Hi, I'm currently working on this issue as well

[arashghezavati]

I have implemented the Presentation Generator feature and opened a pull request (#210)
I kindly request your review and feedback. Let me know if any further updates are needed.

[cemilozdemir]

Hi team,

I've implemented a new reusable HybridInput component and integrated it with the Presentation Generator Tool (Issue #187). The PR is now ready for review: #213

🔥 HybridInput Component Highlights

The new HybridInput component is designed to be a versatile, reusable solution for any form that needs to handle both text and file inputs:

1. Core Features:

   • Unified text/file input interface
   • Dynamic file type selection with custom icons
   • Single/multiple file upload support
   • Visual file chips with delete functionality
   • YouTube URL handling capability
   • Fully controlled component with react-hook-form integration

2. Technical Implementation:

   • Built with forwardRef for proper ref handling
   • Comprehensive state management for files and input types
   • Material-UI integration with custom styling
   • Detailed error handling and validation
   • Extensive prop customization options

Presentation Generator Integration

As a first use case, I've integrated HybridInput into the Presentation Generator Tool:

• Implemented in ToolRequestForm with format-specific validation
• Connected to PresentationGeneratorResponse component
• Added file download capabilities
• Updated configurations in seed_data.json

The implementation follows the design mockups and meets all requirements while providing a foundation for future form implementations across the platform.

You can find the complete implementation details and testing instructions in the PR description. Looking forward to your review!

PR #213
@Ahmedr275

[sairajaggani]

I would like to work on this issue

[Sukhraj-ai]

Hi I would also like to work on this issue.

[ciremal]

Hi I would like to work on this issue or collaborate with others on this issue

[sairajaggani]

Hello, i am happy to collaborate and start working with you.

…

On Tue, Jan 21, 2025, 16:04 Eric Lam ***@***.***> wrote: Hi I would like to work on this issue or collaborate with others on this issue — Reply to this email directly, view it on GitHub <#187 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APLOCMM2P5SVUFKBMBTJT7T2L275XAVCNFSM6AAAAABS7CFEDSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMMBVHAZTEMZWGE> . You are receiving this because you commented.Message ID: ***@***.***>

[ciremal]

Hello, i am happy to collaborate and start working with you.
…

Awesome, do you have Discord or other apps we can communicate on?

[sairajaggani]

Unfortunately, I don't have discord... Can we communicate with telegram

…

On Tue, Jan 21, 2025, 16:44 Eric Lam ***@***.***> wrote: Hello, i am happy to collaborate and start working with you. … <#m_-7261733013142516266_> Awesome, do you have Discord or other apps we can communicate on? — Reply to this email directly, view it on GitHub <#187 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APLOCMIUW67FOTGBEYOC6FT2L3ETTAVCNFSM6AAAAABS7CFEDSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMMBVHA4TCMZUHA> . You are receiving this because you commented.Message ID: ***@***.***>

[ciremal]

Unfortunately, I don't have discord...
Can we communicate with telegram
…

Sure, can you give me your email?

[sairajaggani]

Its ***@***.*** Can i have yours please

…

On Wed, Jan 22, 2025, 12:02 Eric Lam ***@***.***> wrote: Unfortunately, I don't have discord... Can we communicate with telegram … <#m_7785811359028471981_> Sure, can you give me your email? — Reply to this email directly, view it on GitHub <#187 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/APLOCMJBBKC4VUNGS442SHL2L7ML3AVCNFSM6AAAAABS7CFEDSVHI2DSMVQWIX3LMV43OSLTON2WKQ3PNVWWK3TUHMZDMMBXHEYTINZWGE> . You are receiving this because you commented.Message ID: ***@***.***>

[ciremal]

Its @.***
Can i have yours please
…

I sent you a message on the Reality AI Lab platform. If you dont see it, you can just search for me and send me a message (Eric Lam)