Overview
Currently, the lesson production workflow is semi-manual. For each lesson, we take the source lesson HTML/content and a predefined prompt, send them to ChatGPT manually, receive the generated CKEditor-compatible HTML, then continue with image redesign, image upload, and final human quality control.
We want to automate the first step of this workflow inside the website by using the GPT API.
The goal of this issue is to implement a backend feature that receives the lesson source HTML and the selected prompt, sends them to the GPT API, and returns the generated lesson HTML directly inside the admin panel.
Current Workflow
- Copy the source lesson HTML/content.
- Copy the appropriate lesson-generation prompt.
- Send both manually to ChatGPT.
- Receive the generated CKEditor-compatible HTML.
- Review and copy the output.
- Paste the final HTML into the lesson editor.
- Redesign lesson images manually.
- Upload redesigned images to the server.
- Run final human quality control.
This issue focuses only on automating steps 1–5.
Target Workflow
Inside the admin panel, the user should be able to:
- Open a lesson generation page/tool.
- Paste or load the source lesson HTML.
- Select the appropriate generation prompt/template.
- Click a “Generate Lesson HTML” button.
- The system sends the source HTML + prompt to the GPT API.
- The generated HTML is displayed in an editable output box.
- The user can review, edit, copy, or save the generated HTML.
Main Requirements
1. Admin UI
Create an admin-side interface with the following fields:
2. Backend API Integration
Implement a backend endpoint that:
-
Receives:
source_htmlprompt_template- optional edited prompt
- lesson metadata if available, such as:
- lesson title
- grade
- subject
- topic
- microtopic
-
Builds the final GPT request.
-
Sends it to the GPT API.
-
Receives the generated HTML.
-
Returns the generated output to the admin UI.
3. Output Rules
The generated output should follow our existing lesson HTML rules:
- CKEditor 4 compatible.
- Inline styles only.
- No
<script>, <style>, <iframe>, external CSS, or JavaScript.
- No full HTML document structure such as:
<html><head><body><meta><title>
- Use only allowed tags according to our current lesson prompt rules.
- Preserve math formatting as much as possible.
- Keep the final output clean and ready to paste into the lesson editor.
- Avoid unnecessary explanations outside the HTML output.
4. Prompt Management
We need a simple way to manage prompts.
Possible implementation:
- Store prompts in the database.
- Each prompt should have:
- title
- description
- level/type
- prompt body
- status: active/inactive
- created/updated timestamps
Admin should be able to:
- Add a new prompt.
- Edit an existing prompt.
- Duplicate a prompt.
- Deactivate old prompts.
- Select prompts during lesson generation.
5. Error Handling
The system should handle:
- Empty source HTML.
- Empty prompt.
- GPT API failure.
- Timeout.
- Invalid response.
- Output that is too long.
- Rate limit errors.
- Authentication/API key errors.
Display clear admin-friendly error messages.
6. Logging
For debugging and quality control, store generation logs.
Each log should include:
- lesson ID if available
- selected prompt ID
- source HTML snapshot or reference
- generated output
- model name
- token usage if available
- generation time
- admin user ID
- created timestamp
- error message if failed
This will help us compare outputs, debug problems, and improve prompts over time.
7. Security
- GPT API key must be stored securely in environment variables.
- API key must never be exposed to frontend.
- Only authorized admin users should access this tool.
- Validate and sanitize inputs where needed.
- Add request size limits to avoid very large accidental submissions.
8. Acceptance Criteria
This issue is complete when:
- Admin can paste lesson source HTML into a form.
- Admin can select or edit a lesson-generation prompt.
- Admin can click a button to generate lesson HTML.
- Backend sends the request to GPT API successfully.
- Generated CKEditor-compatible HTML is shown in the admin panel.
- Admin can copy or save the generated HTML.
- Errors are handled clearly.
- Generation attempts are logged.
- API key is securely stored and not visible in frontend.
Future Scope
These items are not required for this issue but should be considered later:
- Automatic image extraction from source HTML.
- Automatic image redesign workflow.
- Image upload integration.
- Automatic replacement of old image URLs with redesigned image URLs.
- Automated quality-control checklist.
- Human review dashboard.
- Version comparison between original source and generated lesson.
- Batch lesson generation.
- Retry generation with improved prompt.
- AI-based HTML validation before saving.
Overview
Currently, the lesson production workflow is semi-manual. For each lesson, we take the source lesson HTML/content and a predefined prompt, send them to ChatGPT manually, receive the generated CKEditor-compatible HTML, then continue with image redesign, image upload, and final human quality control.
We want to automate the first step of this workflow inside the website by using the GPT API.
The goal of this issue is to implement a backend feature that receives the lesson source HTML and the selected prompt, sends them to the GPT API, and returns the generated lesson HTML directly inside the admin panel.
Current Workflow
This issue focuses only on automating steps 1–5.
Target Workflow
Inside the admin panel, the user should be able to:
Main Requirements
1. Admin UI
Create an admin-side interface with the following fields:
Source HTML input
Prompt selector
Prompt preview/edit field
Generate button
Generated HTML output
2. Backend API Integration
Implement a backend endpoint that:
Receives:
source_htmlprompt_templateBuilds the final GPT request.
Sends it to the GPT API.
Receives the generated HTML.
Returns the generated output to the admin UI.
3. Output Rules
The generated output should follow our existing lesson HTML rules:
<script>,<style>,<iframe>, external CSS, or JavaScript.<html><head><body><meta><title>4. Prompt Management
We need a simple way to manage prompts.
Possible implementation:
Admin should be able to:
5. Error Handling
The system should handle:
Display clear admin-friendly error messages.
6. Logging
For debugging and quality control, store generation logs.
Each log should include:
This will help us compare outputs, debug problems, and improve prompts over time.
7. Security
8. Acceptance Criteria
This issue is complete when:
Future Scope
These items are not required for this issue but should be considered later: