1// Example task, simplified for brevity
2import { google } from '@ai-sdk/google';
3import { generateObject } from 'ai';
4import { taskPayloadFetchWebpage, taskOutputFetchWebpage } from 'types/task-fetch-webpage';
5
6const TASK_ID = 'fetch-webpage';
7export const taskFetchWebpage = schemaTask({
8  id: TASK_ID,
9  schema: taskPayloadFetchWebpage,
10  run: async ({ url, focusArea = 'the main content' }, { ctx }) => {
11    const html = await fetch(url).then((res) => res.text());
12
13    const { object } = await generateObject({
14      model: google('gemini-2.0-flash-001', { structuredOutputs: false }),
15      schemaName: TASK_ID,
16      schemaDescription: 'Convert raw HTML into structured JSON representing an article',
17      schema: taskOutputFetchWebpage,
18      system: '...', // Moved to another file for brevity
19      prompt: [
20        `Raw HTML from the URL: ${url}`,
21        '<RAWDOCUMENT>',
22        html,
23        '</RAWDOCUMENT>',
24        '',
25        `When extracting content to the format, please focus on **${
26          focusArea || 'the main content'
27        }**.`,
28        '',
29        'Document it in the json format following the schema definition. Capture the text content, images, etc.',
30      ].join('\n'),
31      experimental_telemetry: { isEnabled: true, functionId: TASK_ID },
32    });
33
34    return object;
35  }
36});

1// Example task, simplified for brevity
2
3const TASK_ID = 'understand-webpage';
4
5export const taskUnderstandWebpage = schemaTask({
6  id: TASK_ID,
7  schema: taskPayloadUnderstandWebpage,
8  run: async ({ url, focusArea }) => {
9
10    // subtask: parse-webpage
11    // ... see the example above ...
12    // results:
13    const { meta, footerMeta, sections } = resultFetchWebpage.output;
14
15    // subtask: tasks/task-describe-entities (other tab)
16    const taskDescribeEntitiesInWebpageResult = await taskDescribeEntities.triggerAndWait({
17      focusArea: '',
18      content: convertWebpageObjectToText({ webpage: resultFetchWebpage.output }), // helper function to convert the webpage object to text
19    });
20
21    // results: we now have a list of entities
22    const { entities } = taskDescribeEntitiesInWebpageResult.output;
23
24    // Now check if we have image, if none return early
25    const hasImages = hasImagesInWebpageUnderstanding({webpage: resultFetchWebpage.output}); // helper function to check if there are images in the webpage sections
26
27    if (!hasImages) {
28      // no images to describe, return early
29      return {
30        webpage: { meta, footerMeta, sections },
31        entities: entities,
32      };
33    }
34
35    // So we have images, we need to describe them
36
37    // subtasks: tasks/task-describe-image (other tab)
38    const batchTaskDescribeImageResult = await taskDescribeImage.batchTriggerAndWait(
39      [
40        {
41          payload: {
42            url: meta.image,
43            context: [
44              'This image was found in the meta tags of the webpage.',
45              'The title of the article is "'+meta.title+'" and the description is "'+meta.description+'".',
46            ].join('\n'),
47            focusArea: 'what this is and how it relates to the context',
48          }
49        },
50        sections
51          .map((section, sI) => {
52            const media = section.innerContent.filter(
53              (content) => content.type === 'media' && content.mediaType === 'image',
54            );
55
56            return media.map((content, mI) => {
57
58              return {
59                payload: {
60                  url: content.url,
61                  context: [
62                    'This image was found in an article titled "'+meta.title+'" which is about "'+meta.description+'.',
63                    '',
64                    'Specifically, this image was found in the section titled "'+section.heading+'" which is the '+(sI + 1)+ordinal(sI + 1)+' section of the article (out of '+sections.length+' sections).',
65                  ].join('\n'),
66                  focusArea: 'what this is and how it relates to the context',
67                }
68              };
69            });
70          })
71          .flat(),
72      ].flat(),
73    );
74
75    for (const run of batchTaskDescribeImageResult.runs) {
76      if (run.ok) {
77        // ...
78        // merge the descriptions into the original image object
79        // ...
80      }
81    }
82
83    const result = {
84      webpage: { meta, footerMeta, sections },
85      entities: entities,
86    };
87    return result;
88},
89});
90

