לפני חצי שנה דנשי הציע שאוסיף ל langlets מצב קריוקי שמדגיש את המילה הנוכחית כשמנגנים שיר. באותו זמן לא האמנתי שזה אפשרי - מודל AI שיודע למצוא זמן לכל מילה? הם בקושי מצליחים ליצור לי התאמה ברזולוציה של משפטים.

חצי שנה עברה ו Gemini 3.5 Flash עומד במשימה בצורה מרשימה. אחרי שראיתי את התוצאות הלכתי לשנות את הקוד, או יותר נכון נתתי לקלוד לשנות. אני רוצה להציג כאן את הפרומפט ולדבר על השיקולים בכתיבתו וגם לסכם מה עבד ומה עוד היה צריך להוסיף.

1. לפני הכל הפרומפט

התחלתי עם הפרומפט הזה כקלט למצב תכנון (עד כדי הקטעים הטכניים שאני מצמצם פה כדי למקד את הפרומפט):

Switch to per word timing maintaining backward compatibility

Step 1 - Create Song Pipeline
Refactor the extract lyrics prompt to the following version:

[...]

each "word" in the output should create a token translation
Then create_token_translations step doesn't have to do language alignment, it should just translate each "word". Still give the LLM the full phrase for context though.

Step 2 - Schema
Add timestamp to token_translation

Step 3 - UI
Show karaoke style word highlight marking current token when playing in the video players

Step 4 - Verification and format
Use the existing apt_word_timing.json output with song URL as the result of extract youtube lyrics
https://www.youtube.com/watch?v=ekr2nIex040

Run the pipeline steps AFTER extract youtube lyrics to create the rest of the data and save it to a JSON file. I'll then manually import that JSON file to check the result. Create a reusable script so we can repeat our testing

Step 5 - Backward Compatibility
The video players should support 2 cases:

token_translations with timestamps (new functionality) - use karaoke style word highlight
token_trnslations without timestamps (existing data) - continue to use phrase level highlight
Pass a boolean value from rails video activity params to indicate if it should use the new or old style

מצב סוכן שאל אותי כמה שאלות הבהרה, יצר תוכנית ואז מצב אוטומטי מימש אותה והסרט הראשון נפתח במצב קריוקי כך שכמעט אפשר לסמן הצלחה.

2. מה טוב בפרומפט

אלה הנקודות החזקות של הפרומפט:

1. הצגת ההשפעה - ברור על איזה חלקים בקוד השינוי משפיע. החלקים העיקריים הם השינוי במנגנון תמלול הסרט והשינוי במנגנון תרגום המילים.

2. שינויים בסכימה - שינויים במודל ואיך ששומרים את המידע מופיעים בצורה מפורשת ועוזרים למקד את קלוד. במקרה שלנו יש תוספת של עמודה אחת לטבלת token_translations.

3. ממשק משתמש - שימוש בביטוי Karaoke Style מבהיר בדיוק איך דברים צריכים להיראות, בלי להכנס לפרטים הטכניים של איך זה ימומש. אין שום דבר מיוחד בקריוקי באפליקציה זו בהשוואה למצב קריוקי בכל מקום אחר ולכן אין צורך להרחיב על זה.

4. איך לוודא הצלחה - הבלוק האחרון Verification and format כולל צירוף קובץ שמראה את הפורמט המדויק של הנתונים עוזר לקלוד להבין שהוא יצר משהו שעובד.

5. מתאר את ה"מה" ולא את ה"איך" - מה שהכי אהבתי בפרומפט. הוא מתאר מה המערכת צריכה להיות אחרי השינוי אבל לא נכנס לקוד עצמו שצריך להיות שם. זאת עליית המדרגה באבסטרקציה שאנחנו צריכים לאמץ.

3. מה לא טוב בפרומפט

הנקודות שקלוד פספס במימוש היו מאוד ספציפיות ל Codebase. סופר הגיוני ומזכיר למה חשוב לשמור קבצי תיעוד שמתארים את הקוד ומחדדים נקודות שלנו אולי נראות ברורות מאליהן:

1. למרות שביקשתי רק תוספת של עמודה אחת, קלוד הוסיף שתי עמודות "זמן התחלה" ו"זמן סיום", להתאים למקומות אחרים בקוד.

2. מנגנון זיהוי המילה הנוכחית לקריוקי מאוד בזבזני. זה הקוד שקלוד יצר:

  updateWordHighlight(currentTime) {
    if (!this.tokenSpans) {
      this.tokenSpans = Array.from(this.element.querySelectorAll('[data-token-start]'));
    }

    for (const span of this.tokenSpans) {
      const start = Number(span.dataset.tokenStart);
      const end = Number(span.dataset.tokenEnd);
      span.classList.toggle('s-token-active', currentTime >= start && currentTime <= end);
    }
  }

1. קלוד בחר להציג בסגנון קריוקי תוכן אם לחלק מהמילים יש תווית זמן. אבל האמת היא שאם רק לחלק קטן מהמילים יש תווית זמן עדיף לוותר על מצב קריוקי. הסיבה היא שלא התיחסתי בפרומפט למצבים בהם יש מידע רק על חלק מהמילים.

2. תרגום המילים - לא התיחסתי בפרומפט בכלל לשאלה איך לתרגם את המילים הבודדות ולכן קלוד יצר מנגנון בזבזני שפונה ל LLM כדי לתרגם כל מילה בנפרד. שיפור הכרחי היה לקבץ מילים יחד בשביל התרגום.

מה נשאר? להכניס תכנים בעוד שפות ולראות אם פלאש עומד בזה, לוודא שקריוקי לא שובר את הצפייה ממובייל.

רוצים לראות את הקריוקי בפעולה? הנה שיר ראשון שהעליתי איתו:

https://langlets.app/courses/860/lessons/kissy-face-and-red-hearts