Homework 3: AI Video Narrator 2.0

In this assignment, you will add several features to an AI video narration app.

Task Instructions

Clone the video narration app ([GitHub]), then implement the following features in App.js and App.css:

  1. PDF Spec Sheet Integration: Add a file upload feature for a Product Spec Sheet (PDF). Extract the text and include it in your AI prompt (in the public/prompt_narration.txt file) so the narration is informed by specific product facts.
  2. Voice Selection Menu: Add a dropdown menu for OpenAI’s voices (all default OpenAI voices must be included).
  3. AI Voice Database: Create a voice_description.json file in the public folder mapping each voice to its specific "vibe" and appropriate use case. All OpenAI default voices must be included. The file format should be:
    {
      "voice1_name": "voice1_description",
      "voice2_name": "voice2_description",
      ...
    }
  4. The "Magic Wand" Selector: Add a 🪄 button that automatically selects the best voice based on the JSON file of voice descriptions, the video images, the narration instructions, the PDF content, and the generated narration text. Display a written explanation of the voice choice in the app. (Hint: ask the AI to return the result in JSON format.) Your prompt for this feature must be stored in public/prompt_voice.txt.
  5. Heartbeat UI: Style your action buttons as hearts (❤️). While the AI is processing (generating text, audio, or merging), the hearts must pulse using a CSS keyframe animation. Make sure the code for this feature is in App.css or App.js.

Test App

Test your application using the video and PDF provided in the public folder.
Use the gpt-5-nano model for the AI unless you have your own API key.

Submission Checklist

Zip ONLY the following files into hw3.zip. Keep the same folder structure (e.g. public/ for files in that folder). Submitting extra files or using incorrect names will result in a deduction.

Grading Breakdown (100 Points)

Task ComponentPointsRequirement
1. PDF Integration25Successfully extracts text from PDF and uses it in the narration prompt. Includes the PDF content in the narration prompt file public/prompt_narration.txt.
2. Voice Dropdown15Functional menu with all OpenAI default voices.
3. Voice JSON File15Properly formatted voice_description.json in the public folder with all OpenAI default voices and correct descriptions.
4. Magic Wand Logic25Button selects a voice via AI and displays a valid justification. The prompt for this includes the voice description JSON, the video images, the narration instructions, the PDF content, and the generated narration text. The prompt is stored in public/prompt_voice.txt.
5. Heartbeat UI10Heart buttons exist and pulse correctly during all loading/processing states.
6. Proper Submission10Zipped file contains only the requested files with exact naming conventions.