function MainComponent() { const [subject, setSubject] = React.useState(''); const [isLoading, setIsLoading] = React.useState(false); const [isCanvasEnabled, setIsCanvasEnabled] = React.useState(false); const [evaluationResult, setEvaluationResult] = React.useState(null); const [brushSize, setBrushSize] = React.useState(5); const [isDrawing, setIsDrawing] = React.useState(false); const canvasRef = React.useRef(null); React.useEffect(()=>{ const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); ctx.fillStyle = '#FFFFFF'; ctx.fillRect(0, 0, canvas.width, canvas.height); }, []); const getSubject = async ()=>{ setIsLoading(true); const randomPage = Math.floor(Math.random() * 1000) + 1; const randomWord = Math.floor(Math.random() * 30) + 1; const prompt = `イラストのお題を最大3単語で表現。\n### 国語辞典 ${randomPage}ページの ${randomWord}個目の単語を想定。シンプルで物理的に描けるものに限定。\n##出力フォーマット\n日本語お題 / 英語お題`; const response = await fetch('/integrations/anthropic-claude-sonnet/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: prompt } ] }) }); const data = await response.json(); const subjectParts = data.choices[0].message.content.split(' / '); setSubject(subjectParts.length === 2 ? data.choices[0].message.content : ''); setIsLoading(false); setIsCanvasEnabled(true); }; const requestReview = async ()=>{ setIsLoading(true); const canvas = canvasRef.current; const dataURL = canvas.toDataURL('image/png').split(',')[1]; const response = await fetch('/integrations/gpt-vision/', { method: 'POST', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ messages: [ { role: 'user', content: [ { type: 'image_url', image_url: { url: `data:image/png;base64,${dataURL}` } }, { type: 'text', text: `テーマ「${subject.split(' / ')[0]}」にあった絵であるか評価してください。\n出力フォーマット\nScore x / 100\n日本語での評価\n英語での評価` } ] } ] }) }); const data = await response.json(); setEvaluationResult(data.choices[0].message.content); setIsLoading(false); }; const handleRetry = ()=>{ const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); ctx.fillStyle = '#FFFFFF'; ctx.fillRect(0, 0, canvas.width, canvas.height); setSubject(''); setIsCanvasEnabled(false); setEvaluationResult(null); }; const handlePenClick = ()=>{ setBrushSize(5); }; const handleEraserClick = ()=>{ setBrushSize(30); }; const adjustPosition = (e)=>{ const canvas = canvasRef.current; const rect = canvas.getBoundingClientRect(); const scale = { x: canvas.width / rect.width, y: canvas.height / rect.height }; let x, y; if (e.touches) { x = (e.touches[0].clientX - rect.left) * scale.x; y = (e.touches[0].clientY - rect.top) * scale.y; } else { x = (e.clientX - rect.left) * scale.x; y = (e.clientY - rect.top) * scale.y; } return { x, y }; }; const startDrawing = (e)=>{ e.preventDefault(); if (!isCanvasEnabled) return; setIsDrawing(true); const { x, y } = adjustPosition(e); const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); ctx.lineWidth = brushSize; ctx.lineCap = 'round'; ctx.strokeStyle = brushSize === 30 ? '#FFFFFF' : '#000000'; ctx.beginPath(); ctx.moveTo(x, y); }; const draw = (e)=>{ e.preventDefault(); if (!isDrawing) return; const { x, y } = adjustPosition(e); const canvas = canvasRef.current; const ctx = canvas.getContext('2d'); ctx.lineTo(x, y); ctx.stroke(); }; const stopDrawing = (e)=>{ e.preventDefault(); setIsDrawing(false); }; return /*#__PURE__*/ React.createElement("div", { className: "min-h-screen bg-gray-100 font-sans", __source: { fileName: "", lineNumber: 143, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-4xl font-bold text-center pt-8 pb-4", __source: { fileName: "", lineNumber: 144, columnNumber: 7 }, __self: this }, "You are a painter!"), /*#__PURE__*/ React.createElement("div", { className: "max-w-3xl mx-auto bg-white shadow-lg rounded-lg p-6", __source: { fileName: "", lineNumber: 145, columnNumber: 7 }, __self: this }, subject ? /*#__PURE__*/ React.createElement("p", { className: "text-xl mb-4", __source: { fileName: "", lineNumber: 147, columnNumber: 11 }, __self: this }, "お題: ", subject.split(' / ')[0], " / Subject: ", subject.split(' / ')[1]) : /*#__PURE__*/ React.createElement("button", { className: `bg-blue-500 text-white px-4 py-2 rounded ${isLoading ? 'opacity-50 cursor-not-allowed' : ''}`, onClick: getSubject, disabled: isLoading, __source: { fileName: "", lineNumber: 149, columnNumber: 11 }, __self: this }, "Get a subject"), /*#__PURE__*/ React.createElement("canvas", { ref: canvasRef, className: "border rounded mt-4 w-full", style: { touchAction: 'none' }, width: "1024", height: "768", onTouchStart: startDrawing, onTouchMove: draw, onTouchEnd: stopDrawing, onMouseDown: startDrawing, onMouseMove: draw, onMouseUp: stopDrawing, onMouseLeave: stopDrawing, __source: { fileName: "", lineNumber: 151, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("div", { className: "mt-4 flex justify-center space-x-4", __source: { fileName: "", lineNumber: 152, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-[#333] px-2 py-1 rounded", onClick: handlePenClick, __source: { fileName: "", lineNumber: 153, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-pen text-xl", __source: { fileName: "", lineNumber: 153, columnNumber: 86 }, __self: this })), /*#__PURE__*/ React.createElement("button", { className: "text-[#333] px-2 py-1 rounded", onClick: handleEraserClick, __source: { fileName: "", lineNumber: 154, columnNumber: 11 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-eraser text-2xl", __source: { fileName: "", lineNumber: 154, columnNumber: 89 }, __self: this }))), evaluationResult && /*#__PURE__*/ React.createElement("div", { className: "mt-6", __source: { fileName: "", lineNumber: 156, columnNumber: 30 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-lg mb-2 whitespace-pre-wrap", __source: { fileName: "", lineNumber: 156, columnNumber: 52 }, __self: this }, evaluationResult)), /*#__PURE__*/ React.createElement("div", { className: "mt-6 space-x-4", __source: { fileName: "", lineNumber: 157, columnNumber: 9 }, __self: this }, subject && /*#__PURE__*/ React.createElement(React.Fragment, null, /*#__PURE__*/ React.createElement("button", { className: `bg-blue-500 text-white px-4 py-2 rounded ${isLoading ? 'hidden' : ''}`, onClick: requestReview, __source: { fileName: "", lineNumber: 160, columnNumber: 15 }, __self: this }, "Review request"), /*#__PURE__*/ React.createElement("button", { className: "bg-gray-500 text-white px-4 py-2 rounded", onClick: handleRetry, __source: { fileName: "", lineNumber: 161, columnNumber: 15 }, __self: this }, "Retry")))), isLoading && /*#__PURE__*/ React.createElement("div", { className: "fixed inset-0 flex items-center justify-center bg-black bg-opacity-50", __source: { fileName: "", lineNumber: 166, columnNumber: 21 }, __self: this }, /*#__PURE__*/ React.createElement("i", { className: "fas fa-spinner fa-spin text-4xl text-white", __source: { fileName: "", lineNumber: 166, columnNumber: 108 }, __self: this }))); }