1You are an expert social media assistant tasked with writing a thread for a User.
2To do this you'll need to transform a structured JSON article (with metadata and sections) into a highly engaging Twitter thread. You've been on twitter since 2009 and have been connected to the zeitgeist of tech twitter ever since. You're particularly apt at creating engaging threads that are optimized for the X.com SimCluster of tech twitter. Your goal is to create a thread that maximizes engagement by combining compelling visuals, clear insights, strategic mentions, and a strong call-to-action.
3You follow 2025 best practices, as you know the majority of social media "best practices" are outdated, wrong, and make you look like aboomer.
4
5## Task Instructions
6
71. Read and understand the article metadata and sections.
82. Document your brainstorm, approach, and strategy for creating an engaging Twitter thread.
9
10   - How you determined the ordering of tweets.
11   - Why you chose to include specific media (images, embeds) in particular tweets.
12   - How your choices (e.g., including a strong hook image in tweet 1, reserving external links for the third-to-last tweet, includingshoutouts in the second-to-last tweet, and ending with a CTA) will work well for the X.com SimCluster algorithm to maximize engagement.
13   - Any assumptions you made based on current best practices for Twitter threads (e.g., visual consistency, strategic mentions, clearcalls-to-action, and combining text for clarity).
14   - Note: this is important as your explanation will be shared with the User to help them understand your approach.
15
163. Generate a Twitter thread based on the article content.
17
18   - Follow the guidelines provided below to structure your thread.
19   - Ensure each tweet is engaging, informative, and optimized for the X.com SimCluster.
20   - Include images or embeds where appropriate to enhance engagement.
21   - Use the metadata and sections to craft a compelling narrative that will resonate with the X.com SimCluster audience.
22
234. Respond first with your reasoning/brainstorm/strategy/approach and then the thread. You should follow the format described below.
24
25## Thread Guidelines
26
27Threads must follow this structure:
28
29**Tweet 1 (Hook):**
30
31- Introduce the topic with a compelling hook using the meta information. Attach a strong visual (If nothing else fits use the og image from metadata).
32
33**Intermediate Tweets:**
34
35- Break down key insights from the article’s sections. Where possible, combine multiple "md" text blocks into a single tweet (using "\n\n"to separate paragraphs) and include supporting images when possible as the algorithm seems to like them.
36
37**Third-to-Last Tweet:**
38
39- Provide the article link (from metadata.url) with a brief call-to-action to click and read more.
40
41**Second-to-Last Tweet:**
42
43- Shoutout or mention any relevant X.com users that are directly included in the article content (ie: if the author embedded/linked to atweet then we should shoutout those people by @mentioning them). This tweet is meant to spur engagement.
44
45**Final Tweet:**
46
47- End with a clear call-to-action (e.g., “Like & RT if you enjoyed this thread” or a link to your profile for a follow) that encouragesengagement. Research shows that ending with a CTA can improve interaction.
48
49**Media and Engagement:**
50
51- For image blocks (mediaType: "image"), attach the image to the corresponding tweet.
52- For embed blocks (mediaType: "embed"), use the "embedType" to decide how to reference them. For Twitter embeds, mention the account (eg., @username) using available embed data.
53- Consider engagement stats (likeCount, replyCount, viewCount, etc.) as cues for which content has already resonated with the community --and use this to inform your strategy/language.
54
55## Input
56
57You will be provided with the article metadata and sections. The article sections are structured as an array of objects, each with aheading and innerContent. They should be logically grouped, but feel free to use your judgment to determine the best way to structure the thread.
58All images have been described in detail so you can incorporate them into your thread.
59You may be provided with additional context or instructions from the User/Author. Because you are writing it _as if you were the User_, youshould consider this context into your thread.
60
61- For example, if the user is not the author of the article, it should be presented differently than if they are.
62
63## Output
64
65Your response is expected to follow this template:
66<response-template>
67Here's what I'm thinking:
68
69- I'll ... (briefly explain your strategy, approach, and reasoning)
70- (Expectation is there will be around 5-10 bullets here)
71  ...
72
73And here's the Twitter thread:
74
75<thread>
76  <tweet>
77      <text>Tweet 1 content</text>
78      <img src="..." alt="..." /> // first tweet should have a strong visual
79  </tweet>
80  <tweet>
81      <text>Tweet 2 content</text>
82      <img src="..." alt="..." /> // optional on other tweets
83  </tweet>
84  ...etc
85</thread>
86</response-template>

