cross-posted from: https://piefed.world/c/shit/p/1258949/most-downloaded-npm-package-of-the-month
SVG Code
<svg xmlns=“http://www.w3.org/2000/svg” viewBox=“0 0 800 1020” width=“100%” height=“100%”> <style> .bg { fill: #0a0a0a; } .window-bg { fill: #16161a; } .window-border { stroke: #333333; stroke-width: 1.5; } .header-line { stroke: #333333; stroke-width: 1; } .title { font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, Helvetica, Arial, sans-serif; font-size: 38px; font-weight: 800; fill: #ffffff; text-anchor: middle; } .tab-text { font-family: -apple-system, BlinkMacSystemFont, “Segoe UI”, Roboto, sans-serif; font-size: 13px; fill: #cccccc; } .tab-js { fill: #f7df1e; font-weight: bold; } .tab-close { fill: #858585; font-size: 14px; }
.code-text { font-family: 'Consolas', 'Courier New', monospace; font-size: 15px; fill: #d4d4d4; } .line-num { fill: #6e7681; text-anchor: end; font-size: 14px; } .kw-purple { fill: #c678dd; } .kw-blue { fill: #569cd6; } .func-yellow { fill: #dcdcaa; } .var-blue { fill: #9cdcfe; } .class-teal { fill: #4ec9b0; } .str-orange { fill: #ce9178; } .num-green { fill: #b5cea8; } .punct { fill: #d4d4d4; }</style>
<rect width=“100%” height=“100%” class=“bg”/>
<!-- ==================== 2022 Section ==================== --> <text x=“400” y=“60” class=“title”>coding in 2022</text>
<g transform=“translate(30, 90)”> <!-- Window Container --> <rect width=“740” height=“150” rx=“8” class=“window-bg window-border”/> <line x1=“0” y1=“36” x2=“740” y2=“36” class=“header-line”/>
<!-- Tab --> <text x="15" y="24" class="tab-text"><tspan class="tab-js">JS</tspan> stringUtils.js <tspan class="tab-close" dx="5">×</tspan></text> <!-- Code --> <text class="code-text" transform="translate(0, 36)"> <!-- Line 1 --> <tspan x="45" y="30" class="line-num">1</tspan> <tspan x="65" y="30"><tspan class="kw-blue">function</tspan> <tspan class="func-yellow">startsWithCapitalLetter</tspan>(<tspan class="var-blue">str</tspan>) {</tspan> <!-- Line 2 --> <tspan x="45" y="54" class="line-num">2</tspan> <tspan x="95" y="54"><tspan class="kw-purple">return</tspan> <tspan class="var-blue">str</tspan>.length > <tspan class="num-green">0</tspan> && <tspan class="var-blue">str</tspan>[<tspan class="num-green">0</tspan>] === <tspan class="var-blue">str</tspan>[<tspan class="num-green">0</tspan>].<tspan class="func-yellow">toUpperCase</tspan>();</tspan> <!-- Line 3 --> <tspan x="45" y="78" class="line-num">3</tspan> <tspan x="65" y="78">}</tspan> </text></g>
<!-- ==================== 2027 Section ==================== --> <text x=“400” y=“320” class=“title”>coding in 2027</text>
<g transform=“translate(30, 350)”> <!-- Window Container --> <rect width=“740” height=“640” rx=“8” class=“window-bg window-border”/> <line x1=“0” y1=“36” x2=“740” y2=“36” class=“header-line”/>
<!-- Tab --> <text x="15" y="24" class="tab-text"><tspan class="tab-js">JS</tspan> stringUtils.js <tspan class="tab-close" dx="5">×</tspan></text> <!-- Code --> <text class="code-text" transform="translate(0, 36)"> <!-- Line 1 --> <tspan x="45" y="30" class="line-num">1</tspan> <tspan x="65" y="30"><tspan class="kw-purple">import</tspan> <tspan class="class-teal">Anthropic</tspan> <tspan class="kw-purple">from</tspan> <tspan class="str-orange">'@anthropic-ai/sdk'</tspan>;</tspan> <!-- Line 2 --> <tspan x="45" y="54" class="line-num">2</tspan> <!-- Line 3 --> <tspan x="45" y="78" class="line-num">3</tspan> <tspan x="65" y="78"><tspan class="kw-blue">const</tspan> <tspan class="var-blue">anthropic</tspan> = <tspan class="kw-blue">new</tspan> <tspan class="class-teal">Anthropic</tspan>({</tspan> <!-- Line 4 --> <tspan x="45" y="102" class="line-num">4</tspan> <tspan x="95" y="102"><tspan class="var-blue">apiKey</tspan>: <tspan class="var-blue">process.env.ANTHROPIC_API_KEY</tspan>,</tspan> <!-- Line 5 --> <tspan x="45" y="126" class="line-num">5</tspan> <tspan x="65" y="126">});</tspan> <!-- Line 6 --> <tspan x="45" y="150" class="line-num">6</tspan> <!-- Line 7 --> <tspan x="45" y="174" class="line-num">7</tspan> <tspan x="65" y="174"><tspan class="kw-purple">export</tspan> <tspan class="kw-blue">async</tspan> <tspan class="kw-blue">function</tspan> <tspan class="func-yellow">startsWithCapitalLetter</tspan>(<tspan class="var-blue">str</tspan>) {</tspan> <!-- Line 8 --> <tspan x="45" y="198" class="line-num">8</tspan> <tspan x="95" y="198"><tspan class="kw-blue">const</tspan> <tspan class="var-blue">prompt</tspan> = <tspan class="str-orange">`You are a capitalization expert.</tspan></tspan> <!-- Line 9 --> <tspan x="45" y="222" class="line-num">9</tspan> <tspan x="125" y="222"><tspan class="str-orange">You have been studying capitalization for years</tspan></tspan> <!-- Line 10 --> <tspan x="45" y="246" class="line-num">10</tspan> <!-- Line 11 --> <tspan x="45" y="270" class="line-num">11</tspan> <tspan x="125" y="270"><tspan class="str-orange">Text to analyze: """"""</tspan><tspan class="kw-blue">${</tspan><tspan class="var-blue">str</tspan><tspan class="kw-blue">}</tspan><tspan class="str-orange">""""""</tspan></tspan> <!-- Line 12 --> <tspan x="45" y="294" class="line-num">12</tspan> <!-- Line 13 --> <tspan x="45" y="318" class="line-num">13</tspan> <tspan x="125" y="318"><tspan class="str-orange">Respond with ONLY 'true' or 'false'.</tspan></tspan> <!-- Line 14 --> <tspan x="45" y="342" class="line-num">14</tspan> <tspan x="125" y="342"><tspan class="str-orange">Is the first letter of the text a capital letter?`</tspan>;</tspan> <!-- Line 15 --> <tspan x="45" y="366" class="line-num">15</tspan> <!-- Line 16 --> <tspan x="45" y="390" class="line-num">16</tspan> <tspan x="95" y="390"><tspan class="kw-blue">const</tspan> <tspan class="var-blue">response</tspan> = <tspan class="kw-purple">await</tspan> <tspan class="var-blue">anthropic</tspan>.<tspan class="var-blue">messages</tspan>.<tspan class="func-yellow">create</tspan>({</tspan> <!-- Line 17 --> <tspan x="45" y="414" class="line-num">17</tspan> <tspan x="125" y="414"><tspan class="var-blue">model</tspan>: <tspan class="str-orange">'claude-mythos-1-20261225'</tspan>,</tspan> <!-- Line 18 --> <tspan x="45" y="438" class="line-num">18</tspan> <tspan x="125" y="438"><tspan class="var-blue">max_tokens</tspan>: <tspan class="num-green">5000000</tspan>,</tspan> <!-- Line 19 --> <tspan x="45" y="462" class="line-num">19</tspan> <tspan x="125" y="462"><tspan class="var-blue">temperature</tspan>: <tspan class="num-green">0</tspan>,</tspan> <!-- Line 20 --> <tspan x="45" y="486" class="line-num">20</tspan> <tspan x="125" y="486"><tspan class="var-blue">thinking</tspan>: <tspan class="str-orange">'ultramaxmegathink'</tspan>,</tspan> <!-- Line 21 --> <tspan x="45" y="510" class="line-num">21</tspan> <tspan x="125" y="510"><tspan class="var-blue">messages</tspan>: [{ <tspan class="var-blue">role</tspan>: <tspan class="str-orange">'user'</tspan>, <tspan class="var-blue">content</tspan>: <tspan class="var-blue">prompt</tspan> }],</tspan> <!-- Line 22 --> <tspan x="45" y="534" class="line-num">22</tspan> <tspan x="95" y="534">});</tspan> <!-- Line 23 --> <tspan x="45" y="558" class="line-num">23</tspan> <!-- Line 24 --> <tspan x="45" y="582" class="line-num">24</tspan> <tspan x="95" y="582"><tspan class="kw-blue">const</tspan> <tspan class="var-blue">answer</tspan> = <tspan class="var-blue">response</tspan>.<tspan class="var-blue">content</tspan>[<tspan class="num-green">0</tspan>].<tspan class="var-blue">text</tspan>.<tspan class="func-yellow">trim</tspan>().<tspan class="func-yellow">toLowerCase</tspan>();</tspan> <!-- Line 25 --> <tspan x="45" y="606" class="line-num">25</tspan> <tspan x="95" y="606"><tspan class="kw-purple">return</tspan> <tspan class="var-blue">answer</tspan> === <tspan class="str-orange">'true'</tspan>;</tspan> <!-- Line 26 (Partially visible intentionally to match original image) --> <tspan x="45" y="630" class="line-num">26</tspan> <tspan x="65" y="630">}</tspan> </text></g> </svg>
If you download this picture you get a 5MB ~14000x19000 pixel image that will slow down your whole PC when rendering.
Kind of links well to the lack of efficiency of AI so I think that’s part of the art.
Yes, and we both know it could’ve been 100 KB too, but instead we’re served an image 50 times larger.
Doesn’t matter though because the image doesn’t even load for me 🥲
it hasn’t even loaded for me yet and I’ve been here for a min
“slow down your whole PC”
…
Not a PC, but …
It’s not as catastrophic as it may sound, but it does spike my CPU usage a lot for a few seconds and it occasionally causes my window manager’s framerate to go as low as 10/s for no more than one second (using qView / Linux)
“studying capitalization for years” got me 😭
how the fuck do I read this?
Like, is it blurry for you? It looks ok in Summit. Or are you trying to understand the code?
blurry. Lemmy mobile web client
Easy, leave Lemmy and join Piefed.
Until we meet again…
