CLASSROOMIO-T-95: Upload to S3 and Muse AI

src/routes/+layout.svelte

@@ -39,7 +39,7 @@
   import '../app.postcss';
 
   let supabase = getSupabase();
-  let path = $page.url.pathname.replace('/', '');
+  let path = $page.url?.pathname?.replace('/', '');
   let theme = 'white';
   let skipAuth = false;
 
@@ -261,7 +261,7 @@
     };
   });
 
-  $: path = $page.url.pathname.replace('/', '');
+  $: path = $page.url?.pathname?.replace('/', '');
   $: theme = $appStore.isDark ? 'g100' : 'white';
   $: setOrgBasedOnUrl($page.url.host);
 </script>

src/routes/api/muse/transcript/+server.js

@@ -0,0 +1,42 @@
+import { json } from '@sveltejs/kit';
+import { S3Client, PutObjectCommand, GetObjectCommand } from '@aws-sdk/client-s3';
+
+import {
+  CLOUDFLARE_ACCESS_KEY,
+  CLOUDFLARE_SECRET_ACCESS_KEY,
+  CLOUDFLARE_ACCOUNT_ID,
+  CLOUDFLARE_PUBLIC_ACCOUNT_ID,
+  MUSE_API_KEY
+} from '$env/static/private';
+
+const S3 = new S3Client({
+  region: 'auto',
+  endpoint: `https://${CLOUDFLARE_ACCOUNT_ID}.r2.cloudflarestorage.com`,
+  credentials: {
+    accessKeyId: CLOUDFLARE_ACCESS_KEY,
+    secretAccessKey: CLOUDFLARE_SECRET_ACCESS_KEY
+  }
+});
+
+const downloadTranscript = async () => {};
+
+const uploadTranscriptToS3 = async () => {};
+
+export async function GET({ url }) {
+  const museFid = url.searchParams.get('museFid');
+
+  console.log('museFid');
+
+  // check the transcript table and see if we find a record
+  // if we find one
+  // check if downloaded = true
+  // if true
+  // return the transcript
+  // if false
+  // download the transcript from muse
+  // upload it to S3
+  // return the transcript
+  // if we dont
+
+  return json({ success: true, museFid });
+}

src/routes/courses/[id]/+page.svelte

@@ -3,6 +3,7 @@
   import CourseContainer from '$lib/components/CourseContainer/index.svelte';
   import { setCourse } from '$lib/components/Course/store';
   import { fetchCourse } from '$lib/utils/services/courses';
+  import { browser } from '$app/environment';
 
   export let data;
   const { courseId } = data;
