feat: AI Highlighter (#5241)

* old but new highlighter

# Conflicts:
#	app/components-react/pages/RecordingHistory.tsx

* Revert "removed everything ai-highlighter related"

This reverts commit 9534188.

# Conflicts:
#	app/components-react/pages/RecordingHistory.tsx

* Revert "removed more ai stuff"

This reverts commit 9266d84.

* added featureflag

* feature flag for updater

* set default view for highlighter

* minor copy tweaks and icons update

# Conflicts:
#	app/components-react/highlighter/SettingsView.tsx

* adjusted styling

* added missing import

* fix import

* vertical export with webcam

* added aihighlighter namespace to events

* stream highlights button style change

* fix issue from gitmare

* fix back button

* added lost gitignore

* change vertical without webcam for now

* package json version fix

* reverted to new preview

* refactored preview player and improved functionality

* preview modal bug fixes and improvements

* fixed background music export and added music loop

* skip update in devMode

* new highlighter dev path

* replaced inline css with classes

# Conflicts:
#	app/components-react/highlighter/ClipPreview.tsx

* clips view cleanup

# Conflicts:
#	app/components-react/highlighter/ClipsView.tsx

* fix defining function in hook

* fix hotkey label issue

# Conflicts:
#	app/components-react/highlighter/SettingsView.tsx

* clean css settings view

# Conflicts:
#	app/components-react/highlighter/SettingsView.tsx

* removed unnessesary filtering

# Conflicts:
#	app/services/highlighter/index.ts

* fixed deletion issues

# Conflicts:
#	app/components-react/highlighter/ClipsView.tsx
#	app/services/highlighter/index.ts

* fixed padding issues

* cleanup clipsPreview

* fix slow clip generation

* added gun emoji back in

* fix devMode check in highlighter

* clipsView performance update

* highlighter branch version

* import fix

* temporariely disable ai-highlighter feature flag

* fixed vertical exports on windows and other os

* dont use intro/outro for vertical videos

* settings view css cleanup

* added translations

# Conflicts:
#	app/components-react/highlighter/SettingsView.tsx

* added adjusted translation json

* define whats saved in localstorage

# Conflicts:
#	app/services/highlighter/index.ts

* order change

* typo

* after ExportModal umount reset renderingState

* cleanup stream card

* preview fix

* fix broken preview state after preview finishes

* clean stream view

* re-structuring

* renaming + i18n

* Highlighter/preview bug (#5240)

* logs and currentClipIndex in hook

* removed console log statements

---------

Co-authored-by: jankalthoefer <[email protected]>

* fix Implicit any in catch clause

* remove BlankSlate again

* sorting and linting fixes

* manually revert clips view performance update

* translation + cta fix

* replaybuffer fix

* translation fix

* Revert "manually revert clips view performance update"

This reverts commit b630b86.

* fix strictnull check

* Revert "temporariely disable ai-highlighter feature flag"

This reverts commit dee98d8.

* in dev mode enable update and use highlighter.exe for now

* changed back package json

* useAiHighlighter to localstorage

* fixed issue with preview clips and progress bar animation

* adjust highlighter export filename

* fix missing translation

* added ai highlighter to recordingsHistory

* flames fix

* ai highlighter toggle cleanup

* translation fix

* preview css fix

* utils functions to beginning of file

* highlight generator fixes

* moved unmount to only run on unmount

* css fix

* removed unnecessary code

* buffer const fixes

* added resumability of highlights generation and fixed process kill fl… (#5245)

* added resumability of highlights generation and fixed process kill flow on windows

* renamed resume back to restart

---------

Co-authored-by: marvinoffers <[email protected]>

* fix transform width

* remove unneded css

* hide ai highlighter for any os that is not windows (#5247)

* fix linting error

* theming color fix

* wording change

* adjusted colors for other themes

* upload modal height fix

* fix error case

* fixed null issues

* preview improvement suggestion

* removed {' '}

* Revert "removed {' '}"

This reverts commit 828c91f.

* removed {‘  ’} from files we touched where its not necessary

* Capitalize buttons and fix test

* changed wording + empty preview state

* added beta tag (#5248)

* smoothen progressbar

* disable button when detection in progress (#5252)

* add " - highlights" to export name

---------

Co-authored-by: jankalthoefer <[email protected]>
Co-authored-by: ggolda <[email protected]>
Co-authored-by: ggolda <[email protected]>
Co-authored-by: Sean Beyer <[email protected]>

.gitignore

@@ -31,3 +31,4 @@ license_en.txt
 !.yarn/sdks
 !.yarn/versions
 chromedriver.log
+shared-resources/ai-highlighter/*

app/components-react/highlighter/ClipPreview.m.less

@@ -87,7 +87,7 @@
 
 .highlighter-icon {
   font-size: 19px;
-  transform: translateY(1px);
+  transform: translateX(-6px);
 }
 
 .preview-clip-bottom-bar {
@@ -104,3 +104,16 @@
   align-items: center;
   pointer-events: auto;
 }
+
+.round-tag {
+  padding: 4px 6px;
+  background-color: #00000070;
+  border-radius: 4px;
+  color: white;
+}
+
+.flame-hypescore-wrapper {
+  position: absolute;
+  top: 7px;
+  right: 9px;
+}

app/components-react/highlighter/ClipPreview.tsx

@@ -6,6 +6,8 @@ import { BoolButtonInput } from 'components-react/shared/inputs/BoolButtonInput'
 import styles from './ClipPreview.m.less';
 import { Button } from 'antd';
 import { $t } from 'services/i18n';
+import { isAiClip } from './utils';
+import { InputEmojiSection } from './InputEmojiSection';
 import { useVuex } from 'components-react/hooks';
 
 export default function ClipPreview(props: {
@@ -24,7 +26,7 @@ export default function ClipPreview(props: {
   const enabled = v.clip.deleted ? false : v.clip.enabled;
 
   if (!v.clip) {
-    return <div>deleted</div>;
+    return <>deleted</>;
   }
 
   function mouseMove(e: React.MouseEvent) {
@@ -66,6 +68,9 @@ export default function ClipPreview(props: {
             <i className={`icon-trash ${styles.deletedIcon}`} />
           </div>
         )}
+        <div className={styles.flameHypescoreWrapper}>
+          {isAiClip(v.clip) && <FlameHypeScore score={v.clip.aiInfo.score} />}
+        </div>
         <span className={styles.enableButton}>
           <BoolButtonInput
             tooltip={enabled ? $t('Disable clip') : $t('Enable clip')}
@@ -84,13 +89,36 @@ export default function ClipPreview(props: {
         </span>
         <div className={styles.previewClipMoving}>
           <div className={styles.controlsContainer}>
+            {/* left */}
             <div className={styles.durationInfo}>
               <span className={styles.durationLabel}>
                 {formatSecondsToHMS(v.clip.duration! - (v.clip.startTrim + v.clip.endTrim) || 0)}
               </span>
             </div>
-            <div className={styles.highlighterIcon}>
-              <i className="icon-highlighter" />
+            {/* right */}
+            <div style={{ display: 'flex', gap: '4px' }}>
+              <div
+                style={{
+                  fontSize: '19px',
+                }}
+              >
+                {isAiClip(v.clip) ? (
+                  <InputEmojiSection
+                    clips={[v.clip]}
+                    includeRounds={false}
+                    includeDeploy={true}
+                    showCount={false}
+                    showDescription={false}
+                  />
+                ) : (
+                  <div className={styles.highlighterIcon}>
+                    <i className="icon-highlighter" />
+                  </div>
+                )}
+              </div>
+              {isAiClip(v.clip) && v.clip.aiInfo?.metadata?.round && (
+                <div className={styles.roundTag}>{`Round: ${v.clip.aiInfo.metadata.round}`}</div>
+              )}
             </div>
           </div>
           <div className={styles.previewClipBottomBar}>
@@ -120,3 +148,25 @@ export function formatSecondsToHMS(seconds: number): string {
     minutes !== 0 ? minutes.toString() + 'm ' : ''
   }${remainingSeconds !== 0 ? remainingSeconds.toString() + 's' : ''}`;
 }
+
+function FlameHypeScore({ score }: { score: number }) {
+  if (score === undefined) {
+    return <></>;
+  }
+  const normalizedScore = Math.min(1, Math.max(0, score));
+  const fullFlames = Math.ceil(normalizedScore * 5);
+
+  return (
+    <div className="flex items-center gap-1" style={{ fontSize: '19px' }}>
+      {Array.from({ length: fullFlames }).map((_, index) => (
+        <React.Fragment key={'on' + index}>🔥</React.Fragment>
+      ))}
+
+      {Array.from({ length: 5 - fullFlames }).map((_, index) => (
+        <span key={'off' + index} style={{ opacity: '0.3' }}>
+          🔥
+        </span>
+      ))}
+    </div>
+  );
+}

app/components-react/highlighter/ClipTrimmer.tsx

@@ -151,14 +151,17 @@ export default function ClipTrimmer(props: { clip: TClip }) {
   function stopDragging() {
     if (isDragging.current === 'start') {
       HighlighterService.actions.setStartTrim(props.clip.path, localStartTrim);
-      UsageStatisticsService.actions.recordAnalyticsEvent('Highlighter', { type: 'Trim' });
     } else if (isDragging.current === 'end') {
       HighlighterService.actions.setEndTrim(props.clip.path, localEndTrim);
-      UsageStatisticsService.actions.recordAnalyticsEvent('Highlighter', { type: 'Trim' });
     }
 
     isDragging.current = null;
     playAt(localStartTrim);
+
+    UsageStatisticsService.actions.recordAnalyticsEvent(
+      HighlighterService.state.useAiHighlighter ? 'AIHighlighter' : 'Highlighter',
+      { type: 'Trim' },
+    );
   }
 
   const scrubHeight = 100;