POC - AWS Bedrock

package.json

@@ -76,6 +76,7 @@
   },
   "dependencies": {
     "@ark-ui/react": "^4.1.2",
+    "@aws-sdk/client-bedrock-runtime": "^3.670.0",
     "@dnd-kit/core": "^6.0.8",
     "@dnd-kit/modifiers": "^6.0.1",
     "@dnd-kit/sortable": "^7.0.2",

src/components/LLM/helpers.ts

@@ -0,0 +1,50 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+export const claudeHaikuDefaults = { top_p: 0.7, top_k: 100, temperature: 0.9 };
+
+interface modelProps {
+  prompt: string;
+  max_tokens?: number;
+}
+
+export const invokeModel = async ({ prompt, max_tokens = 2000, ...rest }: modelProps) => {
+  if (!prompt) {
+    console.error("No prompt provided to invokeModel");
+    return null;
+  }
+  const response = await fetch("/invoke-model", {
+    method: "POST",
+    headers: {
+      "Content-Type": "application/json",
+    },
+    body: JSON.stringify({
+      prompt: prompt,
+      max_tokens: max_tokens,
+      ...rest,
+    }),
+  });
+
+  if (!response.ok) {
+    console.error("Failed to get a response from the model");
+    return null;
+  }
+
+  const responseBody = await response.json();
+  return removeConfirmationSentence(responseBody.content[0].text);
+};
+
+export const getTextFromHTML = (html: string) => {
+  const parser = new DOMParser();
+  const doc = parser.parseFromString(html, "text/html");
+  return doc.body.textContent || "";
+};
+
+const removeConfirmationSentence = (text: string) => {
+  return text.includes(":") ? text.split(/:\s*\n/)[1] : text;
+};

src/components/SlateEditor/PlainTextEditor.tsx

@@ -74,7 +74,7 @@ const PlainTextEditor = forwardRef<HTMLTextAreaElement, Props>(
     const { status, setStatus } = useFormikContext<ArticleFormType>();
 
     useEffect(() => {
-      if (status?.status === "revertVersion") {
+      if (status?.status === "revertVersion" || status?.status === "acceptGenerated") {
         ReactEditor.deselect(editor);
         editor.children = value;
         setStatus((prevStatus: FormikStatus) => ({

src/components/SlateEditor/plugins/framedContent/SlateFramedContent.tsx

@@ -6,19 +6,21 @@
  *
  */
 
-import { useMemo } from "react";
+import escapeHtml from "escape-html";
+import { useMemo, useState } from "react";
 import { useTranslation } from "react-i18next";
-import { Editor, Element, NodeEntry, Transforms } from "slate";
+import { Editor, Element, NodeEntry, Text, Transforms } from "slate";
 import { ReactEditor, RenderElementProps } from "slate-react";
 import styled from "@emotion/styled";
 import { spacing } from "@ndla/core";
-import { BrushLine, Copyright } from "@ndla/icons/editor";
+import { BlogPost, BrushLine, Copyright } from "@ndla/icons/editor";
 import { IconButton } from "@ndla/primitives";
 import { ContentTypeFramedContent, EmbedWrapper } from "@ndla/ui";
 import { FramedContentElement } from ".";
 import { TYPE_FRAMED_CONTENT } from "./types";
 import { useArticleContentType } from "../../../ContentTypeProvider";
 import DeleteButton from "../../../DeleteButton";
+import { claudeHaikuDefaults, getTextFromHTML, invokeModel } from "../../../LLM/helpers";
 import MoveContentButton from "../../../MoveContentButton";
 import { TYPE_COPYRIGHT } from "../copyright/types";
 import { defaultCopyrightBlock } from "../copyright/utils";
@@ -40,6 +42,7 @@ interface Props extends RenderElementProps {
 const SlateFramedContent = (props: Props) => {
   const { element, editor, attributes, children } = props;
   const { t } = useTranslation();
+  const [isLoading, setIsLoading] = useState(false);
   const variant = element.data?.variant ?? "neutral";
   const contentType = useArticleContentType();
   const hasSlateCopyright = useMemo(() => {
@@ -83,9 +86,64 @@ const SlateFramedContent = (props: Props) => {
     Transforms.insertNodes(editor, defaultCopyrightBlock(), { at: path.concat(node.children.length) });
   };
 
+  const serialize = (node: any) => {
+    if (Text.isText(node)) {
+      let string = escapeHtml(node.text);
+      if (node.bold) {
+        string = `<strong>${string}</strong>`;
+      }
+      return string;
+    }
+
+    const children = node.children.map((n: any) => serialize(n)).join("");
+
+    switch (node.type) {
+      case "quote":
+        return `<blockquote><p>${children}</p></blockquote>`;
+      case "paragraph":
+        return `<p>${children}</p>`;
+      case "link":
+        return `<a href="${escapeHtml(node.url)}">${children}</a>`;
+      default:
+        return children;
+    }
+  };
+
+  const generateQuestions = async () => {
+    const articleHTML = await serialize(editor.children[0]);
+    const articleText = getTextFromHTML(articleHTML);
+    if (!articleText) {
+      console.error("No article content provided to generate meta description");
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const generatedText = await invokeModel({
+        prompt: t("textGeneration.reflectionQuestions.prompt", { language: t(`languages.NO`) }) + articleText,
+        // t("textGeneration.reflectionQuestions.prompt", { language: t(`languages.${articleLanguage}`) }) + articleText,
+        ...claudeHaikuDefaults,
+      });
+      generatedText ? editor.insertText(generatedText) : console.error("No generated text");
+    } catch (error) {
+      console.error("Error generating reflection questions", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
   return (
     <EmbedWrapper draggable {...attributes}>
       <FigureButtons contentEditable={false}>
+        <IconButton
+          variant={variant === "colored" ? "primary" : "secondary"}
+          size="small"
+          title={t("textGeneration.reflectionQuestions.button")}
+          aria-label={t("textGeneration.reflectionQuestions.button")}
+          onClick={generateQuestions}
+          loading={isLoading}
+        >
+          <BlogPost />
+        </IconButton>
         {!hasSlateCopyright && (
           <IconButton
             variant="tertiary"

src/containers/ArticlePage/FrontpageArticlePage/components/FrontpageArticleFormContent.tsx

@@ -50,6 +50,7 @@ import { toCreateFrontPageArticle, toEditMarkup } from "../../../../util/routeHe
 import { IngressField, TitleField, SlugField } from "../../../FormikForm";
 import { FrontpageArticleFormType } from "../../../FormikForm/articleFormHooks";
 import { useSession } from "../../../Session/SessionProvider";
+import ArticleSummary from "../../components/summary/ArticleSummary";
 
 const StyledDiv = styled.div`
   display: flex;
@@ -168,6 +169,7 @@ const FrontpageArticleFormContent = ({ articleLanguage }: Props) => {
         onCancel={() => setIsNormalizedOnLoad(false)}
         severity="warning"
       />
+      {/* <ArticleSummary /> */}
       <StyledContentDiv name="content" label={t("form.content.label")} noBorder>
         {({ field: { value, name, onChange }, form: { isSubmitting } }) => (
           <ContentTypeProvider value="subject-material">

src/containers/ArticlePage/LearningResourcePage/components/LearningResourceContent.tsx

@@ -46,6 +46,7 @@ import { findNodesByType } from "../../../../util/slateHelpers";
 import { IngressField, TitleField } from "../../../FormikForm";
 import { HandleSubmitFunc, LearningResourceFormType } from "../../../FormikForm/articleFormHooks";
 import { useSession } from "../../../Session/SessionProvider";
+import ArticleSummary from "../../components/summary/ArticleSummary";
 
 const StyledContentDiv = styled(FormikField)`
   position: static;
@@ -74,11 +75,17 @@ const toolbarAreaFilters = createToolbarAreaOptions();
 // Plugins are checked from last to first
 interface Props {
   articleLanguage: string;
+  articleContent?: string;
   articleId?: number;
   handleSubmit: HandleSubmitFunc<LearningResourceFormType>;
 }
 
-const LearningResourceContent = ({ articleLanguage, articleId, handleSubmit: _handleSubmit }: Props) => {
+const LearningResourceContent = ({
+  articleContent,
+  articleLanguage,
+  articleId,
+  handleSubmit: _handleSubmit,
+}: Props) => {
   const { t } = useTranslation();
   const [creatorsField] = useField<IAuthor[]>("creators");
 
@@ -139,6 +146,7 @@ const LearningResourceContent = ({ articleLanguage, articleId, handleSubmit: _ha
         onCancel={() => setIsNormalizedOnLoad(false)}
         severity="warning"
       />
+      <ArticleSummary articleContent={articleContent} articleLanguage={articleLanguage} />
       <StyledContentDiv name="content" label={t("form.content.label")} noBorder key={values.revision}>
         {(fieldProps) => <ContentField articleLanguage={articleLanguage} articleId={articleId} {...fieldProps} />}
       </StyledContentDiv>

src/containers/ArticlePage/LearningResourcePage/components/LearningResourcePanels.tsx

@@ -16,6 +16,7 @@ import LearningResourceContent from "./LearningResourceContent";
 import LearningResourceTaxonomy from "./LearningResourceTaxonomy";
 import FormAccordion from "../../../../components/Accordion/FormAccordion";
 import FormAccordionsWithComments from "../../../../components/Accordion/FormAccordionsWithComments";
+import { getTextFromHTML } from "../../../../components/LLM/helpers";
 import { IsNewArticleLanguageProvider } from "../../../../components/SlateEditor/IsNewArticleLanguageProvider";
 import config from "../../../../config";
 import { TAXONOMY_WRITE_SCOPE } from "../../../../constants";
@@ -58,6 +59,11 @@ const LearningResourcePanels = ({
   );
   const copyrightFields = useMemo<FlatArticleKeys[]>(() => ["copyright"], []);
 
+  const articleText = useMemo(() => {
+    if (!article?.content) return " ";
+    return getTextFromHTML(article.content.content);
+  }, [article?.content]);
+
   return (
     <FormAccordionsWithComments
       defaultOpen={defaultOpen}
@@ -80,6 +86,7 @@ const LearningResourcePanels = ({
         <IsNewArticleLanguageProvider locale={articleLanguage} article={article}>
           <PageContent variant="content">
             <LearningResourceContent
+              articleContent={articleText}
               articleLanguage={articleLanguage}
               articleId={article?.id}
               handleSubmit={handleSubmit}
@@ -116,7 +123,7 @@ const LearningResourcePanels = ({
         title={t("form.metadataSection")}
         hasError={!!(errors.metaDescription || errors.metaImageAlt || errors.tags)}
       >
-        <MetaDataField articleLanguage={articleLanguage} />
+        <MetaDataField articleContent={articleText} articleLanguage={articleLanguage} />
       </FormAccordion>
       <FormAccordion id={"learning-resource-grepCodes"} title={t("form.name.grepCodes")} hasError={!!errors.grepCodes}>
         <GrepCodesField />

src/containers/ArticlePage/components/summary/ArticleSummary.tsx

@@ -0,0 +1,110 @@
+/**
+ * Copyright (c) 2024-present, NDLA.
+ *
+ * This source code is licensed under the GPLv3 license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ */
+
+import { FieldHelperProps, useFormikContext } from "formik";
+import { useState } from "react";
+import { useTranslation } from "react-i18next";
+import { Descendant } from "slate";
+
+import { BlogPost } from "@ndla/icons/editor";
+import { Button, FieldHelper, FieldLabel, FieldRoot, Spinner, TextArea } from "@ndla/primitives";
+import { styled } from "@ndla/styled-system/jsx";
+import FieldHeader from "../../../../components/Field/FieldHeader";
+import { FormField } from "../../../../components/FormField";
+import { claudeHaikuDefaults, invokeModel } from "../../../../components/LLM/helpers";
+import PlainTextEditor from "../../../../components/SlateEditor/PlainTextEditor";
+import { inlineContentToEditorValue } from "../../../../util/articleContentConverter";
+import { ArticleFormType } from "../../../FormikForm/articleFormHooks";
+
+interface Props {
+  articleContent?: string;
+  articleLanguage?: string;
+}
+
+const StyledButton = styled(Button, {
+  base: {
+    alignSelf: "flex-start",
+  },
+});
+
+const ComponentRoot = styled("div", {
+  base: {
+    display: "flex",
+    flexDirection: "column",
+    gap: "xsmall",
+  },
+});
+
+const ArticleSummary = ({ articleContent, articleLanguage }: Props) => {
+  const { t } = useTranslation();
+  const [generatedSummary, setGeneratedSummary] = useState("");
+  const [isLoading, setIsLoading] = useState(false);
+  const { setStatus } = useFormikContext<ArticleFormType>();
+
+  // const generateSummary = async (helpers: FieldHelperProps<Descendant[]>) => {
+  //   const inputQuery = articleContent ?? "";
+  //   setIsLoading(true);
+  //   try {
+  //     const generatedText = await invokeModel(t("textGeneration.articleSummary.prompt") + inputQuery);
+  //     await helpers.setValue(inlineContentToEditorValue(generatedText, true), true);
+  //     // We have to invalidate slate children. We do this with status.
+  //     setStatus({ status: "acceptGenerated" });
+  //   } catch (error) {
+  //     console.error("Error genetating summary", error);
+  //   } finally {
+  //     setIsLoading(false);
+  //   }
+  // };
+
+  const generate = async () => {
+    if (!articleContent) {
+      console.error("No article content provided to generate meta description");
+      return;
+    }
+    setIsLoading(true);
+    try {
+      const generatedText = await invokeModel({
+        prompt:
+          t("textGeneration.articleSummary.prompt", { language: t(`languages.${articleLanguage}`) }) + articleContent,
+        ...claudeHaikuDefaults,
+      });
+      generatedText ? setGeneratedSummary(generatedText) : console.error("No generated text");
+    } catch (error) {
+      console.error("Error genetating summary", error);
+    } finally {
+      setIsLoading(false);
+    }
+  };
+
+  return (
+    <ComponentRoot>
+      <FieldHeader title={t("textGeneration.articleSummary.title")}></FieldHeader>
+      <TextArea value={generatedSummary} />
+      <StyledButton size="small" onClick={generate}>
+        {t("textGeneration.articleSummary.button")} {isLoading ? <Spinner size="small" /> : <BlogPost />}
+      </StyledButton>
+
+      {/* <FormField name={t("textGeneration.articleSummary.title")}>
+        {({ field, helpers, meta }) => {
+          return (
+            <FieldRoot required invalid={!!meta.error}>
+              <FieldLabel>{t("textGeneration.articleSummary.title")}</FieldLabel>
+              <FieldHelper>{t("textGeneration.articleSummary.title")}</FieldHelper>
+              <PlainTextEditor key={field.value} id={field.name} placeholder={t("textGeneration.articleSummary.title")} {...field} />
+              <StyledButton size="small" onClick={() => generateSummary(helpers)}>
+                {t("textGeneration.articleSummary.button")} {isLoading ? <Spinner size="small" /> : <BlogPost />}
+              </StyledButton>
+            </FieldRoot>
+          );
+        }}
+      </FormField> */}
+    </ComponentRoot>
+  );
+};
+
+export default ArticleSummary;

src/containers/FormikForm/IngressField.tsx

@@ -38,6 +38,7 @@ interface Props {
   maxLength?: number;
   type?: string;
   placeholder?: string;
+  showMaxLength?: boolean;
 }
 
 const toolbarOptions = createToolbarDefaultValues({
@@ -88,10 +89,16 @@ const ingressRenderers: SlatePlugin[] = [
 
 const plugins = ingressPlugins.concat(ingressRenderers);
 
-const IngressField = ({ name = "introduction", maxLength = 300, placeholder }: Props) => {
+const IngressField = ({ name = "introduction", maxLength = 300, placeholder, showMaxLength = true }: Props) => {
   const { t } = useTranslation();
   return (
-    <FormikField noBorder label={t("form.introduction.label")} name={name} showMaxLength maxLength={maxLength}>
+    <FormikField
+      noBorder
+      label={t("form.introduction.label")}
+      name={name}
+      showMaxLength={showMaxLength}
+      maxLength={maxLength}
+    >
       {({ field, form: { isSubmitting } }) => (
         <StyledRichTextEditor
           {...field}