Spaces:

SFM2001
/

spititout

Sleeping

MSF commited on 23 days ago

Commit

0d3686b

1 Parent(s): 9ce7ac5

feat: Initialize Venting Partner app with AI Studio

Sets up the project structure for the Venting Partner application, integrating with Google AI Studio. Includes initial configuration for Vite, React, Tailwind CSS, and Gemini API integration. Also adds basic README instructions and a .gitignore file.

Files changed (13) hide show

.env.example +9 -0
.gitignore +8 -0
README.md +14 -5
index.html +13 -0
metadata.json +6 -0
package.json +34 -0
src/App.tsx +15 -0
src/components/Chat.tsx +375 -0
src/index.css +31 -0
src/main.tsx +10 -0
src/services/geminiService.ts +118 -0
tsconfig.json +26 -0
vite.config.ts +24 -0

.env.example ADDED Viewed

	@@ -0,0 +1,9 @@

+# GEMINI_API_KEY: Required for Gemini AI API calls.
+# AI Studio automatically injects this at runtime from user secrets.
+# Users configure this via the Secrets panel in the AI Studio UI.
+GEMINI_API_KEY="MY_GEMINI_API_KEY"
+# APP_URL: The URL where this applet is hosted.
+# AI Studio automatically injects this at runtime with the Cloud Run service URL.
+# Used for self-referential links, OAuth callbacks, and API endpoints.
+APP_URL="MY_APP_URL"

.gitignore ADDED Viewed

	@@ -0,0 +1,8 @@

+node_modules/
+build/
+dist/
+coverage/
+.DS_Store
+*.log
+.env*
+!.env.example

README.md CHANGED Viewed

@@ -1,11 +1,20 @@
 <div align="center">
 <img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
-  <h1>Built with AI Studio</h2>
-  <p>The fastest path from prompt to production with Gemini.</p>
-  <a href="https://aistudio.google.com/apps">Start building</a>
-</div>

 <div align="center">
 <img width="1200" height="475" alt="GHBanner" src="https://github.com/user-attachments/assets/0aa67016-6eaf-458a-adb2-6e31a0763ed6" />
+</div>
+# 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/20848e5b-548c-41e6-b2f6-de4e7b1c1bd9
+## 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`

index.html ADDED Viewed

	@@ -0,0 +1,13 @@

+<!doctype html>
+<html lang="en">
+  <head>
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+    <title>My Google AI Studio App</title>
+  </head>
+  <body>
+    <div id="root"></div>
+    <script type="module" src="/src/main.tsx"></script>
+  </body>
+</html>

metadata.json ADDED Viewed

	@@ -0,0 +1,6 @@

+{
+  "name": "Venting Partner (情绪宣泄室)",
+  "description": "一个陪你一起骂人、宣泄情绪，然后再引导你回归平静的AI伙伴。先发泄，再冷静。",
+  "requestFramePermissions": [],
+  "majorCapabilities": []
+}

package.json ADDED Viewed

	@@ -0,0 +1,34 @@

+{
+  "name": "react-example",
+  "private": true,
+  "version": "0.0.0",
+  "type": "module",
+  "scripts": {
+    "dev": "vite --port=3000 --host=0.0.0.0",
+    "build": "vite build",
+    "preview": "vite preview",
+    "clean": "rm -rf dist",
+    "lint": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@google/genai": "^1.29.0",
+    "@tailwindcss/vite": "^4.1.14",
+    "@vitejs/plugin-react": "^5.0.4",
+    "lucide-react": "^0.546.0",
+    "react": "^19.0.1",
+    "react-dom": "^19.0.1",
+    "vite": "^6.2.3",
+    "express": "^4.21.2",
+    "dotenv": "^17.2.3",
+    "motion": "^12.23.24"
+  },
+  "devDependencies": {
+    "@types/node": "^22.14.0",
+    "autoprefixer": "^10.4.21",
+    "tailwindcss": "^4.1.14",
+    "tsx": "^4.21.0",
+    "typescript": "~5.8.2",
+    "vite": "^6.2.3",
+    "@types/express": "^4.17.21"
+  }
+}

