finished frontend and extension page

Author: eric2788

package.json

@@ -82,7 +82,8 @@
       "*://api.live.bilibili.com/*",
       "*://live.bilibili.com/*",
       "*://*.bilivideo.com/*",
-      "*://*.ericlamm.xyz/*"
+      "*://*.ericlamm.xyz/*",
+      "*://*.cloudflare.com/*"
     ],
     "permissions": [
       "notifications",

src/background/forwards.ts

@@ -4,6 +4,7 @@ import * as danmaku from './forwards/danmaku'
 import * as jimaku from './forwards/jimaku'
 import * as redirect from './forwards/redirect'
 import * as streamContent from './forwards/stream-content'
+import * as jimakuSummarize from './forwards/summerize'
 
 export type ForwardData = typeof forwards
 
@@ -153,5 +154,6 @@ const forwards = {
     'redirect': redirect,
     'danmaku': danmaku,
     'blive-data': bliveData,
-    'stream-content': streamContent
+    'stream-content': streamContent,
+    'jimaku-summarize': jimakuSummarize
 }

src/background/forwards/summerize.ts

@@ -0,0 +1,5 @@
+import { useDefaultHandler } from "~background/forwards"
+
+export type ForwardBody = string[]
+
+export default useDefaultHandler<ForwardBody>()

src/features/jimaku/components/ButtonArea.tsx

@@ -8,6 +8,10 @@ import type { Jimaku } from "./JimakuLine";
 import { createPortal } from "react-dom";
 import ButtonSwitchList from "./ButtonSwitchList";
 import TailwindScope from "~components/TailwindScope";
+import { toast } from "sonner/dist";
+import { sendMessager } from "~utils/messaging";
+import { sendForward } from "~background/forwards";
+import { sleep } from "~utils/misc";
 
 export type ButtonAreaProps = {
     clearJimaku: VoidFunction
@@ -17,7 +21,7 @@ export type ButtonAreaProps = {
 function ButtonArea({ clearJimaku, jimakus }: ButtonAreaProps): JSX.Element {
 
     const { settings, info } = useContext(ContentContext)
-    const { jimakuZone, buttonZone: btnStyle, jimakuPopupWindow } = useContext(JimakuFeatureContext)
+    const { jimakuZone, buttonZone: btnStyle, jimakuPopupWindow, aiZone } = useContext(JimakuFeatureContext)
 
     const { order } = jimakuZone
     const { enabledRecording } = settings["settings.features"]
@@ -36,6 +40,16 @@ function ButtonArea({ clearJimaku, jimakus }: ButtonAreaProps): JSX.Element {
 
     const [show, setShow] = useState(!info.isTheme)
 
+    const summerize = async () => {
+        if (jimakus.length < 10) {
+            toast.warning('至少需要有10条同传字幕才可总结。')
+            return
+        }
+        await sendMessager('open-tab', { tab: 'summerizer', params: { roomId: info.room } })
+        await sleep(2000)
+        sendForward('pages', 'jimaku-summarize', jimakus.map(j => j.text))
+    }
+
     return (
         <Fragment>
             {show && (
@@ -59,6 +73,11 @@ function ButtonArea({ clearJimaku, jimakus }: ButtonAreaProps): JSX.Element {
                             弹出同传视窗
                         </JimakuButton>
                     }
+                    {aiZone.enabled && (
+                        <JimakuButton onClick={summerize}>
+                            同传字幕AI总结
+                        </JimakuButton>
+                    )}
                 </div>
             )}
             {info.isTheme && document.querySelector(upperHeaderArea) !== null && createPortal(

src/llms/index.ts

@@ -21,7 +21,7 @@ export type LLMs = typeof llms
 
 export type LLMTypes = keyof LLMs
 
-async function createLLMProvider<K extends LLMTypes, M extends LLMs[K]>(type: K, ...args: ConstructorParameters<M>): Promise<LLMProviders> {
+function createLLMProvider<K extends LLMTypes, M extends LLMs[K]>(type: K, ...args: ConstructorParameters<M>): LLMProviders {
     const LLM = llms[type].bind(this, ...args)
     return new LLM()
 }

src/options/features/jimaku/components/AIFragment.tsx

@@ -38,9 +38,9 @@ function AIFragment({ state, useHandler }: StateProxy<AISchema>): JSX.Element {
         try {
             let provider: LLMProviders;
             if (state.provider === 'qwen') {
-                provider = await createLLMProvider(state.provider, state.accountId, state.apiToken)
+                provider = createLLMProvider(state.provider, state.accountId, state.apiToken)
             } else {
-                provider = await createLLMProvider(state.provider)
+                provider = createLLMProvider(state.provider)
             }
             await provider.validate()
             toast.success('配置可用！')
@@ -68,7 +68,7 @@ function AIFragment({ state, useHandler }: StateProxy<AISchema>): JSX.Element {
                     <Selector<typeof state.provider>
                         className="col-span-2"
                         data-testid="ai-provider"
-                        label="AI 提供商"
+                        label="技术来源"
                         value={state.provider}
                         onChange={e => state.provider = e}
                         options={[

src/tabs/summarizer.tsx

@@ -0,0 +1,27 @@
+import { useEffect, useState } from "react";
+import { getForwarder } from "~background/forwards";
+import { useForwarder } from "~hooks/forwarder";
+import '~style.css'
+
+const urlParams = new URLSearchParams(window.location.search);
+const roomId = urlParams.get('roomId')
+
+function App() {
+
+    const [danmakus, setDanmakus] = useState<string[]>([])
+    const forwarder = useForwarder('jimaku-summarize', 'content-script')
+
+    useEffect(() => forwarder.addHandler(setDanmakus), []);
+
+    // TODO: when no danmakus, show a receving message
+    // TODO: when danmakus are received, show a summary
+
+    return (
+        <div>
+            <h1>Summarizer</h1>
+        </div>
+    )
+}
+
+
+export default App;

tests/units/llm.spec.ts

@@ -17,7 +17,7 @@ test('嘗試使用 Cloudflare AI 對話', { tag: "@scoped" }, async () => {
     //     return await llm.prompt('你好')
     // }, { accountId: process.env.CF_ACCOUNT_ID, apiToken: process.env.CF_API_TOKEN })
 
-    const llm = await createLLMProvider('qwen', process.env.CF_ACCOUNT_ID, process.env.CF_API_TOKEN)
+    const llm = createLLMProvider('qwen', process.env.CF_ACCOUNT_ID, process.env.CF_API_TOKEN)
     const res = await llm.prompt('你好')
 
     logger.info('response: ', res)
@@ -61,7 +61,7 @@ test('嘗試使用 Remote Worker 對話', { tag: "@scoped" }, async () => {
     //     return await llm.prompt('你好')
     // })
 
-    const llm = await createLLMProvider('worker')
+    const llm = createLLMProvider('worker')
     const res = await llm.prompt('你好')
 
     logger.info('response: ', res)