feat: try openai

.vscode/launch.json

@@ -0,0 +1,12 @@
+{
+	"version": "0.2.0",
+	"configurations": [
+		{
+			"type": "node-terminal",
+			"name": "开发模式",
+			"request": "launch",
+			"command": "pnpm run dev",
+			"cwd": "${workspaceFolder}"
+		}
+	]
+}

.vscode/settings.json

@@ -10,5 +10,6 @@
 	"explorer.fileNesting.patterns": {
 		".gitignore": ".gitconfig",
 		"wxt.config.ts": "auto-imports*.ts, components*.ts, tailwind.config.cjs, tsconfig.json, types.d.ts, postcss.config.cjs"
-	}
+	},
+	"editor.formatOnSave": true
 }

entrypoints/sidepanel/Sidepanel.vue

@@ -15,6 +15,7 @@ import { html2md, md2html } from '@/utils/parser';
 import { ElMessage as notify } from 'element-plus';
 import { checkStatus } from '@/utils/checkStatus';
 import { isCheckTw5Storage, tagStorage, portStorage } from '@/utils/storage';
+import getAI from '@/utils/openai';
 
 const editRef = ref<HTMLInputElement>();
 const isChecking = ref(false);
@@ -71,6 +72,7 @@ async function getContent(
 
 onMounted(() => {
   getContent();
+  // getAI();
 });
 
 const handleSave = () =>
@@ -276,25 +278,38 @@ const toggleInfoDialog = () => {
   </div>
 
   <div>
-    <ElTabs type="" :model-value="currentTab" class="">
+    <ElTabs
+      type=""
+      :model-value="currentTab"
+      class="">
       <!-- preview -->
-      <ElTabPane name="preview" class="overflow-y-auto h-screen">
+      <ElTabPane
+        name="preview"
+        class="overflow-y-auto h-screen">
         <template #label>
           <WI.FaFileTextO /> <span class="ml-1">预览</span>
         </template>
         <div v-if="title">
           <div class="flex items-center justify-center gap-2">
             <h2>
-              <a :href="link" target="_blank" v-if="link">
-                <img alt="" :src="faviconUrl" class="rounded-full size-4" />
+              <a
+                :href="link"
+                target="_blank"
+                v-if="link">
+                <img
+                  alt=""
+                  :src="faviconUrl"
+                  class="rounded-full size-4" />
               </a>
               {{ title }}
             </h2>
           </div>
           <!-- <el-divider border-style="dashed" /> -->
           <article
             class="prose prose-gray max-w-none prose-sm dark:prose-invert flex-wrap prose-img:max-w-[300px] prose-img:my-0 prose-img:rounded-md prose-video:max-w-[300px] prose-video:max-h-[300px] prose-video:my-0">
-            <div v-html="html" class="mx-2"></div>
+            <div
+              v-html="html"
+              class="mx-2"></div>
           </article>
         </div>
       </ElTabPane>
@@ -306,7 +321,10 @@ const toggleInfoDialog = () => {
           <span class="ml-1">编辑</span>
         </template>
 
-        <ElInput type="text" v-model="title" class="mb-4" />
+        <ElInput
+          type="text"
+          v-model="title"
+          class="mb-4" />
 
         <ElInput
           ref="editRef"
@@ -341,7 +359,10 @@ const toggleInfoDialog = () => {
             <h2>Nodejs TiddlyWiki5 端口</h2>
             <div class="flex gap-2">
               <ElInput v-model.trim.number="port" />
-              <ElButton type="success" plain @click="savePort(port!)"
+              <ElButton
+                type="success"
+                plain
+                @click="savePort(port!)"
                 >保存</ElButton
               >
             </div>
@@ -402,8 +423,13 @@ const toggleInfoDialog = () => {
         </div>
       </ElTabPane>
 
-      <el-drawer v-model="infoDialogStatus" direction="btt" title="连接信息">
-        <Info :status="status" :json="json" />
+      <el-drawer
+        v-model="infoDialogStatus"
+        direction="btt"
+        title="连接信息">
+        <Info
+          :status="status"
+          :json="json" />
       </el-drawer>
     </ElTabs>
   </div>

package.json

@@ -25,6 +25,7 @@
     "element-plus": "2.6.2",
     "groq-sdk": "^0.3.3",
     "ofetch": "^1.3.4",
+    "openai": "^4.52.0",
     "postcss": "^8.4.38",
     "rehype-document": "^7.0.3",
     "rehype-format": "^5.0.0",

utils/openai.ts

@@ -0,0 +1,24 @@
+import OpenAI from 'openai';
+
+// TODO: 总结一下这篇文章
+/** @see: https://docs.siliconflow.cn/reference/chat-completions-1 */
+async function getAI(content = 'who you are') {
+  const openai = new OpenAI({
+    apiKey: 'sk-xxxxxx',
+    baseURL: 'https://api.siliconflow.cn/v1',
+    dangerouslyAllowBrowser: true,
+  });
+
+  const params: OpenAI.Chat.ChatCompletionCreateParams = {
+    messages: [{ role: 'user', content }],
+    model: 'Qwen/Qwen2-72B-Instruct',
+    stream: true,
+  };
+  const stream = await openai.chat.completions.create(params);
+  for await (const chunk of stream) {
+    // process.stdout.write(chunk.choices[0]?.delta?.content || '');
+    console.log(chunk.choices[0]?.delta?.content || '');
+  }
+}
+
+export default getAI;