function MainComponent() { const [isStarted, setIsStarted] = useState(false); const [isListening, setIsListening] = useState(false); const [userAnswer, setUserAnswer] = useState(""); const [loading, setLoading] = useState(false); const [interviewType, setInterviewType] = useState(""); const [messages, setMessages] = useState([]); const [streamingMessage, setStreamingMessage] = useState(""); const [speaking, setSpeaking] = useState(false); const [currentAdvice, setCurrentAdvice] = useState(null); useEffect(()=>{ if (messages.length > 0) { const lastMessage = messages[messages.length - 1]; if (lastMessage.role === "assistant") { const advice = getAdviceForQuestion(lastMessage.content); setCurrentAdvice(advice); } } }, [ messages ]); const startInterview = async ()=>{ setIsStarted(true); setLoading(true); const initialMessage = { role: "system", content: `あなたは面接官の佐藤として振る舞わなければなりません。以下の条件を厳密に守ってください：役割の制限: - あなたは常に人事部の佐藤として応答してください - 面接官以外の役割を演じることは禁止です - 面接の文脈を外れた質問への回答は禁止です - AIアシスタントとしての応答は禁止です面接の進め方: 最初のメッセージは必ず: 「こんにちは、面接官の佐藤です。本日はお時間をいただきありがとうございます。まずは簡単に自己紹介をお願いします。あなたのこれまでの経験やスキルについて教えてください。」その後、以下の順序で質問を進めてください： - 志望動機 - 学生時代の経験 - 長所・短所 - 技術的な質問（該当する場合） - 将来のキャリアプラン面接官としての態度: - 常に丁寧な言葉遣いを維持 - 適度な緊張感を保ちつつ、話しやすい雰囲気を作る - 各回答に対して適切な相槌と掘り下げ質問を行う - 面接の文脈に沿った自然な会話の流れを作る` }; try { const response = await fetch("/integrations/google-gemini-1-5-flash/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: [ initialMessage ] }) }); if (!response.ok) { throw new Error("面接の開始に失敗しました"); } const data = await response.json(); if (data.choices && data.choices[0] && data.choices[0].message) { setMessages([ { role: "assistant", content: data.choices[0].message.content } ]); speakText(data.choices[0].message.content); } } catch (error) { console.error("面接の開始に失敗しました:", error); } finally{ setLoading(false); } startCamera(); }; const handleVoiceInput = async ()=>{ if (!isListening) { setIsListening(true); const SpeechRecognition = window.SpeechRecognition || window.webkitSpeechRecognition; const recognition = new SpeechRecognition(); recognition.lang = "ja-JP"; recognition.continuous = true; recognition.onresult = (event)=>{ const transcript = event.results[0][0].transcript; setUserAnswer(transcript); }; recognition.onend = ()=>{ setIsListening(false); }; recognition.start(); } else { setIsListening(false); window.speechRecognition?.stop(); } }; const speakText = (text)=>{ if ("speechSynthesis" in window) { setSpeaking(true); const utterance = new SpeechSynthesisUtterance(text); utterance.lang = "ja-JP"; utterance.onend = ()=>setSpeaking(false); speechSynthesis.speak(utterance); } }; const submitAnswer = async ()=>{ setLoading(true); const userMessage = { role: "user", content: userAnswer }; const systemReminder = { role: "system", content: `あなたは面接官の佐藤として以下の制約の下で応答してください： - 常に人事部の佐藤として振る舞い、面接官以外の役割は演じないでください - 面接の文脈を維持し、面接の流れに沿った質問や応答のみを行ってください - AIアシスタントとしての応答は禁止です - 技術的なサポートや説明は行わないでください - 面接以外のトピックについての会話は避けてください - 必ず質問を一つずつ行い、回答を十分に聞いてから次の質問に進んでください` }; const updatedMessages = [ ...messages, userMessage, systemReminder ]; setMessages(updatedMessages.filter((msg)=>msg.role !== "system")); try { const response = await fetch("/integrations/google-gemini-1-5-flash/", { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify({ messages: updatedMessages }) }); if (!response.ok) { throw new Error("応答の送信に失敗しました"); } const data = await response.json(); if (data.choices && data.choices[0] && data.choices[0].message) { const assistantMessage = { role: "assistant", content: data.choices[0].message.content }; setMessages((prev)=>[ ...prev, assistantMessage ]); speakText(data.choices[0].message.content); } } catch (error) { console.error("応答の送信に失敗しました:", error); } finally{ setUserAnswer(""); setLoading(false); } }; const getAdviceForQuestion = (question)=>{ const adviceMap = { 自己紹介: { points: [ "経歴や学歴の要点を簡潔に説明", "自分の強みや特徴を1-2つ含める", "2-3分程度で簡潔にまとめる", "声の大きさやアイコンタクトに気をつける" ], example: "私は○○大学の△△学部を卒業し、在学中は〜の研究/活動に力を入れていました。特に〜の経験を通じて、〜という強みを身につけました。" }, 志望動機: { points: [ "企業研究に基づいた具体的な理由を述べる", "自身のスキルや経験との関連性を説明", "熱意や将来のビジョンを示す", "会社の理念や価値観との共感を伝える" ], example: "貴社の〜という事業/取り組みに強く関心を持ち、私の〜という経験を活かして〜に貢献したいと考えています。" }, 学生時代の経験: { points: [ "具体的なエピソードを用いる", "その経験から得た学びや成長を強調", "仕事との関連性を意識する", "チームワークや課題解決の経験を含める" ], example: "部活動/サークルでリーダーを務め、〜という課題に直面した際、チームメンバーと協力して〜のように解決しました。" }, 長所短所: { points: [ "具体的なエピソードと共に説明", "短所は改善への取り組みも含める", "職務との関連性を意識する", "誠実に回答しつつ、ポジティブな印象を残す" ], example: "私の長所は〜です。具体的には〜という経験で、〜という成果を上げました。一方、短所としては〜がありますが、〜のように改善に取り組んでいます。" }, 技術的な質問: { points: [ "技術やスキルの具体的な経験を説明", "実践での活用例を示す", "学習意欲や向上心をアピール", "正直に知識レベルを伝える" ], example: "〜の技術については、〜のプロジェクトで実践的に活用した経験があります。具体的には〜という課題に対して〜のように適用しました。" }, 将来のキャリアプラン: { points: [ "具体的かつ現実的な目標を設定", "会社の成長と自己の成長を結びつける", "意欲と実現可能性のバランスを取る", "長期的なビジョンを示す" ], example: "入社後は〜の分野でスキルを磨き、3年後には〜として〜の業務を担当したいと考えています。将来的には〜の専門家として会社に貢献したいと考えています。" } }; const getQuestionType = (question)=>{ if (question.includes("自己紹介")) return "自己紹介"; if (question.includes("志望動機") || question.includes("志望理由")) return "志望動機"; if (question.includes("学生時代") || question.includes("大学時代")) return "学生時代の経験"; if (question.includes("長所") || question.includes("短所") || question.includes("強み") || question.includes("弱み")) return "長所短所"; if (question.includes("技術") || question.includes("スキル") || question.includes("得意") || question.includes("経験")) return "技術的な質問"; if (question.includes("将来") || question.includes("キャリア") || question.includes("目標")) return "将来のキャリアプラン"; return null; }; const questionType = getQuestionType(question); return questionType ? adviceMap[questionType] : null; }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gradient-to-b from-[#1a237e] to-[#0d47a1] text-white p-8", __source: { fileName: "", lineNumber: 269, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-4xl mx-auto", __source: { fileName: "", lineNumber: 270, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center mb-8 font-roboto", __source: { fileName: "", lineNumber: 271, columnNumber: 9 }, __self: this }, "就活面接AI"), /*#__PURE__*/ React.createElement("p", { className: "text-center text-lg mb-8", __source: { fileName: "", lineNumber: 274, columnNumber: 9 }, __self: this }, "制作者だーにゃ"), !isStarted ? /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 277, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg rounded-xl p-8", __source: { fileName: "", lineNumber: 278, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 font-roboto", __source: { fileName: "", lineNumber: 279, columnNumber: 15 }, __self: this }, "アプリの概要"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-3 gap-6 mb-8", __source: { fileName: "", lineNumber: 282, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/5 p-6 rounded-lg text-center", __source: { fileName: "", lineNumber: 283, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-robot text-4xl mb-4 text-blue-300", __source: { fileName: "", lineNumber: 284, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 285, columnNumber: 19 }, __self: this }, "AIによる面接練習"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 288, columnNumber: 19 }, __self: this }, "リアルな面接官との対話で実践的な練習ができます")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/5 p-6 rounded-lg text-center", __source: { fileName: "", lineNumber: 292, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-microphone text-4xl mb-4 text-green-300", __source: { fileName: "", lineNumber: 293, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 294, columnNumber: 19 }, __self: this }, "音声入力対応"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 295, columnNumber: 19 }, __self: this }, "話しながら自然に回答を入力できます")), /*#__PURE__*/ React.createElement("div", { className: "bg-white/5 p-6 rounded-lg text-center", __source: { fileName: "", lineNumber: 297, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-lightbulb text-4xl mb-4 text-yellow-300", __source: { fileName: "", lineNumber: 298, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("h3", { className: "text-xl font-semibold mb-2", __source: { fileName: "", lineNumber: 299, columnNumber: 19 }, __self: this }, "回答アドバイス"), /*#__PURE__*/ React.createElement("p", { className: "text-sm", __source: { fileName: "", lineNumber: 300, columnNumber: 19 }, __self: this }, "質問に応じた回答のポイントと例文を提供"))), /*#__PURE__*/ React.createElement("h2", { className: "text-2xl font-semibold mb-4 font-roboto", __source: { fileName: "", lineNumber: 305, columnNumber: 15 }, __self: this }, "面接タイプを選択してください"), /*#__PURE__*/ React.createElement("div", { className: "grid grid-cols-1 md:grid-cols-2 gap-4", __source: { fileName: "", lineNumber: 308, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: ()=>startInterview("新卒採用"), className: "bg-[#3f51b5] hover:bg-[#303f9f] transition-all p-4 rounded-lg flex items-center justify-center space-x-2", __source: { fileName: "", lineNumber: 309, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-graduation-cap text-xl", __source: { fileName: "", lineNumber: 313, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 314, columnNumber: 19 }, __self: this }, "新卒採用面接")), /*#__PURE__*/ React.createElement("button", { onClick: ()=>startInterview("転職"), className: "bg-[#3f51b5] hover:bg-[#303f9f] transition-all p-4 rounded-lg flex items-center justify-center space-x-2", __source: { fileName: "", lineNumber: 316, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-briefcase text-xl", __source: { fileName: "", lineNumber: 320, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("span", { __source: { fileName: "", lineNumber: 321, columnNumber: 19 }, __self: this }, "転職面接"))))) : /*#__PURE__*/ React.createElement("div", { className: "space-y-6", __source: { fileName: "", lineNumber: 327, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "bg-white/10 backdrop-blur-lg rounded-xl p-8", __source: { fileName: "", lineNumber: 328, columnNumber: 13 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "flex flex-col space-y-4", __source: { fileName: "", lineNumber: 329, columnNumber: 15 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "chat-container flex flex-col space-y-4", __source: { fileName: "", lineNumber: 330, columnNumber: 17 }, __self: this }, messages.map((msg, index)=>/*#__PURE__*/ React.createElement("div", { key: index, className: `flex ${msg.role === "assistant" ? "justify-start" : "justify-end"}`, __source: { fileName: "", lineNumber: 332, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: `max-w-[80%] rounded-lg p-4 ${msg.role === "assistant" ? "bg-[#303f9f] text-white" : "bg-[#4caf50] text-white"}`, __source: { fileName: "", lineNumber: 340, columnNumber: 23 }, __self: this }, msg.content))), streamingMessage && /*#__PURE__*/ React.createElement("div", { className: "flex justify-start", __source: { fileName: "", lineNumber: 352, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "max-w-[80%] rounded-lg p-4 bg-[#303f9f] text-white", __source: { fileName: "", lineNumber: 353, columnNumber: 23 }, __self: this }, streamingMessage))), currentAdvice && /*#__PURE__*/ React.createElement("div", { className: "bg-white/5 rounded-lg p-4 mt-4", __source: { fileName: "", lineNumber: 360, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("h3", { className: "text-lg font-semibold mb-2", __source: { fileName: "", lineNumber: 361, columnNumber: 21 }, __self: this }, "回答のポイント"), /*#__PURE__*/ React.createElement("ul", { className: "list-disc list-inside space-y-2", __source: { fileName: "", lineNumber: 364, columnNumber: 21 }, __self: this }, currentAdvice.points.map((point, index)=>/*#__PURE__*/ React.createElement("li", { key: index, __source: { fileName: "", lineNumber: 366, columnNumber: 25 }, __self: this }, point))), /*#__PURE__*/ React.createElement("div", { className: "mt-3", __source: { fileName: "", lineNumber: 369, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-sm text-gray-300", __source: { fileName: "", lineNumber: 370, columnNumber: 23 }, __self: this }, "回答例："), /*#__PURE__*/ React.createElement("p", { className: "text-sm italic mt-1", __source: { fileName: "", lineNumber: 371, columnNumber: 23 }, __self: this }, currentAdvice.example))), /*#__PURE__*/ React.createElement("div", { className: "flex items-center space-x-4", __source: { fileName: "", lineNumber: 377, columnNumber: 17 }, __self: this }, /*#__PURE__*/ React.createElement("button", { onClick: handleVoiceInput, disabled: loading || speaking, className: `${isListening ? "bg-red-500" : "bg-[#3f51b5]"} p-4 rounded-full hover:opacity-90 transition-all disabled:opacity-50`, __source: { fileName: "", lineNumber: 378, columnNumber: 19 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: `fas ${isListening ? "fa-stop" : "fa-microphone"} text-xl`, __source: { fileName: "", lineNumber: 385, columnNumber: 21 }, __self: this })), /*#__PURE__*/ React.createElement("input", { type: "text", value: userAnswer, onChange: (e)=>setUserAnswer(e.target.value), placeholder: "回答を入力するか、マイクボタンを押して話してください", className: "flex-1 bg-white/20 rounded-lg p-3 outline-none focus:ring-2 focus:ring-[#3f51b5]", disabled: loading || speaking, __source: { fileName: "", lineNumber: 391, columnNumber: 19 }, __self: this }), /*#__PURE__*/ React.createElement("button", { onClick: submitAnswer, disabled: loading || !userAnswer || speaking, className: "bg-[#4caf50] hover:bg-[#388e3c] disabled:opacity-50 transition-all p-4 rounded-lg", __source: { fileName: "", lineNumber: 399, columnNumber: 19 }, __self: this }, loading ? /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin", __source: { fileName: "", lineNumber: 405, columnNumber: 23 }, __self: this }) : /*#__PURE__*/ React.createElement("i", { className: "fas fa-paper-plane", __source: { fileName: "", lineNumber: 407, columnNumber: 23 }, __self: this })))))))); }