Jekyll2023-06-30T07:42:29+00:00https://landovsky.github.io/feed.xmlMy personal blog to write about things I'm interested in.2023-06-29T20:15:34+00:002023-06-29T20:15:34+00:00https://landovsky.github.io/en/2023/06/29/generating-web-with-ai-state-of-the-art<h1 id="objectives">Objectives</h1> <hr /> <p><strong>I would like to speed-up UI prototyping so that I can go from a prompt to code real fast.</strong></p> <p>Specifically I wanted to design a webpage given this specification:</p> <p><strong>TLDR</strong> <em>(full brief in the appendix)</em></p> <p>Search engine simplifying the process of finding pharmacies with specific medicines. Page 1: Search by medicine name and view results with in-stock indicators. Sort results by distance. Page 2: Medicine detail showing which pharmacies have it in stock, with info about each pharmacy (address, opening hours.)</p> <p><strong>I’ve briefly explored several approaches</strong></p> <ul> <li>specialized tools</li> <li>ChatGPT</li> <li>Figma plugins</li> </ul> <h1 id="specialized-tools">Specialized tools</h1> <hr /> <p>From 4 random articles titled “10 best tools for AI design” I’ve picked solutions matching my problem.</p> <p><strong>Verdict</strong></p> <ul> <li>overall failure in helping my use-case</li> <li>most tools have preconceived idea of web structure</li> <li>tools are probably designed for people who could not otherwise build a web and so their needs don’t match mine (missing exports, etc)</li> </ul> <h2 id="snappyappypiecom"><a href="http://snappy.appypie.com/">Snappy.appypie.com</a></h2> <ul> <li>Platform purpose: “Create powerful web and mobile applications and automate workflows easily and quickly without any coding.”</li> <li>Generates a site based on prompt (without word limit).</li> <li>The output is more of a wireframe, purposed for a phone resolution.</li> </ul> <p><img src="/assets/images/generating-web-with-ai/snappy.appypie.com_result.png" alt="snappy.appypie.com result.png" /></p> <h2 id="uizardio-"><a href="http://uizard.io/">Uizard.io</a> 👍</h2> <ul> <li>First real generator (28 USD per month).</li> <li>Takes a 300-character description prompt and 150-character design requirements.</li> <li>Pros: generates several screens with components, creates a prototype with pages linked together. Users generative model to create images. The result is editable (Figma-like).</li> <li>Cons: most of UX is hallucinations, none of it is actually usable as a finished product; components are recycled (across completely different prompts), does not adhere to constraints (i.e. design 2 pages). Can only be exported as PDF, PNG, and JPEG.</li> </ul> <p><img src="/assets/images/generating-web-with-ai/uizard-pharmacy-Landing-f4c78.png" alt="uizard-pharmacy-Landing-f4c78.png" /></p> <p><img src="/assets/images/generating-web-with-ai/uizard-pharmacy-SearchResults-ba8de.png" alt="uizard-pharmacy-SearchResults-ba8de.png" /></p> <p>⬇️ Result for prompt asking for completely something different, spot 10 similarities..</p> <p><img src="/assets/images/generating-web-with-ai/Landing-79686.png" alt="Landing-79686.png" /></p> <h2 id="durableco"><a href="http://durable.co/">Durable.co</a></h2> <ul> <li>AI website builder with tons of other services (marketing, CRM, invoicing) placing it outside my use-case</li> <li>Generates a site based on industry and name (can suggest one) - can be hacked by sending description prompt in the industry field.</li> <li>No prompt customization.</li> <li>Produces average quality visuals, but structure seems the same - hero, image, service cards, testimonial, gallery, contact info and form.</li> </ul> <p><img src="/assets/images/generating-web-with-ai/app.durable.co_result.png" alt="app.durable.co result.png" /></p> <h2 id="wixcom"><a href="http://wix.com/">Wix.com</a></h2> <ul> <li>Claims “AI technology that creates a site for you.”</li> <li>Could not find AI designer.</li> </ul> <h2 id="debuildapp">Debuild.app</h2> <ul> <li>Joined waiting list.</li> </ul> <h2 id="10webio"><a href="http://10web.io/">10Web.io</a></h2> <ul> <li>AI web design.</li> <li>Input: describe business and 3 key services.</li> <li>Generates OK design (responsive), but does not adhere to the prompt (no search input, etc.).</li> <li>Seems more like the layout and structure is preconceived (home, service, about and contact pages) and AI only generates texts and images.</li> <li>Output &gt; <a href="https://10web-site.ai/52/working-troll/">https://10web-site.ai/52/working-troll/</a></li> </ul> <p><img src="/assets/images/generating-web-with-ai/10web.io_result.png" alt="10web.io result.png" /></p> <h2 id="sketch2code-microsoft">Sketch2Code (Microsoft)</h2> <ul> <li>Site not available <a href="https://sketch2code.azurewebsites.net/">https://sketch2code.azurewebsites.net/</a>.</li> </ul> <p>Overall, none of these tools can help me achieve my goal of designing a simple site based on my prompt.</p> <h1 id="chatgpt">ChatGPT</h1> <hr /> <p>Approach</p> <ul> <li>get GPT to generate code using Bootstrap</li> </ul> <p>The result is closer to what I need, but it obviously needs more work to be useful.</p> <p><img src="/assets/images/generating-web-with-ai/gpt-search.png" alt="gpt-search.png" /></p> <p><img src="/assets/images/generating-web-with-ai/gpt-detail.png" alt="gpt-detail.png" /></p> <h1 id="figma-plugin">Figma plugin</h1> <hr /> <p>Using figma to code plugins, one can achieve interesting results. The downside is that you need the Figma design…</p> <p>Input:</p> <p><img src="/assets/images/generating-web-with-ai/Screenshot_2023-06-30_at_8.41.47.png" alt="Screenshot 2023-06-30 at 8.41.47.png" /></p> <p>Output:</p> <p><img src="/assets/images/generating-web-with-ai/Screenshot_2023-06-30_at_8.44.47.png" alt="Screenshot 2023-06-30 at 8.44.47.png" /></p> <h1 id="appendix">Appendix</h1> <hr /> <h2 id="full-spec">Full spec</h2> <p><em>The MediSearch platform serves as a user-friendly medicine search engine that simplifies the process of finding pharmacies with specific medicines in stock. The website is theme is predominantly violet and features exquisite use of color gradients.</em></p> <p><em><strong>Homepage(Search and Result List):</strong> On the homepage, we offer users the ability to search for medicines based on their names. Typing in the search bar, results begin to appear in a list where each row distinctively displays a combination of the medicine name and form (e.g., Coldrex Sacks, Coldrex Tablets 50mg). A keen eye would notice an in-stock indicator icon next to each medicine to swiftly inform of its availability status. Results can be further honed based on users’ convenience as they have the option to sort these results by distance from their pre-estimated location.</em></p> <p><em><strong>Medicine Detail Page:</strong> Post choosing a medicine from the list, users are redirected to a medicine detail page containing an array of pharmacy cards. Each card leaves no stone unturned in providing all necessary information about a pharmacy – its name, address, phone number, and operation hours. Further, a compactly fitting map ensures users do not have to scour the internet for directions.</em></p> <p><em><strong>Email Subscription Page:</strong> In unfortunate circumstances where a user’s required medicine is out of stock in all pharmacies, we offer a silver lining - an option to subscribe for email notifications about the medicine’s availability status.</em></p> <h2 id="gpt-prompt">GPT prompt</h2> <p>You are a web developer with design capabilities. You will take a description (see below), enhance it by inserting details written in between the lines and based on the enhanced description build the html code split to individual pages.</p> <p>Website description:</p> <p>Design requirements:</p> <p>Here are a few rules to observe:</p> <ul> <li>output complete HTML using Slim lang syntax</li> <li>use Bootstrap as the CSS framework, its components and utility classes</li> <li>make sure you properly place elements (by adding padding / margin as necessary)</li> <li>when relevant use icons (for example state indicators, input field icons (email, phone, location, etc.)</li> <li>use (but don’t overuse) primary color for main actions and secondary color for other actions</li> <li>when designing sub-pages, include bread crumbs</li> <li>include aria roles and attributes for accessibility</li> </ul> <h2 id="uizardio-prompt"><a href="http://uizard.io">uizard.io</a> prompt</h2> <p>Search engine simplifying the process of finding pharmacies with specific medicines. Page 1: Search by medicine name and view results with in-stock indicators. Sort results by distance. Page 2: Medicine detail showing which pharmacies have it in stock, with info about each pharmacy (address, opening hours.)</p> <p><em>There was another one I was trying but was lost in time..</em></p>