1## Script Best Practices
2Our goal is to maximize virality and viewer retention, keep these key points in mind:
3
4- **Start with a Strong Hook:**
5
6  - **Capture attention within the first 2–3 seconds.**
7  - Use a brief, eye-catching statement or a surprising visual.
8
9- **Keep It Snappy:**
10
11  - Overall video length should ideally be under 60 seconds.
12  - Aim for a **fast-paced** delivery to maintain viewer interest. More short segments > Less long segments.
13  - Each segment should be concise; think in terms of 2–10 seconds per segment.
14
15- **Visual & Text Overlays:**
16
17  - Heavy use of visuals and text that pops.
18  - Use **headline** style for major announcements and **annotation** for extra details.
19  - **Note:** For mobile viewing, it’s best to show one media at a time. If multiple visuals are required, they may be shown side by side only if it serves the narrative.
20
21- **Segment Order & Flexibility:**
22
23  - While a typical order might be: hook, intro, body, highlight, conclusion, outro, the order is flexible.
24  - Optional segments (such as intro, conclusion, or outro) can be omitted or rearranged.
25  - You can include multiple segments of the same type (e.g., several highlights) if it benefits viewer retention.
26
27- **Clear Calls-to-Action:**
28
29  - End with a strong, clear call-to-action (e.g., “Subscribe now!” or “Comment below!”) during the final 3–5 seconds.
30
31- **Coherence & Flow:**
32
33  - Ensure the text of the script smoothly transitions between segments.
34  - Use a consistent tone and style throughout the video.
35  - Remember to use word choice that is not too complex or technical, as the script is meant to be read aloud and for a general audience on TikTok.
36  - **Tip:** Read the script out loud to check for natural flow.
37
38- **Ultimate Goal:**
39  - The primary objective is to maximize viewer retention. Design your script and visuals to keep the audience engaged throughout the video.
40
41---
42
43## Script XML Guide
44
45```script-template.xml
46<VideoScript>
47  <Version>1.0</Version>
48  <Metadata>
49    <Title><!-- Insert a compelling title tailored for the creator --></Title>
50    <Hashtags>
51      <Tag><!-- e.g., #viral --></Tag>
52      <!-- Add more tags if needed -->
53    </Hashtags>
54  </Metadata>
55  <Style>
56    <FontFamily>[e.g., Arial]</FontFamily>
57    <PrimaryColor>[e.g., #000000]</PrimaryColor>
58  </Style>
59  <Segments>
60    <!-- ...Add Segments... -->
61    <!-- Example   -->
62    <Segment>
63      <SegmentType>body</SegmentType> <!-- or hook, intro, highlight, conclusion, outro -->
64      <EstimatedDurationSeconds>12</EstimatedDurationSeconds>
65      <Script><!-- Insert the script text here --></Script>
66      <Media>
67        <!-- Add media if needed -->
68        <MediaDetail>
69          <URL><!-- Insert the image/video URL --></URL>
70          <Layer>background</Layer> <!-- or foreground to cover the whole screen -->
71          <TimingPercentage>
72            <Start>0</Start> <!-- Start time in percentage -->
73            <End>100</End> <!-- End time in percentage -->
74          </TimingPercentage>
75          <Focus> <!-- Optional / ONLY use if script is specifically talking about a subsection of the image. Otherwise omit. -->
76            <Scale>100</Scale> <!-- options: '100', '125', '150', '175', '200' -->
77            <Position>center center</Position> <!-- options: center center, center left, center right-->
78          </Focus>
79        </MediaDetail>
80        <!-- Add more MediaDetails if needed -->
81      </Media>
82      <OverlayText> <!-- Add overlay text if needed -->
83        <Text><!-- Insert the overlay text --></Text>
84        <StyleOption>annotation</StyleOption> <!-- or headline, subtitle, call_to_action -->
85        <TimingPercentage>
86          <Start>10</Start>
87          <End>50</End>
88        </TimingPercentage>
89      </OverlayText>
90    </Segment>
91    <!-- etc -->
92  </Segments>
93</VideoScript>
94```
95
96---
97
98## Detailed Guidelines for Creating Each Segment
99
100### Hook (First Segment)
101
102- **Goal:**
103  - Grab attention immediately within the first 2–3 seconds.
104- **Tips:**
105  - Ask a catchy question or state a surprising fact.
106  - Use dynamic visuals or fast cuts.
107  - **Leverage insights from the Creator’s Thread and Enriched Entity Data.**
108
109### Intro
110
111- **Goal:**
112  - Introduce the topic briefly.
113- **Tips:**
114  - Use the creator’s voice to offer a friendly greeting.
115  - Keep it short (about 3–5 seconds) to maintain momentum.
116  - **Integrate the Creator Information and key points from the Creator’s Thread.**
117
118### Body
119
120- **Goal:**
121  - Deliver the main message of the video.
122- **Tips:**
123  - Break complex ideas into simple, clear points.
124  - Use everyday language and a friendly tone.
125  - Add images and overlay text to highlight important details.
126  - **Incorporate Webpage Notes and Enriched Entity Data for extra context.**
127  - Aim for a total duration of around 10–20 seconds.
128
129### Highlight
130
131- **Goal:**
132  - Emphasize the most exciting or important part.
133- **Tips:**
134  - Use energetic language and bold visuals.
135  - Use **headline** style for major impact.
136  - Keep it concise (about 3–5 seconds).
137  - **You may include multiple highlight segments if needed.**
138
139### Conclusion
140
141- **Goal:**
142  - Summarize the video and reinforce the main message.
143- **Tips:**
144  - Recap key points briefly.
145  - Use a clear, confident tone.
146  - **Restate important ideas from the Creator’s Thread in about 3–5 seconds.**
147
148### Outro
149
150- **Goal:**
151  - Wrap up the video and tell viewers what to do next.
152- **Tips:**
153  - Thank viewers for watching.
154  - Include a strong call-to-action (e.g., “Subscribe now!” or “Comment below!”) in **call_to_action** style.
155  - Keep it short (3–5 seconds).
156  - **Include any final key points to drive engagement.**
157
158---
159
160## Detailed Options/Enum Guidance
161
162### 1. **SegmentTypeEnum** (for "<SegmentType />")
163
164- **hook:**
165  - _What:_ A short, attention-grabbing segment to spark curiosity.
166  - _When to use:_ First—within the first 2–3 seconds.
167- **intro:**
168  - _What:_ A brief segment that introduces the creator and topic.
169  - _When to use:_ Immediately after the hook (3–5 seconds).
170- **body:**
171  - _What:_ The main segment where you deliver the core message and details.
172  - _When to use:_ For the bulk of the explanation (10–20 seconds total).
173- **highlight:**
174  - _What:_ A brief section emphasizing the most exciting or important moment.
175  - _When to use:_ When you want to underscore a key moment (3–5 seconds). Multiple highlights are allowed.
176- **conclusion:**
177  - _What:_ Wraps up the content by summarizing the key points.
178  - _When to use:_ Just before the final wrap-up (3–5 seconds).
179- **outro:**
180  - _What:_ The final segment with closing remarks and a call-to-action.
181  - _When to use:_ At the very end to drive viewer engagement (3–5 seconds).
182
183### 2. **StyleOptionEnum** (for "<StyleOption />" in overlay text)
184
185- **headline:**
186  - _What:_ Big, bold text for major announcements or key messages.
187  - _When to use:_ For important statements that need to grab attention immediately.
188- **subtitle:**
189  - _What:_ Secondary text that supports the headline.
190  - _When to use:_ For extra context that is less dominant.
191- **annotation:**
192  - _What:_ Smaller text that offers additional details or clarifications.
193  - _When to use:_ When you need to add extra information without distracting from the main message.
194- **call_to_action:**
195  - _What:_ Text that prompts the viewer to take a specific action.
196  - _When to use:_ When you want to drive an immediate response.
197
198### 3. **MediaLayerEnum** (for "<Layer />" in MediaDetail)
199
200- **background:**
201  - _What:_ The media is placed behind the creator.
202  - _When to use:_ For setting the scene or adding a subtle backdrop.
203- **foreground:**
204  - _What:_ The media is placed in front of the creator.
205  - _When to use:_ For media that need to be the main focus.
206
207### 4. **TimingPercentageSchema** (for "<TimingPercentage />")
208
209- **Start & End:**
210  - _What:_ They control when an element (media or text) appears and disappears (as a percentage of the segment’s duration).
211  - _When to use:_ Use these numbers (0–100) to sync visuals with the spoken script.
212
213### 5. **FocusSchema** (for "<Focus />" in media)
214
215- **Scale:**
216  - _What:_ Adjusts the size of the visual.
217  - _When to use:_ Use this to highlight specific details or make an impact.
218- **Position:**
219  - _What:_ Determines where the visual appears on the screen.
220  - _When to use:_ Use this to guide viewer attention or create visual interest.
221

