SuperAPI AI Directory
Partner中文AI newsFavorites
Skillsphoto-homework-a4

photo-homework-a4

Office & productivity

View repository

Updated 10-16 10:30

About this skill

Photo Homework A4 (photo homework → A4 printable list)

Overview

This skill converts a handwritten homework list photo into a single-page A4 HTML homework list with a fixed layout. The core asset is the assets/homework-a4-template.html template file: copy the template → fill in the recognition results → deliver, with no need to redesign the layout each time.

Workflow

Step 1: Recognize the photo content

  • Use the Read tool to read the homework photo uploaded by the user and recognize the handwritten content item by item.
  • Group by subject (common subjects: Chinese, mathematics, English, physics, chemistry, history, biology, politics, geography, etc.).
  • When recognizing unclear handwriting, infer from context (e.g., "materials in the group/group materials" is a common expression), and remind the user to check questionable items upon delivery.
  • Extract date information: prioritize obtaining the date from the photo or the user's message; if unavailable, use the current date.

Step 2: Classify and tag homework items

Each homework item is assigned to one of the following categories and uses the corresponding tag (the tag styles are already built into the template CSS):

Category Tag class Color Judgment criteria
Recitation type tag-recite Orange Contains "recite", "read aloud", "write from memory", etc.
Written type tag-write Blue Written exercises, workbooks, test papers; "reading" uses tag-read(cyan)
Material type tag-material Green "materials in the group", "material sheet", "group materials", etc.

Step 3: Generate HTML based on the template

  1. Copy assets/homework-a4-template.html to the workspace, and name it 作业清单-A4打印版.html(or a name containing the date).
  2. Replace all {占位符}：
    • in the template. Header date and day of the week.
    • Overview statistics bar 5 numbers: number of subjects, total number of homework items, recitation type, written type, material type ("reading" is merged into the written type count).
    • One .subject card per subject, replace the example cards and add or remove according to the number of subjects;subject-count Fill in the number of homework items for that subject.
    • The number of categories in the warm reminder at the bottom.
  3. Color palette(one set per subject: --accent theme color + --accent-bg light background, cycling through colors when subjects repeat):
    • Blue #4f6ef7 / #e8f0fe, Green #2fbf9b / #e6f7f1, Purple #9b59f5 / #f3ebfe
    • Orange #e67e22 / #fdf0e0, Red #c0392b / #fbe9e7, Cyan #16a085 / #e0f5f1
  4. Subject icons: Physics 🧪 Mathematics 📐 Chemistry ⚗️ English 🔤 History 🏛️ Chinese 📖 Biology 🧬 Geography 🌏 Politics ⚖️.
  5. After completion, delete the extra example cards and HTML comments in the template.

Step 4: Layout constraints (must be followed to ensure a single A4 page)

  • @page { size: A4 portrait; margin: 0; } and .page { width: 210mm; min-height: 296mm; } must not be changed.
  • Subjects ≤ 6: keep the two-column grid and default font size (assignment items 10.5pt).
  • When there are 7-8 subjects or a single assignment item is too long: narrow the .grid gap to 3mm, reduce the assignment item font size to 9.5-10pt, and reduce li padding to 1.2mm.
  • When there is an extreme amount of content, it is allowed to change .grid to a single column, but you must ensure the total height ≤ 297mm.
  • Self-check after generation: total page height does not exceed one page; each card's page-break-inside: avoid is already built in, do not delete it.

Step 5: Delivery

  • Use present_files to display the generated HTML file, and tell the user in the reply how to print:Ctrl + P, paper A4, portrait, margins "none/default".
  • Include a concise assignment content table in the reply (subject → items), so the user can directly verify the recognition results.

Optional extension: interactive check-in version

If the user has not explicitly asked for only a print version, an additional on-screen interactive version may be generated (click to check off + progress bar, implemented with localStorage or in-memory state). The interactive version is not subject to A4 size constraints and may use richer visuals such as gradient backgrounds and card shadows. The content of the two versions must be identical.

Resources

assets/

  • homework-a4-template.html — complete template for the A4 single-page print version. All layout, CSS, signature area, and statistics bar are finalized; you only need to replace the {占位符} content and add or remove subject cards.Do not rewrite the layout from scratch; always modify based on this template.