Team Ai
Apppublic

2796gauravc/functiongemma-function-arena

sourceHugging Facemitupdated 10mo agoView on Hugging Face
0likes
index.html2645 linesDownload Raw Back to root
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",

Showing the first 1,200 of 2645 lines. Download the file for the rest.