feat(posts): added AI generated chapters using custom RAG. also added default R2 caption selections

Author: tomgobich

app/controllers/ai_videos_controller.ts

@@ -0,0 +1,12 @@
+import aiSearch from '#services/ai_search_service'
+import r2Service from '#services/r2_service'
+import type { HttpContext } from '@adonisjs/core/http'
+
+export default class AiVideosController {
+  async chapters({ params }: HttpContext) {
+    const transcript = await r2Service.getTranscript(params.videoId)
+    const chapters = await aiSearch.chapters(transcript)
+
+    return chapters
+  }
+}

app/services/ai_search_service.ts

@@ -0,0 +1,34 @@
+import env from '#start/env'
+import { Exception } from '@adonisjs/core/exceptions'
+import axios, { AxiosInstance } from 'axios'
+
+class AiSearchService {
+  #accountId = env.get('CLOUDFLARE_ACCOUNT_ID')
+  #token = env.get('AI_SEARCH_KEY')
+  #api: AxiosInstance
+
+  constructor() {
+    if (!this.#accountId || !this.#token) {
+      throw new Exception('Cloudflare account id or AI Search token is missing.')
+    }
+
+    this.#api = axios.create({
+      baseURL: `https://api.cloudflare.com/client/v4/accounts/${this.#accountId}/autorag/rags/adocasts-rag/ai-search`,
+      headers: {
+        'Content-Type': 'application/json',
+        'Authorization': `Bearer ${this.#token}`,
+      },
+    })
+  }
+
+  async chapters(captions: string) {
+    const { data } = await this.#api.post('', {
+      query: `Take the provided SRT subtitles and create as few as possible, high-level, timestamp chapters from them. Between 3 to 8 chapters. The chapters time should only consist of minutes and seconds unless the captions go over an hour. Response should only contain JavaScript parsable JSON in the structure: [{ start: 'mm:ss', end: 'mm:ss', text: 'chapter text' }]. Captions: ${captions}`,
+    })
+
+    return data
+  }
+}
+
+const aiSearch = new AiSearchService()
+export default aiSearch

app/services/r2_service.ts

@@ -0,0 +1,19 @@
+import axios, { AxiosInstance } from 'axios'
+
+class R2Service {
+  #api = axios.create({
+    baseURL: 'https://vid.adocasts.com',
+    headers: {
+      Referer: 'https://adocasts.com',
+    },
+  })
+
+  async getTranscript(videoId: string) {
+    const { data } = await this.#api.get(`/${videoId}/en.srt`)
+    return data as string
+  }
+}
+
+const r2Service = new R2Service()
+
+export default r2Service

inertia/components/FormInput.vue

@@ -17,7 +17,7 @@ const props = withDefaults(
   }
 )
 
-const emits = defineEmits(['update:modelValue'])
+const emits = defineEmits(['update:modelValue', 'blur'])
 
 const inputEl = ref()
 
@@ -39,6 +39,7 @@ defineExpose({ inputEl })
           :type="type"
           :class="{ 'absolute start-2 inset-y-2 w-6 h-6 rounded': type === 'color' }"
           :disabled="disabled"
+          @blur="$emit('blur')"
         />
         <Input
           ref="inputEl"
@@ -47,6 +48,7 @@ defineExpose({ inputEl })
           :disabled="disabled"
           :placeholder="placeholder"
           :required="required"
+          @blur="$emit('blur')"
         />
       </div>
       <Select
@@ -55,6 +57,7 @@ defineExpose({ inputEl })
         ref="inputEl"
         :disabled="disabled"
         :required="required"
+        @blur="$emit('blur')"
       >
         <SelectTrigger>
           <slot name="trigger">
@@ -70,6 +73,7 @@ defineExpose({ inputEl })
         v-model="internalValue"
         ref="inputEl"
         :disabled="disabled"
+        @blur="$emit('blur')"
       />
       <slot v-else-if="type === 'group'" />
       <Input
@@ -80,6 +84,7 @@ defineExpose({ inputEl })
         :disabled="disabled"
         :placeholder="placeholder"
         :required="required"
+        @blur="$emit('blur')"
       />
     </Label>
     <div class="flex items-center justify-between gap-3">

inertia/pages/posts/form.vue

@@ -10,6 +10,7 @@ import States from '#enums/states'
 import VideoTypes, { VideoTypeDesc, VideoTypesOrdered } from '#enums/video_types'
 import { useForm } from '@inertiajs/vue3'
 import { Link } from '@tuyau/inertia/vue'
