2796gauravc/functiongemma-function-arena
0
1<!DOCTYPE html>2<html lang="en">3<head>4 <meta charset="UTF-8">5 <meta name="viewport" content="width=device-width, initial-scale=1.0">6 <title>Function Arena // BUILD_YOUR_TOOLS</title>7 8 <link href="https://api.fontshare.com/v2/css?f[]=clash-display@700,600,500&f[]=space-mono@400,700&display=swap" rel="stylesheet">9 10 <!-- Google Analytics -->11 <script async src="https://www.googletagmanager.com/gtag/js?id=G-2Q4M55VKPR"></script>12 <script>13 window.dataLayer = window.dataLayer || [];14 function gtag(){dataLayer.push(arguments);}15 gtag('js', new Date());16 gtag('config', 'G-2Q4M55VKPR', {17 page_path: window.location.pathname,18 anonymize_ip: true19 });20 </script>21 22 <style>23 :root {24 --void: #050505;25 --panel: #111111;26 --acid: #ccff00;27 --acid-dim: #4d6000;28 --hyper-purple: #7000ff;29 --alert: #ff3300;30 --success: #00ff88;31 --text-main: #f0f0f0;32 --text-muted: #666;33 --border-thick: 3px;34 --hard-shadow: 6px 6px 0px var(--hyper-purple);35 --ease-out-expo: cubic-bezier(0.19, 1, 0.22, 1);36 }37 38 * { margin: 0; padding: 0; box-sizing: border-box; }39 40 body {41 background-color: var(--void);42 color: var(--text-main);43 font-family: 'Space Mono', monospace;44 min-height: 100vh;45 overflow-x: hidden;46 display: flex;47 flex-direction: column;48 }49 50 .noise-overlay {51 position: fixed;52 top: 0; left: 0; width: 100%; height: 100%;53 pointer-events: none;54 z-index: 9999;55 opacity: 0.05;56 background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");57 }58 59 .scanlines {60 position: fixed;61 top: 0; left: 0; width: 100%; height: 100%;62 background: linear-gradient(to bottom, rgba(255,255,255,0), rgba(255,255,255,0) 50%, rgba(0,0,0,0.1) 50%, rgba(0,0,0,0.1));63 background-size: 100% 4px;64 z-index: 9998;65 pointer-events: none;66 }67 68 h1, h2, h3, .display-font {69 font-family: 'Clash Display', sans-serif;70 text-transform: uppercase;71 letter-spacing: -0.02em;72 }73 74 #boot-sequence {75 position: fixed;76 inset: 0;77 background: var(--void);78 z-index: 10000;79 display: flex;80 flex-direction: column;81 justify-content: flex-end;82 padding: 40px;83 font-size: 14px;84 }85 86 .boot-line {87 opacity: 0;88 transform: translateY(10px);89 color: var(--acid);90 margin-bottom: 5px;91 }92 93 .app-container {94 max-width: 1800px;95 margin: 0 auto;96 width: 100%;97 padding: 20px;98 display: grid;99 grid-template-columns: 350px 1fr;100 gap: 20px;101 flex: 1;102 opacity: 0;103 transition: opacity 0.5s ease;104 }105 106 @media (max-width: 1200px) {107 .app-container { grid-template-columns: 1fr; }108 }109 110 .sidebar {111 display: flex;112 flex-direction: column;113 gap: 20px;114 }115 116 .panel {117 background: var(--panel);118 border: var(--border-thick) solid var(--text-main);119 padding: 20px;120 position: relative;121 }122 123 .panel-title {124 background: var(--text-main);125 color: var(--void);126 padding: 5px 10px;127 font-weight: 700;128 display: inline-block;129 margin-bottom: 15px;130 font-size: 12px;131 }132 133 .stat-row {134 display: flex;135 justify-content: space-between;136 align-items: baseline;137 margin-bottom: 10px;138 border-bottom: 1px solid #333;139 padding-bottom: 5px;140 }141 142 .stat-value {143 font-family: 'Clash Display';144 font-size: 24px;145 color: var(--acid);146 }147 148 .game-area {149 display: flex;150 flex-direction: column;151 gap: 20px;152 }153 154 .level-header {155 border: var(--border-thick) solid var(--acid);156 background: var(--void);157 padding: 30px;158 position: relative;159 box-shadow: var(--hard-shadow);160 }161 162 .level-title {163 font-size: 2.5rem;164 line-height: 0.9;165 margin-bottom: 10px;166 }167 168 .objective-badge {169 display: inline-block;170 background: var(--hyper-purple);171 color: var(--acid);172 font-weight: 900;173 padding: 8px 16px;174 font-size: 1rem;175 margin-bottom: 15px;176 }177 178 .scenario-grid {179 display: grid;180 gap: 10px;181 margin-bottom: 20px;182 }183 184 .scenario-card {185 background: rgba(255,255,255,0.02);186 border: 1px solid #333;187 padding: 15px;188 display: grid;189 grid-template-columns: 40px 1fr 100px;190 align-items: center;191 gap: 15px;192 transition: all 0.2s;193 }194 195 .scenario-card:hover {196 border-color: var(--acid);197 background: rgba(204, 255, 0, 0.03);198 }199 200 .scenario-icon {201 font-size: 24px;202 text-align: center;203 }204 205 .scenario-text {206 font-size: 0.9rem;207 line-height: 1.4;208 }209 210 .scenario-expected {211 text-align: center;212 font-weight: bold;213 font-size: 0.8rem;214 }215 216 .scenario-expected.should-trigger {217 color: var(--success);218 }219 220 .scenario-expected.should-not {221 color: var(--alert);222 }223 224 .scenario-result {225 position: absolute;226 right: 10px;227 top: 50%;228 transform: translateY(-50%);229 font-size: 20px;230 }231 232 .editor-section {233 display: grid;234 grid-template-columns: 1fr 1fr;235 gap: 20px;236 margin-top: 20px;237 }238 239 @media (max-width: 900px) {240 .editor-section { grid-template-columns: 1fr; }241 }242 243 .editor-panel {244 border: 2px solid #333;245 background: #000;246 }247 248 .editor-header {249 background: #1a1a1a;250 padding: 10px 15px;251 border-bottom: 1px solid #333;252 display: flex;253 justify-content: space-between;254 align-items: center;255 }256 257 .editor-title {258 color: var(--acid);259 font-size: 0.9rem;260 font-weight: bold;261 }262 263 textarea, .json-output {264 width: 100%;265 background: #000;266 border: none;267 color: var(--text-main);268 padding: 20px;269 font-family: 'Space Mono', monospace;270 font-size: 0.9rem;271 min-height: 300px;272 resize: vertical;273 overflow-y: auto;274 }275 276 textarea {277 height: auto;278 }279 280 textarea:focus {281 outline: none;282 }283 284 .json-output {285 color: var(--success);286 overflow-x: auto;287 white-space: pre-wrap;288 }289 290 .action-bar {291 display: flex;292 gap: 10px;293 margin-top: 20px;294 }295 296 button {297 background: var(--text-main);298 color: var(--void);299 border: none;300 font-family: 'Clash Display', sans-serif;301 font-weight: 700;302 text-transform: uppercase;303 font-size: 1rem;304 padding: 15px 30px;305 cursor: pointer;306 transition: all 0.2s;307 flex: 1;308 }309 310 button:hover:not(:disabled) {311 background: var(--acid);312 transform: translate(-4px, -4px);313 box-shadow: 6px 6px 0px var(--text-main);314 }315 316 button:active:not(:disabled) {317 transform: translate(0, 0);318 box-shadow: none;319 }320 321 button:disabled {322 background: #333;323 color: #666;324 cursor: not-allowed;325 }326 327 button.secondary {328 background: transparent;329 border: 2px solid var(--text-main);330 color: var(--text-main);331 }332 333 button.secondary:hover:not(:disabled) {334 background: var(--text-main);335 color: var(--void);336 }337 338 .hint-panel {339 background: rgba(112, 0, 255, 0.1);340 border: 1px solid var(--hyper-purple);341 padding: 15px;342 margin-top: 20px;343 display: none;344 }345 346 .hint-panel.visible {347 display: block;348 }349 350 .hint-title {351 color: var(--hyper-purple);352 font-weight: bold;353 margin-bottom: 10px;354 font-size: 0.9rem;355 }356 357 .hint-content {358 font-size: 0.85rem;359 line-height: 1.5;360 color: var(--text-muted);361 }362 363 .competitor-functions {364 display: grid;365 gap: 10px;366 margin-top: 15px;367 }368 369 .competitor-fn {370 background: rgba(255,0,0,0.05);371 border: 1px solid #4a0000;372 padding: 12px;373 font-size: 0.85rem;374 }375 376 .fn-name-display {377 color: var(--alert);378 font-weight: bold;379 margin-bottom: 5px;380 }381 382 .result-panel {383 margin-top: 20px;384 padding: 20px;385 background: #080808;386 border: 2px solid #333;387 display: none;388 }389 390 .result-panel.visible {391 display: block;392 animation: flash 0.2s;393 }394 395 .result-header {396 display: flex;397 justify-content: space-between;398 align-items: center;399 margin-bottom: 20px;400 padding-bottom: 15px;401 border-bottom: 2px solid #333;402 }403 404 .result-title {405 font-size: 1.5rem;406 font-family: 'Clash Display';407 }408 409 .result-score {410 font-size: 2rem;411 font-family: 'Clash Display';412 }413 414 .result-title.success, .result-score.success {415 color: var(--success);416 }417 418 .result-title.fail, .result-score.fail {419 color: var(--alert);420 }421 422 .result-breakdown {423 display: grid;424 gap: 8px;425 }426 427 .result-item {428 display: flex;429 justify-content: space-between;430 padding: 8px;431 background: rgba(255,255,255,0.02);432 border-left: 3px solid #333;433 }434 435 .result-item.correct {436 border-left-color: var(--success);437 }438 439 .result-item.wrong {440 border-left-color: var(--alert);441 }442 443 .execution-logs {444 border: 2px solid #333;445 background: #000;446 margin-top: 20px;447 }448 449 .logs-header {450 background: #1a1a1a;451 padding: 12px 15px;452 border-bottom: 1px solid #333;453 display: flex;454 justify-content: space-between;455 align-items: center;456 }457 458 .logs-title {459 color: var(--acid);460 font-size: 0.9rem;461 font-weight: bold;462 }463 464 .logs-clear {465 background: transparent;466 border: 1px solid #333;467 color: #666;468 padding: 4px 12px;469 font-size: 0.8rem;470 cursor: pointer;471 }472 473 .logs-clear:hover {474 border-color: #666;475 color: #999;476 }477 478 .logs-content {479 padding: 15px;480 font-family: 'Space Mono', monospace;481 font-size: 0.85rem;482 color: var(--text-main);483 max-height: 400px;484 overflow-y: auto;485 background: #0a0a0a;486 }487 488 .log-entry {489 margin-bottom: 10px;490 padding-bottom: 10px;491 border-bottom: 1px solid #222;492 opacity: 0;493 animation: fadeIn 0.3s forwards;494 }495 496 .log-entry:last-child {497 border-bottom: none;498 }499 500 @keyframes fadeIn {501 from { opacity: 0; transform: translateY(-5px); }502 to { opacity: 1; transform: translateY(0); }503 }504 505 .log-time {506 color: #666;507 font-size: 0.75rem;508 }509 510 .log-label {511 color: var(--acid);512 font-weight: bold;513 display: inline-block;514 min-width: 120px;515 }516 517 .log-prompt {518 color: #90ee90;519 padding: 8px;520 background: rgba(144, 238, 144, 0.1);521 border-left: 3px solid #90ee90;522 margin: 8px 0;523 word-break: break-word;524 }525 526 .log-tools {527 color: #87ceeb;528 padding: 8px;529 background: rgba(135, 206, 235, 0.1);530 border-left: 3px solid #87ceeb;531 margin: 8px 0;532 max-height: 200px;533 overflow-y: auto;534 }535 536 .log-function {537 padding: 4px 8px;538 margin: 4px 0;539 background: #1a1a1a;540 border-radius: 3px;541 }542 543 .log-function-name {544 color: var(--acid);545 font-weight: bold;546 }547 548 .log-success {549 color: #00ff88;550 }551 552 .log-error {553 color: #ff3300;554 }555 556 .log-info {557 color: #999;558 }559 560 @keyframes flash {561 0% { background-color: var(--text-main); }562 100% { background-color: #080808; }563 }564 565 .rules-modal {566 position: fixed;567 inset: 0;568 background: rgba(0,0,0,0.9);569 z-index: 5000;570 display: none;571 align-items: center;572 justify-content: center;573 padding: 20px;574 }575 576 .rules-modal.visible {577 display: flex;578 }579 580 .rules-content {581 background: var(--panel);582 border: var(--border-thick) solid var(--acid);583 max-width: 800px;584 max-height: 90vh;585 overflow-y: auto;586 padding: 30px;587 }588 589 .rules-section {590 margin-bottom: 25px;591 }592 593 .rules-section h3 {594 color: var(--acid);595 margin-bottom: 10px;596 font-size: 1.2rem;597 }598 599 .rules-section p, .rules-section ul {600 line-height: 1.6;601 color: var(--text-muted);602 margin-bottom: 10px;603 }604 605 .rules-section ul {606 margin-left: 20px;607 }608 609 .rules-section code {610 background: #000;611 padding: 2px 6px;612 border: 1px solid #333;613 color: var(--acid);614 font-size: 0.85rem;615 }616 617 .close-rules {618 width: 100%;619 margin-top: 20px;620 }621 622 .loader-overlay {623 position: fixed;624 bottom: 20px;625 right: 20px;626 background: var(--panel);627 border: 2px solid var(--acid);628 padding: 15px 20px;629 z-index: 10001;630 display: flex;631 flex-direction: column;632 align-items: center;633 gap: 10px;634 min-width: 250px;635 box-shadow: var(--hard-shadow);636 opacity: 0.9;637 }638 639 .loader-overlay.hidden {640 display: none;641 }642 643 .loader-spinner {644 width: 30px;645 height: 30px;646 border: 3px solid var(--panel);647 border-top: 3px solid var(--acid);648 border-radius: 50%;649 animation: spin 1s linear infinite;650 }651 652 @keyframes spin {653 0% { transform: rotate(0deg); }654 100% { transform: rotate(360deg); }655 }656 657 @keyframes slideInRight {658 from {659 transform: translateX(400px);660 opacity: 0;661 }662 to {663 transform: translateX(0);664 opacity: 1;665 }666 }667 668 @keyframes slideOutRight {669 from {670 transform: translateX(0);671 opacity: 1;672 }673 to {674 transform: translateX(400px);675 opacity: 0;676 }677 }678 679 @keyframes pulse {680 0%, 100% { transform: scale(1); }681 50% { transform: scale(1.05); }682 }683 684 .scenario-card.correct {685 border-color: var(--success);686 background: rgba(0, 255, 136, 0.1);687 animation: pulse 0.3s;688 }689 690 .scenario-card.wrong {691 border-color: var(--alert);692 background: rgba(255, 51, 0, 0.1);693 animation: pulse 0.3s;694 }695 696 .loader-text {697 color: var(--acid);698 font-family: 'Clash Display', sans-serif;699 font-size: 0.9rem;700 text-transform: uppercase;701 letter-spacing: 0.05em;702 text-align: center;703 }704 705 .loader-progress {706 width: 200px;707 height: 3px;708 background: var(--panel);709 border: 1px solid var(--text-main);710 position: relative;711 overflow: hidden;712 }713 714 .loader-progress-bar {715 height: 100%;716 background: var(--acid);717 width: 0%;718 transition: width 0.3s ease;719 box-shadow: 0 0 5px var(--acid);720 }721 722 .test-loader {723 position: fixed;724 bottom: 30px;725 right: 30px;726 background: var(--panel);727 border: var(--border-thick) solid var(--acid);728 padding: 20px 30px;729 z-index: 5000;730 display: none;731 align-items: center;732 gap: 15px;733 box-shadow: var(--hard-shadow);734 }735 736 .test-loader.visible {737 display: flex;738 animation: slideInUp 0.3s var(--ease-out-expo);739 }740 741 @keyframes slideInUp {742 from {743 transform: translateY(100px);744 opacity: 0;745 }746 to {747 transform: translateY(0);748 opacity: 1;749 }750 }751 752 .test-loader-spinner {753 width: 24px;754 height: 24px;755 border: 3px solid var(--panel);756 border-top: 3px solid var(--acid);757 border-radius: 50%;758 animation: spin 0.8s linear infinite;759 }760 761 .test-loader-text {762 color: var(--acid);763 font-family: 'Space Mono', monospace;764 font-size: 0.9rem;765 }766 767 .test-loader-progress {768 color: var(--text-muted);769 font-size: 0.8rem;770 }771 772 .model-info {773 position: fixed;774 bottom: 10px;775 left: 10px;776 background: var(--panel);777 border: 1px solid var(--text-main);778 padding: 8px 12px;779 font-size: 0.75rem;780 color: var(--text-muted);781 z-index: 100;782 opacity: 0.7;783 transition: opacity 0.2s;784 display: flex;785 align-items: center;786 gap: 15px;787 flex-wrap: wrap;788 }789 790 .model-info:hover {791 opacity: 1;792 }793 794 .model-info strong {795 color: var(--acid);796 }797 798 .model-info .divider {799 color: #333;800 margin: 0 5px;801 }802 803 .model-info .creator-info {804 display: flex;805 align-items: center;806 gap: 8px;807 }808 809 .model-info .creator-info a {810 color: var(--acid);811 text-decoration: none;812 transition: color 0.2s;813 }814 815 .model-info .creator-info a:hover {816 color: var(--success);817 }818 819 .model-info .creator-name {820 color: var(--text-main);821 font-weight: bold;822 }823 </style>824</head>825<body>826 827 <div class="noise-overlay"></div>828 <div class="scanlines"></div>829 830 <div id="boot-sequence"></div>831 832 <div class="loader-overlay" id="modelLoader">833 <div class="loader-spinner"></div>834 <div class="loader-text" id="loaderText">Loading AI Model</div>835 <div class="loader-progress">836 <div class="loader-progress-bar" id="modelProgressBar"></div>837 </div>838 <div id="loaderSubtext" style="color: var(--text-muted); font-size: 0.75rem; text-align: center; max-width: 200px;">839 <span id="deviceInfo"></span>840 </div>841 </div>842 843 <div class="test-loader" id="testLoader">844 <div class="test-loader-spinner"></div>845 <div>846 <div class="test-loader-text">TESTING FUNCTION</div>847 <div class="test-loader-progress" id="testProgress">Initializing...</div>848 </div>849 </div>850 851 <div class="rules-modal" id="rulesModal">852 <div class="rules-content">853 <h2 style="color: var(--acid); margin-bottom: 20px; font-size: 2rem;">FUNCTION ARENA // RULES</h2>854 855 <div class="rules-section">856 <h3>๐ฏ OBJECTIVE</h3>857 <p>Create precise function definitions that trigger in the RIGHT scenarios and stay silent in the WRONG ones. You're competing against other functions for attention.</p>858 </div>859 860 <div class="rules-section">861 <h3>๐ HOW TO PLAY</h3>862 <p>1. Review the test scenarios - some should trigger your function (โ SHOULD), others shouldn't (โ SHOULD NOT)</p>863 <p>2. Write your function definition with a clear name and description</p>864 <p>3. Add parameters with proper types and descriptions (optional but helps)</p>865 <p>4. Use enums to constrain values when appropriate</p>866 <p>5. Test your function against all scenarios</p>867 </div>868 869 <div class="rules-section">870 <h3>๐ง FUNCTION SCHEMA FORMAT</h3>871 <p>Your function follows the JSON Schema / OpenAPI format:</p>872 <ul>873 <li><code>name</code>: Function identifier (e.g., "get_weather")</li>874 <li><code>description</code>: What your function does - BE SPECIFIC</li>875 <li><code>parameters</code>: Object with type definitions</li>876 <li><code>properties</code>: Define each parameter with type, description</li>877 <li><code>required</code>: Array of required parameter names</li>878 <li><code>enum</code>: Use to limit values (e.g., ["celsius", "fahrenheit"])</li>879 </ul>880 </div>881 882 <div class="rules-section">883 <h3>๐ก PRO TIPS</h3>884 <p><strong>Names matter:</strong> Specific names beat generic ones. "fetch_user_profile" > "get_data"</p>885 <p><strong>Descriptions are key:</strong> AI reads your description to decide. Be clear about WHAT and WHEN.</p>886 <p><strong>Use enums wisely:</strong> They constrain inputs and make intent clearer.</p>887 <p><strong>Think like AI:</strong> What keywords would make YOUR function the obvious choice?</p>888 </div>889 890 <div class="rules-section">891 <h3>๐ SCORING</h3>892 <p>+100 points for each correct trigger (when you SHOULD)</p>893 <p>-50 points for each incorrect trigger (when you SHOULDN'T)</p>894 <p>+50 bonus points for each FALSE scenario where you correctly didn't trigger</p>895 <p>Compete against 0-5 competitor functions trying to steal your scenarios!</p>896 </div>897 898 <div class="rules-section">899 <h3>๐ LEARNING PATH</h3>900 <p>Levels progress from basic scenarios to complex edge cases:</p>901 <p>โข <strong>Novice:</strong> Simple, clear scenarios</p>902 <p>โข <strong>Intermediate:</strong> Ambiguous queries, need precision</p>903 <p>โข <strong>Advanced:</strong> Multiple competitors, overlapping domains</p>904 <p>โข <strong>Expert:</strong> Complex parameters, enums required</p>905 <p>โข <strong>Master:</strong> Multi-domain confusion, extreme precision needed</p>906 </div>907 908 <button class="close-rules" onclick="toggleRules()">CLOSE // BEGIN TRAINING</button>909 </div>910 </div>911 912 <div class="app-container" id="app">913 914 <aside class="sidebar">915 <div class="panel">916 <div class="panel-title">OPERATOR_STATS</div>917 <div class="stat-row">918 <span>LEVEL</span>919 <span class="stat-value" id="levelDisp">01</span>920 </div>921 <div class="stat-row">922 <span>SCENARIOS</span>923 <span class="stat-value" id="scenarioCount">0</span>924 </div>925 <div class="stat-row">926 <span>SCORE</span>927 <span class="stat-value" id="scoreDisp">0000</span>928 </div>929 <div class="stat-row">930 <span>ACCURACY</span>931 <span class="stat-value" id="accuracyDisp" style="color: var(--success)">--</span>932 </div>933 <div class="stat-row" id="streakRow" style="display: none;">934 <span>STREAK</span>935 <span class="stat-value" id="streakDisp" style="color: var(--hyper-purple)">0</span>936 </div>937 </div>938 939 940 <div class="panel">941 <div class="panel-title">COMPETITOR_FUNCTIONS</div>942 <div id="competitorList" style="font-size: 0.8rem; color: #666;">943 None loaded...944 </div>945 </div>946 947 <div class="panel">948 <div class="panel-title">ACHIEVEMENTS</div>949 <div id="achievementsList" style="font-size: 0.8rem; color: #666; min-height: 40px;">950 No achievements yet...951 </div>952 </div>953 954 <button onclick="toggleRules()" style="border: 1px solid var(--text-main); background: transparent;">955 VIEW RULES [?]956 </button>957 958 <button onclick="toggleHints()" style="border: 1px solid var(--hyper-purple); background: transparent; color: var(--hyper-purple);">959 SHOW HINTS [๐ก]960 </button>961 962 <button onclick="resetProgress()" style="border: 1px solid var(--alert); background: transparent; color: var(--alert); margin-top: 10px; font-size: 0.85rem;">963 RESET PROGRESS [โ ๏ธ]964 </button>965 </aside>966 967 <main class="game-area">968 <header class="level-header">969 <div class="objective-badge" id="objectiveBadge">BUILD YOUR FUNCTION</div>970 <h1 class="level-title" id="lvlName">INITIALIZING...</h1>971 <p style="max-width: 800px; color: var(--text-muted); margin-top: 10px;" id="lvlDesc">Loading challenge parameters...</p>972 </header>973 974 <div class="panel" style="border-color: var(--acid);">975 <div class="panel-title" style="background: var(--acid); color: black;">TEST_SCENARIOS</div>976 <div class="scenario-grid" id="scenarioGrid"></div>977 </div>978 979 <div class="editor-section">980 <div class="editor-panel">981 <div class="editor-header">982 <span class="editor-title">YOUR FUNCTION DEFINITION</span>983 <span style="color: #666; font-size: 0.8rem;">โ Pre-filled template โข Edit to refine</span>984 </div>985 <textarea id="functionEditor" placeholder='{\n "name": "my_function",\n "description": "What my function does...",\n "parameters": {\n "type": "object",\n "properties": {\n "param1": {\n "type": "string",\n "description": "First parameter"\n }\n },\n "required": ["param1"]\n }\n}'></textarea>986 </div>987 988 <div class="editor-panel">989 <div class="editor-header">990 <span class="editor-title">PARSED OUTPUT</span>991 <span style="color: #666; font-size: 0.8rem;">Validation</span>992 </div>993 <div class="json-output" id="jsonOutput">// Your JSON will be validated here...</div>994 </div>995 </div>996 997 <div class="hint-panel" id="hintPanel">998 <div class="hint-title">๐ก STRATEGIC HINTS</div>999 <div class="hint-content" id="hintContent"></div>1000 </div>1001 1002 <div class="action-bar">1003 <button id="testBtn" onclick="testFunction()">TEST FUNCTION</button>1004 <button class="secondary" onclick="resetEditor()">RESET</button>1005 <button class="secondary" onclick="loadTemplate()">๐ STANDARD TEMPLATE</button>1006 <button class="secondary" id="nextBtn" onclick="nextLevel()" style="display: none;">NEXT LEVEL โ</button>1007 </div>1008 1009 <div class="result-panel" id="resultPanel">1010 <div class="result-header">1011 <span class="result-title" id="resultTitle">RESULTS</span>1012 <span class="result-score" id="resultScore">+0</span>1013 </div>1014 <div class="result-breakdown" id="resultBreakdown"></div>1015 </div>1016 1017 <div class="execution-logs">1018 <div class="logs-header">1019 <span class="logs-title">โ๏ธ EXECUTION LOGS // Real-time Model Behavior</span>1020 <button class="logs-clear" onclick="clearLogs()">CLEAR LOGS</button>1021 </div>1022 <div class="logs-content" id="logsContent">1023 <div style="color: #666; text-align: center; padding: 40px 20px;">1024 Logs will appear here when you test a function...1025 </div>1026 </div>1027 </div>1028 1029 </main>1030 </div>1031 1032 <div class="model-info" id="modelInfo" style="display: none;">1033 <div>1034 <strong>Model:</strong> <span id="modelName">-</span> | 1035 <strong>Version:</strong> <span id="modelVersion">-</span> | 1036 <strong>Quantization:</strong> <span id="modelQuantization">-</span> | 1037 <strong>Device:</strong> <span id="modelDevice">-</span> |1038 1039 <strong>Made by Gaurav Chauhan</strong> |1040 <strong>2796gaurav@gmail.com</strong> |1041 <strong><a href="https://www.linkedin.com/in/gauravc2708/" target="_blank" rel="noopener noreferrer">LinkedIn</a></strong> |1042 1043 </div>1044 1045 </div>1046 1047 <script type="module">1048 // Import idb for IndexedDB1049 import { openDB } from 'https://cdn.jsdelivr.net/npm/idb@7/+esm';1050 1051 // 1. Add IndexedDB for explicit cache control1052 const dbPromise = openDB('function-arena-cache', 1, {1053 upgrade(db) {1054 db.createObjectStore('models');1055 db.createObjectStore('tokenizers');1056 db.createObjectStore('level-data');1057 },1058 });1059 1060 // 3. Add telemetry for optimization insights1061 const telemetry = {1062 modelLoadTime: 0,1063 averageGenerationTime: 0,1064 cacheHitRate: 0,1065 deviceType: null,1066 generationTimes: [],1067 cacheHits: 0,1068 cacheMisses: 0,1069 init() {1070 // Detect device type1071 const hasWebGPU = !!navigator.gpu;1072 const isMobile = /Android|webOS|iPhone|iPad|iPod|BlackBerry|IEMobile|Opera Mini/i.test(navigator.userAgent);1073 this.deviceType = hasWebGPU ? 'webgpu' : (isMobile ? 'mobile-cpu' : 'desktop-cpu');1074 1075 // Track page load1076 if (typeof gtag !== 'undefined') {1077 gtag('event', 'page_load', {1078 device_type: this.deviceType,1079 timestamp: new Date().toISOString()1080 });1081 }1082 },1083 trackModelLoad(time) {1084 this.modelLoadTime = time;1085 if (typeof gtag !== 'undefined') {1086 gtag('event', 'model_load', {1087 load_time: time,1088 device_type: this.deviceType1089 });1090 }1091 },1092 trackGeneration(time) {1093 this.generationTimes.push(time);1094 // Keep only last 100 generations1095 if (this.generationTimes.length > 100) {1096 this.generationTimes.shift();1097 }1098 this.averageGenerationTime = this.generationTimes.reduce((a, b) => a + b, 0) / this.generationTimes.length;1099 1100 if (typeof gtag !== 'undefined') {1101 gtag('event', 'function_generation', {1102 generation_time: time,1103 average_time: this.averageGenerationTime1104 });1105 }1106 },1107 trackCacheHit(hit) {1108 if (hit) {1109 this.cacheHits++;1110 } else {1111 this.cacheMisses++;1112 }1113 const total = this.cacheHits + this.cacheMisses;1114 this.cacheHitRate = total > 0 ? (this.cacheHits / total) * 100 : 0;1115 1116 if (typeof gtag !== 'undefined') {1117 gtag('event', 'cache_access', {1118 cache_hit: hit,1119 hit_rate: this.cacheHitRate1120 });1121 }1122 },1123 trackLevelComplete(levelId, score, passed) {1124 if (typeof gtag !== 'undefined') {1125 gtag('event', 'level_complete', {1126 level_id: levelId,1127 score: score,1128 passed: passed,1129 average_generation_time: this.averageGenerationTime,1130 cache_hit_rate: this.cacheHitRate1131 });1132 }1133 },1134 getMetrics() {1135 return {1136 modelLoadTime: this.modelLoadTime,1137 averageGenerationTime: this.averageGenerationTime,1138 cacheHitRate: this.cacheHitRate,1139 deviceType: this.deviceType,1140 totalGenerations: this.generationTimes.length1141 };1142 }1143 };1144 1145 // Initialize telemetry1146 telemetry.init();1147 1148 // 2. Add cache warmup on idle1149 function setupCacheWarmup() {1150 if ('requestIdleCallback' in window) {1151 requestIdleCallback(() => {1152 // Preload next level's competitor functions1153 const nextLevel = levels[state.levelIdx + 1];1154 if (nextLevel) {1155 // Prepare next level data in IndexedDB1156 dbPromise.then(db => {1157 return db.put('level-data', nextLevel, `level-${nextLevel.id}`);1158 }).then(() => {1159 console.log('โ Next level data cached');1160 telemetry.trackCacheHit(true);1161 }).catch(err => {1162 console.log('Cache warmup failed:', err);1163 });1164 }1165 }, { timeout: 5000 });1166 } else {1167 // Fallback for browsers without requestIdleCallback1168 setTimeout(() => {1169 const nextLevel = levels[state.levelIdx + 1];1170 if (nextLevel) {1171 dbPromise.then(db => {1172 return db.put('level-data', nextLevel, `level-${nextLevel.id}`);1173 }).catch(err => console.log('Cache warmup failed:', err));1174 }1175 }, 2000);1176 }1177 }1178 1179 // GAME LEVELS1180 const levels = [1181 {1182 id: 1,1183 title: "BASIC_TRIGGER",1184 description: "Simple weather function. Make it trigger for weather queries only.",1185 difficulty: "NOVICE",1186 scenarios: [1187 { query: "What's the weather in Tokyo?", shouldTrigger: true, icon: "โ๏ธ" },1188 { query: "Get weather for London", shouldTrigger: true, icon: "๐ง๏ธ" },1189 { query: "Tell me about Paris history", shouldTrigger: false, icon: "๐" },1190 { query: "What time is it?", shouldTrigger: false, icon: "๐" },1191 ],1192 competitors: [],1193 hints: [1194 "Focus on weather-related keywords in your description",1195 "Use a clear name like 'get_weather' or 'fetch_weather'",1196 "Add a location parameter to make it more specific"1197 ],1198 starterCode: {1199 name: "get_weather",1200 description: "Get current weather information for a specified location",