✨ feat(ai): add gemini support

.env.example

@@ -1,3 +1,24 @@
+# Authjs
 AUTH_SECRET=""
 
+# Google Analytics
 NEXT_PUBLIC_GA_ID=""
+
+# NextAuth
+NEXTAUTH_URL=""
+
+# Database
+POSTGRES_DATABASE="verceldb"
+POSTGRES_HOST=""
+POSTGRES_PASSWORD=""
+POSTGRES_PRISMA_URL=""
+POSTGRES_URL=""
+POSTGRES_URL_NON_POOLING=""
+POSTGRES_URL_NO_SSL=""
+POSTGRES_USER=""
+
+# AI
+AI=""
+GPT_KEY=""
+GEMINI_KEY=""
+GPT_URL=""

app/components/home-status/index.tsx

@@ -145,7 +145,14 @@ const HomeStatus = ({
 				focusInput();
 				return;
 			}
-
+			if (e.code === "Quote") {
+				onSettingChange({ showMeaning: !setting.showMeaning });
+				return;
+			}
+			if (e.code === "Semicolon") {
+				playWord();
+				return;
+			}
 			/** 单词导航 */
 			if ([NextKeyShortcut, PrevKeyShortcut].includes(e.code)) {
 				if (isComplete || (curWordIndex === 0 && e.code === PrevKeyShortcut))
@@ -336,7 +343,8 @@ const HomeStatus = ({
 		clsx({
 			"font-bold text-[color:var(--font-color-error)]":
 				isInputError && curInputIndex === strIndex,
-			"text-[color:var(--font-color-active)]": curInputIndex > strIndex,
+			"text-[color:var(--font-color-active)] font-bold":
+				curInputIndex > strIndex,
 		});
 
 	const inlineStyle = useMemo(() => {
@@ -484,7 +492,11 @@ const HomeStatus = ({
 					<div className="text-sm">
 						tips: Try <kbd className="kbd kbd-xs">[</kbd>
 						{" / "}
-						<kbd className="kbd kbd-xs">]</kbd>.
+						<kbd className="kbd kbd-xs">]</kbd>
+						{" / "}
+						<kbd className="kbd kbd-xs">;</kbd>
+						{" / "}
+						<kbd className="kbd kbd-xs">'</kbd>.
 					</div>
 				</div>
 			</div>

app/styles/_variables.css

@@ -1,6 +1,6 @@
 
 :root {
-	--font-color-inactive: theme(textColor.gray.500);
+	--font-color-inactive: theme(textColor.gray.500/0.8);
 	--font-color-active: theme(textColor.base-content);
 	--font-color-error: theme(textColor.rose.500);
 	--header-height: 64px;

biome.json

@@ -39,7 +39,7 @@
 			"allowComments": true
 		},
 		"formatter": {
-			"lineWidth": 75
+			"lineWidth": 48
 		}
 	},
 	"vcs": {

package.json

@@ -21,6 +21,7 @@
 		"script:docs-modified": "tsx scripts/generate-doc-last-modified.ts"
 	},
 	"dependencies": {
+		"@google/generative-ai": "^0.21.0",
 		"@keystone-6/auth": "^8.0.0",
 		"@keystone-6/core": "^6.2.0",
 		"@keystone-6/document-renderer": "^1.1.2",
@@ -120,7 +121,9 @@
 		"*": [
 			"biome check --no-errors-on-unmatched --files-ignore-unknown=true"
 		],
-		"*.{mdx,md}": ["npm run script:docs-modified"]
+		"*.{mdx,md}": [
+			"npm run script:docs-modified"
+		]
 	},
 	"volta": {
 		"node": "20.17.0"

scripts/open-ai.ts

@@ -1,20 +1,39 @@
+import { GoogleGenerativeAI } from "@google/generative-ai";
 import { config as envConfig } from "dotenv";
 import OpenAI from "openai";
 import type { ChatCompletionMessageParam } from "openai/resources/index.mjs";
+
 envConfig({ path: ["./.env", "./.env.local"] });
 
 const openai = new OpenAI({
 	apiKey: process.env.GPT_KEY,
 	baseURL: process.env.GPT_URL,
 });
 
+const gemini_AI = new GoogleGenerativeAI(process.env.GEMINI_KEY || "");
+
 async function fetchChatCompletion(messages: ChatCompletionMessageParam[]) {
-	const result = await openai.chat.completions.create({
-		model: "gpt-3.5-turbo",
-		messages,
-	});
-	console.log(`[chatGPT]: use ${result.usage?.total_tokens} tokens.`);
-	return result.choices[0].message.content;
+	if (!process.env.AI || process.env.AI === "openai") {
+		const result = await openai.chat.completions.create({
+			model: "gpt-3.5-turbo",
+			messages,
+		});
+		console.log(`[AI][OpenAI]: use ${result.usage?.total_tokens} tokens.`);
+		return result.choices[0].message.content;
+	}
+
+	if (process.env.AI === "gemini") {
+		const geminiModel = gemini_AI.getGenerativeModel({
+			model: "gemini-1.5-flash",
+		});
+		const result = await geminiModel.generateContent(
+			messages[0].content as string,
+		);
+		console.log(
+			`[AI][Gemini]: use ${result.response.usageMetadata?.totalTokenCount} tokens.`,
+		);
+		return result.response.text();
+	}
 }
 
 export { fetchChatCompletion };