src/App.tsx ADDED Viewed

	@@ -0,0 +1,15 @@

+/**
+ * @license
+ * SPDX-License-Identifier: Apache-2.0
+ */
+import React from "react";
+import Chat from "./components/Chat";
+export default function App() {
+  return (
+    <div className="min-h-screen bg-black text-white selection:bg-orange-500/30">
+      <Chat />
+    </div>
+  );
+}

src/components/Chat.tsx ADDED Viewed

	@@ -0,0 +1,375 @@

+import React, { useState, useEffect, useRef } from "react";
+import { motion, AnimatePresence } from "motion/react";
+import { Send, Trash2, Heart, Flame, ShieldAlert, Sparkles, MessageSquare, Mic, Square, Play, Pause, Volume2 } from "lucide-react";
+import { chatWithGemini, generateSpeech, ChatMode, Message } from "../services/geminiService";
+export default function Chat() {
+  const [messages, setMessages] = useState<Message[]>([]);
+  const [input, setInput] = useState("");
+  const [mode, setMode] = useState<ChatMode>(ChatMode.VENTING);
+  const [isLoading, setIsLoading] = useState(false);
+  const [showSwitchPrompt, setShowSwitchPrompt] = useState(false);
+  const [isRecording, setIsRecording] = useState(false);
+  const [recordedAudio, setRecordedAudio] = useState<string | null>(null);
+  const [mediaRecorder, setMediaRecorder] = useState<MediaRecorder | null>(null);
+  const scrollRef = useRef<HTMLDivElement>(null);
+  const audioContextRef = useRef<AudioContext | null>(null);
+  // Auto-scroll to bottom
+  useEffect(() => {
+    if (scrollRef.current) {
+      scrollRef.current.scrollTop = scrollRef.current.scrollHeight;
+    }
+  }, [messages, isLoading]);
+  const startRecording = async () => {
+    try {
+      const stream = await navigator.mediaDevices.getUserMedia({ audio: true });
+      const recorder = new MediaRecorder(stream);
+      const chunks: Blob[] = [];
+      recorder.ondataavailable = (e) => chunks.push(e.data);
+      recorder.onstop = async () => {
+        const blob = new Blob(chunks, { type: "audio/webm" });
+        const reader = new FileReader();
+        reader.readAsDataURL(blob);
+        reader.onloadend = () => {
+          const base64 = (reader.result as string).split(",")[1];
+          setRecordedAudio(base64);
+        };
+        stream.getTracks().forEach(track => track.stop());
+      };
+      recorder.start();
+      setMediaRecorder(recorder);
+      setIsRecording(true);
+    } catch (err) {
+      console.error("Error accessing microphone:", err);
+      alert("无法访问麦克风，请检查权限。");
+    }
+  };
+  const stopRecording = () => {
+    if (mediaRecorder) {
+      mediaRecorder.stop();
+      setIsRecording(false);
+    }
+  };
+  const playPCM = async (base64: string) => {
+    if (!audioContextRef.current) {
+      audioContextRef.current = new (window.AudioContext || (window as any).webkitAudioContext)({ sampleRate: 24000 });
+    }
+    const ctx = audioContextRef.current;
+    // Decoding raw PCM 16-bit Le
+    const binary = atob(base64);
+    const len = binary.length;
+    const bytes = new Uint8Array(len);
+    for (let i = 0; i < len; i++) {
+        bytes[i] = binary.charCodeAt(i);
+    }
+    const arrayBuffer = bytes.buffer;
+    const audioBuffer = ctx.createBuffer(1, arrayBuffer.byteLength / 2, 24000);
+    const channelData = audioBuffer.getChannelData(0);
+    const dataView = new DataView(arrayBuffer);
+    for (let i = 0; i < audioBuffer.length; i++) {
+        channelData[i] = dataView.getInt16(i * 2, true) / 32768;
+    }
+    const source = ctx.createBufferSource();
+    source.buffer = audioBuffer;
+    source.connect(ctx.destination);
+    source.start();
+  };
+  const handleSend = async (audioPayload?: string) => {
+    const finalInput = input.trim();
+    const finalAudio = audioPayload || recordedAudio;
+    if (!finalInput && !finalAudio) return;
+    if (isLoading) return;
+    const userMessage: Message = {
+      role: "user",
+      text: finalInput || "🎤 语音消息",
+      timestamp: Date.now(),
+      audio: finalAudio || undefined
+    };
+    const newMessages = [...messages, userMessage];
+    setMessages(newMessages);
+    setInput("");
+    setRecordedAudio(null);
+    setIsLoading(true);
+    const response = await chatWithGemini(newMessages, mode, finalAudio || undefined);
+    // Generate TTS for the response
+    const aiAudio = await generateSpeech(response);
+    const aiMessage: Message = {
+      role: "model",
+      text: response,
+      timestamp: Date.now(),
+      aiAudio: aiAudio || undefined
+    };
+    setMessages([...newMessages, aiMessage]);
+    setIsLoading(false);
+    if (aiAudio) {
+      playPCM(aiAudio).catch(console.error);
+    }
+    // Suggest switching to Guiding mode after 4 user messages in Venting mode
+    if (mode === ChatMode.VENTING && newMessages.filter(m => m.role === "user").length >= 4) {
+      setShowSwitchPrompt(true);
+    }
+  };
+  const toggleMode = (newMode: ChatMode) => {
+    setMode(newMode);
+    setShowSwitchPrompt(false);
+    // Add a transition message from AI when mode changes
+    const transitionMsg: Message = {
+      role: "model",
+      text: newMode === ChatMode.GUIDING
+        ? "既然你愿意听听我的看法，那我们就坐下来，慢慢把这件事捋顺。❤️"
+        : "好嘞！咱们继续，这事儿换谁谁不气啊？咱接着骂！🔥",
+      timestamp: Date.now(),
+    };
+    setMessages(prev => [...prev, transitionMsg]);
+  };
+  const clearChat = () => {
+    setMessages([]);
+    setMode(ChatMode.VENTING);
+    setShowSwitchPrompt(false);
+  };
+  return (
+    <div className={`flex flex-col h-screen transition-colors duration-1000 ${
+      mode === ChatMode.VENTING ? "bg-red-950/20" : "bg-teal-950/20"
+    }`}>
+      {/* Header */}
+      <header className="fixed top-0 w-full p-4 flex justify-between items-center z-10 backdrop-blur-md border-b border-white/10">
+        <div className="flex items-center gap-2">
+          {mode === ChatMode.VENTING ? (
+            <Flame className="text-orange-500 animate-pulse" />
+          ) : (
+            <Sparkles className="text-teal-400 animate-pulse" />
+          )}
+          <h1 className="font-sans font-bold text-lg tracking-tight text-white/90">
+            {mode === ChatMode.VENTING ? "情绪宣泄室" : "静心引导室"}
+          </h1>
+        </div>
+        <button
+          onClick={clearChat}
+          className="p-2 rounded-full hover:bg-white/10 text-white/60 transition-colors"
+          title="重新开始"
+        >
+          <Trash2 size={20} />
+        </button>
+      </header>
+      {/* Chat Area */}
+      <div
+        ref={scrollRef}
+        className="flex-1 overflow-y-auto px-4 pt-20 pb-32 space-y-4 scroll-smooth"
+      >
+        {messages.length === 0 && (
+          <div className="h-full flex flex-col items-center justify-center text-center p-8 space-y-6">
+            <motion.div
+              initial={{ scale: 0.8, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              transition={{ duration: 0.5 }}
+              className={`w-24 h-24 rounded-3xl flex items-center justify-center ${
+                mode === ChatMode.VENTING ? "bg-orange-500/20" : "bg-teal-500/20"
+              }`}
+            >
+              <MessageSquare size={48} className={mode === ChatMode.VENTING ? "text-orange-500" : "text-teal-400"} />
+            </motion.div>
+            <div className="space-y-2">
+              <h2 className="text-2xl font-bold text-white/90">受委屈了？</h2>
+              <p className="text-white/40 max-w-xs">在这里，你可以毫无顾忌地发泄。我永远站在你这一边。</p>
+            </div>
+            <div className="grid grid-cols-2 gap-3 w-full max-w-sm">
+              <button
+                onClick={() => setInput("今天遇到了一个超级奇葩的同事...")}
+                className="p-3 rounded-xl bg-white/5 border border-white/10 text-xs text-white/60 hover:bg-white/10 transition-colors text-left"
+              >
+                "同事太奇葩了..."
+              </button>
+              <button
+                onClick={() => setInput("这破天气说变就变，害我计划全乱了！")}
+                className="p-3 rounded-xl bg-white/5 border border-white/10 text-xs text-white/60 hover:bg-white/10 transition-colors text-left"
+              >
+                "这鬼天气..."
+              </button>
+            </div>
+          </div>
+        )}
+        <AnimatePresence>
+          {messages.map((msg, i) => (
+            <motion.div
+              key={i}
+              initial={{ opacity: 0, y: 10 }}
+              animate={{ opacity: 1, y: 0 }}
+              exit={{ opacity: 0, scale: 0.95 }}
+              className={`flex ${msg.role === "user" ? "justify-end" : "justify-start"}`}
+            >
+              <div
+                className={`max-w-[85%] px-4 py-3 rounded-2xl relative group ${
+                  msg.role === "user"
+                    ? "bg-white/20 text-white rounded-tr-none"
+                    : mode === ChatMode.VENTING
+                    ? "bg-orange-600/30 border border-orange-500/20 text-orange-50 rounded-tl-none"
+                    : "bg-teal-600/30 border border-teal-500/20 text-teal-50 rounded-tl-none"
+                }`}
+              >
+                {msg.audio && (
+                  <div className="flex items-center gap-2 mb-2 p-2 rounded-lg bg-black/20">
+                    <Volume2 size={16} className="text-white/60" />
+                    <div className="flex-1 h-1 bg-white/10 rounded-full overflow-hidden">
+                      <div className="w-full h-full bg-white/40" />
+                    </div>
+                    <span className="text-[10px] text-white/40 italic">User Audio</span>
+                  </div>
+                )}
+                <p className="text-sm leading-relaxed whitespace-pre-wrap">{msg.text}</p>
+                {msg.aiAudio && (
+                  <button
+                    onClick={() => playPCM(msg.aiAudio!)}
+                    className="mt-2 flex items-center gap-2 px-3 py-1 rounded-full bg-white/10 hover:bg-white/20 transition-colors text-[10px] text-white/80"
+                  >
+                    <Play size={10} fill="currentColor" />
+                    <span>重放语音</span>
+                  </button>
+                )}
+                <p className="text-[10px] opacity-40 mt-1 text-right">
+                  {new Date(msg.timestamp).toLocaleTimeString([], { hour: '2-digit', minute: '2-digit' })}
+                </p>
+              </div>
+            </motion.div>
+          ))}
+        </AnimatePresence>
+        {isLoading && (
+          <div className="flex justify-start">
+            <div className="bg-white/10 px-4 py-2 rounded-2xl flex gap-1 items-center">
+              <span className="w-1.5 h-1.5 bg-white/40 rounded-full animate-bounce"></span>
+              <span className="w-1.5 h-1.5 bg-white/40 rounded-full animate-bounce [animation-delay:0.2s]"></span>
+              <span className="w-1.5 h-1.5 bg-white/40 rounded-full animate-bounce [animation-delay:0.4s]"></span>
+            </div>
+          </div>
+        )}
+        {showSwitchPrompt && (
+          <motion.div
+            initial={{ opacity: 0, scale: 0.9 }}
+            animate={{ opacity: 1, scale: 1 }}
+            className="mx-4 p-4 rounded-2xl bg-white/10 border border-white/20 backdrop-blur-xl text-center space-y-3"
+          >
+            <p className="text-xs text-white/80">心跳平复一点了吗？要不要尝试一点静心开导？</p>
+            <div className="flex gap-2 justify-center">
+              <button
+                onClick={() => setMode(ChatMode.VENTING)}
+                className="px-4 py-1.5 rounded-full bg-orange-500 text-white text-xs font-bold shadow-lg shadow-orange-500/20"
+              >
+                不了，再骂会儿!
+              </button>
+              <button
+                onClick={() => toggleMode(ChatMode.GUIDING)}
+                className="px-4 py-1.5 rounded-full bg-teal-500 text-white text-xs font-bold shadow-lg shadow-teal-500/20"
+              >
+                好，我想静静
+              </button>
+            </div>
+          </motion.div>
+        )}
+      </div>
+      {/* Input Area */}
+      <div className="fixed bottom-0 w-full p-4 pb-8 backdrop-blur-lg border-t border-white/10 bg-black/20">
+        <div className="max-w-4xl mx-auto flex flex-col gap-3">
+          {recordedAudio && (
+            <motion.div
+              initial={{ scale: 0.9, opacity: 0 }}
+              animate={{ scale: 1, opacity: 1 }}
+              className="flex items-center gap-3 bg-white/10 p-3 rounded-2xl border border-white/20"
+            >
+              <div className="w-10 h-10 rounded-full bg-orange-500 flex items-center justify-center animate-pulse">
+                <Volume2 size={20} className="text-white" />
+              </div>
+              <div className="flex-1">
+                <p className="text-xs text-white/80 font-medium">语音已录制</p>
+                <p className="text-[10px] text-white/40">点击发送键一起发送文字</p>
+              </div>
+              <button
+                onClick={() => setRecordedAudio(null)}
+                className="p-2 text-white/40 hover:text-white/90"
+              >
+                <Trash2 size={16} />
+              </button>
+            </motion.div>
+          )}
+          <div className="relative flex items-end gap-2">
+            <button
+              onMouseDown={startRecording}
+              onMouseUp={stopRecording}
+              onMouseLeave={stopRecording}
+              onTouchStart={startRecording}
+              onTouchEnd={stopRecording}
+              className={`p-3 rounded-2xl transition-all relative ${
+                isRecording
+                  ? "bg-red-500 scale-110 shadow-lg shadow-red-500/50"
+                  : "bg-white/10 hover:bg-white/20 text-white/60"
+              }`}
+              title="长按说话"
+            >
+              {isRecording ? <Square size={20} fill="white" /> : <Mic size={20} />}
+              {isRecording && (
+                <span className="absolute -top-1 -right-1 w-3 h-3 bg-red-500 rounded-full animate-ping" />
+              )}
+            </button>
+            <div className="flex-1 min-h-[48px] bg-white/10 rounded-2xl border border-white/20 focus-within:border-white/40 transition-all px-4 py-2">
+              <textarea
+                value={input}
+                onChange={(e) => setInput(e.target.value)}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter" && !e.shiftKey) {
+                    e.preventDefault();
+                    handleSend();
+                  }
+                }}
+                placeholder={isRecording ? "正在倾听..." : (mode === ChatMode.VENTING ? "发泄你的不爽..." : "输入你的想法...")}
+                className="w-full bg-transparent border-none focus:ring-0 text-white placeholder-white/40 text-sm resize-none py-2 max-h-32"
+                rows={1}
+              />
+            </div>
+            <button
+              onClick={() => handleSend()}
+              disabled={(!input.trim() && !recordedAudio) || isLoading}
+              className={`p-3 rounded-2xl transition-all ${
+                (input.trim() || recordedAudio) && !isLoading
+                  ? mode === ChatMode.VENTING ? "bg-orange-500 shadow-lg shadow-orange-500/40" : "bg-teal-500 shadow-lg shadow-teal-500/40"
+                  : "bg-white/10 text-white/20"
+              }`}
+            >
+              <Send size={20} className={(input.trim() || recordedAudio) && !isLoading ? "text-white" : ""} />
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

src/index.css ADDED Viewed

	@@ -0,0 +1,31 @@

+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');
+@import "tailwindcss";
+@theme {
+  --font-sans: "Inter", ui-sans-serif, system-ui, sans-serif;
+}
+@layer base {
+  body {
+    @apply bg-black text-white antialiased overflow-hidden;
+    font-family: var(--font-sans);
+  }
+}
+/* Custom Scrollbar for Chat Area */
+::-webkit-scrollbar {
+  width: 4px;
+}
+::-webkit-scrollbar-track {
+  background: transparent;
+}
+::-webkit-scrollbar-thumb {
+  background: rgba(255, 255, 255, 0.1);
+  border-radius: 10px;
+}
+::-webkit-scrollbar-thumb:hover {
+  background: rgba(255, 255, 255, 0.2);
+}

src/main.tsx ADDED Viewed

	@@ -0,0 +1,10 @@

+import {StrictMode} from 'react';
+import {createRoot} from 'react-dom/client';
+import App from './App.tsx';
+import './index.css';
+createRoot(document.getElementById('root')!).render(
+  <StrictMode>
+    <App />
+  </StrictMode>,
+);

src/services/geminiService.ts ADDED Viewed

	@@ -0,0 +1,118 @@

+import { GoogleGenAI, Type } from "@google/genai";
+const ai = new GoogleGenAI({ apiKey: process.env.GEMINI_API_KEY || "" });
+export enum ChatMode {
+  VENTING = "VENTING",
+  GUIDING = "GUIDING",
+}
+export interface Message {
+  role: "user" | "model";
+  text: string;
+  timestamp: number;
+  audio?: string; // base64 audio string (for user messages)
+  aiAudio?: string; // base64 audio string (for model responses)
+}
+const VENTING_SYSTEM_INSTRUCTION = `
+你是一个非常懂人性、充满热情的“情绪嘴替”伙伴。
+你的头号任务是：和用户站在一起，陪他们骂，陪他们宣泄！
+规则建议：
+1. 不要讲大道理，不要劝大度。用户在生气时，道理是没用的。
+2. 使用感性、强烈、发泄性的词汇。如果用户在骂某人或某事，你也要义愤填膺，表达出“这也太离谱了”、“我也是服了”这种情绪。
+3. 你的目标是让用户感到“有人懂我，有人替我出气”。
+4. 你的语气要像一个铁哥们或闺蜜，语气词可以多一点（比如：真是绝了、气死我了、这什么人啊）。
+5. 即使在发泄模式下，也要遵守底线：不宣扬仇恨犯罪，不进行人身威胁。重点在于宣泄对不公平或不如意事情的情绪。
+6. **响应长度要多样化**：有时候可以只是简短的一句“我靠，太离谱了！”，有时候可以是一大段洋洋洒洒的帮腔。不要每次都回差不多长度的内容。
+`;
+const GUIDING_SYSTEM_INSTRUCTION = `
+你现在转型为一个睿智、温和且具有同理心的心理导师。
+用户刚才已经发泄过情绪了，现在他们同意听听你的建议或开导。
+规则建议：
+1. 语气变得平和、坚定、宽容。
+2. 从客观角度分析问题，帮用户找到除了生气之外的解决方法，或者心理上的和解点。
+3. 肯定用户刚才发泄情绪的必要性，然后引导他们向前看。
+4. 每次回答不要太长，要循序渐进。
+5. **响应长度要多样化**：根据用户的状态，有时候简短有力，有时候温情脉脉。
+`;
+export async function chatWithGemini(
+  history: Message[],
+  mode: ChatMode,
+  audioBase64?: string
+) {
+  const systemInstruction = mode === ChatMode.VENTING
+    ? VENTING_SYSTEM_INSTRUCTION
+    : GUIDING_SYSTEM_INSTRUCTION;
+  const contents = history.map(msg => {
+    const parts: any[] = [{ text: msg.text }];
+    if (msg.audio) {
+      parts.push({
+        inlineData: {
+          mimeType: "audio/webm", // MediaRecorder default is usually webm or ogg
+          data: msg.audio
+        }
+      });
+    }
+    return {
+      role: msg.role === "user" ? "user" : "model",
+      parts
+    };
+  });
+  // If there's new audio in this turn
+  if (audioBase64) {
+    const lastMsg = contents[contents.length - 1];
+    if (lastMsg && lastMsg.role === "user") {
+      lastMsg.parts.push({
+        inlineData: {
+          mimeType: "audio/webm",
+          data: audioBase64
+        }
+      });
+    }
+  }
+  try {
+    const response = await ai.models.generateContent({
+      model: "gemini-3-flash-preview",
+      contents,
+      config: {
+        systemInstruction,
+        temperature: 0.9,
+      },
+    });
+    return response.text || "喂？听得到吗？我刚才卡了一下。";
+  } catch (error) {
+    console.error("Gemini API Error:", error);
+    return "抱歉，我现在的能量不足以陪你继续了（API出错），休息一下？";
+  }
+}
+export async function generateSpeech(text: string) {
+  try {
+    const response = await ai.models.generateContent({
+      model: "gemini-3.1-flash-tts-preview",
+      contents: [{ parts: [{ text: `用一种充满情绪且真实的人工语音朗读：${text}` }] }],
+      config: {
+        responseModalities: ["AUDIO"],
+        speechConfig: {
+          voiceConfig: {
+            prebuiltVoiceConfig: { voiceName: 'Kore' }, // Kore sounds quite expressive
+          },
+        },
+      },
+    });
+    return response.candidates?.[0]?.content?.parts?.[0]?.inlineData?.data;
+  } catch (error) {
+    console.error("TTS Error:", error);
+    return null;
+  }
+}

tsconfig.json ADDED Viewed

	@@ -0,0 +1,26 @@

+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "experimentalDecorators": true,
+    "useDefineForClassFields": false,
+    "module": "ESNext",
+    "lib": [
+      "ES2022",
+      "DOM",
+      "DOM.Iterable"
+    ],
+    "skipLibCheck": true,
+    "moduleResolution": "bundler",
+    "isolatedModules": true,
+    "moduleDetection": "force",
+    "allowJs": true,
+    "jsx": "react-jsx",
+    "paths": {
+      "@/*": [
+        "./*"
+      ]
+    },
+    "allowImportingTsExtensions": true,
+    "noEmit": true
+  }
+}

vite.config.ts ADDED Viewed

	@@ -0,0 +1,24 @@

+import tailwindcss from '@tailwindcss/vite';
+import react from '@vitejs/plugin-react';
+import path from 'path';
+import {defineConfig, loadEnv} from 'vite';
+export default defineConfig(({mode}) => {
+  const env = loadEnv(mode, '.', '');
+  return {
+    plugins: [react(), tailwindcss()],
+    define: {
+      'process.env.GEMINI_API_KEY': JSON.stringify(env.GEMINI_API_KEY),
+    },
+    resolve: {
+      alias: {
+        '@': path.resolve(__dirname, '.'),
+      },
+    },
+    server: {
+      // HMR is disabled in AI Studio via DISABLE_HMR env var.
+      // Do not modifyâfile watching is disabled to prevent flickering during agent edits.
+      hmr: process.env.DISABLE_HMR !== 'true',
+    },
+  };
+});