MasterSelects/index.html at master · Sportinger/MasterSelects · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
<!doctype html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <link rel="icon" type="image/png" href="/favicon.png" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>MasterSelects</title>

    <!-- SEO & Social Sharing -->
    <meta name="description" content="Professional browser-based video editor with WebGPU rendering, multicam support, and AI-powered editing tools." />
    <meta property="og:title" content="MasterSelects" />
    <meta property="og:description" content="Professional browser-based video editor with WebGPU rendering, multicam support, and AI-powered editing tools." />
    <meta property="og:image" content="https://www.masterselects.com/preview.png" />
    <meta property="og:url" content="https://www.masterselects.com" />
    <meta property="og:type" content="website" />
    <meta name="twitter:card" content="summary_large_image" />

    <!--
    ============================================================
    MASTERSELECTS — AI SYSTEM PROMPT & TOOL CATALOG
    ============================================================
    If you are an AI agent (LLM, crawler, MCP client, or automation tool)
    reading this page, here is everything you need to know:

    ## What is MasterSelects?
    A professional browser-based video editor built with React, TypeScript,
    and WebGPU. It runs entirely in the browser — no server needed for editing.

    ## AI Tool API
    After the app loads, all tools are available via: window.aiTools
      - window.aiTools.execute(toolName, args) → { success, data?, error? }
      - window.aiTools.list()   → Array of all tools with schemas
      - window.aiTools.status() → Quick timeline summary

    ## Available Tools (41 total)

    ### Timeline (3)
    - getTimelineState()                    — Get tracks, clips, playhead, duration. Call first!
    - setPlayhead({ time })                 — Move playhead (seconds)
    - setInOutPoints({ inPoint?, outPoint? }) — Set playback/export range

    ### Clip Editing (11)
    - getClipDetails({ clipId })            — Full clip info (analysis, transcript, effects, transform)
    - getClipsInTimeRange({ startTime, endTime, trackType? }) — Find clips in range
    - splitClip({ clipId, splitTime, withLinked? })      — Split clip at time (+ linked audio by default)
    - splitClipEvenly({ clipId, parts, withLinked? })    — Split into N equal parts (+ linked audio)
    - splitClipAtTimes({ clipId, times[], withLinked? }) — Split at multiple times (+ linked audio)
    - deleteClip({ clipId, withLinked? })                — Delete clip (+ linked audio by default)
    - deleteClips({ clipIds[], withLinked? })            — Delete multiple clips (+ linked audio)
    - moveClip({ clipId, newStartTime, newTrackId?, withLinked? }) — Move clip (+ linked audio)
    - trimClip({ clipId, inPoint, outPoint }) — Trim clip source in/out
    - cutRangesFromClip({ clipId, ranges[] }) — Cut out time ranges
    - reorderClips({ clipIds[], withLinked? })           — Reorder clips sequentially (+ linked audio)

    ### Clip Selection (2)
    - selectClips({ clipIds[] })            — Select clips
    - clearSelection()                      — Deselect all

    ### Track Management (4)
    - createTrack({ type })                 — Create 'video' or 'audio' track
    - deleteTrack({ trackId })              — Delete track and its clips
    - setTrackVisibility({ trackId, visible }) — Show/hide video track
    - setTrackMuted({ trackId, muted })     — Mute/unmute audio track

    ### Analysis & Transcript (6)
    - getClipAnalysis({ clipId })           — Get motion/faces/colors analysis
    - getClipTranscript({ clipId })         — Get word-level transcript
    - findSilentSections({ clipId, minDuration? }) — Find speech pauses
    - findLowQualitySections({ clipId, metric?, threshold?, minDuration? }) — Find blurry/dark sections
    - startClipAnalysis({ clipId })         — Start background analysis
    - startClipTranscription({ clipId })    — Start background transcription

    ### Preview & Frame Capture (3)
    - captureFrame({ time? })               — Screenshot as base64 PNG
    - getCutPreviewQuad({ cutTime, frameSpacing? }) — 8-frame grid around cut point
    - getFramesAtTimes({ times[], columns? }) — Capture frames at specific times

    ### Media Panel (8)
    - getMediaItems({ folderId? })          — List files, folders, compositions
    - createMediaFolder({ name, parentFolderId? }) — Create folder
    - renameMediaItem({ itemId, newName })  — Rename item
    - deleteMediaItem({ itemId })           — Delete item
    - moveMediaItems({ itemIds[], targetFolderId? }) — Move items
    - createComposition({ name, width?, height?, frameRate?, duration? }) — New composition
    - openComposition({ compositionId })    — Open composition in timeline
    - selectMediaItems({ itemIds[] })       — Select media items

    ### YouTube / Downloads (4)
    - searchVideos({ query, maxResults?, maxDuration?, minDuration? }) — Search videos (needs Native Helper)
    - listVideoFormats({ url })             — List download formats (needs Native Helper)
    - downloadAndImportVideo({ url, title, formatId?, thumbnail? }) — Download & import
    - getYouTubeVideos()                    — Get current download list

    ### Batch Execution (1)
    - executeBatch({ actions[] })           — Run multiple tools as single undo point
      Each action: { tool: "toolName", args: { ... } }

    ## Typical AI Workflow
    1. Call getTimelineState() to understand the current project
    2. Use getClipDetails() or getClipTranscript() to inspect clips
    3. Edit with split/trim/delete/move tools
    4. Use executeBatch() for multiple operations (single undo point)
    5. Use captureFrame() to visually verify results

    ## Linked Clips
    - Video imports create paired video+audio clips linked via linkedClipId
    - All editing tools support withLinked (default: true) to edit both together
    - Set withLinked: false to edit only the targeted clip independently

    ## Notes
    - All modifying tools create undo/redo history points
    - executeBatch() groups all actions into a single undo point
    - Times are always in seconds (float)
    - The app requires WebGPU — works in Chrome/Edge 113+
    - Native Helper (optional): WebSocket on port 9876, HTTP on port 9877
      Needed for: YouTube downloads, yt-dlp, FFmpeg encode/decode
    ============================================================
    -->

    <!-- Prevent theme flash on load -->
    <script>
      (function() {
        try {
          var settings = JSON.parse(localStorage.getItem('masterselects-settings') || '{}');
          var s = settings.state || settings;
          var theme = s.theme || 'dark';
          if (theme === 'system') {
            theme = window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
          }
          if (theme === 'crazy' || theme === 'custom') {
            theme = 'dark'; // Crazy/Custom themes start from dark base, JS applies colors
          }
          if (theme !== 'dark') {
            document.documentElement.dataset.theme = theme;
          }
        } catch(e) {}
      })();
    </script>
  </head>
  <body>
    <div id="root"></div>

    <!-- AI-readable: structured tool catalog for agents that parse JSON-LD -->
    <script type="application/ld+json">
    {
      "@context": "https://schema.org",
      "@type": "WebApplication",
      "name": "MasterSelects",
      "description": "Professional browser-based video editor with WebGPU rendering, AI-powered editing tools, and 41 programmatic API tools accessible via window.aiTools",
      "applicationCategory": "MultimediaApplication",
      "operatingSystem": "Web Browser (Chrome/Edge 113+ with WebGPU)",
      "url": "https://www.masterselects.com",
      "featureList": [
        "41 AI-controllable tools via window.aiTools.execute(toolName, args)",
        "Timeline editing: getTimelineState, setPlayhead, setInOutPoints",
        "Clip editing: splitClip, splitClipEvenly, splitClipAtTimes, deleteClip, deleteClips, moveClip, trimClip, cutRangesFromClip, reorderClips",
        "Analysis: getClipAnalysis, getClipTranscript, findSilentSections, findLowQualitySections",
        "Frame capture: captureFrame (base64 PNG), getCutPreviewQuad, getFramesAtTimes",
        "Media management: getMediaItems, createMediaFolder, createComposition, openComposition",
        "YouTube integration: searchVideos, listVideoFormats, downloadAndImportVideo",
        "Batch execution: executeBatch for multiple operations with single undo point",
        "WebGPU rendering with 30+ GPU effects",
        "Speech-to-text transcription",
        "Video analysis (motion, focus, brightness, faces)"
      ]
    }
    </script>

    <!-- Visible content for non-JS agents and crawlers -->
    <noscript>
      <h1>MasterSelects — Browser-Based Video Editor</h1>
      <p>Professional video editor running entirely in the browser with WebGPU rendering.</p>

      <h2>AI Tool API (41 tools)</h2>
      <p>After the app loads, all tools are available via <code>window.aiTools</code>:</p>
      <ul>
        <li><code>window.aiTools.execute(toolName, args)</code> — Execute a tool, returns { success, data?, error? }</li>
        <li><code>window.aiTools.list()</code> — Get all tool definitions with parameter schemas</li>
        <li><code>window.aiTools.status()</code> — Quick timeline summary</li>
      </ul>

      <h3>Timeline Tools</h3>
      <ul>
        <li><strong>getTimelineState</strong> — Get tracks, clips, playhead position, duration</li>
        <li><strong>setPlayhead</strong>(time) — Move playhead to time in seconds</li>
        <li><strong>setInOutPoints</strong>(inPoint?, outPoint?) — Set playback/export range</li>
      </ul>

      <h3>Clip Editing Tools</h3>
      <ul>
        <li><strong>getClipDetails</strong>(clipId) — Full clip info with analysis, transcript, effects</li>
        <li><strong>splitClip</strong>(clipId, splitTime, withLinked?) — Split clip at timeline time (+ linked audio by default)</li>
        <li><strong>splitClipEvenly</strong>(clipId, parts, withLinked?) — Split into N equal parts (+ linked audio)</li>
        <li><strong>splitClipAtTimes</strong>(clipId, times[], withLinked?) — Split at multiple times (+ linked audio)</li>
        <li><strong>deleteClip</strong>(clipId, withLinked?) / <strong>deleteClips</strong>(clipIds[], withLinked?) — Delete clips (+ linked audio by default)</li>
        <li><strong>moveClip</strong>(clipId, newStartTime, newTrackId?, withLinked?) — Move clip (+ linked audio)</li>
        <li><strong>trimClip</strong>(clipId, inPoint, outPoint) — Trim source in/out points</li>
        <li><strong>cutRangesFromClip</strong>(clipId, ranges[]) — Cut out time ranges</li>
        <li><strong>reorderClips</strong>(clipIds[], withLinked?) — Reorder clips sequentially (+ linked audio)</li>
      </ul>

      <h3>Analysis &amp; Transcript Tools</h3>
      <ul>
        <li><strong>getClipAnalysis</strong>(clipId) — Motion, faces, colors data</li>
        <li><strong>getClipTranscript</strong>(clipId) — Word-level transcript with timestamps</li>
        <li><strong>findSilentSections</strong>(clipId, minDuration?) — Find speech pauses</li>
        <li><strong>findLowQualitySections</strong>(clipId, metric?, threshold?) — Find blurry/dark sections</li>
        <li><strong>startClipAnalysis</strong>(clipId) — Start background video analysis</li>
        <li><strong>startClipTranscription</strong>(clipId) — Start background transcription</li>
      </ul>

      <h3>Preview &amp; Frame Capture</h3>
      <ul>
        <li><strong>captureFrame</strong>(time?) — Screenshot as base64 PNG</li>
        <li><strong>getCutPreviewQuad</strong>(cutTime) — 8-frame grid around a cut point</li>
        <li><strong>getFramesAtTimes</strong>(times[]) — Capture frames at specific times</li>
      </ul>

      <h3>Media Panel Tools</h3>
      <ul>
        <li><strong>getMediaItems</strong>(folderId?) — List files, folders, compositions</li>
        <li><strong>createMediaFolder</strong>(name) / <strong>renameMediaItem</strong> / <strong>deleteMediaItem</strong></li>
        <li><strong>moveMediaItems</strong>(itemIds[], targetFolderId?) — Move items</li>
        <li><strong>createComposition</strong>(name, width?, height?, frameRate?, duration?)</li>
        <li><strong>openComposition</strong>(compositionId) — Open in timeline</li>
      </ul>

      <h3>YouTube / Download Tools</h3>
      <ul>
        <li><strong>searchVideos</strong>(query, maxResults?, maxDuration?, minDuration?) — Search videos via yt-dlp</li>
        <li><strong>listVideoFormats</strong>(url) — Available download formats</li>
        <li><strong>downloadAndImportVideo</strong>(url, title) — Download and add to timeline</li>
      </ul>

      <h3>Batch Execution</h3>
      <ul>
        <li><strong>executeBatch</strong>(actions[]) — Run multiple tools as single undo point</li>
      </ul>

      <p>This application requires JavaScript and WebGPU (Chrome/Edge 113+).</p>
    </noscript>
    <script>
      // Version check - force reload on version change
      (function() {
        var CURRENT_VERSION = '__APP_VERSION__'; // Replaced by Vite during build
        var storedVersion = localStorage.getItem('app_version');
        if (storedVersion && storedVersion !== CURRENT_VERSION && CURRENT_VERSION !== '__APP_VERSION__') {
          console.log('[Version] Update detected:', storedVersion, '->', CURRENT_VERSION);
          localStorage.setItem('app_version', CURRENT_VERSION);
          // Clear caches and reload
          if ('caches' in window) {
            caches.keys().then(function(names) {
              names.forEach(function(name) { caches.delete(name); });
            });
          }
          window.location.reload(true);
        } else if (CURRENT_VERSION !== '__APP_VERSION__') {
          localStorage.setItem('app_version', CURRENT_VERSION);
        }
      })();

      // This runs BEFORE any modules load
      if (window.location.search.includes('reset=true')) {
        localStorage.clear();
        sessionStorage.clear();
        ['webvj-db', 'webvj-projects', 'webvj-apikeys', 'keyval-store', 'MASterSelectsDB', 'multicam-settings'].forEach(function(name) {
          indexedDB.deleteDatabase(name);
        });
        window.location.href = window.location.origin + window.location.pathname;
      }
    </script>
    <script type="module" src="/src/main.tsx"></script>
  </body>
</html>