function ImageTextReader({ title, onImageUpload }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg w-[300px] md:w-[500px]", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", className: "mb-4 p-2.5 border border-gray-300 rounded-lg w-full", name: "imageFile", onChange: onImageUpload, __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full py-2.5 bg-blue-500 text-white font-semibold rounded-lg", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "画像をアップロード"))); } function ImageTextReaderStory() { const handleImageUpload = async (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = async ()=>{ const base64Image = reader.result; const ocrResponse = await fetch("https://api.ocr.space/parse/image", { method: "POST", headers: { "apikey": "your-api-key", "Content-Type": "application/json" }, body: JSON.stringify({ base64Image, language: "jpn" }) }); const ocrData = await ocrResponse.json(); const extractedText = ocrData.ParsedResults[0].ParsedText; const searchResponse = await fetch(`https://api.example.com/search?q=${encodeURIComponent(extractedText)}`); const searchData = await searchResponse.json(); console.log(searchData); }; } }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 53, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageTextReader, { title: "画像を読み込ませる事により画像内の文章問題を読み取りインターネットから情報を照らし合わせ解答を出すブラウザ", onImageUpload: handleImageUpload, __source: { fileName: "", lineNumber: 54, columnNumber: 7 }, __self: this })); } function ImageTextReader2({ title, onImageUpload }) { return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col items-center justify-center min-h-screen bg-gray-100", __source: { fileName: "", lineNumber: 3, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-3xl font-bold mb-6 font-roboto", __source: { fileName: "", lineNumber: 4, columnNumber: 7 }, __self: this }, title), /*#__PURE__*/ React.createElement("div", { className: "bg-white p-8 rounded-lg shadow-lg w-[300px] md:w-[500px]", __source: { fileName: "", lineNumber: 5, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("input", { type: "file", accept: "image/*", className: "mb-4 p-2.5 border border-gray-300 rounded-lg w-full", name: "imageFile", onChange: onImageUpload, __source: { fileName: "", lineNumber: 6, columnNumber: 9 }, __self: this }), /*#__PURE__*/ React.createElement("button", { className: "w-full py-2.5 bg-blue-500 text-white font-semibold rounded-lg", __source: { fileName: "", lineNumber: 13, columnNumber: 9 }, __self: this }, "画像をアップロード"))); } function ImageTextReader2Story() { const handleImageUpload = (event)=>{ const file = event.target.files[0]; console.log(file); }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 28, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageTextReader2, { title: "画像内の文章問題を読み取るブラウザ", onImageUpload: handleImageUpload, __source: { fileName: "", lineNumber: 29, columnNumber: 7 }, __self: this })); } function MainComponent() { const handleImageUpload = async (event)=>{ const file = event.target.files[0]; if (file) { const reader = new FileReader(); reader.readAsDataURL(file); reader.onload = async ()=>{ const base64Image = reader.result; const ocrResponse = await fetch("https://api.ocr.space/parse/image", { method: "POST", headers: { "apikey": "your-api-key", "Content-Type": "application/json" }, body: JSON.stringify({ base64Image, language: "jpn" }) }); const ocrData = await ocrResponse.json(); const extractedText = ocrData.ParsedResults[0].ParsedText; const searchResponse = await fetch(`https://api.example.com/search?q=${encodeURIComponent(extractedText)}`); const searchData = await searchResponse.json(); console.log(searchData); }; } }; return /*#__PURE__*/ React.createElement("div", { __source: { fileName: "", lineNumber: 33, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement(ImageTextReader2, { title: "画像を読み込ませる事により画像内の文章問題を読み取りインターネットから情報を照らし合わせ解答を出すブラウザ", onImageUpload: handleImageUpload, __source: { fileName: "", lineNumber: 34, columnNumber: 7 }, __self: this })); }