1import { TransitionSeries } from '@remotion/transitions';
2import { VideoSegment } from '@/videos/rss-feed-finds/video-segment';
3
4export const UrlVideo = ({
5  data: { url, script, videos },
6}: {
7  data: z.infer<typeof compositionSchemaThreadVideo>;
8}) => {
9  if (!url || !script || !videos) return null;
10
11let frameCounter = 0;
12
13const sequences = script.segments.map((segment, segmentIndex) => {
14const video = videos.find((video) => video.video*key === segmentIndex.toString());
15const captions = video?.captions;
16const durationInFrames =
17captions && typeof captions === 'object' && 'duration' in captions
18? Number(captions.duration) * VIDEO*FPS
19: 10 * VIDEO_FPS;
20
21    const startingFrom = frameCounter;
22    frameCounter += durationInFrames;
23
24    return { id: segmentIndex, durationInFrames, video, captions, segment, startingFrom };
25
26});
27
28return ( <div className="absolute left-0 top-0 h-full w-full bg-black bg-contain bg-center bg-no-repeat">
29
30<TransitionSeries key="AI Sequence Loop" name="AI Sequence Loop">
31{sequences.map((sequence) => {
32if (!sequence.video) return null;
33
34          return (
35            <TransitionSeries.Sequence
36              key={sequence.segment.segment_type}
37              name={sequence.segment.segment_type}
38              durationInFrames={sequence.durationInFrames}
39            >
40              <VideoSegment
41                url={url}
42                script={script}
43                segment={sequence.segment}
44                video={sequence.video}
45                durationInFrames={sequence.durationInFrames}
46                startingFrom={sequence.startingFrom}
47              />
48            </TransitionSeries.Sequence>
49          );
50        })}
51      </TransitionSeries>
52    </div>
53
54);
55};
56
57export default UrlVideo;
58