feat: Init AI system (#96)

* Generate single choice quizzes by subject

* Support generatel multiple choice questions

* Generate and select quizzes in editor

* Insert generated into editor

* Optimize load quizzes of page content

* Add Dockerfile for ikigai_ai

* Add Build Ikigai AI image in github action

.github/workflows/ikigai-build-release.yml

@@ -165,3 +165,54 @@ jobs:
           subject-name: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME}}-web
           subject-digest: ${{ steps.push.outputs.digest }}
           push-to-registry: true
+
+  build-and-push-ikigai-ai:
+    runs-on: ubuntu-latest
+    # Sets the permissions granted to the `GITHUB_TOKEN` for the actions in this job.
+    permissions:
+      contents: read
+      packages: write
+      attestations: write
+      id-token: write
+      #
+    steps:
+      - name: Checkout repository
+        uses: actions/checkout@v4
+      # Uses the `docker/login-action` action to log in to the Container registry using the account and password that will publish the packages. Once published, the packages are scoped to the account defined here.
+      - name: Log in to the Container registry
+        uses: docker/login-action@65b78e6e13532edd9afa3aa52ac7964289d1a9c1
+        with:
+          registry: ${{ env.REGISTRY }}
+          username: ${{ github.actor }}
+          password: ${{ secrets.GITHUB_TOKEN }}
+      # This step uses [docker/metadata-action](https://github.com/docker/metadata-action#about) to extract tags and labels that will be applied to the specified image. The `id` "meta" allows the output of this step to be referenced in a subsequent step. The `images` value provides the base name for the tags and labels.
+      - name: Extract metadata (tags, labels) for Docker
+        id: meta
+        uses: docker/metadata-action@9ec57ed1fcdbf14dcef7dfbe97b2010124a938b7
+        with:
+          images: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME }}-ai
+          tags: |
+            type=ref,event=branch
+            type=ref,event=pr
+            type=semver,pattern={{version}}
+            type=semver,pattern={{major}}.{{minor}}
+      # This step uses the `docker/build-push-action` action to build the image, based on your repository's `Dockerfile`. If the build succeeds, it pushes the image to GitHub Packages.
+      # It uses the `context` parameter to define the build's context as the set of files located in the specified path. For more information, see "[Usage](https://github.com/docker/build-push-action#usage)" in the README of the `docker/build-push-action` repository.
+      # It uses the `tags` and `labels` parameters to tag and label the image with the output from the "meta" step.
+      - name: Build and push Docker image
+        id: push
+        uses: docker/build-push-action@f2a1d5e99d037542a71f64918e516c093c6f3fc4
+        with:
+          context: ./ikigai_ai
+          push: true
+          tags: ${{ steps.meta.outputs.tags }}
+          file: ./ikigai_ai/Dockerfile
+          labels: ${{ steps.meta.outputs.labels }}
+
+      # This step generates an artifact attestation for the image, which is an unforgeable statement about where and how it was built. It increases supply chain security for people who consume the image. For more information, see "[AUTOTITLE](/actions/security-guides/using-artifact-attestations-to-establish-provenance-for-builds)."
+      - name: Generate artifact attestation
+        uses: actions/attest-build-provenance@v1
+        with:
+          subject-name: ${{ env.REGISTRY }}/${{ env.IMAGE_NAME}}-ai
+          subject-digest: ${{ steps.push.outputs.digest }}
+          push-to-registry: true

.gitignore

@@ -47,3 +47,4 @@ firebase_service_account.json
 
 # Ikigai AI
 local_cache
+__pycache__

