+ );
+}
\ No newline at end of file
diff --git a/frontend/README.md b/frontend/README.md
new file mode 100644
index 0000000000000000000000000000000000000000..b1b072da6c8947dd0d197592bbca055034eb477c
--- /dev/null
+++ b/frontend/README.md
@@ -0,0 +1,20 @@
+
+
+
+
+# Run and deploy your AI Studio app
+
+This contains everything you need to run your app locally.
+
+View your app in AI Studio: https://ai.studio/apps/drive/1anSXAr28s4vnp1PCKwBCwpZfDBjeqopo
+
+## Run Locally
+
+**Prerequisites:** Node.js
+
+
+1. Install dependencies:
+ `npm install`
+2. Set the `GEMINI_API_KEY` in [.env.local](.env.local) to your Gemini API key
+3. Run the app:
+ `npm run dev`
diff --git a/frontend/components/AIEntity.tsx b/frontend/components/AIEntity.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..9f586872141321f735ad17ab1e2e09c8f5040b8f
--- /dev/null
+++ b/frontend/components/AIEntity.tsx
@@ -0,0 +1,179 @@
+import React, { useState } from 'react';
+import { MessageCircle, X } from 'lucide-react';
+
+interface AIEntityProps {
+ imageUrl?: string;
+ onGreeting?: (greeting: string) => void;
+ onOpenChat?: () => void;
+ latestRecord?: string;
+}
+
+export const AIEntity: React.FC = ({ imageUrl, onGreeting, onOpenChat, latestRecord }) => {
+ const [showGreeting, setShowGreeting] = useState(false);
+ const [greeting, setGreeting] = useState('');
+ const [isHovered, setIsHovered] = useState(false);
+
+ // 生成个性化问候语
+ const generateGreeting = () => {
+ if (latestRecord) {
+ // 基于最近的录音生成问候
+ const greetings = [
+ `刚才你说"${latestRecord.substring(0, 20)}..."，想聊聊吗？`,
+ `关于"${latestRecord.substring(0, 20)}..."，我有些想法想和你分享~`,
+ `听到你说"${latestRecord.substring(0, 20)}..."，我很想了解更多呢`,
+ `"${latestRecord.substring(0, 20)}..."这让我想起了一些事情，要聊聊吗？`,
+ ];
+ return greetings[Math.floor(Math.random() * greetings.length)];
+ } else {
+ // 默认问候语
+ const defaultGreetings = [
+ '嗨！今天过得怎么样呀？',
+ '你好呀！有什么想和我分享的吗？',
+ 'Hi~ 我一直在这里陪着你哦',
+ '嘿！要不要聊聊天？',
+ '你来啦！今天感觉如何？',
+ ];
+ return defaultGreetings[Math.floor(Math.random() * defaultGreetings.length)];
+ }
+ };
+
+ const handleClick = () => {
+ const newGreeting = generateGreeting();
+ setGreeting(newGreeting);
+ setShowGreeting(true);
+ if (onGreeting) {
+ onGreeting(newGreeting);
+ }
+ };
+
+ const handleCloseGreeting = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ setShowGreeting(false);
+ };
+
+ const handleOpenChat = (e: React.MouseEvent) => {
+ e.stopPropagation();
+ if (onOpenChat) {
+ onOpenChat();
+ }
+ };
+
+ return (
+