@@ -10,7 +11,7 @@
   let prevCourseId = '';
 
   async function onCourseIdChange(courseId = '') {
-    if (!courseId || prevCourseId === courseId) return;
+    if (!courseId || prevCourseId === courseId || !browser) return;
 
     const { data: _data } = await fetchCourse(courseId);
 

src/routes/courses/[id]/lessons/[...lessonParams]/+page.js

@@ -1,13 +0,0 @@
-export const load = ({ params = { id: '' } }) => {
-  const { id: courseId, lessonParams = [] } = params;
-  const splitparams = lessonParams.split('/');
-  const [lessonId, exerciseRouteName, exerciseId] = splitparams;
-
-  return {
-    courseId,
-    lessonId,
-    exerciseRouteName,
-    exerciseId,
-    isMaterialsTabActive: !exerciseRouteName
-  };
-};

src/routes/courses/[id]/lessons/[...lessonParams]/+page.server.js

@@ -0,0 +1,157 @@
+import { S3Client, PutObjectCommand, GetObjectCommand } from '@aws-sdk/client-s3';
+import FormData from 'form-data';
+import axios from 'axios';
+import { fail } from '@sveltejs/kit';
+import genUniqueId from '$lib/utils/functions/genUniqueId.js';
+import { getSupabase } from '$lib/utils/functions/supabase';
+
+import {
+  CLOUDFLARE_ACCESS_KEY,
+  CLOUDFLARE_SECRET_ACCESS_KEY,
+  CLOUDFLARE_ACCOUNT_ID,
+  CLOUDFLARE_PUBLIC_ACCOUNT_ID,
+  MUSE_API_KEY
+} from '$env/static/private';
+
+// Set the runtime to edge for best performance
+export const config = {
+  runtime: 'edge'
+};
+
+const S3 = new S3Client({
+  region: 'auto',
+  endpoint: `https://${CLOUDFLARE_ACCOUNT_ID}.r2.cloudflarestorage.com`,
+  credentials: {
+    accessKeyId: CLOUDFLARE_ACCESS_KEY,
+    secretAccessKey: CLOUDFLARE_SECRET_ACCESS_KEY
+  }
+});
+
+const supabase = getSupabase();
+
+const uploadToMuse = (s3Data, fileName, lessonId, fileUrl) => {
+  const form = new FormData();
+  form.append('file', s3Data, fileName);
+
+  axios({
+    method: 'POST',
+    url: 'https://api.muse.ai/api/files/upload',
+    data: form,
+    maxContentLength: Infinity,
+    maxBodyLength: Infinity,
+    headers: {
+      ...form.getHeaders(),
+      Key: MUSE_API_KEY
+    }
+  })
+    .then(async function (response) {
+      console.log('Upload to muse complete', response.data);
+
+      const { data: lesson } = await supabase
+        .from('lesson')
+        .select(`*`)
+        .eq('id', lessonId)
+        .single();
+
+      if (lesson) {
+        // Add Muse response to metadata
+        const videos = lesson.videos.map((v) => {
+          if (v.link === fileUrl) {
+            console.log('matches');
+            v.metadata = JSON.parse(JSON.stringify(response.data));
+          }
+          return v;
+        });
+
+        const { error, data } = await supabase
+          .from('lesson')
+          .update({ videos })
+          .eq('id', lessonId)
+          .select();
+        if (error) {
+          console.log('Error updating supabase configs');
+        }
+        console.log('update error', error);
+        console.log('update data', data, data[0].videos);
+      }
+    })
+    .catch(function (error) {
+      console.log('Upload error', error);
+    });
+};
+
+export const load = ({ params = { id: '' } }) => {
+  const { id: courseId, lessonParams = [] } = params;
+  const splitparams = lessonParams.split('/');
+  const [lessonId, exerciseRouteName, exerciseId] = splitparams;
+
+  return {
+    courseId,
+    lessonId,
+    exerciseRouteName,
+    exerciseId,
+    isMaterialsTabActive: !exerciseRouteName
+  };
+};
+
+export const actions = {
+  create: async ({ request }) => {
+    const formData = Object.fromEntries(await request.formData());
+    console.log('formData', formData);
+
+    if (!formData.file?.name || formData.file?.name === 'undefined') {
+      return fail(400, {
+        success: false,
+        message: 'You must provide a file to upload'
+      });
+    }
+
+    const { file, lessonId } = formData;
+    console.log('file', file);
+    console.log('lessonId', lessonId);
+
+    const stream = await file.arrayBuffer();
+    const fileName = `${genUniqueId()}-${file.name}`;
+    const params = {
+      Bucket: 'videos',
+      Key: fileName,
+      Body: stream,
+      ContentLength: stream.length
+    };
+    console.log('params', params);
+
+    let upload;
+
+    const fileUrl = `https://pub-${CLOUDFLARE_PUBLIC_ACCOUNT_ID}.r2.dev/${fileName}`;
+
+    try {
+      upload = await S3.send(new PutObjectCommand(params));
+      // process data.
+    } catch (error) {
+      // error handling.
+      const { requestId, cfId, extendedRequestId } = error.$$metadata;
+      console.error('Error uploading file');
+      console.log({ requestId, cfId, extendedRequestId });
+    } finally {
+      // finally.
+      console.log('File upload complete', upload);
+
+      console.log('\n\nInitilizing Muse Request');
+
+      const data = await S3.send(
+        new GetObjectCommand({
+          Bucket: 'videos',
+          Key: fileName
+        })
+      );
+      // console.log('GetObjectCommand', data);
+      uploadToMuse(data.Body, file.name, lessonId, fileUrl);
+    }
+
+    return {
+      success: true,
+      url: fileUrl,
+      message: 'Uploaded successfully'
+    };
+  }
+};

src/routes/courses/[id]/lessons/[...lessonParams]/+page.svelte

@@ -12,11 +12,17 @@
   import Exercises from '$lib/components/Course/components/Lesson/Exercises/index.svelte';
   import MODES from '$lib/utils/constants/mode.js';
   import { setCourse, course } from '$lib/components/Course/store';
-  import { lesson, handleSaveLesson } from '$lib/components/Course/components/Lesson/store/lessons';
+  import {
+    lesson,
+    handleSaveLesson,
+    uploadCourseVideoStore
+  } from '$lib/components/Course/components/Lesson/store/lessons';
   import { browser } from '$app/environment';
 
   export let data;
 
+  export let form;
+
   let path = '';
   let mode = MODES.view;
   let prevMode = '';
@@ -68,12 +74,14 @@
     mode = mode === MODES.edit ? MODES.view : MODES.edit;
   }
 
-  $: path = $page.url.pathname.replace(/\/exercises[\/ 0-9 a-z -]*/, '');
+  $: path = $page.url?.pathname?.replace(/\/exercises[\/ 0-9 a-z -]*/, '');
 
   $: if (data.courseId && browser) {
     mode = MODES.view;
     fetchReqData(data.lessonId);
   }
+
+  $: $uploadCourseVideoStore.formRes = form;
 </script>
 
 <CourseContainer {isFetching} {path} isExercisePage={!data.isMaterialsTabActive && data.exerciseId}>

src/routes/courses/[id]/submissions/+page.svelte

@@ -293,7 +293,7 @@
                   </a>
                   <a
                     class="flex items-center no-underline hover:underline text-black my-2"
-                    href="{$page.url.pathname.replace('submissions', 'lessons')}/{item.lesson
+                    href="{$page.url?.pathname?.replace('submissions', 'lessons')}/{item.lesson
                       .id}/exercises/{item.exercise.id}"
                   >
                     <p class="dark:text-white text-grey text-sm">