function AiAvatarContainer({ width, height, bgColor, borderRadius, fontColor, fontFamily, children }) { return /*#__PURE__*/ React.createElement("div", { className: `w-[${width}] h-[${height}] bg-[${bgColor}] rounded-[${borderRadius}] flex items-center justify-center`, __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: `text-[${fontColor}] font-${fontFamily}`, __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, children)); } function AiAvatarContainerStory() { return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 11, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(AiAvatarContainer, { width: "400px", height: "600px", bgColor: "#e0e0e0", borderRadius: "lg", fontColor: "#999999", fontFamily: "crimson-text", __source: { fileName: "", lineNumber: 12, columnNumber: 7 }, __self: this }, "AIアバター")); } function MainComponent() { const [emotion, setEmotion] = React.useState('neutral'); const [vrmUrl, setVrmUrl] = React.useState(''); const [logs, setLogs] = React.useState([]); const [learningTime, setLearningTime] = React.useState([]); const [canvasContent, setCanvasContent] = React.useState(''); const [cameraEnabled, setCameraEnabled] = React.useState(false); const [cameraImage, setCameraImage] = React.useState(null); const handleEmotionChange = ()=>{ setEmotion(emotion === 'neutral' ? 'happy' : 'neutral'); }; const handleVRMChange = ()=>{ const newVrmUrl = prompt('Enter new VRM URL'); setVrmUrl(newVrmUrl); }; const handleFetchResponse = async (endpoint, body)=>{ const response = await fetch(endpoint, { method: 'POST', body: JSON.stringify(body), headers: { 'Content-Type': 'application/json' } }); return response.json(); }; const handleCameraToggle = ()=>{ setCameraEnabled(!cameraEnabled); }; const handleCaptureImage = (image)=>{ setCameraImage(image); handleFetchResponse('/integrations/gpt-vision/', { messages: [ { role: 'user', content: [ { type: 'text', text: 'Analyze this image' }, { type: 'image_url', image_url: { url: `data:image/jpeg;base64,${image}` } } ] } ] }).then((result)=>{ const message = result.choices[0].message.content; setCanvasContent(message); }); }; return /*#__PURE__*/ React.createElement("div", { className: "w-full h-full flex flex-col items-center bg-[#f5f5f5]", __source: { fileName: "", lineNumber: 48, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full flex justify-between items-center bg-[#010101] text-white p-4", __source: { fileName: "", lineNumber: 49, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "font-roboto text-xl", __source: { fileName: "", lineNumber: 50, columnNumber: 9 }, __self: this }, "学習支援アプリ"), /*#__PURE__*/ React.createElement("button", { className: "bg-[#0066cc] px-4 py-2 rounded font-roboto", __source: { fileName: "", lineNumber: 51, columnNumber: 9 }, __self: this }, "ログイン")), /*#__PURE__*/ React.createElement("div", { className: "w-full flex-1 flex", __source: { fileName: "", lineNumber: 53, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-2/3 p-4 flex flex-col items-center", __source: { fileName: "", lineNumber: 54, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement(AiAvatarContainer, { width: "400px", height: "600px", bgColor: "#e0e0e0", borderRadius: "lg", fontColor: "#999999", fontFamily: "crimson-text", __source: { fileName: "", lineNumber: 55, columnNumber: 11 }, __self: this }, "AIアバター ", emotion === 'happy' ? '😊' : '😐'), /*#__PURE__*/ React.createElement("div", { className: "mt-4 w-[400px] flex justify-around", __source: { fileName: "", lineNumber: 65, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleEmotionChange, className: "bg-[#007acc] px-4 py-2 rounded text-white font-roboto", __source: { fileName: "", lineNumber: 66, columnNumber: 13 }, __self: this }, "感情表現"), /*#__PURE__*/ React.createElement("button", { onClick: handleVRMChange, className: "bg-[#007acc] px-4 py-2 rounded text-white font-roboto", __source: { fileName: "", lineNumber: 67, columnNumber: 13 }, __self: this }, "VRM変更"))), /*#__PURE__*/ React.createElement("div", { className: "w-1/3 p-4", __source: { fileName: "", lineNumber: 70, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "w-full h-[200px] bg-[#e0e0e0] rounded-lg flex items-center justify-center", __source: { fileName: "", lineNumber: 71, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("span", { className: "text-[#999999] font-crimson-text", __source: { fileName: "", lineNumber: 72, columnNumber: 13 }, __self: this }, "キャンバス ", canvasContent)), /*#__PURE__*/ React.createElement("div", { className: "mt-4 w-full flex flex-col items-center", __source: { fileName: "", lineNumber: 74, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 75, columnNumber: 13 }, __self: this }, "学習のログ"), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[200px] bg-[#f0f0f0] rounded-lg overflow-auto p-2", __source: { fileName: "", lineNumber: 76, columnNumber: 13 }, __self: this }, logs.map((log, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-[#999999] font-roboto", __source: { fileName: "", lineNumber: 78, columnNumber: 17 }, __self: this }, log)))), /*#__PURE__*/ React.createElement("button", { onClick: handleCameraToggle, className: "bg-[#007acc] px-4 py-2 rounded text-white font-roboto my-4", __source: { fileName: "", lineNumber: 82, columnNumber: 11 }, __self: this }, cameraEnabled ? 'カメラをオフ' : 'カメラをオン'), cameraEnabled && /*#__PURE__*/ React.createElement(Camera, { onCapture: handleCaptureImage, __source: { fileName: "", lineNumber: 85, columnNumber: 29 }, __self: this }))), /*#__PURE__*/ React.createElement("div", { className: "w-full bg-[#0066cc] text-white p-4", __source: { fileName: "", lineNumber: 88, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "font-roboto text-lg", __source: { fileName: "", lineNumber: 89, columnNumber: 9 }, __self: this }, "勉強時間の記録"), /*#__PURE__*/ React.createElement("div", { className: "w-full h-[200px] bg-[#f0f0f0] rounded-lg mt-2", __source: { fileName: "", lineNumber: 90, columnNumber: 9 }, __self: this }, learningTime.map((time, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: "text-[#999999] font-roboto", __source: { fileName: "", lineNumber: 92, columnNumber: 13 }, __self: this }, time))))); } function Camera({ onCapture }) { const videoRef = React.useRef(null); React.useEffect(()=>{ navigator.mediaDevices.getUserMedia({ video: true }).then((stream)=>{ videoRef.current.srcObject = stream; videoRef.current.play(); }); return ()=>{ if (videoRef.current && videoRef.current.srcObject) { videoRef.current.srcObject.getTracks().forEach((track)=>track.stop()); } }; }, []); const handleCapture = ()=>{ const canvas = document.createElement('canvas'); canvas.width = videoRef.current.videoWidth; canvas.height = videoRef.current.videoHeight; const ctx = canvas.getContext('2d'); ctx.drawImage(videoRef.current, 0, 0, canvas.width, canvas.height); onCapture(canvas.toDataURL('image/jpeg').split(',')[1]); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 126, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("video", { ref: videoRef, className: "w-full mb-2", __source: { fileName: "", lineNumber: 127, columnNumber: 7 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: handleCapture, className: "bg-[#007acc] px-4 py-2 rounded text-white font-roboto", __source: { fileName: "", lineNumber: 128, columnNumber: 7 }, __self: this }, "撮影")); }