ai?

package.json

@@ -15,6 +15,7 @@
     "@astrojs/svelte": "latest",
     "@astrojs/tailwind": "5.1.0",
     "@astrojs/vercel": "7.0.2",
+    "@google/generative-ai": "^0.2.0",
     "@solid-primitives/keyed": "^1.2.0",
     "@tabler/icons": "^2.47.0",
     "@tabler/icons-solidjs": "^2.36.0",
@@ -29,6 +30,7 @@
     "classnames": "^2.3.2",
     "dexie": "^3.2.4",
     "fflate": "^0.8.0",
+    "marked": "^12.0.0",
     "mikanui": "^0.1.12",
     "sharp": "0.33.0-alpha.6",
     "solid-js": "^1.7.12",

src/islands/note/components/notes/TextNote/TextNote.tsx

@@ -12,20 +12,22 @@ import {
   onMount
 } from 'solid-js'
 import { removeIconSize } from '../../../utils/icon/removeIconSize'
+import * as marked from "marked"
 
 import IconNote from '@tabler/icons/note.svg?raw'
 import IconBold from '@tabler/icons/bold.svg?raw'
 import IconUnderline from '@tabler/icons/underline.svg?raw'
 
-import { Editor } from '@tiptap/core'
-import { Dialog } from '../../utils/Dialog'
+import { Editor, textPasteRule } from '@tiptap/core'
+import { Dialog, createDialog } from '../../utils/Dialog'
 import { Controller } from '../../note-components/Controller'
 import { noteBookState } from '../../../store'
 import { Player } from './Player'
 
 import './TextNoteStyle.css'
 import type { SetStoreFunction } from 'solid-js/store'
 import { getVisualViewport } from '../../../window-apis'
+import { generateByGemini } from '../../../utils/gemini'
 
 export interface Props extends NoteComponentProps {
   noteData: TextNoteData
@@ -85,8 +87,44 @@ export const TextNote = ((props: Props) => {
     props.setNoteData('canToJsonData', 'html', getEditor()?.getHTML() || '')
     props.updated()
   }
+
+  const [getIsGeminiShowed, setIsGeminiShowed] = createSignal(false)
+  const geminiDialog = createDialog()
   return (
     <div>
+      <Show when={getIsGeminiShowed()}>
+        <Dialog dialog={geminiDialog} title="Generate with Gemini" type="custom" onClose={data => {
+          setIsGeminiShowed(false)
+        }}>
+          <div>
+            {
+              (() => {
+                const [getPrompt, setPrompt] = createSignal('')
+                const [getGenerating, setGenerating] = createSignal(false)
+                return <div>
+                  <textarea placeholder='Prompt' onInput={e => setPrompt(e.target.value)} />
+                  <button onClick={async () => {
+                    setGenerating(true)
+                    const prompt = getPrompt()
+                    const text = await generateByGemini(`「${prompt}」についてのテキストを作成してください。また、作ったテキスト中の年代・地名・語句などの重要な単語は、\`((\`と\`))\`で囲みなさい、これは、1文に1つ以上入れなさい。`)
+
+                    const html = marked.parse(text.replace(/\(\(.*?\)\)/g, str => {
+                      return '<span data-nanohasheet="true">' + str.slice(2, -2) + '</span>'
+                    }))
+                    console.log(html)
+                    getEditor()?.commands.insertContent(html)
+                    setGenerating(false)
+                    geminiDialog.close(0)
+                  }} disabled={getGenerating()}>Generate</button>
+                  <Show when={getGenerating()}>
+                    Genetating...
+                  </Show>
+                </div>
+              })()
+            }
+          </div>
+        </Dialog>
+      </Show>
       <Show when={!noteBookState.isEditMode}>
         <div>
           <Player html={getEditor()?.getHTML() || ''} />
@@ -126,6 +164,7 @@ export const TextNote = ((props: Props) => {
             <div class="flex justify-center gap-2 fixed left-0 w-full" style={{
               top: (getVisualViewport()?.data?.height ?? 0) + (getVisualViewport()?.data?.pageTop ?? 0) - 32 + 'px'
             }}>
+              <div class="flex justify-center">
               {
                 ([
                   {
@@ -161,6 +200,15 @@ export const TextNote = ((props: Props) => {
                   </button>
                 })
               }
+              </div>
+              <div>
+
+              </div>
+              <div>
+                <button onClick={async () => {
+                  setIsGeminiShowed(true)
+                }}>Generate</button>
+              </div>
             </div>
             <Controller
               noteIndex={props.index}

src/islands/note/utils/gemini/index.ts

@@ -0,0 +1,11 @@
+import { GoogleGenerativeAI } from '@google/generative-ai'
+
+const genAI = new GoogleGenerativeAI(import.meta.env.GEMINI_TOKEN)
+
+export async function generateByGemini(prompt: string) {
+  const model = genAI.getGenerativeModel({ model: 'gemini-pro' })
+  const result = await model.generateContent(prompt)
+  const response = await result.response
+  const text = response.text()
+  return text
+}