Objectives

2022-11-05T20:15:34+00:002022-11-05T20:15:34+00:00https://landovsky.github.io/cz/2022/11/05/spotreba-fosilnich-paliv-jako-zdroju-energie-v-cr<h3 id="jaká-je-spotřeba-energií-v-čr">Jaká je spotřeba energií v ČR?</h3> <p>Chtěl jsem si udělat řádovou představu o energetických požadavcích České Republiky. Mluví se o stavbě dalšího bloku Temelínu, o nahrazování špinavých zdrojů těmi obnovitelnými nebo nízkoemisními. Energii spotřebováváme ale i jinak než ve formě elektřiny. Kdybychom měli nahradit opravdu veškeré fosilní zdroje, o jaké množství energie by se jednalo?</p> <p>V době, kdy jsem se tímto zabýval měl nejblíže k nástinu článek portálu <a href="https://oenergetice.cz/zahranicni/iea-fosilni-paliva-mela-2017-podil-813-celosvetove-produkci-energie" target="_blank">oenergetice.cz</a>, který se ale dívá na globální spotřebu. Pohled na spotřebu z hlediska ČR mi přijde představitelnější než pohled globální.</p> <p>Později vyšel <a href="https://www.kurzy.cz/zpravy/679785-kolik-plynu-elektriny-ropy-a-dalsich-zdroju-se-spotrebuje-a-na-co/" target="_blank">článek na kurzy.cz</a>, který uvádí spotřebu v PJ (peta joulech) a analyzuje strukturu paliv a energií a její spotřebitele.</p> <p>Předpokládaný postup:</p> <ol> <li>Najít zdroje dat o spotřebě fosilních paliv</li> <li>Převést je na společné jednotky TWh</li> <li>Porovnat s jednotkou výroby</li> </ol> <h3 id="zdroj-dat">Zdroj dat</h3> <p>Jako zdroj poslouží stránka ČSÚ <a href="https://www.czso.cz/csu/czso/spotreba-paliv-a-energie" target="_blank">Spotřeba paliv a energie</a>, kde najdeme spotřebu jednotlivých typů paliv. Již při hledání zdrojů jsem si vybral rok 2020 pro který by již mohla být dostupná data pro všechny typy paliv a proto jsem zvolil z katalogu ČSÚ tento rok.</p> <p>Katalog obsahuje spotřebu paliv a el. energie dle odvětví. U každého typu paliva jsou uvedené jednotky objemu (tuny, litry) a GJ jako jednotka energie.</p> <p>Některá odvětví mohou používat fosilní zdroje jinak než spalováním (výrobu tepla, elektřiny, nebo ve spalovacích motorech), např. na farmaceutický nebo chemický průmysl. Očištění o tato odvětví jsem ale neprovedl, protože mi spotřeba mimo spalování nepřišla významná. Jako příklad jsem si vybral největší položku spotřeby zemního plynu - odvětví “Výroba chemických látek a chemických přípravků” spotřebovalo cca 7% plynu, což řádově neovlivní číslo, ke kterému se chci dostat.</p> <p>Zpětně jsem se podíval na ostatní typy paliv - koks a černé uhlí, kde je situace podobná.</p> <h3 id="převod-jednotek">Převod jednotek</h3> <p>U všech surovin byly uveden ekvivalent v GJ (giga joulech). Protože jsem chtěl vědět, kolik el. energie by muselo být vyprodukováno pro náhradu fosilních paliv, potřeboval jsem GJ převést na TWh (tera-watt hodiny). 1 W = 1 joule / sek., takže když vydělíme GJ 3600, dostaneme GWh a / 1000 TWh.</p> <p>Elektrickou energii jsem do energetické náročnosti nedával, protože suroviny pro její výrobu jsou v tabulce již započteny a energii z nízkoemisních zdrojů nezapočítáváme, ta už se nízkoemisně vyrábí.</p> <h3 id="výsledky">Výsledky</h3> <p>Z fosilních paliv v ČR spotřebujeme 780 PJ, nebo-li 216 TWh energie. Číslo je ohromující. Pro představu, je to ekvivalent:</p> <ul> <li>14 Temelínů</li> <li>7x všech jaderných zdrojů v ČR</li> <li>21,7 miliónů domácích solárních elektráren (10KWp)</li> </ul> <p><strong>Celková spotřeba fos. paliv v ČR 2020</strong></p> <table> <thead> <tr> <th><strong>Zdroj energie</strong></th> <th style="text-align: right"><strong>PJ</strong></th> <th style="text-align: right"><strong>TWh</strong></th> </tr> </thead> <tbody> <tr> <td>hnědé uhlí</td> <td style="text-align: right">352.45</td> <td style="text-align: right">97.90</td> </tr> <tr> <td>zemní plyn</td> <td style="text-align: right">177.58</td> <td style="text-align: right">49.33</td> </tr> <tr> <td>černé uhlí</td> <td style="text-align: right">120.11</td> <td style="text-align: right">33.36</td> </tr> <tr> <td>nafta</td> <td style="text-align: right">68.21</td> <td style="text-align: right">18.95</td> </tr> <tr> <td>koks</td> <td style="text-align: right">57.72</td> <td style="text-align: right">16.03</td> </tr> <tr> <td>benzín</td> <td style="text-align: right">4.21</td> <td style="text-align: right">1.17</td> </tr> <tr> <td>brykety</td> <td style="text-align: right">0.01</td> <td style="text-align: right">0.00</td> </tr> <tr> <td><strong>Celkem</strong></td> <td style="text-align: right"><strong>780.30</strong></td> <td style="text-align: right"><strong>216.75</strong></td> </tr> </tbody> </table> <p><strong>Srovnání s výrobou elektřiny</strong></p> <p>Na výrobu el. energie bylo použito 38% fos. paliv. 62% (kromě PHM) bylo využito pro výrobu tepla v domácnostech, firmách a průmyslu.</p> <table> <thead> <tr> <th><strong>Zdroj energie</strong></th> <th><strong>PJ</strong></th> <th style="text-align: right"><strong>TWh</strong></th> </tr> </thead> <tbody> <tr> <td>el. z fosilních zdrojů</td> <td>-</td> <td style="text-align: right">41</td> </tr> <tr> <td>el. z ostatních zdrojů</td> <td>-</td> <td style="text-align: right">41</td> </tr> </tbody> </table> <p><a href="https://docs.google.com/spreadsheets/d/1vdNPmwila56Nor2sWxiaqkr0rjtOQumdgzrRP5-TZ4k" target="_blank">Zdrojová data (Google Sheet)</a></p> <h3 id="závěr">Závěr</h3> <p>Vzhledem k “rychlosti” elektrifikace si lze těžko představit, že během krátké doby (řekněme 10, nebo 20 let) bude naše spotřeba energií bezemisní. To je určitě složitější téma, protože v něm hraje roli spousta faktorů - snižování energetické náročnosti budov, zlepšování efektivity vytápění, snižování spotřeby vlivem oteplování, atd. To je k zamyšlení na někdy jindy.</p>

Jaká je spotřeba energií v ČR?