apps/ikigai/components/Document/DocumentBody/ContentPage/ContentToolbar.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import * as Toolbar from "@radix-ui/react-toolbar";
 import {
   IconAlignCenter,
@@ -24,6 +24,7 @@ import {
   IconTexture,
   IconTools,
   IconUnderline,
+  IconWand,
   IconWriting,
 } from "@tabler/icons-react";
 import { TwitterPicker } from "react-color";
@@ -38,11 +39,13 @@ import { SINGLE_CHOICE_BLOCK_NAME } from "../../../Editor/Extensions/QuizBlock/S
 import { MULTIPLE_CHOICE_BLOCK_NAME } from "../../../Editor/Extensions/QuizBlock/MultipleChoiceBlock";
 import { SELECT_OPTION_BLOCK_NAME } from "../../../Editor/Extensions/QuizBlock/SelectOptionBlock";
 import { FILL_IN_BLANK_BLOCK_NAME } from "../../../Editor/Extensions/QuizBlock/FillInBlankBlock";
+import QuizGenerator from "components/QuizGenerator";
 
 const ContentToolbar = () => {
   const activeEditor = useEditorStore((state) => state.activeEditor);
   const toolbarOptions = useEditorStore((state) => state.toolbarOptions);
   const setToolbarOptions = useEditorStore((state) => state.setToolbarOptions);
+  const [openQuizGenerator, setOpenQuizGenerator] = useState(false);
 
   const onToggleBold = () => {
     if (!activeEditor) return;
@@ -559,8 +562,23 @@ const ContentToolbar = () => {
               </DropdownMenu.Item>
             </DropdownMenu.Content>
           </DropdownMenu.Root>
+          <Tooltip content={t`Use AI to generate quizzes`}>
+            <Toolbar.ToolbarButton
+              className="ToolbarToggleItem"
+              value="generate-quizzes"
+              aria-label="Generate Quizzes"
+              onClick={() => setOpenQuizGenerator(true)}
+            >
+              <IconWand size={20} stroke={1.7} />{" "}
+              <Trans>Quiz Generator (AI)</Trans>
+            </Toolbar.ToolbarButton>
+          </Tooltip>
         </Toolbar.ToggleGroup>
       </Toolbar.Root>
+      <QuizGenerator
+        open={openQuizGenerator}
+        onOpenChange={setOpenQuizGenerator}
+      />
     </div>
   );
 };

apps/ikigai/components/Editor/BaseEditor.tsx

@@ -36,6 +36,7 @@ export type IkigaiEditorProps = {
   onPaste?: (clipboard: ClipboardEvent) => boolean;
   onDrop?: (dragEvent: DragEvent) => boolean;
   body?: JSONContent;
+  attributes?: { [name: string]: string };
 };
 
 export const useIkigaiEditor = ({
@@ -46,6 +47,7 @@ export const useIkigaiEditor = ({
   onForceSave,
   onPaste,
   onDrop,
+  attributes,
 }: IkigaiEditorProps) => {
   const setActiveEditor = useEditorStore((state) => state.setActiveEditor);
   const innerContent = useRef(body);
@@ -55,6 +57,7 @@ export const useIkigaiEditor = ({
     extensions,
     content: body,
     editorProps: {
+      attributes,
       handlePaste: (view, clipboard) => {
         if (onPaste) return onPaste(clipboard);
         return false;

apps/ikigai/components/Editor/Extensions/QuizBlock/MultipleChoiceBlock/index.tsx

@@ -1,10 +1,11 @@
 import createQuizNode from "../QuizNode";
 import MultipleChoiceBlockComponent from "./MultipleChoiceComponent";
+import { EMPTY_UUID } from "util/FileUtil";
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     multipleChoice: {
-      insertMultipleChoice: () => ReturnType;
+      insertMultipleChoice: (initialQuizId?: string) => ReturnType;
     };
   }
 }
@@ -20,11 +21,14 @@ export default createQuizNode(
     addCommands() {
       return {
         insertMultipleChoice:
-          () =>
+          (quizId) =>
           ({ commands }) => {
             return commands.insertContent([
               {
                 type: MULTIPLE_CHOICE_BLOCK_NAME,
+                attrs: {
+                  quizId: quizId || EMPTY_UUID,
+                },
               },
             ]);
           },

apps/ikigai/components/Editor/Extensions/QuizBlock/SingleChoiceBlock/index.tsx

@@ -1,10 +1,11 @@
 import createQuizNode from "../QuizNode";
 import SingleChoiceBlockComponent from "./SingleChoiceComponent";
+import { EMPTY_UUID } from "util/FileUtil";
 
 declare module "@tiptap/core" {
   interface Commands<ReturnType> {
     singleChoiceBlock: {
-      insertSingleChoice: () => ReturnType;
+      insertSingleChoice: (initialQuizId?: string) => ReturnType;
     };
   }
 }
@@ -20,11 +21,12 @@ export default createQuizNode(
     addCommands() {
       return {
         insertSingleChoice:
-          () =>
+          (initialQuizId) =>
           ({ commands }) => {
             return commands.insertContent([
               {
                 type: SINGLE_CHOICE_BLOCK_NAME,
+                attrs: { quizId: initialQuizId || EMPTY_UUID },
               },
             ]);
           },

apps/ikigai/components/Editor/index.tsx

@@ -65,6 +65,9 @@ const Editor = ({ pageContent, readOnly }: EditorProps) => {
   };
 
   const editor = useIkigaiEditor({
+    attributes: {
+      pageContentId: pageContent.id,
+    },
     body: pageContent.body,
     onUpdate: (body) => run({ body }),
     onForceSave: (body) => {