@learnpack/learnpack 5.0.238 → 5.0.244

package/src/commands/serve.ts

@@ -1,6 +1,5 @@
 import { flags } from "@oclif/command"
 
-// import { readDocument } from "../utils/readDocuments"
 import { YoutubeTranscript } from "youtube-transcript"
 import * as express from "express"
 import * as cors from "cors"
@@ -30,6 +29,8 @@ import {
   // makeReadmeReadable,
   generateImage,
   isPackageAuthor,
+  createStructuredPreviewReadme,
+  translateCourseMetadata,
 } from "../utils/rigoActions"
 import * as dotenv from "dotenv"
 import {
@@ -64,15 +65,13 @@ function findLast<T>(
 export const createLearnJson = (courseInfo: FormState) => {
   // console.log("courseInfo to create learn json", courseInfo)
 
-  const expectedPreviewUrl = `https://${slugify(
-    courseInfo.title as string
-  )}.learn-pack.com/preview.png`
+  const expectedPreviewUrl = `https://${courseInfo.slug}.learn-pack.com/preview.png`
   console.log("Preview url in generated learn.json", expectedPreviewUrl)
 
   const language = courseInfo.language || "en"
 
   const learnJson = {
-    slug: slugify(courseInfo.title as string),
+    slug: courseInfo.slug,
     title:
       language === "en" || language === "us" ?
         {
@@ -105,27 +104,6 @@ const uploadFileToBucket = async (
   await fileRef.save(Buffer.from(file, "utf8"))
 }
 
-const uploadImageToBucket = async (
-  bucket: Bucket,
-  url: string,
-  path: string
-) => {
-  const response = await fetch(url)
-  if (!response.ok) {
-    throw new Error(`Failed to download image: ${response.statusText}`)
-  }
-
-  const contentType =
-    response.headers.get("content-type") || "application/octet-stream"
-  const buffer = await response.arrayBuffer()
-
-  const fileRef = bucket.file(path)
-  await fileRef.save(Buffer.from(buffer), {
-    resumable: false,
-    contentType,
-  })
-}
-
 const PARAMS = {
   expected_grade_level: "8",
   max_fkgl: 10,
@@ -135,25 +113,23 @@ const PARAMS = {
 }
 
 export const processImage = async (
-  bucket: Bucket,
-  tutorialDir: string,
   url: string,
   description: string,
-  rigoToken: string
+  rigoToken: string,
+  courseSlug: string
 ) => {
   try {
     // TODO: MAKE THIS ASYNC
     const filename = getFilenameFromUrl(url)
 
-    console.log("🖼️ IMAGE FILENAME", filename)
-    const imagePath = `${tutorialDir}/.learn/assets/${filename}`
-
-    console.log("🖼️ Generating image", imagePath)
+    const webhookUrl = `${process.env.HOST}/webhooks/${courseSlug}/images/${filename}`
 
-    const res = await generateImage(rigoToken, { prompt: description })
-    await uploadImageToBucket(bucket, res.image_url, imagePath)
+    await generateImage(rigoToken, {
+      prompt: description,
+      callbackUrl: webhookUrl,
+    })
 
-    console.log("✅ Image", imagePath, "generated successfully!")
+    // console.log("✅ Image", imagePath, "generated successfully!")
     return true
   } catch {
     return false
@@ -201,7 +177,6 @@ const uploadInitialReadme = async (
 }
 
 const cleanFormState = (formState: FormState) => {
-  // keysToDelete: description, technologies, purpose
   const {
     description,
     technologies,
@@ -217,6 +192,51 @@ const cleanFormState = (formState: FormState) => {
   return rest
 }
 
+const createMultiLangAsset = async (
+  bucket: Bucket,
+  rigoToken: string,
+  bcToken: string,
+  courseSlug: string,
+  courseJson: any,
+  deployUrl: string
+) => {
+  const availableLangs = Object.keys(courseJson.title)
+  console.log("AVAILABLE LANGUAGES to upload asset", availableLangs)
+
+  const all_translations: string[] = []
+
+  for (const lang of availableLangs) {
+    // eslint-disable-next-line no-await-in-loop
+    const indexReadme = await bucket.file(
+      `courses/${courseSlug}/README.${
+        lang === "us" || lang === "en" ? "md" : `${lang}.md`
+      }`
+    )
+    // eslint-disable-next-line no-await-in-loop
+    const [indexReadmeContent] = await indexReadme.download()
+    const indexReadmeString = indexReadmeContent.toString()
+    const b64IndexReadme = Buffer.from(indexReadmeString).toString("base64")
+
+    // eslint-disable-next-line no-await-in-loop
+    const asset = await handleAssetCreation(
+      { token: bcToken, rigobotToken: rigoToken },
+      courseJson,
+      lang,
+      deployUrl,
+      b64IndexReadme,
+      all_translations
+    )
+
+    all_translations.push(asset.slug)
+  }
+  // const languageCodes = new Set(languageCodes)
+  // const asset = await api.createAsset(rigoToken, {
+  //   slug: courseSlug,
+  //   title: courseJson.title,
+  //   description: courseJson.description,
+  // })
+}
+
 async function startExerciseGeneration(
   bucket: Bucket,
   rigoToken: string,
@@ -253,6 +273,27 @@ async function startExerciseGeneration(
   )
 }
 
+async function createInitialReadme(
+  tutorialInfo: string,
+  tutorialSlug: string,
+  rigoToken: string
+) {
+  const webhookUrl = `${process.env.HOST}/webhooks/${tutorialSlug}/initial-readme-processor`
+  console.log("Creating initial readme", webhookUrl)
+  try {
+    const res = await createStructuredPreviewReadme(
+      rigoToken,
+      {
+        tutorial_info: tutorialInfo,
+      },
+      webhookUrl
+    )
+    console.log("Initial readme created", res)
+  } catch (error) {
+    console.error("Error creating initial readme", error)
+  }
+}
+
 const fixPreviewUrl = (slug: string, previewUrl: string) => {
   if (!previewUrl) {
     return null
@@ -482,6 +523,27 @@ export default class ServeCommand extends SessionCommand {
       res.json({ id, status: "SUCCESS" })
     })
 
+    app.post(
+      "/webhooks/:courseSlug/initial-readme-processor",
+      async (req, res) => {
+        const { courseSlug } = req.params
+        const body = req.body
+
+        // Save the file as courses/courseSlug/README.md
+        const filePath = `courses/${courseSlug}/README.${
+          body.parsed.language_code === "us" ||
+          body.parsed.language_code === "en" ?
+            "md" :
+            `${body.parsed.language_code}.md`
+        }`
+        console.log("Saving initial readme to", filePath)
+        await uploadFileToBucket(bucket, body.parsed.content, filePath)
+        console.log("Initial readme saved to", filePath)
+
+        res.json({ status: "SUCCESS" })
+      }
+    )
+
     app.post("/webhooks/:courseSlug/images/:imageId", async (req, res) => {
       const { courseSlug, imageId } = req.params
       const body = req.body
@@ -629,13 +691,7 @@ export default class ServeCommand extends SessionCommand {
           })
           for (const image of imagesArray) {
             // eslint-disable-next-line no-await-in-loop
-            await processImage(
-              bucket,
-              `courses/${courseSlug}`,
-              image.url,
-              image.alt,
-              rigoToken
-            )
+            await processImage(image.url, image.alt, rigoToken, courseSlug)
           }
         }
 
@@ -863,25 +919,34 @@ export default class ServeCommand extends SessionCommand {
 
     app.post("/actions/translate", express.json(), async (req, res) => {
       console.log("POST /actions/translate")
-      const { exerciseSlugs, languages, rigoToken } = req.body
+      const { exerciseSlugs, languages, rigoToken, currentLanguage } = req.body
       const query = req.query
       const courseSlug = query.slug
 
-      console.log("EXERCISE SLUGS", exerciseSlugs)
-      console.log("LANGUAGES", languages)
-      console.log("RIGO TOKEN", rigoToken)
-
       if (!rigoToken) {
         return res.status(400).json({ error: "RigoToken not found" })
       }
 
       const languagesToTranslate: string[] = languages.split(",")
 
+      const course = await bucket
+        .file(`courses/${courseSlug}/learn.json`)
+        .download()
+
+      const courseJson = JSON.parse(course.toString())
+      const languageCodes = new Set()
+
       try {
         await Promise.all(
           exerciseSlugs.map(async (slug: string) => {
-            const readmePath = `courses/${courseSlug}/exercises/${slug}/README.md`
+            const readmePath = `courses/${courseSlug}/exercises/${slug}/README${
+              currentLanguage === "us" || currentLanguage === "en" ?
+                "" :
+                `.${currentLanguage}`
+            }.md`
+
             const readme = await bucket.file(readmePath).download()
+
             await Promise.all(
               languagesToTranslate.map(async (language: string) => {
                 const response = await translateExercise(rigoToken, {
@@ -891,14 +956,98 @@ export default class ServeCommand extends SessionCommand {
                 })
 
                 const translatedReadme = await bucket.file(
-                  `courses/${courseSlug}/exercises/${slug}/README.${response.parsed.output_language_code}.md`
+                  `courses/${courseSlug}/exercises/${slug}/README${
+                    response.parsed.output_language_code === "us" ||
+                    response.parsed.output_language_code === "en" ?
+                      "" :
+                      `.${response.parsed.output_language_code}`
+                  }.md`
                 )
                 await translatedReadme.save(response.parsed.translation)
+
+                languageCodes.add(response.parsed.output_language_code)
               })
             )
           })
         )
 
+        if (languageCodes.has("en")) {
+          languageCodes.delete("en")
+          languageCodes.add("us")
+        }
+
+        const currentLanguages = Object.keys(courseJson.title)
+        for (const languageCode of currentLanguages) {
+          if (languageCodes.has(languageCode)) {
+            languageCodes.delete(languageCode)
+          }
+        }
+
+        if ([...languageCodes].length > 0) {
+          console.log("TRANSLATING COURSE METADATA", languageCodes)
+
+          const translatedCourseMetadata = await Promise.all(
+            [...languageCodes].map(async languageCode => {
+              const result = await translateCourseMetadata(rigoToken, {
+                title: courseJson.title[currentLanguage],
+                description: courseJson.description[currentLanguage],
+                destination_lang_code: languageCode as string,
+              })
+
+              return {
+                languageCode,
+                title: result.parsed.title,
+                description: result.parsed.description,
+              }
+            })
+          )
+
+          for (const metadata of translatedCourseMetadata) {
+            courseJson.title[metadata.languageCode as string] = metadata.title
+            courseJson.description[metadata.languageCode as string] =
+              metadata.description
+          }
+
+          await uploadFileToBucket(
+            bucket,
+            JSON.stringify(courseJson),
+            `courses/${courseSlug}/learn.json`
+          )
+
+          const previewReadme = await bucket.file(
+            `courses/${courseSlug}/README${
+              currentLanguage === "us" || currentLanguage === "en" ?
+                "" :
+                `.${currentLanguage}`
+            }.md`
+          )
+          const [previewReadmeContent] = await previewReadme.download()
+          const previewReadmeContentString = previewReadmeContent.toString()
+
+          await Promise.all(
+            [...languageCodes].map(async languageCode => {
+              const translatedPreviewReadme = await translateExercise(
+                rigoToken,
+                {
+                  text_to_translate: previewReadmeContentString,
+                  output_language: languageCode as string,
+                  exercise_slug: "preview-readme",
+                }
+              )
+
+              await bucket
+                .file(
+                  `courses/${courseSlug}/README${
+                    languageCode === "us" || languageCode === "en" ?
+                      "" :
+                      `.${languageCode}`
+                  }.md`
+                )
+                .save(translatedPreviewReadme.parsed.translation)
+            })
+          )
+        }
+
         return res.status(200).json({ message: "Translated exercises" })
       } catch (error) {
         console.log(error, "ERROR")
@@ -907,6 +1056,8 @@ export default class ServeCommand extends SessionCommand {
     })
 
     app.delete("/exercise/:slug/delete", async (req, res) => {
+      console.log("DELETE /exercise/:slug/delete")
+
       const { slug } = req.params
       const query = req.query
       const courseSlug = query.slug
@@ -960,13 +1111,17 @@ export default class ServeCommand extends SessionCommand {
         res.json(sidebar)
       } catch (error: any) {
         if (error.code === 404) {
-          console.log("SIDEBAR FILE NOT FOUND", courseSlug)
-
           const { exercises } = await buildConfig(bucket, courseSlug)
 
           const exerciseSlugsArray = exercises.map(exercise => exercise.slug)
           const sidebar = await createInitialSidebar(exerciseSlugsArray)
 
+          await uploadFileToBucket(
+            bucket,
+            JSON.stringify(sidebar),
+            `courses/${courseSlug}/.learn/sidebar.json`
+          )
+
           if (rigoToken) {
             const { fixedSidebar } = await checkAndFixSidebarPure(
               sidebar,
@@ -981,20 +1136,9 @@ export default class ServeCommand extends SessionCommand {
               )
             }
 
-            await uploadFileToBucket(
-              bucket,
-              JSON.stringify(sidebar),
-              `courses/${courseSlug}/.learn/sidebar.json`
-            )
             return res.status(200).json(fixedSidebar)
           }
 
-          await uploadFileToBucket(
-            bucket,
-            JSON.stringify(sidebar),
-            `courses/${courseSlug}/.learn/sidebar.json`
-          )
-
           return res.status(200).json(sidebar)
         }
 
@@ -1003,35 +1147,6 @@ export default class ServeCommand extends SessionCommand {
       }
     })
 
-    // app.get("/test/:slug", (req, res) => {
-    //   emitToCourse(req.params.slug, "course-creation", {
-    //     lesson: "000-welcome-to-bird-domestication",
-    //     status: "generating",
-    //     log: "Hello",
-    //   })
-    //   emitToCourse(req.params.slug, "course-creation", {
-    //     lesson: "000-welcome-to-bird-domestication",
-    //     status: "generating",
-    //     log: "Hello",
-    //   })
-    //   emitToCourse(req.params.slug, "course-creation", {
-    //     lesson: "000-welcome-to-bird-domestication",
-    //     status: "generating",
-    //     log: "Hello broder",
-    //   })
-    //   emitToCourse(req.params.slug, "course-creation", {
-    //     lesson: "000-welcome-to-bird-domestication",
-    //     status: "done",
-    //     log: "Hello broder",
-    //   })
-    //   emitToCourse(req.params.slug, "course-creation", {
-    //     lesson: "other",
-    //     status: "generating",
-    //     log: "Hello",
-    //   })
-    //   res.send({ message: "Course creation started" })
-    // })
-
     app.get("/technologies", async (req, res) => {
       console.log("GET /technologies")
 
@@ -1071,7 +1186,7 @@ export default class ServeCommand extends SessionCommand {
         return res.status(400).json({ error: "Missing tokens" })
       }
 
-      const courseSlug = slugify(syllabus.courseInfo.title)
+      const courseSlug = syllabus.courseInfo.slug
 
       const tutorialDir = `courses/${courseSlug}`
       const learnJson = createLearnJson(syllabus.courseInfo)
@@ -1161,9 +1276,15 @@ export default class ServeCommand extends SessionCommand {
         lastResult
       )
 
+      await createInitialReadme(
+        JSON.stringify(syllabus.courseInfo),
+        courseSlug,
+        rigoToken
+      )
+
       return res.json({
         message: "Course created",
-        slug: slugify(syllabus.courseInfo.title),
+        slug: syllabus.courseInfo.slug,
       })
     })
 
@@ -1331,12 +1452,6 @@ export default class ServeCommand extends SessionCommand {
           selectedLang = availableLangs[0]
         }
 
-        console.log(config.description, "CONFIG DESCRIPTION")
-        // console.log(availableLangs, "AVAILABLE LANGs")
-        // console.log(selectedLang, "SELECTED LANG")
-        // console.log(title, "TITLE")
-
-        // 5) Inyectar placeholders en index.html
         const idxTpl = fs.readFileSync(path.join(uiSrc, "index.html"), "utf-8")
         const idxHtml = idxTpl
           .replace(/{{title}}/g, title)
@@ -1403,20 +1518,22 @@ export default class ServeCommand extends SessionCommand {
             {
               headers: {
                 ...form.getHeaders(),
-                Authorization: `Token ${rigoToken}`,
+                Authorization: `Token ${rigoToken.trim()}`,
               },
             }
           )
 
-          await handleAssetCreation(
-            { token: bcToken, rigobotToken: rigoToken },
+          await createMultiLangAsset(
+            bucket,
+            rigoToken,
+            bcToken,
+            slug,
             fullConfig.config,
-            selectedLang,
             rigoRes.data.url
           )
 
           rimraf.sync(tmpRoot)
-
+          console.log("RigoRes", rigoRes.data)
           return res.json({ url: rigoRes.data.url })
         })
 

package/src/creator/src/App.tsx

@@ -26,6 +26,7 @@ import ResumeCourseModal from "./components/ResumeCourseModal"
 import { possiblePurposes, PurposeSelector } from "./components/PurposeSelector"
 import { useTranslation } from "react-i18next"
 import NotificationListener from "./components/NotificationListener"
+import { slugify } from "./utils/creatorUtils"
 
 function App() {
   const navigate = useNavigate()
@@ -410,7 +411,8 @@ function App() {
                   lessons,
                   courseInfo: {
                     ...formState,
-                    title: fixTitleLength(res.parsed.title),
+                    title: res.parsed.title,
+                    slug: slugify(fixTitleLength(res.parsed.title)),
                     description: res.parsed.description,
                     language:
                       res.parsed.languageCode || formState.language || "en",

package/src/creator/src/components/NotificationListener.tsx

@@ -13,7 +13,7 @@ const NotificationListener: React.FC<NotificationListenerProps> = ({
   onNotification,
 }) => {
   useEffect(() => {
-    console.log("NOTIFICATION ID listening", notificationId)
+
     if (!notificationId) return
 
     socketClient.connect()

package/src/creator/src/components/syllabus/SyllabusEditor.tsx

@@ -13,7 +13,6 @@ import {
   // reWriteTitle,
   useConsumableCall,
   isValidRigoToken,
-  fixTitleLength,
 } from "../../utils/lib"
 
 import Loader from "../Loader"
@@ -96,25 +95,23 @@ const SyllabusEditor: React.FC = () => {
       return
     }
 
-    let slug = slugify(syllabus.courseInfo.title)
-    let newTitle = syllabus.courseInfo.title
-    let isAvailable = await isSlugAvailable(slug)
+    let newSlug = syllabus.courseInfo.slug
+    let isAvailable = await isSlugAvailable(syllabus.courseInfo.slug)
 
     while (!isAvailable) {
-      if (newTitle.length > 50) {
-        newTitle = newTitle.slice(0, 44)
+      if (newSlug.length > 50) {
+        newSlug = newSlug.slice(0, 44)
       }
-      newTitle = newTitle + "-" + randomUUID()
-      newTitle = newTitle.slice(0, 50)
-      slug = slugify(newTitle)
-      isAvailable = await isSlugAvailable(slug)
+      newSlug = newSlug + "-" + randomUUID()
+      newSlug = newSlug.slice(0, 50)
+      isAvailable = await isSlugAvailable(newSlug)
     }
 
     push({
       ...syllabus,
       courseInfo: {
         ...syllabus.courseInfo,
-        title: newTitle,
+        slug: newSlug,
       },
     })
   }
@@ -230,6 +227,8 @@ const SyllabusEditor: React.FC = () => {
 
   if (!syllabus) return null
 
+  console.log(syllabus.courseInfo)
+
   return isGenerating ? (
     <>
       <Loader
@@ -253,8 +252,7 @@ It may take a moment..."
             lessons: lessons,
             courseInfo: {
               ...syllabus.courseInfo,
-              title:
-                fixTitleLength(res.parsed.title) || syllabus.courseInfo.title,
+              title: res.parsed.title || syllabus.courseInfo.title,
               description:
                 res.parsed.description || syllabus.courseInfo.description,
               language:

package/src/creator/src/utils/rigo.ts

@@ -15,12 +15,14 @@ export const publicInteractiveCreation = async (
   publicRequest: boolean = true
 ): Promise<any | null> => {
   try {
-    const randomUID = randomUUID(10)
+    const randomUID = randomUUID(15)
     const webhookUrl = `${
       DEV_MODE
         ? "https://9cw5zmww-3000.use2.devtunnels.ms"
         : window.location.origin
+      // "https://9cw5zmww-3000.use2.devtunnels.ms"
     }/notifications/${randomUID}`
+
     const response = await axios.post(
       `${RIGOBOT_HOST}/v1/prompting${
         publicRequest ? "/public" : ""
@@ -42,7 +44,7 @@ export const publicInteractiveCreation = async (
     return { res: response.data, notificationId: randomUID }
   } catch (error: unknown) {
     const err = error as AxiosError
-    console.log("error", err)
+    console.log("error trying to create course", err)
 
     if (err.response?.status === 403) {
       toast.error("You've reached the limit. Please log in to continue.")

package/src/creator/src/utils/store.ts

@@ -11,6 +11,7 @@ export type FormState = {
   hasContentIndex: boolean
   contentIndex: string
   purpose: string
+  slug: string
   language?: string
   isCompleted: boolean
   variables: string[]
@@ -85,6 +86,7 @@ const useStore = create<Store>()(
       formState: {
         description: "",
         duration: 0,
+        slug: "",
         hasContentIndex: false,
         contentIndex: "",
         purpose: "",
@@ -119,6 +121,7 @@ const useStore = create<Store>()(
       resetFormState: () =>
         set({
           formState: {
+            slug: "",
             currentStep: "description",
             description: "",
             duration: 0,
@@ -169,7 +172,7 @@ const useStore = create<Store>()(
           formState: {
             description: "",
             duration: 0,
-
+            slug: "",
             language: "en",
             technologies: [],
             hasContentIndex: false,