function MainComponent() { const [isLoading, setIsLoading] = React.useState(false); const [imageData, setImageData] = React.useState(''); const fetchImageData = async ()=>{ setIsLoading(true); try { const response = await fetch('/integrations/gpt-vision/', { method: 'POST', body: JSON.stringify({ model: 'gpt-4-vision-preview', messages: [ { role: 'user', content: [ { type: 'image_url', image_url: 'data:image/jpeg;base64,...' // base64 encoded image string } ] } ] }) }); if (!response.ok) { throw new Error(`Error: ${response.statusText}`); } const data = await response.json(); if (data.choices[0] && data.choices[0].message) { setImageData(data.choices[0].message.content); } } catch (error) { console.error('Fetching error:', error); } setIsLoading(false); }; const generateHtmlCss = async ()=>{ setIsLoading(true); try { const response = await fetch('/integrations/chat-gpt/conversationgpt4', { method: 'POST', body: JSON.stringify({ messages: [ { role: 'user', content: 'Please provide an HTML and CSS representation of the given image.' } ], system_prompt: 'Translate the image content to HTML and CSS', max_tokens: 2000 }) }); if (!response.ok) { throw new Error(`Error: ${response.statusText}`); } const data = await response.json(); setImageData(data.result); } catch (error) { console.error('Fetching error:', error); } setIsLoading(false); }; React.useEffect(()=>{ fetchImageData(); generateHtmlCss(); }, []); return /*#__PURE__*/ React.createElement("div", { className: "flex flex-col font-roboto bg-[#010101] text-[#FFFFFF]", __source: { fileName: "", lineNumber: 81, columnNumber: 5 }, __self: this }, /*#__PURE__*/ React.createElement("style", { jsx: true, global: true, __source: { fileName: "", lineNumber: 82, columnNumber: 7 }, __self: this }, ` .neway-container { display: flex; flex-direction: column; } .neway-header { display: flex; } .neway-logo { flex: none; width: 300px; height: 300px; padding: 16px; } .neway-main-content { flex: grow; padding: 16px; } .neway-contact-button { margin-top: 16px; padding: 8px 24px; border: 1px solid #FFFFFF; color: white; cursor: pointer; } .neway-next-button { flex: none; width: 100px; height: 300px; padding: 16px; cursor: pointer; } .loading-text { display: flex; justify-content: center; align-items: center; height: 100%; } `), /*#__PURE__*/ React.createElement("div", { className: "neway-header", __source: { fileName: "", lineNumber: 121, columnNumber: 7 }, __self: this }, /*#__PURE__*/ React.createElement("div", { className: "neway-logo", __source: { fileName: "", lineNumber: 122, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("p", { className: "text-6xl font-bold", __source: { fileName: "", lineNumber: 123, columnNumber: 11 }, __self: this }, "NEWAY", /*#__PURE__*/ React.createElement("br", { __source: { fileName: "", lineNumber: 123, columnNumber: 50 }, __self: this }), "PROD.")), /*#__PURE__*/ React.createElement("div", { className: "neway-main-content", __source: { fileName: "", lineNumber: 125, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("h1", { className: "text-5xl font-bold", __source: { fileName: "", lineNumber: 126, columnNumber: 11 }, __self: this }, "Nová cesta pro Vaše nápady"), /*#__PURE__*/ React.createElement("button", { className: "neway-contact-button", __source: { fileName: "", lineNumber: 127, columnNumber: 11 }, __self: this }, "Kontakt")), /*#__PURE__*/ React.createElement("div", { className: "neway-next-button", __source: { fileName: "", lineNumber: 129, columnNumber: 9 }, __self: this }, /*#__PURE__*/ React.createElement("button", { className: "text-4xl", __source: { fileName: "", lineNumber: 130, columnNumber: 11 }, __self: this }, ">"))), isLoading ? /*#__PURE__*/ React.createElement("div", { className: "loading-text", __source: { fileName: "", lineNumber: 134, columnNumber: 9 }, __self: this }, "Loading...") : /*#__PURE__*/ React.createElement("div", { dangerouslySetInnerHTML: { __html: imageData }, __source: { fileName: "", lineNumber: 136, columnNumber: 9 }, __self: this })); }