import { useEffect, useState } from "react";
interface State {
is_listening: boolean;
is_tts_playing: boolean;
current_input_text: string;
current_reply_text: string;
last_command_result?: {
response_to_user: string;
tts_audio_url?: string;
};
}
function App
() {
const [state, setState] = useState<State>
({
is_listening: false,
is_tts_playing: false,
current_input_text: "",
current_reply_text: "",
}
);
const API_BASE = "http://127.0.0.1:5000";
//
轮询获取当前状态
useEffect
(() => {
const interval =
setInterval(async
() => {
try {
const res = await fetch
(`${API_BASE}/api/state`
);
const data = await res.json
();
setState
(data
);
} catch
(err
) {
console.warn
("无法连接到后端"
);
}
}, 500
); // 每 500ms 更新
一次
return
() => clearInterval
(interval
);
}, []
);
// 切换录音状态
const toggleListening = async
() => {
try {
await fetch
(`${API_BASE}/api/state`, {
method: "POST",
headers: { "Content-Type": "application/json" },
body: JSON.stringify
({ is_listening: !state.is_listening }
),
}
);
} catch
(err
) {
alert
("无法连接到后端服务，请检查是否已启动！"
);
}
};
return
(
<div style={{ padding: "40px", fontFamily: "Arial" }}>
<h1>🎙️ AI 语音助手</h1>
<div>
<button
onClick={toggleListening}
disabled={state.is_tts_playing}
style={{
padding: "15px 30px",
fontSize: "18px",
backgroundColor: state.is_listening ? "#d32f2f" : "#4caf50",
color: "white",
border: "none",
borderRadius: "8px",
cursor: "pointer",
}}
>
{state.is_listening ? "🛑 停止录音" : "🟢 开始录音"}
</button>
{state.is_tts_playing && <p>🔊 AI 正在说话…</p>}
</div>
<div style={{ marginTop: "30px" }}>
<h3>你说：</h3>
<p style={{ fontStyle: state.current_input_text ? "normal" : "italic", color: "#555" }}>
{state.current_input_text || "等待语音输入…"}
</p>
<h3>AI 回答：</h3>
<p style={{ fontStyle: state.current_reply_text ? "normal" : "italic", color: "#2196F3" }}>
{state.current_reply_text || "等待 AI 回复…"}
</p>
</div>
<footer style={{ marginTop: "50px", fontSize: "12px", color: "#aaa" }}>
后端状态
轮询中 | API: {API_BASE}
</footer>
</div>
);
}
export default App;
{
"$schema": "../node_modules/@tauri-apps/cli/config.schema.json",
"productName": "my-tauri-app",
"version": "0.1.0",
"identifier": "com.tauri.dev",
"build": {
"frontendDist": "../dist",
"devUrl": "http://172.19.123.45:1573",
"beforeDevCommand": "npm run dev",
"beforeBuildCommand": "npm run build"
},
"app": {
"windows": [
{
"title": "my-tauri-app",
"width": 800,
"height": 600,
"resizable": true,
"fullscreen": false,
"x": 100,
"y": 100
}
],
"security": {
"csp": null
}
},
"bundle": {
"active": true,
"targets": "all",
"icon": [
"icons/icon-32.png",
"icons/icon-128.png",
"icons/icon-256x256.png",
"icons/icon.icns",
"icons/icon.ico"
]
}
}
本文介绍了一个简单的 JavaScript 函数，该函数使用 console.log 打印数字 11，并通过 setInterval 实现每秒调用此函数。
扫一扫
4279
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
