feat: add generate image logic

anse-app · Jun 9, 2023 · a130017 · a130017
1 parent 4de8a40
commit a130017
Show file tree

Hide file tree

Showing 5 changed files with 208 additions and 2 deletions.
diff --git a/package.json b/package.json
@@ -22,6 +22,7 @@
     "@astrojs/vercel": "^3.2.2",
     "@mapbox/rehype-prism": "^0.8.0",
     "@nanostores/solid": "^0.3.2",
+    "@resvg/resvg-wasm": "^2.3.1",
     "@solid-primitives/clipboard": "^1.5.4",
     "@solid-primitives/keyboard": "^1.1.0",
     "@solid-primitives/scheduled": "^1.3.2",
@@ -54,6 +55,7 @@
     "remark-math": "^5.1.1",
     "remark-parse": "^10.0.1",
     "remark-rehype": "^10.1.0",
+    "satori": "^0.10.1",
     "solid-emoji-picker": "^0.2.0",
     "solid-js": "1.6.12",
     "solid-transition-group": "^0.2.2",

diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
diff --git a/src/components/ui/ShareModal.tsx b/src/components/ui/ShareModal.tsx
@@ -1,5 +1,7 @@
 import { useStore } from '@nanostores/solid'
-import { For } from 'solid-js'
+import { For, Show, createSignal } from 'solid-js'
+import satori from 'satori'
+import * as resvg from '@resvg/resvg-wasm'
 import { useClipboardCopy, useI18n } from '@/hooks'
 import { currentConversationId } from '@/stores/conversation'
 import { getMessagesByConversationId } from '@/stores/messages'
@@ -11,11 +13,62 @@ export default () => {
   const { t } = useI18n()
   const $currentConversationId = useStore(currentConversationId)
   const messages = getMessagesByConversationId($currentConversationId()).filter(item => item.isSelected)
+  const [imageUrl, setImageUrl] = createSignal('')
+  const [loading, setLoading] = createSignal(false)
 
   console.log($currentConversationId(), messages)
 
   const [copied, copy] = useClipboardCopy(messages.map(item => `${item.role}: ${item.content}`).join('\n'))
 
+  const handleLoadImage = async() => {
+    let _result = ''
+    setLoading(true)
+    try {
+      const fontData = await fetch('https://cdn.jsdelivr.net/gh/yzh990918/static@master/20230609/Inter-Medium.388xm374fse8.ttf').then(res => res.arrayBuffer())
+      _result = await satori(
+        // TODO: context image dom
+        {
+          type: 'div',
+          props: {
+            children: 'hello, world',
+            style: { color: 'black' },
+          },
+        },
+        {
+          width: 600,
+          height: 400,
+          fonts: [
+            {
+              name: 'Inter-Medium',
+              data: fontData,
+              style: 'normal',
+            },
+          ],
+        },
+      )
+      await resvg.initWasm(fetch('https://unpkg.com/@resvg/resvg-wasm/index_bg.wasm'))
+      const res = new resvg.Resvg(_result, {
+        fitTo: {
+          mode: 'width',
+          value: 600,
+        },
+      })
+
+      const png = res.render()
+      const pngBuffer = png.asPng()
+      const url = URL.createObjectURL(new Blob([pngBuffer], { type: 'image/png' }))
+      if (url) {
+        setLoading(false)
+        setImageUrl(url)
+        console.log(url)
+      }
+    } catch (error) {
+      console.log(error)
+    } finally {
+      setLoading(false)
+    }
+  }
+
   const tabs: TabItem[] = [
     {
       value: 'context',
@@ -41,7 +94,28 @@ export default () => {
     {
       value: 'image',
       label: t('conversations.share.tabs.image'),
-      content: <div class="flex">image</div>,
+      content: <div class="flex flex-col gap-2">
+        {messages.length
+          ? (
+            <div class="flex flex-col gap-2">
+              <div class="inline-block text-left">
+                <Show when={imageUrl().length}>
+                  <div class="button inline-block mt-0 cursor-pointer mb-2" onClick={() => { window.open(imageUrl()) }}>{t('conversations.share.image.open')}</div>
+                </Show>
+                <Show when={!imageUrl().length}>
+                  <div class="emerald-light-button inline-block mt-0 cursor-pointer mb-2" onClick={() => handleLoadImage()}>{loading() ? t('conversations.share.image.loading') : t('conversations.share.image.btn')}</div>
+                </Show>
+              </div>
+              <Show when={loading()}>
+                <div class="i-carbon:circle-solid text-slate-400 animate-ping mx-auto" />
+              </Show>
+              <Show when={imageUrl().length}>
+                <img src={imageUrl()} alt="" />
+              </Show>
+            </div>
+            )
+          : <div class="text-center text-sm">{t('empty')}</div>}
+      </div>,
     },
   ]
 

diff --git a/src/locale/lang/en.ts b/src/locale/lang/en.ts
@@ -48,6 +48,11 @@ export const en = {
           context: 'Share Context',
           image: 'Share Image',
         },
+        image: {
+          btn: 'Generate Image',
+          open: 'Open in Tab',
+          loading: 'Generating...',
+        },
       },
     },
     empty: 'No data',

diff --git a/src/locale/lang/zh-cn.ts b/src/locale/lang/zh-cn.ts
@@ -48,6 +48,11 @@ export const zhCN = {
           context: '分享上下文',
           image: '分享图片',
         },
+        image: {
+          btn: '生成图片',
+          open: '新窗口打开',
+          loading: '生成中...',
+        },
       },
     },
     empty: '暂无数据',