+import axios from 'axios'
 import {
   BookCheck,
   BookDashed,
@@ -18,9 +19,11 @@ import {
   ChevronsUpDown,
   Plus,
   Trash2,
+  LucideLoader,
 } from 'lucide-vue-next'
 import { DateTime } from 'luxon'
-import { computed } from 'vue'
+import { computed, ref } from 'vue'
+import { toast } from 'vue-sonner'
 import { tuyau } from '~/lib/tuyau'
 import { enumKeys } from '~/lib/utils'
 
@@ -29,6 +32,24 @@ const props = defineProps<{
   taxonomies: TaxonomyDto[]
 }>()
 
+const r2DefaultCaptions = [
+  {
+    type: CaptionTypes.SRT,
+    language: CaptionLanguages.ENGLISH,
+    label: '',
+  },
+  {
+    type: CaptionTypes.SRT,
+    language: CaptionLanguages.SPANISH,
+    label: '',
+  },
+  {
+    type: CaptionTypes.SRT,
+    language: CaptionLanguages.FRENCH,
+    label: '',
+  },
+]
+
 const form = useForm({
   title: props.post?.title ?? '',
   slug: props.post?.slug ?? '',
@@ -63,6 +84,8 @@ const form = useForm({
   taxonomyIds: props.post?.taxonomyIds ?? [],
 })
 
+const isGeneratingChapters = ref(false)
+
 const publishAt = computed(() => {
   const iso = [form.publishAtDate, form.publishAtTime].filter(Boolean).join('T')
   return iso && DateTime.fromISO(iso)
@@ -81,6 +104,29 @@ function secondsToTimecode(seconds: number) {
     .join(':')
 }
 
+async function generateVideoChapters() {
+  if (form.chapters.length || !form.videoUrl) return
+
+  isGeneratingChapters.value = true
+
+  try {
+    const { data } = await axios.post(`/ai/videos/${form.videoUrl}/chapters`)
+
+    if (Array.isArray(data.result.response)) {
+      form.chapters = data.result.response
+
+      toast.success('Chapters generated successfully')
+    } else {
+      toast.error('Chapters were generated successfully, but came back in an unexpected format')
+    }
+  } catch (error) {
+    console.error(error)
+    toast.error('Failed to generate chapters')
+  }
+
+  isGeneratingChapters.value = false
+}
+
 function onSubmit(stateId: States = Number(form.stateId)) {
   const action = form.transform((data) => {
     data.stateId = stateId
@@ -93,6 +139,13 @@ function onSubmit(stateId: States = Number(form.stateId)) {
 
   action.post(tuyau.$url('posts.store'))
 }
+
+function onVideoTypeChanged(videoTypeId: string) {
+  if (form.chapters.length) return
+  if (videoTypeId !== VideoTypes.R2.toString()) return
+
+  form.captions = r2DefaultCaptions.map((r) => ({ ...r }))
+}
 </script>
 
 <template>
@@ -317,6 +370,7 @@ function onSubmit(stateId: States = Number(form.stateId)) {
             v-model="form.videoTypeId"
             placeholder="Have a video? Where is it stored?"
             :errors="form.errors.videoTypeId"
+            @update:modelValue="onVideoTypeChanged"
           >
             <SelectItem v-for="id in VideoTypesOrdered" :key="id" :value="id.toString()">
               {{ VideoTypeDesc[id] }}
@@ -348,6 +402,7 @@ function onSubmit(stateId: States = Number(form.stateId)) {
             v-model="form.videoUrl"
             :max="255"
             placeholder="Enter the R2 Video Id (directory name)"
+            @blur="generateVideoChapters"
           />
 
           <FormInput
@@ -427,7 +482,15 @@ function onSubmit(stateId: States = Number(form.stateId)) {
             v-if="Number(form.videoTypeId) === VideoTypes.R2"
             class="-mx-4 p-4 border border-slate-300 rounded-lg"
           >
-            <legend class="-mx-2 px-2">Chapters</legend>
+            <legend class="-mx-2 px-2">
+              Chapters
+              <span
+                v-show="isGeneratingChapters"
+                class="text-slate-400 inline-flex items-center gap-1.5"
+              >
+                [Generating <LucideLoader class="w-4 h-4 animate-spin" />]
+              </span>
+            </legend>
 
             <div
               v-if="form.chapters"

start/env.ts

@@ -84,4 +84,7 @@ export default await Env.create(new URL('../', import.meta.url), {
   PLOTMYCOURSE_API_KEY: Env.schema.string.optional(),
 
   R2_SIGNING_KEY: Env.schema.string(),
+
+  AI_SEARCH_KEY: Env.schema.string.optional(),
+  CLOUDFLARE_ACCOUNT_ID: Env.schema.string.optional(),
 })

start/routes.ts

@@ -9,6 +9,7 @@
 
 import router from '@adonisjs/core/services/router'
 import { middleware } from '#start/kernel'
+const AiVideosController = () => import('#controllers/ai_videos_controller')
 const TaxonomyContentsController = () => import('#controllers/taxonomy_contents_controller')
 const CouponsController = () => import('#controllers/coupons_controller')
 const PlansController = () => import('#controllers/plans_controller')
@@ -107,4 +108,7 @@ router.group(() => {
   router.post('/coupons', [CouponsController, 'run']).as('coupons.run')
   router.delete('/coupons', [CouponsController, 'clear']).as('coupons.clear')
 
+  //* AI
+  router.post('/ai/videos/:videoId/chapters', [AiVideosController, 'chapters']).as('ai.videos.chapters')
+
 }).middleware([middleware.auth()])